:root{
  --royal-950:#07142F;--royal-900:#0D2350;--royal-800:#153469;--royal-700:#1E4894;
  --sky-500:#3E8FD8;--sky-400:#6BB0E8;--sky-200:#C4DFF6;
  --cream:#FBF9F4;--sand:#F1ECE1;--sand-deep:#E5DCCA;
  --copper:#C06A34;--copper-deep:#A35424;--amber:#E9B166;
  --ink:#1B2330;--stone-txt:#5A6372;--hairline:#E3DDD0;--blue-line:rgba(233,241,251,.16);
  --r-lg:28px;--r-md:18px;
  --shadow-soft:0 24px 60px -28px rgba(7,20,47,.45);
  --shadow-card:0 14px 40px -18px rgba(7,20,47,.25);
  --maxw:1180px;--ease:cubic-bezier(.22,.9,.28,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,.serif{font-family:'Fraunces',Georgia,serif;font-weight:520;line-height:1.06;letter-spacing:-.015em;font-variation-settings:"opsz" 72}
h1{font-size:clamp(2.5rem,5.4vw,4.3rem)}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}
h3{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:1.16rem}
em.tone{font-style:italic;color:var(--copper);font-weight:560}
.frame.royal em.tone,.cta-band em.tone{color:var(--amber)}
.lede{font-size:1.13rem;color:var(--stone-txt);max-width:56ch}
.frame.royal .lede{color:rgba(233,241,251,.78)}

.stamp{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);display:inline-flex;align-items:center;gap:.65rem;margin-bottom:1.1rem}
.stamp::before{content:"";width:22px;height:1px;background:var(--copper)}
.frame.royal .stamp,.cta-band .stamp{color:var(--amber)}
.frame.royal .stamp::before,.cta-band .stamp::before{background:var(--amber)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
section{padding:92px 0}
.band-head{max-width:640px}
.section-head{max-width:700px;margin-bottom:3.2rem}
.frame,.cta-band{max-width:calc(var(--maxw) + 48px);margin:0 auto;border-radius:var(--r-lg);position:relative;overflow:hidden}
.frame{padding:84px 20px}
.frame-outer{padding:0 20px}
.frame.royal{background:linear-gradient(158deg,var(--royal-800) 0%,var(--royal-950) 100%);color:var(--cream)}
.frame.royal::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--sky-500);filter:blur(120px);opacity:.28;top:-220px;right:-140px;pointer-events:none}
.frame.sand{background:linear-gradient(165deg,var(--sand) 0%,var(--sand-deep) 100%)}
.frame.sky{background:linear-gradient(168deg,#EAF3FC 0%,#DBE9F8 100%)}

.site-header{position:sticky;top:0;z-index:80;background:rgba(251,249,244,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--hairline)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-family:'Fraunces',serif;font-weight:560;font-size:1.26rem;color:var(--royal-900);white-space:nowrap}
.logo img{height:38px;width:38px;min-width:38px;border-radius:10px;object-fit:cover}
.logo span{color:var(--copper)}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--stone-txt);transition:color .15s}
.nav a:hover,.nav a:focus-visible{color:var(--royal-900)}
.nav a.is-active{color:var(--copper)}
.nav-toggle{display:none;background:none;border:1px solid var(--hairline);border-radius:10px;padding:.45rem .7rem;font-size:1.05rem;cursor:pointer;color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:600;font-size:1rem;padding:.95rem 1.9rem;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.btn-copper{background:var(--copper);color:var(--cream)}
.btn-copper:hover{background:var(--copper-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(192,106,52,.55)}
.btn-royal{background:var(--royal-900);color:var(--cream)}
.btn-royal:hover{background:var(--royal-700);transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--royal-900);border-color:rgba(13,35,80,.28)}
.btn-line:hover{border-color:var(--royal-900);transform:translateY(-2px)}
.frame.royal .btn-line,.cta-band .btn-line{color:var(--cream);border-color:var(--blue-line)}
.frame.royal .btn-line:hover,.cta-band .btn-line:hover{border-color:var(--cream)}
.btn-amber{background:var(--amber);color:var(--royal-950)}
.btn-amber:hover{background:#F2C083;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(233,177,102,.6)}
.btn-lg{padding:1.12rem 2.3rem;font-size:1.05rem}

.hero{position:relative;padding:84px 0 108px;overflow:hidden}
.aurora{position:absolute;inset:0;pointer-events:none;z-index:0}
.aurora i{position:absolute;border-radius:50%;filter:blur(95px);animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:560px;height:560px;background:var(--sky-400);opacity:.42;top:-200px;right:-130px}
.aurora i:nth-child(2){width:470px;height:470px;background:var(--amber);opacity:.24;bottom:-230px;left:-150px;animation-delay:-9s}
.aurora i:nth-child(3){width:380px;height:380px;background:var(--sky-200);opacity:.55;top:26%;left:36%;animation-delay:-17s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,-40px) scale(1.12)}}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.3rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.9rem}
.chip{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(13,35,80,.16);background:rgba(255,255,255,.6);border-radius:999px;padding:.4rem .9rem;color:var(--stone-txt)}
.frame.royal .chip{background:rgba(233,241,251,.08);border-color:var(--blue-line);color:rgba(233,241,251,.78)}

.photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);background:linear-gradient(150deg,var(--royal-800),var(--royal-950));position:relative}
.photo img{width:100%;height:100%;object-fit:cover}
.kenburns img{animation:kenburns 24s ease-in-out infinite alternate;transform-origin:center}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}

.collage{position:relative;padding-bottom:40px;padding-right:28px}
.collage .main{aspect-ratio:16/10}
.collage .inset{position:absolute;right:0;bottom:0;width:44%;border-radius:20px;overflow:hidden;border:6px solid var(--cream);box-shadow:var(--shadow-card);background:linear-gradient(150deg,var(--royal-700),var(--royal-950));aspect-ratio:4/5;animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.mini-badge{position:absolute;top:20px;left:-14px;z-index:3;background:var(--royal-900);color:var(--cream);border-radius:999px;padding:.6rem 1.1rem;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;box-shadow:var(--shadow-card);animation:float 9s ease-in-out infinite;animation-delay:-3s}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3ECF8E;margin-right:.45rem;animation:pulse 1.6s ease-out infinite;vertical-align:1px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,207,142,.55)}70%{box-shadow:0 0 0 9px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}

.marquee{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--sand);overflow:hidden;padding:1rem 0}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:marquee 42s linear infinite;font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-txt)}
.marquee-track span::before{content:"\2726";color:var(--copper);margin-right:.8rem}
@keyframes marquee{to{transform:translateX(-50%)}}

