/* AreaManager landing page — sections under app/views/pages/landing.
   Loaded on top of marketing.css (tokens, nav, buttons, FAQ, demo modal). */
/* ---- plum top: nav + hero + founder quote ---- */
    .marketing a.btn-glass,.marketing a.btn-glass:hover{color:#fff}
    .marketing a.btn-accent,.marketing a.btn-accent:hover{color:#fff}
    .marketing a.btn-dark,.marketing a.btn-dark:hover{color:#FBF6EE}
    .dark .eyebrow{color:#E88A4E}
    .dark h1{color:#fff}
    .dark h1 em{color:#E88A4E}
    .dark .evhead{color:rgba(255,255,255,.8)}
    .dark .mkpulse{background:#fff}
    .dark .evhead.light{color:#6F655A}
    .owner-bubble{background:#F7DCC6;border:1px solid #F0CDB0;border-radius:14px 4px 14px 14px;padding:10px 13px;font-size:13.5px;line-height:1.5;color:#2A2521}
    .xm .owner-bubble{box-shadow:0 14px 30px -18px rgba(20,8,40,.6)}
    .xwrap{max-width:420px;margin:0 auto;width:100%}
    .xm{display:flex;gap:8px;align-items:flex-start}
    .xm.me{justify-content:flex-end}
    .xm .says,.xm .mine{box-shadow:0 14px 30px -18px rgba(20,8,40,.6)}
    .xm .action-card{box-shadow:0 20px 50px -28px rgba(20,8,40,.6)}
    .says.think{display:flex;flex-direction:column;gap:7px;padding:12px 13px;min-width:180px}
    .shim{display:block;height:9px;border-radius:5px;width:100%;background:linear-gradient(90deg,#EFE6D6 0%,#F7DCC6 40%,#EFE6D6 80%);background-size:220% 100%;animation:shimmer 1.1s linear infinite}
    .shim.short{width:62%}
    @keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
    .btn-white{background:#fff;color:#530C8B}
    .btn-glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}.btn-glass:hover{color:#fff;border-color:#fff}
    .g2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:64px;align-items:center}
    .g3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px}
    .g4{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
    .hero-inner{position:relative;max-width:1320px;margin:0 auto;border-radius:28px;overflow:hidden;min-height:660px;background:linear-gradient(120deg,#3a2c22,#1e1612);display:flex;align-items:flex-end;justify-content:space-between}
    .hero-copy{position:relative;width:56%;min-width:480px;padding:68px 48px 76px;color:#fff}
    .hero-feed{position:relative;width:340px;padding:0 40px 40px 0;display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0}
    .hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,22,18,.84) 0%,rgba(30,22,18,.64) 30%,rgba(30,22,18,.3) 48%,rgba(30,22,18,0) 62%);pointer-events:none}
    .says{background:#fff;border:1px solid #E7DBC9;border-radius:4px 14px 14px 14px;padding:10px 13px;font-size:13.5px;line-height:1.5;color:#2A2521}
    .mine{background:#F7DCC6;border:1px solid #F0CDB0;border-radius:14px 4px 14px 14px;padding:10px 13px;font-size:13.5px;line-height:1.5;color:#2A2521}
    .stamp{font-size:10.5px;color:#9A8F81;margin-top:4px;margin-left:2px}
    .stamp .who{font-weight:700;color:#6F655A}
    .avatar-am{width:26px;height:26px;border-radius:50%;background:#F7DCC6;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .action-card{background:#fff;border:1px solid #E7DBC9;border-radius:16px;box-shadow:0 20px 50px -28px rgba(30,20,15,.4);overflow:hidden;margin-left:34px}
    .card-label{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid #E7DBC9;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9A8F81}
    .cite{font-size:12px;font-style:italic;color:#9A8F81}
    .btn-sm{padding:9px 15px;font-size:12.5px}
    .chatbox{max-width:424px;width:100%;margin:0 auto;background:#FBF6EE;border:1px solid #E7DBC9;border-radius:22px;box-shadow:0 30px 70px -36px rgba(30,20,15,.45);overflow:hidden;padding:20px 16px;display:flex;flex-direction:column;gap:12px}
    .act{position:relative;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:80px;align-items:center;margin-bottom:72px}
    .act .copy{max-width:420px}
    .act.flip .copy{order:2;margin-left:auto}
    .act.flip .chat{order:1}
    .spine{position:absolute;left:50%;top:12px;bottom:12px;width:2px;margin-left:-1px;background:#E7DBC9}
    .dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#DC6A34;box-shadow:0 0 0 5px #F5EDE1;z-index:1}
    .chip{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:11px 18px;font-size:14.5px;font-weight:500;color:#fff}
    .chip i{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
    .chiprow{display:flex;gap:14px;width:max-content;padding-right:14px}
    .chipwin{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
    .chiptrack{display:flex;width:max-content;animation:ammarquee 60s linear infinite}
    .chiptrack.rev{animation-direction:reverse}
    @keyframes ammarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    .spin{display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid #F7DCC6;border-top-color:#DC6A34;animation:hspin .8s linear infinite;flex-shrink:0}
    @keyframes hspin{to{transform:rotate(360deg)}}
    .resp{display:flex;align-items:center;gap:12px;min-height:46px;padding:9px 14px;border-radius:12px;background:#fff;border:1px solid #E7DBC9;border-left:3px solid #EFE6D6}
    .resp.done{border-left-color:#2E9E6B}
    .resp.calc{border-left-color:#DC6A34;box-shadow:0 12px 30px -20px rgba(30,20,15,.35)}
    .resp.todo{opacity:.42}
    .resp .t{font-size:14px;font-weight:700;color:#2A2521;flex:1}
    .resp .n{font-size:12.5px;color:#6F655A;white-space:nowrap}
    .tick{width:20px;height:20px;border-radius:50%;background:#2E9E6B;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
    .pending{width:20px;height:20px;border-radius:50%;border:2px solid #E7DBC9;flex-shrink:0}
    .step{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px;position:relative;padding-bottom:26px}
    .step:last-child{padding-bottom:0}
    .step::before{content:'';position:absolute;left:16px;top:34px;bottom:0;width:2px;background:#EFE6D6}
    .step:last-child::before{display:none}
    .step .num{width:34px;height:34px;border-radius:50%;background:#F7DCC6;color:#DC6A34;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:15px;position:relative;z-index:1}
    .step.last .num{background:#530C8B;color:#fff}
    .step h4{margin:0;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#DC6A34;line-height:34px}
    .step p{font-size:15.5px;line-height:1.5;color:#2A2521;margin-top:2px}
    .auth{background:#fff;border:1px solid #E7DBC9;border-radius:20px;padding:24px 24px 22px}
    .auth ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
    .auth li{display:flex;align-items:center;gap:10px;font-size:15px;color:#2A2521}
    .trow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 2px;border-bottom:1px solid #EFE6D6;font-size:14.5px}
    .trow .l{color:#2A2521}
    .trow .r{font-family:var(--serif);font-weight:700;font-size:19px;white-space:nowrap}
    .logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 48px}
    .logos img{object-fit:contain;flex-shrink:0;opacity:.78}
    .footer-wordmark{font-family:var(--serif);font-weight:700;font-size:220px;letter-spacing:-.05em;color:rgba(255,255,255,.05);white-space:nowrap;line-height:1}
    @media(max-width:1100px){
      .hero-copy{width:58%;min-width:0}
    }
    @media(max-width:900px){
      .g2{grid-template-columns:1fr!important;gap:36px!important}
      .g3{grid-template-columns:1fr!important}
      .g4{grid-template-columns:1fr 1fr!important}
      .nav-center{display:none!important}
      .nav-wordmark{display:none!important}
      .hero-inner{flex-direction:column;align-items:stretch}
      .hero-copy{width:100%!important;min-width:0!important;padding:48px 26px 28px!important}
      .hero-feed{width:100%!important;align-items:center!important;padding:0 26px 40px!important}
      .hero-scrim{background:linear-gradient(180deg,rgba(30,22,18,.6),rgba(30,22,18,.86))!important}
      .spine,.dot{display:none!important}
      .act{grid-template-columns:1fr!important;row-gap:20px!important;margin-bottom:48px!important}
      .act .copy,.act.flip .copy{order:0!important;margin:0!important;max-width:none!important}
      .act .chat,.act.flip .chat{order:1!important}
      .action-card{margin-left:0!important}
      .footer-wordmark{font-size:120px!important}
      h2{font-size:clamp(30px,7.4vw,40px)!important}
      h1{font-size:clamp(38px,10vw,52px)!important}
      .pad-sec{padding-top:64px!important;padding-bottom:64px!important}
    }
    @media(max-width:600px){
      .wrap{padding-left:20px!important;padding-right:20px!important}
      .nav-right{gap:12px!important}
      .nav-right .btn{padding:8px 14px!important;font-size:13px!important}
      .nav-right .login{display:none!important}
      .g4{grid-template-columns:1fr!important}
      .hero-outer{padding:12px 12px 0!important}
      .hero-inner{border-radius:20px!important}
      .cta-outer{padding:0 12px!important}
      .cta-inner{border-radius:20px!important;padding:56px 22px!important}
      .cta-inner h2{font-size:40px!important}
      .btn-row{flex-direction:column;align-items:stretch}
      .btn-row .btn{justify-content:center}
      .chatbox{padding:16px 12px!important}
      .resp .n{display:none}
      .trow .r{font-size:17px}
    }
      .arow{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;background:#fff;border:1px solid #E7DBC9;border-radius:16px;padding:16px 18px;cursor:pointer;font-family:var(--body);color:#2A2521;min-height:44px;opacity:.72}
    .arow:hover{opacity:1;border-color:#C9BDAC}
    .arow.on{opacity:1;background:#FBF6EE;border-color:#DC6A34;box-shadow:0 20px 50px -30px rgba(30,20,15,.4)}
    .adot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:7px}
    .abody{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
    .aname{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:-.02em;color:#530C8B;line-height:1.2}
    .awatch{font-size:14px;line-height:1.5;color:#6F655A}
    .adet{display:none;flex-direction:column;gap:6px;margin-top:10px;padding-top:12px;border-top:1px solid #EFE6D6}
    .arow.on .adet{display:flex}
    .adl{font-size:14px;line-height:1.5;color:#2A2521}
    .adl b{font-weight:700;color:#DC6A34}
    .pbars{display:flex;gap:6px;margin-top:8px;padding:0 4px}
    .pbar{flex:1;height:3px;border-radius:2px;background:#E7DBC9;position:relative;overflow:hidden;display:block}
    .pbar::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:#DC6A34}
    .pbar.on::after{animation:pfill 7s linear forwards}
    .paused .pbar.on::after{animation:none;width:100%}
    @keyframes pfill{from{width:0}to{width:100%}}
    .panel{animation:panelin .45s var(--ease)}
    @keyframes panelin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
    .daychip{align-self:center;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9A8F81;background:#fff;border:1px solid #E7DBC9;border-radius:999px;padding:5px 12px}
    .avatar-me{width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0;display:block}
    .says.done{border-color:#BEE0CE;background:#EEF8F2}
    .fcard{background:#fff;border:1px solid #E7DBC9;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(30,20,15,.4);display:flex;flex-direction:column}
    .fhead{background:linear-gradient(160deg,#6A1AA8 0%,#530C8B 45%,#3E0968 100%);padding:26px 28px 0;height:340px;position:relative;overflow:hidden}
    .fby{display:flex;align-items:center;gap:9px}
    .fname{font-size:14px;font-weight:700;color:#fff}
    .fchan{font-size:11px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.85);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:3px 9px}
    .fmsg{font-size:15px;line-height:1.5;color:rgba(255,255,255,.92);margin-top:10px;max-width:48ch;min-height:46px}
    .fart{display:flex;align-items:center;gap:0;margin-top:26px}
    .fart.v{flex-direction:column;align-items:center;margin-top:16px}
    .fsrcrow{display:flex;gap:8px}
    .fconv{display:block}
    .fconv path{fill:none;stroke:#E88A4E;stroke-width:2;stroke-linecap:round;opacity:.85;stroke-dasharray:6 8;animation:flowdash 1.4s linear infinite}
    .fvline{width:2px;height:14px;background:#E88A4E;opacity:.85}
    .fst{width:72px;height:34px;border-radius:9px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;padding:0 8px;box-shadow:0 10px 24px -14px rgba(0,0,0,.5);flex-shrink:0}
    .fst img{max-width:60px;object-fit:contain;opacity:.85}
    .fsx{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#530C8B;white-space:nowrap;line-height:1}
    .fcon{flex-shrink:0;display:block}
    .fcon path{fill:none;stroke:#E88A4E;stroke-width:2;stroke-linecap:round;opacity:.85;stroke-dasharray:6 8;animation:flowdash 1.4s linear infinite}
    .ftile{width:76px;height:76px;border-radius:20px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
    .fok{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;background:#2E9E6B;border:2px solid #530C8B;display:flex;align-items:center;justify-content:center}
    .fline{width:28px;height:2px;background:#E88A4E;opacity:.85;flex-shrink:0}
    .fdoc{flex:1;min-width:0;background:rgba(255,255,255,.1);border:1px solid rgba(232,138,78,.6);border-bottom:0;border-radius:18px 18px 0 0;padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px}
    .fdoc-t{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
    .fdoc-s{font-size:13px;color:rgba(255,255,255,.85)}
    .fbars{display:flex;align-items:flex-end;gap:8px;height:42px}
    .fbar{flex:1;border-radius:5px 5px 2px 2px;background:rgba(255,255,255,.55)}
    .fbar.low{background:#E88A4E}
    .fpill{flex:1;min-width:0;display:flex;align-items:center;gap:12px;overflow:hidden;background:rgba(255,255,255,.1);border:1px solid rgba(232,138,78,.6);border-radius:999px;padding:12px 18px}
    .fpill .fst{flex:1 1 0;min-width:0}
    .fpill.sm{flex:0 0 auto;padding:10px 16px;font-size:13.5px;font-weight:600;color:#fff;gap:9px;white-space:nowrap;border-radius:14px}
    .fpill.sm b{font-family:var(--serif);font-weight:700;color:#F7C89E;margin-left:8px}
    .fstack{display:flex;flex-direction:column;gap:12px}
    .fdone{width:16px;height:16px;border-radius:50%;background:#2E9E6B;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
    .fwait{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#E88A4E;animation:hspin .9s linear infinite;flex-shrink:0;display:inline-block}
    .fhub{position:relative;width:530px;height:200px;margin:22px auto 0}
    .fhl{fill:none;stroke:#E88A4E;stroke-width:2;stroke-linecap:round;opacity:.85;stroke-dasharray:6 8;animation:flowdash 1.4s linear infinite}
    .fhl.out{stroke:#F7C89E;opacity:.7}
    .fh{position:absolute}
    .fbody{padding:24px 28px 28px}
    .ftitle{font-size:24px;letter-spacing:-.02em;line-height:1.15;color:#2A2521}
    .fdesc{font-size:15.5px;line-height:1.55;color:#6F655A;margin-top:10px}
    .fl{fill:none;stroke:#DC6A34;stroke-width:2;stroke-linecap:round;opacity:.75;stroke-dasharray:7 9;animation:flowdash 1.4s linear infinite}
    .fl.out{stroke:#530C8B;opacity:.55}
    @keyframes flowdash{to{stroke-dashoffset:-16}}
    .ftl{position:absolute;width:200px;height:52px;border-radius:14px;background:#fff;border:1px solid #E7DBC9;box-shadow:0 14px 30px -20px rgba(30,20,15,.4);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 16px}
    .ftl img{object-fit:contain;max-width:140px;opacity:.85}
    .ftl.fch{width:220px;justify-content:flex-start;font-size:14.5px;font-weight:600;color:#2A2521}
    .ftl.fch img{opacity:1}
    .flab{position:absolute;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9A8F81;line-height:1;white-space:nowrap}
    .crow{display:grid;grid-template-columns:170px 1fr 1.5fr;gap:0 24px;padding:18px 28px;border-top:1px solid #EFE6D6;align-items:start}
    .crow.chead{border-top:0;background:#FBF6EE;padding:16px 28px;align-items:center}
    .clab{font-family:var(--serif);font-size:19px;font-weight:700;color:#530C8B;display:flex;gap:10px;align-items:flex-start;padding-top:12px;letter-spacing:-.02em}
    .cold{font-size:15px;line-height:1.55;color:#9A8F81;padding:14px 0}
    .cnew{font-size:15px;line-height:1.55;color:#2A2521;padding:14px 16px;background:#FBF6EE;border-left:3px solid #DC6A34;border-radius:0 12px 12px 0}
    .srow{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #EFE6D6;font-size:14.5px;line-height:1.45;color:#2A2521}
    .srow:last-child{border-bottom:0}
    .stime{width:84px;flex-shrink:0;font-size:12px;color:#9A8F81;padding-top:2px}
    .sdot{width:20px;height:20px;border-radius:50%;flex-shrink:0;opacity:.85}
    .frow2{display:flex;align-items:center;gap:10px;font-size:14px;color:#2A2521;background:#FBF6EE;border:1px solid #EFE6D6;border-radius:10px;padding:10px 12px}
    .fico{width:26px;height:26px;border-radius:7px;background:#fff;border:1px solid #E7DBC9;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
    .fmeta{margin-left:auto;font-size:12px;color:#9A8F81;font-style:italic;white-space:nowrap}
    .arule{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid #EFE6D6;font-size:14.5px;color:#2A2521}
    .arule:last-child{border-bottom:0}
    .arule.lock span{color:#530C8B;font-weight:600}
    .seg{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:4px;background:#F5EDE1;border-radius:999px;padding:4px}
    .seg i{display:block;height:26px;border-radius:999px}
    .seg i.on.g{background:#2E9E6B}
    .seg i.on.a{background:#C77D18}
    .seg i.on.p{background:#530C8B}
    .rrow{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px dotted #E7DBC9;font-size:14px;color:#2A2521}
    .rrow:last-child{border-bottom:0}
    .rrow b{font-family:var(--serif);font-size:17px;white-space:nowrap}
    .rrow b i{font-style:normal;font-family:var(--body);font-weight:500;font-size:11.5px;color:#9A8F81}
    .ushow{position:relative;max-width:1240px;margin:40px auto 0;border-radius:26px;background:#fff;box-shadow:0 60px 120px -40px rgba(30,20,15,.55),0 0 0 1px #E7DBC9;overflow:hidden;z-index:2}
    .utabs{position:absolute;top:12px;right:14px;z-index:3;display:flex;gap:4px;background:#fff;border:1px solid #E7DBC9;border-radius:999px;padding:4px;box-shadow:0 10px 30px -18px rgba(30,20,15,.5)}
    .utab{font-family:var(--body);font-size:13.5px;font-weight:600;border-radius:999px;padding:8px 14px;border:1px solid transparent;background:transparent;color:#6F655A;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:36px}
    .utab.on{background:#FBF6EE;border-color:#E7DBC9;color:#2A2521}
    .uwin{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:620px;animation:panelin .4s var(--ease)}
    .uside{display:flex;flex-direction:column;padding-bottom:16px}
    .umain{display:flex;flex-direction:column;min-width:0}
    .uchat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;margin:0 8px;border-radius:10px}
    .uchat.on{background:#F5EDE1}
    .uav{width:36px;height:36px;border-radius:50%;display:block}
    .ucn{font-size:13.5px;font-weight:700;color:#2A2521}
    .ucp{font-size:12.5px;color:#6F655A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
    .uct{font-size:11px;color:#9A8F81;align-self:flex-start;padding-top:2px}
    .ughost{height:12px;border-radius:6px;background:#EFE6D6;margin:12px 22px 0;width:70%}
    .uart{margin-top:12px;background:#FBF6EE;border:1px solid #E7DBC9;border-radius:14px;padding:14px 16px;max-width:520px}
    .uline{fill:none;stroke:#530C8B;stroke-width:1.2;opacity:.55}
    .hwwrap{position:relative;max-width:1080px;margin:0 auto}
    .hwspine{position:absolute;left:50%;top:20px;bottom:20px;width:2px;margin-left:-1px;background:#E7DBC9}
    .hwstep{display:grid;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);align-items:center;column-gap:20px;margin-bottom:56px;position:relative}
    .hwnum{display:flex;justify-content:center;align-self:flex-start;padding-top:24px}
    .hwnum span{width:40px;height:40px;border-radius:50%;background:#530C8B;color:#fff;font-family:var(--serif);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #F5EDE1}
    .hwtext{padding:24px 0}
    .hwtext.r{text-align:right}
    .hwtext.r p{margin-left:auto}
    .hwtime{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#DC6A34;border:1px solid #F0CDB0;background:#fff;border-radius:999px;padding:5px 11px}
    .hwcard{background:#FBF6EE;border:1px solid #E7DBC9;border-radius:24px;padding:26px;box-shadow:0 30px 70px -40px rgba(30,20,15,.4);min-height:260px;display:flex;flex-direction:column;justify-content:center}
    .hwapp{background:#fff;border:1px solid #EFE6D6;border-radius:16px;padding:18px 18px 16px}
    .hwlab{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9A8F81;margin-bottom:10px}
    .hwgrid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px}
    .hwtile{position:relative;height:44px;border-radius:10px;background:#FBF6EE;border:1px solid #EFE6D6;display:flex;align-items:center;justify-content:center}
    .hwtile img{max-width:60px;object-fit:contain;opacity:.8}
    .hwtick{position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:#2E9E6B;border:2px solid #fff;display:flex;align-items:center;justify-content:center;opacity:0}
    .hwbar{height:6px;border-radius:3px;background:#EFE6D6;margin-top:14px;overflow:hidden}
    .hwbar i{display:block;height:100%;background:#DC6A34;border-radius:3px;animation:hwfill 7s linear infinite}
    @keyframes hwfill{0%{width:0}48%{width:100%}92%{width:100%}100%{width:0}}
    .hwstate{position:relative;height:20px;margin-top:10px;font-size:13px;color:#6F655A}
    .hwstate span{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
    .hwreading{animation:hwread 7s linear infinite}
    .hwdone{animation:hwdn 7s linear infinite;color:#2A2521;font-weight:600}
    @keyframes hwread{0%,46%{opacity:1}50%,100%{opacity:0}}
    @keyframes hwdn{0%,48%{opacity:0}53%,92%{opacity:1}100%{opacity:0}}
    .hwtabs{position:relative;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));background:#F5EDE1;border-radius:999px;padding:4px}
    .hwtabs span{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600;color:#2A2521;height:34px}
    .hwpill{position:absolute;top:4px;left:4px;width:calc(33.333% - 2.7px);height:34px;border-radius:999px;background:#fff;box-shadow:0 4px 12px -6px rgba(30,20,15,.4);animation:hwslide 7s var(--ease) infinite}
    @keyframes hwslide{0%,26%{transform:translateX(0)}33%,59%{transform:translateX(100%)}66%,92%{transform:translateX(200%)}100%{transform:translateX(0)}}
    .hwrow{display:flex;align-items:center;gap:10px;font-size:14px;color:#2A2521;padding:9px 0;border-top:1px solid #EFE6D6}
    .hwrow > span:first-child{flex:1}
    .hwsw{width:38px;height:22px;border-radius:999px;background:#E7DBC9;position:relative;flex-shrink:0}
    .hwsw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
    .hwsw.a{animation:hwtrack 7s linear infinite}.hwsw.a i{animation:hwknob 7s var(--ease) infinite}
    .hwsw.b{animation:hwtrack 7s linear .6s infinite}.hwsw.b i{animation:hwknob 7s var(--ease) .6s infinite}
    @keyframes hwtrack{0%,38%{background:#E7DBC9}44%,92%{background:#2E9E6B}100%{background:#E7DBC9}}
    @keyframes hwknob{0%,38%{transform:translateX(0)}44%,92%{transform:translateX(16px)}100%{transform:translateX(0)}}
    .hwask{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#C77D18;background:#F6E7CB;border-radius:999px;padding:3px 8px}
    .hwtyping{display:inline-flex;gap:5px;align-items:center;background:#fff;border-radius:0 9px 9px 9px;padding:12px 14px;box-shadow:0 1px 1px rgba(0,0,0,.13);animation:hwtyp 7s linear infinite;margin-bottom:8px}
    .hwtyping i{width:7px;height:7px;border-radius:50%;background:#9A8F81;animation:amdot 1.1s ease-in-out infinite}
    .hwtyping i:nth-child(2){animation-delay:.18s}.hwtyping i:nth-child(3){animation-delay:.36s}
    @keyframes amdot{0%,80%,100%{opacity:.3}40%{opacity:1}}
    @keyframes hwtyp{0%,4%{opacity:0;height:0;padding-top:0;padding-bottom:0;margin-bottom:0}6%,30%{opacity:1;height:auto;padding:12px 14px;margin-bottom:8px}34%,100%{opacity:0;height:0;padding-top:0;padding-bottom:0;margin-bottom:0;overflow:hidden}}
    .hwmsg{max-width:88%;background:#fff;border-radius:0 9px 9px 9px;padding:10px 12px;box-shadow:0 1px 1px rgba(0,0,0,.13);margin-bottom:8px;opacity:0;animation:hwin 7s var(--ease) infinite}
    @keyframes hwin{0%,34%{opacity:0;transform:translateY(8px)}40%,94%{opacity:1;transform:none}100%{opacity:0}}
    .hwfind{animation-name:hwin2}
    @keyframes hwin2{0%,54%{opacity:0;transform:translateY(8px)}60%,94%{opacity:1;transform:none}100%{opacity:0}}
    .hwreply{max-width:60%;align-self:flex-end;margin-left:auto;background:#DCF8C6;border-radius:9px 0 9px 9px;padding:10px 12px;box-shadow:0 1px 1px rgba(0,0,0,.13);margin-bottom:8px;opacity:0;animation:hwin 7s var(--ease) infinite}
    .hwdonemsg{animation-name:hwin3}
    @keyframes hwin3{0%,64%{opacity:0;transform:translateY(8px)}70%,94%{opacity:1;transform:none}100%{opacity:0}}
    .hwtick.t0{animation:hwt0 7s var(--ease) infinite}
    @keyframes hwt0{0%,6%{opacity:0;transform:scale(.4)}10%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
    .hwtick.t1{animation:hwt1 7s var(--ease) infinite}
    @keyframes hwt1{0%,11%{opacity:0;transform:scale(.4)}15%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
    .hwtick.t2{animation:hwt2 7s var(--ease) infinite}
    @keyframes hwt2{0%,16%{opacity:0;transform:scale(.4)}20%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
    .hwtick.t3{animation:hwt3 7s var(--ease) infinite}
    @keyframes hwt3{0%,21%{opacity:0;transform:scale(.4)}25%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
    .hwtick.t4{animation:hwt4 7s var(--ease) infinite}
    @keyframes hwt4{0%,26%{opacity:0;transform:scale(.4)}30%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
    .hwtick.t5{animation:hwt5 7s var(--ease) infinite}
    @keyframes hwt5{0%,31%{opacity:0;transform:scale(.4)}35%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
    .hwtick.t6{animation:hwt6 7s var(--ease) infinite}
    @keyframes hwt6{0%,36%{opacity:0;transform:scale(.4)}40%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
    .hwtick.t7{animation:hwt7 7s var(--ease) infinite}
    @keyframes hwt7{0%,41%{opacity:0;transform:scale(.4)}45%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
    .deck4wrap{position:relative;height:520px;max-width:520px;margin:0 auto;width:100%}
    .deck4{position:absolute;left:0;right:0;top:66px;transform-origin:50% 0;animation:deck4 20s var(--ease) infinite}
    .deck4.c0{animation-delay:0s}.deck4.c1{animation-delay:-15s}.deck4.c2{animation-delay:-10s}.deck4.c3{animation-delay:-5s}
    @keyframes deck4{
      0%,21%{transform:translateY(0) scale(1);opacity:1;z-index:4}
      25%,46%{transform:translateY(-66px) scale(.85);opacity:.4;z-index:1}
      50%,71%{transform:translateY(-44px) scale(.9);opacity:.6;z-index:2}
      75%,96%{transform:translateY(-22px) scale(.95);opacity:.8;z-index:3}
      100%{transform:translateY(0) scale(1);opacity:1;z-index:4}
    }
    .deckdots .e0::after,.deckdots .e1::after,.deckdots .e2::after,.deckdots .e3::after{animation:deckdot4 20s linear infinite}
    .deckdots .e1::after{animation-delay:-15s}.deckdots .e2::after{animation-delay:-10s}.deckdots .e3::after{animation-delay:-5s}
    @keyframes deckdot4{0%{transform:scaleX(0)}25%{transform:scaleX(1)}25.01%,100%{transform:scaleX(0)}}
    /* The rotating headlines stack in one grid cell, so the block is exactly as
       tall as the tallest of them at any width — no fixed height to leave a gap. */
    .rotwrap{display:grid;margin-top:14px}
    .rot{grid-area:1/1;opacity:0;animation:rotfade 16s var(--ease) infinite both}
    .rot.r0{animation-delay:0s}.rot.r1{animation-delay:4s}.rot.r2{animation-delay:8s}.rot.r3{animation-delay:12s}
    @keyframes rotfade{0%,2%{opacity:0;transform:translateY(10px)}6%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-10px)}}
    .evwrap{max-width:460px;margin:0 auto;width:100%}
    .evhead{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6F655A;margin-bottom:14px}
    /* Which channel this conversation happened on, stated once beside the day
       and the time. */
    .evchan{display:inline-flex;align-items:center;gap:6px}
    .evchan-sep{opacity:.55;letter-spacing:0}
    /* The glyph carries its channel's own green — the fastest way to say
       WhatsApp without writing it — and over a photo it needs the same
       shadow the words beside it already have. */
    .evchan svg{margin-top:-1px}
    .evchan.is-wa svg{color:#25D366}
    .evchan.is-sms svg{color:#34C759}
    .hero-card .evchan svg{filter:drop-shadow(0 1px 6px rgba(17,17,17,.65))}
    /* The delivery ticks on the owner's own replies — the most recognisable
       mark there is, so the header never has to be read twice. Only on the
       scenes whose channel actually shows them. */
    .tick2{display:inline-block;color:#53BDEB;margin-left:5px;vertical-align:-1px}
    .evwin{height:508px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.25) 22%,#000 62%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.25) 22%,#000 62%,#000 100%)}
    .evcol{display:flex;flex-direction:column;gap:12px;animation:evscroll 48s var(--ease) infinite}
    @keyframes evscroll{0.00%{transform:translateY(0px)}6.83%{transform:translateY(0px)}8.33%{transform:translateY(-104px)}15.17%{transform:translateY(-104px)}16.67%{transform:translateY(-208px)}23.50%{transform:translateY(-208px)}25.00%{transform:translateY(-312px)}31.83%{transform:translateY(-312px)}33.33%{transform:translateY(-416px)}40.17%{transform:translateY(-416px)}41.67%{transform:translateY(-520px)}48.50%{transform:translateY(-520px)}50.00%{transform:translateY(-624px)}56.83%{transform:translateY(-624px)}58.33%{transform:translateY(-728px)}65.17%{transform:translateY(-728px)}66.67%{transform:translateY(-832px)}73.50%{transform:translateY(-832px)}75.00%{transform:translateY(-936px)}81.83%{transform:translateY(-936px)}83.33%{transform:translateY(-1040px)}90.17%{transform:translateY(-1040px)}91.67%{transform:translateY(-1144px)}98.50%{transform:translateY(-1144px)}100.00%{transform:translateY(-1248px)}}
    .ev{height:92px;flex-shrink:0;background:#fff;border:1px solid #E7DBC9;border-radius:16px;box-shadow:0 20px 50px -30px rgba(30,20,15,.4);padding:14px 16px;display:flex;gap:12px;align-items:center}
    .evtile{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
    .evb{flex:1;min-width:0}
    .evt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9A8F81}
    .evx{font-size:13.5px;line-height:1.4;color:#2A2521;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    @keyframes am-mkpulse{0%{box-shadow:0 0 0 0 rgba(224,122,63,.45)}70%{box-shadow:0 0 0 10px rgba(224,122,63,0)}100%{box-shadow:0 0 0 0 rgba(224,122,63,0)}}
    .mkpulse{animation:am-mkpulse 1.7s ease-out infinite}
    .evbar{height:5px;border-radius:3px;background:#EFE6D6;margin-top:7px;overflow:hidden}
    .evbar i{display:block;height:100%;background:#DC6A34;border-radius:3px;animation:evfill 48s linear infinite}
    @keyframes evfill{0%,66.37%{width:100%}66.67%{width:0}75.00%,100%{width:100%}}
    .faq-item{border-radius:16px;margin-bottom:12px;padding:20px 24px;background:#FBF6EE;color:#2A2521;border:1px solid #E7DBC9}
    .faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;min-height:44px}
    .faq-q::-webkit-details-marker{display:none}
    .faq-q span:first-child{font-size:17px;font-weight:600}
    .faq-a{font-size:15px;line-height:1.6;margin-top:12px;color:rgba(255,255,255,.92)}
    .faq-a + .faq-a{margin-top:8px}
    .faq-item .icon-minus{display:none}
    .faq-item[open]{background:#DC6A34;color:#fff;border-color:transparent}
    /* marketing.css hides .faq-a until a JS-driven .open class; these are native <details>, so [open] must show it too. */
    .faq-item[open] .faq-a{display:block}
    .faq-item[open] .icon-plus{display:none}
    .faq-item[open] .icon-minus{display:inline-flex}
    .wpill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #E7DBC9;border-radius:999px;padding:10px 16px 10px 12px;font-family:var(--body);font-size:14.5px;font-weight:600;color:#2A2521;cursor:pointer;min-height:44px}
    .wpill:hover{border-color:#2A2521}
    .wpill.on{border-color:#530C8B;background:#530C8B;color:#fff;box-shadow:0 12px 30px -18px rgba(83,12,139,.6)}
    .fchrow{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#2A2521}

/* ---- phones and narrow tablets: stack, unstick, and give up the fixed compositions ---- */
@media(max-width:1200px){
  .flow-captions{width:auto!important;max-width:100%}
}
@media(max-width:900px){
  .g2 > div[style*="sticky"]{position:static!important}
  .hwwrap{max-width:none}
  .hwspine{display:none}
  .hwstep{grid-template-columns:1fr;row-gap:14px;margin-bottom:40px}
  .hwstep > div:first-child{order:2}
  .hwnum{order:1;justify-content:flex-start;padding-top:0}
  .hwnum span{box-shadow:none}
  .hwtext{padding:0;order:2}
  .hwtext.r{text-align:left}
  .hwtext.r p{margin-left:0}
  .hwstep > div:last-child{order:3}
  .hwcard{min-height:0}
  .deck4wrap{height:400px}
}
@media(max-width:1180px){
  .flow{width:auto!important;height:auto!important;display:flex;flex-direction:column;gap:10px;align-items:stretch}
  .flow svg{display:none}
  .flow > *{position:static!important;left:auto!important;top:auto!important}
  .flow .ftl{width:100%!important;max-width:320px;margin:0 auto}
  .flow .flab{text-align:center;margin-top:10px}
  .flow > div[style*="left:460px"]{width:100%!important;max-width:320px;margin:18px auto!important;height:auto!important;padding:22px 16px}
  .flow > div[style*="left:900px"]{width:100%!important;max-width:320px;margin:0 auto}
}
@media(max-width:700px){
  .fhead{height:320px;padding:22px 20px 0;overflow:hidden}
  .fmsg{min-height:0}
  .fart{transform:scale(.72);transform-origin:0 0;width:139%;margin-top:18px}
  .fart.v{transform:scale(.84);transform-origin:50% 0;width:119%;margin-left:-9.5%;margin-top:10px}
  .fhub{transform:scale(.6);transform-origin:0 0;margin:18px 0 0}
  .hwtext{order:2!important}
  .hwstep > div:not(.hwtext):not(.hwnum){order:3!important}
  .frow2{padding:7px 10px;font-size:13px}
  .frow2 .fmeta{display:none}
  .frow2:nth-child(n+5){display:none}
  .flow-captions > div{text-align:left!important}
  .fbody{padding:20px 22px 24px}
  .hwgrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .xwrap{max-width:none}
  .footer-wordmark{font-size:96px!important}
}
@media(max-width:600px){
  section.dark{padding-left:20px!important;padding-right:20px!important}
}
@media(max-width:900px){
  section.wrap,section > .wrap:not(.g2){padding-top:56px!important;padding-bottom:56px!important}
  #proof{padding-top:72px!important;padding-bottom:72px!important}
  .hwstep{margin-bottom:32px}
}

    .site-header{border-bottom:0}
/* ---- how-it-works: top section ---- */
    .hiw-top{padding:88px 40px 8px;max-width:1000px}
    .marketing .hiw-top-h1{margin-top:18px;font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.03em;color:#530C8B;max-width:20ch}
    .marketing .hiw-top-sub{margin-top:20px;font-size:18px;line-height:1.55;color:#6F655A;max-width:62ch}
    @media(max-width:900px){.hiw-top{padding:48px 24px 0}.marketing .hiw-top-sub{font-size:16px}}
/* ---- hero (light, direction D) ---- */
    .hero-light{position:relative;background:#F5EDE1;padding:64px 40px 48px;display:flex;flex-direction:column;align-items:center}
    .hero-col{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1100px}
    .marketing .hero-h1{margin-top:0;font-size:64px;font-weight:800;line-height:1.08;letter-spacing:-.03em;color:#2A2521}
    .marketing .hero-sub{margin-top:22px;max-width:600px;font-size:15.5px;line-height:1.55;color:#6F655A;text-wrap:balance}
    .hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
    .hero-cta{height:48px;padding:0 28px;font-size:14px}
    .hero-cta-demo{background:#fff}
    .mm-channels{display:flex;flex-wrap:wrap;gap:10px}
    .mm-go{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;border-radius:999px;border:1px solid #E7DBC9;background:#fff;font-family:var(--body);font-size:15px;font-weight:600;color:#2A2521;cursor:pointer;transition:border-color .2s,background .2s,color .2s,opacity .2s,transform .15s var(--ease)}
    .mm-go svg:last-child{margin-left:2px;opacity:.55}
    .mm-go:disabled{opacity:.42;cursor:not-allowed}
    .mm-go:not(:disabled):hover{border-color:#2A2521;transform:translateY(-1px)}
    .mm-go-wa:not(:disabled){border-color:#BFE6C8;background:#E9F8EC}
    .mm-go-wa:not(:disabled):hover{border-color:#25D366;background:#DDF4E3}
    .mm-go-sms:not(:disabled){border-color:#CFE7D8;background:#EEF8F2}
    .mm-go-sms:not(:disabled):hover{border-color:#34C759;background:#E4F4EA}
    .mm-hint{transition:opacity .2s}
    .mm-ready .mm-hint{opacity:0}
    .mm-sms{width:18px;height:18px;border-radius:5px;background:#34C759;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    /* The open card's countdown to the next one, timed by --hero-every, which
       the hero_tabs controller sets to its own interval. */
    @keyframes hero-sweep{to{transform:scaleX(1)}}
    /* ---- the scenario strip ----
       Five cards, each an area of the business, each carrying its own photo
       and its own conversation. The open one takes the room; the rest stand
       beside it with their names turned on their side, which is how an
       accordion says "there is more here" without a scrollbar.

       "Your area" is the anchor and keeps .hero-photo: the picker grows its
       panel out of that element, so it has to stay the one the zoom measures.
       Its width and margin come from the strip instead of its own rule. */
    .hero-deck{display:flex;align-items:stretch;gap:14px;width:1240px;max-width:100%;margin-top:52px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-left:0}
    .hero-deck::-webkit-scrollbar{display:none}
    .hero-card{position:relative;flex:0 0 88px;scroll-snap-align:start;height:500px;border-radius:24px;overflow:hidden;background:#E9E4DC;box-shadow:0 30px 70px -40px rgba(30,20,15,.5);cursor:pointer;border:0;padding:0;transition:flex-basis .5s var(--ease),box-shadow .4s ease}
    .hero-card.is-open{flex-basis:max(520px,calc(100% - 510px));cursor:default}
    .hero-card.hero-photo{width:auto;margin-top:0}
    .hero-deck .hero-photo-holder{margin-top:0}
    .hero-card:not(.is-open):hover{box-shadow:0 34px 74px -36px rgba(30,20,15,.62)}
    .hero-card:not(.is-open) .hero-photo-img{filter:saturate(.92)}
    .hero-card:not(.is-open) .hero-photo-scrim{background:linear-gradient(180deg,rgba(26,18,14,.58),rgba(26,18,14,.3) 46%,rgba(26,18,14,.48))}
    .hero-photo-img{transition:filter .4s ease}
    .hero-card:not(.is-open):hover .hero-photo-img{filter:none}
    .hero-card:focus-visible{outline:2px solid #DC6A34;outline-offset:3px}
    .hero-card-tag{position:absolute;top:18px;bottom:18px;left:0;right:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;pointer-events:none}
    .hero-card-go{display:none;flex-shrink:0;color:rgba(255,255,255,.78)}
    .hero-card-mark{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.26);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
    .hero-card-words{display:flex;flex-direction:column;gap:2px;min-width:0}
    .hero-card:not(.is-open) .hero-card-words{flex:1 1 auto;align-items:center}
    /* Says what the card watches, and only while it is open: a spine has no
       room for it and the sliver has to carry the name alone. */
    .hero-card-sub{display:none;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.78);text-shadow:0 1px 8px rgba(17,17,17,.55)}
    .hero-card.is-open .hero-card-sub{display:block}
    .hero-card-name{font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 8px rgba(17,17,17,.5);white-space:pre;word-break:keep-all;writing-mode:vertical-rl;flex:0 0 auto}
    .hero-card.is-open .hero-card-tag{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;left:26px;right:26px;bottom:auto}
    .hero-card.is-open .hero-card-name{writing-mode:horizontal-tb;font-size:16px}
    /* The shape of a drift, where a figure alone would not show one. Both
       ends are labelled, because bars without their numbers can say anything. */
    .hero-chart{display:block;margin-top:9px;padding:11px 12px 9px;border:1px solid #E7DBC9;border-radius:11px;background:#FBF6EE}
    /* Stretched to the bubble's width, so the stroke is told not to stretch
       with it. */
    .hero-chart-line{display:block;width:100%;height:66px}
    .hero-chart-axis{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:#9A8F81}
    .hero-chart-axis strong{color:#2A2521}
    /* Who it will ask, in the order it will ask them: the cascade's own
       queue, including who it is deliberately not texting. */
    .hero-queue{display:block;margin-top:9px;border:1px solid #E7DBC9;border-radius:11px;overflow:hidden;background:#FBF6EE}
    .hero-queue-row{display:flex;align-items:center;gap:9px;padding:7px 11px;border-bottom:1px solid #EFE6D6;font-size:12.5px}
    .hero-queue-no{width:17px;height:17px;border-radius:50%;background:#F7DCC6;color:#DC6A34;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .hero-queue-who{font-weight:600;color:#2A2521}
    .hero-queue-why{color:#9A8F81;margin-left:auto;text-align:right}
    .hero-queue-note{display:block;padding:7px 11px;font-size:11.5px;line-height:1.45;color:#9A8F81}
    /* A draft the owner can open before she approves it. Inside the bubble
       rather than beside it, because it is part of what the AM just said. */
    .hero-doc{display:flex;align-items:center;gap:10px;margin-top:9px;padding:9px 11px;border:1px solid #E7DBC9;border-radius:11px;background:#FBF6EE;text-decoration:none}
    .marketing .hero-doc,.marketing .hero-doc:hover{color:#2A2521}
    .hero-doc-mark{width:28px;height:28px;border-radius:8px;background:#F7DCC6;color:#DC6A34;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .hero-doc-body{min-width:0;flex:1}
    .hero-doc-name{display:block;font-size:12.5px;font-weight:600;color:#2A2521}
    .hero-doc-meta{display:block;font-size:11px;color:#9A8F81;margin-top:1px}
    .hero-doc-open{font-size:12px;font-weight:600;color:#DC6A34;flex-shrink:0}
    .hero-card-body{position:relative;z-index:1;height:100%;display:flex;align-items:center;padding:64px 24px 28px;opacity:0;pointer-events:none;transition:opacity .3s ease}
    .hero-card.is-open .hero-card-body{opacity:1;pointer-events:auto;transition-delay:.18s}
    /* The auto-advance shown rather than hidden: a hairline crossing the open
       card for exactly as long as it holds the room. */
    .hero-card.is-open::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;z-index:4;background:#DC6A34;transform:scaleX(0);transform-origin:left;animation:hero-sweep var(--hero-every,7s) linear forwards}
    @media(prefers-reduced-motion:reduce){.hero-card.is-open::after{display:none}.hero-card{transition:none}}
    .hero-photo{position:relative;width:1000px;max-width:100%;height:500px;margin-top:52px;border-radius:24px;overflow:hidden;background:#E9E4DC;box-shadow:0 30px 70px -40px rgba(30,20,15,.5)}
    /* Three crops per card, because a card is cut three different ways: wide
       in the deck, an 88px spine beside it, and a full-width row on a phone.
       A face that sits in the band of one is nowhere near the band of
       another, so each card carries the positions it needs and falls back to
       the open one where it does not. */
    .hero-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--open,72% 55%)}
    .hero-card:not(.is-open) .hero-photo-img{object-position:var(--shut,var(--open,72% 55%))}
    .hero-photo-scrim{position:absolute;inset:0;background:radial-gradient(ellipse 64% 78% at 50% 54%,rgba(30,22,18,.7),rgba(30,22,18,.42) 55%,rgba(30,22,18,0) 100%)}
    .hero-card .evhead{color:#fff;text-shadow:0 1px 8px rgba(17,17,17,.6)}
    .hero-card .stamp{color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(17,17,17,.6)}
    .hero-card .stamp .who{color:#fff}
    .hero-card .avatar-am{background:#fff;box-shadow:0 10px 24px -12px rgba(30,20,15,.6)}
    .proof-strip{margin-top:36px;display:flex;justify-content:center}
    .proof-strip .hero-strip{margin-top:0}
    .hero-strip{width:760px;max-width:100%;margin-top:36px;display:flex;align-items:center;gap:18px;padding:14px 14px 14px 18px;border:1px solid #E7DBC9;border-radius:14px;background:#fff;box-shadow:0 10px 30px -22px rgba(30,20,15,.35)}
    .hero-strip-icons{display:inline-flex;align-items:center;flex-shrink:0}
    .hero-strip-icon{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
    .hero-strip-icon + .hero-strip-icon{margin-left:-8px;box-shadow:-2px 0 0 #fff}
    .hero-strip-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
    .hero-strip-text strong{font-size:13.5px;font-weight:600;color:#2A2521}
    .hero-strip-text span{font-size:11.5px;line-height:1.4;color:#6F655A}
    .hero-strip-btn{flex-shrink:0;height:40px;padding:0 22px;font-size:13px}
    .hero-logos-label{margin-top:56px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#9A8F81;text-align:center}
    .hero-logos{width:1000px;max-width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding:22px 30px 0}
    .hero-logos img{object-fit:contain;opacity:.85}
    .hero-quote{display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 0 8px;gap:28px;max-width:960px}
    .hero-quote blockquote{margin:0;font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.25;letter-spacing:-.025em;color:#530C8B;text-wrap:balance}
    .hero-quote blockquote span{color:#DC6A34}
    .hero-quote-who{display:flex;align-items:center;gap:14px;text-align:left}
    .hero-quote-photo{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #fff;box-shadow:0 6px 18px rgba(60,40,20,.14)}
    .hero-quote-photo img{width:100%;height:100%;object-fit:cover;display:block}
    .hero-quote-name{font-size:15px;font-weight:600;color:#2A2521}
    .hero-quote-role{font-size:13.5px;color:#6F655A;margin-top:3px}
    .hero-quote-links{display:flex;align-items:center;gap:18px}
    .marketing .hero-quote-story,.marketing .hero-quote-story:hover{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#DC6A34}
    .marketing .hero-quote-in,.marketing .hero-quote-in:hover{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;background:#530C8B;color:#fff;font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.02em}
    @media(max-width:900px){
      .hero-light{padding:36px 24px 40px}
      .hero-h1{font-size:40px;line-height:1.1}
      .hero-sub{font-size:15px}
      .hero-ctas{flex-direction:column;width:100%}
      .hero-cta{width:100%;height:50px;justify-content:center}
      /* Without this the five tabs squeeze to fit and clip their own labels
         mid-word, which reads as broken rather than as a strip you can push. */
      .hero-photo{height:540px;border-radius:22px;margin-top:44px}
      /* A phone has room for one card, so the deck stops being a deck: the
         open one keeps its photo and its conversation, and the other four
         become rows with their names the right way up. Five names on screen
         at once beats a 52px sliver the reader has to interpret. */
      .hero-deck{flex-direction:column;width:100%;margin-top:44px;gap:9px;overflow:visible;scroll-snap-type:none}
      .hero-card{flex:0 0 auto;height:58px;border-radius:14px;scroll-snap-align:none}
      .hero-card.is-open{flex-basis:auto;height:580px;border-radius:20px;max-width:none;min-width:0}
      .hero-card:not(.is-open) .hero-photo-scrim{background:rgba(26,18,14,.54)}
      /* A closed row is cut for height, not width, so it wants its own. */
      .hero-card:not(.is-open) .hero-photo-img{object-position:var(--row,var(--shut,var(--open,72% 55%)))}
      .hero-card-tag{flex-direction:row;align-items:center;justify-content:flex-start;gap:11px;top:0;bottom:0;left:14px;right:14px}
      .hero-card-name{writing-mode:horizontal-tb;font-size:14.5px}
      .hero-card:not(.is-open) .hero-card-words{flex:0 1 auto;align-items:flex-start}
      .hero-card:not(.is-open) .hero-card-go{display:block;margin-left:auto}
      .hero-card.is-open .hero-card-tag{top:15px;bottom:auto;left:16px;right:16px}
      .hero-card.is-open .hero-card-name{font-size:15px}
      .hero-card-body{align-items:flex-start;padding:62px 14px 20px}
      .hero-card .xpanel{max-width:none}
      .hero-strip{flex-direction:column;align-items:stretch;gap:16px;padding:18px;border-radius:16px}
      .hero-strip > .hero-strip-icons{align-self:flex-start}
      .hero-strip-btn{justify-content:center;height:44px}
      .hero-logos-label{margin-top:40px}
      .hero-logos{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));justify-items:center;gap:22px 16px;padding:18px 0 0}
      .hero-logos img{max-width:100%;width:auto;height:auto!important;max-height:30px;object-fit:contain}
      .hero-quote{padding:48px 0 4px;gap:24px}
      .hero-quote blockquote{font-size:28px;line-height:1.3}
    }
    .xpanel{max-width:470px;margin:0 auto;width:100%}
    .xscene{display:none}
    .xscene.on{display:block}
    .xstack{display:flex;flex-direction:column;gap:10px}
    .hero-card .xm{opacity:0;transform:translateY(10px)}
    .hero-card.is-open .xm{animation:hero-msg .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
    @keyframes hero-msg{to{opacity:1;transform:none}}
    .hero-card .says{position:relative}
    .think-over{position:absolute;inset:0;padding:12px 13px;display:flex;flex-direction:column;gap:7px;justify-content:center;background:inherit;border-radius:inherit}
    .hero-card.is-open .think-over{animation:think-out .01s linear forwards;animation-delay:calc(var(--d,0s) + .95s)}
    @keyframes think-out{to{opacity:0;visibility:hidden}}
    @media(prefers-reduced-motion:reduce){.hero-card .xm{opacity:1;transform:none;animation:none!important}.think-over{display:none}}

    /* ---- the hero's centre picker (Sept 2026) ---- */
    /* Above the photo: both are positioned and the photo comes later in the
       DOM, so without this the results list is painted behind the tabs and
       the worked example. */
    .hero-find{position:relative;z-index:5;scroll-margin-top:104px;width:100%;max-width:560px;margin-top:30px;display:flex;flex-direction:column;align-items:stretch}
    .hero-find-bar{position:relative;z-index:2;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E7DBC9;border-radius:999px;padding:7px 7px 7px 22px;box-shadow:0 14px 34px -24px rgba(30,20,15,.45);transition:border-color .2s,box-shadow .2s}
    .hero-find-bar:focus-within{border-color:#DC6A34;box-shadow:0 0 0 3px #F7DCC6,0 14px 34px -24px rgba(30,20,15,.45)}
    .hero-find-bar svg{flex-shrink:0}
    .hero-find-bar input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:var(--body);font-size:16px;color:#2A2521}
    .hero-find-bar input::placeholder{color:#9A8F81}
    .hero-find-go{height:48px;padding:0 26px;font-size:14.5px;flex-shrink:0;white-space:nowrap}
    .hero-find-list{position:absolute;z-index:1;top:52px;left:0;right:0;padding-top:14px;background:#fff;border:1px solid #E7DBC9;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px -34px rgba(30,20,15,.5);text-align:left;animation:panelin .22s var(--ease)}
    .hero-find-row{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #EFE6D6;padding:11px 22px;cursor:pointer;font-family:var(--body);min-height:44px}
    .hero-find-row:hover,.hero-find-row.on{background:#FBF6EE}
    .hero-find-name{font-size:14.5px;font-weight:600;color:#2A2521}
    .hero-find-where{font-size:12.5px;color:#9A8F81}
    .hero-find-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 22px 13px;font-size:12.5px;color:#9A8F81}
    .hero-find-fallback{font-weight:600;color:#DC6A34}
    .hero-find-none{display:flex;flex-direction:column;gap:4px;padding:14px 22px 16px}
    .hero-find-none strong{font-size:14.5px;font-weight:600;color:#2A2521}
    .hero-find-none span{font-size:12.5px;line-height:1.5;color:#9A8F81}
    .hero-find-note{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-size:12.5px;color:#9A8F81}
    /* The price is the first word under the picker, and it carries a shade
       more weight than the conveniences beside it. */
    .hero-find-note strong{color:#6F655A;font-weight:600}
    .hero-find-dot{width:1px;height:12px;background:#E7DBC9}
    .hero-find-demo{border:0;background:none;padding:0;cursor:pointer;font-family:var(--body);font-size:13.5px;font-weight:600;color:#DC6A34}

    /* ---- the pick: the hero's own photo zooms into position ----
       No second panel and no modal. .hero-photo is transformed to the
       centre of the viewport, its tabs and worked examples fade out, and
       the live layer inside it fades in. Clearing the transform sends it
       home, which is why the element never leaves the document flow. */
    .hero-photo{transition:top .52s var(--ease),left .52s var(--ease),width .52s var(--ease),height .52s var(--ease),box-shadow .52s var(--ease)}
    /* Holds the photo's place in the page while the photo itself is fixed,
       so nothing shuffles behind the dimmer. */
    .hero-photo-holder{flex-shrink:0;max-width:100%;margin-top:52px}
    /* Landing, the photo does not become the reading surface — it becomes the
       panel's HEADER, and the conversation sits on the companion's own cream
       underneath it. The room is still the thing that flew in; it just gets
       out of the way of the words. */
    .hero-photo.is-focused{z-index:70;background:#FBF6EE;box-shadow:0 50px 110px -34px rgba(20,8,40,.55)}
    .hero-photo-img,.hero-photo-scrim{transition:height .5s var(--ease)}
    .hero-photo.is-focused .hero-photo-img{object-position:50% 40%}
    .hero-photo.is-focused .hero-photo-img,.hero-photo.is-focused .hero-photo-scrim{inset:0 0 auto 0;height:104px}
    .hero-photo .hero-card-tag,.hero-photo .hero-card-body{transition:opacity .26s ease}
    .hero-photo.is-focused .hero-card-tag,.hero-photo.is-focused .hero-card-body{opacity:0;pointer-events:none}
    .hero-photo-scrim{transition:background .5s ease}
    /* Only as much as the header's own words need. */
    .hero-photo.is-focused .hero-photo-scrim{background:linear-gradient(180deg,rgba(30,22,18,.12),rgba(30,22,18,.62))}
    .hero-dim{position:fixed;inset:0;z-index:60;background:rgba(30,20,15,.68);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .42s ease}
    .hero-dim.is-on{opacity:1}
    body.hero-focused{overflow:hidden}

    /* the live layer, where the scenes were */
    .hero-live{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;opacity:0;transition:opacity .3s ease .18s}
    .hero-live.is-on{opacity:1}
    .hero-live[hidden],.hero-live-ask[hidden],.hero-dim[hidden]{display:none}
    .hero-live-head{flex-shrink:0;height:104px;display:flex;align-items:flex-end;gap:12px;padding:0 24px 14px}
    .hero-live-mark{width:34px;height:34px;border-radius:50%;background:#F7DCC6;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .hero-live-who{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
    .hero-live-who strong{font-size:15px;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(17,17,17,.5)}
    .hero-live-who span{font-size:12px;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(17,17,17,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hero-live-x{width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
    .hero-live-x:hover{border-color:rgba(255,255,255,.6);color:#fff}
    .hero-live-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:#FBF6EE;scrollbar-width:thin;scrollbar-color:#E7DBC9 transparent}
    .hero-live-scroll::-webkit-scrollbar{width:8px}
    .hero-live-scroll::-webkit-scrollbar-thumb{background:#E7DBC9;border-radius:99px;border:2px solid #FBF6EE}
    .hero-live-scroll::-webkit-scrollbar-track{background:transparent}
    /* A conversation grows from the bottom. Without this the exchange sits
       at the top of a landscape panel with a void under it while it reads. */
    /* Bottom-anchored by pushing the FIRST child down, not by
       justify-content:flex-end — that spills overflow out of the top of a
       scroll container, where scrollTop cannot reach it, so the earliest
       messages become unreachable the moment the exchange gets long. */
    /* The dock, in owners.css's own values — same dot, same 3px ticks with
       their travelling delay, so it is the companion's strip and not a
       drawing of one. */
    .hero-live-dockbar{display:flex;align-items:center;gap:9px;padding:10px 24px 9px}
    .hero-live-dock[hidden]{display:none}
    .hero-live-dockbar .dock-dot{width:7px;height:7px;border-radius:999px;flex-shrink:0;background:#2E9E6B}
    .hero-live-dockbar .dock-dot.is-moving{background:#DC6A34;animation:mkpulse 1.7s ease-out infinite}
    /* A liveness mark, slower and green: it says somebody is still on it,
       never that another check has run. */
    .hero-live-dockbar .dock-dot.is-watching{background:#2E9E6B;animation:mkpulse 3.4s ease-out infinite}
    .hero-live-dockhead{flex-shrink:0;font-size:12.5px;font-weight:700;color:#2A2521}
    .hero-live-docklive{flex:1;min-width:0;font-size:12px;color:#6F655A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s ease}
    .hero-live-docklive.is-turning{opacity:0}
    .hero-live-docklive{transition:opacity .24s ease,color .3s ease}
    .hero-live-spark{display:flex;align-items:flex-end;gap:2px;height:14px;flex-shrink:0}
    .hero-live-tick{width:3px;height:3px;border-radius:1px;background:#E7DBC9;display:inline-block;transition:height .55s var(--ease) calc(var(--i,0)*28ms),background .4s var(--ease)}
    .hero-live-tick.is-now{background:#DC6A34}
    .hero-live-dockcount{flex-shrink:0;font-size:11px;color:#9A8F81}
    @media(prefers-reduced-motion:reduce){.hero-live-tick{transition:none}.hero-live-dockbar .dock-dot{animation:none}}

    /* The chat streams in the body and slides away under the top edge; the
       question lives in the FOOTER. The mask is what makes messages go
       UNDER the edge rather than stop at it. */
    /* One column by default — the phone's layout is the plain one, and the
       split is what a wide panel adds. */
    .hero-live-split{flex:1;min-height:0;display:flex}
    .hero-live-rail{display:none}
    .hero-live-split > .hero-live-stream{flex:1;min-width:0}
    @media(min-width:900px){
      /* The left-hand side IS the map: no card around it, no padding, the
         tiles running to the panel's own edges. */
      .hero-live-rail{display:flex;width:44%;min-width:0;overflow:hidden;border-right:1px solid #E7DBC9;background:#F1EBE1;position:relative}
      .hero-live-split .hero-live-rail > *{flex:1;min-width:0;margin:0;border:0;border-radius:0;box-shadow:none;background:none}
      .hero-live-split .hero-live-rail .hero-live-map{height:100%;border:0;border-radius:0}
      .hero-live-rail .hero-live-skel-map{height:100%}
      .hero-live-rail .hero-live-skel-line{display:none}
      .hero-live-rail .hero-live-cardcite{position:absolute;left:0;right:0;bottom:0;padding:8px 16px 10px;background:linear-gradient(180deg,rgba(241,235,225,0),rgba(241,235,225,.92) 45%)}
      .hero-live-flow{padding:16px 20px 14px}
      /* The strip belongs to the work, so on a wide panel it sits under the
         work's own column. Taken out of the flow rather than given a row of
         its own: a row would leave an empty band under the conversation,
         which now runs to the panel's floor. */
      .hero-live-foot{position:absolute;left:0;bottom:0;width:44%;z-index:4;border-top:0}
      .hero-live-dockbar{border-top:1px solid #E7DBC9;border-right:1px solid #E7DBC9;background:#FBF6EE}
      .hero-live-split .hero-live-rail .hero-live-cardcite{bottom:41px}
    }
    .hero-live-stream{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:0;scrollbar-width:thin;scrollbar-color:#E7DBC9 transparent;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%);mask-image:linear-gradient(180deg,transparent,#000 14%)}
    .hero-live-flow{display:flex;flex-direction:column;gap:9px;margin-top:auto;padding:0 20px 14px}

    @keyframes amfadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    .hero-live-msg{display:flex;gap:9px;align-items:flex-start;animation:amfadein .45s var(--ease)}
    .hero-live-av{width:24px;height:24px;border-radius:50%;background:#F7DCC6;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .hero-live-av img{height:11px;display:block}
    .hero-live-says{flex:1;min-width:0;background:#fff;border:1px solid #E7DBC9;border-radius:4px 14px 14px 14px;padding:10px 13px;font-size:13px;line-height:1.5;color:#2A2521}
    .hero-live-flow .hero-live-step,.hero-live-flow .hero-live-card{margin-left:33px}

    /* The AM composing — the shimmer IS the AM thinking. */
    .hero-live-working{display:flex;gap:9px;align-items:flex-start;animation:amfadein .4s var(--ease)}
    .hero-live-workbody{flex:1;min-width:0;padding-top:4px;display:flex;flex-direction:column;gap:10px}
    .hero-live-steps{display:flex;flex-direction:column;gap:8px}
    .hero-live-steps:empty{display:none}
    .hero-live-working.is-settled .hero-live-verb{-webkit-text-fill-color:#9A8F81;animation:none}
    .hero-live-working.is-settled .hero-live-av{animation:none}
    .hero-live-av.is-pulse{animation:mkpulse 1.6s ease-in-out infinite}
    @keyframes mkpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.75}}
    .hero-live-verb{font-size:13px;font-weight:600;background:linear-gradient(90deg,#9A8F81 35%,#2A2521 50%,#9A8F81 65%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:amshimmer 2s linear infinite}
    @keyframes amshimmer{from{background-position:120% 0}to{background-position:-120% 0}}

    .hero-live-foot{flex-shrink:0;background:#FBF6EE;border-top:1px solid #E7DBC9}
    .hero-live-dockbar{display:flex;align-items:center;gap:9px;padding:10px 24px}
    .hero-live-dockbar[hidden]{display:none}

    /* The ask, as the AM's last message: its words in the bubble, and the
       card under it is what saying yes looks like. White because in this
       product white is the surface you act on. */
    .hero-live-invite .hero-live-says{display:flex;flex-direction:column;gap:5px}
    .hero-live-invite .hero-live-says strong{font-size:14px;font-weight:700;color:#2A2521}
    .hero-live-invite .hero-live-says span{font-size:13px;line-height:1.5;color:#6F655A}
    .hero-live-invitebody{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
    .hero-live-ask{background:#fff;border:1px solid #E7DBC9;border-radius:16px;padding:14px 16px 15px;display:flex;flex-direction:column;gap:8px}
    .hero-live-asklabel{font-size:12.5px;font-weight:600;color:#2A2521}
    .hero-live .askbar{display:flex;align-items:center;gap:9px;border:1px solid #E7DBC9;background:#FBF6EE;border-radius:12px;padding:0 14px;min-height:48px}
    .hero-live .askbar input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:var(--body);font-size:16px;color:#2A2521}
    .hero-live .askbar input::placeholder{color:#9A8F81}
    .hero-live-ask.mm-ready .askbar{border-color:#DC6A34;box-shadow:0 0 0 3px rgba(247,220,198,.5);background:#fff}
    .hero-live-flag{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
    .hero-live-flag svg:first-child{border-radius:2px}
    .askbar-cc{font-size:15px;font-weight:600;color:#2A2521;flex-shrink:0}
    .hero-live-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;border-radius:999px;font-family:var(--body);font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:opacity .2s,background .2s}
    .hero-live-go.is-wa{background:#530C8B;color:#fff}
    .hero-live-go.is-wa:not(:disabled):hover{background:#45087a}
    .hero-live-go.is-sms{background:#fff;border-color:#E7DBC9;color:#2A2521}
    .hero-live-go.is-sms:not(:disabled):hover{border-color:#C9BDAC}
    .hero-live-go.is-wa svg:last-child{opacity:.7}
    /* The ask, sent: the field and buttons recede under the AM's reply
       rather than vanishing, so the number stays readable if it was wrong. */
    .hero-live-ask.is-sending .hero-live-go{opacity:.55;pointer-events:none}
    .hero-live-ask.is-sent{opacity:.45;pointer-events:none}
    .hero-live-says .hero-live-link{margin-top:8px;text-decoration:none;width:auto;padding:0 18px;min-height:38px;font-size:13px}
    .hero-live-fine{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.45;color:#9A8F81;margin-top:1px}
    .hero-live-fine svg{flex-shrink:0;margin-top:1px}
    /* The price line reads a shade louder than the privacy line under it:
       it is the answer to the question they are actually asking. */
    .hero-live-free{color:#6F655A;font-weight:600}
    .hero-live-fine + .hero-live-fine{margin-top:5px}

    @media(prefers-reduced-motion:reduce){.hero-live-verb{animation:none;-webkit-text-fill-color:#6F655A}.hero-live-av.is-pulse{animation:none}.hero-live-tick{transition:none}.hero-live-dockbar .dock-dot{animation:none}}

    /* The card's own shape while it is being drawn — same box, same radius,
       so nothing jumps when the real one lands. */
    .hero-live-skeleton{padding:0;overflow:hidden}
    .hero-live-skel-map{display:block;height:152px;background:linear-gradient(90deg,#F1EBE1 0%,#FBF6EE 40%,#F1EBE1 80%);background-size:220% 100%;animation:shimmer 1.2s linear infinite}
    .hero-live-skel-line{display:block;height:9px;width:52%;margin:12px 14px 14px;border-radius:5px;background:linear-gradient(90deg,#EFE6D6 0%,#F7DCC6 40%,#EFE6D6 80%);background-size:220% 100%;animation:shimmer 1.2s linear infinite}
    @media(prefers-reduced-motion:reduce){.hero-live-skel-map,.hero-live-skel-line{animation:none}}
    .hero-live-card{margin-top:10px;background:#fff;border:1px solid #E7DBC9;border-radius:14px;overflow:hidden;animation:amfadein .5s var(--ease);box-shadow:0 14px 34px -26px rgba(30,20,15,.5)}
    .hero-live-cardhead{padding:11px 16px;border-bottom:1px solid #E7DBC9;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9A8F81}
    .hero-live-map{position:relative;height:152px;margin:0;border-radius:0;border:0;border-radius:10px;overflow:hidden;background:#F5EDE1;border:1px solid #E7DBC9}
    .hero-live-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .hero-live-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:1;border:1.5px dashed rgba(154,143,129,.55);border-radius:50%;pointer-events:none}
    .hero-live-ringkm{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);font-size:10px;color:#9A8F81;background:rgba(245,237,225,.85);padding:1px 7px;border-radius:999px}
    .hero-live-dot{opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity .28s var(--ease),transform .28s var(--ease);position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid #9A8F81;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.18)}
    .hero-live-dot.is-in{opacity:1;transform:translate(-50%,-50%) scale(1)}
    @media(prefers-reduced-motion:reduce){.hero-live-dot{transition:none}}
    .hero-live-anchor{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:rgba(220,106,52,.25);display:flex;align-items:center;justify-content:center}
    .hero-live-anchor span{width:13px;height:13px;border-radius:4px;background:#DC6A34;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
    .hero-live-cardlegend{display:flex;gap:14px;flex-wrap:wrap;padding:9px 16px 0}
    .hero-live-key{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#6F655A}
    .hero-live-key span{width:9px;height:9px}
    .hero-live-key .is-you{border-radius:3px;background:#DC6A34}
    .hero-live-key .is-them{border-radius:50%;background:#fff;border:2px solid #9A8F81}
    .hero-live-cardcite{padding:8px 14px 10px;font-size:11px;font-style:italic;color:#9A8F81}
    .hero-live-working{display:flex;gap:9px;align-items:flex-start;animation:amfadein .4s var(--ease)}
    .hero-live-working.is-settled .hero-live-verb{display:none}
    .hero-live-working.is-settled .hero-live-av{animation:none}
    .hero-live-workbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding-top:3px}
    .hero-live-verb{font-size:13.5px;font-weight:600;background:linear-gradient(90deg,#9A8F81 35%,#2A2521 50%,#9A8F81 65%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:amshimmer 2s linear infinite}
    @keyframes amshimmer{from{background-position:120% 0}to{background-position:-120% 0}}
    /* A grid so a result that will not fit beside its label drops UNDER it
       rather than back to the chip's margin, where the leading dash reads
       as a bullet for something else. */
    .hero-live-step{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:baseline;gap:3px 8px;min-width:0;animation:amfadein .4s var(--ease)}
    .hero-live-chip{grid-column:1;grid-row:1;width:20px;height:20px;border-radius:7px;background:#F7DCC6;display:flex;flex-shrink:0;position:relative;align-self:flex-start}
    .hero-live-chip::after{content:'';position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;border:2px solid #DC6A34;border-top-color:transparent;animation:hspin .8s linear infinite}
    .hero-live-step.is-done .hero-live-chip{background:#D7EEE2}
    .hero-live-result{grid-column:2;font-size:12.5px;color:#6F655A;animation:amfadein .3s var(--ease)}
    .hero-live-result::before{content:'— ';color:#C9BDAC}
    .hero-live-step.is-done .hero-live-chip::after{width:9px;height:5px;border:2px solid #2E9E6B;border-top:0;border-right:0;border-radius:0;transform:translateY(-1px) rotate(-45deg);animation:none}
    /* Not flex:1 — a growing label shoves its own result to the far side of
       the row, and the two read as unrelated. They sit together and wrap. */
    .hero-live-steptext{grid-column:2;min-width:0;font-size:12.5px;font-weight:600;color:#2A2521}
    .hero-live-step.is-done .hero-live-steptext{font-weight:400;color:#6F655A}

    @media(max-width:640px){
      .hero-find-bar{flex-wrap:wrap;border-radius:20px;padding:12px 14px;gap:8px}
      .hero-find-bar input{order:1;flex:1 1 auto}
      .hero-find-go{order:2;width:100%;justify-content:center}
      .hero-find-list{top:auto;position:static;margin-top:10px;padding-top:0}
      .hero-find-note{flex-wrap:wrap;justify-content:center}
      .hero-live-flow{padding:16px 18px 18px}
      .hero-live-head{padding:0 18px 12px}
      }
    @media(prefers-reduced-motion:reduce){
      .hero-photo,.hero-dim,.hero-live,.hero-photo-scrim{transition:none}
      .hero-live-msg,.hero-live-step,.hero-live-working{animation:none}
      .hero-live-verb{animation:none;-webkit-text-fill-color:#fff}
      .hero-live-av.is-pulse{animation:none}
      .hero-live-chip::after{animation:none}
    }

    /* ---- the "noticed this week" pill (Sept 2026) ----
       Real, dated, national facts in the bottom-left corner. Brand orange with
       white words (founder call, 14 Sep 2026). Under the sticky header (50) and
       the picker's dimmer (60); dialogs sit in the top layer above both. It
       rests as one line, and opens upward into the whole sentence on hover or
       tap. The dot is still: these are dated facts, not live ones. */
    .happening{position:fixed;left:22px;bottom:22px;z-index:40;max-width:calc(100% - 44px);font-family:var(--body);opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
    .happening.is-in{opacity:1;transform:none}
    .happening[hidden]{display:none}
    .happening-pill{display:inline-flex;align-items:center;gap:10px;max-width:400px;min-height:44px;box-sizing:border-box;padding:10px 18px 10px 16px;border:1px solid #DC6A34;border-radius:999px;background:#DC6A34;color:#fff;font-family:var(--body);text-align:left;cursor:pointer;box-shadow:0 14px 34px -20px rgba(30,20,15,.55);transition:background .2s,border-color .2s}
    .happening-pill:hover{background:#c85c28;border-color:#c85c28}
    .happening-pill:focus-visible,.happening-stop:focus-visible,.happening-go:focus-visible{outline:2px solid #530C8B;outline-offset:3px}
    .happening-dot{width:7px;height:7px;border-radius:999px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25);flex-shrink:0}
    .happening-headline{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
    .happening-rule{width:1px;height:12px;background:rgba(255,255,255,.35);flex-shrink:0}
    .happening-short{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.8);white-space:nowrap}
    .happening-panel{display:none;position:relative;width:368px;max-width:100%;box-sizing:border-box;padding:14px 44px 4px 16px;border-radius:18px;background:#DC6A34;color:#fff;box-shadow:0 22px 48px -26px rgba(30,20,15,.55)}
    .happening.is-open .happening-panel{display:block;animation:panelin .22s var(--ease)}
    .happening.is-open .happening-pill{display:none}
    .happening-body{display:flex;gap:10px;align-items:flex-start}
    .happening-body .happening-dot{margin-top:7px}
    .happening-copy{flex:1;min-width:0}
    .happening-text{margin:0;font-size:14px;line-height:1.5;text-wrap:pretty;cursor:default}
    .happening-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 10px;margin-top:6px}
    .happening-source{font-size:11px;font-style:italic;color:rgba(255,255,255,.8)}
    .marketing .happening-go,.marketing .happening-go:hover{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:13px;font-weight:600;color:#fff;text-decoration:none}
    .happening-stop{position:absolute;top:0;right:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:none;color:rgba(255,255,255,.75);cursor:pointer}
    .happening-stop:hover{color:#fff}
    /* The picker takes the room while it is open. */
    body.hero-focused .happening{opacity:0;visibility:hidden;pointer-events:none}
    @media(max-width:640px){
      .happening{left:12px;bottom:12px;max-width:calc(100% - 24px)}
      .happening.is-open{right:12px}
      .happening-panel{width:auto}
    }
    @media(prefers-reduced-motion:reduce){
      .happening{transform:none;transition:opacity .3s ease}
      .happening.is-open .happening-panel{animation:none}
    }