/* Product site (plan 26) -- one stylesheet. Near-black studio canvas, hairline borders, one ember accent, an
   editorial serif for the words that matter (documentary titles), Inter Tight for everything else. Dark by default,
   light when the visitor prefers it. */
/* Self-hosted OFL fonts (plan 29 H3c, owner Q-074): Inter Tight, Instrument Serif, JetBrains Mono -- latin + latin-ext */
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg:#09090b; --bg2:#0e0e11; --bg3:#131317; --ink:#ededef; --ink2:#c9c9cf; --muted:#8a8a94;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12); --card:rgba(255,255,255,.022); --card2:rgba(255,255,255,.045);
  --ember:#ff6a2b; --ember2:#ffc47d; --grad:linear-gradient(120deg,#ff6a2b 0%,#ff9a52 55%,#ffc47d 100%);
  --ok:#3ecf8e; --bad:#ff5a5f; --r:14px; --r2:10px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -20px rgba(0,0,0,.7);
  --sans:"Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --btn-bg:#ededef; --btn-ink:#09090b;
  color-scheme:dark;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#fafaf9; --bg2:#f4f3f1; --bg3:#ecebe8; --ink:#111113; --ink2:#2b2b31; --muted:#64646d;
          --line:rgba(17,17,19,.08); --line2:rgba(17,17,19,.14); --card:#fff; --card2:#fff;
          --shadow:0 1px 2px rgba(17,17,19,.05), 0 20px 50px -24px rgba(17,17,19,.22);
          --btn-bg:#111113; --btn-ink:#fafaf9; color-scheme:light; }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--sans); letter-spacing:-.005em;
       -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
::selection { background:color-mix(in srgb, var(--ember) 35%, transparent); }
a { color:inherit; text-decoration:none; }
img, video { max-width:100%; display:block; }
.wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
.narrow { max-width:820px; }
.center { text-align:center; }
.muted { color:var(--muted); }
.small { font-size:14px; }
:focus-visible { outline:2px solid var(--ember); outline-offset:2px; border-radius:6px; }

/* nav */
.nav { position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(16px);
       background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line); }
.nav-in { display:flex; align-items:center; gap:32px; height:64px; }
.logo { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:17px; letter-spacing:-.02em; }
.mark { width:28px; height:28px; flex:none; display:block; }
.links { display:flex; gap:26px; }
.links a { color:var(--muted); font-size:14px; font-weight:500; transition:color .2s; }
.links a:hover { color:var(--ink); }
.nav-cta { margin-left:auto; display:flex; gap:8px; }
.burger { display:none; margin-left:auto; background:none; border:0; padding:10px; cursor:pointer; }
.burger span { display:block; width:20px; height:1.5px; background:var(--ink); margin:5px 0; border-radius:2px; }

/* buttons: solid ink for the main action, quiet hairline for the rest; the accent is kept for meaning */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 16px;
       border-radius:var(--r2); font:500 14px/1 var(--sans); letter-spacing:-.01em; color:var(--ink); cursor:pointer;
       border:1px solid var(--line2); background:var(--card); transition:background .2s, border-color .2s, transform .15s, box-shadow .2s; }
.btn:hover { background:var(--card2); border-color:color-mix(in srgb, var(--ink) 22%, transparent); }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--btn-bg); color:var(--btn-ink); border-color:transparent;
               box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 8px 24px -8px rgba(255,106,43,.45); }
.btn.primary:hover { background:color-mix(in srgb, var(--btn-bg) 88%, var(--ember)); }
.btn.ghost { background:transparent; }
.btn.lg { height:46px; padding:0 22px; font-size:15px; border-radius:12px; }
.btn[disabled] { opacity:.5; cursor:default; }

/* hero */
.hero { position:relative; padding:96px 0 72px; overflow:hidden; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); }
.hero::after { content:""; position:absolute; inset:-40% -10% auto; height:80%; z-index:-1;
  background:radial-gradient(ellipse 50% 50% at 30% 30%, rgba(255,106,43,.16), transparent 70%),
             radial-gradient(ellipse 40% 40% at 75% 20%, rgba(255,196,125,.08), transparent 70%); }
.glow { display:none; }
.hero-in { display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 8px; border-radius:999px;
        border:1px solid var(--line2); background:var(--card); font-size:13px; color:var(--ink2); }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 4px rgba(255,106,43,.15); }
