/* Studionity site v6 (2026-09-10): film-led pages.
   Adds to site.css; tokens, nav, footer and buttons stay as they were.
   The films are the proof, so every section is a beat from a film:
   a caption, a real screen, the moving clip. */

/* ---------- film stage ---------- */
.stage{position:relative;background:#000;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-2)}
.stage video,.stage img{width:100%;height:auto;display:block}
.film{position:relative}
.film-ui{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#0a0b0d;border-top:1px solid var(--line-soft)}
.film-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700;border:1px solid rgba(255,255,255,.18);white-space:nowrap}
.film-btn svg{width:16px;height:16px}
@media (hover:hover){.film-btn:hover{background:rgba(255,255,255,.22)}}
.film-prog{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.film-prog i{display:block;height:100%;width:0;background:var(--accent)}
.film-time{font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:rgba(255,255,255,.8);min-width:36px;text-align:right}
.film-cap{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;margin-right:auto}
.film-btn{background:rgba(255,255,255,.08)}
.stage--v{display:none}
@media (max-width:700px){
  .stage--v{display:block;max-width:360px;margin-inline:auto}
  .stage--h{display:none}
}

/* ---------- hero ---------- */
.hero6{padding-top:calc(68px + var(--snbar-h,0px) + clamp(36px,6vw,80px));padding-bottom:clamp(40px,6vw,72px)}
.hero6 .prod-lockup{margin-bottom:22px}
.hero6 h1{max-width:none;margin-bottom:20px;font-size:clamp(38px,4.6vw,66px)}
.hero6 .lede{max-width:52ch}
.hero6 .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.hero6-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:960px){.hero6-grid{grid-template-columns:1fr}.hero6 h1{max-width:none}}
.hero6-full .stage{margin-top:clamp(28px,4vw,48px)}
.hero6 .fine{font-size:13px;color:var(--text-3);margin-top:14px}

/* ---------- beats ---------- */
.beat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.beat--flip>.beat-copy{order:2}
.beat--even{grid-template-columns:1fr 1fr}
@media (max-width:900px){.beat,.beat--even{grid-template-columns:1fr}.beat--flip>.beat-copy{order:0}}
.beat-copy .eyebrow{display:block;margin-bottom:14px}
.beat-copy h2{margin-bottom:16px}
.beat-copy .lede{font-size:clamp(16px,1.3vw,18px)}
.pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-soft)}
.pts li{position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--line-soft);color:var(--text-2);font-size:15px;line-height:1.5}
.pts li::before{content:'';position:absolute;left:0;top:19px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.pts li b{display:block;color:var(--text);font-weight:600;font-size:15.5px;margin-bottom:2px}
.beat+.beat{margin-top:clamp(64px,9vw,128px)}

/* film captions quoted on the page */
.cap{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.6vw,34px);line-height:1.22;letter-spacing:-.012em;color:var(--text);text-wrap:balance}
.cap em{font-style:normal;color:var(--accent)}
.cap-row{display:grid;gap:10px;margin-top:8px}
.cap-row .cap{font-size:clamp(19px,2vw,26px);color:var(--text-2)}
.cap-row .cap.on{color:var(--text)}