.livecall{background:rgba(233,241,251,.05);border:1px solid var(--blue-line);border-radius:var(--r-lg);padding:1.8rem;backdrop-filter:blur(6px);box-shadow:var(--shadow-soft)}
.lc-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,241,251,.6);border-bottom:1px dashed var(--blue-line);padding-bottom:.9rem;margin-bottom:1.1rem}
.lc-lang{border:1px solid var(--blue-line);border-radius:999px;padding:.2rem .6rem;color:var(--sky-200)}
.lc-status{color:var(--amber);font-weight:600;white-space:nowrap}
.lc-feed{font-family:'IBM Plex Mono',monospace;font-size:.81rem;line-height:1.75;min-height:310px;display:flex;flex-direction:column;gap:.7rem}
.lc-line{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.lc-line.show{opacity:1;transform:none}
.lc-line .who{color:var(--amber);font-weight:600;margin-right:.4rem}
.lc-line .who.lucy{color:#5FE0A8}
.lc-line .txt{color:rgba(233,241,251,.9)}
.lc-line.sys .txt{color:rgba(233,241,251,.45);font-style:italic}
.lc-booked{margin-top:1.1rem;border-radius:14px;background:linear-gradient(120deg,#1F8F63,#146F4C);color:#EAFBF3;font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:.95rem 1.1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;opacity:0;transform:scale(.94);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.lc-booked.show{opacity:1;transform:none}
.lc-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.1rem}
.lc-meta div{border:1px solid var(--blue-line);border-radius:12px;padding:.75rem .85rem;font-family:'IBM Plex Mono',monospace}
.lc-meta .k{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,241,251,.45);margin-bottom:.2rem}
.lc-meta .v{font-size:.8rem;color:var(--cream)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.22s}.reveal.d3{transition-delay:.34s}.reveal.d4{transition-delay:.46s}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.stat{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:2.1rem 1.9rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stat:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.stat .num{font-family:'Fraunces',serif;font-weight:560;font-size:3.5rem;line-height:1;color:var(--royal-800)}
.stat p{color:var(--stone-txt);margin-top:.7rem;font-size:.96rem}
.stat .src{font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:#9AA0AC;margin-top:1rem;display:block}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.step{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:2.1rem 1.9rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.step .k{font-family:'IBM Plex Mono',monospace;color:var(--copper);font-size:.72rem;letter-spacing:.18em}
.step h3{margin:.9rem 0 .6rem}
.step p{color:var(--stone-txt);font-size:.96rem}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.feature{border:1px solid var(--blue-line);border-radius:var(--r-md);padding:1.85rem;background:rgba(233,241,251,.05);transition:background .25s,transform .25s var(--ease)}
.feature:hover{background:rgba(233,241,251,.1);transform:translateY(-5px)}
.feature h3{color:var(--cream);margin-bottom:.5rem}
.feature p{color:rgba(233,241,251,.72);font-size:.94rem}
.feature .ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(140deg,var(--sky-400),var(--royal-700));display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:1.05rem;color:var(--cream)}
.guardrail{margin-top:2.5rem;border:1px dashed var(--blue-line);border-radius:var(--r-md);padding:1.5rem 1.7rem;font-size:.96rem;color:rgba(233,241,251,.8)}
.guardrail strong{color:var(--cream)}

.roi-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:start}
.roi-controls label{display:flex;justify-content:space-between;font-weight:600;margin:1.6rem 0 .55rem}
.roi-controls label output{font-family:'IBM Plex Mono',monospace;color:var(--royal-700)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--royal-700) var(--fill,50%),#CFD8E6 var(--fill,50%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cream);border:3px solid var(--royal-700);box-shadow:0 3px 10px rgba(0,0,0,.18)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cream);border:3px solid var(--royal-700)}
.roi-result{background:linear-gradient(155deg,var(--royal-800),var(--royal-950));color:var(--cream);border-radius:var(--r-lg);padding:2.5rem;text-align:center;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.roi-result::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--sky-400);filter:blur(90px);opacity:.3;top:-130px;right:-90px}
.roi-result>*{position:relative}
.roi-result .label{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,241,251,.6)}
.roi-result .amount{font-family:'Fraunces',serif;font-weight:560;font-size:4.4rem;color:var(--amber);line-height:1.15;margin:.4rem 0}
.roi-result p{color:rgba(233,241,251,.84);font-size:.96rem}
.roi-note{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:rgba(233,241,251,.45);margin-top:1.4rem;display:block}

.split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
blockquote{border-left:3px solid var(--copper);padding-left:1.3rem;font-family:'Fraunces',serif;font-size:1.26rem;font-style:italic;line-height:1.5;margin:1.4rem 0}
.frame.royal blockquote{border-color:var(--amber);color:rgba(233,241,251,.92)}

