/* ===================================================================
   PomoZentra — Shared marketing stylesheet
   One system across every page. Tokens, type, components & the motion
   signature (Z-draw + recurring orange dot) pulled from the Brand &
   Design System and grounded in the real product.
   =================================================================== */

:root{
  /* neutrals — warm */
  --obsidian:#15171c; --graphite:#3a3d44; --slate:#52555d; --muted:#7a7d84;
  --hair:#deddd2; --hair-2:#e7e4d9; --sand:#e8e4d9; --bone:#f4f2ec; --paper:#fbfaf6;
  /* accent — Nozentra orange (tweakable) */
  --o-700:#b4471a; --o-600:#c9521e; --o-500:#e7642b; --o-200:#f6c9ae; --o-100:#fbe6d8;
  /* functional */
  --success:#2e8b74; --warning:#d98a1f; --danger:#c24a42; --info:#3f6fa3;
  /* real product category colors (founder default) */
  --cat-revenue:#5f6b4a;  --cat-revenue-soft:#eaeede;
  --cat-delivery:#4d5a6b; --cat-delivery-soft:#e5e9ef;
  --cat-admin:#7c6a4f;    --cat-admin-soft:#efe8dd;
  --cat-learning:#665a72; --cat-learning-soft:#e9e6ee;
  --cat-personal:#54565c; --cat-personal-soft:#e9e9ec;
  --cat-waste:#8f574c;    --cat-waste-soft:#f0e2df;
  /* radius */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  /* elevation — soft, warm-tinted */
  --e1:0 1px 2px rgba(21,23,28,.06);
  --e2:0 2px 8px rgba(21,23,28,.07), 0 1px 2px rgba(21,23,28,.05);
  --e3:0 8px 24px rgba(21,23,28,.10), 0 2px 6px rgba(21,23,28,.05);
  --e4:0 20px 48px rgba(21,23,28,.16);
  /* motion */
  --ease:cubic-bezier(0.2,0.6,0.2,1);
  --t-fast:120ms; --t-base:200ms; --t-slow:320ms;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bone); color:var(--obsidian);
  font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.sora{ font-family:Sora,sans-serif; }
.mono{ font-family:"JetBrains Mono",monospace; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--o-200); color:var(--obsidian); }

/* ---------- layout ---------- */
.wrap{ max-width:1120px; margin:0 auto; padding:0 32px; }
.wrap-tight{ max-width:760px; margin:0 auto; padding:0 32px; }
section{ position:relative; }
.hr{ border:0; border-top:1px solid var(--hair); margin:0; }

/* eyebrow with the recurring orange dot */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--o-600);
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--o-500);
  box-shadow:0 0 0 4px var(--o-100);
}
.eyebrow.plain::before{ display:none; }

.h-display{
  font-family:Sora,sans-serif; font-weight:600; letter-spacing:-.03em;
  line-height:1.04; margin:0; color:var(--obsidian);
  text-wrap:balance;
}
.lead{ font-size:18px; line-height:1.62; color:var(--slate); margin:0; }
.accent{ color:var(--o-500); }

.card{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-lg); }

/* ---------- buttons ---------- */
.btn{
  font-family:Inter,sans-serif; font-weight:600; font-size:15px; line-height:1;
  border-radius:var(--r-md); border:1px solid transparent; padding:13px 22px;
  cursor:pointer; display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  transition:background var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast),transform .05s,color var(--t-fast);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn .arr{ transition:transform var(--t-base) var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-primary{ background:var(--o-500); color:#fff; box-shadow:var(--e1); }
.btn-primary:hover{ background:var(--o-600); box-shadow:var(--e2); }
.btn-dark{ background:var(--obsidian); color:var(--paper); }
.btn-dark:hover{ background:#23262d; }
.btn-outline{ background:transparent; color:var(--obsidian); border-color:var(--hair); }
.btn-outline:hover{ border-color:var(--graphite); background:var(--paper); }
.btn-ghost{ background:transparent; color:var(--graphite); }
.btn-ghost:hover{ background:var(--sand); color:var(--obsidian); }
.btn-sm{ padding:9px 15px; font-size:13.5px; }
.btn-ondark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.22); }
.btn-ondark:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }

