/* ============================================================================
   craft/p-acro.css · Talk to Acro (voice-ai.html)
   Loaded after the kit (scrollcraft.css, d-current.css, inner.css). Only what
   this page needs that the kit does not carry: the hero's value line, the
   still frame around the voice widget, the pull line, a four cell metrics
   rail, the phone rail of the steps wire, the brief table (the page's
   signature deal), the tip line and the two paths in the close. Every colour is one of D's tokens; the two literals are
   D's own bone (#F4F4F0) and the widget's own ground (#0d0f1a), named here once.
   ========================================================================== */
:root{--acro-bone:#F4F4F0;--acro-widget:#0d0f1a;--acro-mat:rgba(255,255,255,.045)}

/* ---- shared: the page's text links (mono, lime rule, 44px tall target) ---- */
.acro-under{margin-top:.4rem}
.acro-tlink{display:inline-block;padding-block:.85rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acro-bone);text-decoration:underline;text-decoration-color:var(--lime);
  text-decoration-thickness:1px;text-underline-offset:5px;transition:color .16s var(--e-io)}
.acro-tlink:hover{color:var(--lime)}
/* words for a screen reader only (the PDF links say they open a PDF in a new tab) */
.acro-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============ 1 · THE OFFER ============ */
/* the header is a sentence, so it sets a step smaller than a two word hero */
.acro-hero h1{font-size:clamp(2.5rem,5.3vw,4.9rem);max-width:14ch}
.acro-hero .sub{margin-top:1.4rem}
/* the value line: bold, on its own line, a 1px lime rule as D's bills */
.acro-value{margin-top:1.3rem;max-width:46ch;padding-left:1rem;border-left:1px solid var(--lime);
  font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.34;
  letter-spacing:-.005em;color:var(--acro-bone);text-wrap:pretty}
.acro-hero .cta-row{margin-top:1.7rem}
.acro-hero .stripes{margin-top:1.6rem}
.acro-hero .craft{max-width:460px}
@media(max-width:900px){.acro-hero .craft{max-width:360px;margin-top:2.4rem}}
@media(max-width:640px){.acro-hero .craft{max-width:100%}}

/* ============ 2 · LIVE: a still frame, nothing moves ============ */
.acro-talk{overflow:hidden}
.acro-talk__kj{font-size:min(34vw,420px);left:-3vw;bottom:-6%}
.acro-talk__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.acro-talk__copy{padding-top:clamp(0rem,2vw,2rem)}
.acro-talk__copy .sec-head{max-width:12ch}
/* a flat line with two bursts, static: a trace of a voice, furniture only */
.acro-wave{display:block;width:min(100%,420px);height:auto;margin-top:2.4rem;overflow:visible}
.acro-wave polyline{fill:none;stroke:var(--lime);stroke-width:1.2;stroke-linejoin:round}
.acro-wave__base{stroke:var(--line-lime);stroke-width:1}
.acro-wave__tick{stroke:var(--ash-dim);stroke-width:1}
/* the frame around the widget: the kit's booking frame (registration marks, a
   lime ring while focus is inside the iframe), sized to the embed's own width.
   No color-scheme on the iframe: the embed's document is a light scheme, and a
   mismatch makes Chrome paint the frame's canvas opaque white around the card. */
.acro-widget{max-width:504px;margin:0 auto;padding:clamp(.4rem,1vw,1rem);background:var(--acro-widget)}
.acro-widget iframe{margin-inline:auto;background:transparent}
.acro-cap{max-width:46ch;margin:1.1rem auto 0;text-align:center;font-size:.92rem;line-height:1.5;color:var(--ash)}
.acro-talk__alt{text-align:center;margin-top:.2rem}
@media(max-width:900px){
  .acro-talk__grid{grid-template-columns:minmax(0,1fr)}
  .acro-talk__copy .sec-head{max-width:none}
  .acro-wave{display:none}
}
/* phones: the embed lays out a fixed card about 430px wide, centred, so a
   narrower iframe crops the card and its required-field marks. The frame
   gives the iframe the full screen width instead (the gutter becomes a
   bleed); the registration marks move in to sit over the text column, and
   the focus ring is drawn inside the frame so it stays on screen. The
   iframe itself is untouched, and the container still never moves. */