.transcript{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:1.9rem;font-family:'IBM Plex Mono',monospace;font-size:.8rem;line-height:2;color:var(--ink);box-shadow:var(--shadow-card)}
.transcript .who{color:var(--copper-deep);font-weight:600}
.transcript .who.lucy{color:#177A52}
.transcript .sys{color:#A6A99C;font-style:italic}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;align-items:stretch}
.plan{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:2rem 1.65rem;display:flex;flex-direction:column;position:relative;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.plan:hover{transform:translateY(-7px);box-shadow:var(--shadow-card)}
.plan.is-featured{border:2px solid var(--copper);box-shadow:var(--shadow-soft)}
.plan .flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--copper);color:var(--cream);font-family:'IBM Plex Mono',monospace;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .95rem;border-radius:999px;white-space:nowrap}
.plan h3{font-family:'Fraunces',serif;font-weight:560;font-size:1.5rem;color:var(--royal-900)}
.plan .tag{font-size:.89rem;color:var(--stone-txt);margin:.15rem 0 1.05rem}
.plan .price{font-family:'Fraunces',serif;font-weight:560;font-size:2.7rem;color:var(--ink);line-height:1}
.plan .per{font-size:.82rem;color:var(--stone-txt);margin-bottom:1.25rem}
.plan ul{list-style:none;margin:0 0 1.6rem;flex:1}
.plan li{padding:.45rem 0 .45rem 1.55rem;position:relative;font-size:.92rem;border-bottom:1px solid #F2EDE1}
.plan li::before{content:"\2713";position:absolute;left:0;color:#1F8F63;font-weight:700}
.plan li.na{color:#B3B6A9}
.plan li.na::before{content:"\2014";color:#D3D5C9}
.plan .btn{width:100%}

.faq-item{border:1px solid var(--hairline);border-radius:14px;background:#fff;margin-bottom:.9rem;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:1.2rem 1.4rem;font-weight:600;font-size:1.03rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:'Fraunces',serif;font-size:1.5rem;color:var(--copper);transition:transform .15s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 1.4rem 1.3rem;color:var(--stone-txt);font-size:.97rem}
.faq-cat{margin-top:2.8rem}

.trust-strip{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:flex-start;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone-txt);margin-top:2.5rem}
.trust-strip span::before{content:"\2713";color:#1F8F63;margin-right:.5rem}
.img-note{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:#A6A99C;margin-top:.7rem}

.cta-band{background:linear-gradient(150deg,var(--royal-800),var(--royal-950));color:var(--cream);padding:84px 20px}
.cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%;filter:blur(85px)}
.cta-band::before{width:400px;height:400px;background:var(--sky-400);opacity:.3;top:-150px;left:-110px;animation:drift 20s ease-in-out infinite alternate}
.cta-band::after{width:330px;height:330px;background:var(--amber);opacity:.2;bottom:-150px;right:-90px;animation:drift 24s ease-in-out infinite alternate-reverse}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{color:var(--cream)}
.cta-band p{max-width:52ch;margin:1rem 0 0;color:rgba(233,241,251,.82)}
.cta-band .btn{margin-top:1.9rem}

.site-footer{background:var(--royal-950);color:rgba(233,241,251,.7);padding:66px 0 34px;font-size:.93rem;margin-top:92px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:2.5rem;margin-bottom:2.6rem}
.site-footer .logo{color:var(--cream)}
.site-footer h4{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);margin-bottom:1rem}
.site-footer ul{list-style:none}
.site-footer li{margin:.5rem 0}
.site-footer a{color:rgba(233,241,251,.7);text-decoration:none}
.site-footer a:hover{color:var(--cream)}
.footer-bottom{border-top:1px solid var(--blue-line);padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.06em;color:rgba(233,241,251,.45)}

.social{display:flex;gap:.65rem;margin-top:.4rem;flex-wrap:wrap}
.social a{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(233,241,251,.08);border:1px solid var(--blue-line);color:var(--cream);transition:transform .18s var(--ease),background .18s,border-color .18s}
.social a:hover{transform:translateY(-3px);background:var(--copper);border-color:var(--copper)}
.social a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.social svg{width:19px;height:19px;fill:currentColor;display:block}

@media (max-width:1000px){
  .hero-grid,.roi-grid,.split{grid-template-columns:1fr;gap:2.5rem}
  .stats-grid,.steps,.features{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .collage{padding-right:0}
  .collage .inset{width:38%;right:10px}
}
@media (max-width:680px){
  section{padding:60px 0}
  .frame{padding:60px 18px;border-radius:20px}
  .stats-grid,.steps,.features,.plans,.lc-meta{grid-template-columns:1fr}
  .collage .inset{width:44%}
  .mini-badge{left:8px}
  .lc-feed{min-height:0}
  .nav{display:none;position:absolute;top:74px;left:0;right:0;background:var(--cream);flex-direction:column;align-items:flex-start;padding:1.3rem 24px;gap:1.1rem;border-bottom:1px solid var(--hairline);box-shadow:var(--shadow-card)}
  .nav.open{display:flex}
  .nav-toggle{display:block}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.lc-line,.lc-booked{opacity:1!important;transform:none!important}
}

/* ================================================================
   MARKETING-FAMILY ADDITIONS — same components used on marketing
   and franchise, so all three subdomains share one visual language
   ================================================================ */
.video-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);background:linear-gradient(150deg,var(--royal-800),var(--royal-950));position:relative;aspect-ratio:16/10}
.video-frame video{width:100%;height:100%;object-fit:cover;display:block}
.video-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(7,20,47,0) 45%,rgba(7,20,47,.55) 100%);pointer-events:none}

.roles{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.role-chip{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(13,35,80,.16);background:#fff;border-radius:999px;padding:.55rem 1.05rem;color:var(--stone-txt);transition:transform .2s var(--ease),border-color .2s,color .2s}
.role-chip:hover{transform:translateY(-3px);border-color:var(--copper);color:var(--copper-deep)}
.frame.royal .role-chip{background:rgba(233,241,251,.07);border-color:var(--blue-line);color:rgba(233,241,251,.8)}
.frame.royal .role-chip:hover{border-color:var(--amber);color:var(--amber)}

.engine{background:rgba(233,241,251,.05);border:1px solid var(--blue-line);border-radius:var(--r-lg);padding:1.8rem;backdrop-filter:blur(6px);box-shadow:var(--shadow-soft)}
.engine-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,241,251,.6);border-bottom:1px dashed var(--blue-line);padding-bottom:.9rem;margin-bottom:1.2rem}
.engine-clock{color:var(--amber);font-weight:600}
.feed{display:flex;flex-direction:column;gap:.65rem;min-height:330px}
.evt{display:flex;gap:.8rem;align-items:flex-start;border:1px solid var(--blue-line);border-radius:12px;padding:.75rem .9rem;background:rgba(7,20,47,.35);opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.evt.show{opacity:1;transform:none}
.evt .dot{width:9px;height:9px;border-radius:50%;margin-top:.45rem;flex:0 0 9px;background:var(--sky-400)}
.evt.win .dot{background:#3ECF8E}
.evt.alert .dot{background:var(--amber)}
.evt .body{flex:1;min-width:0}
.evt .ch{font-family:'IBM Plex Mono',monospace;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,241,251,.5);display:block;margin-bottom:.15rem}
.evt .msg{font-size:.92rem;color:rgba(233,241,251,.92);line-height:1.45}
.evt .t{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:rgba(233,241,251,.42);white-space:nowrap;margin-top:.5rem}
.engine-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.2rem}
.engine-foot div{border:1px solid var(--blue-line);border-radius:12px;padding:.75rem .85rem;font-family:'IBM Plex Mono',monospace}
.engine-foot .k{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,241,251,.45);margin-bottom:.2rem}
.engine-foot .v{font-size:.85rem;color:var(--cream)}

.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.channel{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:1.9rem 1.7rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.channel:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.channel .ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(140deg,var(--sky-400),var(--royal-700));display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--cream);margin-bottom:1.05rem}
.channel h3{margin-bottom:.5rem}
.channel p{color:var(--stone-txt);font-size:.95rem}
.channel .tagline{font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);display:block;margin-top:.9rem}