/* ---------- scroll progress (orange dot rides the line) ---------- */
.scrollbar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:80; background:transparent; pointer-events:none; }
.scrollbar .fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--o-600),var(--o-500)); position:relative; }
.scrollbar .dot{ position:absolute; right:-4px; top:50%; width:9px; height:9px; border-radius:50%; background:var(--o-500); transform:translateY(-50%); box-shadow:0 0 0 3px var(--o-100), var(--e1); }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bone) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent; transition:border-color var(--t-base), background var(--t-base);
}
.site-head[data-stuck]{ border-bottom-color:var(--hair); }
.site-head .bar{ display:flex; align-items:center; gap:28px; height:68px; }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand .w{ font-family:Sora,sans-serif; font-weight:600; font-size:18px; letter-spacing:-.025em; color:var(--obsidian); }
.brand .w .dot{ color:var(--o-500); }
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-links a{ position:relative; font-size:14px; font-weight:500; color:var(--slate); text-decoration:none; padding:8px 12px; border-radius:var(--r-sm); transition:color var(--t-fast); }
.nav-links a::after{ content:""; position:absolute; left:12px; bottom:4px; width:6px; height:6px; border-radius:50%; background:var(--o-500); opacity:0; transform:scale(.4); transition:opacity var(--t-fast),transform var(--t-fast) var(--ease); }
.nav-links a:hover{ color:var(--obsidian); }
.nav-links a:hover::after,.nav-links a[aria-current]::after{ opacity:1; transform:scale(1); }
.nav-links a[aria-current]{ color:var(--obsidian); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.nav-cta .signin{ font-size:14px; font-weight:600; color:var(--graphite); text-decoration:none; }
.nav-cta .signin:hover{ color:var(--obsidian); }

/* ---------- Z-draw motion signature ---------- */
.zmark{ display:block; }
.zmark .zpath{ stroke-dasharray:128; stroke-dashoffset:128; }
.zmark .zdot{ transform:scale(0); transform-origin:69px 67px; }
[data-drawn] .zmark .zpath{ animation:zdraw var(--t-slow) var(--ease) forwards; }
[data-drawn] .zmark .zdot{ animation:zdotland 260ms var(--ease) 300ms forwards; }
@keyframes zdraw{ to{ stroke-dashoffset:0; } }
@keyframes zdotland{ 0%{ transform:scale(0); } 65%{ transform:scale(1.28); } 100%{ transform:scale(1); } }
.zmark.static .zpath{ stroke-dashoffset:0; }
.zmark.static .zdot{ transform:scale(1); }

/* ---------- generic section heads ---------- */
.band{ padding:76px 0; }
.band.paper{ background:var(--paper); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.band.ink{ background:var(--obsidian); color:#c7c9cd; border-top:1px solid #23262d; border-bottom:1px solid #23262d; }
.band.ink .h-display{ color:var(--paper); }
.sec-head{ max-width:36ch; }
.sec-head h2{ font-size:40px; margin-top:16px; }

/* ---------- interior page hero ---------- */
.page-hero{ padding:64px 0 40px; border-bottom:1px solid var(--hair); }
.page-hero h1{ font-size:50px; letter-spacing:-.035em; margin-top:18px; }
.page-hero .lead{ margin-top:20px; max-width:46ch; font-size:19px; }
.crumbs{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--obsidian); }
.crumbs .sl{ color:var(--hair); }

/* ---------- pills / chips ---------- */
.pill{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--graphite); background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-pill); padding:6px 13px; }
.pill .cd{ width:8px; height:8px; border-radius:50%; }
.tag-pill{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--o-600); background:var(--o-100); border-radius:var(--r-sm); padding:4px 9px; }

