/* ============================================================
   Motif marketing site — Twilight Canvas language (root DESIGN.md)
   Dusk (dark, Studio register — default) + Dawn (light, Motif register).
   SF Pro system stack only. Ember accent. Widget material:
   specular top edge + 0.5px hairline ring + one soft lift.
   ============================================================ */
:root, [data-theme="dusk"]{
  color-scheme:dark;
  --wall:
    radial-gradient(1300px 760px at 76% -12%, #423D78 0%, transparent 58%),
    radial-gradient(1000px 640px at 8% 110%, #26305C 0%, transparent 55%),
    radial-gradient(760px 520px at 96% 88%, rgba(255,124,92,.12) 0%, transparent 60%),
    linear-gradient(165deg, #15151F 0%, #1A1B2E 52%, #131321 100%);
  --glass: rgba(30,30,48,.55);
  --glass-strong: rgba(28,28,46,.78);
  --widget: rgba(255,255,255,.055);
  --widget-edge: rgba(255,255,255,.10);
  --specular: rgba(255,255,255,.14);
  --hairline: rgba(255,255,255,.10);
  --well: rgba(0,0,0,.24);
  --dockfill: rgba(26,26,42,.62);
  --lift: 0 10px 30px rgba(6,6,16,.32), 0 1px 2px rgba(6,6,16,.3);
  --lift-sm: 0 3px 10px rgba(6,6,16,.2), 0 1px 1px rgba(6,6,16,.28);
  --ink-0:#F0EEF6; --ink-1:#C6C3D4; --ink-2:#908DA3; --ink-3:#615E74;
  --ember:#FF8264; --ember-deep:#EF5F3D; --ember-ink:#1C0E09;
  --ember-soft:rgba(255,130,100,.16);
  --agent:#C9B8FF; --agent-soft:rgba(155,124,255,.15);
  --live:#5BE49B; --warn:#FFB077; --alert:#FF7A6B;
}
[data-theme="dawn"]{
  color-scheme:light;
  --wall:
    radial-gradient(1300px 760px at 76% -12%, #DCD8F5 0%, transparent 58%),
    radial-gradient(1000px 640px at 8% 110%, #C9D4F2 0%, transparent 55%),
    radial-gradient(760px 520px at 96% 88%, rgba(255,138,102,.16) 0%, transparent 60%),
    linear-gradient(165deg, #F2F1F7 0%, #EAEAF4 52%, #F5F2EF 100%);
  --glass: rgba(255,255,255,.55);
  --glass-strong: rgba(255,255,255,.75);
  --widget: rgba(255,255,255,.5);
  --widget-edge: rgba(255,255,255,.85);
  --specular: rgba(255,255,255,.95);
  --hairline: rgba(52,48,80,.13);
  --well: rgba(52,48,80,.06);
  --dockfill: rgba(255,255,255,.6);
  --lift: 0 10px 30px rgba(58,52,100,.12), 0 1px 2px rgba(58,52,100,.08);
  --lift-sm: 0 3px 10px rgba(58,52,100,.08), 0 1px 1px rgba(58,52,100,.06);
  --ink-0:#232130; --ink-1:#47445A; --ink-2:#767388; --ink-3:#A5A2B5;
  --ember:#E9542F; --ember-deep:#CE431F; --ember-ink:#fff;
  --ember-soft:rgba(233,84,47,.12);
  --agent:#6B54C8; --agent-soft:rgba(122,100,220,.13);
  --live:#1E9A5F; --warn:#C4701E; --alert:#D8492F;
}

*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--wall); background-attachment:fixed; color:var(--ink-1);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
.disp{font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif}
.mono{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3,h4{color:var(--ink-0); letter-spacing:-.02em; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif}
p{text-wrap:pretty}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
::selection{background:var(--ember-soft); color:var(--ink-0)}
:is(a,button,[tabindex],input):focus-visible{outline:2px solid var(--ember); outline-offset:2px; border-radius:8px}
img{max-width:100%}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
@media (max-width:640px){.wrap{padding:0 18px}}

/* ---------- widget material ---------- */
.widget{
  border-radius:20px; background:var(--widget);
  backdrop-filter:blur(28px) saturate(160%); -webkit-backdrop-filter:blur(28px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--specular), inset 0 0 0 .5px var(--widget-edge), var(--lift-sm);
}
.widget.focused{background:var(--glass-strong);
  box-shadow:inset 0 1px 0 var(--specular), inset 0 0 0 .5px var(--widget-edge), var(--lift)}
.well{background:var(--well); border-radius:14px}

/* ---------- nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:80; height:56px;
  background:var(--glass); backdrop-filter:blur(28px) saturate(170%); -webkit-backdrop-filter:blur(28px) saturate(170%);
  box-shadow:inset 0 -0.5px 0 var(--hairline)}
.nav-in{max-width:1180px; margin:0 auto; padding:0 28px; height:100%; display:flex; align-items:center; gap:22px}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:15.5px; color:var(--ink-0); letter-spacing:-.01em}
.brand .mk{width:22px;height:22px;border-radius:7px; background:linear-gradient(140deg,#FF8E6E,var(--ember-deep)); flex:0 0 22px}
.nav a.lnk{font-size:13.5px; font-weight:500; color:var(--ink-2); transition:color .15s ease}
.nav a.lnk:hover, .nav a.lnk[aria-current="page"]{color:var(--ink-0)}
.nav .sp{flex:1}
.nav .theme-btn{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:999px; background:var(--widget); color:var(--ink-1);
  box-shadow:inset 0 0 0 .5px var(--hairline)}
.nav .theme-btn:hover{background:var(--ember-soft)}
@media (max-width:900px){.nav a.lnk{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px;
  height:42px; padding:0 22px; font-size:14px; font-weight:700; white-space:nowrap;
  transition:filter .15s ease, background .15s ease, transform .15s ease}
.btn-p{background:linear-gradient(160deg, color-mix(in srgb, var(--ember) 88%, #fff), var(--ember-deep));
  color:var(--ember-ink); box-shadow:0 1px 3px color-mix(in srgb, var(--ember-deep) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-p:hover{filter:brightness(1.06)}
.btn-g{background:var(--widget); color:var(--ink-0);
  box-shadow:inset 0 0 0 .5px var(--hairline), inset 0 1px 0 var(--specular)}
.btn-g:hover{background:var(--well)}
.btn-sm{height:34px; padding:0 16px; font-size:13px}
.btn-t{color:var(--ink-2); font-size:13.5px; font-weight:600}
.btn-t:hover{color:var(--ink-0)}

/* ---------- type blocks ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.eyebrow i{width:7px;height:7px;border-radius:2px;background:var(--ember);transform:rotate(45deg)}
.h-hero{font-size:clamp(38px, 5.4vw, 64px); font-weight:800; line-height:1.04; letter-spacing:-.03em}
.h-sec{font-size:clamp(26px, 3.4vw, 38px); font-weight:800; line-height:1.12; letter-spacing:-.025em}
.h-card{font-size:18px; font-weight:800; letter-spacing:-.015em}
.lede{font-size:17px; line-height:1.6; color:var(--ink-1)}
.sub{font-size:14px; color:var(--ink-2)}
.cap{font-size:11.5px; color:var(--ink-2)}
.limit{font-size:12.5px; color:var(--ink-3); font-style:italic}
b, strong{color:var(--ink-0); font-weight:700}

/* ---------- pills ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 11px;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--well); color:var(--ink-1)}
.pill i{width:6px;height:6px;border-radius:50%;display:inline-block;background:currentColor}
.pill.live{color:var(--live)} .pill.pend{color:var(--warn)} .pill.urgent{color:var(--alert)}
.pill.ai{color:var(--agent); background:var(--agent-soft)}
.pill.accent{color:var(--ember); background:var(--ember-soft)}

/* ---------- sections ---------- */
section{padding:96px 0}
section.tight{padding:64px 0}
.sec-head{max-width:720px; margin-bottom:44px}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head p{margin-top:14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---------- product-slice chrome ---------- */
.slice{padding:0; overflow:hidden}
.slice .w-head{display:flex; align-items:center; gap:8px; padding:12px 16px;
  box-shadow:inset 0 -0.5px 0 var(--hairline)}
.tl{display:flex; gap:6px}
.tl i{width:10px;height:10px;border-radius:50%;display:block; background:var(--ink-3); opacity:.6}
.focused .tl i:nth-child(1){background:#FF5F57; opacity:1}
.focused .tl i:nth-child(2){background:#FEBC2E; opacity:1}
.focused .tl i:nth-child(3){background:#28C840; opacity:1}
.w-title{font-size:12.5px; font-weight:700; color:var(--ink-0)}
.w-sub{font-size:11px; color:var(--ink-2)}
.slice .body{padding:16px 18px}

/* pipeline checklist */
.check-row{display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; color:var(--ink-1)}
.check-row .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:0 0 20px;
  font-size:10px; font-weight:800; background:var(--well); color:var(--ink-3)}
.check-row.done .ic{background:color-mix(in srgb, var(--live) 18%, transparent); color:var(--live)}
.check-row.now .ic{background:var(--ember-soft); color:var(--ember)}
.check-row .who{margin-left:auto; font-size:10.5px; color:var(--ink-3)}
.gate-chip{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:8px 15px;
  font-size:11px; font-weight:700; letter-spacing:.07em; background:var(--ember-soft); color:var(--ember)}
.gate-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ember); animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}

/* footer */
footer{padding:64px 0 40px; box-shadow:inset 0 0.5px 0 var(--hairline);
  background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
footer h5{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px}
footer a{display:block; font-size:13px; color:var(--ink-2); padding:4px 0}
footer a:hover{color:var(--ink-0)}
.foot-note{margin-top:36px; padding-top:20px; box-shadow:inset 0 0.5px 0 var(--hairline);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:11.5px; color:var(--ink-3)}
.newsletter input{background:var(--well); border:.5px solid var(--hairline); border-radius:11px;
  height:38px; padding:0 12px; color:var(--ink-0); font:inherit; font-size:13px; width:100%; max-width:260px; outline:none}
.newsletter input:focus{border-color:var(--ember); box-shadow:0 0 0 3px var(--ember-soft)}

/* reveal animation base (GSAP adds motion; static without JS) */
.rv{opacity:1}
.js .rv{opacity:0; transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1; transform:none}
  *{animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* prose (rendered markdown pages) */
.prose{max-width:780px; margin:0 auto}
.prose h1{font-size:32px; margin:0 0 8px}
.prose h2{font-size:22px; margin:36px 0 10px}
.prose h3{font-size:17px; margin:26px 0 8px}
.prose p, .prose li{font-size:14.5px; line-height:1.65; color:var(--ink-1); margin:10px 0}
.prose ul, .prose ol{padding-left:22px}
.prose blockquote{border-left:3px solid var(--ember); padding:8px 16px; margin:16px 0;
  background:var(--well); border-radius:0 12px 12px 0; color:var(--ink-2)}
.prose table{width:100%; border-collapse:collapse; margin:16px 0; font-size:13px}
.prose th{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  text-align:left; padding:8px 10px; box-shadow:inset 0 -0.5px 0 var(--hairline)}
.prose td{padding:9px 10px; box-shadow:inset 0 -0.5px 0 var(--hairline); vertical-align:top}
.prose code{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.9em; background:var(--well);
  border-radius:6px; padding:1px 6px}
.prose a{color:var(--ember); font-weight:600}
.prose hr{border:0; height:.5px; background:var(--hairline); margin:28px 0}
.draft-banner{border-radius:14px; background:color-mix(in srgb, var(--warn) 14%, transparent);
  box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--warn) 35%, transparent);
  padding:14px 18px; font-size:13px; color:var(--ink-0); margin:0 0 26px}

.receipts[hidden]{display:none}

/* ---------- v2 display primitives (site-wide) ---------- */
.kicker{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.kicker b{color:var(--ember); font-weight:600}
.h-mega{font-size:clamp(44px, 7vw, 88px); line-height:1; font-weight:800; letter-spacing:-.036em; color:var(--ink-0);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
.h-mega em{font-style:normal; color:var(--ember)}
.slab-num{font-size:clamp(80px, 11vw, 140px); line-height:.9; font-weight:800; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px var(--ink-3);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
/* replacement wall */
.stack-wall{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:1000px){.stack-wall{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stack-wall{grid-template-columns:1fr}}
.stack-tile{padding:15px 17px; border-radius:16px; position:relative}
.stack-tile .cat{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.stack-tile .tools{display:block; font-size:14.5px; font-weight:700; color:var(--ink-0); margin-top:5px; letter-spacing:-.01em}
.stack-tile .price{display:block; font-size:11.5px; color:var(--ink-2); margin-top:4px; font-variant-numeric:tabular-nums}
.stack-tile .arrow{position:absolute; right:14px; top:14px; font-size:11px; color:var(--live); font-weight:700}
.stack-tile.soon{opacity:.55}
.stack-tile.soon .arrow{color:var(--warn)}
/* ticker */
.ticker-wrap{overflow:hidden; padding:9vh 0}
.ticker{display:flex; white-space:nowrap; will-change:transform}
.ticker span{font-size:clamp(28px, 3.6vw, 44px); font-weight:800; letter-spacing:-.025em; padding-right:3.2vw;
  color:var(--ink-3); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
.ticker span.on{color:var(--ink-0)}
.ticker span em{font-style:normal; color:var(--ember)}
/* calculator */
.calc{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.calc-list{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:640px){.calc-list{grid-template-columns:1fr}}
.calc-row{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px; background:var(--well); cursor:pointer;
  transition:background .15s ease}
.calc-row:hover{background:var(--widget)}
.calc-row input{accent-color:var(--ember); width:16px; height:16px; flex:0 0 16px}
.calc-row .t{font-size:13px; font-weight:600; color:var(--ink-0)}
.calc-row .m{display:block; font-size:10.5px; color:var(--ink-2)}
.calc-row .p{margin-left:auto; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.calc-total{position:sticky; top:80px; padding:26px 28px; text-align:left}
.calc-total .big{font-size:clamp(36px, 4.6vw, 54px); font-weight:800; letter-spacing:-.03em; color:var(--ink-0);
  font-variant-numeric:tabular-nums; line-height:1}
.calc-total .vs{font-size:13px; color:var(--ink-2); margin-top:14px; line-height:1.6}
.calc-total .vs b{color:var(--ember); font-size:18px}
.seg-mini{display:inline-flex; gap:2px; padding:3px; border-radius:11px; background:var(--well); margin-top:6px}
.seg-mini button{padding:6px 13px; border-radius:8px; font-size:12px; font-weight:700; color:var(--ink-2); cursor:pointer}
.seg-mini button.on{background:var(--glass-strong); color:var(--ink-0);
  box-shadow:inset 0 1px 0 var(--specular), inset 0 0 0 .5px var(--widget-edge)}