/* ══════════════════════════════════════════════════════════════════════════
   floom-editorial.css — the editorial sheet (About, Contact, Demo, Security,
   Resources, Privacy, Terms)

   The reference is a journal's index: hairline rules across the page, cells
   divided by vertical rules, a title over a small outlined tag with a
   two-line credit at each cell's foot, and below them an orange panel pinned
   at its corners with a field of dots.

   It sits on the same 12-column grid as every other page. The vertical rules
   are drawn in the gutters, so the words stay on the column edges, and every
   row splits on the same gutter (6 | 7, and 3 | 4 and 9 | 10 in the row of
   four), so the rules run on from one band to the next as one ledger.
   ══════════════════════════════════════════════════════════════════════════ */

.ed{
  --ed-rule: var(--border);
  /* A band's top and bottom: less than a section's, because the rules
     already separate the bands. */
  --ed-pad: round(clamp(40px, 5.6vw, 80px), 8px);
  /* Half the gutter, on the 4px grid: where a vertical rule sits. */
  --ed-mid: round(calc(var(--fl-col-gap) / -2), 4px);
}

/* ── labels ───────────────────────────────────────────────────────────────
   The site's own. A section is named by .ap-eyebrow — the orange square and
   its name (floom-apple.css) — set flush left on this sheet rather than
   centred. Anything smaller (a card's stage, a list's heading) is the
   system's uppercase label, with the thread's cell (.th-cell) where it marks
   something. */
.ed .ap-eyebrow{ justify-content: flex-start; margin: 0; }
.ed-kicker,
.ed-list-k{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font);
  font-size: 12.41px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color .24s var(--th-ease);
}
/* A band that opens with its eyebrow rather than a heading. */
.ed-bandhead{ padding-top: var(--sp-8); }

/* ── headings ──────────────────────────────────────────────────────────────
   In the site's capitals: a page title as the product pages set theirs
   (.pp-h1), a section's heading as the house heading (--fl-head-*). */
.ed-h1{
  font-family: var(--font-display);
  font-size: var(--fl-t-display);
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--black);
}
.ed-h2{
  font-family: var(--font-display);
  font-size: var(--fl-head-size);
  font-weight: var(--fl-head-weight);
  letter-spacing: var(--fl-head-track);
  line-height: var(--fl-head-lead);
  text-transform: uppercase;
  color: var(--black);
}
.ed-copy p{
  max-width: 36em;
  font-size: clamp(15.79px, 1.24vw, 17.81px);
  line-height: 1.3;
  color: var(--text-secondary);
}
.ed-copy p + p{ margin-top: var(--sp-4); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.ed-hero{
  padding: round(clamp(120px, 11.1vw, 160px), 8px) 0 var(--ed-pad);
}
.ed-hero .ap-eyebrow{ grid-column: 1 / -1; justify-self: start; }
.ed-hero .ed-h1{ grid-column: 1 / span 10; margin-top: var(--fl-gap-eyebrow); }
.ed-lede{
  grid-column: 1 / span 6;
  margin-top: var(--sp-6);
  font-size: var(--fl-t-lede);
  line-height: 1.3;
  color: var(--text-secondary);
}

/* ── bands and cells ───────────────────────────────────────────────────────
   A band is ruled across the whole window; a cell after the first draws its
   vertical rule in the gutter before it, running the band's full height. */
.ed-band{ border-top: 1px solid var(--ed-rule); }
.ed-cell{ position: relative; }
.ed-cell + .ed-cell::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ed-mid);
  width: 1px;
  background: var(--ed-rule);
}

/* A row of two: the heading on the left half, the words on the right. */
.ed-row > .ed-cell{ grid-column: span 6; padding-block: var(--ed-pad); }
.ed-row > .ed-cell + .ed-cell{ padding-left: var(--sp-6); }
.ed-row-head{ border-bottom: 1px solid var(--ed-rule); }
/* The words sit on the heading's last line. The cell itself keeps the row's
   full height, or its rule would start short of the band's. */
.ed-row-head .ed-copy{ display: flex; flex-direction: column; justify-content: flex-end; }

/* ── the row of four: the reference's cards ────────────────────────────────
   Title, tag, then the credit pushed to the foot. Each one is a link to the
   product the stage lives in; hover answers in the tag's border and the
   credit, and the thread at its end draws on, as every link on the site. */