@media(max-width:520px){
  .acro-talk__side .acro-widget{max-width:none;margin-inline:calc(-1*var(--gutter));padding:0;border-inline:0}
  .acro-talk__side .acro-widget::before{left:calc(var(--gutter) - 7px)}
  .acro-talk__side .acro-widget::after{right:calc(var(--gutter) - 7px)}
  .acro-talk__side .acro-widget.is-focus,.acro-talk__side .acro-widget:focus-within{outline-offset:-2px}
}

/* ============ 3 · THE REAL PRODUCT ============ */
.acro-product__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,4vw,3.4rem);max-width:1060px;margin-top:.4rem}
.acro-product__cols .lede{max-width:none}
.acro-product__cols .lede+.lede{padding-left:clamp(1.2rem,2.6vw,2.2rem);border-left:1px solid var(--line-dim);color:var(--acro-bone)}
/* the pull line: the page's own words, set big, assembled word by word (the kit's words device) */
.acro-pull{margin-top:clamp(3rem,7vw,5.6rem);font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.1rem,5.6vw,5rem);line-height:.9;letter-spacing:-.02em;color:var(--acro-bone);max-width:17ch;text-wrap:balance}
@media(max-width:820px){
  .acro-product__cols{grid-template-columns:minmax(0,1fr)}
  .acro-product__cols .lede+.lede{padding-left:1rem}
}
@media(max-width:640px){.acro-pull{font-size:clamp(1.9rem,9.4vw,2.8rem)}}

/* ============ 4 · HOW IT WORKS ============ */
.acro-how .wire{margin-top:1.4rem}
/* four cells instead of the kit's three, weighted so "$1,200" gets the width
   its numeral needs (the kit sizes .n for three cells); a touch smaller too */
.acro-rail{grid-template-columns:minmax(0,.84fr) minmax(0,1.04fr) minmax(0,1.3fr) minmax(0,.82fr);margin-top:clamp(2.6rem,5vw,3.8rem)}
.acro-rail .stat .n{font-size:clamp(2.8rem,5.6vw,4.5rem)}
.acro-rail .stat .l{max-width:28ch}
/* the second sentence of a label: a plain line under the mono key */
.acro-rail__more{margin-top:.6rem;max-width:30ch;font-size:.9rem;line-height:1.45;color:var(--ash)}
.acro-cur{font-size:.5em;vertical-align:.7em;margin-right:.05em;letter-spacing:0}
/* two by two from 1000px down, phones included: four short figures stacked
   one per row read as a list of near empty bars. On a phone the numerals
   step down to fit a half width cell ("$1,200" is the widest) and the cell
   padding tightens; the "Stay on" note sits under its label in its cell. */
@media(max-width:1000px){.acro-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .acro-rail .stat{padding:1.3rem .95rem 1.4rem}
  .acro-rail .stat .n{font-size:clamp(1.8rem,9.4vw,2.8rem)}
  .acro-rail .stat .l{margin-top:.65rem;letter-spacing:.08em}
  .acro-rail__more{font-size:.84rem}
}
/* the phone rail: below 820px the kit hides the row wire (the steps stack),
   so the pen writes the same route down a rail beside them instead, as the
   Book page does. Each step carries a node (a circle and a tick into its top
   rule) and a run to the next node; the last carries the node, a tail and
   the arrow. The runs stretch with their step (preserveAspectRatio none on a
   24 unit box drawn 24px wide, so the stroke keeps its weight); the nodes
   never stretch. Each svg is its own wire (data-to="0": drawn over a quarter
   of the plan's travel from when it clears the bottom of the viewport). */