h1 { font-weight:600; font-size:clamp(42px, 6.2vw, 76px); line-height:1; letter-spacing:-.045em; margin:22px 0 22px; }
.grad, h1 em, h2 em { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em;
        background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em; }
.lead { font-size:18px; line-height:1.65; color:var(--muted); max-width:540px; margin:0 0 30px; }
.cta-row { display:flex; gap:10px; flex-wrap:wrap; }
.chips { display:flex; gap:18px; flex-wrap:wrap; list-style:none; padding:0; margin:30px 0 0; }
.chips li { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.chips li::before { content:""; width:14px; height:14px; border-radius:50%; flex:none;
  background:center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23ff6a2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
              color-mix(in srgb, var(--ember) 14%, transparent); }
.frame { border-radius:16px; overflow:hidden; border:1px solid var(--line2); background:#000;
         box-shadow:var(--shadow), 0 0 0 6px color-mix(in srgb, var(--ink) 3%, transparent); }
.frame-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; background:#0d0d10; border-bottom:1px solid rgba(255,255,255,.06);
             font:500 11px/1 var(--mono); color:#77777f; letter-spacing:.02em; }
.frame-bar i { width:9px; height:9px; border-radius:50%; background:#26262c; }
.frame-bar span { margin-left:10px; }
.frame video { width:100%; aspect-ratio:16/9; object-fit:cover; }

/* stats */
.stats { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-row div { padding:30px 20px; border-right:1px solid var(--line); }
.stat-row div:last-child { border-right:0; }
.stat-row b { display:block; font:400 34px/1.1 var(--serif); letter-spacing:-.01em; margin-bottom:6px; }
.stat-row span { color:var(--muted); font-size:13px; }

/* sections */
.block { padding:112px 0; }
.block.alt { background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
h2 { font-weight:600; font-size:clamp(30px, 4.2vw, 50px); letter-spacing:-.035em; line-height:1.05; margin:0 0 14px; text-align:center; }
h3 { letter-spacing:-.02em; }
.sub { color:var(--muted); font-size:17px; text-align:center; max-width:640px; margin:0 auto 56px; }
.sub.left, .split h2 { text-align:left; margin-left:0; }
.cards { display:grid; gap:16px; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.cards.two { grid-template-columns:repeat(2,1fr); margin-top:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px;
        transition:border-color .25s, background .25s; }
.card:hover { border-color:var(--line2); background:var(--card2); }
.card h3 { margin:18px 0 8px; font-size:19px; font-weight:600; }
.card p { color:var(--muted); margin:0; font-size:15px; }
.ico { font-size:22px; width:44px; height:44px; display:grid; place-items:center; border-radius:12px;
       background:var(--bg3); border:1px solid var(--line2); }
.features { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);
            border-radius:var(--r); overflow:hidden; }
.feat { background:var(--bg); padding:30px 26px; transition:background .25s; }
.block.alt .feat { background:var(--bg2); }
.feat:hover { background:var(--bg3); }
.feat h3 { margin:0 0 8px; font-size:16px; font-weight:600; }
.feat h3::before { content:""; display:block; width:18px; height:2px; border-radius:2px; background:var(--grad); margin-bottom:16px; }
.feat p { margin:0; color:var(--muted); font-size:14.5px; }
.shot { margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--card); transition:border-color .25s; }
.shot:hover { border-color:var(--line2); }
.shot img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.shot:hover img { transform:scale(1.03); }
.shot figcaption { padding:16px 18px 18px; display:grid; gap:4px; }
.shot figcaption b { font-weight:600; letter-spacing:-.01em; }
.shot figcaption span { color:var(--muted); font-size:13px; }
.steps { list-style:none; padding:0; margin:48px 0 0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; counter-reset:s;
         border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.steps li { position:relative; padding:26px 22px; counter-increment:s; border-right:1px solid var(--line); background:var(--bg); }
.block.alt .steps li { background:var(--bg2); }
.steps li:last-child { border-right:0; }
.steps li::before { content:"0" counter(s); font:500 12px/1 var(--mono); color:var(--ember); letter-spacing:.06em; }
.steps b { display:block; margin:14px 0 6px; font-size:16px; font-weight:600; }
.steps span { color:var(--muted); font-size:14px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.code { background:#0c0c0f; border:1px solid rgba(255,255,255,.08); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); overflow:auto; }
.code pre { margin:0; color:#d6d6dc; font:13.5px/1.75 var(--mono); }
.code .c { color:#62626b; }
.ticks { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; }
.ticks li::before { content:"—"; color:var(--ember); margin-right:10px; }

/* pricing */
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:28px; }
.plan { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px 22px; display:flex; flex-direction:column; gap:8px; position:relative; }
.plan.hot { border-color:color-mix(in srgb, var(--ember) 55%, transparent);
            box-shadow:0 0 0 1px color-mix(in srgb, var(--ember) 30%, transparent), 0 24px 60px -30px rgba(255,106,43,.5); }
.plan.hot::after { content:"Most popular"; position:absolute; top:-11px; left:20px; font:500 11px/1 var(--sans); letter-spacing:.02em;
                   padding:5px 9px; border-radius:999px; background:var(--btn-bg); color:var(--btn-ink); }
.plan h3 { margin:0; font-size:15px; font-weight:600; color:var(--ink2); }
.plan .mins { font:400 46px/1.05 var(--serif); letter-spacing:-.01em; margin-top:6px; }
.plan .mins small { font:400 14px var(--sans); color:var(--muted); }
.plan .price { color:var(--muted); font-size:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.plan ul { list-style:none; padding:0; margin:8px 0 16px; display:grid; gap:8px; color:var(--ink2); font-size:14px; flex:1; }
.plan ul li { display:flex; gap:8px; }
.plan ul li::before { content:"✓"; color:var(--ember); }

/* faq, pages */
.faq { max-width:780px; }
details { border-bottom:1px solid var(--line); padding:20px 0; }
summary { cursor:pointer; font-weight:500; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:20px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--muted); font-size:22px; line-height:1; transition:transform .2s; }
details[open] summary::after { transform:rotate(45deg); }
details p { color:var(--muted); margin:12px 0 0; }
.page-head { padding:88px 0 32px; position:relative; }
.page-head h1 { font-size:clamp(36px, 5vw, 58px); }
.big-card { padding:36px; text-align:center; margin-bottom:8px; }
.prose h1 { font-size:40px; }
.final { padding:128px 0; text-align:center; border-top:1px solid var(--line);
         background:radial-gradient(ellipse 50% 70% at 50% 110%, rgba(255,106,43,.16), transparent 70%); }
.final h2 { margin-bottom:28px; }

/* footer */
.foot { border-top:1px solid var(--line); padding:64px 0 32px; }
.foot-in { display:grid; grid-template-columns:1.2fr 2fr; gap:48px; }
.foot p { max-width:320px; }
.foot-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.foot h4 { margin:0 0 14px; font-size:13px; font-weight:500; color:var(--ink2); }
.foot-cols a { display:block; color:var(--muted); font-size:14px; padding:4px 0; transition:color .2s; }
.foot-cols a:hover { color:var(--ink); }
.copy { margin-top:48px; padding-top:20px; border-top:1px solid var(--line); }

/* reveal on scroll */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* responsive */
@media (max-width: 1020px) {
  .features { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .steps li { border-bottom:1px solid var(--line); }
}
@media (max-width: 860px) {
  .links, .nav-cta { display:none; }
  .burger { display:block; }
  body.menu-open .links, body.menu-open .nav-cta { display:flex; position:absolute; left:0; right:0; flex-direction:column;
       background:var(--bg); padding:16px 24px; gap:14px; border-bottom:1px solid var(--line); margin:0; }
  body.menu-open .links { top:64px; }
  .hero { padding:60px 0 44px; }
  .hero-in, .split { grid-template-columns:1fr; gap:36px; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .stat-row div:nth-child(2) { border-right:0; }
  .stat-row div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .cards.three, .cards.two { grid-template-columns:1fr; }
  .block { padding:72px 0; }
  .foot-in { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .wrap { padding:0 16px; }
  .features, .steps { grid-template-columns:1fr; }
  .steps li { border-right:0; }
  .foot-cols { grid-template-columns:repeat(2,1fr); }
  h1 { letter-spacing:-.035em; }
}

/* forms (sign-in, link, dashboard, admin) */
.auth { max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:16px; padding:40px 32px; text-align:left;
        box-shadow:var(--shadow); }
.auth h1 { margin:0; font-size:30px; letter-spacing:-.03em; }
.auth:hover { background:var(--card); border-color:var(--line); }
.wide { width:100%; }
.stack { display:flex; flex-direction:column; gap:12px; }
.field { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:500; color:var(--ink2); }
.field input, .field select, .inline input, .inline select, .wrap-row input, .narrow-form input, .narrow-form select {
  font:400 14px/1.4 var(--sans); color:var(--ink); background:var(--bg); border:1px solid var(--line2);
  border-radius:var(--r2); height:40px; padding:0 12px; min-width:0; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .inline input:focus, .inline select:focus, .wrap-row input:focus, .narrow-form input:focus, .narrow-form select:focus {
  outline:none; border-color:color-mix(in srgb, var(--ember) 60%, transparent); box-shadow:0 0 0 3px rgba(255,106,43,.15); }
.code-input { height:56px !important; font:500 24px/1 var(--mono) !important; letter-spacing:.24em; text-align:center; text-transform:uppercase; }
.or { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }
.status { min-height:1.4em; margin:0; font-size:14px; overflow-wrap:anywhere; }
.status.good { color:var(--ok); } .status.bad { color:var(--bad); }
.link { text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line2); }

/* dashboard */
.dash-top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.dash-top h1 { margin:12px 0 4px; font-size:clamp(32px,4vw,44px); }
.dash-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:28px 0; background:var(--line);
             border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.dash-grid .card { border:0; border-radius:0; background:var(--bg); }
.stat { display:flex; flex-direction:column; gap:6px; padding:24px 26px; }
.stat > span:first-child { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.stat b { font:400 44px/1.05 var(--serif); letter-spacing:-.01em; }
.stat:hover, .dash-card:hover { background:var(--bg); border-color:var(--line); }
.dash-card { margin-bottom:16px; background:var(--bg); padding:26px; }
.dash-card h3 { margin:0 0 6px; font-size:17px; font-weight:600; }
.rows { display:flex; flex-direction:column; margin-top:14px; border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; }
.rows:empty { display:none; }
.rows > p { margin:0; padding:14px 16px; }
.rows > h4 { margin:0; padding:12px 16px; font-size:13px; font-weight:500; color:var(--ink2); background:var(--bg2); border-bottom:1px solid var(--line); }
.row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:14px; transition:background .15s; }
.row:last-child { border-bottom:0; }
.row:hover { background:var(--card2); }
.row b { font-weight:600; }
.grow { flex:1; min-width:0; overflow-wrap:anywhere; }
.row-actions, .buy { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.btn.small { height:30px; padding:0 11px; font-size:13px; border-radius:8px; }
.btn.danger { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, var(--line)); }
.btn.danger:hover { background:color-mix(in srgb, var(--bad) 10%, transparent); }
@media (max-width:760px) { .dash-grid { grid-template-columns:1fr; } }

/* admin: a sidebar of sections beside the work area */
.admin-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:28px; align-items:start; margin-top:24px; }
.tabs { display:flex; flex-direction:column; gap:2px; position:sticky; top:84px; }
.tabs button { font:500 14px/1 var(--sans); color:var(--muted); background:transparent; border:0; border-radius:8px;
               padding:10px 12px; cursor:pointer; text-align:left; transition:background .15s, color .15s; }
.tabs button:hover { color:var(--ink); background:var(--card2); }
.tabs button.on { color:var(--ink); background:var(--card2); box-shadow:inset 2px 0 0 var(--ember); }
.tab { margin:0; }
.inline { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.narrow-form { max-width:620px; margin-top:16px; }
.wrap-row { flex-wrap:wrap; }
.wrap-row input { width:120px; height:34px; }
.row.small { font-size:13px; padding:9px 16px; }
.pill#role { text-transform:capitalize; }
@media (max-width:860px) {
  .admin-layout { grid-template-columns:1fr; }
  .tabs { flex-direction:row; flex-wrap:wrap; position:static; }
  .tabs button.on { box-shadow:inset 0 -2px 0 var(--ember); }
}

.row-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font:500 11px/1 var(--sans);
        letter-spacing:.02em; color:var(--muted); background:var(--card2); border:1px solid var(--line); text-transform:capitalize; }
.chip.ok { color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, transparent); border-color:color-mix(in srgb, var(--ok) 25%, transparent); }
.chip.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, transparent); border-color:color-mix(in srgb, var(--bad) 25%, transparent); }
.chip.ember { color:var(--ember2); background:color-mix(in srgb, var(--ember) 12%, transparent); border-color:color-mix(in srgb, var(--ember) 30%, transparent); }

.page-head + .block, .page-head + section.block { padding-top:24px; }
.page-head .sub { margin-bottom:24px; }

/* ---- home (W4b): preloader, ember hero, marquee, ways, craft list, stacking cards ----
   Everything is visible by default; the `motion` class (set only when motion is allowed) arms the entrance
   states, and `motion-done` (a 2.5 s failsafe, or motion.js when it finishes) always releases them. */
.preload { display:none; }
.motion .preload { display:flex; position:fixed; inset:0; z-index:100; background:var(--bg); flex-direction:column;
  align-items:center; justify-content:center; gap:18px; transition:opacity .6s ease, visibility .6s; }
.motion-done .preload, .preload.gone { opacity:0; visibility:hidden; pointer-events:none; }
.pl-word { font:400 clamp(44px,8vw,96px)/1 var(--serif); font-style:italic; letter-spacing:-.02em; padding-right:.08em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pl-meta { display:flex; gap:14px; font:500 12px/1 var(--mono); color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.pl-bar { width:min(240px,60vw); height:1px; background:var(--line2); overflow:hidden; }
.pl-bar i { display:block; height:100%; width:0; background:var(--grad); }
.progress-line { position:fixed; top:0; left:0; height:2px; width:100%; z-index:60; background:var(--grad);
  transform-origin:0 50%; transform:scaleX(0); pointer-events:none; }

.home .hero { padding:120px 0 64px; min-height:min(92vh,920px); display:flex; flex-direction:column; justify-content:center; }
.home .hero::after { display:none; }
.ember, .ember-fallback { position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.ember-fallback { background:radial-gradient(ellipse 55% 50% at 28% 30%, rgba(255,106,43,.18), transparent 70%),
                               radial-gradient(ellipse 40% 40% at 78% 22%, rgba(255,196,125,.09), transparent 70%); }
.ember.live + .ember-fallback { display:none; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink2); margin:0; }
.eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 4px rgba(255,106,43,.15); }
.mono { font-family:var(--mono); }
.hero-card { margin:0; display:grid; gap:12px; }
.hero-meta { display:flex; gap:28px; flex-wrap:wrap; margin-top:72px; padding-top:20px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted); letter-spacing:.04em; }
.motion:not(.motion-done) .hero-rise { opacity:0; transform:translateY(18px); }
.motion:not(.motion-done) .hero-title { visibility:hidden; }
/* split words are their own boxes: each carries the gradient, or the italic line turns transparent */
h1 em *, h2 em * { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em; }

.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:22px 0; }
.mq-track { display:flex; gap:48px; width:max-content; animation:mq 38s linear infinite; }
.mq-track span { font:400 clamp(28px,4vw,48px)/1 var(--serif); letter-spacing:-.01em; white-space:nowrap; }
.mq-track span.o { font-style:italic; color:transparent; -webkit-text-stroke:1px var(--muted); }
@keyframes mq { to { transform:translateX(calc(-50% - 24px)); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation:none; } }

.numbers { border-bottom:1px solid var(--line); }
.num-row { display:grid; grid-template-columns:repeat(4,1fr); }
.num-row > div { padding:36px 22px; border-right:1px solid var(--line); }
.num-row > div:last-child { border-right:0; }
.num-row b { font:400 clamp(40px,5vw,60px)/1 var(--serif); letter-spacing:-.02em; }
.num-row sup { font:400 24px var(--serif); color:var(--ember); }
.num-row span { display:block; margin-top:10px; font-size:12px; color:var(--muted); letter-spacing:.03em; }

.home section.ways, .home section.craft, .home section.process, .home section.made, .home section.byo,
.home section.pricing-teaser, .home section.faq-wrap { padding:120px 0; }
.sec-no { font-size:12px; color:var(--ember); letter-spacing:.08em; text-transform:uppercase; margin:0 0 18px; }
.home h2 { text-align:left; max-width:860px; font-size:clamp(34px,5vw,64px); }
.ways-head { margin-bottom:48px; }
.ways-pin { position:relative; }
.ways-track { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1160px; margin:0 auto; padding:0 24px; }
.way { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card); display:flex; flex-direction:column; }
.way-media { aspect-ratio:16/10; overflow:hidden; background:#000; position:relative; }
.way-media img { width:100%; height:100%; object-fit:cover; }
.way-copy { padding:24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.way-copy h3 { margin:4px 0 0; font:400 30px/1.1 var(--serif); letter-spacing:-.01em; }
.way-copy p { margin:0; color:var(--muted); font-size:15px; flex:1; }
.way-ui { display:flex; flex-direction:column; justify-content:space-between; padding:22px;
  background:radial-gradient(ellipse 70% 60% at 30% 30%, #2a1b12, #0b0a09); }
.ui-rec { display:flex; align-items:center; gap:8px; font-size:12px; color:#d8d8dc; }
.rec { width:9px; height:9px; border-radius:50%; background:var(--bad); animation:rec 1.4s ease-in-out infinite; }
@keyframes rec { 50% { opacity:.25; } }
.ui-lanes { position:relative; height:36px; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.ui-lanes i { position:absolute; top:9px; height:18px; left:var(--x,2%); width:var(--w); border-radius:4px; background:var(--grad); opacity:.85; }
.ui-words { font-size:12px; color:#bcbcc4; }
.ways-progress { display:none; }

.craft-list { list-style:none; padding:0; margin:48px 0 0; border-top:1px solid var(--line); }
.craft-list li { display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr); gap:24px; align-items:baseline;
  padding:28px 0; border-bottom:1px solid var(--line); transition:padding .3s ease; }
.craft-list li:hover { padding-left:12px; }
.craft-list span { font-size:12px; color:var(--ember); }
.craft-list b { font:400 clamp(24px,2.6vw,34px)/1.15 var(--serif); letter-spacing:-.01em; }
.craft-list p { margin:0; color:var(--muted); }

.home .stack { display:grid; gap:0; margin-top:56px; }
.stack-card { position:sticky; top:96px; min-height:260px; border:1px solid var(--line2); border-radius:18px; padding:40px;
  background:var(--bg2); box-shadow:0 -20px 50px -30px rgba(0,0,0,.6); margin-bottom:28px; display:grid;
  grid-template-columns:80px 1fr; column-gap:24px; align-content:start; }
.stack-card.alt { background:var(--bg3); }
.stack-card span { font-size:13px; color:var(--ember); grid-row:span 2; }
.stack-card h3 { margin:0 0 10px; font:400 clamp(30px,3.6vw,48px)/1.05 var(--serif); letter-spacing:-.01em; }
.stack-card p { margin:0; color:var(--muted); font-size:17px; max-width:560px; }

.made .sub.left { margin-bottom:40px; }
.made-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.unmask img { clip-path:inset(0 0 0 0); transition:clip-path 1.1s cubic-bezier(.7,0,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.motion:not(.motion-done) .unmask:not(.in) img { clip-path:inset(0 0 100% 0); }

.home .faq summary { font-size:19px; }
.home .final h2 { text-align:center; margin:0 auto 32px; font-size:clamp(40px,6vw,84px); }

@media (max-width: 860px) {
  .num-row { grid-template-columns:repeat(2,1fr); }
  .num-row > div:nth-child(2) { border-right:0; }
  .num-row > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .ways-track, .made-grid { grid-template-columns:1fr; }
  .craft-list li { grid-template-columns:40px 1fr; }
  .craft-list p { grid-column:2; }
  .stack-card { grid-template-columns:1fr; padding:28px; top:80px; min-height:200px; }
  .stack-card span { grid-row:auto; margin-bottom:12px; }
  .home section.ways, .home section.craft, .home section.process, .home section.made, .home section.byo,
  .home section.pricing-teaser, .home section.faq-wrap { padding:80px 0; }
  .hero-meta { margin-top:44px; gap:16px; }
}
@media (max-width: 560px) { .ways-track { padding:0 16px; } .home .hero { padding:72px 0 48px; min-height:0; } }