.ed-cards > .ed-card{ grid-column: span 3; }
.ed-card{
  display: flex;
  flex-direction: column;
  min-height: round(clamp(280px, 25vw, 360px), 8px);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  color: var(--black);
  text-decoration: none;
}
.ed-card:first-child{ padding-left: 0; }
.ed-card:last-child{ padding-right: 0; }
.ed-card:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: var(--sp-2); }
.ed-card-in{ display: flex; flex-direction: column; flex: 1; }
.ed-card-t{
  font-family: var(--font-display);
  font-size: var(--fl-t-title2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ed-card .ed-kicker{ align-self: flex-start; margin-top: var(--sp-4); }
.ed-card-foot{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-8);
}
.ed-meta{ display: flex; flex-direction: column; gap: var(--sp-1); }
.ed-meta-k{
  font-size: 12.41px;
  line-height: 1.3;
  color: var(--text-secondary);
}
.ed-meta-v{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: color .24s var(--th-ease);
}
.ed-meta-n{
  font-size: 14px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.ed-card:is(:hover, :focus-visible) .ed-kicker{ color: var(--black); }
.ed-card:is(:hover, :focus-visible) .ed-meta-v{ color: var(--ap-orange); }

/* ── the panel ─────────────────────────────────────────────────────────────
   The reference's closing card: orange, pinned at the corners, its heading
   top-left, the words and the button stepped in under it, and a sunflower of
   dots on the right. The text is Off Black, not White: on this orange that
   is 5:1 where White would be 3.6:1. */
.ed-cta{ padding-block: round(clamp(24px, 3.3vw, 48px), 8px); }
.ed-panel{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--fl-col-gap);
  min-height: round(clamp(360px, 31vw, 448px), 8px);
  padding: round(clamp(32px, 3.3vw, 48px), 8px);
  border-radius: clamp(10px, 1.1vw, 16px);
  background: var(--ap-orange);
  color: var(--fl-ink);
}
.ed-panel .ed-h2{ grid-column: 1 / span 4; grid-row: 1; color: var(--fl-ink); text-wrap: balance; }
.ed-panel-foot{
  grid-column: 3 / span 5;
  grid-row: 2;
  align-self: end;
  margin-top: var(--sp-12);
}
.ed-panel-foot p{
  max-width: 28em;
  font-size: 15.79px;
  line-height: 1.3;
  color: var(--fl-ink);
}
.ed-panel-foot .ap-btn{ margin-top: var(--sp-6); }

/* The pins: four White dots in the corners, over anything that runs under
   them (the field does, on a phone). */
.ed-pin{
  position: absolute;
  z-index: 1;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
}
.ed-pin.is-tl{ top: var(--sp-4); left: var(--sp-4); }
.ed-pin.is-tr{ top: var(--sp-4); right: var(--sp-4); }
.ed-pin.is-bl{ bottom: var(--sp-4); left: var(--sp-4); }
.ed-pin.is-br{ bottom: var(--sp-4); right: var(--sp-4); }

/* The field: a Vogel spiral (each dot a golden angle round from the last, at
   the square root of its index out), a White dot at its heart. On entering
   the dots pop out from the centre one after another, on a spring; then the
   whole field turns, once every four minutes. */
.ed-field{
  grid-column: 9 / -1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
  width: min(100%, 320px);
  aspect-ratio: 1;
}
.ed-dots{
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: ed-spin 240s linear infinite;
}
.ed-dots circle{
  fill: var(--fl-ink);
  transform-box: fill-box;
  transform-origin: center;
}
.ed-dots .ed-dot-c{ fill: #FFFFFF; }
.fl-motion .ed-field:not(.is-revealed) .ed-dots circle{ transform: scale(0); }
.fl-motion .ed-field.is-revealed .ed-dots circle{
  animation: ed-pop .72s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms) both;
}
@keyframes ed-spin{ to{ transform: rotate(1turn); } }
@keyframes ed-pop{ from{ transform: scale(0); } }

@media (prefers-reduced-motion: reduce){
  .ed-dots,
  .ed-dots circle{ animation: none !important; transform: none !important; }
}

/* ── tablet: rows stack, the four go two by two ─────────────────────────── */
@media (max-width: 1023.98px){
  .ed-hero .ed-h1{ grid-column: 1 / -1; }
  .ed-lede{ grid-column: 1 / span 10; }

  /* A heading and its words belong together: stacked, no rule between. */
  .ed-row > .ed-cell{ grid-column: 1 / -1; }
  .ed-row > .ed-cell:first-child{ padding-bottom: var(--sp-6); }
  .ed-row > .ed-cell + .ed-cell{ padding-top: 0; padding-left: 0; }
  .ed-row > .ed-cell + .ed-cell::before{ display: none; }

  .ed-cards > .ed-card{ grid-column: span 6; }
  .ed-card:nth-child(2){ padding-right: 0; }
  .ed-card:nth-child(3){ padding-left: 0; }
  .ed-card:nth-child(3)::before{ display: none; }
  .ed-card:nth-child(n+3)::after{
    content: "";
    position: absolute;
    top: 0;
    height: 1px;
    background: var(--ed-rule);
  }
  .ed-card:nth-child(3)::after{ left: 0; right: var(--ed-mid); }
  .ed-card:nth-child(4)::after{ left: var(--ed-mid); right: 0; }

  .ed-panel .ed-h2{ grid-column: 1 / span 6; }
  .ed-panel-foot{ grid-column: 1 / span 7; }
}

/* ── phone: one column, bar the four ────────────────────────────────────── */
@media (max-width: 719.98px){
  .ed-lede{ grid-column: 1 / -1; }

  /* The four stay two by two, as on a tablet: the rules and the outer
     edges carry over from there, and only the insides tighten, 8 either
     side of the middle rule, so the words sit a page margin off it. */
  .ed-card{ min-height: 0; padding: var(--sp-6) var(--sp-2); }

  .ed-panel{
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--sp-8) var(--sp-6);
  }
  .ed-panel-foot{ margin-top: var(--sp-6); }
  /* The field runs off the panel's corner, as the reference's does off its
     frame, so the words keep the panel's width. */
  .ed-field{
    align-self: flex-end;
    width: 224px;
    margin: var(--sp-8) calc(var(--sp-12) * -1) calc(var(--sp-16) * -1) 0;
  }
}