.acro-vwire{display:none}
@media(max-width:820px){
  .acro-how .steps{--acro-sg:2rem;padding-left:2.25rem;row-gap:var(--acro-sg)}
  .acro-how .acro-vwire{display:block;position:absolute;left:-30px;width:24px;margin:0;overflow:visible}
  .acro-how .acro-vwire--node,.acro-how .acro-vwire--end{top:-12px;height:auto}
  .acro-how .acro-vwire--node{aspect-ratio:1}
  .acro-how .acro-vwire--end{aspect-ratio:24/72}
  /* from under this node to just above the next: the step's padding box
     plus the row gap, less the two node radii (with stroke) */
  .acro-how .acro-vwire--run{top:8px;height:calc(100% + var(--acro-sg) - 15px)}
}

/* ============ 5 · THE BRIEF (signature) ============ */
/* Three layouts, one markup. Each page lives inside the line that says what it
   shows, so the pairing survives every layout and every screen reader:
   - default (no script, reduced motion, wide): the copy, then the four pages
     in a row, each with its own line under it;
   - .acro-thumbs (phones, with motion): one line per row, its page beside it,
     sliding in as the row arrives (p-acro.js);
   - .acro-deal (wide, pinned, with motion): the lines on the left, and the
     pages taken out of flow and dealt onto a table on the right (p-acro.js). */
.acro-brief{background:var(--ink-3);--hl:#2a292d}
.acro-brief__stage{background:var(--ink-3)}
.acro-brief__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem}
.acro-brief__h{font-size:clamp(2rem,4.2vw,3.6rem);max-width:15ch;margin-bottom:1.1rem}
.acro-brief__copy .lede{max-width:46ch}
.acro-brief__list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);margin-top:2rem}
.acro-brief__item{display:flex;flex-direction:column}
.acro-brief__n{color:var(--lime);font-size:.64rem}
.acro-brief__lbl{margin-top:.45rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.08;letter-spacing:-.005em;color:var(--acro-bone);text-wrap:balance;
  transition:color .24s var(--e-io)}
.acro-brief__d{margin-top:.35rem;font-size:.92rem;line-height:1.45;color:var(--ash);transition:color .24s var(--e-io)}
/* each page is a pointer route to the PDF, as on the homepage (tabindex -1:
   the "Open the full sample" link is the keyboard route) */
.acro-brief__page{position:relative;display:block;order:-1;margin-bottom:1rem;border:1px solid var(--line-lime);background:#0b0b0f;overflow:hidden;
  transition:border-color .2s var(--e-io)}
.acro-brief__page:hover{border-color:var(--lime)}
.acro-brief__page img{display:block;width:100%;height:auto}
.acro-brief__shade{position:absolute;inset:0;background:var(--ink-3);opacity:0;pointer-events:none}
.acro-brief__scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--lime);opacity:0;pointer-events:none;
  box-shadow:0 6px 14px -4px rgba(227,248,80,.5)}
/* the page code: shown only on the table, as an index tab above the page's top edge */
.acro-brief__tag{display:none}
.acro-brief__tray{display:none}
.acro-brief__foot .acro-brief__cap{font-size:.92rem;line-height:1.5;color:var(--ash);max-width:52ch}
.acro-brief__foot .cta-row{margin-top:.8rem}
/* Wide, and not pinned (reduced motion, no script, a page loaded narrow and
   then widened, a window too short for the table): the kit makes the stage
   an ordinary padded section (.ri-flowed, .ri-unpinned, the noscript line). */

/* phones: one row per line, its page beside it */
.acro-brief__n{display:block}
@media(max-width:900px){
  .acro-brief__list{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .acro-brief__item{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);column-gap:1.1rem;align-items:start}
  .acro-brief__page{grid-column:1;grid-row:1;margin-bottom:0}
  .acro-brief__txt{grid-column:2;grid-row:1;padding-top:.2rem}
}
/* tablets: the page keeps a thumbnail's size instead of 40% of a wide row */
@media(min-width:561px) and (max-width:900px){
  .acro-brief__item{grid-template-columns:minmax(0,200px) minmax(0,1fr);column-gap:1.6rem}
  .acro-brief__lbl{font-size:1.25rem}
  .acro-brief__d{font-size:1rem}
}
/* while a line waits for its page it reads in ash; lit, in bone with the lime rule */
.acro-thumbs .acro-brief__item .acro-brief__lbl{color:var(--ash)}
.acro-thumbs .acro-brief__item.is-on .acro-brief__lbl{color:var(--acro-bone)}
.acro-thumbs .acro-brief__page{will-change:transform}