/* ---------- grids ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* ---------- feature cards ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px; }
.feat{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-lg); padding:26px; transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease),border-color var(--t-base); }
.feat:hover{ box-shadow:var(--e3); transform:translateY(-3px); border-color:var(--hair-2); }
.feat .ic{ width:44px; height:44px; border-radius:var(--r-md); background:var(--bone); border:1px solid var(--hair); display:grid; place-items:center; margin-bottom:18px; }
.feat:hover .ic{ background:var(--o-100); border-color:var(--o-200); }
.feat h3{ font-family:Sora,sans-serif; font-weight:600; font-size:18px; letter-spacing:-.01em; margin:0; }
.feat p{ margin:9px 0 0; font-size:14.5px; line-height:1.58; color:var(--slate); }

/* ---------- how it works ---------- */
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:48px; }
.step .num{ display:inline-flex; align-items:center; gap:9px; font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:600; color:var(--o-600); }
.step .num::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--o-500); }
.step .rule{ height:1px; background:var(--hair); margin:16px 0 20px; position:relative; }
.step .rule::after{ content:""; position:absolute; left:0; top:-1px; width:34px; height:3px; border-radius:2px; background:var(--o-500); }
.step h3{ font-family:Sora,sans-serif; font-weight:600; font-size:21px; letter-spacing:-.015em; margin:0; }
.step p{ margin:11px 0 0; font-size:15.5px; line-height:1.6; color:var(--slate); }

/* ---------- categories ---------- */
.cat-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:52px; align-items:center; }
.cat-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cat{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-md); padding:17px 18px; }
.cat .chip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--graphite); }
.cat .chip .cd{ width:9px; height:9px; border-radius:50%; }
.cat p{ margin:9px 0 0; font-size:13px; line-height:1.5; color:var(--slate); }

/* ---------- data tables (scoring / rotation) ---------- */
.dtable{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; }
.dtable th,.dtable td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--hair); font-size:14px; }
.dtable thead th{ font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:var(--bone); }
.dtable tr:last-child td{ border-bottom:0; }
.dtable td .mono,.dtable .num{ font-family:"JetBrains Mono",monospace; }
.dtable .pos{ color:var(--success); font-weight:600; }
.dtable .neg{ color:var(--danger); font-weight:600; }
.dtable .catdot{ display:inline-flex; align-items:center; gap:9px; font-weight:600; }
.dtable .catdot .cd{ width:10px; height:10px; border-radius:50%; }
.rotation td.n{ text-align:center; font-family:"JetBrains Mono",monospace; font-weight:600; }
.rotation td.zero{ color:var(--hair); }
.rotation td.hot{ color:var(--o-600); }

/* ---------- role templates ---------- */
.role-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
.role{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-lg); padding:24px; }
.role h3{ font-family:Sora,sans-serif; font-weight:600; font-size:20px; letter-spacing:-.01em; margin:0 0 4px; }
.role .role-sub{ font-size:13.5px; color:var(--slate); line-height:1.55; margin:0 0 16px; }
.role .role-cats{ display:flex; flex-wrap:wrap; gap:7px; }

/* ---------- the Interval capsule motif ---------- */
.capsule{ height:14px; border-radius:var(--r-pill); background:var(--sand); overflow:hidden; box-shadow:inset 0 1px 2px rgba(21,23,28,.05); }
.capsule i{ display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--o-600),var(--o-500)); width:0%; }

