@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/archivo-variable.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/archivo-italic.woff) format('woff');}
/* ============================================================
   Dagher Creative — editorial landing system
   ============================================================ */
:root{
  --paper:#F4F2EC;
  --paper-2:#ECE9E1;
  --ink:#0E0E0C;
  --ink-2:#5A574F;
  --line:rgba(14,14,12,.14);
  --line-soft:rgba(14,14,12,.08);
  --dark:#0C0C0A;
  --paper-on-dark:#EFEDE6;
  --ink-2-on-dark:#9A968C;
  --line-on-dark:rgba(239,237,230,.16);
  --accent:#C6FF3A;
  --font-display:'Archivo';
  --font-body:'Archivo';
  --maxw:1320px;
  --pad:clamp(20px,5vw,72px);
}
[data-pairing="scandi"]{ --font-display:'Schibsted Grotesk'; --font-body:'Schibsted Grotesk'; }
[data-pairing="editorial"]{ --font-display:'Bricolage Grotesque'; --font-body:'Archivo'; }

*{box-sizing:border-box;}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body),system-ui,sans-serif;
  font-size:18px; line-height:1.5; letter-spacing:-0.01em;
}
::selection{ background:var(--accent); color:#0A0A08; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--font-display),system-ui,sans-serif; font-weight:700; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display),sans-serif; font-weight:600;
  font-size:.95rem; letter-spacing:-0.01em; line-height:1;
  padding:.85em 1.3em; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-accent{ background:var(--accent); color:#0A0A08; }
.btn-accent:hover{ box-shadow:0 8px 30px -8px color-mix(in oklab, var(--accent) 70%, transparent); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-ghost-dark{ border-color:var(--line-on-dark); color:var(--paper-on-dark); background:transparent; }
.btn-ghost-dark:hover{ background:var(--paper-on-dark); color:var(--dark); border-color:var(--paper-on-dark); }
.btn-lg{ font-size:1.05rem; padding:1.05em 1.6em; }
.btn .arrow{ transition:transform .2s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--paper) 78%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.scrolled{ border-bottom-color:var(--line-soft); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:inline-flex; align-items:baseline; gap:.4ch; font-family:var(--font-display),sans-serif; font-weight:700; font-size:1.18rem; letter-spacing:-0.03em; }
.brand .star{ color:var(--accent); font-size:.7em; transform:translateY(-.15em); }
.nav-mid{ display:flex; gap:34px; }
.nav-mid a{ font-size:.92rem; color:var(--ink-2); font-weight:500; letter-spacing:0; transition:color .15s ease; }
.nav-mid a:hover{ color:var(--ink); }
@media(max-width:860px){ .nav-mid{ display:none; } }

/* ---------- shared bits ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.7ch;
  font-family:var(--font-display),sans-serif; font-weight:600;
  font-size:.8rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2);
}
.kicker::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.5; }
.eyebrow{
  font-family:var(--font-display),sans-serif; font-weight:600;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.mark{ white-space:nowrap; background-color:var(--accent); color:#0A0A08; padding:0 .12em; border-radius:3px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.display-2 .mark{ white-space:normal; }
.machine-head .display-2{ font-size:clamp(1.9rem,3.8vw,3rem); line-height:1.05; }
.note{ font-size:.74rem; letter-spacing:.04em; color:var(--ink-2); opacity:.85; font-style:italic; }
.machine .note, .proof-dark .note{ color:var(--ink-2-on-dark); }

/* ---------- hero ---------- */
.hero{ padding:clamp(40px,7vw,92px) 0 clamp(48px,6vw,80px); }
.hero-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(28px,5vw,52px); }
.avail{ display:inline-flex; align-items:center; gap:.6ch; font-size:.82rem; font-weight:500; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:.4em .85em; }
.avail .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 70%,transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

.display{
  font-family:var(--font-display),sans-serif; font-weight:700;
  font-size:clamp(2.6rem,7.6vw,6.6rem); line-height:.97; letter-spacing:-0.035em;
  text-wrap:balance; max-width:15ch;
}
.display .thin{ font-weight:400; color:var(--ink-2); }
/* Hero headline highlight: slightly thinner band suits the giant type */
#hero-headline .mark{ padding:0 .08em; }

.hero-bottom{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:end; margin-top:clamp(36px,5vw,60px); }
@media(max-width:880px){ .hero-bottom{ grid-template-columns:1fr; gap:40px; } }
.hero-lede p{ font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.45; color:var(--ink); max-width:42ch; margin:0 0 28px; }
.hero-lede p .tm{ font-size:.6em; vertical-align:super; color:var(--ink-2); letter-spacing:.02em; }
.cta-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.cta-note{ font-size:.86rem; color:var(--ink-2); max-width:20ch; line-height:1.3; }

/* gap stat block */
.gap{ border-top:1.5px solid var(--ink); padding-top:22px; }
.gap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.gap-col{ display:flex; flex-direction:column; gap:10px; }
.gap-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); font-weight:600; }
.gap-num{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:clamp(2.1rem,4vw,3.1rem); line-height:.9; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.bar{ height:8px; border-radius:999px; background:var(--paper-2); overflow:hidden; }
.bar span{ display:block; height:100%; background:var(--ink-2); border-radius:999px; width:0; transition:width 1.1s cubic-bezier(.2,.7,.2,1) .3s; }
.bar span.bar-accent{ background:var(--accent); }
.gap.in .bar span{ width:var(--w); }
.gap-cap{ display:block; margin-top:18px; font-size:.8rem; color:var(--ink-2); letter-spacing:.01em; }

/* ---------- section frame ---------- */
.section{ padding:clamp(72px,10vw,148px) 0; border-top:1px solid var(--line); }
.sec-head{ display:flex; flex-direction:column; gap:24px; margin-bottom:clamp(48px,6vw,84px); }
.display-2{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:clamp(2rem,5.2vw,4.3rem); line-height:1.0; letter-spacing:-0.03em; text-wrap:balance; max-width:18ch; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.5; color:var(--ink-2); max-width:52ch; }

/* ---------- who i am ---------- */
.about{ }
.about-grid{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media(max-width:880px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }
.about-photo{ position:relative; }
.about-photo image-slot{ width:100%; aspect-ratio:4/5; display:block; }
.about-photo .photo-tag{ position:absolute; left:18px; bottom:18px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.45em .95em; font-size:.8rem; font-weight:600; font-family:var(--font-display),sans-serif; }
.about-statement{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.08; letter-spacing:-0.025em; text-wrap:balance; margin:18px 0 26px; }
.about-head{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.05; letter-spacing:-0.02em; color:var(--ink); margin:0 0 22px; }
.about-body{ display:flex; flex-direction:column; gap:18px; max-width:54ch; }
.about-body p{ margin:0; font-size:1.05rem; line-height:1.6; color:var(--ink-2); }
.about-body p strong{ color:var(--ink); font-weight:600; }
.sign{ display:flex; align-items:center; gap:14px; margin-top:30px; }
.sign-name{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:-0.02em; }
.sign-role{ font-size:.86rem; color:var(--ink-2); }

/* ---------- problem cards ---------- */
.cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
@media(max-width:820px){ .cards{ grid-template-columns:1fr; } }
.card{ padding:34px 30px 36px; border-right:1px solid var(--line); position:relative; display:flex; flex-direction:column; min-height:330px; }
.card:last-child{ border-right:none; }
@media(max-width:820px){ .card{ border-right:none; border-bottom:1px solid var(--line); } .card:last-child{ border-bottom:none; } }
.card-idx{ font-family:var(--font-display),sans-serif; font-weight:600; font-size:.82rem; color:var(--ink-2); letter-spacing:.04em; }
.card h3{ font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.02; letter-spacing:-0.02em; margin:18px 0 14px; }
.card p{ font-size:1rem; line-height:1.5; color:var(--ink-2); margin:0; }
.card .cost{ margin-top:auto; padding-top:24px; font-family:var(--font-display),sans-serif; font-weight:600; font-size:.92rem; color:var(--ink); display:flex; align-items:center; gap:.6ch; }
.card .cost::before{ content:"→"; color:var(--ink-2); }
.card:hover .card-idx{ color:var(--ink); }

/* ---------- pillar label ---------- */
.pillar-tag{ display:inline-flex; align-items:center; gap:.7ch; font-family:var(--font-display),sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.02em; text-transform:uppercase; }
.pillar-tag .pn{ color:var(--accent); }

/* ---------- machine (dark) — Pillar 1 ---------- */
.machine{ background:var(--dark); color:var(--paper-on-dark); border-top:none; }
.machine .kicker, .machine .pillar-tag{ color:var(--ink-2-on-dark); }
.machine .display-2{ color:var(--paper-on-dark); }
.machine .lede{ font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.5; color:var(--paper-on-dark); max-width:30ch; }
.machine-head{ display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); gap:clamp(24px,3.5vw,56px); align-items:center; margin-bottom:clamp(48px,6vw,84px); }
@media(max-width:880px){ .machine-head{ grid-template-columns:1fr; gap:30px; } }
.loom{ margin-top:24px; border:1px solid var(--line-on-dark); border-radius:14px; overflow:hidden; background:#111110; box-shadow:0 30px 80px -40px rgba(0,0,0,.8); }
.loom-bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line-on-dark); }
.loom-bar i{ width:10px; height:10px; border-radius:50%; background:#3a3a35; }
.loom-bar .ltag{ margin-left:auto; font-size:.72rem; color:var(--ink-2-on-dark); display:inline-flex; align-items:center; gap:.5ch; }
.loom-bar .ltag b{ width:7px; height:7px; border-radius:50%; background:#ff5a52; display:inline-block; }
.loom-body{ position:relative; aspect-ratio:16/10; background:
    radial-gradient(circle at 1px 1px, rgba(239,237,230,.10) 1px, transparent 0) 0 0/22px 22px, #14140f; }
.loom-stickies{ position:absolute; inset:0; }
.sticky{ position:absolute; width:74px; height:58px; border-radius:4px; transform:rotate(var(--r)); box-shadow:0 8px 20px -10px rgba(0,0,0,.7); font-size:.6rem; padding:8px; color:#1a1a14; font-weight:600; font-family:var(--font-display),sans-serif; line-height:1.1; }
.loom-conn{ position:absolute; inset:0; pointer-events:none; }
.loom-cursor{ position:absolute; display:flex; align-items:center; gap:6px; }
.loom-cursor .cur{ width:0;height:0;border-left:9px solid var(--accent); border-bottom:7px solid transparent; border-top:7px solid transparent; transform:rotate(-35deg); filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.loom-cursor .name{ background:var(--accent); color:#0a0a08; font-size:.62rem; font-weight:700; padding:2px 7px; border-radius:5px; font-family:var(--font-display),sans-serif; }

/* steps */
.steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-on-dark); }
.machine .steps{ border-top-color:var(--line-on-dark); }
.step{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,4vw,56px); align-items:baseline; padding:30px 0; border-bottom:1px solid var(--line-on-dark); }
.step-n{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:1rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.step-t{ font-family:var(--font-display),sans-serif; font-weight:600; font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-0.02em; line-height:1.05; }
.step-d{ font-size:1rem; color:var(--ink-2-on-dark); max-width:42ch; line-height:1.5; }
@media(max-width:760px){ .step{ grid-template-columns:auto 1fr; } .step-d{ grid-column:2; } }
/* light steps for pillar 2 */
.steps-light{ border-top-color:var(--line); }
.steps-light .step{ border-bottom-color:var(--line); }
.steps-light .step-n{ color:var(--ink); }
.steps-light .step-d{ color:var(--ink-2); }

/* ---------- proof stat row ---------- */
.proof{ margin-top:clamp(40px,5vw,64px); }
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.machine .proof-grid, .proof-dark .proof-grid{ border-top-color:var(--line-on-dark); }
@media(max-width:760px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-item{ padding:30px 30px 30px 0; border-right:1px solid var(--line); }
.proof-item:last-child{ border-right:none; padding-right:0; }
.machine .proof-item, .proof-dark .proof-item{ border-right-color:var(--line-on-dark); }
@media(max-width:760px){ .proof-item{ border-right:none; border-bottom:1px solid var(--line); padding:22px 0; } .proof-item:last-child{ border-bottom:none; } .machine .proof-item, .proof-dark .proof-item{ border-bottom-color:var(--line-on-dark); } }
.proof-num{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:clamp(2.4rem,4vw,3.4rem); line-height:.92; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.proof-num .u{ color:var(--accent); }
.proof-label{ margin-top:12px; font-size:.95rem; color:var(--ink-2); line-height:1.4; max-width:30ch; }
.machine .proof-label, .proof-dark .proof-label{ color:var(--ink-2-on-dark); }

/* ---------- ad board (pillar 2 visual) ---------- */
.adboard{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
@media(max-width:560px){ .adboard{ grid-template-columns:1fr 1fr; } }
.ad{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); display:flex; flex-direction:column; }
.ad-vis{ aspect-ratio:4/5; position:relative; display:flex; align-items:flex-end; padding:12px; }
.ad-1{ background:linear-gradient(160deg,#1d1d18,#3a3a30); }
.ad-2{ background:linear-gradient(160deg,#2a3b1a,#4f6a28); }
.ad-3{ background:linear-gradient(160deg,#402418,#6a3d28); }
.ad-kind{ font-family:var(--font-display),sans-serif; font-size:.66rem; font-weight:600; color:rgba(255,255,255,.85); letter-spacing:.04em; text-transform:uppercase; }
.ad-meta{ padding:11px 13px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); }
.ad-metric{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:1rem; letter-spacing:-0.02em; }
.ad-tag{ font-size:.66rem; font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; }
.ad.win{ outline:2px solid var(--accent); outline-offset:-1px; }
.ad.win .ad-vis::after{ content:"WINNER"; position:absolute; top:10px; right:10px; background:var(--accent); color:#0a0a08; font-family:var(--font-display),sans-serif; font-weight:700; font-size:.6rem; letter-spacing:.06em; padding:3px 8px; border-radius:5px; }
.adboard-cap{ display:block; margin-top:16px; font-size:.8rem; color:var(--ink-2); }

/* ---------- testimonials ---------- */
.testi{ background:var(--paper-2); }
.video-wrap{ position:relative; margin-bottom:clamp(40px,5vw,64px); }
.video-wrap image-slot{ width:100%; aspect-ratio:16/9; display:block; }
.video-frame{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.video-caption{ display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.video-caption .play{ width:30px; height:30px; border-radius:50%; background:var(--accent); display:grid; place-items:center; flex:none; }
.video-caption .play::before{ content:""; border-left:9px solid #0a0a08; border-top:6px solid transparent; border-bottom:6px solid transparent; transform:translateX(1px); }
.video-caption b{ font-family:var(--font-display),sans-serif; font-weight:700; }
.video-caption span{ color:var(--ink-2); font-size:.95rem; }
.quotes{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); }
@media(max-width:760px){ .quotes{ grid-template-columns:1fr; } }
.quote{ padding:34px 38px 34px 0; border-right:1px solid var(--line); }
.quote:nth-child(2n){ border-right:none; padding-right:0; padding-left:38px; }
@media(max-width:760px){ .quote{ border-right:none; border-bottom:1px solid var(--line); padding:28px 0 !important; } .quote:last-child{ border-bottom:none; } }
.quote p{ font-family:var(--font-display),sans-serif; font-weight:500; font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.35; letter-spacing:-0.02em; margin:0 0 22px; text-wrap:pretty; }
.quote .pill{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); background:var(--accent); border-radius:999px; padding:.3em .8em; display:inline-block; margin-bottom:18px; }
.quote-by{ display:flex; align-items:center; gap:12px; }
.quote-by .ava{ width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--font-display),sans-serif; font-weight:700; font-size:.85rem; }
.quote-by b{ font-family:var(--font-display),sans-serif; font-weight:600; font-size:.95rem; }
.quote-by span{ color:var(--ink-2); font-size:.84rem; }

/* ---------- results zig-zag ---------- */
.results{ display:flex; flex-direction:column; gap:clamp(48px,7vw,108px); border-top:1px solid var(--line); padding-top:clamp(48px,6vw,84px); }
.result-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.result-row.alt .result-media{ order:2; }
@media(max-width:760px){ .result-row{ grid-template-columns:1fr; gap:24px; } .result-row.alt .result-media{ order:0; } }
.result-media{ position:relative; }
.result-frame{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--paper); box-shadow:0 24px 60px -32px rgba(14,14,12,.4); }
.result-frame .img-ph{ aspect-ratio:16/10; }
.result-cap{ margin-top:14px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); font-weight:600; }
.result-body{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.result-body .pill{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); background:var(--accent); border-radius:999px; padding:.3em .8em; }
.result-stat{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:clamp(3rem,6.5vw,5.4rem); line-height:.86; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.result-stat .to{ color:var(--ink-2); font-weight:500; }
.result-title{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:clamp(1.35rem,2.2vw,1.85rem); line-height:1.12; letter-spacing:-0.025em; text-wrap:balance; max-width:20ch; }
.result-body p{ margin:0; font-size:1.02rem; line-height:1.55; color:var(--ink-2); max-width:42ch; }

/* ---------- for / not for ---------- */
.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
@media(max-width:760px){ .fit-grid{ grid-template-columns:1fr; } }
.fit-col{ padding:clamp(28px,4vw,46px); }
.fit-col.yes{ background:var(--ink); color:var(--paper-on-dark); }
.fit-col.no{ background:transparent; }
.fit-h{ display:flex; align-items:center; gap:12px; margin-bottom:26px; font-family:var(--font-display),sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:-0.02em; }
.fit-h .badge{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:1rem; flex:none; }
.fit-col.yes .badge{ background:var(--accent); color:#0a0a08; }
.fit-col.no .badge{ background:var(--paper-2); color:var(--ink-2); border:1px solid var(--line); }
.fit-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.fit-list li{ display:flex; gap:12px; font-size:1.02rem; line-height:1.4; }
.fit-list li::before{ font-family:var(--font-display),sans-serif; font-weight:700; flex:none; }
.fit-col.yes .fit-list li::before{ content:"✓"; color:var(--accent); }
.fit-col.no .fit-list li{ color:var(--ink-2); }
.fit-col.no .fit-list li::before{ content:"✕"; color:var(--ink-2); }

/* ---------- closing cta ---------- */
.close{ background:var(--dark); color:var(--paper-on-dark); border-top:none; }
.close-card{ border:1px solid var(--line-on-dark); border-radius:20px; padding:clamp(36px,5vw,68px); display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; background:linear-gradient(180deg, rgba(239,237,230,.03), transparent); }
.close-card h2{ font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:1.02; letter-spacing:-0.03em; max-width:20ch; }
.close-card .sub{ color:var(--ink-2-on-dark); font-size:1.02rem; margin-top:14px; max-width:46ch; line-height:1.5; }
.close-cta{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.close-cta .micro{ font-size:.82rem; color:var(--ink-2-on-dark); }

/* ---------- footer ---------- */
.footer{ background:var(--dark); color:var(--paper-on-dark); padding:clamp(56px,7vw,96px) 0 40px; border-top:1px solid var(--line-on-dark); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--line-on-dark); }
@media(max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer .brand{ color:var(--paper-on-dark); font-size:1.3rem; }
.footer-blurb{ margin-top:18px; color:var(--ink-2-on-dark); font-size:.95rem; line-height:1.5; max-width:32ch; }
.footer-col h4{ font-family:var(--font-display),sans-serif; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2-on-dark); margin:0 0 18px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.95rem; color:var(--paper-on-dark); opacity:.85; transition:opacity .15s ease, color .15s ease; }
.footer-col a:hover{ opacity:1; color:var(--accent); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:28px; }
.footer-bottom small{ color:var(--ink-2-on-dark); font-size:.82rem; }
.footer-bottom .legal{ display:flex; gap:22px; }
.footer-bottom .legal a{ font-size:.82rem; color:var(--ink-2-on-dark); }
.footer-bottom .legal a:hover{ color:var(--paper-on-dark); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.07s; } .reveal.d2{ transition-delay:.14s; } .reveal.d3{ transition-delay:.21s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .bar span{ transition:none; width:var(--w); }
  *{ scroll-behavior:auto; }
}

/* ---------- image placeholders ---------- */
/* Production stand-ins for the design tool's <image-slot>. Drop a real
   <img> in (matching the aspect ratio) when assets are ready. */
.img-ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:18px; box-sizing:border-box;
  width:100%; height:100%;
  background:rgba(14,14,12,.04);
  border:1.5px dashed var(--line);
  color:var(--ink-2);
  font-family:var(--font-display),sans-serif;
}
.about-photo .img-ph{ aspect-ratio:16/20; border-radius:16px; }
.video-frame .img-ph{ aspect-ratio:16/9; }
.img-ph svg{ opacity:.45; }
.img-ph .cap{ font-size:.85rem; font-weight:500; letter-spacing:.01em; max-width:24ch; line-height:1.35; }
.img-ph img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- pillar-head screenshot cluster (flattened exactly from Figma) ---------- */
.proof-cluster{ display:flex; align-items:center; justify-content:flex-end; }
.proof-cluster img{ display:block; width:100%; height:auto; }
@media(min-width:881px){ .proof-cluster{ margin-right:clamp(-44px,-2.6vw,-12px); } }
@media(max-width:880px){ .proof-cluster{ padding-top:8px; justify-content:center; } .proof-cluster img{ max-width:620px; width:100%; margin:0 auto; } }

/* ---------- founder photo ---------- */
.about-photo .founder-photo{ display:block; width:100%; height:auto; border-radius:16px; }

/* ---------- real images in frames ---------- */
.video-frame img, .video-frame video{ display:block; width:100%; height:auto; }
.result-frame img{ display:block; width:100%; height:auto; }


/* ---- solo pillar head (full-width headline, cluster removed) ---- */
.machine-head--solo{ display:block; margin-bottom:clamp(40px,5vw,72px); }
.machine-head--solo .display-2{ max-width:none; }

/* ---- creative / retention marquee ---- */
.creative-marquee{ overflow:hidden; width:100%; margin-top:clamp(44px,5vw,72px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); }
.creative-marquee__track{ display:flex; width:max-content; animation:marquee-rtl 46s linear infinite; will-change:transform; }
@keyframes marquee-rtl{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.creative-marquee:hover .creative-marquee__track{ animation-play-state:paused; }
/* gap lives on each item (margin) not flex-gap, so the duplicated-set + -50% loop has no seam */
.creative-marquee__item{ flex:0 0 auto; margin-right:1.5rem; width:clamp(190px,20vw,258px); aspect-ratio:4/5;
  border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--paper-2); }
.creative-marquee__item img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Creative row shows only 2 hero examples; enlarge the tiles so each hero reads as a showcase */
.creative-marquee--hero .creative-marquee__item{ width:clamp(230px,25vw,330px); }
.creative-ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  width:100%; height:100%; padding:18px; text-align:center; color:var(--ink-2);
  font-family:var(--font-display),sans-serif;
  background:repeating-linear-gradient(45deg, rgba(14,14,12,.02) 0 11px, transparent 11px 22px); }
.creative-ph svg{ opacity:.5; }
.creative-ph__label{ font-size:.92rem; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.creative-ph__hint{ font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.62; }
.machine .creative-marquee__item{ border-color:var(--line-on-dark); background:#141410; }
.machine .creative-ph{ color:var(--ink-2-on-dark);
  background:repeating-linear-gradient(45deg, rgba(239,237,230,.03) 0 11px, transparent 11px 22px); }
.machine .creative-ph__label{ color:var(--paper-on-dark); }
@media (prefers-reduced-motion: reduce){
  .creative-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .creative-marquee__track{ animation:none; }
}