/* the deal: the pages on a table */
.acro-deal .acro-brief__grid{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-rows:auto auto;
  grid-template-areas:"copy tray" "copy foot";column-gap:clamp(2rem,5vw,4.6rem);row-gap:1rem;align-items:center}
.acro-deal .acro-brief__copy{grid-area:copy}
.acro-deal .acro-brief__foot{grid-area:foot;align-self:start}
.acro-deal .acro-brief__foot .cta-row{margin-top:.4rem}
.acro-deal .acro-brief__list{display:flex;flex-direction:column;gap:.15rem;margin-top:1.5rem}
.acro-deal .acro-brief__item{display:block;position:static;padding:.55rem 0 .6rem 1.1rem;border-left:1px solid var(--line-dim);
  transition:border-color .24s var(--e-io)}
.acro-deal .acro-brief__n{display:inline}
.acro-deal .acro-brief__lbl{display:inline;margin:0 0 0 .7rem;font-size:clamp(.98rem,1.3vw,1.14rem)}
.acro-deal .acro-brief__d{margin-top:.3rem;font-size:.9rem}
.acro-deal .acro-brief__item .acro-brief__lbl{color:var(--ash)}
.acro-deal .acro-brief__item.is-done .acro-brief__lbl{color:var(--acro-bone)}
.acro-deal .acro-brief__item.is-on{border-left-color:var(--lime)}
.acro-deal .acro-brief__item.is-on .acro-brief__lbl,.acro-deal .acro-brief__item.is-on .acro-brief__d{color:var(--acro-bone)}
/* the pages leave the lines and land on the tray (positions and motion: p-acro.js) */
.acro-deal .acro-brief__page{position:absolute;left:0;top:0;width:var(--pw,340px);margin:0;transform-origin:50% 58%;opacity:0;
  will-change:transform;box-shadow:0 26px 50px -18px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.04) inset}
.acro-deal .acro-brief__page{overflow:visible}
/* placement back to auto: under 900px (a pinned page turned to portrait) the
   thumbs rule's grid-column would make the grid area, not the grid's padding
   box, the containing block of these absolute pages, and shift them */
.acro-deal .acro-brief__page{grid-column:auto;grid-row:auto}
.acro-deal .acro-brief__tag{display:block;position:absolute;left:-1px;bottom:100%;padding:.22rem .5rem .18rem;font-size:.56rem;
  white-space:nowrap;color:var(--lime);background:var(--ink-3);border:1px solid var(--line-lime);border-bottom:0}
.acro-deal .acro-brief__item:nth-child(1) .acro-brief__page{z-index:3}
.acro-deal .acro-brief__item:nth-child(2) .acro-brief__page{z-index:4}
.acro-deal .acro-brief__item:nth-child(3) .acro-brief__page{z-index:5}
.acro-deal .acro-brief__item:nth-child(4) .acro-brief__page{z-index:6}
/* pointing at a line, or at its page, lifts that page to the top of the
   table and out of the shade (the script owns transform; this is translate).
   After the z-index lines above, which it has to outrank */
.acro-deal .acro-brief__page{transition:border-color .2s var(--e-io),translate .28s var(--e-out)}
.acro-deal .acro-brief__item:hover .acro-brief__page{z-index:9;translate:0 -8px;border-color:var(--lime)}
.acro-deal .acro-brief__item:hover .acro-brief__shade{opacity:0!important}
.acro-deal .acro-brief__item:hover:not(.is-on){border-left-color:var(--line-lime)}
/* the table: a cutting mat of hairlines, registration ticks, a code */
.acro-deal .acro-brief__tray{display:block;position:relative;z-index:1;grid-area:tray;
  height:clamp(17rem,calc(100svh - var(--nav-h) - 16.5rem),40rem);border:1px solid var(--line-dim);
  background-image:linear-gradient(var(--acro-mat) 1px,transparent 1px),linear-gradient(90deg,var(--acro-mat) 1px,transparent 1px);
  background-size:44px 44px;background-position:-1px -1px}