/* ---------- product mock (Interval card) ---------- */
.mock{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-xl); box-shadow:var(--e3); overflow:hidden; }
.mock .topbar{ display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid var(--hair); background:var(--bone); }
.mock .topbar .tdot{ width:9px; height:9px; border-radius:50%; background:#dcd9cd; }
.mock .topbar .pts{ margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11.5px; font-weight:600; color:var(--slate); }
.mock .body{ padding:26px 26px 24px; }
.seg{ display:inline-flex; background:var(--sand); border-radius:var(--r-md); padding:3px; gap:2px; }
.seg button{ font-family:Inter,sans-serif; font-weight:600; font-size:13px; border:0; background:transparent; color:var(--slate); padding:7px 15px; border-radius:7px; cursor:default; transition:background var(--t-fast),color var(--t-fast); }
.seg button.active{ background:var(--paper); color:var(--obsidian); box-shadow:var(--e1); }
.session{ display:flex; align-items:center; gap:13px; margin:24px 0 6px; }
.avatar{ width:46px; height:46px; border-radius:50%; background:var(--obsidian); display:grid; place-items:center; flex:none; }
.avatar .pt{ width:13px; height:13px; border-radius:50%; background:var(--o-500); }
.session .name{ font-family:Sora,sans-serif; font-weight:600; font-size:16px; letter-spacing:-.01em; }
.session .meta{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.session .time{ margin-left:auto; font-family:"JetBrains Mono",monospace; font-weight:600; font-size:20px; color:var(--graphite); letter-spacing:-.01em; }
.mock .undercaps{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.mock .undercaps .lbl{ font-size:12.5px; color:var(--slate); }
.mock .undercaps .lbl b{ color:var(--obsidian); font-weight:600; }
.mockwrap{ position:relative; }
.outchip{ position:absolute; right:26px; bottom:-22px; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-md); box-shadow:var(--e3); padding:11px 14px; display:flex; align-items:center; gap:10px; }
.outchip .ok{ width:26px; height:26px; border-radius:50%; background:var(--o-100); display:grid; place-items:center; flex:none; }
.outchip .t1{ font-size:13px; font-weight:600; color:var(--obsidian); }
.outchip .t2{ font-size:11.5px; color:var(--muted); margin-top:1px; }

/* ---------- hero ---------- */
.hero{ padding:72px 0 56px; }
.hero-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:60px; align-items:center; }
.hero h1{ font-size:64px; letter-spacing:-.035em; }
.hero .sub{ margin-top:24px; font-size:19px; line-height:1.6; color:var(--slate); max-width:30em; }
.hero .cta-row{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero .reassure{ display:flex; align-items:center; gap:18px; margin-top:26px; flex-wrap:wrap; }
.hero .reassure .item{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); }
.hero .reassure .dotmini{ width:7px; height:7px; border-radius:50%; background:var(--o-500); }
.hero .reassure .sep{ width:1px; height:15px; background:var(--hair); }

/* ---------- proof strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; background:var(--paper); }
.stats .cell{ padding:28px 26px; border-right:1px solid var(--hair); }
.stats .cell:last-child{ border-right:0; }
.stats .kpi{ font-family:Sora,sans-serif; font-weight:600; font-size:38px; letter-spacing:-.03em; color:var(--obsidian); }
.stats .kpi .accent{ color:var(--o-500); }
.stats .cap{ font-size:13px; color:var(--muted); font-weight:500; margin-top:5px; }

/* ---------- idea / two-column prose ---------- */
.idea-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:start; }
.idea-grid p{ font-size:19px; line-height:1.62; color:var(--graphite); margin:0; }
.idea-grid p + p{ margin-top:18px; }
.pullquote{ font-family:Sora,sans-serif; font-weight:600; font-size:23px; letter-spacing:-.02em; color:var(--obsidian); margin:26px 0 0; padding-left:20px; border-left:3px solid var(--o-500); }

/* ---------- long-form prose ---------- */
.prose{ max-width:680px; }
.prose > p{ font-size:17px; line-height:1.72; color:var(--graphite); margin:0 0 18px; }
.prose h2{ font-family:Sora,sans-serif; font-weight:600; font-size:26px; letter-spacing:-.02em; color:var(--obsidian); margin:42px 0 14px; }
.prose h3{ font-family:Sora,sans-serif; font-weight:600; font-size:22px; letter-spacing:-.02em; color:var(--obsidian); margin:34px 0 12px; }
.prose strong{ color:var(--obsidian); font-weight:600; }
.prose em{ color:var(--graphite); }
.prose ul,.prose ol{ margin:0 0 18px; padding-left:22px; }
.prose li{ font-size:17px; line-height:1.7; color:var(--graphite); margin:6px 0; }
.prose li::marker{ color:var(--o-500); }
.prose a{ color:var(--o-600); text-decoration:none; font-weight:600; border-bottom:1px solid var(--o-200); }
.prose a:hover{ border-bottom-color:var(--o-500); }
.prose blockquote{ margin:24px 0; padding-left:20px; border-left:3px solid var(--o-500); font-family:Sora,sans-serif; font-weight:500; font-size:20px; line-height:1.5; color:var(--obsidian); }
.callout{ background:var(--bone); border:1px solid var(--hair); border-left:3px solid var(--o-500); border-radius:var(--r-md); padding:20px 22px; margin:26px 0; }
.callout .k{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--o-600); margin-bottom:8px; }
.callout p{ margin:0; font-family:Sora,sans-serif; font-weight:500; font-size:18px; line-height:1.45; color:var(--obsidian); }