/* Under 480 a card's words are 163 wide at 390, and "Portfolio Intelligence"
   with its thread is 141: beside the number it broke onto two lines. The
   number steps up to the "See it in" line, out of the row, and the name
   keeps the full width. */
@media (max-width: 479.98px){
  .ed-card-foot{ position: relative; }
  .ed-meta-n{ position: absolute; top: var(--sp-8); right: 0; }
}

/* ══ CONTACT ════════════════════════════════════════════════════════════════
   Two more references, set on the same sheet: a hero whose words sit on the
   right of a large heading with a pill beside them; a numbered row of line
   drawings divided by rules; and a block of facts — words on the left, three
   recessed cards with a large figure each on the right. */

.ed-sr{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ── the split hero ────────────────────────────────────────────────────────
   The heading takes seven columns, balanced over its lines so it stands as a
   block, as the reference's does; the words and the pill take the last four,
   level with the heading's top. */
.ed-hero.is-split .ed-h1{ grid-column: 1 / span 7; grid-row: 2; text-wrap: balance; }
.ed-hero-side{
  grid-column: 9 / -1;
  grid-row: 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: round(clamp(24px, 3.3vw, 48px), 8px);
  margin-top: var(--fl-gap-eyebrow);
}
.ed-hero-side p{
  max-width: 24em;
  font-size: clamp(15.79px, 1.24vw, 17.81px);
  line-height: 1.3;
  color: var(--text-secondary);
}

/* ── the numbered row ──────────────────────────────────────────────────────
   The ruled cards' grid, rules and stacking, with different contents: a
   number, a line drawing, a title, a line, and the way on. The drawings are
   64px on the thread's ruled weight (1.75) and draw themselves on the first time they are
   seen, the orange part landing last. */
.ed-tile-n{
  font-size: 12.41px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--black);
}
.ed-tile-ic{
  display: block;
  width: 64px; height: 64px;
  margin-top: var(--sp-8);
  overflow: visible;
  color: var(--black);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.ed-tile-ic path{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ed-tile-ic .is-accent{ stroke: var(--ap-orange); }
.ed-tile-ic .is-cell{ fill: var(--ap-orange); stroke: none; }
.ed-tile-t{
  margin-top: var(--sp-8);
  font-family: var(--font-display);
  font-size: var(--fl-t-title2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ed-tile-d{
  margin-top: var(--sp-3);
  max-width: 22em;
  font-size: 15.79px;
  line-height: 1.3;
  color: var(--text-secondary);
}
.ed-tile-a{ margin-top: auto; padding-top: var(--sp-8); }
.ed-tile:is(:hover, :focus-visible) .st-link{ color: var(--ap-orange); }
.ed-tile:is(:hover, :focus-visible) .ed-tile-ic{ transform: translateY(-4px); }

/* Drawn on: every stroke is pathLength 1, so one dash covers it; the gap is
   twice that so no round cap is left standing at either end. */
.fl-motion .ed-tile-ic path:not(.is-cell){
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s var(--fl-ease-out) calc(var(--fl-delay, 0ms) + 160ms);
}
.fl-motion .ed-tile-ic .is-cell{
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--fl-delay, 0ms) + 760ms);
}
.fl-motion .is-revealed .ed-tile-ic path{ stroke-dashoffset: 0; }
.fl-motion .is-revealed .ed-tile-ic .is-cell{ transform: none; }

/* ── words beside facts ────────────────────────────────────────────────────
   Five columns of words, then three recessed cards across the last six:
   one wide over two. The words' foot sits level with the cards' foot. */
.ed-split{ align-items: stretch; padding-block: var(--ed-pad); }
.ed-split-copy{
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ed-split-copy .ed-h2{ margin-top: var(--fl-gap-eyebrow); }
.ed-two{
  max-width: 26em;
  font-size: clamp(15.79px, 1.24vw, 17.81px);
  line-height: 1.3;
  color: var(--black);
}
.ed-split-copy > .ed-two{ margin-top: var(--sp-6); }
.ed-split-copy > .st-link{ margin-top: var(--sp-6); }
.ed-mute{ color: var(--text-secondary); }
.ed-split-foot{ margin-top: auto; padding-top: var(--sp-12); }

.ed-bento{
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.ed-stat{
  display: flex;
  flex-direction: column;
  min-height: round(clamp(200px, 17.8vw, 256px), 8px);
  padding: round(clamp(24px, 2.2vw, 32px), 8px);
  border-radius: 16px;
  background: var(--fl-panel);
  color: #312E2E;
}
.ed-stat.is-wide{ grid-column: 1 / -1; }
.ed-stat-k{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 15.79px;
  font-weight: 500;
  line-height: 1.3;
}
.ed-stat-v{
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-8);
  font-family: var(--font-display);
  font-size: var(--fl-t-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--fl-ink);
}
.ed-stat-u{
  font-family: var(--font);
  font-size: var(--fl-t-title3);
  font-weight: 500;
  letter-spacing: 0;
  color: #312E2E;
}
.ed-stat-c{ margin-top: var(--sp-3); font-size: 15.79px; line-height: 1.3; }

/* ── an address: the site's text link (.st-link), under the line that
   offers it */
.ed-mail{
  display: flex;
  align-items: center;
  margin-top: var(--sp-4);
}

/* ── contact: tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1023.98px){
  .ed-hero.is-split .ed-h1{ grid-column: 1 / -1; }
  .ed-hero-side{ grid-column: 1 / span 8; grid-row: 3; margin-top: var(--sp-8); }
  .ed-split-copy,
  .ed-bento{ grid-column: 1 / -1; }
  .ed-bento{ margin-top: var(--sp-12); }
}

/* ── contact: phone ──────────────────────────────────────────────────────── */
@media (max-width: 719.98px){
  .ed-hero-side{ grid-column: 1 / -1; }
  .ed-bento{ grid-template-columns: minmax(0, 1fr); }
  .ed-stat{ min-height: 176px; }
}

/* ══ BOOKING ════════════════════════════════════════════════════════════════
   The pieces the demo page shares with the sheet: the ruled facts list, the
   points with the cell, and the scheduler's card. The page's own layout (the
   frame, the steps, the questions) is floom-book.css.

   The scheduler is Calendly's, in a cross-origin frame, so its inside is
   theirs. What is ours: the frame is held under 640px, where Calendly lays
   out edge to edge in one column instead of drawing a second, shadowed card
   inside ours (it switches between 640 and 680, measured); the card follows
   the height Calendly reports for each step, so there is never an inner
   scrollbar or a band of empty white; and if it never arrives the card says
   so and gives the address instead (floom-book.js). While it boots the demo
   page shows its own waiting face (floom-book.css). */
/* The facts of the call, as a ruled list. */
.ed-facts{ border-top: 1px solid var(--ed-rule); }
.ed-facts > div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--ed-rule);
}
.ed-facts dt{
  font-size: 12.41px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ed-facts dd{
  font-size: 15.79px;
  font-weight: 500;
  line-height: 1.3;
  text-align: right;
  color: var(--black);
}

/* What the call covers: the orange cell, a title, a line. */
.ed-points{ display: grid; gap: var(--sp-6); margin-top: var(--sp-8); list-style: none; }
.ed-points li{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); }
.ed-points .th-cell{ margin-top: var(--sp-2); }
.ed-points h3{
  font-family: var(--font-display);
  font-size: var(--fl-t-title3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ed-points p{
  grid-column: 2;
  margin-top: var(--sp-2);
  font-size: 15.79px;
  line-height: 1.3;
  color: var(--text-secondary);
}

/* ── the scheduler's card ──────────────────────────────────────────────────*/
.ed-cal-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  background: #FFFFFF;
}
/* The hairline is drawn over the frame, not under it: an inset shadow on the
   card itself would sit beneath Calendly's white page and vanish. */
.ed-cal-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--gray-200);
  pointer-events: none;
}
.ed-cal .calendly-inline-widget{
  max-width: 640px;
  min-width: 0;
  height: var(--ed-cal-h, 608px);
  margin-inline: auto;
  transition: height .48s var(--fl-ease-out);
}
/* Calendly's own loading wheel stands down; the demo page's waiting face
   (floom-book.css) is the loading state. */