/* the mat's code runs down its right edge, outside it, like a spine: the
   pages rest on the whole mat, so nothing covers it */
.acro-brief__traylbl{position:absolute;left:calc(100% + 10px);bottom:-1px;writing-mode:vertical-rl;white-space:nowrap;
  color:var(--ash);font-size:.56rem;line-height:1}
.acro-deal .acro-brief__stage{padding-block:clamp(1.2rem,3vh,2.4rem)}
/* short desktop windows: tighten the copy so the stage never clips it */
@media(min-width:901px) and (max-height:760px){
  .acro-deal .acro-brief__h{font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:.7rem}
  .acro-deal .acro-brief__copy .eyebrow{margin-bottom:1rem}
  .acro-deal .acro-brief__list{margin-top:1rem}
  .acro-deal .acro-brief__item{padding-block:.4rem .45rem}
  .acro-deal .acro-brief__d{font-size:.84rem}
}
/* shorter still: one more step (where even that does not fit, the kit's fit
   check releases the act and the brief takes its default layout) */
@media(min-width:901px) and (max-height:620px){
  .acro-deal .acro-brief__stage{padding-block:.9rem}
  .acro-deal .acro-brief__h{font-size:clamp(1.5rem,2.6vw,2.2rem);margin-bottom:.5rem}
  .acro-deal .acro-brief__copy .eyebrow{margin-bottom:.6rem}
  .acro-deal .acro-brief__copy .lede{font-size:.95rem;line-height:1.4}
  .acro-deal .acro-brief__list{margin-top:.6rem}
  .acro-deal .acro-brief__item{padding-block:.26rem .3rem}
  .acro-deal .acro-brief__d{margin-top:.15rem;font-size:.8rem}
}

/* ============ 6 · WHAT TO BRING ============ */
/* the flow section right after a pinned act starts close to its top edge */
.acro-bring{padding-top:clamp(3rem,6vw,5rem)}
.acro-bring__h{max-width:16ch}
.acro-bring__split{margin-top:.6rem}
.acro-bring .prose .lede{color:var(--acro-bone)}
/* the list label is a mono key (the kit's .prose .k), set close to its list */
.acro-bring__list .k{margin-bottom:.2rem}
.acro-bring__list ul{margin-top:.8rem}
/* the tip: one line in the display face, a 1px lime rule */
.acro-tip{margin-top:clamp(2.4rem,5vw,3.6rem);max-width:34ch;padding-left:1rem;border-left:1px solid var(--lime);
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.15;letter-spacing:-.01em;
  color:var(--acro-bone);text-wrap:balance}

/* ============ 8 · TWO WAYS IN ============ */
.acro-close .reg{color:var(--ash)}
.acro-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;max-width:620px;margin:2rem auto 1.8rem;text-align:left}
.acro-path{position:relative;outline:1px solid var(--hl);padding:1.2rem 1.4rem 1.3rem}
.acro-path::before{content:"";position:absolute;left:0;top:0;width:26px;height:1px;background:var(--lime)}
.acro-path .k{margin-bottom:.5rem}
.acro-paths .acro-path p{margin:0;max-width:none;color:var(--acro-bone);font-size:1rem;line-height:1.45}
.cta-band p.acro-decide{max-width:36ch;margin:0 auto;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.2;letter-spacing:-.01em;color:var(--acro-bone);text-wrap:balance}
@media(max-width:560px){.acro-paths{grid-template-columns:minmax(0,1fr)}}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  .acro-tlink,.acro-brief__lbl,.acro-brief__d,.acro-deal .acro-brief__item,.acro-brief__page{transition:none}
  .acro-brief__page{transform:none!important}
  .acro-brief__scan,.acro-brief__shade{display:none}
}