.ledger{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.ledger-col{border-radius:var(--r-md);padding:1.8rem 1.7rem}
.ledger-col.before{background:#fff;border:1px solid var(--hairline)}
.ledger-col.after{background:linear-gradient(155deg,var(--royal-800),var(--royal-950));color:var(--cream);box-shadow:var(--shadow-card)}
.ledger-col h3{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.1rem}
.ledger-col.before h3{color:var(--stone-txt)}
.ledger-col.after h3{color:var(--amber)}
.ledger-col ul{list-style:none}
.ledger-col li{padding:.6rem 0 .6rem 1.7rem;position:relative;font-size:.95rem;border-bottom:1px solid rgba(0,0,0,.06)}
.ledger-col.after li{border-bottom-color:var(--blue-line);color:rgba(233,241,251,.88)}
.ledger-col li:last-child{border-bottom:none}
.ledger-col.before li::before{content:"\2715";position:absolute;left:0;color:#C2705C;font-weight:700}
.ledger-col.after li::before{content:"\2713";position:absolute;left:0;color:#5FE0A8;font-weight:700}

.hours{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.6rem}
.hour-card{background:rgba(233,241,251,.06);border:1px solid var(--blue-line);border-radius:var(--r-md);padding:1.7rem 1.5rem;text-align:left}
.hour-card .n{font-family:'Fraunces',serif;font-weight:560;font-size:2.7rem;line-height:1;color:var(--amber)}
.hour-card p{color:rgba(233,241,251,.75);font-size:.9rem;margin-top:.5rem}

.timeline{position:relative;margin-top:2.4rem;padding-left:0}
.timeline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--copper),rgba(192,106,52,.15))}
.tl-item{position:relative;padding-left:56px;padding-bottom:2.1rem}
.tl-item:last-child{padding-bottom:0}
.tl-item .num{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--cream);border:2px solid var(--copper);color:var(--copper-deep);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600}
.frame.sand .tl-item .num{background:var(--sand)}
.tl-item h3{margin-bottom:.4rem}
.tl-item p{color:var(--stone-txt);font-size:.96rem}