/* ---------- article (blog post) ---------- */
.article-head{ max-width:760px; margin:0 auto; padding:64px 32px 24px; }
.article-head h1{ font-size:44px; letter-spacing:-.03em; margin:18px 0 0; line-height:1.08; }
.meta-row{ display:flex; align-items:center; gap:14px; margin-top:22px; font-size:13.5px; color:var(--muted); }
.meta-row .dotsep{ width:4px; height:4px; border-radius:50%; background:var(--hair); }
.byline{ display:flex; align-items:center; gap:11px; }
.byline .ava{ width:34px; height:34px; border-radius:50%; background:var(--obsidian); display:grid; place-items:center; }
.byline .ava .pt{ width:9px; height:9px; border-radius:50%; background:var(--o-500); }
.byline .nm{ font-weight:600; color:var(--graphite); font-size:13.5px; }
.article-body{ max-width:680px; margin:0 auto; padding:20px 32px 40px; }

/* ---------- blog index cards ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.post-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease),border-color var(--t-base); }
.post-card:hover{ box-shadow:var(--e3); transform:translateY(-3px); border-color:var(--hair-2); }
.post-card .cover{ height:148px; position:relative; display:grid; place-items:center; border-bottom:1px solid var(--hair); overflow:hidden; }
.post-card .cover .glyph{ opacity:.92; }
.post-card .pc-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.post-card h3{ font-family:Sora,sans-serif; font-weight:600; font-size:18.5px; letter-spacing:-.015em; line-height:1.25; margin:12px 0 0; color:var(--obsidian); }
.post-card p{ font-size:14px; line-height:1.55; color:var(--slate); margin:10px 0 0; }
.post-card .pc-meta{ margin-top:auto; padding-top:18px; font-size:12px; color:var(--muted); font-family:"JetBrains Mono",monospace; }
.feature-post{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-xl); overflow:hidden; text-decoration:none; }
.feature-post .cover{ min-height:300px; position:relative; display:grid; place-items:center; border-right:1px solid var(--hair); }
.feature-post .fp-body{ padding:44px 44px; display:flex; flex-direction:column; justify-content:center; }
.feature-post h2{ font-family:Sora,sans-serif; font-weight:600; font-size:30px; letter-spacing:-.025em; line-height:1.12; margin:14px 0 0; color:var(--obsidian); }
.feature-post p{ font-size:16px; line-height:1.6; color:var(--slate); margin:16px 0 0; max-width:42ch; }

/* cover backgrounds — quiet, brand-tinted */
.cover-ink{ background:var(--obsidian); }
.cover-sand{ background:linear-gradient(150deg,var(--sand),var(--bone)); }
.cover-paper{ background:var(--paper); }

/* ---------- docs / guide layout ---------- */
.doc-shell{ display:grid; grid-template-columns:240px 1fr; gap:54px; align-items:start; max-width:1120px; margin:0 auto; padding:48px 32px 80px; }
.doc-nav{ position:sticky; top:92px; align-self:start; }
.doc-nav .grp{ font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:22px 0 8px; }
.doc-nav .grp:first-child{ margin-top:0; }
.doc-nav a{ display:block; font-size:14px; color:var(--slate); text-decoration:none; padding:6px 12px; border-radius:var(--r-sm); border-left:2px solid transparent; transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast); }
.doc-nav a:hover{ color:var(--obsidian); background:var(--paper); }
.doc-nav a[aria-current]{ color:var(--obsidian); border-left-color:var(--o-500); font-weight:600; }
.doc-content{ min-width:0; max-width:720px; }
.doc-content section{ padding:14px 0 36px; border-bottom:1px solid var(--hair); margin-bottom:36px; scroll-margin-top:92px; }
.doc-content section:last-child{ border-bottom:0; }
.doc-content h2{ font-family:Sora,sans-serif; font-weight:600; font-size:26px; letter-spacing:-.02em; margin:0 0 6px; }
.doc-content h3{ font-family:Sora,sans-serif; font-weight:600; font-size:17px; margin:26px 0 8px; }
.doc-content p{ font-size:15.5px; line-height:1.68; color:var(--graphite); margin:0 0 14px; }
.doc-content ul{ margin:0 0 16px; padding-left:20px; }
.doc-content li{ font-size:15px; line-height:1.62; color:var(--graphite); margin:5px 0; }
.doc-content li::marker{ color:var(--o-500); }
.kbd{ font-family:"JetBrains Mono",monospace; font-size:12px; background:var(--paper); border:1px solid var(--hair); border-bottom-width:2px; border-radius:6px; padding:2px 7px; color:var(--graphite); }
.note{ background:var(--o-100); border:1px solid var(--o-200); border-radius:var(--r-md); padding:14px 16px; margin:18px 0; font-size:14px; line-height:1.6; color:var(--graphite); }
.note b{ color:var(--o-700); }

