/* Presentation layer (Nov 2026), modelled on Mercury's composition and motion.
   Colours and fonts come from signal.css tokens only; nothing here adds a colour
   family. Motion uses transform and opacity only, and prefers-reduced-motion
   turns every scrub, loop and reveal off (see the end of this file). */

:root{--m-radius:24px;--m-radius-lg:32px;--m-ease:cubic-bezier(.2,.7,.2,1);--m-shadow:0 1px 2px rgba(7,20,22,.04),0 18px 48px rgba(7,20,22,.07);--m-shadow-sm:0 1px 2px rgba(7,20,22,.04),0 8px 22px rgba(7,20,22,.06);--m-lime-pale:var(--blue-soft)}

/* ---------- Shared rhythm: one idea per section, generous space ---------- */
.section{padding:clamp(5.5rem,10vw,9rem) 0}
.section-head{display:block;max-width:780px;margin:0 0 clamp(2.5rem,5vw,4rem)}
.section-head>div{max-width:720px}
.section-head .eyebrow{margin:0 0 1.1rem;font-size:.74rem;line-height:1.4}
.section-head .mloop p,.section-head .mloop .mdemo-label{margin:0 0 .9rem;font-size:.74rem;max-width:none}
.section-head .mloop .mbub,.section-head .mloop .chip{font-size:.92rem}
.section-head .mloop .chip{font-size:.78rem}
.section-head h2{font-size:clamp(2.2rem,4.2vw,3.5rem);font-weight:600;line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.section-head p{margin-top:1.15rem;font-size:1.08rem;line-height:1.65;max-width:640px}
.page-hero{padding:clamp(5rem,9vw,8rem) 0 clamp(3rem,6vw,5rem)}
.btn{box-shadow:none}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(7,20,22,.12)}
.btn:focus-visible,.mclose-link:focus-visible,.mtabs-list button:focus-visible,.mtabs-pause:focus-visible,.acc summary:focus-visible,.faq summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.card,.service-path,.about-stat,.us-pricing,.result-stat{border-radius:var(--m-radius);border-color:rgba(7,20,22,.1);box-shadow:var(--m-shadow-sm)}
.dark .card{box-shadow:none}
.plans{border-radius:var(--m-radius-lg);border-color:rgba(7,20,22,.12);box-shadow:var(--m-shadow)}
.term-toggle{box-shadow:var(--m-shadow-sm)}
.results-calc,.piq-panel{border-radius:var(--m-radius-lg)}
.step-list{border-radius:var(--m-radius)}

/* Feature blocks: text on the left, one small coded loop on the right. */
.mfeature .section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);grid-template-rows:auto 1fr;column-gap:clamp(2rem,6vw,5rem);align-items:start;max-width:none}
.mfeature .section-head>.eyebrow,.mfeature .section-head>div{grid-column:1}
.mfeature .section-head>.mloop{grid-column:2;grid-row:1/span 2;align-self:center}

/* Reveal: soft fade and short slide as sections enter the viewport. */
.motion-ready .reveal.is-visible{animation:m-reveal .8s var(--m-ease) both}
@keyframes m-reveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- Static hero: the boardroom photo with the portal on the laptop ----------
   The photo sits behind the copy, anchored to the bottom of the stage so the
   table stays in. The coded client portal is pinned to the laptop's display
   in the photo (measured at x 806-1107, y 493-675 of the 1914x822 image),
   placed in pure CSS with container units. Nothing moves and nothing reads
   the scroll position. mercury.js only sets the stage height so the laptop
   falls below the headline block, and the portal's scale. */