.ed-cal .calendly-spinner{ display: none; }

/* It never arrived: said in words, with the way round it. */
.ed-cal-fail{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-8);
  background: #FFFFFF;
}
.ed-cal.is-failed:not(.is-ready) .ed-cal-fail{ display: flex; }
.ed-cal-fail h2{
  font-family: var(--font-display);
  font-size: var(--fl-t-title3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--black);
}
.ed-cal-fail p{ max-width: 28em; font-size: 15.79px; line-height: 1.3; color: var(--text-secondary); }

/* Calendly's privacy link lived in the details column this page hides, so
   it is carried here instead. */
.ed-cal-note{
  margin-top: var(--sp-3);
  font-size: 12.41px;
  line-height: 1.3;
  color: var(--text-secondary);
}
.ed-cal-note a{ text-decoration: underline; text-underline-offset: 2px; }
.ed-cal-note a:is(:hover, :focus-visible){ color: var(--ap-orange); }

@media (prefers-reduced-motion: reduce){
  .ed-cal .calendly-inline-widget{ transition: none; }
}

/* ══ POLICY ═════════════════════════════════════════════════════════════════
   The security page: the Contact page's hero, numbered row and facts, then
   the policy itself in ruled rows. The policy's wording is kept as written;
   only its lists are set as lists. */

