/* =========================================================================
   Corporate to Creator · funnel pages (system B)
   Nate's own world: warm off-white, near-black ink, his signature yellow
   (#FFDF54) used as fills and highlighter marks, condensed caps (Anton) over
   a clean grotesk (Inter). Light, editorial, unpretentious.
   ========================================================================= */
@font-face { font-family: "Anton"; src: url("fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root{
  --bg:#f6f2ec; --bg-2:#efe9e0;
  --surface:#fffdf9; --surface-2:#f3eee6;
  --ink:#0d0c0b; --text:#141210; --text-2:#57514a; --text-3:#6b645c;
  --line:rgba(20,18,16,.12); --line-soft:rgba(20,18,16,.07);
  --accent:#ffdf54; --accent-deep:#e9c21c; --accent-ink:#141210;
  --accent-soft:rgba(255,223,84,.32);
  --pink:#e94fb9;
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --radius:18px; --maxw:1120px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;background:transparent}
/* one continuous page canvas (no seams between sections) */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% -8%, rgba(255,223,84,.34), transparent 65%),
    radial-gradient(40% 30% at 100% 40%, rgba(255,223,84,.12), transparent 70%),
    radial-gradient(40% 30% at 0% 75%, rgba(233,79,185,.05), transparent 70%),
    linear-gradient(180deg,var(--bg),var(--bg-2))}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--accent-ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:880px}
.section{padding:clamp(64px,10vh,112px) 0;position:relative}
h1,h2,h3{margin:0}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.02;color:var(--ink)}
h1{font-size:clamp(38px,5.6vw,72px)}
h2{font-size:clamp(32px,4.4vw,54px)}
h3{font-weight:700;letter-spacing:-.015em}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);margin:0 0 20px}
.lead{font-size:clamp(17px,1.9vw,20px);color:var(--text-2);margin:22px auto 0;max-width:58ch;line-height:1.55}
.sec-head{text-align:center;max-width:820px;margin:0 auto clamp(48px,7vh,72px)}
/* the highlighter mark: his yellow, drawn behind a phrase */
.hl{background:linear-gradient(transparent 12%, var(--accent) 12%, var(--accent) 92%, transparent 92%);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:17px;
  padding:18px 36px;border-radius:999px;border:0;cursor:pointer;min-height:52px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.btn .ar{transition:transform .3s var(--ease)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 14px 34px -14px rgba(13,12,11,.55);position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(110deg,transparent,rgba(255,223,84,.35),transparent);transition:transform .7s var(--ease)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(13,12,11,.6)}
.btn-primary:hover::before{transform:translateX(110%)}
.btn-primary:hover .ar{transform:translateX(4px)}
.btn-primary .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,223,84,.25)}

/* proof grid (8 equal tiles) */
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1000px;margin:0 auto}
.shot{aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line-soft);
  box-shadow:0 18px 40px -30px rgba(13,12,11,.4);position:relative}
.shot img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}

/* testimonial videos (2-up, name + desc centred below) */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px;max-width:960px;margin:0 auto}
.vcard{text-align:center}
.vframe{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#111;border:1px solid var(--line);box-shadow:0 24px 50px -32px rgba(13,12,11,.55)}
.vframe iframe{width:100%;height:100%;border:0;display:block}
.vname{font-size:19px;font-weight:700;margin:22px 0 4px;color:var(--ink)}
.vdesc{font-size:15px;color:var(--text-2);margin:0 auto;max-width:38ch}

/* footer: branding-only banner, 1.5x the lockup height, centred */
.foot{display:flex;align-items:center;justify-content:center;height:54px;background:var(--ink);margin-top:40px}
.foot .brand{display:inline-flex;align-items:center;gap:10px;height:36px;color:#fff;font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:.04em}
.foot .brand i{font-style:normal;color:var(--accent)}

/* reveal (progressive enhancement: only hidden once JS is on) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .stagger > .rv:nth-child(2){transition-delay:.08s}
.js .stagger > .rv:nth-child(3){transition-delay:.16s}
.js .stagger > .rv:nth-child(4){transition-delay:.24s}

/* opt-in modal */
.modal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(13,12,11,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{position:relative;width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:46px 38px 34px;
  box-shadow:0 40px 100px -30px rgba(13,12,11,.55);transform:translateY(10px) scale(.965);opacity:0;transition:transform .3s var(--ease),opacity .25s ease;text-align:center}
.modal-overlay.open .modal{transform:none;opacity:1}
.modal::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:24px 24px 0 0;background:var(--accent)}
.modal-x{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);cursor:pointer;transition:transform .2s ease,background .2s ease}
.modal-x:hover{transform:rotate(90deg);background:var(--accent)}
.modal h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:34px;letter-spacing:.01em;color:var(--ink);margin-bottom:8px}
.modal-sub{color:var(--text-2);font-size:15.5px;margin:0 0 26px}
.modal-field{margin-bottom:14px;text-align:left}
.modal-field label{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.modal-field input{width:100%;font:inherit;font-size:16px;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;min-height:52px;outline:none;transition:border-color .2s,box-shadow .2s}
.modal-field input:focus{border-color:var(--ink);box-shadow:0 0 0 4px var(--accent-soft)}
.modal-field input.err{border-color:#c0352b;box-shadow:0 0 0 3px rgba(192,53,43,.14)}
.modal-err{color:#b02a20;font-size:13.5px;min-height:18px;margin:2px 0 8px}
.modal .btn{width:100%}

html.static *,html.static *::before,html.static *::after{transition:none!important;animation:none!important}
@media(max-width:900px){.proof-grid{grid-template-columns:repeat(2,1fr)}.vgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- mobile hardening (paste into every generated stylesheet) ---- */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; }
p, li, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
table, pre { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  [class*="row"], [class*="stack"] > *, [class*="item"], .it { flex-wrap: wrap; }
  .tag, [class*="badge"], [class*="pill"] { margin-left: 0; }
  [style*="grid-template-columns"], [class*="grid"] { grid-template-columns: 1fr; }
  .section{padding:56px 0}
  h1{font-size:clamp(32px,9vw,40px)}
  h2{font-size:clamp(28px,8vw,36px)}
}
@media (max-width: 420px) { .tok-merge, .tok-link, code { white-space: normal; } }