.mhero{position:relative;background:#e9e1d9}
.mhero-stage{position:relative;overflow:hidden;min-height:clamp(620px,50vw,820px)}
.mhero-copy{position:relative;z-index:2;text-align:center}
.mhero-copy .wrap{padding:clamp(2.5rem,6vh,4rem) 0 2rem}
.mhero-copy .eyebrow{justify-content:center;margin:0 0 .9rem}
.mhero-copy h1{max-width:980px;margin:0 auto;font-size:clamp(2.3rem,min(4.4vw,6.4vh),3.9rem);font-weight:600;line-height:1.04;letter-spacing:-.035em;text-wrap:balance;color:var(--ink)}
.mhero-copy .lead{max-width:760px;margin:clamp(.7rem,1.8vh,1.1rem) auto 0;font-size:clamp(1rem,min(1.4vw,2.2vh),1.16rem);line-height:1.55;color:#1d2e2c}
.mhero-copy .hero-actions{justify-content:center;align-items:center;margin:clamp(1rem,2.4vh,1.5rem) 0 clamp(.5rem,1.2vh,.8rem)}
.mhero-copy .btn.ghost{background:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.mhero-copy .trust-line{margin:0 auto;color:#3b4a48}
.mhero-copy .highlight{display:inline;background:linear-gradient(var(--blue),var(--blue)) 0 96%/100% .09em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mhero-copy .highlight:after{display:none}
@media(max-width:640px){.mhero-copy .eyebrow:before{display:none}}
.mhero-copy .hero-quiet-link{color:var(--blue-ink)}

/* The figure fills the stage behind the copy. The photo covers it (like
   object-fit:cover, bottom-anchored); --iw/--ih are its rendered size. */
.mhero-figure{position:absolute;inset:0;margin:0;overflow:hidden;container-type:size;--iw:max(100cqw,232.847cqh);--ih:max(42.946cqw,100cqh)}
.mhero-photo{position:absolute;left:calc(50cqw - var(--iw) / 2);top:calc(100cqh - var(--ih));width:var(--iw);height:var(--ih);max-width:none}
.mhero-screen{position:absolute;overflow:hidden;background:#f4f6f9;left:calc(50cqw - var(--iw) / 2 + var(--iw) * .421108);top:calc(100cqh - var(--ih) + var(--ih) * .599757);width:calc(var(--iw) * .157262);height:calc(var(--ih) * .221411)}
.mhero-caption{position:absolute;right:clamp(1rem,3vw,2rem);bottom:.9rem;z-index:1;margin:0;font:500 .68rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 1px 2px rgba(7,20,22,.45)}

/* A simplified screen (blocks only): shown until the portal is scaled in by
   mercury.js, and on phones, where the portal would be too small to read. */
.mhero-cover{position:absolute;inset:0;display:flex;background:#f4f6f9}
.mc-side{flex:0 0 21%;padding:5% 3%;background:var(--ink)}
.mc-side b{display:block;width:22%;aspect-ratio:1;background:var(--blue)}
.mc-main{flex:1;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto 1fr auto;gap:4%;padding:5% 5% 6%}
.mc-main b{grid-column:1/-1;width:30%;height:5px;border-radius:3px;background:rgba(7,20,22,.25)}
.mc-main u{display:block;border-radius:4px;background:#fff;box-shadow:0 0 0 1px rgba(7,20,22,.07)}
.mc-main em{grid-column:1/-1;height:22%;min-height:10px;border-radius:4px;background:#fff;box-shadow:0 0 0 1px rgba(7,20,22,.07)}

/* ---------- The coded client portal, pinned to "Ready for you" ----------
   Laid out on a fixed canvas with the display's aspect (301:182) and scaled
   to the screen by --k (screen width / 960). */
.mportal{display:none;position:absolute;left:0;top:0;width:960px;height:580px;overflow:hidden;transform:scale(var(--k,.25));transform-origin:0 0;background:#f4f6f9;color:var(--ink);font-family:var(--font-body);text-align:left}
.mhero.is-live .mportal{display:block}
.mhero.is-live .mhero-cover{display:none}
.mp-box{display:grid;grid-template-columns:220px minmax(0,1fr);height:100%}
.mp-side{display:flex;flex-direction:column;gap:2rem;padding:1.6rem 1.25rem;background:var(--ink);color:#fff}
.mp-brand{display:flex;align-items:center;gap:.65rem;font:500 1.15rem/1 var(--font-display);letter-spacing:-.02em}
.mp-brand img{width:28px;height:28px}
.mp-brand b{font-weight:700;color:#fff}
.mp-brand span{color:#9fb0c4}
.mp-nav{display:grid;gap:.25rem;margin:0;padding:0;list-style:none}
.mp-nav li{padding:.6rem .8rem;border-radius:10px;color:#a9b8b6;font-size:.92rem;font-weight:600}
.mp-nav li.is-on{background:rgba(143,179,245,.16);color:#fff}
.mp-side-foot{margin:auto 0 0;font:500 .72rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#6f8380}
.mp-main{position:relative;padding:2rem 2.25rem 2.5rem}
.mp-view{display:flex;flex-direction:column;gap:1.25rem}
.mp-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.mp-head h4{margin:0;font:650 1.6rem/1.1 var(--font-display);letter-spacing:-.025em}
.mp-sub{font-size:.9rem;color:var(--muted)}
.mp-label{margin:0 0 .7rem;font:600 .72rem/1.3 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mp-convo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1rem;align-items:start}
.mp-thread,.mp-ready{padding:1.2rem 1.3rem;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(7,20,22,.06)}
.mp-thread{display:flex;flex-direction:column;gap:.75rem}
.mp-bub{max-width:92%;padding:.8rem 1rem;border-radius:16px 16px 16px 4px;background:#f1f4f8;font-size:.95rem;line-height:1.5}
.mp-bub.out{align-self:flex-end;border-radius:16px 16px 4px 16px;background:var(--ink);color:#fff}
.mp-ready{border-top:4px solid var(--blue)}
.mp-ready b{display:block;font-weight:600}
.mp-ready small{display:block;font-size:.84rem;color:var(--muted)}
.mp-ready ul{margin:.9rem 0 1.1rem;padding:0;list-style:none;font-size:.9rem}
.mp-ready li{position:relative;padding:.3rem 0 .3rem 1.2rem}
.mp-ready li::before{content:"";position:absolute;left:0;top:.75em;width:.5rem;height:.5rem;border-radius:50%;background:var(--blue)}
.mp-cta{display:inline-flex;padding:.6rem 1rem;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:.9rem}

/* Phones: copy on its own band, the photo as a band below it, with the
   simplified screen only. */
@media(max-width:640px){
  .mhero-stage{min-height:0}
  .mhero-copy{background:linear-gradient(#c1c1c1,#cdc8c7 45%,#d9d0cf 75%,#e3d3c9)}
  .mhero-copy .wrap{padding-bottom:1.75rem}
  .mhero-figure{position:relative;inset:auto;height:clamp(240px,72vw,300px);--iw:max(260cqw,232.847cqh);--ih:max(111.66cqw,100cqh)}
  .mhero.is-live .mportal{display:none}
  .mhero.is-live .mhero-cover{display:flex}
}

/* The dashboard end frame. */
.mdash-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.4rem;border-bottom:1px solid rgba(7,20,22,.08)}
.mdash-brand{display:flex;align-items:center;gap:.6rem;font:650 1rem/1 var(--font-display)}
.mdash-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto;gap:1rem;padding:1.25rem 1.4rem 1.4rem;background:var(--paper)}
.mdash-card{padding:1.2rem 1.3rem;border:1px solid rgba(7,20,22,.08);border-radius:18px;background:#fff}
.mdash-convos{grid-row:span 2}
.mdash-label,.mdemo-label{margin:0 0 .9rem;font:600 .74rem/1.3 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mdash-convos ul,.mdemo ul,.mloop ul{margin:0;padding:0;list-style:none}
.mdash-convos li,.mdemo-score li,.mloop-send li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 0;border-top:1px solid rgba(7,20,22,.07)}
.mdash-convos li:first-child,.mdemo-score li:first-child,.mloop-send li:first-child{border-top:0}
.mdash-convos b,.mdemo b,.mloop b{display:block;font:600 .95rem/1.25 var(--font-body)}
.mdash-convos small,.mdemo small,.mloop small{display:block;font-size:.82rem;color:var(--muted)}
.chip{display:inline-flex;align-items:center;padding:.28rem .65rem;border-radius:999px;background:rgba(7,20,22,.06);color:var(--ink);font:600 .78rem/1.2 var(--font-body);font-style:normal;white-space:nowrap}
.chip-booked{background:var(--acid)}
.chip-int{background:var(--m-lime-pale)}
.chip-rep{background:rgba(0,83,217,.18)}
.mdash-bubble,.mbub{max-width:92%;padding:.75rem 1rem;border-radius:16px 16px 16px 4px;background:var(--paper);font-size:.92rem;line-height:1.45}
.mdash-meta{margin:.75rem 0 0;font-size:.82rem;color:var(--muted)}
.mdash-days,.mhand-cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem}
.mdash-days span,.mhand-cal span{display:flex;flex-direction:column;gap:.35rem;min-height:72px;padding:.5rem;border:1px dashed rgba(7,20,22,.14);border-radius:12px;font:600 .78rem/1 var(--font-display);color:var(--muted)}
.mdash-days span.on,.mhand-cal span.on{border-style:solid;border-color:var(--ink);color:var(--ink)}
.mdash-days em,.mhand-cal em{display:block;padding:.3rem .35rem;border-radius:8px;background:var(--acid);color:var(--ink);font:600 .68rem/1.2 var(--font-body);font-style:normal}



/* ---------- Tabbed workflow with demo panels ---------- */
.mtabs{position:relative}
.mtabs.is-on{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.mtabs-list{display:flex;flex-direction:column;gap:.35rem}
.mtabs-list button{position:relative;overflow:hidden;min-height:52px;padding:.9rem 1.1rem;border:0;border-radius:16px;background:transparent;color:var(--muted);font:600 1.02rem/1.3 var(--font-display);letter-spacing:-.01em;text-align:left;cursor:pointer;transition:background .3s,color .3s}
.mtabs-list button:hover{color:var(--ink)}
.mtabs-list button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--m-shadow-sm)}
.mtabs-list button[aria-selected="true"]::after{content:"";position:absolute;left:1.1rem;right:1.1rem;bottom:.45rem;height:2px;border-radius:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left}
.mtabs.is-cycling [aria-selected="true"]::after{animation:m-progress 6.5s linear both}
.mtabs.is-paused [aria-selected="true"]::after{animation-play-state:paused}
.mtabs-panels{display:grid;gap:1.5rem}
.mtab-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;min-height:400px;padding:clamp(1.5rem,4vw,3rem);border-radius:var(--m-radius-lg);background:#fff;box-shadow:var(--m-shadow)}
.mtab-panel[hidden]{display:none}
.mtab-text .index{font:500 .8rem/1 var(--font-mono);color:var(--muted)}
.mtab-text h3{margin:.8rem 0 .7rem;font:600 clamp(1.5rem,2.4vw,2rem)/1.15 var(--font-display);letter-spacing:-.025em}
.mtab-text p{margin:0;color:var(--muted);line-height:1.65}
.mtabs.is-on .mtab-text .index{display:none}
.mtabs-pause{position:absolute;right:1rem;bottom:1rem;z-index:2;min-height:36px;padding:.4rem .9rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font:600 .82rem/1 var(--font-body);cursor:pointer}

/* Demo panels and feature loops share one look: a quiet card on paper. */
.mdemo,.mloop{position:relative;padding:1.4rem 1.5rem;border:1px solid rgba(7,20,22,.08);border-radius:22px;background:var(--paper)}
.mdemo-fit li{position:relative;padding:.7rem 0 .7rem 2.1rem;border-top:1px solid rgba(7,20,22,.07);font-weight:600}
.mdemo-fit li:first-child{border-top:0}
.mdemo-fit li::before{content:"";position:absolute;left:0;top:50%;width:1.2rem;height:1.2rem;margin-top:-.6rem;border-radius:50%;background:var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.mdemo-score em{font:650 1rem/1 var(--font-display);font-style:normal;padding:.35rem .6rem;border-radius:10px;background:var(--acid)}
.mdemo-score em.low{background:rgba(7,20,22,.07);color:var(--muted)}
.mdemo-lines{display:grid;gap:.7rem;margin-bottom:1.2rem;padding:1.1rem;border-radius:14px;background:#fff}
.mdemo-lines i{display:block;width:var(--w);height:10px;border-radius:6px;background:rgba(7,20,22,.12);transform-origin:left}
.mdemo-thread,.mloop-reply{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.mbub.out{align-self:flex-end;border-radius:16px 16px 4px 16px;background:var(--ink);color:#fff}
.mbub.in{background:#fff;border:1px solid rgba(7,20,22,.08)}
.mbub.typing{display:flex;gap:.3rem;padding:.8rem 1rem;background:#fff}
.mbub.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.mdemo-handoff{display:grid;gap:1rem}
.mhand-card{display:grid;gap:.15rem;padding:1rem 1.1rem;border-radius:16px;background:#fff;border:1px solid rgba(7,20,22,.08)}
.mhand-card .chip{justify-self:start;margin-top:.6rem}
.mhand-arrow{justify-self:center;width:2px;height:28px;background:var(--ink);transform-origin:top}
.mloop-send em{display:grid;font-style:normal}
.mloop-send em i{grid-area:1/1;font:600 .78rem/1.2 var(--font-body);font-style:normal;padding:.28rem .65rem;border-radius:999px;text-align:center}
.mloop-send em i:first-child{background:rgba(7,20,22,.06)}
.mloop-send em i:last-child{background:var(--acid);opacity:0}

/* Loop choreography. Every loop is silent, slow and repeats cleanly. */
.mdemo-fit li,.mdemo-score li,.mloop-send li{animation:m-item 6.5s var(--m-ease) infinite both}
.mdemo-fit li:nth-child(2),.mdemo-score li:nth-child(2),.mloop-send li:nth-child(2){animation-delay:.5s}
.mdemo-fit li:nth-child(3),.mdemo-score li:nth-child(3),.mloop-send li:nth-child(3){animation-delay:1s}
.mdemo-fit li:nth-child(4),.mdemo-score li:nth-child(4){animation-delay:1.5s}
.mdemo-fit li:nth-child(5){animation-delay:2s}
.mdemo-score em{animation:m-pop 6.5s 2.2s var(--m-ease) infinite both}
.mdemo-lines i{animation:m-grow 6.5s var(--m-ease) infinite both}
.mdemo-lines i:nth-child(2){animation-delay:.6s}.mdemo-lines i:nth-child(3){animation-delay:1.2s}.mdemo-lines i:nth-child(4){animation-delay:1.8s}
.mdemo-write .chip{animation:m-pop 6.5s 2.6s var(--m-ease) infinite both}
.mdemo-thread .mbub.out,.mloop-reply .mbub.out{animation:m-item 6.5s .2s var(--m-ease) infinite both}
.mdemo-thread .mbub.typing,.mloop-reply .mbub.typing{animation:m-typing 6.5s var(--m-ease) infinite both}
.mbub.typing i{animation:m-dot 1s ease-in-out infinite}
.mbub.typing i:nth-child(2){animation-delay:.15s}.mbub.typing i:nth-child(3){animation-delay:.3s}
.mdemo-thread .mbub.in,.mloop-reply .mbub.in{animation:m-reply 6.5s var(--m-ease) infinite both}
.mdemo-thread .chip,.mloop-reply .chip{animation:m-pop 6.5s 3.4s var(--m-ease) infinite both}
.mhand-card{animation:m-item 6.5s var(--m-ease) infinite both}
.mhand-arrow{animation:m-drop 6.5s .8s var(--m-ease) infinite both}
.mhand-cal{animation:m-item 6.5s 1.3s var(--m-ease) infinite both}
.mhand-cal span.on em{animation:m-pop 6.5s 2.2s var(--m-ease) infinite both}
.mloop-send em i:first-child{animation:m-swap-out 6.5s 1.6s var(--m-ease) infinite both}
.mloop-send em i:last-child{animation:m-swap-in 6.5s 1.6s var(--m-ease) infinite both}
.mloop-score .meter i{display:block;transform-origin:left;animation:m-grow 7s var(--m-ease) infinite both}
.mloop-score .meter:nth-of-type(2) i{animation-delay:.4s}.mloop-score .meter:nth-of-type(3) i{animation-delay:.8s}

/* Only the visible tab panel plays; loops pause off-screen and on Pause. */
.mtabs.is-on .mtab-panel *{animation-play-state:paused}
.mtabs.is-on.is-inview:not(.is-paused) .mtab-panel:not([hidden]) *{animation-play-state:running}
html.m-js .mloop:not(.is-inview) *{animation-play-state:paused}

@keyframes m-item{0%{opacity:0;transform:translateY(10px)}8%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes m-pop{0%{opacity:0;transform:scale(.85)}7%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
@keyframes m-grow{0%{transform:scaleX(0)}14%,84%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes m-drop{0%{transform:scaleY(0)}10%,84%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes m-typing{0%,14%{opacity:0;transform:translateY(6px)}20%,36%{opacity:1;transform:none}42%,100%{opacity:0;transform:none}}
@keyframes m-reply{0%,40%{opacity:0;transform:translateY(10px)}48%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes m-dot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-3px);opacity:1}}
@keyframes m-swap-out{0%,20%{opacity:1}28%,100%{opacity:0}}
@keyframes m-swap-in{0%,20%{opacity:0}28%,80%{opacity:1}92%,100%{opacity:0}}
@keyframes m-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Trial band: same treatment on home and pricing ---------- */
.price-change--home{padding:clamp(4.5rem,9vw,7.5rem) 0}
.trial-offer{gap:2.5rem 4rem;padding:clamp(1.75rem,4.5vw,3.5rem);border-radius:var(--m-radius-lg);box-shadow:0 24px 60px rgba(0,0,0,.18)}

/* ---------- Accordions (pricing details and FAQ share one style) ---------- */
.acc{max-width:none}
.faq.acc{max-width:880px}
.acc details,.faq details{padding:0;border-top:1px solid rgba(7,20,22,.12)}
.acc details:last-child,.faq details:last-child{border-bottom:1px solid rgba(7,20,22,.12)}
.acc summary,.faq summary{position:relative;display:flex;align-items:center;min-height:64px;padding:1.15rem 3rem 1.15rem 0;list-style:none;font:600 1.08rem/1.35 var(--font-display);letter-spacing:-.01em;cursor:pointer}
.acc summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.acc summary::after,.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;transition:transform .3s var(--m-ease)}
.acc details[open] summary::after,.faq details[open] summary::after{transform:rotate(45deg)}
.acc details>p,.faq details>p{margin:0 0 1.4rem;max-width:760px;color:var(--muted);line-height:1.65}
.acc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0 0 1.5rem}
.acc-grid div{padding:1rem 1.1rem;border-radius:16px;background:#fff;box-shadow:var(--m-shadow-sm)}
.acc-grid dt{font:600 .9rem/1.3 var(--font-display)}
.acc-grid dt small{display:block;margin-top:.15rem;font:500 .78rem/1.3 var(--font-body);color:var(--muted)}
.acc-grid dd{margin:.6rem 0 0;font-size:.92rem;line-height:1.5}

/* ---------- Closing block: calm cards, one clear action ---------- */
.mclose-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.25rem}
.mclose-card{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:clamp(2rem,5vw,3.75rem);border-radius:var(--m-radius-lg);background:#fff;box-shadow:var(--m-shadow)}
.mclose-card h2{font-size:clamp(2rem,3.6vw,3rem);font-weight:600;line-height:1.08;letter-spacing:-.03em}
.mclose-card h3{font:600 clamp(1.25rem,2vw,1.6rem)/1.25 var(--font-display);letter-spacing:-.02em}
.mclose-card p{margin:0;line-height:1.65}
.mclose-main{background:var(--ink);color:#fff}
.mclose-main p{color:#c2d0ce}
.mclose-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:auto;padding-top:1rem}
.mclose-link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:700;text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:.25em}
.mclose-card:not(.mclose-main) .mclose-link{margin-top:auto}
.mclose-solo{max-width:none}
.mclose-solo h2{max-width:820px}

/* ---------- Narrow screens ---------- */
@media(max-width:1100px){.mtab-panel{grid-template-columns:1fr;min-height:0}.acc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){
  .mfeature .section-head{grid-template-columns:1fr}
  .mfeature .section-head>.mloop{grid-column:1;grid-row:auto;margin-top:2rem}
  .mtabs.is-on{grid-template-columns:1fr}
  .mtabs-list{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 -1.125rem;padding:0 1.125rem .25rem;scroll-snap-type:x mandatory}
  .mtabs-list::-webkit-scrollbar{display:none}
  .mtabs-list button{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .mclose-grid{grid-template-columns:1fr}
  .mdash-body{grid-template-columns:1fr}
  .mdash-convos{grid-row:auto}
}
@media(max-width:640px){.acc-grid{grid-template-columns:1fr}.mdash-days span,.mhand-cal span{min-height:58px;padding:.4rem}.mdash-days em,.mhand-cal em{font-size:.6rem}}

/* ---------- Reduced motion: a fully readable, static page ---------- */
@media(prefers-reduced-motion:reduce){
  .mdemo *,.mloop *,.mdemo,.mloop,.mtabs-list button::after{animation:none!important}
  .mbub.typing{display:none}
  .mloop-send em i:first-child{opacity:0}
  .mloop-send em i:last-child{opacity:1}
  .motion-ready .reveal.is-visible{animation:none}
  .mtabs-pause{display:none}
  .acc summary::after,.faq summary::after{transition:none}
}

/* Brand blue (Nov 2026): white text on solid blue chips and markers. */
.chip-booked,.mdash-days em,.mhand-cal em,.mdemo-score em:not(.low),.mloop-send em i:last-child{color:#fff}
.mclose-main .mclose-link{text-decoration-color:var(--blue-light)}

/* Nov 2 fixes: plan buttons stay on one line; the Fit Breakdown card is a pale
   loop card, so its text uses the normal dark colours; career dates get a gap. */
.plan-actions .btn{white-space:nowrap}
.piq-panel.mloop{color:var(--ink);box-shadow:var(--m-shadow)}
.piq-panel.mloop p,.piq-panel.mloop label{color:var(--ink)}
.piq-panel.mloop .meter{background:rgba(7,20,22,.1)}
.piq-panel.mloop .verdict{color:var(--ink);border-color:rgba(7,20,22,.14);background:#fff}

/* Nov 2 round: three managed cards; Leads By You as a strip under the grid. */
.plans{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.plans{grid-template-columns:1fr}}
/* The trial chip belongs to the monthly view only; in the prepaid views it
   would read as if the free month were inside that payment. */
.plans:not([data-term="monthly"]) .plan-offer{display:none}
/* Savings pills sit on one line, sized to their content. */
.plan-save{white-space:nowrap;max-width:100%}
.plans-diy{margin:1rem 0 0;padding:1rem 1.25rem;border:1px solid rgba(7,20,22,.12);border-radius:var(--m-radius);background:#fff;font-size:.98rem;line-height:1.5}
.plans-diy a{font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:.25em}
.plans-diy a:hover{color:var(--blue)}