/* Lists with the cell: filled for what to do and what is in scope, open
   (an outline) for what not to do and what is out. The heading over each
   list says which; the mark only repeats it. */
.ed-list-k{ display: flex; margin-bottom: var(--sp-3); }
.ed-list-k:not(:first-child){ margin-top: var(--sp-8); }
.ed-list{ display: grid; gap: var(--sp-3); list-style: none; }
.ed-list li{
  position: relative;
  padding-left: var(--sp-6);
  max-width: 36em;
  font-size: clamp(15.79px, 1.24vw, 17.81px);
  line-height: 1.3;
  color: var(--black);
}
/* Centred on the first line: half the line box, less half the mark. */
.ed-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(.65em - 4px);
  width: 8px; height: 8px;
  background: var(--ap-orange);
}
.ed-list.is-not li::before{
  background: transparent;
  box-shadow: inset 0 0 0 1.25px var(--th-ink);
}
.ed-cell > .ed-h2 + .ed-list,
.ed-cell > .ed-h2 + p{ margin-top: var(--sp-6); }
.ed-cell > .ed-h2 ~ p + p{ margin-top: var(--sp-4); }
.ed-cell > .ed-h2 ~ p{
  max-width: 28em;
  font-size: clamp(15.79px, 1.24vw, 17.81px);
  line-height: 1.3;
  color: var(--text-secondary);
}

