/* ==========================================================================
   Yuko — global stylesheet
   Extracted from design-reference/yuko-homepage-v6.html
   Single source of truth for tokens + components. Paste the :root block into
   the WordPress Customizer / Elementor custom CSS once.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root{
  --cream:#FAF7EF;
  --cream-deep:#F2EDE2;
  --paper:#FFFFFF;
  --ink:#1A1523;          /* purple-black: text + dark sections */
  --grey:#6F6880;
  --purple:#7C3AED;       /* THE action color — every CTA */
  --purple-deep:#5B21B6;
  --purple-wash:#F1EAFE;
  --gold:#EFA919;         /* accent: big numbers, underline, highlights */
  --gold-deep:#C9880A;
  --line:#E7E1D4;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
section{padding:96px 0;}
h1,h2,h3{line-height:1.12;letter-spacing:-0.02em;}
h2{font-size:clamp(28px,4vw,44px);font-weight:800;}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--purple);margin-bottom:16px;}

/* --------------------------------------------------------------------------
   3. Buttons, links, placeholders
   -------------------------------------------------------------------------- */
.btn{display:inline-block;padding:15px 30px;border-radius:12px;font-weight:800;font-size:16px;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 6px 20px rgba(124,58,237,.3);}
.btn-primary:hover{background:var(--purple-deep);box-shadow:0 10px 28px rgba(124,58,237,.4);}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);}
.btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.4);}
.placeholder{background:repeating-linear-gradient(45deg,var(--purple-wash),var(--purple-wash) 12px,#E7DCFB 12px,#E7DCFB 24px);border:2px dashed var(--purple);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--purple);font-weight:700;text-align:center;padding:20px;}
.placeholder small{display:block;font-weight:500;font-size:13px;opacity:.8;margin-top:6px;}
a.text-link{color:var(--purple);font-weight:700;text-decoration:none;}

/* --------------------------------------------------------------------------
   4. Nav  (identical markup on every page)
   -------------------------------------------------------------------------- */
nav{background:rgba(250,247,239,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;}
.logo{font-weight:800;font-size:24px;color:var(--purple);text-decoration:none;}
.nav-links{display:flex;gap:28px;font-size:15px;font-weight:600;}
.nav-links a{color:var(--ink);text-decoration:none;}
.nav-links a:hover{color:var(--purple);}
.nav-cta{display:flex;gap:12px;align-items:center;}
.nav-cta .btn{padding:10px 20px;font-size:14px;}

/* Mobile disclosure menu — native <details>, no JS */
.nav-menu{display:none;position:relative;}
.nav-menu summary{list-style:none;cursor:pointer;padding:8px 12px;border:2px solid var(--ink);border-radius:12px;font-weight:800;font-size:14px;}
.nav-menu summary::-webkit-details-marker{display:none;}
.nav-menu[open] .nav-drop{display:flex;}
.nav-drop{display:none;position:absolute;right:0;top:calc(100% + 10px);background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 48px rgba(25,22,18,.14);padding:12px;flex-direction:column;gap:2px;min-width:220px;}
.nav-drop a{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;padding:10px 14px;border-radius:10px;}
.nav-drop a:hover{background:var(--purple-wash);color:var(--purple);}

/* --------------------------------------------------------------------------
   5. Hero (homepage)
   -------------------------------------------------------------------------- */
.hero{padding:104px 0 76px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);font-size:13px;font-weight:700;padding:6px 14px;border-radius:100px;margin-bottom:22px;box-shadow:0 2px 8px rgba(25,22,18,.05);}
.hero h1{font-size:clamp(38px,5.2vw,62px);font-weight:800;margin-bottom:20px;}
/* gold underline — not scoped to .hero, so any h1 can use it */
.coin{position:relative;white-space:nowrap;}
.coin::after{content:"";position:absolute;left:-2%;bottom:5px;width:104%;height:14px;background:var(--gold);z-index:-1;opacity:.5;border-radius:4px;}
.hero p.sub{font-size:19px;color:var(--grey);max-width:520px;margin-bottom:32px;}
.hero-ctas{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap;}
.trust-chips{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--grey);font-weight:600;}
.trust-chips span::before{content:"✓";color:var(--purple);font-weight:800;margin-right:6px;}
.hero-visual{position:relative;}
.hero-visual .placeholder{height:430px;background-color:var(--paper);box-shadow:0 24px 56px rgba(25,22,18,.1);}
.float-card{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:13px;font-weight:700;box-shadow:0 12px 32px rgba(25,22,18,.12);}
.float-card b{color:var(--purple);}
.fc1{top:-16px;right:-8px;transform:rotate(2deg);}
.fc2{bottom:32px;left:-20px;transform:rotate(-2deg);}

/* --------------------------------------------------------------------------
   6. Logo wall + marquee
   -------------------------------------------------------------------------- */
.logos{padding:56px 0 64px;border-top:1px solid var(--line);}
.logos p.label{text-align:center;font-size:14px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}
.logos p.count{text-align:center;font-size:26px;font-weight:800;margin-bottom:32px;}
.logos p.count b{color:var(--purple);}
.featured-row{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-bottom:36px;}
.logo-tile{background:var(--paper);border:1px solid var(--line);border-radius:12px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.logo-tile .mark{color:var(--grey);font-weight:800;font-size:15px;}
.logo-tile .switch{font-size:11px;font-weight:700;color:var(--purple);background:#F1EAFE;padding:2px 10px;border-radius:100px;}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee + .marquee{margin-top:14px;}
.marquee-track{display:flex;gap:14px;width:max-content;animation:scroll 38s linear infinite;}
.marquee.reverse .marquee-track{animation-direction:reverse;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none;flex-wrap:wrap;}}
.m-chip{background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:10px 26px;font-weight:700;font-size:14px;color:var(--grey);white-space:nowrap;}

/* --------------------------------------------------------------------------
   7. Consolidation ("replace five apps with one")
   -------------------------------------------------------------------------- */
.consolidate{background:var(--cream-deep);}
.consolidate .head{max-width:640px;margin-bottom:56px;}
.stack-visual{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;}
.app-pile{display:flex;flex-direction:column;gap:12px;}
.app-chip{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-weight:700;font-size:15px;color:var(--grey);display:flex;justify-content:space-between;align-items:center;}
.app-chip s{color:#B7AC8F;font-weight:600;font-size:13px;}
.arrow{font-size:40px;color:var(--purple);font-weight:800;}
.one-app{background:var(--ink);border-radius:20px;padding:36px 32px;color:#fff;box-shadow:0 20px 48px rgba(25,22,18,.28);}
.one-app h3{font-size:24px;margin-bottom:8px;}
.one-app .price{font-size:15px;color:var(--gold);font-weight:700;margin-bottom:16px;}
.one-app ul{list-style:none;font-size:15px;}
.one-app li{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.one-app li::before{content:"●";color:var(--gold);font-size:10px;margin-right:10px;vertical-align:middle;}

/* --------------------------------------------------------------------------
   8. Feature tabs (homepage)
   -------------------------------------------------------------------------- */
.features .lede{max-width:680px;color:var(--grey);font-size:17px;margin-top:14px;}
.tab-row{display:flex;gap:8px;flex-wrap:wrap;margin:40px 0 44px;}
.tab{padding:10px 22px;border-radius:100px;font-weight:700;font-size:15px;border:2px solid var(--line);color:var(--grey);cursor:pointer;background:var(--paper);font-family:inherit;}
.tab.active{background:var(--purple);border-color:var(--purple);color:#fff;}
.tab .new{font-size:10px;background:var(--gold);color:var(--ink);border-radius:100px;padding:1px 8px;margin-left:6px;vertical-align:middle;}
.feature-panel{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.feature-panel h3{font-size:30px;font-weight:800;margin-bottom:14px;}
.feature-panel p{color:var(--grey);margin-bottom:22px;}
.check-list{list-style:none;margin-bottom:28px;}
.check-list li{padding:7px 0;font-weight:600;font-size:15px;}
.check-list li::before{content:"✓";color:var(--purple);font-weight:800;margin-right:10px;}
.feature-panel .placeholder{height:360px;background-color:var(--paper);}

/* --------------------------------------------------------------------------
   9. Results (dark)
   -------------------------------------------------------------------------- */
.results{background:var(--ink);color:#fff;}
.results .eyebrow{color:var(--gold);}
.results h2{color:#fff;}
.results .head{max-width:640px;margin-bottom:52px;}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.result-card{background:#251E33;border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:36px 30px;}
.result-card .big{font-size:52px;font-weight:800;color:var(--gold);line-height:1;margin-bottom:10px;}
.result-card .what{font-size:16px;font-weight:700;margin-bottom:14px;}
.result-card .who{font-size:14px;color:rgba(255,255,255,.55);}
.result-card a{display:inline-block;margin-top:18px;color:var(--gold);font-weight:700;font-size:14px;text-decoration:none;}
.result-card .quote{font-size:14px;color:rgba(255,255,255,.75);font-style:italic;margin-top:16px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px;}

/* --------------------------------------------------------------------------
   10. Pricing meter
   -------------------------------------------------------------------------- */
.meter-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px;align-items:stretch;}
.meter-card{border-radius:20px;padding:40px 36px;}
.meter-them{background:var(--paper);border:1px solid var(--line);}
.meter-them h4{color:var(--grey);font-size:14px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:24px;}
.bill-bars{display:flex;align-items:flex-end;gap:16px;height:180px;margin-bottom:20px;}
.bill-bars .bar{flex:1;background:#E2D9C0;border-radius:8px 8px 0 0;position:relative;}
.bill-bars .bar span{position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:var(--grey);white-space:nowrap;}
.meter-them p{font-size:14px;color:var(--grey);}
.meter-yuko{background:var(--ink);color:#fff;box-shadow:0 24px 56px rgba(25,22,18,.3);}
.meter-yuko h4{color:var(--gold);font-size:14px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:24px;}
.flat-line{height:180px;display:flex;align-items:center;margin-bottom:20px;position:relative;}
.flat-line .line{width:100%;height:10px;background:var(--gold);border-radius:100px;}
.flat-line span{position:absolute;top:calc(50% - 40px);left:0;font-size:14px;font-weight:800;}
.meter-yuko p{font-size:14px;color:rgba(255,255,255,.85);}
.meter-foot{margin-top:36px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}

/* --------------------------------------------------------------------------
   11. Calculator
   -------------------------------------------------------------------------- */
.calc{background:var(--cream-deep);}
.calc-box{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;box-shadow:0 16px 48px rgba(25,22,18,.06);}
.slider-group{margin-bottom:32px;}
.slider-group label{display:block;font-weight:700;font-size:15px;margin-bottom:12px;}
.slider-group label b{color:var(--purple);}
.fake-slider{height:8px;background:var(--line);border-radius:100px;position:relative;}
.fake-slider .fill{position:absolute;left:0;top:0;height:100%;width:55%;background:var(--purple);border-radius:100px;}
.fake-slider .knob{position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;background:var(--paper);border:3px solid var(--purple);border-radius:100px;}
.calc-result{background:var(--ink);border-radius:20px;padding:36px;color:#fff;text-align:center;display:flex;flex-direction:column;justify-content:center;}
.calc-result .label{font-size:14px;color:rgba(255,255,255,.6);font-weight:600;}
.calc-result .big{font-size:56px;font-weight:800;color:var(--gold);margin:8px 0 20px;}
.calc-result .btn{align-self:center;}

/* --------------------------------------------------------------------------
   12. Migration / 3-step cards  (reused on every feature page)
   -------------------------------------------------------------------------- */
.migrate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.step-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:32px 28px;}
.step-card .num{width:40px;height:40px;border-radius:100px;background:var(--purple);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.step-card h4{font-size:18px;margin-bottom:8px;}
.step-card p{font-size:14px;color:var(--grey);}
.step-card .time{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;color:var(--purple);background:var(--purple-wash);padding:3px 12px;border-radius:100px;}

/* --------------------------------------------------------------------------
   13. Integrations strip
   -------------------------------------------------------------------------- */
.integrations{padding:64px 0;background:var(--cream-deep);}
.int-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px;}
.int-chip{background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:10px 22px;font-weight:700;font-size:14px;color:var(--grey);}

/* --------------------------------------------------------------------------
   14. Founder note
   -------------------------------------------------------------------------- */
.founder-box{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;max-width:860px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:48px;box-shadow:0 16px 48px rgba(25,22,18,.05);}
.founder-box .placeholder{width:120px;height:120px;border-radius:100px;padding:8px;font-size:12px;}
.founder-box blockquote{font-size:19px;font-weight:600;line-height:1.5;margin-bottom:16px;}
.founder-box .sig{font-size:14px;color:var(--grey);font-weight:600;}

/* --------------------------------------------------------------------------
   15. Final CTA (dark, every page)
   -------------------------------------------------------------------------- */
.final{background:var(--ink);color:#fff;text-align:center;}
.final h2{color:#fff;max-width:680px;margin:0 auto 20px;}
.final p{color:rgba(255,255,255,.6);margin-bottom:36px;}
.final .trust-chips{justify-content:center;color:rgba(255,255,255,.7);}
.final .trust-chips span::before{color:#B794F6;}

/* --------------------------------------------------------------------------
   16. Footer  (identical markup on every page)
   -------------------------------------------------------------------------- */
footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.1);padding:72px 0 40px;color:rgba(255,255,255,.5);font-size:14px;}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 32px;margin-bottom:56px;}
.foot-col h5{color:#fff;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;}
.foot-col ul{list-style:none;}
.foot-col li{padding:5px 0;}
.foot-col a{color:rgba(255,255,255,.55);text-decoration:none;font-size:14px;}
.foot-col a:hover{color:#B794F6;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
.foot-brand{display:flex;flex-direction:column;gap:6px;}
.foot-brand .mark{font-weight:800;font-size:20px;color:#B794F6;}
.foot-brand .tag{font-size:13px;}
.foot-social{display:flex;gap:16px;}
.foot-social a{color:rgba(255,255,255,.7);text-decoration:none;font-size:13px;font-weight:700;}
.foot-social a:hover{color:#B794F6;}
.foot-legal{font-size:13px;}

/* ==========================================================================
   17. FEATURE / LANDING PAGE COMPONENTS
   Added for the Phase 1 landing pages. Same tokens, same rhythm.
   ========================================================================== */

/* 17a. Page hero — feature pages */
.page-hero{padding:88px 0 72px;}
.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.page-hero h1{font-size:clamp(38px,5.2vw,58px);font-weight:800;margin-bottom:20px;}
.page-hero p.sub{font-size:19px;color:var(--grey);max-width:540px;margin-bottom:32px;}
.page-hero .placeholder{height:400px;background-color:var(--paper);box-shadow:0 24px 56px rgba(25,22,18,.1);}

/* 17b. Shared section head */
.section-head{max-width:680px;margin-bottom:52px;}
.section-head p{color:var(--grey);font-size:17px;margin-top:14px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* 17c. Capabilities grid */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.cap-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:32px 28px;}
.cap-card h3{font-size:18px;font-weight:800;margin-bottom:10px;}
.cap-card p{font-size:15px;color:var(--grey);}
.cap-card .tagline{display:inline-block;margin-bottom:14px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);background:var(--purple-wash);padding:4px 12px;border-radius:100px;}

/* 17d. Use case strip */
.usecase{background:var(--cream-deep);}
.usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.usecase-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:32px 28px;}
.usecase-card .who{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);margin-bottom:12px;}
.usecase-card p{font-size:16px;color:var(--ink);font-weight:600;line-height:1.5;}
.usecase-card .outcome{margin-top:14px;font-size:14px;color:var(--grey);font-weight:500;}

/* 17e. Result stat band (dark) */
.statband{background:var(--ink);color:#fff;text-align:center;padding:80px 0;}
.statband .big{font-size:clamp(56px,9vw,88px);font-weight:800;color:var(--gold);line-height:1;margin-bottom:14px;}
.statband .what{font-size:20px;font-weight:700;max-width:560px;margin:0 auto 10px;}
.statband .who{font-size:14px;color:rgba(255,255,255,.55);}

/* 17f. Cross-sell strip */
.cross-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.cross-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:32px 28px;display:block;text-decoration:none;color:var(--ink);transition:transform .15s ease, box-shadow .15s ease;}
.cross-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(25,22,18,.08);}
.cross-card h3{font-size:19px;font-weight:800;margin-bottom:8px;}
.cross-card p{font-size:15px;color:var(--grey);margin-bottom:14px;}
.cross-card .go{color:var(--purple);font-weight:800;font-size:14px;}

/* 17g. FAQ — native <details>, no JS */
.faq-list{max-width:820px;}
.faq-list details{border-bottom:1px solid var(--line);}
.faq-list summary{cursor:pointer;padding:22px 0;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+";color:var(--purple);font-weight:800;font-size:26px;line-height:1;}
.faq-list details[open] summary::after{content:"–";}
.faq-list details p{padding:0 0 22px;color:var(--grey);font-size:16px;}
.faq-list details p + p{padding-top:0;margin-top:-8px;}

/* 17h. Comparison table (Discount vs Booster) */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cmp-table{width:100%;min-width:620px;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.cmp-table th,.cmp-table td{padding:20px 24px;text-align:left;font-size:15px;border-bottom:1px solid var(--line);vertical-align:top;}
.cmp-table thead th{background:var(--cream-deep);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);}
.cmp-table thead th.yuko{color:var(--purple);}
.cmp-table tbody th{font-weight:700;color:var(--ink);width:30%;}
.cmp-table td{color:var(--grey);}
.cmp-table td.yuko{color:var(--ink);font-weight:600;background:rgba(241,234,254,.4);}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:none;}

/* 17i. Two-column alternating feature rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split + .split{margin-top:88px;}
.split.flip .split-media{order:-1;}
.split h3{font-size:28px;font-weight:800;margin-bottom:14px;}
.split p{color:var(--grey);margin-bottom:22px;}
.split .placeholder{height:340px;background-color:var(--paper);}

/* 17j. Plain bulleted spec list (ways to earn, event lists) */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 28px;}
.spec-grid li{list-style:none;padding:9px 0;font-weight:600;font-size:15px;border-bottom:1px solid var(--line);}
.spec-grid li::before{content:"✓";color:var(--purple);font-weight:800;margin-right:10px;}

/* 17k. Support channel cards */
.chan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.chan-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:32px 28px;display:flex;flex-direction:column;}
.chan-card h3{font-size:19px;font-weight:800;margin-bottom:10px;}
.chan-card p{font-size:15px;color:var(--grey);margin-bottom:20px;flex:1;}

/* 17n. Bento grid — colour-filled feature cards with a white product surface.
   6-column base so halves (span 3) and thirds (span 2) both divide cleanly. */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:52px;}
.bento-card{border-radius:20px;padding:36px 32px;display:flex;flex-direction:column;}
.bento-card.half{grid-column:span 3;}
.bento-card.third{grid-column:span 2;}
.bento-card.full{grid-column:span 6;}

/* label row: icon + small caps */
.bento-lab{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.bento-lab svg{width:16px;height:16px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.bento-card h3{font-size:clamp(21px,2vw,27px);font-weight:800;letter-spacing:-0.02em;margin-bottom:12px;}
.bento-card p{font-size:15px;margin-bottom:24px;max-width:460px;}
.bento-card .go{margin-top:auto;font-weight:800;font-size:14px;text-decoration:none;}

/* white product surface sitting inside a coloured card */
.bento-shot{background:var(--paper);border-radius:14px;padding:14px;box-shadow:0 14px 36px rgba(25,22,18,.16);margin-bottom:24px;}
.bento-shot .placeholder{height:190px;border-radius:10px;background-color:var(--cream);border-width:1px;font-size:13px;}

/* --- colour variants ---------------------------------------------------
   ink = dark panel, gold = the margin/money card only, wash = light purple,
   paper = white. Gold stays a surface here, never a button or a link. */
.bento-card.ink{background:var(--ink);color:#fff;}
.bento-card.ink .bento-lab{color:#B794F6;}
.bento-card.ink .bento-lab svg{stroke:#B794F6;}
.bento-card.ink p{color:rgba(255,255,255,.62);}
.bento-card.ink .go{color:#B794F6;}

.bento-card.gold{background:var(--gold);color:var(--ink);}
.bento-card.gold .bento-lab{color:rgba(26,21,35,.75);}
.bento-card.gold .bento-lab svg{stroke:rgba(26,21,35,.75);}
.bento-card.gold p{color:rgba(26,21,35,.78);}
.bento-card.gold .go{color:var(--ink);}
.bento-card.gold .bento-shot{box-shadow:0 14px 36px rgba(90,58,4,.22);}

.bento-card.wash{background:var(--purple-wash);color:var(--ink);}
.bento-card.wash .bento-lab,.bento-card.wash .go{color:var(--purple);}
.bento-card.wash .bento-lab svg{stroke:var(--purple);}
.bento-card.wash p{color:var(--grey);}

.bento-card.paper{background:var(--paper);border:1px solid var(--line);color:var(--ink);}
.bento-card.paper .bento-lab,.bento-card.paper .go{color:var(--purple);}
.bento-card.paper .bento-lab svg{stroke:var(--purple);}
.bento-card.paper p{color:var(--grey);}

/* badge on the gold card — inverted so it stays legible */
.bento-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;background:var(--ink);color:var(--gold);border-radius:100px;padding:3px 10px;margin-left:8px;}

/* wide card splits into copy + product surface */
.bento-split{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;}
.bento-split .bento-shot{margin-bottom:0;}
.bento-split .cta{margin-top:4px;}

/* 17o. Testimonial wall — bento of quote cards, mixed spans.
   Three card shapes: brand-led (logo top), person-led (person top),
   and a featured pull-quote. 4 columns; .w2 spans 2. */
.wall{background:var(--cream-deep);}
.wall-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;}
.tm{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px 26px;display:flex;flex-direction:column;gap:18px;box-shadow:0 6px 20px rgba(25,22,18,.04);}
.tm.w2{grid-column:span 2;}
.tm.accent{border-top:3px solid var(--purple);}
.tm-logo{font-weight:800;font-size:17px;letter-spacing:-0.01em;color:var(--ink);}
.tm-quote{font-size:15px;line-height:1.6;color:var(--ink);}
.tm-quote.lg{font-size:clamp(19px,1.85vw,25px);font-weight:700;line-height:1.35;letter-spacing:-0.015em;}
.tm-person{display:flex;align-items:center;gap:12px;}
.tm-person.foot{margin-top:auto;}
.tm-avatar{width:38px;height:38px;flex:none;border-radius:100px;background:var(--purple-wash);color:var(--purple);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;}
.tm-person .nm{font-size:14px;font-weight:800;line-height:1.3;}
.tm-person .rl{font-size:13px;color:var(--grey);line-height:1.3;}

/* 17m. Hero v2 — split hero with a full-bleed product panel on the right.
   Left column aligns to the 1140px container edge; right column runs to the
   viewport edge. Structure only: tokens, type and buttons are unchanged. */
.hero-v2{padding:56px 0 0;overflow:hidden;}
.hero-v2-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:44px;align-items:center;}
/* one padding value, so this pastes into an Elementor container without tricks */
.hero-v2-copy{padding-left:max(24px,calc((100vw - 1140px) / 2 + 24px));padding-right:24px;padding-bottom:56px;}
.hero-v2-copy h1{font-size:clamp(36px,4.6vw,56px);font-weight:800;letter-spacing:-0.03em;margin-bottom:18px;}
.hero-v2-copy .sub{font-size:clamp(19px,2.05vw,25px);line-height:1.3;color:var(--grey);font-weight:600;letter-spacing:-0.01em;margin-bottom:40px;max-width:620px;}

/* 2x2 benefit grid */
/* compact icon item — icon + title + short description.
   Used in the hero 2-up and, via .icongrid, in any 3-up feature grid. */
.hero-points{display:grid;grid-template-columns:1fr 1fr;gap:26px 36px;margin-bottom:40px;max-width:640px;}
.icongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;}
.hero-point,.iconitem{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;}
.hero-point svg,.iconitem svg{width:20px;height:20px;fill:none;stroke:var(--purple);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:3px;}
.hero-point h3,.iconitem h3{font-size:16px;font-weight:800;letter-spacing:-0.01em;margin-bottom:4px;}
.hero-point p,.iconitem p{font-size:14px;color:var(--grey);line-height:1.5;}

/* CTA row: purple primary + outlined pill */
.hero-v2-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:36px;}
.btn-pill{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:12px;border:1px solid var(--line);background:var(--paper);font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(25,22,18,.08);}
.btn-pill .go-r{color:var(--purple);font-weight:800;}

/* slide indicator */
.hero-slider-nav{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--grey);font-weight:600;}
.hero-slider-nav b{color:var(--ink);font-weight:800;}
.hero-dots{display:flex;gap:6px;}
.hero-dots button{width:26px;height:3px;padding:0;border:none;border-radius:100px;background:var(--line);cursor:pointer;}
.hero-dots button[aria-current="true"]{background:var(--ink);}

/* right panel — bleeds off the right edge, rounded on the left only */
.hero-v2-media .placeholder{height:520px;border-radius:20px 0 0 20px;background-color:var(--paper);box-shadow:0 24px 56px rgba(25,22,18,.12);}

/* 17l. Breadcrumb */
.crumb{font-size:13px;font-weight:700;color:var(--grey);margin-bottom:18px;}
.crumb a{color:var(--grey);text-decoration:none;}
.crumb a:hover{color:var(--purple);}
.crumb span{color:var(--purple);}

/* --------------------------------------------------------------------------
   18. Responsive — single breakpoint at 900px, grids collapse to 1 column
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  section{padding:72px 0;}
  .hero-grid,.feature-panel,.meter-grid,.calc-box,.stack-visual,.founder-box{grid-template-columns:1fr;}
  .result-grid,.migrate-grid{grid-template-columns:1fr;}
  .featured-row{grid-template-columns:repeat(3,1fr);}
  .stack-visual .arrow{transform:rotate(90deg);text-align:center;}
  .nav-links{display:none;}
  .nav-menu{display:block;}
  .foot-grid{grid-template-columns:repeat(2,1fr);}

  /* testimonial wall */
  .wall-grid{grid-template-columns:1fr 1fr;gap:16px;}

  /* bento */
  .bento{grid-template-columns:1fr;gap:16px;}
  .bento-card.half,.bento-card.third,.bento-card.full{grid-column:span 1;}
  .bento-card{padding:28px 24px;}
  .bento-split{grid-template-columns:1fr;gap:28px;}
  .bento-shot .placeholder{height:160px;}

  /* hero v2 */
  .hero-v2{padding:40px 0 0;}
  .hero-v2-grid{grid-template-columns:1fr;gap:32px;}
  .hero-v2-copy{padding:0 24px 8px;}
  .hero-points{grid-template-columns:1fr;gap:20px;}
  .hero-v2-media{padding:0 24px;}
  .hero-v2-media .placeholder{height:360px;border-radius:16px;}

  /* feature page components */
  .page-hero-grid,.split,.cross-grid{grid-template-columns:1fr;}
  .cap-grid,.usecase-grid,.chan-grid,.spec-grid{grid-template-columns:1fr;}
  .split.flip .split-media{order:0;}
  .split + .split{margin-top:56px;}
  .calc-box{padding:32px 24px;}
  .founder-box{padding:32px 24px;text-align:center;justify-items:center;}
}

@media (max-width:560px){
  .wall-grid{grid-template-columns:1fr;}
  .tm.w2{grid-column:span 1;}
  .nav-cta .btn-ghost{display:none;}
  .featured-row{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr;}
  .btn{padding:14px 24px;font-size:15px;}
  .hero-ctas .btn,.page-hero .hero-ctas .btn{width:100%;text-align:center;}
  .hero-v2-ctas .btn,.hero-v2-ctas .btn-pill{width:100%;justify-content:center;text-align:center;}
  .float-card{display:none;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
}

/* ==========================================================================
   19. THEME V2 — white page, deep purple sections, Inter
   Scoped to <body class="theme-v2"> so it applies to index.html only while
   the direction is under review. To promote site-wide: move this token block
   into :root, drop the .theme-v2 prefixes, delete the class from the body tag.
   ========================================================================== */
.theme-v2{
  /* existing token names are remapped, so every component follows automatically */
  --cream:#FFFFFF;          /* page background      (was #FAF7EF) */
  --cream-deep:#F3EEFB;     /* alternate sections: light violet, hue 263 against --purple's 270.
     Was #F4F4F7, a 1.2%-saturation neutral grey that read dull. This is
     4x the saturation and still lets a --purple-wash card read on top. */
  --paper:#FFFFFF;          /* cards                (unchanged)   */
  --ink:#14121A;            /* text only            (was #1A1523) */
  --plum:#2E1065;           /* dark sections        (new)         */
  --plum-lift:#3B1A7A;      /* cards on plum        (new)         */
  --plum-deep:#24003D;      /* deepest purple — footer, so the page ends a step
                               darker than the plum sections above it        */
  --grey:#66637B;           /* darkened from #6B6880 so body copy clears AA on
                               --purple-wash too (4.36:1 -> 4.70:1)          */
  --purple:#6F1BC5;         /* THE action color. Swapped from #7C3AED: white text on
                               it is 7.96:1 vs 5.70:1, so every CTA gained contrast */
  --purple-deep:#57159A;    /* button hover                                        */
  --purple-lift:#C8A8E9;    /* purple that works on plum                           */
  --purple-wash:#EEE4F8;    /* light chips and card surfaces                       */
  --purple-bright:#E2D1F3;  /* big numbers on plum                */
  /* --- contrast accent. Replaces gold on this palette: brighter, and it
     sits far better on plum (10.7:1 vs gold's 7.5:1).
     HARD RULES: text on yellow is always --ink, never white (1.4:1) and
     never --grey (3.8:1). Yellow is never a button — purple stays the
     action colour. On white sections a yellow tint needs a border. */
  --sun:#FED523;            /* the accent: big numbers, one loud card       */
  --sun-soft:#FFF7D7;       /* tint for large surfaces                      */
  --sun-line:#F3DE93;       /* border that makes the tint read on white     */
  --sun-deep:#705E0F;       /* small text on a yellow tint, when ink is too heavy */
  --gold:#EFA919;           /* RETIRED here — reads warm on white/plum. Kept
                               defined for the 8 unmigrated feature pages.   */
  --gold-deep:#C9880A;      /* RETIRED here                                  */
  --line:#E8E5F0;           /* cool border          (was #E7E1D4) */
  background:var(--cream);
}

/* Typography is unchanged from the original spec: Plus Jakarta Sans, weight 800
   headings. The Inter/semibold experiment was reverted. */

/* --- value accents ------------------------------------------------------
   Gold was mixed for a cream page and reads warm against white + plum, so
   every gold accent on this page is a light brand purple instead.
   --gold stays defined but is unused here. See CLAUDE.md. */
.theme-v2 .coin::after{background:var(--purple-bright);opacity:.9;}
.theme-v2 .results .eyebrow{color:var(--purple-lift);}
.theme-v2 .result-card .big,.theme-v2 .statband .big,
.theme-v2 .calc-result .big{color:var(--purple-bright);}
.theme-v2 .result-card a{color:var(--purple-lift);}
.theme-v2 .meter-yuko h4{color:var(--purple-lift);}
.theme-v2 .flat-line .line{background:var(--purple-lift);}
.theme-v2 .one-app .price{color:var(--purple-lift);}
.theme-v2 .one-app li::before{color:var(--purple-lift);}

/* dark surfaces move from ink to plum */
.theme-v2 .results,.theme-v2 .final,.theme-v2 footer,.theme-v2 .statband,
.theme-v2 .one-app,.theme-v2 .meter-yuko,.theme-v2 .calc-result{background:var(--plum);}
.theme-v2 .result-card{background:var(--plum-lift);border-color:rgba(255,255,255,.12);}
.theme-v2 nav{background:rgba(255,255,255,.92);}
.theme-v2 .bill-bars .bar{background:#DCD7E8;}          /* was cream-tinted */
.theme-v2 .app-chip s{color:#9A93AD;}                    /* was cream-tinted */
.theme-v2 .logo-tile .switch{background:var(--purple-wash);}
.theme-v2 .hero-dots button[aria-current="true"]{background:var(--purple);}

/* ---- expanded feature cards: 2 per row, 6 total ---- */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px;}
.fcard{border-radius:22px;padding:44px 40px;display:flex;flex-direction:column;}
.fcard .lab{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:30px;}
.fcard h3{font-size:clamp(25px,2.5vw,37px);line-height:1.14;margin-bottom:18px;}
.fcard h3 em{font-style:normal;}                         /* the accent word */
.fcard p{font-size:16px;line-height:1.6;margin-bottom:28px;max-width:440px;}
.fcard ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:34px;}
.fcard li{font-size:15px;display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;}
.fcard li::before{content:"\2713";font-weight:700;}
.fcard .btn{align-self:flex-start;margin-top:auto;}

/* light card variants */
.fcard.paper{background:var(--paper);border:1px solid var(--line);color:var(--ink);}
.fcard.wash{background:var(--purple-wash);color:var(--ink);}
.fcard.paper .lab,.fcard.wash .lab{color:var(--purple);}
.fcard.paper h3 em,.fcard.wash h3 em{color:var(--purple);}
.fcard.paper li::before,.fcard.wash li::before{color:var(--purple);}
.fcard.paper p,.fcard.wash p{color:var(--grey);}

/* dark card variant */
.fcard.plum{background:var(--plum);color:#fff;}
.fcard.plum .lab{color:var(--purple-lift);}
.fcard.plum h3 em{color:var(--purple-lift);}
.fcard.plum li::before{color:var(--purple-lift);}
.fcard.plum p{color:rgba(255,255,255,.68);}
.fcard.plum .btn-primary{background:var(--purple-lift);color:var(--plum);box-shadow:none;}
.fcard.plum .btn-primary:hover{background:#CDB4FA;box-shadow:none;}

/* the margin card — set apart by a badge now, not by a second accent colour */
.fcard .lab .flag{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:100px;
  font-size:10px;font-weight:800;letter-spacing:.1em;vertical-align:middle;
  background:var(--purple-lift);color:var(--plum);}

@media (max-width:900px){
  .fgrid{grid-template-columns:1fr;gap:16px;}
  .fcard{padding:32px 26px;}
  .fcard .lab{margin-bottom:20px;}
}

/* --------------------------------------------------------------------------
   20. Vertical tab selector (feature card design 2)
   Left rail of compact icon items; the active one lifts onto a white card.
   Right panel holds a lead sentence and a product shot cropped at the bottom.
   -------------------------------------------------------------------------- */
.vtabs-head{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;margin-bottom:48px;}
.vtabs-head p{color:var(--grey);font-size:17px;padding-top:8px;}
.vtabs{display:grid;grid-template-columns:290px 1fr;gap:24px;align-items:start;}
.vtab-rail{display:flex;flex-direction:column;gap:2px;}
.vtab{display:block;width:100%;text-align:left;padding:20px 22px;border:none;border-radius:14px;
  background:transparent;cursor:pointer;font-family:inherit;transition:background .15s ease;}
.vtab svg{display:block;width:22px;height:22px;fill:none;stroke:var(--purple);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px;}
.vtab h3{font-size:15px;font-weight:800;letter-spacing:-0.01em;margin-bottom:6px;}
.vtab p{font-size:14px;color:var(--grey);line-height:1.5;}
.vtab[aria-selected="true"]{background:var(--paper);box-shadow:0 12px 32px rgba(25,22,18,.10);}
.vpanel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:34px 34px 0;overflow:hidden;}
.vpanel .lead{font-size:17px;line-height:1.6;color:var(--grey);margin-bottom:28px;max-width:640px;}
.vpanel .lead b{color:var(--ink);font-weight:800;}
.vpanel .placeholder{height:340px;border-radius:14px 14px 0 0;background-color:var(--cream-deep);border-bottom:none;}

@media (max-width:900px){
  .vtabs-head{grid-template-columns:1fr;gap:16px;margin-bottom:32px;}
  .vtabs{grid-template-columns:1fr;}
  .vtab-rail{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .vtab{padding:16px 18px;}
  .vpanel{padding:24px 24px 0;}
  .vpanel .placeholder{height:240px;}
  .icongrid{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:560px){
  .vtab-rail{grid-template-columns:1fr;}
}

/* ==========================================================================
   21. BLOCK LIBRARY
   Reusable section blocks. Every block is: one wrapper class + child classes,
   flat nesting, no positioning tricks a page builder cannot reproduce.
   Rendered with copy-paste markup in components.html.
   -------------------------------------------------------------------------- */

/* ---- BLOCK: media-card grid -------------------------------------------
   Tinted media well on top, title and description beneath. 2 or 3 up.
   Use when the screenshot is the point and the copy is a caption. */
.mediagrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.mediagrid.cols-3{grid-template-columns:repeat(3,1fr);}
.mcard{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;}
.mcard .well{background:var(--cream-deep);border-radius:14px;padding:18px;margin-bottom:22px;}
.mcard .well .placeholder{height:210px;border-radius:10px;background-color:var(--paper);}
.mcard h3{font-size:20px;font-weight:800;letter-spacing:-0.015em;margin:0 6px 8px;}
.mcard p{font-size:15px;color:var(--grey);line-height:1.6;margin:0 6px 6px;}

/* ---- BLOCK: story split ------------------------------------------------
   Portrait media with a badge and a stat chip, beside a large pull-quote,
   attribution, supporting figures and a link. Use for case studies. */
.story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.story-media{position:relative;border-radius:24px;overflow:hidden;background:var(--plum,var(--ink));min-height:460px;display:flex;}
.story-media .placeholder{flex:1;border-radius:0;border:none;}
.story-pill{position:absolute;top:20px;left:20px;background:var(--paper);border-radius:100px;padding:7px 16px;font-size:13px;font-weight:800;color:var(--ink);}
.story-stat{position:absolute;right:20px;bottom:20px;background:var(--purple-wash);border-radius:16px;padding:18px 20px;max-width:160px;}
.story-stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-0.03em;line-height:1;margin-bottom:8px;color:var(--ink);}
.story-stat span{display:block;font-size:13px;line-height:1.35;color:var(--ink);}
.story-eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:24px;}
.story-eyebrow::before{content:"";width:28px;height:2px;background:var(--grey);flex:none;}
.story blockquote{font-size:clamp(25px,3.1vw,41px);font-weight:800;letter-spacing:-0.03em;line-height:1.14;margin-bottom:22px;}
.story .attrib{font-size:14px;color:var(--grey);margin-bottom:32px;}
.story-figs{display:flex;gap:48px;margin-bottom:10px;}
.story-figs b{display:block;font-size:32px;font-weight:800;letter-spacing:-0.03em;line-height:1;margin-bottom:6px;}
.story-figs span{font-size:14px;color:var(--grey);}
.story .note{font-size:12px;color:var(--grey);opacity:.75;margin-bottom:26px;}

/* ---- BLOCK: list rail --------------------------------------------------
   Copy and a full-width CTA on the left, a stack of icon rows on the right.
   Use when there are 5+ short points and no room for a grid. */
.listrail{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;}
.listrail .pill{display:inline-flex;align-items:center;gap:8px;background:var(--purple-wash);color:var(--purple);border-radius:100px;padding:7px 16px;font-size:13px;font-weight:800;margin-bottom:20px;}
.listrail .lede{font-size:17px;color:var(--grey);margin:16px 0 28px;}
.listrail .btn{width:100%;text-align:center;}
.listrows{display:flex;flex-direction:column;gap:12px;}
.listrows.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.listrow{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;}
.listrow .tile{width:44px;height:44px;flex:none;border-radius:12px;background:var(--purple-wash);display:flex;align-items:center;justify-content:center;}
.listrow .tile svg{width:22px;height:22px;fill:none;stroke:var(--purple);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.listrow h3{font-size:16px;font-weight:800;letter-spacing:-0.01em;margin-bottom:4px;}
.listrow p{font-size:14px;color:var(--grey);line-height:1.5;}

/* ---- BLOCK: rail + panel ----------------------------------------------
   Compact sibling of .vtabs: the rail sits inside a tinted container.
   Reuses .vtab, so the two share one set of trigger styles. */
.railpanel{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start;}
.railpanel-rail{background:var(--cream-deep);border:1px solid var(--line);border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:2px;}
.railpanel-rail .vtab{padding:16px 18px;border-radius:12px;}
.railpanel-rail .vtab[aria-selected="true"]{background:var(--paper);box-shadow:0 8px 24px rgba(25,22,18,.08);}
.railpanel-panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px;}
.railpanel-panel .lead{font-size:16px;color:var(--grey);line-height:1.6;margin-bottom:22px;}
.railpanel-panel .placeholder{height:300px;background-color:var(--cream-deep);}

@media (max-width:900px){
  .mediagrid,.mediagrid.cols-3{grid-template-columns:1fr;}
  .story{grid-template-columns:1fr;gap:32px;}
  .story-media{min-height:340px;}
  .listrail{grid-template-columns:1fr;gap:32px;}
  .listrows.two{grid-template-columns:1fr;}
  .railpanel{grid-template-columns:1fr;}
  .story-figs{gap:32px;}
}

/* --------------------------------------------------------------------------
   22. .section-dark — make any section a plum band.
   Contrast is structural: a page needs dark bands spread through it, not just
   one at the end. Put one roughly every 3-4 sections.
   -------------------------------------------------------------------------- */
.section-dark{background:var(--plum);color:#fff;}
.section-dark h2,.section-dark h3,.section-dark h4{color:#fff;}
.section-dark .eyebrow{color:var(--purple-lift);}
.section-dark .section-head p,.section-dark .vtabs-head p{color:rgba(255,255,255,.68);}
.section-dark .check-list li::before,.section-dark .spec-grid li::before{color:var(--purple-lift);}
.section-dark .spec-grid li{border-bottom-color:rgba(255,255,255,.24);}
.section-dark .text-link{color:var(--purple-lift);}
.section-dark .listrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38);}
.section-dark .listrow h3{color:#fff;}
.section-dark .listrow p{color:rgba(255,255,255,.62);}
.section-dark .listrow .tile{background:rgba(255,255,255,.20);}
.section-dark .listrow .tile svg{stroke:var(--purple-lift);}
.section-dark .int-chip{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.82);}

/* tab rail on a dark band: inactive sits on the plum, active lifts to white */
.section-dark .vtab h3{color:#fff;}
.section-dark .vtab p{color:rgba(255,255,255,.6);}
.section-dark .vtab svg{stroke:var(--purple-lift);}
.section-dark .vtab:hover{background:rgba(255,255,255,.05);}
.section-dark .vtab[aria-selected="true"]{background:var(--paper);box-shadow:0 16px 40px rgba(0,0,0,.32);}
.section-dark .vtab[aria-selected="true"] h3{color:var(--ink);}
.section-dark .vtab[aria-selected="true"] p{color:var(--grey);}
.section-dark .vtab[aria-selected="true"] svg{stroke:var(--purple);}
.section-dark .vpanel{border-color:rgba(255,255,255,.24);}
.section-dark .vpanel .lead{color:var(--grey);}
.section-dark .vpanel .lead b{color:var(--ink);}

/* --------------------------------------------------------------------------
   23. BLOCK: carousel — horizontal gallery of screenshot cards.
   Native scroll-snap does the work, so touch and trackpad swipe for free and
   it still scrolls with JS disabled. Arrows just call scrollBy().
   -------------------------------------------------------------------------- */
.carousel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;}
.carousel-nav{display:flex;gap:10px;flex:none;}
.carousel-nav button{width:44px;height:44px;border-radius:100px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:17px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:opacity .15s ease, background .15s ease;}
.carousel-nav button:hover:not(:disabled){background:var(--purple-wash);border-color:var(--purple);color:var(--purple);}
.carousel-nav button:disabled{opacity:.32;cursor:default;}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:14px;-webkit-overflow-scrolling:touch;}
.carousel-track::-webkit-scrollbar{height:6px;}
.carousel-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px;}
.carousel-track::-webkit-scrollbar-track{background:transparent;}
.cslide{scroll-snap-align:start;}
.cslide-media{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:18px;
  box-shadow:0 10px 30px rgba(25,22,18,.08);}
.cslide-media .placeholder{height:190px;border-radius:10px;background-color:var(--cream-deep);font-size:12px;}
.cslide h3{font-size:17px;font-weight:800;letter-spacing:-0.01em;margin-bottom:6px;}
.cslide p{font-size:14px;color:var(--grey);line-height:1.55;}

/* on a dark band */
.section-dark .carousel-nav button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;}
.section-dark .carousel-nav button:hover:not(:disabled){background:var(--paper);border-color:var(--paper);color:var(--plum);}
.section-dark .carousel-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);}
.section-dark .cslide-media{border-color:rgba(255,255,255,.24);box-shadow:0 16px 40px rgba(0,0,0,.28);}
.section-dark .cslide h3{color:#fff;}
.section-dark .cslide p{color:rgba(255,255,255,.62);}

@media (prefers-reduced-motion: reduce){ .carousel-track{scroll-behavior:auto;} }
@media (max-width:900px){
  .carousel-head{flex-direction:column;align-items:flex-start;gap:20px;}
  .carousel-track{grid-auto-columns:268px;gap:14px;}
}

/* --------------------------------------------------------------------------
   24. Yellow accent — the contrast colour.
   One loud card per group, not every card. Text on yellow is always ink.
   -------------------------------------------------------------------------- */
/* the hero underline goes back to a warm accent, now bright enough to hold */
.theme-v2 .coin::after{background:var(--sun);opacity:1;}

/* big value numbers on plum */
.theme-v2 .result-card .big,.theme-v2 .statband .big,.theme-v2 .calc-result .big{color:var(--sun);}

/* BLOCK VARIANT: yellow expanded feature card */
.fcard.sun{background:var(--sun);color:var(--ink);}
.fcard.sun .lab{color:rgba(20,18,26,.72);}
.fcard.sun h3 em{color:var(--plum);}
.fcard.sun p{color:rgba(20,18,26,.78);}
.fcard.sun li{color:var(--ink);}
.fcard.sun li::before{color:var(--plum);}
.fcard.sun .btn-primary{background:var(--plum);color:#fff;box-shadow:none;}
.fcard.sun .btn-primary:hover{background:#3F1A85;box-shadow:none;}

/* BLOCK VARIANT: yellow stat card, for the headline number in a result grid */
.result-card.sun{background:var(--sun);border-color:var(--sun);}
.result-card.sun .big{color:var(--plum);}
.result-card.sun .what{color:var(--ink);}
.result-card.sun .who{color:rgba(20,18,26,.68);}
.result-card.sun a{color:var(--plum);}

/* soft tint surfaces — border required on white, optional on plum */
.tint-sun{background:var(--sun-soft);border:1px solid var(--sun-line);}
.story-stat.sun{background:var(--sun);}

/* two-step dark scale: plum sections, then a deeper footer to close the page */
.theme-v2 footer{background:var(--plum-deep);}

/* --------------------------------------------------------------------------
   25. BLOCK: open steps — numbered columns with no card chrome.
   Quieter than .step-card: no border, no fill, no shadow. Use it when the
   steps are the whole section and boxes would only add noise.
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;}
.step .num{width:44px;height:44px;flex:none;border-radius:100px;background:var(--ink);color:#fff;
  font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:26px;}
.step h3{font-size:21px;font-weight:800;letter-spacing:-0.02em;margin-bottom:14px;}
.step p{font-size:16px;color:var(--grey);line-height:1.65;}
.step .meta{display:block;margin-top:14px;font-size:13px;font-weight:700;color:var(--purple);}

/* on a dark band the circle inverts */
.section-dark .step .num{background:var(--paper);color:var(--plum);}
.section-dark .step h3{color:#fff;}
.section-dark .step p{color:rgba(255,255,255,.66);}
.section-dark .step .meta{color:var(--purple-lift);}

@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:36px;}
  .step .num{margin-bottom:18px;}
}

/* --------------------------------------------------------------------------
   26. BLOCK: split list — copy on the left, a hairline definition table right.
   Rows are separated by rules rather than boxed, so a long list stays calm.
   Use when each item is a term plus one line of explanation.
   -------------------------------------------------------------------------- */
.splitlist{display:grid;grid-template-columns:.82fr 1.18fr;gap:72px;align-items:start;}
.splitlist-copy h2{margin-bottom:20px;}
.splitlist-copy p{color:var(--grey);font-size:16px;line-height:1.7;max-width:420px;}
.deflist{border-top:1px solid var(--line);}
.defrow{display:grid;grid-template-columns:auto 160px 1fr;gap:22px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--line);}
.deftile{width:38px;height:38px;flex:none;border-radius:10px;background:var(--purple-wash);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.deftile svg{width:19px;height:19px;fill:none;stroke:var(--purple);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.defrow dt{font-size:16px;font-weight:800;letter-spacing:-0.01em;padding-top:7px;}
.defrow dd{font-size:15px;color:var(--grey);line-height:1.6;padding-top:7px;}

.section-dark .deflist,.section-dark .defrow{border-color:rgba(255,255,255,.24);}
.section-dark .defrow dt{color:#fff;}
.section-dark .defrow dd{color:rgba(255,255,255,.62);}
.section-dark .deftile{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38);}
.section-dark .deftile svg{stroke:var(--purple-lift);}

@media (max-width:900px){
  .splitlist{grid-template-columns:1fr;gap:36px;}
  .defrow{grid-template-columns:auto 1fr;gap:16px;padding:20px 0;}
  .defrow dt{grid-column:2;padding-top:0;}
  .defrow dd{grid-column:2;padding-top:4px;}
}

/* --------------------------------------------------------------------------
   27. BLOCK: mosaic — panels butted into one block, hairlines between them.
   5-column base: .w3 + .w2 on row one, .w2 + .w3 on row two gives the
   asymmetry. The 1px grid gap shows the container colour as the rule.
   Each panel takes a fill variant, so contrast lives inside the block.
   -------------------------------------------------------------------------- */
.mosaic{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;}
.mpanel{padding:38px 34px;display:flex;flex-direction:column;}
.mpanel.w3{grid-column:span 3;}
.mpanel.w2{grid-column:span 2;}
.mpanel .step-lab{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:26px;}
.mpanel h3{font-size:clamp(20px,1.9vw,26px);font-weight:800;letter-spacing:-0.02em;line-height:1.2;margin-bottom:14px;}
.mpanel p{font-size:15px;line-height:1.6;margin-bottom:8px;}
.mpanel .shot{margin-top:auto;padding-top:26px;}
.mpanel .shot .placeholder{height:180px;border-radius:12px;font-size:12px;}

/* fills */
.mpanel.paper{background:var(--paper);color:var(--ink);}
.mpanel.paper .step-lab{color:var(--purple);}
.mpanel.paper p{color:var(--grey);}
.mpanel.paper .shot .placeholder{background-color:var(--cream-deep);}

.mpanel.wash{background:var(--purple-wash);color:var(--ink);}
.mpanel.wash .step-lab{color:var(--purple);}
.mpanel.wash p{color:var(--grey);}
.mpanel.wash .shot .placeholder{background-color:var(--paper);}

.mpanel.sun{background:var(--sun);color:var(--ink);}
.mpanel.sun .step-lab{color:var(--plum);}
.mpanel.sun p{color:rgba(20,18,26,.78);}
.mpanel.sun .shot .placeholder{background-color:var(--paper);border-color:var(--plum);color:var(--plum);}

.mpanel.plum{background:var(--plum);color:#fff;}
.mpanel.plum h3{color:#fff;}
.mpanel.plum .step-lab{color:var(--purple-lift);}
.mpanel.plum p{color:rgba(255,255,255,.68);}
.mpanel.plum .shot .placeholder{background-color:rgba(255,255,255,.06);border-color:var(--purple-lift);color:var(--purple-lift);}

@media (max-width:900px){
  .mosaic{grid-template-columns:1fr;}
  .mpanel.w3,.mpanel.w2{grid-column:span 1;}
  .mpanel{padding:28px 24px;}
  .mpanel .step-lab{margin-bottom:18px;}
}

/* --------------------------------------------------------------------------
   28. BLOCK: numbered quad — 2x2 of numbered cells in one bordered container.
   Pairs with .splitlist for a copy-left / steps-right How it works.
   Quieter than .steps because the cells share one frame.
   -------------------------------------------------------------------------- */
.numgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.numcell{background:var(--paper);padding:32px 30px;}
.numcell .n{display:block;font-size:15px;font-style:italic;color:var(--grey);margin-bottom:24px;}
.numcell h3{font-size:18px;font-weight:800;letter-spacing:-0.015em;margin-bottom:10px;}
.numcell p{font-size:14px;color:var(--grey);line-height:1.6;}
.section-dark .numgrid,.section-dark .numcell{background:transparent;border-color:rgba(255,255,255,.24);}
.section-dark .numgrid{background:rgba(255,255,255,.14);}
.section-dark .numcell{background:var(--plum);}
.section-dark .numcell h3{color:#fff;}
.section-dark .numcell p,.section-dark .numcell .n{color:rgba(255,255,255,.6);}

/* --------------------------------------------------------------------------
   29. BLOCK: featured story — a case study with a stat column.
   Left panel carries the narrative, right column stacks the numbers.
   Every figure here needs verification before publishing.
   -------------------------------------------------------------------------- */
.storyhead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:36px;}
.storyhead .when{font-size:14px;color:var(--grey);flex:none;padding-bottom:6px;}
.fstory{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.fstory-main{background:var(--paper);padding:44px 40px;display:flex;flex-direction:column;}
.fstory-main .brand{font-size:21px;font-weight:800;letter-spacing:-0.02em;margin-bottom:30px;color:var(--grey);}
.fstory-main h3{font-size:clamp(23px,2.5vw,33px);font-weight:800;letter-spacing:-0.025em;line-height:1.18;margin-bottom:18px;}
.fstory-main p{color:var(--grey);font-size:16px;line-height:1.65;margin-bottom:30px;}
.fstory-main .btn{align-self:flex-start;margin-top:auto;}
.fstory-stats{display:grid;gap:1px;background:var(--line);}
.fstat{background:var(--cream-deep);padding:32px 30px;display:flex;flex-direction:column;justify-content:center;}
.fstat b{display:block;font-size:clamp(32px,3.8vw,48px);font-weight:800;letter-spacing:-0.035em;line-height:1;margin-bottom:10px;}
.fstat span{font-size:14px;color:var(--grey);line-height:1.45;}
.fstat.sun{background:var(--sun);}
.fstat.sun b{color:var(--plum);}
.fstat.sun span{color:rgba(20,18,26,.72);}

@media (max-width:900px){
  .numgrid{grid-template-columns:1fr;}
  .storyhead{flex-direction:column;align-items:flex-start;gap:12px;}
  .fstory{grid-template-columns:1fr;}
  .fstory-main{padding:30px 26px;}
}

/* --------------------------------------------------------------------------
   30. BLOCK: stack — full-width rows, one per idea, each with its own fill.
   Number, heading, plain body, then a bordered takeaway line. Alternate
   .flip to swap the media side. Fills: .paper .wash .sun .plum .sand
   Use instead of tabs when every point deserves to be read, not clicked.
   -------------------------------------------------------------------------- */
.stack{display:flex;flex-direction:column;gap:20px;}
.stackrow{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;
  border-radius:20px;padding:44px 42px;}
.stackrow .n{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;}
.stackrow h3{font-size:clamp(21px,2.2vw,29px);font-weight:800;letter-spacing:-0.025em;line-height:1.16;margin-bottom:14px;}
.stackrow p{font-size:16px;line-height:1.65;margin-bottom:20px;}
.stackrow .note{font-size:14px;font-weight:700;line-height:1.55;border-left:2px solid;padding-left:16px;margin-bottom:0;}
.stackrow .media .placeholder{height:230px;}
.stackrow.flip .media{order:-1;}

.stackrow.paper{background:var(--paper);border:1px solid var(--line);color:var(--ink);}
.stackrow.paper .n{color:var(--purple);} .stackrow.paper p{color:var(--grey);}
.stackrow.paper .note{border-color:var(--purple);color:var(--ink);}
.stackrow.paper .placeholder{background-color:var(--cream-deep);}

.stackrow.sand{background:var(--cream-deep);color:var(--ink);}
.stackrow.sand .n{color:var(--purple);} .stackrow.sand p{color:var(--grey);}
.stackrow.sand .note{border-color:var(--purple);color:var(--ink);}
.stackrow.sand .placeholder{background-color:var(--paper);}

.stackrow.wash{background:var(--purple-wash);color:var(--ink);}
.stackrow.wash .n{color:var(--purple);} .stackrow.wash p{color:var(--grey);}
.stackrow.wash .note{border-color:var(--purple);color:var(--ink);}
.stackrow.wash .placeholder{background-color:var(--paper);}

.stackrow.sun{background:var(--sun);color:var(--ink);}
.stackrow.sun .n{color:var(--plum);} .stackrow.sun p{color:rgba(20,18,26,.78);}
.stackrow.sun .note{border-color:var(--plum);color:var(--ink);}
.stackrow.sun .placeholder{background-color:var(--paper);border-color:var(--plum);color:var(--plum);}

.stackrow.plum{background:var(--plum);color:#fff;}
.stackrow.plum h3{color:#fff;}
.stackrow.plum .n{color:var(--purple-lift);} .stackrow.plum p{color:rgba(255,255,255,.7);}
.stackrow.plum .note{border-color:var(--purple-lift);color:#fff;}
.stackrow.plum .placeholder{background-color:rgba(255,255,255,.06);border-color:var(--purple-lift);color:var(--purple-lift);}

@media (max-width:900px){
  .stackrow{grid-template-columns:1fr;gap:28px;padding:30px 26px;}
  .stackrow.flip .media{order:0;}
}

/* --------------------------------------------------------------------------
   31. BLOCK: integration grid — 4-up cards of icon tile, name, description.
   Category eyebrow above each grid. Cards are links to the detail page.
   -------------------------------------------------------------------------- */
.cat-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin:0 0 28px;}
.cat-head h2{font-size:clamp(24px,2.6vw,34px);}
.cat-head p{color:var(--grey);font-size:16px;line-height:1.65;padding-bottom:4px;}
.intgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.intgrid + .cat-head{margin-top:72px;}
.intcard{display:block;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:24px 22px;text-decoration:none;color:var(--ink);transition:transform .15s ease, box-shadow .15s ease;}
.intcard:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(25,22,18,.08);}
.intcard .tile{width:40px;height:40px;border-radius:11px;background:var(--purple-wash);color:var(--purple);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin-bottom:18px;letter-spacing:-0.02em;}
.intcard h3{font-size:17px;font-weight:800;letter-spacing:-0.01em;margin-bottom:8px;}
.intcard p{font-size:14px;color:var(--grey);line-height:1.55;}
.intcard .via{display:inline-block;margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--purple);background:var(--purple-wash);padding:3px 9px;border-radius:100px;}
.intcard.soon{opacity:.72;}
.section-dark .intcard{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38);color:#fff;}
.section-dark .intcard h3{color:#fff;}
.section-dark .intcard p{color:rgba(255,255,255,.62);}
.section-dark .intcard .tile{background:rgba(255,255,255,.20);color:var(--purple-lift);}
.section-dark .cat-head p{color:rgba(255,255,255,.68);}

@media (max-width:900px){
  .cat-head{grid-template-columns:1fr;gap:12px;}
  .intgrid{grid-template-columns:1fr 1fr;gap:14px;}
  .intgrid + .cat-head{margin-top:52px;}
}
@media (max-width:560px){ .intgrid{grid-template-columns:1fr;} }

/* --------------------------------------------------------------------------
   32. DIRECTORY PAGES — integration detail.
   These are catalogue entries, not landing pages: a compact header band with
   a breadcrumb, a metadata sidebar, and an article column. No marketing hero.
   -------------------------------------------------------------------------- */
.dirhead{background:var(--cream-deep);border-bottom:1px solid var(--line);padding:56px 0 40px;}
.dirhead-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;}
.dirhead-id{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;}
.dirlogo{width:76px;height:76px;flex:none;border-radius:16px;background:var(--plum);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;letter-spacing:-0.03em;}
.dirhead h1{font-size:clamp(32px,4vw,44px);font-weight:800;letter-spacing:-0.03em;margin-bottom:12px;}
.dirhead .tagline{font-size:18px;color:var(--grey);line-height:1.5;max-width:520px;}
.dirhead-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-end;}
.dirhead-cta .btn{white-space:nowrap;}
.dircrumb{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.dircrumb a{color:var(--purple);text-decoration:none;}
.dircrumb span{color:var(--grey);}

.dirbody{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;padding:64px 0 0;}
.metacard{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 24px;position:sticky;top:94px;}
.metapair{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.metapair .m{width:36px;height:36px;border-radius:9px;background:var(--purple-wash);color:var(--purple);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;}
.metapair .m.alt{background:var(--plum);color:#fff;}
.metapair .bar{width:1px;height:22px;background:var(--line);}
.metarow{padding:12px 0;border-top:1px solid var(--line);}
.metarow dt{font-size:12px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;}
.metarow dd{font-size:15px;font-weight:600;}
.metarow dd a{display:block;color:var(--purple);text-decoration:none;font-weight:700;padding:2px 0;}
.share{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);}
.share h3{font-size:16px;font-weight:800;margin-bottom:8px;}
.share p{font-size:14px;color:var(--grey);margin-bottom:14px;}
.share button{font-family:inherit;font-size:14px;font-weight:700;padding:10px 18px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;}
.share button:hover{border-color:var(--purple);color:var(--purple);}

.article > * + *{margin-top:22px;}
.article h2{font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-0.02em;margin-top:52px;}
.article h2:first-child{margin-top:0;}
.article p{font-size:17px;line-height:1.7;color:var(--grey);}
.article p strong,.article li strong{color:var(--ink);font-weight:700;}
.article ul{list-style:none;}
.article ul li{position:relative;padding:8px 0 8px 28px;font-size:16px;line-height:1.6;}
.article ul li::before{content:"";position:absolute;left:4px;top:17px;width:7px;height:7px;border-radius:100px;background:var(--purple);}
.article .note-box{background:var(--cream-deep);border-left:3px solid var(--purple);border-radius:0 12px 12px 0;padding:18px 22px;}
.article .note-box p{font-size:15px;margin:0;}
.article .shot{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;}
.article .shot .placeholder{height:230px;border-radius:10px;background-color:var(--cream-deep);}
.article .fineprint{font-size:14px;font-style:italic;color:var(--grey);}
.article-cta{display:flex;gap:12px;flex-wrap:wrap;padding-top:8px;}

.ctabar{background:var(--cream-deep);border:1px solid var(--line);border-radius:18px;
  padding:32px 36px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;}
.ctabar h2{font-size:24px;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px;}
.ctabar p{color:var(--grey);font-size:15px;}
.intcard .cat{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}

@media (max-width:900px){
  .dirhead{padding:36px 0 28px;}
  .dirhead-grid{grid-template-columns:1fr;gap:24px;}
  .dirhead-cta{flex-direction:row;align-items:center;}
  .dirlogo{width:58px;height:58px;font-size:20px;border-radius:13px;}
  .dirhead-id{gap:16px;}
  .dirbody{grid-template-columns:1fr;gap:36px;padding-top:40px;}
  .metacard{position:static;}
  .article h2{margin-top:36px;}
  .ctabar{padding:26px 24px;}
}

/* --------------------------------------------------------------------------
   33. BLOCK: worked examples — trigger, what to send, why it works.
   Used in the "What you can build" section on integration pages.
   -------------------------------------------------------------------------- */
.builds{display:grid;gap:16px;}
.build{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;}
.build .trig{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--purple);background:var(--purple-wash);padding:5px 12px;border-radius:100px;margin-bottom:16px;}
.build h3{font-size:19px;font-weight:800;letter-spacing:-0.015em;margin-bottom:10px;}
.build p{font-size:15px;line-height:1.6;color:var(--grey);margin-bottom:0;}
.build .says{margin:16px 0 0;padding:14px 18px;background:var(--cream-deep);border-left:3px solid var(--purple);
  border-radius:0 10px 10px 0;font-size:15px;line-height:1.55;color:var(--ink);font-style:italic;}
.build .why{margin-top:14px;font-size:14px;font-weight:700;color:var(--ink);}
.section-dark .build{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38);}
.section-dark .build h3{color:#fff;}
.section-dark .build p{color:rgba(255,255,255,.62);}
.section-dark .build .trig{background:rgba(255,255,255,.20);color:var(--purple-lift);}
.section-dark .build .says{background:rgba(255,255,255,.12);border-left-color:var(--purple-lift);color:#fff;}
.section-dark .build .why{color:#fff;}
@media (max-width:900px){ .build{padding:22px 20px;} }

/* --------------------------------------------------------------------------
   34. BLOCK: changelog — dated entries grouped by month.
   Left column carries the date and a type tag; right column the entry.
   -------------------------------------------------------------------------- */
.log{max-width:900px;}
.logmonth{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);
  padding:44px 0 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.logmonth:first-child{padding-top:0;}
.logentry{display:grid;grid-template-columns:132px 1fr;gap:32px;padding:24px 0;border-top:1px solid var(--line);}
.logentry .meta{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.logentry .when{font-size:14px;font-weight:700;color:var(--grey);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.logtag{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;white-space:nowrap;}
.logtag.new{background:var(--sun);color:var(--ink);}
.logtag.improved{background:var(--purple-wash);color:var(--purple);}
.logtag.integration{background:var(--plum);color:#fff;}
.logentry h3{font-size:19px;font-weight:800;letter-spacing:-0.015em;margin-bottom:8px;}
.logentry p{font-size:15px;line-height:1.65;color:var(--grey);}
.logentry ul{list-style:none;margin-top:12px;}
.logentry ul li{position:relative;padding:5px 0 5px 22px;font-size:14px;color:var(--grey);}
.logentry ul li::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:100px;background:var(--purple);}

/* about page: values and story */
.valuegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.value{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px 28px;}
.value .n{display:block;font-size:13px;font-weight:800;color:var(--purple);margin-bottom:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.value h3{font-size:19px;font-weight:800;letter-spacing:-0.015em;margin-bottom:10px;}
.value p{font-size:15px;line-height:1.65;color:var(--grey);}
.section-dark .value{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38);}
.section-dark .value h3{color:#fff;}
.section-dark .value p{color:rgba(255,255,255,.66);}
.section-dark .value .n{color:var(--purple-lift);}

@media (max-width:900px){
  .logentry{grid-template-columns:1fr;gap:12px;}
  .logentry .meta{flex-direction:row;align-items:center;gap:12px;}
  .valuegrid{grid-template-columns:1fr;}
}

/* --------------------------------------------------------------------------
   35. Updates page — centred changelog hero and richer log entries.
   -------------------------------------------------------------------------- */
.prihero{background:var(--cream-deep);border-bottom:1px solid var(--line);padding:84px 0 72px;text-align:center;}
.prihero .sub{font-size:18px;line-height:1.6;color:var(--grey);max-width:620px;margin:0 auto 30px;}
.prihero h1{font-size:clamp(36px,5vw,58px);font-weight:800;letter-spacing:-0.035em;margin-bottom:20px;}
.prihero h1 .coin{color:var(--purple);}
.prihero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;}
.prihero .icongrid{max-width:940px;margin:0 auto;text-align:left;}
.updhero{background:var(--cream-deep);border-bottom:1px solid var(--line);padding:84px 0 72px;text-align:center;}
.updhero .eyebrow{color:var(--grey);}
.updhero h1{font-size:clamp(36px,5vw,58px);font-weight:800;letter-spacing:-0.035em;margin-bottom:22px;}
.updhero h1 .dot{color:var(--purple);}
.updhero p{font-size:18px;line-height:1.6;color:var(--grey);max-width:560px;margin:0 auto 34px;}
.updpills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.updpill{font-size:13px;font-weight:700;padding:8px 18px;border-radius:100px;background:var(--paper);border:1px solid var(--line);}
.updpill.new{border-color:var(--sun);color:var(--gold-deep);}
.updpill.improved{border-color:var(--purple);color:var(--purple);}
.updpill.integration{border-color:var(--plum);color:var(--plum);}

.logwrap{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start;}
.logaside{position:sticky;top:94px;}
.logaside .eyebrow{color:var(--grey);}
.logaside h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:16px;}
.logaside p{font-size:15px;line-height:1.7;color:var(--grey);}
.logcount{display:inline-block;margin-top:20px;font-size:13px;font-weight:700;padding:6px 14px;
  border-radius:100px;background:var(--purple-wash);color:var(--purple);}
.logentry{grid-template-columns:150px 1fr;}
.logentry .num{font-size:13px;font-weight:700;color:var(--grey);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:10px;display:block;}
.logentry h3{font-size:clamp(19px,1.9vw,24px);letter-spacing:-0.02em;margin-bottom:10px;}
.logentry p{font-size:16px;}
.logentry .more{display:inline-block;margin-top:14px;font-size:14px;font-weight:800;color:var(--purple);text-decoration:none;}
.logentry.major{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px;margin:14px 0;}
.logentry.major + .logentry{border-top:1px solid var(--line);}

@media (max-width:900px){
  .updhero{padding:52px 0 44px;}
  .logwrap{grid-template-columns:1fr;gap:32px;}
  .logaside{position:static;}
  .logentry.major{padding:22px 20px;}
}

/* --------------------------------------------------------------------------
   36. Editorial pages — About and other non-product pages.
   Generic pages must NOT reuse .hero-v2. That layout sells a feature; these
   pages set out a position, so they lead with type rather than a product panel.
   -------------------------------------------------------------------------- */
.edhero{background:var(--cream-deep);border-bottom:1px solid var(--line);padding:76px 0 84px;}
.edhero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:64px;align-items:end;}
.edhero h1{font-size:clamp(38px,6vw,72px);font-weight:800;letter-spacing:-0.04em;line-height:1.03;}
.edhero h1 .dot{color:var(--purple);}
.edhero .lede{border-top:1px solid var(--line);padding-top:20px;font-size:16px;line-height:1.65;color:var(--grey);}

.edrow{display:grid;grid-template-columns:.62fr 1.38fr;gap:64px;align-items:start;}
.edrow + .edrow{margin-top:80px;}
.edrow .side h2{font-size:clamp(21px,2.1vw,27px);font-weight:800;letter-spacing:-0.02em;line-height:1.25;}
.edrow .side p{font-size:15px;line-height:1.7;color:var(--grey);margin-top:14px;}
.edlead{font-size:clamp(21px,2.4vw,31px);font-weight:800;letter-spacing:-0.025em;line-height:1.28;margin-bottom:28px;}
.edcols{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
.edcols p{font-size:15px;line-height:1.75;color:var(--grey);}
.edpoints{list-style:none;display:grid;gap:12px;}
.edpoints li{position:relative;padding-left:26px;font-size:16px;line-height:1.6;}
.edpoints li::before{content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:100px;background:var(--purple);}
.edpoints li b{font-weight:800;}
.section-dark .edrow .side p,.section-dark .edcols p{color:rgba(255,255,255,.68);}
.section-dark .edpoints li::before{background:var(--purple-lift);}

.readmore{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.readcard{display:block;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  text-decoration:none;color:var(--ink);transition:transform .15s ease, box-shadow .15s ease;}
.readcard:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(25,22,18,.08);}
.readcard h3{font-size:18px;font-weight:800;letter-spacing:-0.015em;margin-bottom:8px;}
.readcard p{font-size:14px;color:var(--grey);line-height:1.55;margin-bottom:14px;}
.readcard .go{font-size:14px;font-weight:800;color:var(--purple);}

@media (max-width:900px){
  .edhero{padding:44px 0 48px;}
  .edhero-grid{grid-template-columns:1fr;gap:28px;align-items:start;}
  .edrow{grid-template-columns:1fr;gap:24px;}
  .edrow + .edrow{margin-top:52px;}
  .edcols{grid-template-columns:1fr;gap:18px;}
  .readmore{grid-template-columns:1fr;}
}

/* ===================================================================
   37. CONTRAST RHYTHM
   --ink is a text token, not a section background (see CLAUDE.md).
   .final/.statband/.results predate that rule and still paint #14121A,
   so every dark band on a migrated page renders near-black instead of
   plum. Repointed here rather than edited in place, so the eight
   unmigrated pages keep the legacy look until they move.
   =================================================================== */
.theme-v2 .final,
.theme-v2 .statband,
.theme-v2 .results{background:var(--plum);}
.theme-v2 .final .trust-chips span::before{color:var(--purple-lift);}
.theme-v2 .updpill.new{color:var(--sun-deep);}   /* was --gold-deep, retired */

/* Sun band. The one loud light section on a page; --sun-soft is 1.07:1
   against white, so it needs --sun-line or it vanishes. */
.section-sun{background:var(--sun-soft);border-top:1px solid var(--sun-line);
  border-bottom:1px solid var(--sun-line);}
.section-sun .eyebrow{color:var(--sun-deep);}
.section-sun .edpoints li::before{background:var(--sun-deep);}

/* Loud card in a plum group. One per group, never every card. */
.section-dark .value.sun{background:var(--sun);border-color:var(--sun);}
.section-dark .value.sun .n{color:var(--plum);}
.section-dark .value.sun h3{color:var(--ink);}
.section-dark .value.sun p{color:rgba(20,18,26,.72);}

/* Changelog: major entries lifted off the white page, newest one loud. */
.theme-v2 .logentry.major{background:var(--purple-wash);border-color:transparent;}
.theme-v2 .logentry.major .when,
.theme-v2 .logentry.major .num{color:var(--purple);}
.theme-v2 .logentry.major.lead{background:var(--sun);border-color:var(--sun);}
.theme-v2 .logentry.major.lead .when,
.theme-v2 .logentry.major.lead .num{color:var(--sun-deep);}
.theme-v2 .logentry.major.lead h3{color:var(--ink);}
.theme-v2 .logentry.major.lead p,
.theme-v2 .logentry.major.lead ul li{color:rgba(20,18,26,.75);}
.theme-v2 .logentry.major.lead ul li::before{background:var(--plum);}
.theme-v2 .logentry.major.lead .more{color:var(--plum);}
.theme-v2 .logentry.major.lead .logtag.new{background:var(--plum);color:#fff;}

/* --- 37b. Four-up groups, and card fills that step ---------------------
   Four cards in the 3-column .valuegrid orphaned the fourth on its own row.
   .two is the balanced 2x2. Fills step through the scale so a group does not
   read as "one loud card and three identical ones": the loud card sits
   diagonally opposite the light one, with two mid purples between. --sun is
   still the only loud fill, per the one-loud-card-per-group rule. */
.valuegrid.two{grid-template-columns:repeat(2,1fr);}

.section-dark .value.lift{background:var(--plum-lift);border-color:rgba(255,255,255,.38);}
.section-dark .value.deep{background:var(--plum-deep);border-color:rgba(255,255,255,.38);}
.section-dark .value.wash{background:var(--purple-wash);border-color:var(--purple-wash);}
.section-dark .value.wash .n{color:var(--purple);}
.section-dark .value.wash h3{color:var(--ink);}
.section-dark .value.wash p{color:rgba(20,18,26,.72);}

/* Same problem in the three-up stat groups: sun then two identical cards. */
.theme-v2 .result-card.deep{background:var(--plum-deep);border-color:rgba(255,255,255,.10);}

@media(max-width:900px){
  .valuegrid.two{grid-template-columns:1fr;}
}

/* ===================================================================
   38. HUE CONTRAST
   The palette ran white / light violet / plum — three values of one hue.
   Value rhythm was fine; the pages were monotone in HUE. --sun is defined
   as the contrast accent but appeared on one band site-wide. These give the
   directory pages the one loud card the rule already allows.
   Text on yellow is always --ink. Yellow is never a button or a link.
   =================================================================== */
/* A --sun card on a white or violet section is only 1.42:1 by luminance,
   so the border carries the boundary. --sun-deep is the same hue family,
   6.37:1 on white and 5.59:1 on the violet band. On plum the fill already
   clears 10.7:1 and needs no help. */
.build.sun{background:var(--sun);border-color:var(--sun-deep);}
.build.sun p{color:rgba(20,18,26,.74);}
.build.sun .trig{background:rgba(20,18,26,.12);color:var(--plum);}
.build.sun .says{background:rgba(255,255,255,.55);border-left-color:var(--plum);color:var(--ink);}
.build.sun .why{color:var(--plum);}

/* Hairlines on a sun band: --line is a cool grey and reads wrong on the warm
   tint, so the sun band restates its borders in --sun-line. */
.section-sun .deflist,.section-sun .defrow,.section-sun .listrow,
.section-sun .spec-grid li{border-color:var(--sun-line);}
.section-sun .step-card,.section-sun .fcard,.section-sun .usecase-card{border-color:var(--sun-line);}

/* One loud cell in a numbered quad, so a plum "how it works" band is not
   four identical panels. Same rule as .value.sun and .result-card.sun. */
.section-dark .numcell.sun{background:var(--sun);}
.section-dark .numcell.sun h3{color:var(--ink);}
.section-dark .numcell.sun p,.section-dark .numcell.sun .n{color:rgba(20,18,26,.72);}

/* ===================================================================
   39. FEATURE-CARD FILLS
   The platform grid ran plum / plum / paper / wash / wash / paper — six
   cards in one hue family. These add a pale-yellow and a deepest-purple
   fill so the six read as six, and widen the value range without making
   the yellow common: only .sun is loud, .sunsoft is a tint.
   =================================================================== */
.fcard.sunsoft{background:var(--sun-soft);border:1px solid var(--sun-line);color:var(--ink);}
.fcard.sunsoft .lab{color:var(--sun-deep);}
.fcard.sunsoft h3 em{color:var(--purple);}
.fcard.sunsoft p{color:var(--grey);}
.fcard.sunsoft li::before{color:var(--purple);}

.fcard.deep{background:var(--plum-deep);color:#fff;}
.fcard.deep .lab,.fcard.deep h3 em,.fcard.deep li::before{color:var(--purple-lift);}
.fcard.deep p{color:rgba(255,255,255,.68);}
.fcard.deep .btn-primary{background:var(--purple-lift);color:var(--plum);box-shadow:none;}
.fcard.deep .btn-primary:hover{background:#CDB4FA;box-shadow:none;}

/* The "only in Yuko" pill is purple-lift on plum, which is 1.44:1 on a
   yellow card. On .sun it becomes a plum pill instead. */
.fcard.sun .lab .flag{background:var(--plum);color:#fff;}

/* ===================================================================
   40. PLAN CARDS  —  .plans + .plan
   Four-up pricing grid. Fills follow the six-fill rule: one loud card
   (.sun, the most popular plan), the rest stepping through the scale so
   four plans read as four. Yellow is a surface here, never a button:
   the CTA on the sun card is plum, per the yellow rules.
   =================================================================== */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch;}
.plan{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:30px 26px;position:relative;}
.plan .tier{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple);margin-bottom:14px;}
.plan .price{font-size:42px;font-weight:800;letter-spacing:-0.03em;line-height:1;}
.plan .per{font-size:16px;font-weight:700;color:var(--grey);letter-spacing:0;}
.plan .orders{font-size:13.5px;line-height:1.5;color:var(--grey);margin:12px 0 20px;min-height:42px;}
.plan .orders b{color:var(--ink);font-weight:800;}
.plan .btn{width:100%;justify-content:center;margin-bottom:22px;}
.plan .inc{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px;}
.plan ul{list-style:none;display:grid;gap:9px;margin-top:auto;}
.plan li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--grey);}
.plan li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:100px;
  border:2px solid var(--purple);}
.plan .tag{position:absolute;top:-11px;left:26px;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 12px;border-radius:100px;background:var(--plum);color:#fff;}

.plan.wash{background:var(--purple-wash);border-color:var(--purple-wash);}
.plan.sun{background:var(--sun);border-color:var(--sun);}
.plan.sun .tier{color:var(--plum);}
.plan.sun .per,.plan.sun .orders{color:rgba(20,18,26,.72);}
.plan.sun .orders b{color:var(--ink);}
.plan.sun li{color:rgba(20,18,26,.78);}
.plan.sun li::before{border-color:var(--plum);}
.plan.sun .btn-primary{background:var(--plum);color:#fff;box-shadow:none;}
.plan.sun .btn-primary:hover{background:#3F1A85;}
.plan.plum{background:var(--plum);color:#fff;border-color:var(--plum);}
.plan.plum .tier,.plan.plum li::before{color:var(--purple-lift);border-color:var(--purple-lift);}
.plan.plum .per,.plan.plum .orders{color:rgba(255,255,255,.66);}
.plan.plum .orders b{color:#fff;}
.plan.plum .inc{color:#fff;}
.plan.plum li{color:rgba(255,255,255,.74);}
.plan.plum .btn-primary{background:var(--purple-lift);color:var(--plum);box-shadow:none;}
.plan.plum .btn-primary:hover{background:#CDB4FA;}

/* Orders-to-cost table */
.grow{width:100%;border-collapse:collapse;margin-top:28px;}
.grow th,.grow td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--sun-line);font-size:15px;}
.grow thead th{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sun-deep);}
.grow td.cost{font-weight:800;}
.grow tr:last-child td{border-bottom:0;}

@media(max-width:900px){
  .plans{grid-template-columns:1fr;}
  .grow th,.grow td{padding:11px 8px;font-size:14px;}
}