/* ---------- changelog ---------- */
.log-list{ max-width:760px; margin:0 auto; padding:8px 32px 40px; }
.log-entry{ display:grid; grid-template-columns:160px 1fr; gap:40px; padding:38px 0; border-top:1px solid var(--hair); }
.log-entry:first-child{ border-top:0; }
.log-side .ver-badge{ display:inline-flex; align-items:center; gap:8px; font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:600; color:var(--obsidian); }
.log-side .ver-badge .cd{ width:8px; height:8px; border-radius:50%; background:var(--o-500); box-shadow:0 0 0 3px var(--o-100); }
.log-side .ver-date{ font-size:12.5px; color:var(--muted); margin-top:8px; }
.log-side .ver-tag{ margin-top:12px; }
.log-body h3{ font-family:Sora,sans-serif; font-weight:600; font-size:20px; letter-spacing:-.015em; margin:0 0 14px; }
.log-body ul{ margin:0; padding:0; list-style:none; }
.log-body li{ position:relative; padding-left:22px; font-size:15px; line-height:1.6; color:var(--graphite); margin:9px 0; }
.log-body li::before{ content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--o-200); border:1px solid var(--o-500); }
.log-body .lk{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:1px 7px; border-radius:5px; margin-right:9px; vertical-align:1px; }
.lk-new{ background:var(--cat-revenue-soft); color:var(--cat-revenue); }
.lk-imp{ background:var(--o-100); color:var(--o-700); }
.lk-fix{ background:var(--cat-delivery-soft); color:var(--cat-delivery); }

/* ---------- contact / forms ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:13px; font-weight:600; color:var(--graphite); }
.field input,.field textarea,.field select{
  font-family:Inter,sans-serif; font-size:15px; color:var(--obsidian);
  background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-md); padding:12px 14px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast); width:100%;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--o-500); box-shadow:0 0 0 3px var(--o-100); }
.contact-info .ci{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--hair); }
.contact-info .ci:last-child{ border-bottom:0; }
.contact-info .ci .ico{ width:40px; height:40px; border-radius:var(--r-md); background:var(--bone); border:1px solid var(--hair); display:grid; place-items:center; flex:none; }
.contact-info .ci h4{ font-family:Sora,sans-serif; font-weight:600; font-size:15px; margin:0 0 3px; }
.contact-info .ci p{ font-size:14px; color:var(--slate); margin:0; line-height:1.5; }
.contact-info .ci a{ color:var(--o-600); text-decoration:none; font-weight:600; }

/* ---------- legal / TOC ---------- */
.legal-shell{ display:grid; grid-template-columns:230px 1fr; gap:54px; align-items:start; max-width:1040px; margin:0 auto; padding:48px 32px 80px; }
.toc{ position:sticky; top:92px; align-self:start; }
.toc .grp{ font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.toc a{ display:block; font-size:13.5px; color:var(--slate); text-decoration:none; padding:5px 0; transition:color var(--t-fast); }
.toc a:hover{ color:var(--o-600); }
.legal-content{ max-width:680px; }
.legal-content .updated{ font-size:13px; color:var(--muted); margin:0 0 30px; }
.legal-content section{ padding-bottom:30px; margin-bottom:8px; scroll-margin-top:92px; }
.legal-content h2{ font-family:Sora,sans-serif; font-weight:600; font-size:21px; letter-spacing:-.015em; margin:0 0 12px; }
.legal-content h2 .n{ font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--o-500); margin-right:10px; }
.legal-content h3{ font-family:Sora,sans-serif; font-weight:600; font-size:16px; margin:22px 0 8px; }
.legal-content p{ font-size:15px; line-height:1.7; color:var(--graphite); margin:0 0 14px; }
.legal-content ul{ margin:0 0 16px; padding-left:20px; }
.legal-content li{ font-size:15px; line-height:1.66; color:var(--graphite); margin:6px 0; }
.legal-content li::marker{ color:var(--o-500); }
.legal-content a{ color:var(--o-600); text-decoration:none; font-weight:600; border-bottom:1px solid var(--o-200); }

