/* InterviewWatch built-in ATS pages — layered on /blog/style.css + /product/service-pages.css.
   Only the components those two files don't already provide live here. */

/* --- answer-first block (the direct answer an AI assistant or a skimming reader lifts) --- */
/* No tinted panel: a hairline rule and larger type carry the emphasis. */
.answer{border:0;border-top:2px solid var(--ink);border-radius:0;background:none;padding:22px 0 0;margin:0}
.answer .answer-q{display:block;font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.answer p{font-size:19px;line-height:1.6;color:var(--ink);margin:0;max-width:80ch}
.answer p+p{margin-top:14px;font-size:16.5px;color:var(--body)}
.answer p strong{font-weight:750}

/* --- sibling guides, in the footer --- */
.foot-rail h4{margin:0 0 10px}
.foot-rail a{display:block}

/* --- key-facts strip: short, quotable, one fact per row --- */
.facts{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.facts div{display:grid;grid-template-columns:minmax(140px,.5fr) minmax(0,1fr);gap:14px;padding:13px 18px;border-top:1px solid var(--line-soft)}
.facts div:first-child{border-top:0}
.facts dt,.facts b{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.facts dd,.facts span{font-size:14.5px;color:var(--ink);margin:0}

/* --- pipeline board mock (six fixed stages) --- */
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#fbfcff);box-shadow:var(--shadow-sm);padding:16px}
.board .col{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 9px}
.board .col>h4{font-family:var(--mono);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:flex;justify-content:space-between;gap:6px}
.board .col>h4 i{font-style:normal;color:var(--accent)}
.board .card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px;margin-bottom:7px;box-shadow:var(--shadow-sm)}
.board .card:last-child{margin-bottom:0}
.board .card b{display:block;font-size:12px;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.board .card span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:3px}
.board .card .tagline{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-family:var(--mono);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:3px 6px;background:var(--accent-soft);color:var(--accent-dark)}
.board .card .tagline.ok{background:rgba(26,162,81,.1);color:var(--ok)}
.board .card .tagline.crit{background:rgba(229,56,78,.1);color:var(--crit)}
.boardcap{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}

/* ============================================================
   Flatten the card chrome on ATS pages. Same content, but ruled
   columns instead of a wall of rounded boxes, so a page reads as a
   document. Scoped to this stylesheet, product pages keep their cards.
   ============================================================ */
.grid-2,.grid-3{gap:4px 44px}
.grid-2>.info-card,.grid-3>.info-card{
  background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  box-shadow:none;padding:20px 0 22px}
.grid-2>.info-card h3,.grid-3>.info-card h3{font-size:17px;font-weight:760;color:var(--ink);margin-bottom:7px;letter-spacing:-.01em}
.grid-2>.info-card ul,.grid-3>.info-card ul{margin-top:10px;padding-left:0;list-style:none}
.grid-2>.info-card ul li,.grid-3>.info-card ul li{position:relative;padding:3px 0 3px 17px}
.grid-2>.info-card ul li:before{content:"";position:absolute;left:0;top:12px;width:6px;height:1.5px;background:var(--accent)}
.grid-3>.info-card ul li:before{content:"";position:absolute;left:0;top:12px;width:6px;height:1.5px;background:var(--accent)}
/* Restore the tick/cross for yes/no capability lists (.caps) inside a grid card,
   which the dash-bullet rule above would otherwise stomp on. */
.grid-2>.info-card ul.caps li,.grid-3>.info-card ul.caps li{padding-left:26px}
.grid-2>.info-card ul.caps li:before,.grid-3>.info-card ul.caps li:before{
  content:"\2713";width:auto;height:auto;top:0;font-family:var(--mono);font-weight:800;font-size:13px;
  background:none;color:var(--ok);line-height:1.55}
.grid-2>.info-card ul.caps li.no:before,.grid-3>.info-card ul.caps li.no:before{content:"\2715";color:var(--crit)}
@media(max-width:820px){.grid-3{grid-template-columns:1fr}}

/* --- headline feature list: hairline rules, no card chrome --- */
.bigfeat{list-style:none;margin:34px 0 0;padding:0;counter-reset:bf;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.bigfeat li{counter-increment:bf;padding:26px 0;border-top:1px solid var(--line);position:relative;min-width:0}
.bigfeat li:before{content:counter(bf,decimal-leading-zero);display:block;font-family:var(--mono);font-size:11px;font-weight:800;color:var(--accent);letter-spacing:.08em;margin-bottom:10px}
.bigfeat b{display:block;font-size:20px;font-weight:780;color:var(--ink);letter-spacing:-.02em;margin-bottom:7px}
.bigfeat p{margin:0;font-size:15px;line-height:1.65;color:var(--body)}
@media(max-width:820px){.bigfeat{grid-template-columns:1fr;gap:0}.bigfeat b{font-size:18px}}

/* --- yes/no capability list --- */
.caps{display:grid;gap:9px;margin:0;padding:0}
/* Not a grid: the bare text after each <b> would become an anonymous grid item and
   get dropped into the 22px icon column, wrapping one character per line. */
.caps li{list-style:none;position:relative;padding-left:30px;font-size:14.5px;line-height:1.55;color:var(--body)}
.caps li:before{content:"\2713";position:absolute;left:0;top:0;font-family:var(--mono);font-weight:800;font-size:13px;color:var(--ok);line-height:1.55}
.caps li.no:before{content:"\2715";color:var(--crit)}
.caps li b{color:var(--ink);font-weight:650}

/* --- price panel --- */
.priceband{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.pcardx{position:relative;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);padding:22px}
.pcardx.hi{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.12),0 1px 2px rgba(79,70,229,.16),0 20px 44px -26px rgba(79,70,229,.5)}
.pcardx .pillx{position:absolute;right:14px;top:14px;background:var(--accent);color:#fff;border-radius:999px;padding:4px 9px;font-size:10.5px;font-weight:800;letter-spacing:.02em;line-height:1.35}
.pcardx.hi .tierx{padding-right:96px}
.pcardx .tierx{font-family:var(--mono);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pcardx .amt{font-size:36px;font-weight:900;color:var(--ink);letter-spacing:-.03em;margin:8px 0 2px;line-height:1.1}
.pcardx .amt small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.pcardx .note{font-size:13.5px;color:var(--body);margin-bottom:14px}
.pcardx ul{margin:0;padding-left:0}
.pcardx li{list-style:none;font-size:13.5px;color:var(--body);padding:5px 0 5px 18px;position:relative}
.pcardx li:before{content:"\2713";position:absolute;left:0;top:5px;font-family:var(--mono);font-size:11px;font-weight:800;color:var(--accent)}

/* --- code snippet --- */
/* Grid items default to min-width:auto, so the un-wrapping <pre> below would widen
   the whole column (and the page) instead of scrolling inside its own box. */
.grid-2>*,.grid-3>*{min-width:0}
.code{max-width:100%;background:var(--night);border-radius:12px;padding:18px 20px;overflow-x:auto;box-shadow:var(--shadow-sm)}
.code pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:#dfe4f5;white-space:pre}
.code .k{color:#a5b4fc}
.code .s{color:#7ee0a8}
.code .c{color:#7c8aa8}
.codecap{margin-top:10px;font-size:12.5px;color:var(--muted)}

/* --- step list (HowTo) --- */
.steps{counter-reset:s;display:grid;gap:12px}
.steps li{list-style:none;counter-increment:s;position:relative;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);padding:15px 18px 15px 54px;font-size:14.5px;color:var(--body)}
.steps li:before{content:counter(s);position:absolute;left:15px;top:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:800}
.steps li b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
.steps li code{font-family:var(--mono);font-size:12.5px;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink)}

/* --- sibling-page link rail --- */
.rail{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.rail a{border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:#fff;font-size:13px;font-weight:650;color:var(--body)}
.rail a:hover{border-color:var(--accent);color:var(--accent)}
.rail a[aria-current="page"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}

/* --- inline note --- */
.scope{border:1px dashed var(--line);border-radius:12px;background:var(--surface);padding:16px 18px;font-size:14px;color:var(--body)}
.scope b{color:var(--ink)}

/* ============================================================
   Hero: a flat 2D product diagram used as a backdrop. It is masked
   so it dissolves toward the left and the edges, and the headline
   sits over the faded side where contrast is still comfortable.
   No perspective, no rotation, nothing to read at an angle.
   ============================================================ */
.service-hero{position:relative;overflow:hidden;min-height:566px;display:flex;align-items:center}
.service-hero>.wrap.hero-over{position:relative;z-index:2;display:block;width:100%;max-width:var(--maxw);padding-block:18px}
.hero-over h1,.hero-over p,.hero-over .eyebrow,.hero-over .toc{max-width:500px}
/* The headline wraps on its own. Pinning it to one line meant the type size was
   set by whatever the viewport could fit rather than by what reads well. */
@media(min-width:861px){
  .hero-over h1.hub-h1{max-width:14ch;font-size:clamp(34px,3.6vw,52px)}
}

/* Anchored to the centred content column, not the viewport. Anchoring to the
   viewport made the gap between the headline and the diagram grow without limit
   on wide screens, because the text stops at the wrap's max-width. */
.ats-stage{position:absolute;top:0;bottom:0;left:50%;width:var(--maxw);margin-left:calc(var(--maxw) / -2);
  z-index:0;pointer-events:none;
  /* The fade has to be gone, not merely dimmed, everywhere the headline sits.
     At .85 under the text the diagram was still legible enough to read as
     clutter behind the words. */
  -webkit-mask-image:linear-gradient(92deg,transparent 0 32%,rgba(0,0,0,.14) 42%,rgba(0,0,0,.62) 55%,#000 70%,rgba(0,0,0,.85) 88%,transparent 100%);
  mask-image:linear-gradient(92deg,transparent 0 32%,rgba(0,0,0,.14) 42%,rgba(0,0,0,.62) 55%,#000 70%,rgba(0,0,0,.85) 88%,transparent 100%)}
.ats-stage:before,.ats-stage:after{content:"";position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;pointer-events:none}
.ats-stage:before{width:340px;height:340px;left:2%;top:-14%;background:radial-gradient(circle,rgba(79,70,229,.38),transparent 68%);animation:blobA 15s ease-in-out infinite}
.ats-stage:after{width:320px;height:320px;right:-2%;bottom:-14%;background:radial-gradient(circle,rgba(26,162,81,.26),transparent 68%);animation:blobB 18s ease-in-out infinite}
@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-22px) scale(1.1)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,18px) scale(1.08)}}

.stage-deck{position:absolute;inset:0}

.gcard{position:absolute}
.gc-in{position:relative;border-radius:14px;padding:15px 16px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -26px rgba(10,14,26,.4),0 2px 6px -3px rgba(10,14,26,.08)}
.gc-t{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}

/* Flat placement, no depth. The board anchors the right, the two smaller
   cards sit under it, and the left edge dissolves under the headline. */
.gc-board{right:22px;top:52px;width:344px}
.gc-board .gc-in{padding:0;overflow:hidden}
.gc-bhead{display:flex;align-items:center;gap:8px;padding:13px 15px;border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.6)}
.gc-bhead b{font-size:12.5px;color:var(--ink);font-weight:750}
.gc-bhead .st{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ok)}
.gc-bhead .st i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.gc-cols{display:grid;grid-template-columns:repeat(3,1fr)}
.gc-col{padding:11px 10px;border-right:1px solid var(--line-soft)}
.gc-col:last-child{border-right:0}
.gc-col h5{margin:0 0 8px;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gc-col h5 em{font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums}
.gc-mini{background:#fff;border:1px solid var(--line);border-radius:7px;padding:6px 7px;margin-bottom:6px;box-shadow:0 1px 2px rgba(10,14,26,.05)}
.gc-mini:last-child{margin-bottom:0}
.gc-mini b{display:block;font-size:10px;font-weight:700;color:var(--ink);line-height:1.25}
.gc-mini span{display:block;font-family:var(--mono);font-size:8px;color:var(--muted);margin-top:2px}

/* an application arriving from the customer's own site */
.gc-apply{right:372px;top:150px;width:224px}
.gc-apply .row{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line-soft)}
.gc-apply .row:last-child{border-bottom:0}
.gc-apply .row i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.gc-apply .row.done i{background:var(--ok)}
.gc-apply .row span{margin-left:auto;font-family:var(--mono);font-size:8.5px;color:var(--muted)}

.gc-bfoot{padding:10px 15px;border-top:1px solid var(--line-soft);background:rgba(255,255,255,.55);font-size:10px;line-height:1.5;color:var(--muted)}
.gc-bfoot b{font-family:var(--mono);font-size:12px;font-weight:850;color:var(--accent)}

/* one identity, several cards */
.gc-cand{right:96px;bottom:34px;width:232px}
.gc-cand .who{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.gc-cand .av{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(150deg,var(--accent),#7c74f5);color:#fff;font-family:var(--mono);font-size:11px;font-weight:800}
.gc-cand .who b{display:block;font-size:12px;color:var(--ink)}
.gc-cand .who span{display:block;font-family:var(--mono);font-size:8.5px;color:var(--muted);margin-top:1px}
.gc-cand .job{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8.5px;color:var(--body);padding:5px 7px;border-radius:6px;background:var(--surface);margin-bottom:5px}
.gc-cand .job:last-child{margin-bottom:0}
.gc-cand .job em{font-style:normal;margin-left:auto;color:var(--accent-dark);font-weight:700}

/* entrance, then an endless slow drift, both flat */
.ats-motion .gc-in{opacity:0;transform:translateY(18px)}
.ats-stage.in .gc-in{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.22,.68,.36,1),transform .8s cubic-bezier(.22,.68,.36,1);
  transition-delay:var(--d,0ms)}
.ats-stage.in .gcard{animation:drift var(--dur,9s) ease-in-out infinite;animation-delay:var(--d,0ms)}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* Between the content column's width and the tablet cut-off the diagram scales
   down rather than disappearing. Anchoring it to a fixed 1180px column fixed the
   runaway gap on wide screens, but it also meant it no longer fit on a normal
   laptop window, where it was simply vanishing. */
@media(min-width:1024px) and (max-width:1240px){
  .ats-stage{left:0;right:0;width:auto;margin-left:0}
  /* Scaling from the right edge pushes the cards further right as they shrink,
     so keep the reduction mild and let the text column take the slack fluidly. */
  .stage-deck{transform:scale(.78);transform-origin:100% 45%}
  .hero-over h1,.hero-over p,.hero-over .eyebrow,.hero-over .toc{max-width:clamp(420px,44vw,540px)}
  .service-hero{min-height:508px}
}
/* At the very bottom of that band the text and the cards close to within ~20px,
   so shrink the deck a little further to reopen the gap. The headline runs on one
   line here, so the apply card has to clear its full width, not the text column. */
@media(min-width:1024px) and (max-width:1090px){
  .stage-deck{transform:scale(.72)}
}

/* Below the content column's own width there is no room to fade between the
   headline and the cards, so the backdrop is dropped rather than made unreadable. */
@media(max-width:1023px){
  .service-hero{min-height:0}
  .ats-stage{display:none}
  .hero-over h1,.hero-over p,.hero-over .eyebrow,.hero-over .toc{max-width:none}
}

/* --- intake diagram: three sources converging on one deduplicated record --- */
.flowdiagram{min-width:0;overflow:hidden;background:linear-gradient(180deg,#fff,#fbfcff);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:26px 22px}
.flowdiagram svg{display:block;width:100%;height:auto}
.fd-box{fill:#fff;stroke:var(--line);stroke-width:1.5}
.fd-box-key{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
.fd-row{fill:var(--surface);stroke:var(--line-soft);stroke-width:1}
.fd-t{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:650;fill:var(--ink)}
.fd-s{font-family:var(--mono);font-size:9.5px;fill:var(--muted)}
.fd-k{font-family:var(--mono);font-size:9.5px;fill:var(--accent-dark)}
.fd-wire{fill:none;stroke:var(--line);stroke-width:2;stroke-linecap:round}
.fd-cap{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}
.fd-scroll{min-width:0}
/* On a phone a 760-unit viewBox squeezes to ~305px and the labels render at
   about 4px. Below this width the diagram keeps its designed size and the
   reader swipes it instead; only this box scrolls, never the page. */
@media(max-width:820px){
  .flowdiagram{padding:20px 14px}
  .fd-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,rgba(0,0,0,.35) 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 94%,rgba(0,0,0,.35) 100%)}
  .fd-scroll svg{min-width:700px}
  .fd-cap:after{content:" Swipe the diagram to see all of it.";color:var(--accent)}
}
/* shared diagram vocabulary */
.fd-box-ok{fill:#eefaf3;stroke:var(--ok);stroke-width:1.5}
.fd-box-bad{fill:#fdf0f1;stroke:var(--crit);stroke-width:1.5}
.fd-box-mute{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.fd-bar{fill:var(--accent)}
.fd-bar-mute{fill:#dfe3f5}
.fd-bar-bad{fill:#f2b8bf}
.fd-tl{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;fill:var(--body)}
.fd-num{font-family:var(--mono);font-size:13px;font-weight:800;fill:var(--ink)}
.fd-num-bad{font-family:var(--mono);font-size:13px;font-weight:800;fill:var(--crit)}
.fd-num-ok{font-family:var(--mono);font-size:13px;font-weight:800;fill:var(--ok)}
.fd-axis{stroke:var(--line);stroke-width:1}
.fd-grid{stroke:var(--line-soft);stroke-width:1;stroke-dasharray:3 4}
.fd-plot{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.fd-plot.a{stroke:var(--crit)}
.fd-plot.b{stroke:var(--accent)}
.fd-legend{font-family:var(--mono);font-size:9.5px;font-weight:700}
.fd-ok{fill:var(--ok)}.fd-crit{fill:var(--crit)}.fd-acc{fill:var(--accent)}

/* Two-up diagram framing when a page contrasts a before and an after. */
.fd-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:760px){.fd-split{grid-template-columns:1fr}}

/* ============================================================
   Motion. Opt-in: styles only bind once the inline head script
   sets .ats-motion on <html>, so a page without the script (or
   with JS off) renders every element in its final state.
   ============================================================ */
.ats-motion .r-up,
.ats-motion .section-head,
.ats-motion .answer,
.ats-motion .flowdiagram,
.ats-motion .board,
.ats-motion .grid-3>.info-card,
.ats-motion .grid-2>*,
.ats-motion .priceband>.pcardx,
.ats-motion .rel-grid>.rel-card,
.ats-motion .faq>details,
.ats-motion .cta-band{opacity:0;transform:translateY(14px)}

.ats-motion .r-up.in,
.ats-motion .section-head.in,
.ats-motion .answer.in,
.ats-motion .flowdiagram.in,
.ats-motion .board.in,
.ats-motion .grid-3>.info-card.in,
.ats-motion .grid-2>.in,
.ats-motion .priceband>.pcardx.in,
.ats-motion .rel-grid>.rel-card.in,
.ats-motion .faq>details.in,
.ats-motion .cta-band.in{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.68,.36,1),transform .55s cubic-bezier(.22,.68,.36,1);
  transition-delay:var(--d,0ms)}

/* Peers in a row step in one after another rather than all at once. */
.ats-motion .grid-3>.info-card:nth-child(3n+2),
.ats-motion .grid-2>:nth-child(2n),
.ats-motion .priceband>.pcardx:nth-child(2),
.ats-motion .rel-grid>.rel-card:nth-child(2){--d:70ms}
.ats-motion .grid-3>.info-card:nth-child(3n+3),
.ats-motion .priceband>.pcardx:nth-child(3),
.ats-motion .rel-grid>.rel-card:nth-child(3){--d:140ms}
.ats-motion .rel-grid>.rel-card:nth-child(4){--d:210ms}

/* Board cards settle into their column, stepped left to right. */
.ats-motion .board .card{opacity:0;transform:translateY(9px) scale(.985)}
.ats-motion .board.in .card{opacity:1;transform:none;
  transition:opacity .45s cubic-bezier(.22,.68,.36,1),transform .45s cubic-bezier(.22,.68,.36,1);
  transition-delay:var(--d,0ms)}
.board .card{transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.board .card:hover{border-color:#cfd4e8;box-shadow:0 1px 2px rgba(10,14,26,.06),0 12px 24px -14px rgba(10,14,26,.28);transform:translateY(-2px)}
.board .col>h4 i{font-variant-numeric:tabular-nums}

/* Wires draw themselves, then a light pulse travels along each one. */
.ats-motion .fd-wire{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
.ats-motion .flowdiagram.in .fd-wire{stroke-dashoffset:0;transition:stroke-dashoffset .8s cubic-bezier(.4,.5,.2,1);transition-delay:var(--d,0ms)}
.fd-pulse{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;opacity:0}
.flowdiagram.in .fd-pulse{opacity:.85;animation:fdPulse 2.8s cubic-bezier(.5,0,.5,1) infinite;animation-delay:var(--d,0ms)}
@keyframes fdPulse{
  0%{stroke-dasharray:0 1 0 var(--len,300);opacity:0}
  12%{opacity:.85}
  70%,100%{stroke-dasharray:0 var(--len,300) 26 0;opacity:0}
}
/* The record node lights up as the wires land on it. */
.ats-motion .fd-land{opacity:0;transform:translateY(6px)}
.ats-motion .flowdiagram.in .fd-land{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.68,.36,1);transition-delay:var(--d,0ms)}

@media(max-width:900px){
  .board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}
  .facts div{grid-template-columns:1fr;gap:4px}
  .flowdiagram{padding:16px 12px}
  /* Two columns instead of six leaves room for the card labels to come back up
     to a readable size, rather than staying at the desktop miniature scale. */
  .board .col>h4{font-size:11.5px}
  .board .card b{font-size:13px}
  .board .card span{font-size:11px}
  .board .card .tagline{font-size:10px}
}

/* Motion is decoration here; every element is legible without it. */
@media(prefers-reduced-motion:reduce){
  .ats-motion .r-up,
  .ats-motion .section-head,
  .ats-motion .answer,
  .ats-motion .flowdiagram,
  .ats-motion .board,
  .ats-motion .grid-3>.info-card,
  .ats-motion .grid-2>*,
  .ats-motion .priceband>.pcardx,
  .ats-motion .rel-grid>.rel-card,
  .ats-motion .faq>details,
  .ats-motion .cta-band,
  .ats-motion .board .card,
  .ats-motion .gc-in,
  .ats-motion .fd-land{opacity:1;transform:none;transition:none}
  .ats-stage:before,.ats-stage:after,.ats-stage.in .gcard{animation:none}
  .stage-deck{transition:none}
  .ats-motion .fd-wire{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .flowdiagram.in .fd-pulse{animation:none;opacity:0}
  .board .card:hover{transform:none}
}