/* AI Front Desk page (v4/sarah), round 5: Home's visual system. Shell is /assets/site.css, call screen is kit/call.css. */

/* ───────── hero: the frame, the gold star ring, one big call button ───────── */
.sarahf .amb{filter:blur(22px) brightness(.7) saturate(1.1)}
.sarahf::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(42% 52% at 64% 44%,rgba(201,163,94,.16),transparent 70%),linear-gradient(90deg,rgba(8,8,8,.5),transparent 44%)}
.sarahf .call{position:absolute;z-index:2;left:46%;right:3%;top:3%;bottom:4%;display:flex;flex-direction:column;align-items:center;justify-content:center;--ring:min(46vh,30vw,470px);gap:0}
.sarahf .call .ring-wrap{margin:calc(var(--ring) * .12) 0 calc(var(--ring) * .1)}
.call-btn.big{width:42%;background:radial-gradient(circle at 34% 28%,#f6dfa6 0%,#d6ab5f 46%,#9c7432 100%);color:#0b0a0c;
  box-shadow:0 0 0 10px rgba(201,163,94,.12),0 0 0 22px rgba(201,163,94,.06),0 0 90px rgba(227,198,142,.55),0 30px 60px -20px rgba(0,0,0,.8);animation:callglow 2.6s ease-in-out infinite}
.call-btn.big .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.call-btn.big svg{width:36%;height:36%}
.call-btn.big .i-end{display:none}
.call.on .call-btn.big{animation:none;background:radial-gradient(circle at 34% 28%,#3a3036 0%,#221c22 70%);color:#f2ede3;box-shadow:inset 0 0 0 1px rgba(242,237,227,.2),0 18px 50px -20px rgba(0,0,0,.8)}
.call.on .call-btn.big .i-ph{display:none}
.call.on .call-btn.big .i-end{display:block}
@keyframes callglow{50%{box-shadow:0 0 0 16px rgba(201,163,94,.1),0 0 0 34px rgba(201,163,94,.04),0 0 130px rgba(227,198,142,.75),0 30px 60px -20px rgba(0,0,0,.8)}}
.sarahf .call-top{color:rgba(242,237,227,.7)}
.sarahf .call-status{color:rgba(242,237,227,.85);margin-top:6px}
.sarahf .captions{width:min(560px,100%);max-height:30%;margin-top:14px;overflow:hidden}
.sarahf .after{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.sarahf .after[hidden]{display:none}
.sarahf .hx{right:56%;grid-template-columns:1fr;gap:18px}
.sarahf .hx h1{font-size:clamp(44px,4.6vw,88px)}
.sarahf .note-c{color:rgba(242,237,227,.7);max-width:34em}
.sarahf .crumbs{color:var(--gold-ink)}
.sarahf .hside{display:flex;flex-direction:column;gap:10px}
/* design-fix 10-20: room under the headline, a real button for the live demo, one short honest label per demo */
.sarahf .hx h1+.cap{margin-top:24px}
.sarahf .hx h1{max-width:10em}
.sarahf .hside .cta-row{margin-top:0;flex-wrap:wrap}
.sarahf .call-status{font-size:13px;color:#c9c2b6}
.script .lead-s.mono{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#b9b2a8}
.tape-more{display:flex;margin:22px auto 0}
.tape.short li:nth-child(n+7):not(.booked){display:none}
.sarahf .live{color:#f4f3ef;font-size:17px;margin:0}
.price-s .per{font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;margin-top:22px}

/* ───────── one call, word for word: a single column, with the chart facts marked as they are taken ───────── */
.script{padding-top:130px;padding-bottom:40px}
.script .h2{text-align:center}
.lead-s{color:var(--ink-2);font-size:17.5px;max-width:40em;margin:20px auto 0;text-align:center}
.tape{list-style:none;max-width:760px;margin:56px auto 0;display:flex;flex-direction:column;gap:12px}
.tape li{max-width:86%;padding:16px 20px;border-radius:22px;font-size:18px;line-height:1.42}
.tape li .who{display:block;margin-bottom:6px;color:var(--mute)}
.tape li.her{background:rgba(201,163,94,.11);box-shadow:inset 0 0 0 1px rgba(201,163,94,.32);border-bottom-left-radius:6px}
.tape li.her .who{color:var(--gold-ink)}
.tape li.me{align-self:flex-end;background:var(--page-3);border-bottom-right-radius:6px}
.tape li.chip-t{align-self:center;max-width:none;padding:0;margin:6px 0}
.tape li.chip-t span{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;text-transform:uppercase;color:#0b0a0c;background:var(--gold);padding:7px 14px;border-radius:99px}
.tape li.chip-t span::before{content:"";width:9px;height:9px;background:#0b0a0c;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ts-out{max-width:760px;margin:40px auto 0;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;line-height:1.2}

/* ───────── what your office sees: one big illustration ───────── */
.office{padding-top:130px;padding-bottom:30px}
.o-head{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:end;margin-bottom:40px}
.o-head p{color:var(--ink-2);font-size:18px;max-width:32em}
.dash{border-radius:var(--r);background:linear-gradient(160deg,#17141b,#0f0d11);box-shadow:inset 0 0 0 1px var(--line),0 40px 100px rgba(0,0,0,.45);padding:26px 28px 22px}
.dash-top{display:flex;justify-content:space-between;color:var(--mute);padding-bottom:16px;border-bottom:1px solid var(--line)}
.dash-top .tag{color:var(--gold-ink)}
.drow{display:grid;grid-template-columns:1.2fr .8fr 2fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.drow .nm{font-weight:500;font-size:22px;letter-spacing:-.02em}
.drow .meta{color:var(--mute);margin-top:4px}
.drow .out{justify-self:start;background:rgba(201,163,94,.16);color:var(--gold-hi);padding:7px 12px;border-radius:99px}
.drow .out.cb{background:rgba(242,237,227,.08);color:var(--ink)}
.drow .why{color:var(--ink-2);font-size:16.5px}
.drow .acts{display:flex;gap:8px;color:var(--ink-2)}
.drow .acts span{padding:7px 12px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line)}
.dash-cap{color:var(--mute);margin-top:14px}

/* ───────── limits: six plain statements ───────── */
.lim{padding-top:130px;padding-bottom:30px}
.lim-g{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 4vw;margin-top:46px}
.lim-g h3{font-weight:500;font-size:clamp(24px,2.1vw,34px);line-height:1.05;letter-spacing:-.03em;margin-bottom:12px}
.lim-g h3::before{content:"";display:block;width:16px;height:16px;margin-bottom:16px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.lim-g p{color:var(--ink-2);font-size:16.5px}
.lim-g a{color:var(--gold-hi);background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat}

/* ───────── price ───────── */
.price-s{padding-top:140px;padding-bottom:30px}
.price-s .amt{font-weight:500;font-size:clamp(110px,19vw,360px);line-height:.82;letter-spacing:-.065em;
  background:linear-gradient(180deg,#f6e2b0 0%,#d9b26a 40%,#8a6630 75%,#e9cf93 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-s .amt small{font-size:clamp(18px,1.6vw,26px);letter-spacing:-.01em;-webkit-text-fill-color:var(--ink-2);margin-left:.4em}
.setup{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;margin-top:56px}
.setup p{color:var(--ink-2);font-size:17px}
.setup b{display:block;color:var(--ink);font-weight:500;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.025em;line-height:1.1;margin-bottom:10px}
.price-s .cta-row{margin-top:46px}

/* ───────── questions ───────── */
.qa{padding-top:130px;padding-bottom:130px}
.qa h2{margin-bottom:26px}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:24px 0;font-weight:500;font-size:clamp(22px,2.2vw,34px);letter-spacing:-.025em;display:flex;justify-content:space-between;gap:20px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--gold);font-weight:400;transition:transform .3s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{color:var(--ink-2);padding-bottom:24px;max-width:44em}
.qa details a{color:var(--gold-hi)}

@media (max-width:1100px){
  .sarahf .call{left:0;right:0;top:2%;bottom:auto;height:58%;--ring:min(34vh,56vw,400px)}
  .sarahf .hx{right:28px}
  .sarahf .captions{max-height:24%}
  .o-head,.lim-g,.setup{grid-template-columns:1fr}
  .lim-g{gap:36px}
  .drow{grid-template-columns:1fr auto;gap:10px 16px}
  .drow .why{grid-column:1 / -1}
  .drow .acts{grid-column:1 / -1}
}
@media (max-width:640px){
  .sarahf .call{top:0;height:50%;--ring:min(24vh,50vw);justify-content:center}   /* round 7 (B2): the ring and its line stay above the words */
  .sarahf:not(.oncall) .call-top{display:none}
  .sarahf .call .ring-wrap{margin:calc(var(--ring) * .1) 0 calc(var(--ring) * .06)}
  .sarahf .hx{bottom:14px}
  .sarahf .hx h1{font-size:clamp(34px,9.6vw,42px)}
  .sarahf .note-c{display:none}
  .sarahf .hx .cap{font-size:14px}
  .sarahf.oncall .hx{opacity:0;pointer-events:none}
  .sarahf.oncall .call{height:100%;top:0}
  .sarahf .captions{max-height:34%}
  .script,.office,.lim,.price-s{padding-top:80px}
  .qa{padding-top:80px;padding-bottom:80px}
  .tape li{max-width:94%;font-size:16px}
  .dash{padding:18px 16px}
  .price-s .amt{font-size:clamp(96px,30vw,130px)}
  .price-s .amt small{display:inline;font-size:16px;margin-left:.35em;letter-spacing:0}
  /* phone: the call, then the price, then the rest */
  body.p-sarah main{display:flex;flex-direction:column}
  body.p-sarah main>*{order:3}
  body.p-sarah main>.hero{order:0}
  body.p-sarah main>.script{order:1}
  body.p-sarah main>.price-s{order:2}
}
@media (prefers-reduced-motion:reduce){.call-btn.big{animation:none}}
/* round 8 (review r7 blocker 1): landscape phones (844x390, 932x430). The words take the left half, the ring the right half at
   about 70% of the frame height; the ring's two small lines stay hidden until a call runs, so nothing prints over the words. */
@media (max-width:640px){.sarahf .hx .cap{padding-bottom:0}}
@media (max-height:520px) and (orientation:landscape){
  .sarahf .call{left:54%;right:2%;top:3%;bottom:3%;height:auto;--ring:min(66vh,38vw,300px);justify-content:center}
  .sarahf .call .ring-wrap{margin:calc(var(--ring) * .05) 0}
  .sarahf:not(.oncall) .call-top,.sarahf:not(.oncall) .call-status{display:none}
  .sarahf .captions{max-height:38%}
  .sarahf .hx{left:20px;right:48%;top:12px;bottom:12px;grid-template-columns:1fr;gap:10px;align-content:center}
  .sarahf .hx h1{font-size:clamp(24px,3.3vw,32px);max-width:none}
  .sarahf .hx h1+.cap{margin-top:8px}
  .sarahf .hx .cap{font-size:13.5px;line-height:1.35;padding-bottom:0}
  .sarahf .crumbs{margin-bottom:6px}
  .sarahf .note-c{display:none}
  .sarahf .hside .cta-row{flex-wrap:nowrap;gap:8px}
  .sarahf .hside .pill{padding:0 14px;font-size:11.5px;gap:8px}
  .sarahf.oncall .hx{opacity:0;pointer-events:none}
  .sarahf.oncall .call{left:2%}
}
/* round 8: the price is said once (review r7 non-blocking 9), so it is real text, and it follows the closing type cap (56px, 36px on phones) */
body .price-s .amt{font-size:clamp(44px,4vw,56px);line-height:1}
@media (max-width:640px){body .price-s .amt{font-size:36px}body .price-s .amt small{font-size:16px}}
/* round 9 (review r8 blockers 3 and 4): no line clamp on the pitch (it cut the sentence on phones; the phone sentence is now short
   enough to fit). Landscape tablets (1024x768) use the desktop arrangement, words left and the ring with its two small lines in the
   right half, instead of the portrait column that printed the ring's lines over the headline. */
@media (orientation:landscape) and (min-height:521px) and (max-width:1180px){
  .sarahf .call{left:50%;right:2%;top:3%;bottom:4%;height:auto;--ring:min(42vh,32vw,360px)}
  .sarahf .hx{right:52%}
  .sarahf .hx h1{font-size:clamp(40px,4.4vw,52px)}
  .sarahf .captions{max-height:30%}
  .sarahf>.calmbg::after{display:none}   /* the frame's diagonal gold streak crossed the headline at this size */
}
@media (max-width:640px){.sarahf>.calmbg::after{display:none}}   /* round 9: on phones it ran through the crumbs above the headline */