/* ---------- jump nav chips ---------- */
.jump-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.jump-chip{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:var(--r-pill); background:var(--paper); border:1px solid var(--hair); font-size:13px; font-weight:600; color:var(--slate); text-decoration:none; transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast); }
.jump-chip:hover{ color:var(--obsidian); border-color:var(--graphite); }
.jump-chip .cd{ width:8px; height:8px; border-radius:50%; }

/* ---------- faq category block ---------- */
.faq-cat{ scroll-margin-top:92px; }
.faq-cat .cat-head{ display:flex; align-items:flex-start; gap:16px; }
.faq-cat .cat-num{ font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:700; color:var(--o-500); padding-top:4px; }
.faq .body a{ color:var(--o-600); text-decoration:none; font-weight:600; border-bottom:1px solid var(--o-200); }
.faq .body a:hover{ border-bottom-color:var(--o-500); }

/* ---------- comparison split / pricing ---------- */
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pick{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-lg); padding:30px 30px 32px; }
.pick h3{ font-family:Sora,sans-serif; font-weight:600; font-size:21px; letter-spacing:-.015em; margin:14px 0 0; }
.pick p{ font-size:15px; line-height:1.62; color:var(--slate); margin:12px 0 0; }
.vs-head{ font-family:"JetBrains Mono",monospace; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.dtable td .yes{ color:var(--success); font-weight:600; }
.dtable td .no{ color:var(--muted); }
.dtable.compare td:first-child{ font-weight:600; color:var(--obsidian); width:26%; }
.dtable.compare td{ vertical-align:top; line-height:1.5; }
.dtable.compare .me{ background:color-mix(in srgb, var(--o-100) 55%, var(--paper)); }

/* ---------- pricing plans ---------- */
.plan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
.plan{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-xl); padding:34px 34px 36px; display:flex; flex-direction:column; }
.plan.feature{ border-color:var(--o-200); box-shadow:var(--e2); position:relative; }
.plan .pname{ font-family:Sora,sans-serif; font-weight:600; font-size:15px; letter-spacing:.02em; text-transform:uppercase; color:var(--graphite); }
.plan .price{ font-family:Sora,sans-serif; font-weight:600; font-size:48px; letter-spacing:-.04em; color:var(--obsidian); margin:14px 0 0; line-height:1; }
.plan .price .per{ font-size:16px; color:var(--muted); font-weight:500; letter-spacing:0; }
.plan .pdesc{ font-size:14.5px; line-height:1.6; color:var(--slate); margin:14px 0 24px; }
.plan .plist{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px; }
.plan .plist li{ position:relative; padding-left:28px; font-size:14.5px; line-height:1.5; color:var(--graphite); }
.plan .plist li svg{ position:absolute; left:0; top:1px; }
.plan .badge{ position:absolute; top:22px; right:24px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--o-700); background:var(--o-100); border:1px solid var(--o-200); border-radius:var(--r-sm); padding:4px 10px; }
.plan .foot-note{ margin-top:auto; }

/* ---------- faq ---------- */
.faq{ margin-top:22px; border-top:1px solid var(--hair); }
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:20px 4px; font-family:Sora,sans-serif; font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--obsidian); }
.faq summary::-webkit-details-marker{ display:none; }
.faq .plus{ margin-left:auto; flex:none; width:24px; height:24px; border-radius:50%; background:var(--bone); border:1px solid var(--hair); display:grid; place-items:center; color:var(--o-600); transition:transform var(--t-base) var(--ease),background var(--t-fast); }
.faq details[open] .plus{ transform:rotate(45deg); background:var(--o-100); border-color:var(--o-200); }
.faq .body{ padding:0 4px 22px; font-size:15.5px; line-height:1.66; color:var(--slate); max-width:64ch; }