/* Links inside running words, and the small print under a policy. */
.ed-copy a,
.ed-note a,
.ed-cell > .ed-h2 ~ p a{
  color: var(--accent);
  text-underline-offset: 3px;
}
.ed-copy a:is(:hover, :focus-visible),
.ed-note a:is(:hover, :focus-visible),
.ed-cell > .ed-h2 ~ p a:is(:hover, :focus-visible){ text-decoration: underline; }
.ed-copy p.ed-note{
  margin-top: var(--sp-8);
  font-size: 14px;
}
.ed-copy p.ed-note + p.ed-note{ margin-top: var(--sp-3); }

/* In-page links land below the fixed bar. */
.ed [id]{ scroll-margin-top: var(--sp-24); }

/* A pair: two sections side by side, a rule between. Stacked, they stay two
   sections, so the rule turns and runs across between them. */
@media (max-width: 1023.98px){
  .ed-row.is-pair > .ed-cell:first-child{ padding-bottom: var(--ed-pad); }
  .ed-row.is-pair > .ed-cell + .ed-cell{ padding-top: var(--ed-pad); }
  .ed-row.is-pair > .ed-cell + .ed-cell::before{
    display: block;
    top: 0; bottom: auto; left: 0; right: 0;
    width: auto; height: 1px;
  }
}

/* ── a seal and the actions under a set of facts ─────────────────────────
   The AICPA seal is shown as supplied: sized by width alone, height from its
   own 748 x 743, no radius, filter, ground or crop, and always a link to
   aicpa.org/soc4so (its licence). */
.ed-cell > .ap-eyebrow + .ed-h2{ margin-top: var(--fl-gap-eyebrow); }
.ed-seal{ display: block; width: fit-content; margin-top: var(--sp-8); line-height: 0; }
.ed-seal img{ display: block; width: round(clamp(96px, 8.9vw, 128px), 4px); height: auto; }
.ed-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-8);
}

/* ══ LEGAL ══════════════════════════════════════════════════════════════════
   The Privacy Policy and the Terms of Use: the Contact page's split hero with
   the document's facts beside its title (when it last changed, who answers
   for it, its companion), then the document in one band. Its sections are
   listed on the left and held in view while the words run on the right; the
   section being read stands out in the list, in ink and a step larger, and
   the rest step back to Medium Gray (floom-editorial.js marks it with
   aria-current). On a phone the list is the contents at the top and each
   section carries its own heading. The wording is the document's own, and
   nothing folds: a legal text stays whole at every width. */
.ed-hero-side > .ed-facts{ align-self: stretch; }
.ed-facts a{ color: var(--accent); text-underline-offset: 3px; }
.ed-facts a:is(:hover, :focus-visible){ text-decoration: underline; }

/* The list: the facts' ruled rows, each link a touch target tall. */
.ed-toc{ list-style: none; border-top: 1px solid var(--ed-rule); }
.ed-toc a{
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 48px;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--ed-rule);
  font-size: 15.79px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black);
  transition: color .24s var(--th-ease);
}
.ed-toc .ed-tile-n{
  flex: none;
  min-width: 2ch;
  color: var(--text-secondary);
  transition: color .24s var(--th-ease);
}

/* The words: the preamble, then each section under a rule, its number
   first. The warranty and liability clauses are set in capitals by the
   document itself; they keep the ink so they stay as conspicuous as ever. */
.ed-sec{ margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--ed-rule); }
.ed-sec > .ed-tile-n{ display: block; color: var(--text-secondary); }
.ed-sec-h{ margin: var(--sp-4) 0 var(--sp-6); }
.ed-copy strong{ font-weight: 600; color: var(--black); }

/* Side by side from a tablet up, on the sheet's middle gutter (6 | 6 even
   where other rows stack, so the longest name fits at its larger size). The
   list holds a little under the bar; each section's heading is the list's,
   so on the right it stays for a screen reader and leaves the eye the
   number. The list's names are set at their larger size and drawn smaller,
   so the one being read grows without moving a row. */