.pullquote{border:none;padding:0;margin:0;font-family:'Fraunces',serif;font-size:clamp(1.4rem,2.6vw,2rem);font-style:italic;line-height:1.35;color:var(--cream)}
.pq-attr{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-top:1.4rem;display:block}

@media (max-width:1000px){
  .channels{grid-template-columns:1fr 1fr}
  .hours{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .channels,.ledger,.hours,.engine-foot{grid-template-columns:1fr}
  .feed{min-height:0}
}


/* ================================================================
   HERO COLLAGE  —  final geometry
   ----------------------------------------------------------------
   The inset card now drops into the empty space BELOW the video
   instead of sitting on top of it.

   - .collage gets padding-bottom:40.5% (percentage padding resolves
     against WIDTH, so this scales correctly at every viewport).
   - The card is 38% wide, 4:5 portrait — the native aspect of
     dental-desk.png, so the photo is not cropped.
   - It tucks 7% of the column width up over the video's bottom-right
     corner: enough to read as a designed collage, covering only
     4.7% of the video (it was 33%).
   - The video frame stays 16:9 to match the source exactly, so no
     part of the footage is cropped.
   ================================================================ */

.hero-grid{align-items:flex-start}

.hero .video-frame{aspect-ratio:16/9}

.hero .collage{
  padding-right:0;
  padding-bottom:60.1%;
  margin-top:.4rem;
}

.hero .collage .inset{
  width:54%;
  aspect-ratio:4/5;
  right:0;
  bottom:0;
  border-width:6px;
  border-radius:20px;
}

/* confine the darkening gradient to the very bottom edge of the video
   so the middle of the frame stays clear */
.hero .video-frame::after{
  background:linear-gradient(180deg,rgba(7,20,47,0) 72%,rgba(7,20,47,.38) 100%);
}

@media (max-width:1000px){
  .hero .collage{padding-bottom:42%}
  .hero .collage .inset{width:40%}
}

@media (max-width:680px){
  /* single column: the card sits under the video, still fully visible */
  .hero .collage{padding-bottom:44%}
  .hero .collage .inset{width:44%;display:block}
}