/* ---------- CTA band ---------- */
.cta{ background:var(--obsidian); border-radius:var(--r-xl); padding:64px 56px; position:relative; overflow:hidden; }
.cta .rings{ position:absolute; right:-60px; top:50%; transform:translateY(-50%); opacity:.9; }
.cta-inner{ position:relative; max-width:30em; }
.cta h2{ font-family:Sora,sans-serif; font-weight:600; font-size:42px; letter-spacing:-.03em; line-height:1.06; color:var(--paper); margin:0; }
.cta p{ margin:18px 0 0; font-size:18px; line-height:1.6; color:#a7a9b0; }
.cta .cta-row{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

/* ---------- footer ---------- */
.site-foot{ background:var(--obsidian); color:#9ea1a9; margin-top:8px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:38px; }
.site-foot .brand .w{ color:var(--paper); }
.site-foot .tag{ font-size:14px; line-height:1.6; color:#83868e; max-width:30ch; margin:16px 0 0; }
.site-foot .mottos{ font-family:"JetBrains Mono",monospace; font-size:12px; color:#6c6f77; margin-top:20px; display:inline-flex; align-items:center; gap:8px; }
.site-foot .mottos::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--o-500); }
.foot-col h4{ font-family:Sora,sans-serif; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#c7c9cd; margin:0 0 14px; }
.foot-col a{ display:block; font-size:14px; color:#9ea1a9; text-decoration:none; padding:5px 0; transition:color var(--t-fast); }
.foot-col a:hover{ color:var(--paper); }
.foot-rule{ border:0; border-top:1px solid rgba(255,255,255,.1); }
.foot-base{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-base .copy{ font-size:13px; color:#6c6f77; }
.foot-base .links{ display:flex; gap:22px; }
.foot-base .links a{ font-size:13px; color:#83868e; text-decoration:none; }
.foot-base .links a:hover{ color:var(--paper); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity 560ms var(--ease), transform 560ms var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid,.idea-grid,.cat-grid,.contact-grid,.feature-post{ grid-template-columns:1fr; gap:40px; }
  .feat-grid,.role-grid,.post-grid{ grid-template-columns:1fr 1fr; }
  .how-grid{ grid-template-columns:1fr; gap:28px; }
  .hero h1{ font-size:52px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .doc-shell{ grid-template-columns:1fr; gap:0; }
  .doc-nav{ display:none; }
  .legal-shell{ grid-template-columns:1fr; gap:24px; }
  .toc{ position:static; }
  .feature-post .cover{ border-right:0; border-bottom:1px solid var(--hair); min-height:200px; }
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
  .split-2,.plan-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .wrap,.wrap-tight{ padding:0 22px; }
  .nav-links{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stats .cell:nth-child(2){ border-right:0; }
  .stats .cell:nth-child(1),.stats .cell:nth-child(2){ border-bottom:1px solid var(--hair); }
  .feat-grid,.cat-list,.role-grid,.post-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:42px; }
  .page-hero h1{ font-size:38px; }
  .sec-head h2,.idea-grid h2{ font-size:32px !important; }
  .cta{ padding:44px 28px; }
  .cta h2{ font-size:32px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .jump-grid .jump-chip{ font-size:12px; padding:8px 12px; }
  .outchip{ right:8px; }
  .log-entry{ grid-template-columns:1fr; gap:14px; }
  .article-head h1{ font-size:34px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .zmark .zpath{ stroke-dashoffset:0 !important; animation:none !important; }
  .zmark .zdot{ transform:scale(1) !important; animation:none !important; }
  .btn,.feat,.nav-links a::after,.post-card{ transition:none; }
}

/* motion kill switch (Tweaks) */
[data-motion="off"] .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
[data-motion="off"] .zmark .zpath{ stroke-dashoffset:0 !important; animation:none !important; }
[data-motion="off"] .zmark .zdot{ transform:scale(1) !important; animation:none !important; }
[data-motion="off"] .capsule i{ transition:none !important; }