/* Landing only. Uses the application's existing color and type tokens. */
[data-page=landing] {
  --accent:var(--mark); --section-wash:var(--paper);
  --panel:#101720; --panel-raised:#18222f; --panel-line:#2b394a;
  --panel-text:#edf1f7; --panel-muted:#a8b5c7; --peach:#ffab7f;
  background:var(--raise);
}
html:has(body[data-page=landing]) { scroll-padding-top:var(--landing-header-height,82px); }
.landing-main section[id] { scroll-margin-top:var(--landing-anchor-offset,16px); }
[data-page=landing] .bar {
  position:sticky;top:0;z-index:20;min-height:82px;
  background:color-mix(in srgb,var(--raise) 92%,transparent);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--rule);
  padding-inline:max(28px,calc((100vw - 1240px)/2));
}
[data-page=landing] .bar .brand-logo { width:154px; }
[data-page=landing] .welcome-offer { position:sticky; top:var(--landing-bar-height,82px); z-index:19; margin:0; padding:9px 16px; background:color-mix(in srgb,var(--raise) 92%,transparent); backdrop-filter:blur(18px); border-bottom:1px solid var(--rule); }
[data-page=landing] .bar nav { gap:27px; }
[data-page=landing] .bar nav .nav-cta { border-radius:999px;background:var(--mark);color:var(--mark-in);padding:12px 23px; }
[data-page=landing] .bar a[aria-current=location] { color:var(--mark); }
[data-page=landing] .bar .nav-secondary { position:relative; }
[data-page=landing] .bar .nav-secondary::after { content:"";position:absolute;bottom:2px;left:50%;width:22px;height:2px;border-radius:2px;background:var(--mark);transform:translateX(-50%) scaleX(0);transition:transform .18s ease; }
[data-page=landing] .bar .nav-secondary[aria-current=location]::after { transform:translateX(-50%) scaleX(1); }
[data-page=landing] .btn { border-radius:999px;min-height:48px;font-size:14px;gap:10px;transition:transform .2s,background .2s; }
[data-page=landing] .btn.solid { background:var(--mark);color:var(--mark-in);border-color:var(--mark);box-shadow:none; }
[data-page=landing] .btn:hover { transform:translateY(-2px); }
[data-page=landing] .btn.solid:hover { filter:brightness(.96); }
[data-page=landing] .btn.big { padding:17px 27px;font-size:16px; }
.landing-main { width:100%;max-width:1304px;padding:0 32px;margin:0 auto;overflow:clip; }
.landing-main .eyebrow { font-size:11px;letter-spacing:.13em;font-weight:500; }
.landing-main h2 { font-size:clamp(34px,3.7vw,52px);line-height:1.08;letter-spacing:-.045em;font-weight:600;margin:0; }
.landing-main h2 em { font-family:var(--read);font-weight:400;color:var(--mark); }
.landing-hero { display:grid;grid-template-columns:1fr 1.03fr;gap:64px;align-items:center;padding:88px 0 90px; }
.hero-kicker { display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.015em;color:var(--quiet);margin:0 0 28px; }
.hero-kicker>span { width:8px;height:8px;background:var(--mark);border-radius:50%;box-shadow:0 0 0 5px color-mix(in srgb,var(--mark) 13%,transparent);flex:none; }
.landing-hero h1 { font-size:clamp(64px,6.9vw,98px);line-height:1.01;letter-spacing:-.065em;font-weight:600;margin:0 0 27px;text-wrap:initial; }
.landing-hero h1 em { font-family:var(--read);font-weight:400;letter-spacing:-.055em;color:var(--mark); }
.hero-description { font-size:18px;line-height:1.75;max-width:440px;margin:0 0 30px;color:var(--quiet);text-wrap:pretty; }
.hero-copy .button-row { gap:22px; }
.hero-secondary { display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:13px;font-weight:500;text-decoration:none; }
.hero-secondary .icon { width:16px;height:16px; }
.hero-notes { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--quiet);margin:20px 0 0; }
.hero-notes .icon { width:16px;height:16px;color:var(--mark);flex:none; }
.hero-signature { display:flex;align-items:center;gap:11px;font-size:11px;color:var(--quiet);margin-top:40px; }
.hero-signature i { width:3px;height:3px;border-radius:50%;background:var(--mark); }
.hero-visual { position:relative;isolation:isolate;min-width:0;padding:0 0 28px; }
.hero-visual::before { content:"";position:absolute;inset:5% -8% -5%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,color-mix(in srgb,var(--mark) 11%,transparent),transparent 65%); }
.visual-heading { display:flex;justify-content:space-between;gap:16px;color:var(--quiet);font-size:10px;letter-spacing:.1em;padding:0 5px;margin-bottom:17px; }
.visual-heading>span:last-child { letter-spacing:0; }
.product-preview { position:relative;background:var(--panel);color:var(--panel-text);border:1px solid #415269;border-radius:22px;box-shadow:0 28px 55px -28px #0007;overflow:hidden;transform:perspective(1600px) rotateY(-4deg) rotateX(1deg);transition:transform .45s; }
.product-preview:hover { transform:perspective(1600px) rotateY(0) rotateX(0); }
.preview-chrome { display:flex;align-items:center;justify-content:space-between;padding:20px 23px;border-bottom:1px solid var(--panel-line); }
.preview-brand { display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600; }
.preview-brand img { width:30px;height:30px;border-radius:8px; }
.preview-session { display:flex;align-items:center;gap:7px;border-radius:999px;background:#202e3e;border:1px solid var(--panel-line);color:var(--panel-muted);font-size:10px;padding:5px 10px; }
.preview-session i,.preview-answer-foot i { width:5px;height:5px;background:#7bd4aa;border-radius:50%; }
.preview-tabs { display:flex;gap:5px;padding:20px 22px 0; }
.preview-tabs button { background:transparent;border:1px solid transparent;border-radius:9px;padding:9px 14px;font-size:12px;color:var(--panel-muted);min-height:40px; }
.preview-tabs button[aria-pressed=true] { background:#35281f;color:var(--peach);border-color:#8e5b40; }
.preview-tabs button:hover { color:var(--peach); }
.preview-conversation { padding:25px 22px 0; }
.preview-eyebrow { display:flex;align-items:center;gap:7px;color:var(--panel-muted);font-size:11px;line-height:1.5;margin:0 0 12px; }
.preview-eyebrow .icon { width:15px;height:15px; }
.preview-question>p:last-of-type { font-size:18px;line-height:1.55;min-height:56px;margin:0 0 15px; }
.preview-wave { display:flex;align-items:center;gap:4px;height:25px;margin-bottom:21px; }
.preview-wave i { display:block;width:3px;height:7px;background:var(--peach);border-radius:3px; }
.preview-wave i:nth-child(3n) { height:22px; }
.preview-wave i:nth-child(3n + 1) { height:13px; }
.preview-wave i:nth-child(5n) { height:25px; }
.preview-wave i { animation:speaking-wave .85s ease-in-out infinite alternate; }
.preview-wave i:nth-child(2n) { animation-delay:-.3s;animation-duration:.7s; }
.preview-wave i:nth-child(3n) { animation-delay:-.55s;animation-duration:1s; }
.preview-answer { background:var(--panel-raised);border:1px solid var(--panel-line);border-radius:14px;padding:18px 20px; }
.preview-answer-heading { display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:12px; }
.preview-answer-heading .preview-eyebrow { color:var(--peach);margin:0;font-size:10px; }
#preview-play { display:grid;place-items:center;width:32px;height:32px;border:1px solid #415269;border-radius:50%;background:transparent;color:var(--peach);flex:none; }
#preview-play .icon { width:13px;height:13px; }
#preview-play[aria-pressed=true] { background:#35281f;border-color:#8e5b40; }
.preview-answer>p { font:400 25px/1.55 var(--read);min-height:120px;margin:0 0 21px;color:var(--panel-text); }
.preview-read,.preview-word.read { color:var(--panel-muted); }
.preview-answer mark,.preview-word.current { background:var(--peach);color:#25180e;box-shadow:3px 0 var(--peach),-3px 0 var(--peach);border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone; }
.preview-answer-foot { display:flex;justify-content:space-between;border-top:1px solid var(--panel-line);padding-top:13px;font-size:10px;color:var(--panel-muted); }
.preview-answer-foot>span:first-child { display:flex;align-items:center;gap:7px; }
.preview-answer-foot .icon { width:13px;height:13px; }
.preview-bottom { display:flex;gap:7px;align-items:center;padding:18px 23px 23px;font-size:11px;color:var(--panel-muted); }
.preview-bottom .icon { width:14px;height:14px; }
.confidence-note { position:absolute;bottom:0;right:-9px;display:flex;align-items:center;gap:12px;background:var(--raise);border:1px solid var(--rule2);border-radius:13px;padding:15px 20px;box-shadow:var(--shadow); }
.confidence-note>.icon { width:26px;height:26px;color:var(--mark); }
.confidence-note b,.confidence-note div>span { display:block; }
.confidence-note b { font-size:13px;font-weight:500; }
.confidence-note div>span { color:var(--quiet);font-size:11px;margin-top:2px; }

/* Use cases: a quiet typographic list beside the heading. */
.moments-section { display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:start;padding:64px 0 80px;border-top:1px solid var(--rule); }
.moments-heading .eyebrow { margin-bottom:16px; }
.moments-heading h2 { font-size:40px;line-height:1.1; }
.moments-list { list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule); }
.moments-list li { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:18px 0;border-top:1px solid var(--rule); }
.moments-list h3 { margin:0;font:400 24px/1.25 var(--read);letter-spacing:-.01em;color:var(--ink);transition:color .2s; }
.moments-list li:hover h3 { color:var(--mark); }
.moments-list p { margin:0;font-size:14px;line-height:1.6;color:var(--quiet);text-wrap:pretty; }
@media (max-width:900px) {
  .moments-section { grid-template-columns:minmax(0,1fr);gap:28px;padding:48px 0 60px; }
  .moments-heading h2 br { display:none; }
}
@media (max-width:600px) {
  .moments-section { padding:36px 0 44px; }
  .moments-heading h2 { font-size:32px; }
  .moments-list li { grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0; }
  .moments-list h3 { font-size:21px; }
  .moments-list p { font-size:13px; }
}
/* Moments, picker: the six names read as one line; the active one is underlined and its sentence shows below. */
.moments-section[data-style=picker],.moments-section[data-style=grid] { display:block; }
.moments-section[data-style=picker] .moments-heading,.moments-section[data-style=grid] .moments-heading { margin-bottom:36px; }
.moments-section[data-style=picker] .moments-heading h2 br,.moments-section[data-style=grid] .moments-heading h2 br { display:none; }
.moments-section[data-style=picker] .moments-list { position:relative;display:flex;flex-wrap:wrap;align-items:baseline;row-gap:4px;padding:0 0 88px;border-bottom:1px solid var(--rule); }
.moments-section[data-style=picker] .moments-list li { display:flex;align-items:baseline;gap:0;padding:0;border:0; }
.moments-section[data-style=picker] .moments-list li:not(:last-child)::after { content:"/";margin:0 .4em;font:300 clamp(28px,3.6vw,50px)/1.2 var(--read);color:var(--rule2); }
.moments-section[data-style=picker] .moments-list h3 { font:400 clamp(28px,3.6vw,50px)/1.2 var(--read);letter-spacing:-.02em;color:var(--faint);border-bottom:2px solid transparent;cursor:pointer;outline:none;transition:color .25s,border-color .25s; }
.moments-section[data-style=picker] .moments-list li:hover h3,.moments-section[data-style=picker] .moments-list h3:focus-visible { color:var(--ink); }
.moments-section[data-style=picker] .moments-list li.is-active h3 { color:var(--ink);border-bottom-color:var(--mark); }
.moments-section[data-style=picker] .moments-list p { position:absolute;left:0;right:0;bottom:30px;font-size:17px;line-height:1.5;color:var(--quiet);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .3s,transform .3s; }
.moments-section[data-style=picker] .moments-list li.is-active p { opacity:1;transform:none; }
/* Moments, grid: open three-column grid, rules instead of boxes. */
.moments-section[data-style=grid] .moments-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;border:0; }
.moments-section[data-style=grid] .moments-list li { display:block;padding:22px 0 26px;border-top:1px solid var(--rule); }
.moments-section[data-style=grid] .moments-list h3 { margin-bottom:8px;font-size:24px; }
@media (max-width:900px) { .moments-section[data-style=grid] .moments-list { grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px; } }
@media (max-width:600px) {
  .moments-section[data-style=picker] .moments-list { padding-bottom:96px; }
  .moments-section[data-style=picker] .moments-list h3,.moments-section[data-style=picker] .moments-list li:not(:last-child)::after { font-size:26px; }
  .moments-section[data-style=picker] .moments-list p { bottom:24px;font-size:15px; }
  .moments-section[data-style=grid] .moments-list { grid-template-columns:minmax(0,1fr); }
  .moments-section[data-style=grid] .moments-list li { padding:16px 0 18px; }
  .moments-section[data-style=grid] .moments-list h3 { font-size:21px; }
}
.moments-section .m-ico { display:none; }
.m-ico svg { display:block;width:100%;height:100%; }
.moments-section[data-style=spotlight],.moments-section[data-style=bento],.moments-section[data-style=pills] { display:block; }
.moments-section[data-style=spotlight] .moments-heading,.moments-section[data-style=bento] .moments-heading,.moments-section[data-style=pills] .moments-heading { margin-bottom:32px; }
.moments-section[data-style=spotlight] .moments-heading h2 br,.moments-section[data-style=bento] .moments-heading h2 br,.moments-section[data-style=pills] .moments-heading h2 br { display:none; }
/* A · Spotlight: names on the left, the active moment fills a panel on the right. */
.moments-section[data-style=spotlight] .moments-list { display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:repeat(6,auto);column-gap:28px;border:0; }
.moments-section[data-style=spotlight] .moments-list::before { content:"";grid-column:2;grid-row:1 / -1;border:1px solid var(--rule);border-radius:24px;background:var(--paper); }
.moments-section[data-style=spotlight] .moments-list li { display:contents; }
.moments-section[data-style=spotlight] .moments-list h3 { grid-column:1;display:flex;align-items:center;min-height:54px;padding:0 18px;border-radius:14px;font:500 17px/1.3 var(--ui);letter-spacing:-.01em;color:var(--quiet);cursor:pointer;outline:none;transition:background .25s,color .25s; }
.moments-section[data-style=spotlight] .moments-list li:hover h3,.moments-section[data-style=spotlight] .moments-list h3:focus-visible { color:var(--ink); }
.moments-section[data-style=spotlight] .moments-list li.is-active h3 { background:var(--paper);color:var(--mark); }
.moments-section[data-style=spotlight] .moments-list .m-ico,.moments-section[data-style=spotlight] .moments-list p { grid-column:2;grid-row:1 / -1;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s,transform .35s; }
.moments-section[data-style=spotlight] .moments-list .m-ico { display:block;align-self:start;width:34px;height:34px;margin:40px 44px;color:var(--mark); }
.moments-section[data-style=spotlight] .moments-list p { align-self:end;margin:0 44px 44px;max-width:520px;font:400 clamp(28px,2.6vw,38px)/1.25 var(--read);letter-spacing:-.015em;color:var(--ink);text-wrap:balance; }
.moments-section[data-style=spotlight] .moments-list li.is-active .m-ico,.moments-section[data-style=spotlight] .moments-list li.is-active p { opacity:1;transform:none; }
/* B · Bento: six tiles in mixed sizes, the first one leads. */
.moments-section[data-style=bento] .moments-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a b c" "a d e" "f f f";gap:12px;border:0; }
.moments-section[data-style=bento] .moments-list li { display:flex;flex-direction:column;gap:8px;min-height:170px;padding:24px;border:1px solid var(--rule);border-radius:20px;background:var(--paper);transition:border-color .2s; }
.moments-section[data-style=bento] .moments-list li:hover { border-color:var(--mark); }
.moments-section[data-style=bento] .moments-list li:nth-child(1) { grid-area:a;background:var(--mark-wash);border-color:color-mix(in srgb,var(--mark) 25%,transparent); }
.moments-section[data-style=bento] .moments-list li:nth-child(2) { grid-area:b; } .moments-section[data-style=bento] .moments-list li:nth-child(3) { grid-area:c; } .moments-section[data-style=bento] .moments-list li:nth-child(4) { grid-area:d; } .moments-section[data-style=bento] .moments-list li:nth-child(5) { grid-area:e; }
.moments-section[data-style=bento] .moments-list li:nth-child(6) { grid-area:f;flex-direction:row;align-items:center;gap:18px;min-height:0; }
.moments-section[data-style=bento] .moments-list .m-ico { display:block;flex:none;width:24px;height:24px;margin-bottom:auto;color:var(--mark); }
.moments-section[data-style=bento] .moments-list li:nth-child(6) .m-ico { margin:0; }
.moments-section[data-style=bento] .moments-list h3 { margin-top:18px;font-size:24px; }
.moments-section[data-style=bento] .moments-list li:nth-child(1) h3 { font-size:clamp(34px,3.4vw,48px);line-height:1.1; }
.moments-section[data-style=bento] .moments-list li:nth-child(1) p { font-size:16px;color:var(--ink); }
.moments-section[data-style=bento] .moments-list li:nth-child(6) h3 { margin:0; }
/* C · Pills: a centred row of tags; the active one fills and its sentence shows underneath. */
.moments-section[data-style=pills] .moments-heading { text-align:center; }
.moments-section[data-style=pills] .moments-list { position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 0 76px;border:0; }
.moments-section[data-style=pills] .moments-list li { display:flex;align-items:center;gap:10px;padding:13px 22px 13px 18px;border:1px solid var(--rule2);border-radius:999px;background:var(--raise);cursor:pointer;transition:background .25s,border-color .25s,color .25s; }
.moments-section[data-style=pills] .moments-list .m-ico { display:block;width:18px;height:18px;color:var(--mark); }
.moments-section[data-style=pills] .moments-list h3 { font:500 16px/1.2 var(--ui);color:var(--ink);outline:none; }
.moments-section[data-style=pills] .moments-list li:hover { border-color:var(--mark); }
.moments-section[data-style=pills] .moments-list li.is-active { background:var(--mark);border-color:var(--mark); }
.moments-section[data-style=pills] .moments-list li.is-active h3,.moments-section[data-style=pills] .moments-list li.is-active .m-ico { color:var(--mark-in); }
.moments-section[data-style=pills] .moments-list p { position:absolute;left:0;right:0;bottom:18px;text-align:center;font:400 22px/1.4 var(--read);color:var(--ink);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .3s,transform .3s; }
.moments-section[data-style=pills] .moments-list li.is-active p { opacity:1;transform:none; }
@media (max-width:900px) {
  .moments-section[data-style=spotlight] .moments-list { grid-template-columns:minmax(0,1fr); }
  .moments-section[data-style=spotlight] .moments-list::before,.moments-section[data-style=spotlight] .moments-list .m-ico { display:none; }
  .moments-section[data-style=spotlight] .moments-list li { display:block;padding:14px 0;border-top:1px solid var(--rule); }
  .moments-section[data-style=spotlight] .moments-list h3 { min-height:0;padding:0;color:var(--ink);background:none !important; }
  .moments-section[data-style=spotlight] .moments-list p { margin:4px 0 0;opacity:1;transform:none;font:400 15px/1.55 var(--ui);color:var(--quiet); }
  .moments-section[data-style=bento] .moments-list { grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "b c" "d e" "f f"; }
}
@media (max-width:600px) {
  .moments-section[data-style=bento] .moments-list { grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "b" "c" "d" "e" "f"; }
  .moments-section[data-style=bento] .moments-list li { min-height:0; }
  .moments-section[data-style=bento] .moments-list li:nth-child(6) { flex-direction:column;align-items:flex-start; }
  .moments-section[data-style=pills] .moments-list li { padding:11px 16px 11px 14px; }
  .moments-section[data-style=pills] .moments-list h3 { font-size:14px; }
  .moments-section[data-style=pills] .moments-list { padding-bottom:92px; }
  .moments-section[data-style=pills] .moments-list p { font-size:18px; }
}
.landing-section { padding:75px 0 90px; }
.section-title { display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:38px; }
.section-title>p { max-width:365px;color:var(--quiet);font-size:15px;line-height:1.85;margin:0 0 3px; }
.session-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.session-option { padding:29px;border:1px solid var(--rule);border-radius:22px;background:var(--paper);display:flex;flex-direction:column;min-width:0;transition:transform .2s,border-color .2s; }
.session-option:hover { transform:translateY(-4px);border-color:var(--rule2); }
.option-top { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:31px; }
.option-top .icon-box { width:42px;height:42px;border-radius:12px;background:var(--raise);border:1px solid var(--rule); }
.option-number { font-size:12px;color:var(--faint); }
.option-label { font-size:10px;color:var(--quiet); }
.session-option h3 { font-size:27px;font-weight:600;margin:0 0 5px; }
.session-option .option-tagline { font:italic 22px/1.4 var(--read);color:var(--mark);margin-bottom:20px; }
.session-option>p:not(.option-tagline) { font-size:14px;line-height:1.8;color:var(--quiet);min-height:126px;margin-bottom:22px; }
.session-mini { height:72px;border:1px solid var(--rule);border-radius:11px;padding:17px;background:var(--raise); }
.transcript-mini { display:flex;flex-direction:column;gap:6px;position:relative; }
.transcript-mini>span { width:86%;height:4px;border-radius:2px;background:var(--rule2); }
.transcript-mini>span:nth-child(2) { width:68%; }
.transcript-mini>span:nth-child(3) { width:76%; }
.transcript-mini i { position:absolute;top:22px;left:45%;width:45px;height:17px;background:#ffab7fa0;border-radius:3px; }
.ai-mini { display:flex;align-items:center;gap:12px;color:var(--quiet);font:italic 20px var(--read); }
.ai-mini .icon { width:18px;height:18px;color:var(--mark); }
.combined-mini { display:grid;grid-template-columns:1fr 1fr;gap:17px; }
.combined-mini>span { display:flex;flex-direction:column;gap:6px; }
.combined-mini>span+span { border-left:1px solid var(--rule);padding-left:17px; }
.combined-mini i { width:100%;height:4px;background:var(--rule2);border-radius:2px; }
.combined-mini i:last-child { width:65%; }
.combined-mini>span:last-child i:nth-child(2) { background:var(--peach); }
.session-option ul { list-style:none;padding:0;margin:24px 0 27px;font-size:12px;line-height:2.3;color:var(--quiet); }
.session-option li::before { content:"✓";color:var(--mark);margin-right:9px; }
.option-footer { display:flex;flex-direction:column;gap:17px;border-top:1px solid var(--rule);padding-top:20px;margin-top:auto; }
.option-footer>span { color:var(--quiet);font-size:12px; }
.option-footer b { color:var(--ink);font-size:15px;font-weight:500; }
.option-footer a { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:45px;border-radius:999px;font-size:13px;font-weight:500;color:var(--mark);text-decoration:none; }
.option-footer a .icon { width:18px;height:18px; }
.combined-option {
  --ink:#edf1f7;--quiet:#a8b5c7;--rule:#2b394a;--rule2:#415269;--raise:#18222f;--mark:#ffab7f;
  background:radial-gradient(ellipse at 100% 0,#ffab7f12,transparent 60%),#101720;border-color:#415269;
}
.combined-option .option-label { color:var(--peach); }
.combined-option .option-footer a { background:var(--peach);color:#25180e;padding:11px 17px; }
.sessions-note { display:flex;justify-content:center;align-items:center;gap:9px;color:var(--quiet);font-size:12px;margin:23px 0 0; }
.sessions-note .icon { width:16px;height:16px;flex:none; }

/* A hands-on demo: fixed dark surfaces match the desktop session palette. */
.marker-section {
  --ink:#edf1f7;--quiet:#a8b5c7;--faint:#9ba9bb;--rule:#2b394a;--rule2:#415269;--mark:#ffab7f;
  display:grid;grid-template-columns:1fr 1.08fr;gap:58px;align-items:center;
  padding:54px;border:1px solid #415269;border-radius:28px;background:#101720;color:var(--ink);
}
.marker-copy h2 { font-size:43px; }
.marker-copy>p:not(.eyebrow) { font-size:15px;line-height:1.85;color:var(--quiet);margin:24px 0;max-width:425px; }
.marker-steps { list-style:none;margin:28px 0 0;padding:0; }
.marker-steps li { display:flex;gap:16px;padding:17px 0;border-top:1px solid var(--rule); }
.marker-steps li:last-child { padding-bottom:0; }
.marker-steps li>span { width:28px;height:28px;display:grid;place-items:center;flex:none;font-size:11px;border:1px solid #8e5b40;background:#35281f;color:var(--peach);border-radius:50%; }
.marker-steps b { font-size:14px;font-weight:500; }
.marker-steps p { font-size:12px;line-height:1.7;color:var(--quiet);margin:3px 0 0; }
.marker-demo { background:#18222f;border:1px solid var(--rule2);border-radius:19px;overflow:hidden;min-width:0; }
.marker-demo-top { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:21px 25px;border-bottom:1px solid var(--rule);font-size:11px; }
.marker-demo-top>span:first-child { display:flex;align-items:center;gap:8px; }
.marker-demo-top .icon { width:16px;height:16px;color:var(--peach); }
.demo-badge { color:var(--quiet);font-size:10px; }
.demo-sentence { padding:30px 28px 22px;margin:0;min-height:235px;color:var(--ink);font:400 30px/1.6 var(--read);letter-spacing:-.015em; }
.demo-word { border-bottom:2px solid transparent;border-radius:3px; }
.demo-word.read { color:var(--faint); }
.demo-word.trail { border-bottom-color:var(--peach); }
.demo-word.current { background:var(--peach);color:#25180e;box-shadow:3px 0 var(--peach),-3px 0 var(--peach); }
.marker-key { display:flex;flex-wrap:wrap;gap:17px;padding:0 28px 23px;font-size:10px;color:var(--quiet); }
.marker-key>span { display:flex;align-items:center;gap:6px; }
.marker-key i { width:13px;height:4px;background:var(--ink);border-radius:2px; }
.marker-key .key-read { background:var(--faint); }
.marker-key .key-current { background:var(--peach); }
.pace-control { padding:0 28px 23px; }
.range-label { display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;margin-bottom:11px; }
.range-label label { font-size:inherit;margin:0;font-weight:500; }
.range-label output { color:var(--mark);font-variant-numeric:tabular-nums; }
.landing-main input[type=range] { display:block;width:100%;height:24px;margin:0;padding:0;border:0;background:transparent;box-shadow:none;accent-color:var(--mark);cursor:pointer;appearance:none; }
.landing-main input[type=range]::-webkit-slider-runnable-track { height:4px;border-radius:4px;background:linear-gradient(to right,var(--mark) var(--range-fill,33.333%),var(--rule2) var(--range-fill,33.333%)); }
.landing-main input[type=range]::-webkit-slider-thumb { appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:var(--mark);border:3px solid var(--raise);box-shadow:0 0 0 1px var(--mark); }
.landing-main input[type=range]::-moz-range-track { height:4px;border-radius:4px;background:var(--rule2); }
.landing-main input[type=range]::-moz-range-progress { height:4px;background:var(--mark); }
.landing-main input[type=range]::-moz-range-thumb { width:16px;height:16px;border-radius:50%;background:var(--mark);border:2px solid var(--raise); }
.marker-section input[type=range]::-webkit-slider-thumb { border-color:#18222f; }
.range-ends { display:flex;justify-content:space-between;color:var(--quiet);font-size:10px;margin-top:6px; }
.marker-demo-bottom { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 23px;border-top:1px solid var(--rule); }
.marker-demo-bottom b { display:block;font-size:11px;font-weight:500; }
.marker-demo-bottom div>span { display:block;color:var(--quiet);font-size:10px;margin-top:4px; }
.marker-demo-bottom .btn { flex:none;min-height:40px;padding:9px 14px;font-size:11px;color:var(--peach);background:#35281f;border-color:#8e5b40; }
.begin-section { padding:88px 0;border-bottom:1px solid var(--rule); }
.begin-section>div { margin-bottom:37px; }
.begin-section h2 br { display:none; }
.begin-section ol { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px;list-style:none;margin:0;padding:0; }
.begin-section li { display:flex;align-items:flex-start;gap:19px;border-top:1px solid var(--rule);padding-top:23px; }
.begin-section li>span { font:italic 29px var(--read);color:var(--mark); }
.begin-section h3 { font-size:18px;margin:0 0 10px; }
.begin-section li p { font-size:14px;line-height:1.8;color:var(--quiet);margin:0;max-width:310px; }

/* The estimate uses actual per-mode rates. The free and paid choices stay separate. */
.time-calculator { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px;border:1px solid var(--rule);background:var(--paper);border-radius:24px;padding:38px 42px;margin-bottom:23px; }
.calculator-controls h3 { font-size:25px;line-height:1.3;max-width:330px;margin:0 0 15px; }
.calculator-controls>p { font-size:14px;color:var(--quiet);line-height:1.75;max-width:350px;margin-bottom:25px; }
.calculator-controls .range-label { margin-top:26px; }
.calculator-controls .range-label output { font-size:21px;letter-spacing:-.03em; }
.calculator-controls p.calculator-note { font-size:11px;margin:20px 0 0;max-width:370px; }
.calculator-results { display:flex;flex-direction:column;gap:12px; }
.credit-estimate { display:flex;align-items:center;gap:16px;border:1px solid var(--rule);border-radius:15px;padding:18px 20px;background:var(--raise); }
.credit-estimate .icon-box { width:38px;height:38px;border-radius:11px;background:var(--paper); }
.credit-estimate>div b,.credit-estimate>div span { display:block; }
.credit-estimate b { font-weight:500;font-size:15px; }
.credit-estimate>div span { color:var(--quiet);font-size:11px;margin-top:2px; }
.credit-estimate p { margin:0 0 0 auto;text-align:right; }
.credit-estimate strong { display:block;font-size:29px;line-height:1.2;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums; }
.credit-estimate p span { font-size:10px;color:var(--quiet); }
.featured-estimate { background:#101720;color:#edf1f7;border-color:#415269;--quiet:#a8b5c7; }
.featured-estimate .icon-box { background:#202e3e;color:var(--peach); }
.featured-estimate strong { color:var(--peach); }
.pricing-cards { display:grid;grid-template-columns:1fr 1fr;gap:23px; }
.plan { padding:28px 32px;border:1px solid var(--rule);border-radius:20px;background:var(--raise);display:flex;flex-direction:column;box-shadow:none; }
.plan.best { background:var(--paper); }
.plan-heading { display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:22px;margin-bottom:19px; }
.plan-heading .eyebrow { font-size:10px;margin:0;letter-spacing:.09em; }
.plan .tag { font-size:10px;background:var(--mark-wash);color:var(--mark);padding:3px 8px;border-radius:5px; }
.plan .price { font-size:43px;line-height:1.3;letter-spacing:-.04em;margin-bottom:6px;font-weight:500; }
.plan .price small { font-size:12px;letter-spacing:0;color:var(--quiet);font-weight:400; }
.plan>.note { font-size:13px; }
.plan ul { color:var(--quiet);list-style:none;padding:0;margin:22px 0 26px;font-size:13px;line-height:2.15; }
.plan li::before { content:"✓";color:var(--mark);margin-right:9px; }
.plan>.btn { margin-top:auto; }
.billing-note { max-width:740px;text-align:center;margin:22px auto 0;font-size:11px; }
.pricing-assurance { display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;color:var(--quiet);font-size:11px; }
.pricing-assurance .icon { width:15px;height:15px; }

/* Desktop and closing panel retain the real Wareyva artwork. */
.download-section { display:grid;grid-template-columns:.85fr 1fr;align-items:center;gap:80px;border-block:1px solid var(--rule);padding:55px;background:var(--paper);border-radius:24px; }
.download-art { display:flex;flex-direction:column;align-items:center;isolation:isolate; }
.desktop-frame { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:relative;width:100%;max-width:330px;aspect-ratio:1.5;background:#101720;border:5px solid #415269;border-bottom-width:16px;border-radius:13px;box-shadow:0 25px 40px -28px #0009; }
.desktop-frame>div { position:absolute;top:10px;left:11px;display:flex;gap:5px; }
.desktop-frame i { width:4px;height:4px;background:#7889a0;border-radius:50%; }
.desktop-frame img { border-radius:16px; }
.desktop-frame>span { font:italic 21px var(--read);color:#edf1f7; }
.desktop-stand { width:85px;height:30px;border-bottom:5px solid #415269;border-radius:0 0 5px 5px;background:linear-gradient(90deg,transparent 27%,#7889a0 27%,#7889a0 73%,transparent 73%); }
.download-copy h2 { font-size:43px; }
.download-copy>p:not(.eyebrow) { font-size:14px;color:var(--quiet);line-height:1.8;margin:22px 0; }
.download-row { display:flex;gap:10px;flex-wrap:wrap; }
.download-copy .download-note { font-size:11px!important;margin-bottom:0!important; }
.faq-section { display:grid;grid-template-columns:.85fr 1.15fr;gap:70px; }
.faq-section .section-title { align-items:flex-start; }
.faq-section h2 { font-size:44px; }
.faq-list details { border-bottom:1px solid var(--rule); }
.faq-list details:first-child { border-top:1px solid var(--rule); }
.faq-list summary { position:relative;list-style:none;padding:21px 43px 21px 0;font-size:15px;line-height:1.5;font-weight:500; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+";position:absolute;right:0;top:18px;width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%;font-size:20px;font-weight:400;color:var(--quiet);transition:transform .2s; }
.faq-list details[open] summary::after { transform:rotate(45deg);color:var(--mark);border-color:var(--mark); }
.faq-list details>p { font-size:14px;line-height:1.85;color:var(--quiet);margin:0;padding:0 35px 24px 0; }
.closing-cta { position:relative;isolation:isolate;overflow:hidden;background:var(--mark);color:var(--mark-in);border-radius:28px;text-align:center;padding:65px 30px 73px;margin-bottom:40px; }
.closing-cta::before,.closing-cta::after { content:"";position:absolute;width:340px;height:340px;border:1px solid currentColor;opacity:.15;border-radius:50%;z-index:-1; }
.closing-cta::before { left:-120px;top:-180px; }
.closing-cta::after { right:-170px;bottom:-180px;width:430px;height:430px; }
.closing-cta>.eyebrow { color:inherit;opacity:.85;font-size:11px;letter-spacing:.07em; }
.closing-cta h2 { color:inherit;font-size:clamp(46px,5.8vw,78px);font-weight:500;letter-spacing:-.05em;margin:16px 0 21px; }
.closing-cta h2 em { color:inherit; }
.closing-cta>p:not(.eyebrow) { font-size:15px;line-height:1.75;margin-bottom:28px; }
[data-page=landing] .closing-cta .btn.solid { background:var(--mark-in);color:var(--mark);border-color:var(--mark-in); }
.closing-note { display:block;font-size:11px;margin-top:17px; }
.closing-watermark { display:none; }
[data-page=landing] footer { max-width:1304px;width:100%;margin:auto;padding:18px 32px 36px;border:0;align-items:center; }
[data-page=landing] .footer-brand { gap:23px; }
[data-page=landing] .footer-brand>span { font-size:11px; }
[data-page=landing] footer nav { gap:24px;font-size:12px; }
@keyframes speaking-wave { to { transform:scaleY(.35); } }

@media(max-width:1150px) {
  [data-page=landing] .bar nav { gap:18px; }
  .landing-hero { gap:32px;padding-top:70px; }
  .landing-hero h1 { font-size:clamp(56px,7.2vw,84px); }
  .hero-description { font-size:17px; }
  .hero-copy .button-row { gap:12px; }
  .hero-copy .btn.big { font-size:14px;padding:14px 22px; }
  .hero-secondary { font-size:12px; }
  .preview-conversation { padding:20px 18px 0; }
  .preview-answer { padding:16px; }
  .preview-answer>p { font-size:23px;min-height:143px; }
  .session-option { padding:24px; }
  .session-option>p:not(.option-tagline) { min-height:155px; }
  .session-option ul { font-size:11px; }
  .marker-section { padding:36px;gap:30px; }
  .marker-copy h2 { font-size:38px; }
  .demo-sentence { font-size:27px;min-height:240px; }
  .marker-demo-bottom { align-items:flex-start;flex-direction:column;gap:13px; }
  .time-calculator { gap:32px;padding:32px; }
  .credit-estimate { gap:10px;padding:17px 15px; }
  .download-section { gap:50px;padding:42px; }
  .plan-heading { flex-wrap:wrap; }
}
@media(max-width:850px) {
  .landing-hero { grid-template-columns:1fr;max-width:600px;margin:auto;padding:56px 0 65px;gap:40px; }
  .landing-hero h1 { font-size:88px; }
  .hero-description { max-width:470px; }
  .hero-signature { margin-top:25px; }
  .hero-visual { max-width:560px;width:100%;margin:auto; }
  .preview-answer>p { min-height:100px;font-size:25px; }
  .section-title { align-items:flex-start;gap:28px; }
  .section-title>p { font-size:13px;max-width:265px; }
  .session-options { grid-template-columns:1fr;gap:16px; }
  .session-option { display:grid;grid-template-columns:1fr 1fr;column-gap:35px;padding:30px; }
  .option-top { grid-column:1/-1;margin-bottom:22px; }
  .session-option h3,.session-option .option-tagline,.session-option>p:not(.option-tagline) { grid-column:1; }
  .session-option>p:not(.option-tagline) { min-height:0;margin-bottom:0; }
  .session-mini { grid-column:2;grid-row:2/4; }
  .session-option ul { grid-column:2;grid-row:4;font-size:12px;margin:3px 0 22px; }
  .option-footer { grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;margin-top:24px; }
  .option-footer a { min-width:185px;gap:20px; }
  .marker-section { grid-template-columns:1fr;padding:38px;gap:33px; }
  .marker-copy h2 { font-size:43px; }
  .marker-copy>p:not(.eyebrow) { max-width:100%; }
  .marker-steps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }
  .marker-steps li { display:block; }
  .marker-steps li>span { margin-bottom:13px; }
  .marker-demo { max-width:560px;width:100%;margin:auto; }
  .demo-sentence { font-size:32px;min-height:212px; }
  .marker-demo-bottom { flex-direction:row;align-items:center; }
  .begin-section ol { gap:26px; }
  .begin-section li { display:block; }
  .begin-section li>span { display:block;margin-bottom:16px; }
  .time-calculator { grid-template-columns:1fr;gap:30px; }
  .calculator-controls h3,.calculator-controls>p { max-width:none; }
  .credit-estimate { padding:19px 22px;gap:17px; }
  .pricing-cards { gap:16px; }
  .plan { padding:24px; }
  .plan .price { font-size:37px; }
  .plan .price small { font-size:10px; }
  .plan ul { font-size:12px; }
  .download-section { gap:30px;padding:32px; }
  .download-copy h2 { font-size:36px; }
  .faq-section { gap:35px; }
  .faq-section h2 { font-size:37px; }
  .faq-list summary { font-size:14px; }
  .landing-section { padding-block:65px; }
}
@media(max-width:600px) {
  .landing-main { padding-inline:20px; }
  [data-page=landing] .bar { min-height:72px;padding:14px 20px; }
  [data-page=landing] .bar .brand-logo { width:134px; }
  [data-page=landing] .bar .public-nav { background:var(--raise); }
  .landing-hero { padding-top:42px;gap:39px; }
  .hero-kicker { font-size:11px;margin-bottom:25px; }
  .landing-hero h1 { font-size:clamp(51px,13.8vw,80px);margin-bottom:23px; }
  .hero-description { font-size:16px;line-height:1.8;margin-bottom:26px; }
  .hero-copy .button-row { gap:10px 17px; }
  .hero-copy .btn.big { padding:14px 21px;font-size:14px; }
  .hero-secondary { font-size:12px; }
  .hero-notes { font-size:11px;align-items:flex-start; }
  .hero-notes .icon { margin-top:2px; }
  .hero-signature { font-size:10px;gap:10px; }
  .visual-heading { font-size:8px;letter-spacing:.08em;margin-bottom:13px; }
  .product-preview { transform:none;border-radius:18px; }
  .preview-chrome { padding:17px 16px; }
  .preview-brand { font-size:15px; }
  .preview-brand img { width:27px;height:27px; }
  .preview-session { font-size:9px; }
  .preview-tabs { padding:16px 14px 0;gap:2px; }
  .preview-tabs button { font-size:11px;padding:8px 11px; }
  .preview-conversation { padding:21px 14px 0; }
  .preview-question>p:last-of-type { font-size:16px; }
  .preview-answer { padding:15px; }
  .preview-answer-heading .preview-eyebrow { font-size:9px;gap:5px; }
  .preview-answer>p { font-size:23px;min-height:140px; }
  .preview-bottom { font-size:10px;padding:17px 15px 23px; }
  .confidence-note { padding:12px 16px;right:6px;bottom:0; }
  .confidence-note b { font-size:12px; }
  .confidence-note div>span { font-size:10px; }
  .section-title { display:block;margin-bottom:28px; }
  .landing-main h2 { font-size:36px; }
  .section-title>p { font-size:14px;margin-top:23px;max-width:none; }
  .section-title>p br { display:none; }
  .session-option { display:flex;padding:25px; }
  .session-option>p:not(.option-tagline) { margin-bottom:22px; }
  .session-option ul { margin:22px 0 24px; }
  .option-footer { flex-direction:column;align-items:stretch;margin-top:auto;gap:13px; }
  .option-footer a { font-size:13px; }
  .sessions-note { align-items:flex-start;font-size:11px;text-align:left; }
  .sessions-note .icon { margin-top:2px; }
  .marker-section { padding:29px 19px;gap:28px;border-radius:21px; }
  .marker-copy>p:not(.eyebrow) { font-size:14px; }
  .marker-steps { display:block; }
  .marker-steps li { display:flex; }
  .marker-steps li>span { margin:0; }
  .marker-demo-top { padding:18px 17px;font-size:10px; }
  .demo-badge { font-size:9px; }
  .demo-sentence { font-size:27px;min-height:260px;padding:25px 20px 22px; }
  .marker-key { gap:9px 12px;font-size:9px;padding:0 20px 24px; }
  .pace-control { padding-inline:20px; }
  .marker-demo-bottom { padding:19px;flex-direction:column;align-items:flex-start; }
  .marker-demo-bottom .btn { width:100%; }
  .begin-section { padding:62px 0; }
  .begin-section h2 br { display:block; }
  .begin-section ol { grid-template-columns:1fr;gap:23px; }
  .begin-section li { display:flex;gap:21px; }
  .begin-section li>span { margin:0; }
  .begin-section li p { max-width:none; }
  .time-calculator { padding:25px 19px;gap:25px;border-radius:19px; }
  .calculator-controls h3 { font-size:25px; }
  .credit-estimate { padding:17px 12px;gap:10px; }
  .credit-estimate .icon-box { width:31px;height:34px; }
  .credit-estimate .icon-box .icon { width:17px;height:17px; }
  .credit-estimate b { font-size:13px; }
  .credit-estimate>div span { font-size:10px; }
  .credit-estimate strong { font-size:25px; }
  .pricing-cards { grid-template-columns:1fr;gap:16px; }
  .plan { padding:25px; }
  .plan .price { font-size:42px; }
  .plan ul { font-size:13px; }
  .pricing-assurance { font-size:10px;align-items:flex-start; }
  .billing-note { font-size:10px; }
  .download-section { grid-template-columns:1fr;padding:32px 25px;gap:37px; }
  .download-art { max-width:260px;width:100%;margin:auto; }
  .desktop-frame img { width:55px;height:55px;border-radius:13px; }
  .desktop-frame>span { font-size:18px; }
  .faq-section { grid-template-columns:1fr;gap:4px; }
  .faq-list summary { font-size:14px;padding-block:22px; }
  .faq-list details>p { font-size:13px; }
  .closing-cta { padding:46px 23px 53px;border-radius:22px;margin-bottom:28px; }
  .closing-cta>.eyebrow { font-size:9px; }
  .closing-cta h2 { font-size:49px; }
  .closing-cta>p:not(.eyebrow) { font-size:13px; }
  [data-page=landing] footer { padding:20px 24px 30px;gap:26px; }
  [data-page=landing] .footer-brand { flex-direction:column;align-items:flex-start;gap:13px; }
  [data-page=landing] footer nav { gap:22px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-page=landing] *,[data-page=landing] *::before,[data-page=landing] *::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; }
  .product-preview { transform:none; }
}

/* Scroll reveal (JS adds .reveal only to content below the fold, then .in as it enters). An animation rather than
   a transition, so elements keep their own hover transitions. */
@keyframes landing-reveal { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
.landing-main .reveal:not(.in) { opacity:0; }
.landing-main .reveal.in { animation:landing-reveal .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0s) backwards; }

/* ---- How it works variants (data-style on #how) ---- */
.ses-tabs { display:none; }
/* A · Compare: three open columns on shared rows (subgrid), the combined plan tinted. */
.sessions-section[data-style=compare] .session-options { gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); }
.sessions-section[data-style=compare] .session-option { display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;padding:36px 32px 32px;border:0;border-radius:0;background:none;transform:none; }
.sessions-section[data-style=compare] .session-option > * { grid-column:auto;grid-row:auto; }
.sessions-section[data-style=compare] .session-option + .session-option { border-left:1px solid var(--rule); }
.sessions-section[data-style=compare] .combined-option { --ink:inherit;--quiet:inherit;--rule:inherit;--rule2:inherit;--raise:inherit;--mark:inherit;background:var(--mark-wash); }
.sessions-section[data-style=compare] .option-top { margin-bottom:28px; }
.sessions-section[data-style=compare] .option-label { color:var(--mark); font-size:11px; }
.sessions-section[data-style=compare] .session-option>p:not(.option-tagline) { min-height:0;margin-bottom:24px; }
.sessions-section[data-style=compare] .session-option ul { margin:22px 0 28px;font-size:13px; }
.sessions-section[data-style=compare] .option-footer a { padding:11px 17px;border:1px solid var(--rule2); }
.sessions-section[data-style=compare] .combined-option .option-footer a { background:var(--mark);border-color:var(--mark);color:var(--mark-in); }
/* B · Tabs: a segmented switcher above one large panel; features sit in a panel on the right. */
.sessions-section[data-style=tabs] .ses-tabs { display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 26px;padding:5px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);overflow-x:auto; }
.sessions-section[data-style=tabs] .ses-tabs button { flex:none;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:none;color:var(--quiet);font:500 14px/1 var(--ui);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s; }
.sessions-section[data-style=tabs] .ses-tabs button:hover { color:var(--ink); }
.sessions-section[data-style=tabs] .ses-tabs button[aria-selected=true] { background:var(--raise);color:var(--ink);box-shadow:0 1px 2px #0000000f,0 0 0 1px var(--rule); }
.sessions-section[data-style=tabs] .session-options { grid-template-columns:minmax(0,1fr);gap:0; }
.sessions-section[data-style=tabs] .session-option { grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:56px;padding:44px;border-radius:28px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s linear .35s; }
.sessions-section[data-style=tabs] .session-option.is-active { opacity:1;visibility:visible;transform:none;transition-delay:0s; }
.sessions-section[data-style=tabs] .session-option:hover { transform:none; }
.sessions-section[data-style=tabs] .session-option > * { grid-column:1;grid-row:auto; }
.sessions-section[data-style=tabs] .session-mini { display:none; }
.sessions-section[data-style=tabs] .session-option h3 { font-size:34px; }
.sessions-section[data-style=tabs] .session-option .option-tagline { font-size:26px; }
.sessions-section[data-style=tabs] .session-option>p:not(.option-tagline) { min-height:0;margin-bottom:28px;font-size:15px; }
.sessions-section[data-style=tabs] .session-option ul { grid-column:2;grid-row:1 / -1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:16px;margin:0;padding:36px;border:1px solid var(--rule);border-radius:20px;background:var(--raise);font-size:16px;line-height:1.5;color:var(--ink); }
.sessions-section[data-style=tabs] .option-footer { flex-direction:row;align-items:center;justify-content:space-between;margin-top:0; }
.sessions-section[data-style=tabs] .option-footer a { padding:11px 18px;border:1px solid var(--rule2); }
.sessions-section[data-style=tabs] .combined-option .option-footer a { border-color:var(--peach); }
/* C · Rows: one full-width row per option, read left to right; the combined option is the dark row. */
.sessions-section[data-style=rows] .session-options { grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--rule); }
.sessions-section[data-style=rows] .session-option { display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(210px,3fr);grid-template-rows:auto auto 1fr;column-gap:48px;padding:36px 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;transform:none; }
.sessions-section[data-style=rows] .session-option > * { grid-column:1;grid-row:auto; }
.sessions-section[data-style=rows] .combined-option { margin-top:16px;padding:36px 32px;border:0;border-radius:24px;background:radial-gradient(ellipse at 100% 0,#ffab7f12,transparent 60%),#101720; }
.sessions-section[data-style=rows] .option-top { margin-bottom:18px; }
.sessions-section[data-style=rows] .session-option .option-tagline { margin:0; }
.sessions-section[data-style=rows] .session-option>p:not(.option-tagline) { grid-column:2;grid-row:1 / 3;align-self:end;min-height:0;margin:0; }
.sessions-section[data-style=rows] .session-option ul { grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;gap:4px 20px;margin:14px 0 0;line-height:1.7; }
.sessions-section[data-style=rows] .session-mini { display:none; }
.sessions-section[data-style=rows] .option-footer { grid-column:3;grid-row:1 / -1;align-self:center;margin:0;padding:0;border:0; }
.sessions-section[data-style=rows] .option-footer a { padding:11px 18px;border:1px solid var(--rule2); }
@media (max-width:900px) {
  .sessions-section[data-style=compare] .session-options { grid-template-columns:minmax(0,1fr); }
  .sessions-section[data-style=compare] .session-option { display:flex;flex-direction:column;grid-row:auto; }
  .sessions-section[data-style=compare] .session-option + .session-option { border-left:0;border-top:1px solid var(--rule); }
  .sessions-section[data-style=tabs] .session-option { grid-template-columns:minmax(0,1fr);padding:28px; }
  .sessions-section[data-style=tabs] .session-option ul { grid-column:1;grid-row:auto;margin:0 0 24px;padding:24px;font-size:15px; }
  .sessions-section[data-style=tabs] .option-footer { flex-direction:column;align-items:stretch; }
  .sessions-section[data-style=rows] .session-option { grid-template-columns:minmax(0,1fr); }
  .sessions-section[data-style=rows] .session-option > *,.sessions-section[data-style=rows] .session-option>p:not(.option-tagline),.sessions-section[data-style=rows] .session-option ul,.sessions-section[data-style=rows] .option-footer { grid-column:1;grid-row:auto; }
  .sessions-section[data-style=rows] .session-option>p:not(.option-tagline) { margin-top:14px; }
  .sessions-section[data-style=rows] .option-footer { margin-top:22px;align-items:stretch; }
  .sessions-section[data-style=rows] .combined-option { padding:28px 24px; }
}
@media (max-width:600px) {
  .sessions-section[data-style=tabs] .ses-tabs { width:100%;scrollbar-width:none; }
  .sessions-section[data-style=tabs] .ses-tabs::-webkit-scrollbar { display:none; }
  .sessions-section[data-style=tabs] .ses-tabs button { flex:1 1 0;min-width:0;padding:0 8px;font-size:13px;white-space:nowrap; }
}
/* How it works opens on a centred serif quote. */
.landing-main h2.sessions-quote { max-width:820px;margin:0 auto 40px;text-align:center;font:400 clamp(28px,3.2vw,44px)/1.25 var(--read);letter-spacing:-.02em;color:var(--ink);text-wrap:balance; }
.landing-main h2.sessions-quote em { font-style:italic;color:var(--mark); }
@media (max-width:600px) { .landing-main h2.sessions-quote { margin-bottom:28px;font-size:26px; } }
/* Fit How it works to one screen: quote, switcher and panel together. */
.sessions-section[data-style=tabs] { padding:56px 0 48px; }
.landing-main .sessions-section h2.sessions-quote { margin-bottom:24px;font-size:clamp(30px,3vw,42px); }
.sessions-section[data-style=tabs] .ses-tabs { margin-bottom:20px; }
.sessions-section[data-style=tabs] .session-option { padding:32px 36px;column-gap:44px; }
.sessions-section[data-style=tabs] .option-top { margin-bottom:18px; }
.sessions-section[data-style=tabs] .session-option h3 { font-size:30px; }
.sessions-section[data-style=tabs] .session-option .option-tagline { font-size:22px;margin-bottom:14px; }
.sessions-section[data-style=tabs] .session-option>p:not(.option-tagline) { margin-bottom:20px;font-size:14px;line-height:1.7; }
.sessions-section[data-style=tabs] .option-footer { padding-top:16px; }
.sessions-section[data-style=tabs] .session-option ul { padding:28px 32px;gap:12px;font-size:15px; }
.sessions-section[data-style=tabs] .sessions-note { margin-top:16px; }
/* ---- Getting started (#begin): centred quote + three step layouts ---- */
.landing-main .begin-section h2.sessions-quote { margin-bottom:48px; }
/* A · Path: numbered stops joined by a line, the last one filled. */
.begin-section[data-style=path] ol { position:relative;gap:32px; }
.begin-section[data-style=path] ol::before { content:"";position:absolute;top:28px;left:16.67%;right:16.67%;height:1px;background:var(--rule2); }
.begin-section[data-style=path] li { position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding:0;border:0;text-align:center; }
.begin-section[data-style=path] li>span { display:grid;place-items:center;flex:none;width:56px;height:56px;margin:0 0 22px;border:1px solid var(--rule2);border-radius:50%;background:var(--raise);font:italic 22px/1 var(--read);color:var(--mark); }
.begin-section[data-style=path] li:last-child>span { background:var(--mark);border-color:var(--mark);color:var(--mark-in); }
.begin-section[data-style=path] li p { max-width:280px;margin:0 auto; }
/* B · Stairs: three tiles rising left to right, the last one tinted. */
.begin-section[data-style=stairs] ol { align-items:end;gap:16px; }
.begin-section[data-style=stairs] li { display:flex;flex-direction:column;justify-content:flex-end;gap:0;padding:28px;border:1px solid var(--rule);border-radius:22px;background:var(--paper); }
.begin-section[data-style=stairs] li:nth-child(1) { min-height:220px; } .begin-section[data-style=stairs] li:nth-child(2) { min-height:280px; }
.begin-section[data-style=stairs] li:nth-child(3) { min-height:340px;background:var(--mark-wash);border-color:color-mix(in srgb,var(--mark) 25%,transparent); }
.begin-section[data-style=stairs] li>span { display:block;margin:0 0 auto;padding-bottom:24px;font:italic 56px/1 var(--read);color:var(--mark); }
/* C · Numerals: one centred column, large serif numbers beside each step. */
.begin-section[data-style=numerals] ol { grid-template-columns:minmax(0,1fr);gap:0;max-width:760px;margin:0 auto; }
.begin-section[data-style=numerals] li { display:grid;grid-template-columns:120px minmax(0,1fr);align-items:baseline;gap:24px;padding:28px 0;border-top:1px solid var(--rule); }
.begin-section[data-style=numerals] li:last-child { border-bottom:1px solid var(--rule); }
.begin-section[data-style=numerals] li>span { display:block;margin:0;font:italic 72px/1 var(--read);color:var(--mark); }
.begin-section[data-style=numerals] h3 { font:400 28px/1.2 var(--read); }
.begin-section[data-style=numerals] li p { max-width:none;font-size:15px; }
@media (max-width:600px) {
  .landing-main .begin-section h2.sessions-quote { margin-bottom:32px; }
  .begin-section[data-style=path] ol { grid-template-columns:minmax(0,1fr);gap:28px; }
  .begin-section[data-style=path] ol::before { top:28px;bottom:28px;left:28px;right:auto;width:1px;height:auto; }
  .begin-section[data-style=path] li { flex-direction:row;align-items:flex-start;gap:20px;text-align:left; }
  .begin-section[data-style=path] li>span { margin:0; }
  .begin-section[data-style=path] li p { margin:0; }
  .begin-section[data-style=stairs] ol { grid-template-columns:minmax(0,1fr); }
  .begin-section[data-style=stairs] li:nth-child(n) { min-height:0; }
  .begin-section[data-style=stairs] li>span { font-size:40px;padding-bottom:18px; }
  .begin-section[data-style=numerals] li { grid-template-columns:64px minmax(0,1fr);gap:16px;padding:22px 0; }
  .begin-section[data-style=numerals] li>span { font-size:44px; }
  .begin-section[data-style=numerals] h3 { font-size:22px; }
}
/* D · Arrows: three cards joined by arrows. */
.begin-section[data-style=arrows] ol { gap:48px; }
.begin-section[data-style=arrows] li { position:relative;display:flex;flex-direction:column;gap:0;padding:28px;border:1px solid var(--rule);border-radius:22px;background:var(--paper); }
.begin-section[data-style=arrows] li:not(:last-child)::after { content:"→";position:absolute;top:50%;right:-36px;transform:translateY(-50%);font:400 24px/1 var(--ui);color:var(--mark); }
.begin-section[data-style=arrows] li>span { display:inline-grid;place-items:center;width:40px;height:40px;margin:0 0 22px;border-radius:12px;background:var(--mark-wash);font:italic 18px/1 var(--read);color:var(--mark); }
/* E · Checklist: one centred panel that reads like a setup checklist. */
.begin-section[data-style=checklist] ol { grid-template-columns:minmax(0,1fr);gap:0;max-width:640px;margin:0 auto;padding:8px 28px;border:1px solid var(--rule);border-radius:24px;background:var(--raise);box-shadow:var(--shadow-lg); }
.begin-section[data-style=checklist] li { display:flex;align-items:flex-start;gap:18px;padding:22px 0;border-top:1px solid var(--rule); }
.begin-section[data-style=checklist] li:first-child { border-top:0; }
.begin-section[data-style=checklist] li>span { display:grid;place-items:center;flex:none;width:30px;height:30px;margin:0;border-radius:50%;background:var(--mark);font-size:0;color:var(--mark-in); }
.begin-section[data-style=checklist] li>span::before { content:"✓";font:600 14px/1 var(--ui); }
.begin-section[data-style=checklist] li:last-child>span { background:none;border:1.5px solid var(--mark); }
.begin-section[data-style=checklist] li:last-child>span::before { content:""; }
.begin-section[data-style=checklist] h3 { margin-bottom:4px;font-size:17px; }
.begin-section[data-style=checklist] li p { max-width:none; }
/* F · Flow: the three step names read as one line of serif, arrows between. */
.begin-section[data-style=flow] ol { gap:40px; }
.begin-section[data-style=flow] li { display:block;padding:0;border:0; }
.begin-section[data-style=flow] li>span { display:none; }
.begin-section[data-style=flow] h3 { display:flex;align-items:baseline;gap:20px;margin:0 0 14px;font:400 clamp(28px,2.8vw,38px)/1.15 var(--read);letter-spacing:-.02em; }
.begin-section[data-style=flow] li:not(:last-child) h3::after { content:"→";margin-left:auto;font:400 26px/1 var(--ui);color:var(--mark); }
.begin-section[data-style=flow] li:last-child h3 { color:var(--mark);font-style:italic; }
.begin-section[data-style=flow] li p { max-width:300px; }
@media (max-width:900px) {
  .begin-section[data-style=arrows] ol { grid-template-columns:minmax(0,1fr);gap:40px; }
  .begin-section[data-style=arrows] li:not(:last-child)::after { content:"↓";top:auto;bottom:-32px;right:50%;transform:translateX(50%); }
  .begin-section[data-style=flow] ol { grid-template-columns:minmax(0,1fr);gap:26px; }
  .begin-section[data-style=flow] li:not(:last-child) h3::after { content:"↓";margin-left:0; }
}
@media (max-width:600px) {
  .begin-section[data-style=checklist] ol { padding:4px 20px; }
  .begin-section[data-style=flow] h3 { font-size:28px; }
}
/* ---- Steps grounded in the app's own setup UI ---- */
.begin-section .step-ui { display:none; }
.step-ui i { display:inline-grid;flex:none;width:16px;height:16px;color:var(--mark); }
.step-ui i svg { display:block;width:100%;height:100%; }
.begin-section[data-style=screens] .step-ui,.begin-section[data-style=window] .step-ui { display:flex;flex-direction:column;justify-content:center;gap:10px; }
.ui-pick span { display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--raise);font:500 13px/1.2 var(--ui);color:var(--ink); }
.ui-pick span.is-on,.ui-tiles span.is-on { border-color:var(--mark);background:var(--mark-wash);color:var(--mark); }
.ui-tiles { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.ui-tiles span { display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--rule);border-radius:10px;background:var(--raise);font:500 11.5px/1.2 var(--ui);color:var(--quiet); }
.ui-mic { display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:var(--good-wash);color:var(--good);font:500 12px/1 var(--ui); }
.ui-mic i { color:var(--good); }
.ui-mic b { width:40px;height:6px;margin-left:auto;border-radius:3px;background:linear-gradient(90deg,var(--good) 62%,var(--rule) 62%); }
.ui-read small { font:500 9.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--faint); }
.ui-read p { margin:0;font:400 15px/1.65 var(--read);color:var(--ink); }
.ui-read .r { color:var(--read-done); }
.ui-read .t { border-bottom:2px solid var(--trail); }
.ui-read .n { background:var(--mark-wash);border-bottom:2px solid var(--mark); }
/* G · Stepper: the same numbered step bar the app uses during setup; the highlight moves across. */
.begin-section[data-style=stepper] ol { gap:12px; }
.begin-section[data-style=stepper] li { display:flex;align-items:flex-start;gap:14px;padding:20px;border:1px solid var(--rule);border-radius:16px;background:var(--raise);cursor:pointer;transition:background .3s,border-color .3s; }
.begin-section[data-style=stepper] li>span { display:grid;place-items:center;flex:none;width:34px;height:34px;margin:0;border:1px solid var(--rule2);border-radius:50%;font:500 13px/1 var(--ui);color:var(--quiet);transition:background .3s,color .3s,border-color .3s; }
.begin-section[data-style=stepper] li.is-active { background:var(--mark-wash);border-color:var(--mark); }
.begin-section[data-style=stepper] li.is-active>span { background:var(--mark);border-color:var(--mark);color:var(--mark-in); }
.begin-section[data-style=stepper] li.is-active h3 { color:var(--mark); }
.begin-section[data-style=stepper] h3 { margin:6px 0 6px;font-size:16px; }
.begin-section[data-style=stepper] li p { font-size:13px;line-height:1.65; }
/* H · Screens: each step shows a small piece of the real screen it happens on. */
.begin-section[data-style=screens] ol { gap:20px; }
.begin-section[data-style=screens] li { display:flex;flex-direction:column;gap:0;padding:0;border:0; }
.begin-section[data-style=screens] .step-ui { order:-1;height:210px;margin-bottom:22px;padding:22px;border:1px solid var(--rule);border-radius:20px;background:var(--paper); }
.begin-section[data-style=screens] li>span { display:block;margin:0 0 8px;font:500 12px/1 var(--ui);letter-spacing:.08em;color:var(--mark); }
.begin-section[data-style=screens] h3 { margin-bottom:8px; }
/* I · Window: one app window; the step list on the left drives the screen on the right. */
.begin-section[data-style=window] ol { position:relative;grid-template-columns:minmax(0,1fr);gap:8px;min-height:360px;padding:28px 58% 28px 28px;border:1px solid var(--rule);border-radius:28px;background:var(--paper); }
.begin-section[data-style=window] li { display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid transparent;border-radius:16px;cursor:pointer;transition:background .3s,border-color .3s; }
.begin-section[data-style=window] li>span { display:grid;place-items:center;flex:none;width:32px;height:32px;margin:0;border:1px solid var(--rule2);border-radius:50%;font:500 12px/1 var(--ui);color:var(--quiet);transition:background .3s,color .3s,border-color .3s; }
.begin-section[data-style=window] li.is-active { background:var(--raise);border-color:var(--rule); }
.begin-section[data-style=window] li.is-active>span { background:var(--mark);border-color:var(--mark);color:var(--mark-in); }
.begin-section[data-style=window] h3 { margin:5px 0 4px;font-size:16px; }
.begin-section[data-style=window] li p { font-size:13px;line-height:1.6; }
.begin-section[data-style=window] .step-ui { position:absolute;top:28px;right:28px;bottom:28px;width:calc(58% - 28px);padding:36px;border:1px solid var(--rule);border-radius:20px;background:var(--raise);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1); }
.begin-section[data-style=window] li.is-active .step-ui { opacity:1;transform:none; }
.begin-section[data-style=window] .ui-pick span { padding:14px 18px;font-size:15px; }
.begin-section[data-style=window] .ui-tiles span { padding:14px 8px;font-size:13px; }
.begin-section[data-style=window] .ui-read p { font-size:21px; }
@media (max-width:900px) {
  .begin-section[data-style=stepper] ol,.begin-section[data-style=screens] ol { grid-template-columns:minmax(0,1fr); }
  .begin-section[data-style=window] ol { padding:20px 20px 300px; }
  .begin-section[data-style=window] .step-ui { top:auto;left:20px;right:20px;bottom:20px;width:auto;height:260px;padding:24px; }
}
/* ---- Pricing (#pricing): centred quote + three layouts ---- */
/* A · Split: both plans in one joined panel, the time estimate as a compact strip under it. */
.pricing-section[data-style=split] { display:flex;flex-direction:column; }
.pricing-section[data-style=split] #plans { order:1;gap:0;border:1px solid var(--rule);border-radius:28px;overflow:hidden;background:var(--raise); }
.pricing-section[data-style=split] .plan { padding:40px 44px;border:0;border-radius:0;background:none; }
.pricing-section[data-style=split] .plan.best { border-left:1px solid var(--rule);background:var(--paper); }
.pricing-section[data-style=split] .time-calculator { order:2;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px;margin:16px 0 0;padding:26px 32px;border-radius:22px; }
.pricing-section[data-style=split] .calculator-controls>.eyebrow,.pricing-section[data-style=split] .calculator-controls h3,.pricing-section[data-style=split] .calculator-controls>p:not(.calculator-note) { display:none; }
.pricing-section[data-style=split] .calculator-controls .range-label { margin-top:0; }
.pricing-section[data-style=split] .calculator-results { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.pricing-section[data-style=split] .credit-estimate { flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px; }
.pricing-section[data-style=split] .credit-estimate .icon-box { display:none; }
.pricing-section[data-style=split] .credit-estimate p { display:flex;align-items:baseline;gap:6px;margin:4px 0 0;text-align:left; }
.pricing-section[data-style=split] .billing-note,.pricing-section[data-style=split] .pricing-assurance { order:3; }
/* B · Rates: the app's "hourly rates" card leads, with the slider; plans follow as two slim rows. */
.pricing-section[data-style=rates] .time-calculator { grid-template-columns:minmax(0,1fr);gap:28px;padding:36px 40px; }
.pricing-section[data-style=rates] .calculator-controls { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;column-gap:56px;align-items:end; }
.pricing-section[data-style=rates] .calculator-controls>* { grid-column:1; }
.pricing-section[data-style=rates] .calculator-controls>.range-label,.pricing-section[data-style=rates] .calculator-controls>input,.pricing-section[data-style=rates] .calculator-controls>.range-ends,.pricing-section[data-style=rates] .calculator-controls>.calculator-note { grid-column:2; }
.pricing-section[data-style=rates] .calculator-controls>p:not(.calculator-note) { margin-bottom:0; }
.pricing-section[data-style=rates] .calculator-results { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-top:26px;border-top:1px solid var(--rule); }
.pricing-section[data-style=rates] .credit-estimate,.pricing-section[data-style=rates] .featured-estimate { --ink:inherit;--quiet:inherit;--rule:inherit;--rule2:inherit;--raise:inherit;--paper:inherit;--mark:inherit;flex-direction:column;align-items:flex-start;gap:10px;padding:0 28px;border:0;border-radius:0;background:none;color:inherit; }
.pricing-section[data-style=rates] .credit-estimate:first-child { padding-left:0; }
.pricing-section[data-style=rates] .credit-estimate + .credit-estimate { border-left:1px solid var(--rule); }
.pricing-section[data-style=rates] .credit-estimate .icon-box { background:var(--mark-wash);border-color:transparent;color:var(--mark); }
.pricing-section[data-style=rates] .credit-estimate p { display:flex;align-items:baseline;gap:6px;margin:0;text-align:left; }
.pricing-section[data-style=rates] .credit-estimate strong,.pricing-section[data-style=rates] .featured-estimate strong { font-size:36px;color:var(--ink); }
.pricing-section[data-style=rates] #plans { grid-template-columns:minmax(0,1fr);gap:12px; }
.pricing-section[data-style=rates] .plan { display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) auto;column-gap:40px;align-items:center;padding:28px 32px; }
.pricing-section[data-style=rates] .plan>* { grid-column:1; }
.pricing-section[data-style=rates] .plan ul { grid-column:2;grid-row:1 / 4;margin:0;line-height:1.9; }
.pricing-section[data-style=rates] .plan>.btn { grid-column:3;grid-row:1 / 4;min-width:220px;margin:0; }
/* C · Columns: free plan, time estimate and credits plan side by side; the estimate sits in the middle. */
.pricing-section[data-style=columns] { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:stretch; }
.pricing-section[data-style=columns] > h2,.pricing-section[data-style=columns] .billing-note,.pricing-section[data-style=columns] .pricing-assurance { grid-column:1 / -1; }
.pricing-section[data-style=columns] #plans { display:contents; }
.pricing-section[data-style=columns] #plans > * { grid-column:1;grid-row:2; }
.pricing-section[data-style=columns] #plans > .plan.best { grid-column:3; }
.pricing-section[data-style=columns] .time-calculator { grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr);gap:22px;margin:0;padding:28px;background:var(--mark-wash);border-color:color-mix(in srgb,var(--mark) 25%,transparent); }
.pricing-section[data-style=columns] .calculator-controls>.eyebrow,.pricing-section[data-style=columns] .calculator-controls h3,.pricing-section[data-style=columns] .calculator-controls>p:not(.calculator-note) { display:none; }
.pricing-section[data-style=columns] .calculator-controls .range-label { margin-top:0; }
.pricing-section[data-style=columns] .credit-estimate { padding:12px 14px;gap:12px; }
.pricing-section[data-style=columns] .credit-estimate .icon-box { width:32px;height:32px; }
.pricing-section[data-style=columns] .credit-estimate strong { font-size:24px; }
.pricing-section[data-style=columns] .plan .price { font-family:var(--read);font-weight:400;font-size:52px;letter-spacing:-.02em; }
@media (max-width:1000px) {
  .pricing-section[data-style=columns] { grid-template-columns:minmax(0,1fr); }
  .pricing-section[data-style=columns] #plans > *,.pricing-section[data-style=columns] #plans > .plan.best,.pricing-section[data-style=columns] .time-calculator { grid-column:1;grid-row:auto; }
}
@media (max-width:900px) {
  .pricing-section[data-style=split] #plans { grid-template-columns:minmax(0,1fr); }
  .pricing-section[data-style=split] .plan.best { border-left:0;border-top:1px solid var(--rule); }
  .pricing-section[data-style=split] .plan { padding:28px; }
  .pricing-section[data-style=split] .time-calculator { grid-template-columns:minmax(0,1fr);gap:22px; }
  .pricing-section[data-style=rates] .calculator-controls { grid-template-columns:minmax(0,1fr); }
  .pricing-section[data-style=rates] .calculator-controls>* { grid-column:1 !important; }
  .pricing-section[data-style=rates] .calculator-results { grid-template-columns:minmax(0,1fr);gap:18px; }
  .pricing-section[data-style=rates] .credit-estimate,.pricing-section[data-style=rates] .credit-estimate:first-child { flex-direction:row;align-items:center;padding:0; }
  .pricing-section[data-style=rates] .credit-estimate + .credit-estimate { border-left:0;border-top:1px solid var(--rule);padding-top:18px; }
  .pricing-section[data-style=rates] .credit-estimate p { margin-left:auto; }
  .pricing-section[data-style=rates] .plan { grid-template-columns:minmax(0,1fr); }
  .pricing-section[data-style=rates] .plan>*,.pricing-section[data-style=rates] .plan ul,.pricing-section[data-style=rates] .plan>.btn { grid-column:1;grid-row:auto; }
  .pricing-section[data-style=rates] .plan ul { margin:18px 0; }
}
@media (max-width:600px) {
  .pricing-section[data-style=split] .calculator-results { grid-template-columns:minmax(0,1fr); }
  .pricing-section[data-style=split] .credit-estimate { flex-direction:row;align-items:center; }
  .pricing-section[data-style=split] .credit-estimate p { margin:0 0 0 auto; }
  .pricing-section[data-style=rates] .time-calculator { padding:24px 20px; }
}
@media (max-width:1000px) {
  .pricing-section[data-style=columns] #plans > * { grid-row:2; }
  .pricing-section[data-style=columns] .time-calculator { grid-row:3; }
  .pricing-section[data-style=columns] #plans > .plan.best { grid-row:4; }
  .pricing-section[data-style=columns] .billing-note { grid-row:5; }
  .pricing-section[data-style=columns] .pricing-assurance { grid-row:6; }
}
/* Fit pricing (columns) to one screen. */
.pricing-section[data-style=columns] { padding:48px 0 40px;row-gap:14px; }
.landing-main .pricing-section[data-style=columns] h2.sessions-quote { margin-bottom:14px;font-size:clamp(28px,2.8vw,40px); }
.pricing-section[data-style=columns] .plan { padding:26px 28px; }
.pricing-section[data-style=columns] .plan-heading { margin-bottom:10px; }
.pricing-section[data-style=columns] .plan .price { font-size:44px;line-height:1.15;margin-bottom:4px; }
.pricing-section[data-style=columns] .plan ul { margin:14px 0 18px;line-height:1.9; }
.pricing-section[data-style=columns] .plan>.btn { min-height:46px; }
.pricing-section[data-style=columns] .time-calculator { gap:16px;padding:22px 24px; }
.pricing-section[data-style=columns] .calculator-controls p.calculator-note { margin-top:12px; }
.pricing-section[data-style=columns] .calculator-results { gap:8px; }
.pricing-section[data-style=columns] .credit-estimate { padding:10px 14px; }
.pricing-section[data-style=columns] .credit-estimate strong { font-size:22px; }
.pricing-section[data-style=columns] .billing-note { margin-top:4px; }
.pricing-section[data-style=columns] .pricing-assurance { margin-top:0; }
/* Download: tracks may shrink (no sideways overflow) and the panel is a little more compact. */
.download-section { grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);max-width:100%;padding:44px clamp(24px,4vw,56px); }
.download-copy { min-width:0; }
.download-copy>p:not(.eyebrow) { margin:16px 0; }
@media (max-width:600px) { .download-section { grid-template-columns:minmax(0,1fr);padding:28px 22px; } }
/* Download, compact: lower panel so it sits comfortably in one screen with its neighbours. */
.download-section { padding:32px clamp(24px,4vw,56px);margin-block:0; }
.desktop-frame { max-width:280px; }
.desktop-frame img { width:64px;height:64px; }
.desktop-frame>span { font-size:18px; }
.download-copy h2 { font-size:clamp(32px,3vw,40px); }
.download-copy>p:not(.eyebrow) { margin:12px 0 16px; }
/* ---- One screen per section: each section fills the viewport under the sticky header and centres its content.
   Content taller than the screen (long stacks on phones, an open FAQ) simply grows the section. ---- */
.landing-main :is(#moments,#how,#begin,#pricing,#download,#faq) { box-sizing:border-box;min-height:calc(100svh - var(--landing-header-height,82px));padding-block:clamp(20px,4svh,48px);scroll-margin-top:12px; }
.landing-main :is(#moments,#how,#begin) { display:flex;flex-direction:column;justify-content:center; }
.landing-main :is(#pricing,#download,#faq) { align-content:center; }
.landing-main #download { margin-block:24px; }

@media (max-width:600px) {
  .landing-main #download { margin-block:16px; }
}
/* ---- Fit-to-screen fixes for tablet and phone ---- */
@media (min-width:601px) and (max-width:1000px) {
  .pricing-section[data-style=columns] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pricing-section[data-style=columns] #plans > * { grid-column:1;grid-row:2; }
  .pricing-section[data-style=columns] #plans > .plan.best { grid-column:2;grid-row:2; }
  .pricing-section[data-style=columns] .time-calculator { grid-column:1 / -1;grid-row:3;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center; }
  .pricing-section[data-style=columns] .calculator-results { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pricing-section[data-style=columns] .credit-estimate { flex-direction:column;align-items:flex-start;gap:4px; }
  .pricing-section[data-style=columns] .credit-estimate .icon-box,.pricing-section[data-style=columns] .credit-estimate>div span { display:none; }
  .pricing-section[data-style=columns] .credit-estimate p { display:flex;align-items:baseline;gap:5px;margin:0;text-align:left; }
  .pricing-section[data-style=columns] .billing-note { grid-row:4; } .pricing-section[data-style=columns] .pricing-assurance { grid-row:5; }
}
@media (max-width:600px) {
  .pricing-section[data-style=columns] { row-gap:10px; }
  .pricing-section[data-style=columns] .plan { padding:20px; }
  .pricing-section[data-style=columns] .plan .price { font-size:36px; }
  .pricing-section[data-style=columns] .plan ul { margin:10px 0 14px;font-size:12px;line-height:1.65; }
  .pricing-section[data-style=columns] .plan>.btn { min-height:44px; }
  .pricing-section[data-style=columns] .time-calculator { padding:16px;gap:12px; }
  .pricing-section[data-style=columns] .calculator-controls p.calculator-note { display:none; }
  .pricing-section[data-style=columns] .calculator-results { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; }
  .pricing-section[data-style=columns] .credit-estimate { flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px; }
  .pricing-section[data-style=columns] .credit-estimate .icon-box,.pricing-section[data-style=columns] .credit-estimate>div span { display:none; }
  .pricing-section[data-style=columns] .credit-estimate b { font-size:11px; }
  .pricing-section[data-style=columns] .credit-estimate p { display:flex;align-items:baseline;gap:4px;margin:0;text-align:left; }
  .pricing-section[data-style=columns] .credit-estimate strong { font-size:20px; }
  .sessions-section[data-style=tabs] .ses-tabs { margin-bottom:14px; }
  .sessions-section[data-style=tabs] .session-option { padding:20px; }
  .sessions-section[data-style=tabs] .option-top { margin-bottom:12px; }
  .sessions-section[data-style=tabs] .session-option h3 { font-size:24px; }
  .sessions-section[data-style=tabs] .session-option .option-tagline { font-size:18px;margin-bottom:8px; }
  .sessions-section[data-style=tabs] .session-option>p:not(.option-tagline) { font-size:13px;line-height:1.6;margin-bottom:14px; }
  .sessions-section[data-style=tabs] .session-option ul { gap:8px;margin:0 0 16px;padding:16px;font-size:14px; }
  .sessions-section[data-style=tabs] .option-footer { gap:10px;padding-top:12px; }
  .begin-section[data-style=window] ol { padding:12px 12px 232px;min-height:0;gap:4px; }
  .begin-section[data-style=window] li { padding:10px 12px; }
  .begin-section[data-style=window] li p { font-size:12.5px;line-height:1.5; }
  .begin-section[data-style=window] .step-ui { left:12px;right:12px;bottom:12px;height:208px;padding:18px; }
  .begin-section[data-style=window] .ui-read p { font-size:16px; }
}
/* ---- Fit to one screen: short laptops and phones ---- */
.plan-toggle { display:none; }
@media (width > 1000px) and ((height <= 760px) or (width <= 1100px)) {
  .pricing-section[data-style=columns] .plan { padding:20px 24px; }
  .pricing-section[data-style=columns] .plan .price { font-size:38px; }
  .pricing-section[data-style=columns] .plan ul { margin:8px 0 12px;line-height:1.7; }
  .pricing-section[data-style=columns] .time-calculator { padding:18px 20px;gap:12px; }
  .landing-main .pricing-section[data-style=columns] h2.sessions-quote { margin-bottom:10px; }
  .sessions-section[data-style=tabs] .session-option { padding:26px 32px; }
  .sessions-section[data-style=tabs] .session-option ul { padding:22px 28px;gap:10px; }
}
@media (max-width:600px) {
  /* Pricing: one plan at a time behind a Free / Credits switch; the estimate strip below. */
  .pricing-section[data-style=columns] .plan-toggle { display:flex;gap:4px;grid-row:2;padding:4px;border:1px solid var(--rule);border-radius:999px;background:var(--paper); }
  .pricing-section[data-style=columns] .plan-toggle button { flex:1 1 0;min-height:40px;border:0;border-radius:999px;background:none;color:var(--quiet);font:500 13px/1 var(--ui);cursor:pointer;transition:background .25s,color .25s; }
  .pricing-section[data-style=columns] .plan-toggle button[aria-selected=true] { background:var(--raise);color:var(--ink);box-shadow:0 1px 2px #0000000f,0 0 0 1px var(--rule); }
  .pricing-section[data-style=columns] #plans > *,.pricing-section[data-style=columns] #plans > .plan.best { grid-row:3; }
  .pricing-section[data-style=columns] #plans > .plan:not(.is-active) { display:none; }
  .pricing-section[data-style=columns] .time-calculator { grid-row:3; }
  .pricing-section[data-style=columns] .time-calculator:not(.is-active) { display:none; }
  .pricing-section[data-style=columns] .billing-note { display:none; }
  .pricing-section[data-style=columns] .pricing-assurance { grid-row:4; }
  /* Sessions: the tab panel without its icon row; plain feature list; price and button on one line. */
  .landing-main .sessions-section[data-style=tabs] h2.sessions-quote { margin-bottom:16px;font-size:24px; }
  .sessions-section[data-style=tabs] .option-top { display:none; }
  .sessions-section[data-style=tabs] .session-option { padding:18px; }
  .sessions-section[data-style=tabs] .session-option h3 { font-size:22px; }
  .sessions-section[data-style=tabs] .session-option .option-tagline { font-size:17px;margin-bottom:6px; }
  .sessions-section[data-style=tabs] .session-option>p:not(.option-tagline) { font-size:12.5px;line-height:1.55;margin-bottom:12px; }
  .sessions-section[data-style=tabs] .session-option ul { gap:6px;margin:0 0 12px;padding:0;border:0;background:none;font-size:13px; }
  .sessions-section[data-style=tabs] .option-footer { flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding-top:12px; }
  .sessions-section[data-style=tabs] .option-footer a { min-height:40px; }
  .sessions-section[data-style=tabs] .sessions-note { margin-top:10px;font-size:10.5px; }
  /* How it works: only the active step shows its sentence; shorter app screen. */
  .begin-section[data-style=window] li:not(.is-active) p { display:none; }
  .begin-section[data-style=window] li:not(.is-active) h3 { margin:5px 0; }
  .begin-section[data-style=window] li p { font-size:12px; }
  .begin-section[data-style=window] ol { padding:12px 12px 208px; }
  .begin-section[data-style=window] .step-ui { height:184px; }
  .download-section { padding:24px 20px; }
  .desktop-frame { max-width:240px; }
}
/* Header: seven section links on one line at desktop widths. */
/* Header: the nine links share the space evenly, roomy on wide screens and tighter just above the menu breakpoint. */
@media (width > 1100px) {
  [data-page=landing] .bar nav a { white-space:nowrap; }
  [data-page=landing] .bar nav { gap:16px; }
  [data-page=landing] .bar .nav-secondary { margin-right:0; }
}
@media (width > 1100px) and (width <= 1300px) {
  [data-page=landing] .bar { gap:16px; }
  [data-page=landing] .bar nav { gap:10px; }
  [data-page=landing] .bar nav a { padding:9px 8px; }
  [data-page=landing] .bar nav .nav-cta { padding:11px 14px; }
}
}
/* ---- Every section opens on a centred header ---- */
/* Use cases */
.moments-section[data-style=pills] .moments-heading { text-align:center; }
.moments-section[data-style=pills] { align-items:stretch; } /* the list layout's align-items:start would shrink the heading to its text */
.moments-section[data-style=pills] .moments-heading h2 { margin-inline:auto;max-width:900px; }
/* Download: header on top, the monitor beneath, buttons and note centred under it. */
.download-section { grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:0;padding:36px clamp(24px,4vw,56px) 32px; }
.download-copy { display:contents; }
.download-copy > .eyebrow { order:1; }
.download-copy > h2 { order:2;margin-inline:auto;max-width:720px; }
.download-copy > p:not(.eyebrow):not(.download-note) { order:3;max-width:560px;margin:12px auto 22px; }
.download-art { order:4;width:100%; }
.download-row { order:5;justify-content:center;margin-top:22px; }
.download-copy > .download-note { order:6;margin-top:14px!important; }
.desktop-frame { max-width:260px; }
.download-copy h2 br { display:none; }
/* FAQ: header centred above a single centred list. */
.faq-section { grid-template-columns:minmax(0,1fr);gap:0;justify-items:center; }
.faq-section .section-title { justify-content:center;text-align:center;margin-bottom:28px; }
.faq-section h2 { font-size:clamp(30px,3.2vw,44px); }
.faq-list { width:100%;max-width:760px; }
@media (max-width:600px) {
  .download-section { padding:24px 20px; }
  .desktop-frame { max-width:220px; }
  .download-copy > p:not(.eyebrow):not(.download-note) { margin:10px auto 16px; }
  .download-row { margin-top:16px; }
  .faq-section .section-title { margin-bottom:16px; }
}
/* ---- A light rule between sections: one thin line above each, no box ---- */
.landing-main :is(#moments,#how,#begin,#pricing,#download,#faq) { border-top:1px solid var(--rule); }
.landing-main #download { border-block:0;border-top:1px solid var(--rule);border-radius:0;background:none;margin-block:0;padding-inline:0; }
.landing-main .af { border-top:1px solid var(--rule); }
/* ---- One section per scroll: the page snaps to each section's top (12px under the header). The Features track
   snaps to its own step markers; JS-driven scrolls (feature steps, nav glides) pause snapping while they run. ---- */
html:has(body[data-page=landing]) { scroll-snap-type:y mandatory; }
html:has(body[data-page=landing]).snap-off { scroll-snap-type:none; }
.landing-main :is(#moments,#how,#begin,#pricing,#download,#faq),.landing-main .closing-cta { scroll-snap-align:start;scroll-snap-stop:always; }
.landing-main .af:not(.af-scrolly) { scroll-snap-align:start;scroll-snap-stop:always; }
.landing-hero { scroll-snap-align:start;scroll-margin-top:var(--landing-hero-offset,0px); }
[data-page=landing] footer { scroll-snap-align:end; }
.landing-main :is(#moments,#how,#begin,#pricing,#download,#faq) { min-height:calc(100svh - var(--landing-header-height,82px) - 12px); }
@media (prefers-reduced-motion:reduce) { html:has(body[data-page=landing]) { scroll-snap-type:y proximity; } }
/* Hero: no dead space above it; it fills the first screen under the header and centres its content. */
.landing-main { padding-top:0; }
.landing-hero { box-sizing:border-box;min-height:calc(100svh - var(--landing-header-height,82px));padding-block:clamp(16px,3svh,40px);scroll-margin-top:0; }
@media (max-width:850px) { .landing-hero { padding-block:clamp(16px,3svh,32px); } }
.landing-main .faq-section h2.sessions-quote { margin-bottom:28px; }
@media (max-width:600px) { .landing-main .faq-section h2.sessions-quote { margin-bottom:16px; } }
/* Sessions switcher: the chosen tab fills orange. */
.sessions-section[data-style=tabs] .ses-tabs button[aria-selected=true] { background:var(--mark);color:var(--mark-in);box-shadow:none; }
.sessions-section[data-style=tabs] .ses-tabs button[aria-selected=true]:hover { color:var(--mark-in); }