@media (min-width: 720px){
  .ed-doc > .ed-cell{ grid-column: span 6; }
  .ed-doc > .ed-cell:first-child{ padding-bottom: var(--ed-pad); }
  .ed-doc > .ed-cell + .ed-cell{ padding-top: var(--ed-pad); padding-left: var(--sp-6); }
  .ed-doc > .ed-cell + .ed-cell::before{ display: block; }
  .ed-doc .ed-toc{ position: sticky; top: var(--sp-32); }

  .ed-sec{ margin-top: var(--sp-12); padding-top: var(--sp-12); }
  .ed-sec > .ed-tile-n{ margin-bottom: var(--sp-4); }
  .ed-sec-h{
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .ed-toc a{ color: var(--text-secondary); }
  .ed-toc-t{
    display: inline-block;
    font-size: 20.08px;
    scale: .7864;                 /* 15.79 of 20.08: the list's own size at rest */
    transform-origin: 0 50%;
    transition: scale .5s var(--fl-ease-out);
  }
  .ed-toc a:is(:hover, :focus-visible),
  .ed-toc a[aria-current],
  .ed-toc a[aria-current] .ed-tile-n{ color: var(--black); }
  .ed-toc a[aria-current] .ed-toc-t{ scale: 1; }
}
@media (prefers-reduced-motion: reduce){
  .ed-toc-t{ transition: none; }
}

/* ══ FOLDS ══════════════════════════════════════════════════════════════════
   On a phone a section marked data-ed-fold is its heading row until it is
   opened: the heading is the button (floom-editorial.js puts it there), with
   the FAQ's plus, and a tap opens or closes that section alone. Everything in
   the section that is not the heading leaves the layout while it is shut, so
   the markup needs no wrapper and a tablet or a desk sees the page as it was.
   Opened, the words come in under the heading. The security page's policy. */
.ed-fold-btn{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  width: 100%; min-height: 44px;
  margin: 0; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer;
  font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ed-fold-btn:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: 4px; border-radius: 4px; }
.ed-fold-t{ flex: 1 1 auto; }
.ed-fold-ic{ position: relative; flex: none; width: 28px; height: 28px; }
.ed-fold-ic::before, .ed-fold-ic::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  border-radius: 1px;
  background: var(--ap-ink);
  transition: transform .28s cubic-bezier(0, 0, 0, 1), opacity .28s cubic-bezier(0, 0, 0, 1);
}
.ed-fold-ic::before{ width: 14px; height: 1.75px; }
.ed-fold-ic::after{ width: 1.75px; height: 14px; }
.ed-fold-btn[aria-expanded="true"] .ed-fold-ic::after{ transform: scaleY(0); opacity: 0; }
@keyframes ed-fold-in{ from{ opacity: 0; translate: 0 8px; } }
@media (max-width: 719.98px){
  [data-ed-fold].is-shut .ed-h2 ~ *,
  [data-ed-fold].is-shut .ed-cell:not(:has(.ed-h2)){ display: none; }
  /* one row each, the same room above and below the heading, shut or open */
  [data-ed-fold].is-folding .ed-cell:has(.ed-h2),
  .ed-cell[data-ed-fold].is-folding{ padding-block: var(--sp-6); }
  [data-ed-fold].is-folding .ed-cell:not(:has(.ed-h2)){ padding-bottom: var(--sp-6); }
  /* The pair band's two are rows like the rest: the same room as theirs,
     and the pair's own rule between them runs edge to edge, as the bands'
     rules do, instead of stopping at the page margin. */
  .ed-row.is-pair > .ed-cell[data-ed-fold].is-folding{ padding-block: var(--sp-6); }
  .ed-row.is-pair > .ed-cell[data-ed-fold].is-folding + .ed-cell[data-ed-fold].is-folding::before{
    left: calc(50% - 50vw); right: auto; width: 100vw;
  }
  [data-ed-fold].is-folding:not(.is-shut) .ed-h2 ~ *,
  [data-ed-fold].is-folding:not(.is-shut) .ed-cell:not(:has(.ed-h2)){
    animation: ed-fold-in .42s cubic-bezier(.22, 1, .36, 1) both;
  }
  /* The security page's four timelines stay two by two on a phone: the cards
     tighten, and a unit too long for the half-width drops under its figure. */
  .ed-bento.is-pairs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-bento.is-pairs .ed-stat{ min-height: 0; padding: var(--sp-4); }
  .ed-bento.is-pairs .ed-stat-v{ flex-wrap: wrap; row-gap: var(--sp-1); padding-top: var(--sp-6); }
  .ed-bento.is-pairs .ed-stat-k,
  .ed-bento.is-pairs .ed-stat-c{ font-size: 14px; }
}
@media (prefers-reduced-motion: reduce){
  .ed-fold-ic::before, .ed-fold-ic::after{ transition: none; }
  [data-ed-fold].is-folding:not(.is-shut) .ed-h2 ~ *,
  [data-ed-fold].is-folding:not(.is-shut) .ed-cell:not(:has(.ed-h2)){ animation: none; }
}