/* ---------- shots ---------- */
.shot{border-radius:var(--r-media);outline:1px solid rgba(255,255,255,.1);outline-offset:-1px;overflow:hidden;background:#0a0b0d;box-shadow:var(--shadow-1)}
.shot img,.shot video{width:100%;height:auto;display:block}
.shot--phone{max-width:300px;margin-inline:auto;border-radius:26px}
.shots-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.shots-3 figcaption{margin-top:12px;font-size:14.5px;color:var(--text-2);text-align:center}
.shots-3 figure{margin:0}
@media (max-width:700px){.shots-3{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.shots-3{grid-template-columns:1fr}}
.stack{position:relative}
.stack .shot+.shot{margin-top:-22%;margin-left:14%;box-shadow:var(--shadow-2)}
.drop{position:relative}
.drop .card-photo{position:absolute;left:3%;top:18%;width:24%;transform:rotate(-7deg);border-radius:10px;outline:1px solid rgba(255,255,255,.2);box-shadow:var(--shadow-2);z-index:2;overflow:hidden;background:#000}
.drop .card-photo img{border-radius:10px;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center top}

/* ---------- pointouts (chip list of film beats) ---------- */
.pointouts{display:flex;flex-wrap:wrap;gap:10px}
.pointouts span{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--text-2);background:rgba(255,255,255,.02)}
.pointouts span.on{color:var(--text);border-color:rgba(255,255,255,.22)}
.pointouts--lg span{font-size:15px;padding:10px 16px}

/* ---------- feature bits (the hero film's feature cards) ---------- */
.bits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:960px){.bits{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bits{grid-template-columns:1fr}}
.bit{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.bit .shot{border-radius:0;outline:0;box-shadow:none;border-bottom:1px solid var(--line-soft)}
.bit-body{padding:20px 22px 24px}
.bit-body h3{font-size:19px;margin-bottom:8px}
.bit-body p{color:var(--text-2);font-size:15px}
.bit-body .logos{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.bit-body .logos img{width:28px;height:28px}
.bit--wide{grid-column:span 2}
@media (max-width:600px){.bit--wide{grid-column:auto}}

/* ---------- WhatsApp chat with the bot's real strings ---------- */
.chat-wrap{background:#0b141a;border:1px solid var(--line);border-radius:var(--r-card);padding:18px;max-width:440px}
.chat-hd{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:#e9edef;font-weight:600;font-size:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.chat-hd img{width:32px;height:32px;border-radius:50%}
.chat-hd small{display:block;font-weight:400;color:#8696a0;font-size:12px}
.chat{display:grid;gap:8px}
.bub{max-width:88%;border-radius:12px;padding:9px 12px;font-size:14px;line-height:1.45;background:#1f2c34;color:#e9edef;border-top-left-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,.3);white-space:pre-line}
.bub.me{margin-left:auto;background:#005c4b;border-top-left-radius:12px;border-top-right-radius:3px}
.bub small{display:block;text-align:right;font-size:11px;color:rgba(255,255,255,.55);margin-top:4px;white-space:normal}
.bub .tap{display:block;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);color:#53bdeb;text-align:center;font-weight:600}
.bub .pic{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:2px 0 6px}
.bub .pic img{border-radius:6px;aspect-ratio:1;object-fit:cover;width:100%}

/* ---------- product doors on the home page ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.doors{grid-template-columns:1fr}}
.door{position:relative;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-card);overflow:hidden;transition:border-color var(--dur) ease,transform var(--dur) var(--ease-out)}
@media (hover:hover){.door:hover{border-color:rgba(255,255,255,.2);transform:translateY(-3px)}}
.door .stage{border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line-soft)}
.door-body{padding:24px 26px 28px;display:grid;gap:12px;align-content:start}
.door-body h3{font-size:clamp(22px,2.2vw,28px)}
.door-body p{color:var(--text-2)}
.door-body .pointouts{margin-top:4px}
.door-body .btn{justify-self:start;margin-top:10px}
.door--drive,.drive-page{--accent:#dd8412;--accent-bright:#e8931f;--accent-dim:rgba(221,132,18,.14);--accent-ink:#14100d}
.door--drive ::selection,.drive-page ::selection{background:#dd8412}

/* ---------- Drive search chips ---------- */
.qchips{display:flex;flex-wrap:wrap;gap:10px}
.qchips span{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--bg-2);border-radius:10px;padding:10px 14px;font-size:15px;color:var(--text)}
.qchips span::before{content:'';width:15px;height:15px;border-radius:50%;border:2px solid var(--text-3);box-sizing:border-box;flex:none}
.qchips span.face::before{border-radius:4px;border-style:dashed}
.footnote{font-size:13px;color:var(--text-3);margin-top:14px;max-width:60ch}

/* ---------- numbers ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}}
.stat b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(30px,3.6vw,48px);letter-spacing:-.02em;color:var(--accent);line-height:1.05}
.stat span{display:block;color:var(--text-2);font-size:14.5px;margin-top:8px}

/* ---------- FAQ, plans, CTA ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--text-3);font-family:var(--display);font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:'\2212'}
.faq-a{padding:0 0 20px;color:var(--text-2);max-width:64ch}
.ctaband{text-align:center}
.ctaband .lede{margin-inline:auto}
.ctaband .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:820px){.plans{grid-template-columns:1fr}}
.plan{position:relative;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:26px;display:grid;gap:8px;align-content:start}
.plan .pn{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.plan .pp{font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-.02em;line-height:1.1}
.plan .pp small{font-family:var(--body);font-size:14px;font-weight:500;color:var(--text-2);letter-spacing:0}
.plan .pd{color:var(--text-2);font-size:14.5px}
.plan .btn{justify-self:start;margin-top:10px}
.plan--hi{border-color:rgba(226,90,59,.45)}
.plan .was{color:var(--text-3);font-size:14px}
.sec--stage{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.eyebrow--drive{color:#dd8412}
.tagline{text-align:center}
.tagline .cap{max-width:24ch;margin-inline:auto;font-size:clamp(26px,3.6vw,48px);color:var(--text-2)}
.tagline .cap em{color:var(--text)}

/* ======================================================================
   Light theme (user direction 2026-09-10): cream stage, ink type, the
   terracotta and amber accents unchanged. The app screens in the films and
   textures are cream themselves, so they now sit on the page instead of
   floating as bright rectangles. Film stages stay black: they are screens.
   ====================================================================== */
:root{
  --bg:#f7f4ee; --bg-2:#ffffff; --bg-3:#efeae1;
  --line:rgba(35,31,25,.12); --line-soft:rgba(35,31,25,.07);
  --text:#231f19; --text-2:#5b554c; --text-3:#8a8379;
  --accent-ink:#14100d;
  --shadow-1:0 1px 2px rgba(35,31,25,.06),0 10px 28px rgba(35,31,25,.10);
  --shadow-2:0 2px 4px rgba(35,31,25,.08),0 20px 50px rgba(35,31,25,.14);
}
body{background:var(--bg);color:var(--text)}
.h-grad{background:linear-gradient(90deg,#231f19,#6b655b);-webkit-background-clip:text;background-clip:text;color:transparent}
.pw-photos{background:linear-gradient(115deg,#4f46c9 0%,#1f8f6b 38%,#c9418a 68%,#d98a12 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav.is-solid{background:rgba(247,244,238,.86);border-color:var(--line-soft)}
.mnav{background:rgba(247,244,238,.97)}
.btn--ghost{background:#fff;border-color:var(--line)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{border-color:rgba(35,31,25,.3);background:#fff}}
.nav-links a[aria-current="page"]{background:rgba(35,31,25,.06)}
.pointouts span{background:#fff}
.pointouts span.on{border-color:rgba(35,31,25,.35)}
.shot{background:#fff;outline-color:rgba(35,31,25,.12)}
.sec--stage{background:var(--bg-3)}
.sec--stage .bit,.sec--stage .plan,.sec--stage .door{background:#fff}
.stage{border-color:rgba(35,31,25,.2)}
.film-cap{color:rgba(255,255,255,.72)}
.film-btn{background:rgba(255,255,255,.12);color:#fff}
.film-ui{background:#0a0b0d;border-top-color:rgba(255,255,255,.08)}
.lb-d{background:#fff;border-color:var(--line)}
.lband{background:radial-gradient(130% 150% at 50% -30%,rgba(226,90,59,.12),transparent 62%),#fff}
.qchips span{background:#fff}
.faq summary::after{color:var(--text-3)}
.footer{background:var(--bg-3)}
.card,.bit,.door,.plan,.pricecard{background:#fff}
.fld input{background:#fff}
.keycard{background:rgba(221,132,18,.10)}
/* WhatsApp chat in its light colours */
.chat-wrap{background:#efe7dd;border-color:rgba(35,31,25,.1)}
.chat-hd{color:#111b21;border-bottom-color:rgba(17,27,33,.1)}
.chat-hd small{color:#667781}
.bub{background:#fff;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.bub.me{background:#d9fdd3}
.bub small{color:#667781}
.bub .tap{color:#027eb5;border-top-color:rgba(17,27,33,.1)}
/* the launch bar stays ink: one dark strip above a cream page */
#snbar{background:rgba(35,31,25,.96)!important;--text:#f3f4f6;--text-2:#cfc9bf;--text-3:#8f8a82;--bg-2:#2c2721;--bg-3:#3a342d;--line:rgba(255,255,255,.12);--line-soft:rgba(255,255,255,.08)}
::selection{background:var(--accent);color:#fff}

/* ---------- plan tables on the home page ---------- */
.ptable-wrap{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-1);overflow:hidden}
.ptable{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;table-layout:fixed}
.ptable th,.ptable td{padding:12px 11px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft);line-height:1.45}
.ptable thead th{vertical-align:bottom;border-bottom:1px solid var(--line);padding-top:20px}
.ptable thead th:first-child{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.01em}
.ptable th:first-child{background:#fff;font-weight:600;color:var(--text);width:24%}
.ptable tbody th{font-weight:500}
.ptable thead th .pn{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.ptable thead th .pp{display:block;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em;margin-top:4px;line-height:1.1;white-space:nowrap}
.ptable thead th .pp small{font-family:var(--body);font-size:12.5px;font-weight:500;color:var(--text-2);letter-spacing:0}
.ptable thead th .pd{display:block;font-size:12.5px;color:var(--text-2);margin-top:5px;font-weight:500}
.ptable th.hi,.ptable td.hi{background:rgba(226,90,59,.06)}
.ptable thead th.hi{border-radius:12px 12px 0 0;background:var(--accent-dim)}
.ptable td s{color:var(--text-3);margin-left:6px;font-size:12.5px}
.ptable td .ok{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-dim);color:var(--accent);font-weight:700;font-size:13px}
.ptable tfoot td,.ptable tfoot th{border-bottom:0;padding:18px 14px 20px}
.ptable--two th:first-child{width:20%}
.ptable--two thead th:first-child{font-size:18px}
.ptable--two td{color:var(--text-2);width:40%}
.ptable--two td b{color:var(--text)}
.ptable-note{font-size:13px;color:var(--text-3);margin-top:12px}
.ptable a.btn{white-space:nowrap}

/* term toggle + responsive plan cards (no horizontal scroll anywhere) */
.pterm{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#fff;margin-bottom:22px}
.pterm-btn{border-radius:999px;padding:9px 20px;font-weight:700;font-size:14.5px;color:var(--text-2);display:flex;flex-direction:column;align-items:center;line-height:1.1;transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease}
.pterm-btn small{font-weight:500;font-size:11.5px;color:var(--text-3);margin-top:4px}
.pterm-btn.is-on{background:var(--text);color:#fff}
.pterm-btn.is-on small{color:rgba(255,255,255,.7)}
.pmatrix[data-term="annual"] .t-q{display:none}
.pmatrix[data-term="quarterly"] .t-a{display:none}
.pcards{display:none}
@media (max-width:900px){
  .ptable-desk{display:none}
  .pcards{display:grid;gap:14px}
}
@media (min-width:560px) and (max-width:900px){.pcards{grid-template-columns:1fr 1fr}.pcards .pincl{grid-column:1/-1}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:20px;display:grid;gap:6px;align-content:start}
.pcard--free{border-color:rgba(226,90,59,.45);background:rgba(226,90,59,.04)}
.pcard .pn{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.pcard .pp{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.02em;line-height:1.1}
.pcard .pp small{font-family:var(--body);font-size:13px;font-weight:500;color:var(--text-2);letter-spacing:0}
.pcard .pd{font-size:13.5px;color:var(--text-2)}
.pcard .pb{font-size:14px;color:var(--text)}
.pcard .pb s{color:var(--text-3);margin-left:6px;font-size:12.5px}
.pcard .btn{justify-self:start;margin-top:8px}
.pincl{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
.pincl h3{font-size:17px;margin-bottom:12px}
.pincl ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pincl li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--text-2)}
.pincl .ok{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-dim);color:var(--accent);font-weight:700;font-size:13px;flex:none}

.shots-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.shots-4{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.shots-4{grid-template-columns:1fr}}
.shots-4 .shot--phone{max-width:260px}

/* per-event insight card */
.evstat{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px 20px;box-shadow:var(--shadow-1)}
.evstat-hd{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line-soft)}
.evstat-hd img{width:34px;height:34px;border-radius:9px}
.evstat-hd b{display:block;font-family:var(--display);font-size:17px;font-weight:600}
.evstat-hd small{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.evstat .stat b{font-size:clamp(28px,3vw,40px)}

/* most picked marker in the plan matrix */
.pop{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:999px;padding:3px 8px;margin-left:6px;vertical-align:middle;font-style:normal}
.ptable th.pick,.ptable td.pick{background:rgba(226,90,59,.05)}
.ptable thead th.pick{border-radius:12px 12px 0 0}
.pcard--pick{border-color:rgba(226,90,59,.45)}

/* the most-picked annual column carries a light tint down the whole table */
.pmatrix[data-term="annual"] .ptable tr > *:nth-child(5):not([colspan]){background:rgba(226,90,59,.05)}
.pmatrix[data-term="annual"] .ptable thead th:nth-child(5){background:rgba(226,90,59,.09);border-radius:12px 12px 0 0}

/* buy form: country code beside the number */
.phone-row{display:grid;grid-template-columns:84px 1fr;gap:8px}
.phone-row input{min-width:0}
#dbf-cc{text-align:center;font-variant-numeric:tabular-nums}

/* download badges: black store-style buttons, icon left, two-line label */
.dlbadge{display:inline-flex;align-items:center;gap:12px;background:#111;color:#fff;border:1px solid #2a2a2a;border-radius:12px;padding:10px 18px 10px 14px;min-width:220px;text-decoration:none;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) ease}
.dlbadge svg.ic{width:30px;height:30px;flex:none}
.dlbadge .dl-txt{display:grid;line-height:1.05}
.dlbadge .dl-txt small{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.dlbadge .dl-txt b{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.01em;margin-top:1px}
.dlbadge .dl-txt em{font-style:normal;font-size:12px;color:rgba(255,255,255,.75);margin-top:2px}
.dlbadge.is-primary{border-color:#000;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.dlbadge.is-off{opacity:.55;cursor:default}
@media (hover:hover){.dlbadge:not(.is-off):hover{background:#000;transform:translateY(-1px)}}
.dlbadge:active{transform:scale(.98)}

/* ---------- optional white + off-white scheme (page-scoped via body.theme-white) ---------- */
body.theme-white{--bg:#ffffff;--bg-2:#f6f6f4;--bg-3:#f1f1ee;--line:rgba(20,20,20,.1);--line-soft:rgba(20,20,20,.06);background:#fff}
body.theme-white .nav.is-solid{background:rgba(255,255,255,.88)}
body.theme-white .mnav{background:rgba(255,255,255,.97)}
body.theme-white .footer{background:#f1f1ee}
body.theme-white .card,body.theme-white .bit,body.theme-white .door,body.theme-white .plan,body.theme-white .pcard,body.theme-white .pincl,body.theme-white .evstat,body.theme-white .pricecard{background:#f6f6f4}
body.theme-white .sec--stage .bit,body.theme-white .sec--stage .plan,body.theme-white .sec--stage .door,body.theme-white .sec--stage .evstat{background:#fff}
body.theme-white .ptable-wrap,body.theme-white .ptable th:first-child,body.theme-white .pterm,body.theme-white .btn--ghost,body.theme-white .pointouts span,body.theme-white .qchips span,body.theme-white .shot,body.theme-white .lb-d{background:#fff}
body.theme-white .sec--stage .ptable-wrap{background:#fff}

/* pricing page: reach-out bands */
.reach{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px 22px}
.reach p{color:var(--text-2);font-size:15.5px;margin:0}
.reach-line{color:var(--text-2);font-size:14px;margin:14px 0 8px}

.others--one{grid-template-columns:minmax(0,640px)}

/* pricing page: free card joins both grids */
@media (min-width:1021px){#plansA{grid-template-columns:repeat(5,minmax(0,1fr))}}
#plansQ{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
@media (max-width:1020px){#plansQ{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#plansQ{grid-template-columns:1fr}}
.plan--free{border-color:rgba(226,90,59,.45);background:rgba(226,90,59,.04)}

/* assistant conversation (Billing) */
.aichat{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1);overflow:hidden}
.aichat-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-soft);font-size:14px}
.aichat-hd .dot{width:9px;height:9px;border-radius:50%;background:#45a077;box-shadow:0 0 0 3px rgba(69,160,119,.18)}
.aichat-hd small{color:var(--text-3);font-size:12.5px}
.aichat-body{padding:18px;display:grid;gap:12px}
.ai-msg{max-width:86%;border-radius:14px;padding:11px 14px;font-size:14.5px;line-height:1.5}
.ai-msg p{margin:0}
.ai-msg.me{margin-left:auto;background:var(--text);color:#fff;border-bottom-right-radius:4px}
.ai-msg.bot{background:var(--bg-3);color:var(--text);border-bottom-left-radius:4px}
.ai-tool{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#45a077;background:rgba(69,160,119,.12);border-radius:6px;padding:2px 8px;margin-bottom:8px}
.ai-doc{display:flex;align-items:center;gap:10px;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ai-doc img{width:28px;height:28px;border-radius:7px}
.ai-doc b{display:block;font-size:13.5px}
.ai-doc small{display:block;color:var(--text-3);font-size:12px}
.ai-doc span{margin-left:auto;font-size:12.5px;font-weight:700;color:#45a077;white-space:nowrap}

/* keep-me-posted band: the peek cards must not widen the single column on phones */
@media (max-width:860px){
  section.soon .wrap{grid-template-columns:minmax(0,1fr)}
  section.soon .soon-stage{max-width:100%;overflow:hidden}
}
@media (max-width:560px){section.soon .soon-cta{white-space:normal;text-align:center;max-width:100%;line-height:1.3}}

/* nav: always glass, so the page never bleeds into the bar */
.nav{background:rgba(247,244,238,.72);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line-soft)}
.nav.is-solid{background:rgba(247,244,238,.86)}
/* phone menu: buttons at button size, links above them */
.mnav .mnav-cta a{font-size:16px;padding:13px 24px;line-height:1.2}
.mnav{z-index:99}
/* buy form on phones: one field per row, code selector styled like the inputs */
#dbf-cc{appearance:none;-webkit-appearance:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b554c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/14px;border:1px solid var(--line);border-radius:10px;padding:12px 26px 12px 10px;color:var(--text);font:inherit;font-size:15px;min-width:0}
.phone-row{grid-template-columns:96px 1fr}
@media (max-width:600px){form#drive-form .bgrid{grid-template-columns:1fr}form#drive-form .fld--wide{grid-column:auto}}
/* film control bar on phones: drop the caption so the time is never clipped */
@media (max-width:600px){.film-cap{display:none}.film-ui{gap:10px;padding:10px}}