/* ═══════════════════════════════════════════════════════════
   Penned — penned-letters.com
   Tokens → base → components → sections → responsive
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ink */
  --ink:        #0E1216;
  --ink-2:      #151A21;
  --ink-3:      #1D242D;
  --ink-line:   rgba(255,255,255,.10);
  --ink-text:   #E9EDF2;
  --ink-muted:  #9AA5B1;

  /* paper */
  --paper:      #FBF8F3;
  --paper-2:    #F2EDE4;
  --paper-line: rgba(14,18,22,.10);
  --text:       #12171C;
  --muted:      #5C6672;

  /* accent */
  --accent:     #C25E3A;
  --accent-hi:  #DB744D;
  --accent-soft:rgba(194,94,58,.10);
  --teal:       #2E6156;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;

  --shadow:    0 1px 2px rgba(14,18,22,.05), 0 8px 24px -12px rgba(14,18,22,.14);
  --shadow-lg: 0 2px 4px rgba(14,18,22,.05), 0 28px 60px -28px rgba(14,18,22,.28);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;

  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --sec-y: clamp(4.5rem, 10vw, 8.5rem);
}

/* ── base ───────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:inherit; }
p{ margin:0 0 1em; }
h1,h2,h3{ margin:0 0 .5em; line-height:1.1; letter-spacing:-.03em; font-weight:600; }
ul,ol{ margin:0; padding:0; list-style:none; }
em{ font-style:normal; }

.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--pad); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.75rem 1rem; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ── type scale ─────────────────────────────────────────── */
.h1{
  font-size:clamp(2.45rem, 7.2vw, 4.25rem);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:600;
}
.h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }
.h2{ font-size:clamp(1.85rem, 4.4vw, 3rem); }
.h3{ font-size:clamp(1.25rem, 2.4vw, 1.6rem); }

.eyebrow{
  font-size:.775rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.15rem;
}
.kicker{
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .95rem;
}
.lead{ font-size:clamp(1.05rem, 2.1vw, 1.25rem); color:var(--ink-muted); max-width:33em; }
.subhead{
  font-size:clamp(1rem, 1.9vw, 1.13rem); color:var(--muted);
  max-width:44rem; margin-inline:auto;
}
.subhead--left{ margin-inline:0; }

.sechead{ max-width:46rem; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center; }
.sechead .h2{ margin-bottom:.6rem; }

/* ── buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  padding:.85rem 1.35rem; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s, border-color .18s, box-shadow .18s, color .18s;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 10px 24px -12px rgba(194,94,58,.85); }
.btn--primary:hover{ background:var(--accent-hi); }
.btn--ghost{ background:transparent; color:inherit; border-color:currentColor; opacity:.92; }
.btn--ghost:hover{ background:rgba(255,255,255,.07); opacity:1; }
.btn--ghost-dark:hover{ background:rgba(14,18,22,.05); }
.btn--lg{ padding:1.02rem 1.7rem; font-size:1rem; }
.btn--sm{ padding:.6rem 1.05rem; font-size:.875rem; }
.btn--block{ width:100%; }

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(14,18,22,0);
  transition:background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(14,18,22,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--ink-line);
}
.nav__inner{ display:flex; align-items:center; gap:1.5rem; height:72px; }
.brand{
  display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none; color:var(--ink-text); font-weight:600;
}
.brand__mark{ width:26px; height:26px; color:var(--accent); display:block; flex:none; }
.brand__mark svg{ display:block; width:100%; height:100%; stroke-width:1.4; }
.brand__word{ font-family:var(--serif); font-size:1.5rem; letter-spacing:-.01em; font-weight:400; }

.nav__links{ display:none; gap:1.6rem; margin-left:auto; }
.nav__links a{
  text-decoration:none; font-size:.93rem; font-weight:500; color:var(--ink-muted);
  transition:color .18s;
}
.nav__links a:hover{ color:var(--ink-text); }
.nav__cta{ display:none; }

.nav__toggle{
  margin-left:auto; width:44px; height:44px; display:grid; place-content:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:0;
}
.nav__toggle span{ display:block; width:22px; height:1.8px; background:var(--ink-text); border-radius:2px; transition:transform .25s, opacity .2s; }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.9px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.9px) rotate(-45deg); }

.nav__panel{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(14,18,22,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-line);
  padding:.75rem var(--pad) 1.5rem;
  display:flex; flex-direction:column; gap:.15rem;
}
.nav__panel a{ color:var(--ink-text); text-decoration:none; padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-weight:500; }
.nav__panel .btn{ margin-top:1rem; border-bottom:0; }

/* ── hero ───────────────────────────────────────────────── */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--ink-text);
  margin-top:-72px; padding-top:calc(72px + clamp(3rem,9vw,5.5rem));
  padding-bottom:clamp(3.5rem,9vw,6rem);
  overflow:hidden;
}
.hero__glow{
  position:absolute; inset:auto -20% 20% -20%; height:80%;
  background:
    radial-gradient(60% 55% at 72% 40%, rgba(194,94,58,.22), transparent 70%),
    radial-gradient(50% 50% at 15% 10%, rgba(46,97,86,.16), transparent 70%);
  filter:blur(10px); pointer-events:none;
}
.hero__inner{ position:relative; display:grid; gap:clamp(2.5rem,6vw,4rem); }
.hero__copy{ max-width:38rem; }
.hero .lead{ margin-top:1.25rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.hero__cta .btn{ flex:1 1 auto; min-width:min(100%, 15rem); }
.hero__chips{
  display:flex; flex-wrap:wrap; gap:.5rem .55rem; margin-top:2rem;
  font-size:.83rem; color:var(--ink-muted);
}
.hero__chips li{
  border:1px solid var(--ink-line); border-radius:999px; padding:.4rem .8rem;
  background:rgba(255,255,255,.03);
}

/* hero map card */
.mapcard{
  border:1px solid var(--ink-line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
}
.mapcard__bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.7rem .9rem; border-bottom:1px solid var(--ink-line);
  background:rgba(255,255,255,.02);
}
.mapcard__bar .dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.16); }
.mapcard__label{ margin-left:.6rem; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }
.mapcard__svg{ display:block; width:100%; height:auto; background:#0B0F13; }
.mapcard__legend{
  display:flex; flex-wrap:wrap; gap:1rem; padding:.85rem .95rem;
  border-top:1px solid var(--ink-line); font-size:.78rem; color:var(--ink-muted);
}
.mapcard__legend span{ display:inline-flex; align-items:center; gap:.45rem; }
.sw{ width:8px; height:8px; border-radius:50%; display:block; }
.sw--a{ background:#E8865E; box-shadow:0 0 0 3px rgba(232,134,94,.18); }
.sw--b{ background:#B9805F; }
.sw--c{ background:rgba(255,255,255,.28); }

.pin{ transform-origin:218px 180px; }
.ring{ transform-origin:218px 180px; }
.map-dot{ opacity:0; animation:dotIn .5s ease forwards; }
@keyframes dotIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
.map-dot--a{ animation-name:dotInA; }
@keyframes dotInA{ from{ opacity:0; } to{ opacity:1; } }

/* ── section shells ─────────────────────────────────────── */
.sec{ padding-block:var(--sec-y); }
.sec--paper{ background:var(--paper); color:var(--text); }
.sec--paper .subhead{ color:var(--muted); }
/* tinted paper -- lets two light sections sit next to each other */
.sec--paper2{ background:var(--paper-2); color:var(--text); }
.sec--paper2 .subhead{ color:var(--muted); }
.sec--ink{ background:var(--ink); color:var(--ink-text); }
.sec--ink .subhead,.sec--ink p{ color:var(--ink-muted); }
.sec--ink .h2,.sec--ink h3{ color:var(--ink-text); }

.grid{ display:grid; gap:1.1rem; }
.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }

.bigline{
  margin:clamp(2.5rem,5vw,3.5rem) auto 0; text-align:center; max-width:34rem;
  font-size:clamp(1.3rem,3vw,1.85rem); font-weight:600; letter-spacing:-.03em; line-height:1.25;
}
.bigline--sm{ font-size:clamp(1.05rem,2.2vw,1.3rem); font-weight:500; color:var(--muted); max-width:40rem; }
.bigline--light{ color:var(--ink-text); }

.note{
  font-size:.93rem; color:var(--muted); line-height:1.6;
  background:var(--paper-2); border:1px solid var(--paper-line);
  border-radius:var(--r); padding:1.1rem 1.2rem; margin:1.5rem 0 0;
}
.note strong{ color:var(--text); }
.note--wide{ max-width:52rem; margin-inline:auto; margin-top:clamp(2rem,4vw,3rem); text-align:left; }

/* ── question cards ─────────────────────────────────────── */
.qcard{
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--r-lg);
  padding:1.6rem 1.5rem 1.7rem; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.qcard__num{
  font-family:var(--serif); font-size:2.4rem; line-height:1; color:var(--accent);
  opacity:.5; display:block; margin-bottom:.85rem;
}
.qcard h3{ font-size:1.22rem; margin-bottom:.5rem; }
.qcard p{ color:var(--muted); margin:0; font-size:.98rem; }

/* ── growth cards ───────────────────────────────────────── */
.gcard{
  border:1px solid var(--ink-line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  padding:clamp(1.6rem,3.5vw,2.3rem);
  position:relative; overflow:hidden;
}
.gcard::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:3px;
}
.gcard--new::before{ background:linear-gradient(90deg, var(--accent), transparent 70%); }
.gcard--back::before{ background:linear-gradient(90deg, #4E9385, transparent 70%); }
.gcard__tag{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:var(--ink-muted); margin:0 0 .7rem;
}
.gcard .h3{ margin-bottom:.55rem; }
.gcard__lead{ font-size:1.03rem; margin-bottom:1.3rem; }

.checks li,.crosses li{
  position:relative; padding-left:1.75rem; margin-bottom:.6rem;
  font-size:.97rem; color:var(--ink-muted);
}
.checks li::before{
  content:""; position:absolute; left:0; top:.42em; width:1.05rem; height:1.05rem;
  border-radius:50%; background:var(--accent-soft);
  border:1px solid rgba(194,94,58,.45);
}
.checks li::after{
  content:""; position:absolute; left:.3rem; top:.72em; width:.42rem; height:.22rem;
  border-left:1.6px solid var(--accent-hi); border-bottom:1.6px solid var(--accent-hi);
  transform:rotate(-45deg);
}
.sec--paper .checks li{ color:var(--muted); }
.checks--light li{ color:rgba(255,255,255,.85); }

.crosses li{ color:var(--ink-muted); opacity:.72; text-decoration:line-through; text-decoration-color:rgba(255,255,255,.22); }
.crosses li::before{
  content:"×"; position:absolute; left:.15rem; top:0; width:auto; height:auto;
  color:rgba(255,255,255,.35); font-size:1.05rem; line-height:1.6; text-decoration:none;
}

/* ── steps (audience system) ────────────────────────────── */
.steps{ display:grid; gap:.6rem; max-width:56rem; margin-inline:auto; counter-reset:s; }
.step{
  display:flex; gap:1rem; align-items:flex-start;
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--r);
  padding:1.15rem 1.25rem; box-shadow:var(--shadow);
}
.step__n{
  font-family:var(--serif); font-size:1.35rem; line-height:1.3; color:var(--accent);
  min-width:2.1rem; flex:none;
}
.step h3{ font-size:1.06rem; margin:0 0 .2rem; letter-spacing:-.02em; }
.step p{ margin:0; font-size:.95rem; color:var(--muted); }
.step em{ font-style:italic; }

.criteria{ max-width:56rem; margin:clamp(2.2rem,4vw,3rem) auto 0; }
.criteria__title{ font-size:1rem; letter-spacing:-.01em; margin-bottom:.9rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chips li{
  font-size:.85rem; padding:.45rem .8rem; border-radius:999px;
  border:1px solid var(--paper-line); background:#fff; color:var(--text);
}
.chips--lg li{ font-size:.88rem; }
.chips--dark li{ background:rgba(255,255,255,.045); border-color:var(--ink-line); color:var(--ink-text); }

/* ── industry explorer ──────────────────────────────────── */
.picker__mobile{ display:block; margin-bottom:1.25rem; }
.picker__mobile select{
  width:100%; font:inherit; font-size:1rem; font-weight:500;
  padding:.95rem 2.5rem .95rem 1rem;
  color:var(--ink-text); background:rgba(255,255,255,.05);
  border:1px solid var(--ink-line); border-radius:var(--r-sm);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA5B1' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:1.1rem;
}
.picker__mobile select option{ color:#111; background:#fff; }

.picker__grid{ display:none; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.6rem; }
.ibtn{
  display:flex; flex-direction:column; align-items:flex-start; gap:.6rem;
  font:inherit; font-size:.93rem; font-weight:500; text-align:left; color:var(--ink-text);
  background:rgba(255,255,255,.035); border:1px solid var(--ink-line);
  border-radius:var(--r); padding:.95rem .9rem; cursor:pointer;
  transition:background-color .18s, border-color .18s, transform .18s, color .18s;
}
.ibtn:hover{ background:rgba(255,255,255,.075); transform:translateY(-2px); }
.ibtn svg{ width:22px; height:22px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ibtn[aria-selected="true"]{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 12px 28px -14px rgba(194,94,58,.9);
}
.ibtn[aria-selected="true"] svg{ stroke:#fff; }

.result{ margin-top:clamp(1.6rem,3.5vw,2.4rem); }
.rescard{
  border:1px solid var(--ink-line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  overflow:hidden;
}
.rescard__head{
  display:flex; align-items:center; gap:.85rem;
  padding:1.15rem 1.3rem; border-bottom:1px solid var(--ink-line);
  background:rgba(255,255,255,.02);
}
.rescard__head svg{ width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.rescard__head h3{ margin:0; font-size:1.15rem; }
.rescard__head span{ display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; }
.rescard__body{ display:grid; gap:1px; background:var(--ink-line); }
.resblock{ background:#12171D; padding:1.3rem; }
.resblock h4{
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin:0 0 .7rem; font-weight:600;
}
.resblock p{ margin:0 0 .85rem; font-size:.97rem; color:var(--ink-muted); }
.resblock p:last-child{ margin-bottom:0; }
.resblock--flow ol{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.resblock--flow li{
  font-size:.83rem; font-weight:500; color:var(--ink-text);
  background:rgba(255,255,255,.05); border:1px solid var(--ink-line);
  padding:.4rem .75rem; border-radius:999px;
}
.resblock--flow li::after{ content:"→"; color:var(--accent); margin-left:.6rem; opacity:.8; }
.resblock--flow li:last-child::after{ content:""; margin:0; }
.rescard__foot{
  padding:1rem 1.3rem; border-top:1px solid var(--ink-line); background:rgba(255,255,255,.02);
  font-size:.85rem; color:var(--ink-muted);
}
.res-fade{ animation:resIn .35s cubic-bezier(.2,.7,.3,1) both; }
@keyframes resIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.explorer__cta{ text-align:center; margin-top:clamp(2rem,4vw,2.8rem); }
.explorer__note{ font-size:.9rem; color:var(--ink-muted); margin:.9rem 0 0; }

/* ── priority tiers ─────────────────────────────────────── */
.tiers{ display:grid; gap:1rem; }
.tier{
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--r-lg);
  padding:1.5rem; box-shadow:var(--shadow); position:relative;
}
.tier__bar{ display:flex; gap:4px; margin-bottom:1.1rem; }
.tier__bar i{ display:block; width:26px; height:5px; border-radius:3px; background:var(--accent); }
.tier--2 .tier__bar i{ background:#C98A6C; }
.tier--3 .tier__bar i{ background:#C8BFB2; }
.tier h3{ font-size:1.15rem; margin-bottom:.15rem; }
.tier__sub{ font-size:.85rem; font-weight:600; color:var(--accent); margin:0 0 .7rem; letter-spacing:-.01em; }
.tier--2 .tier__sub{ color:#A86B4E; }
.tier--3 .tier__sub{ color:#8B8272; }
.tier p:last-child{ margin:0; font-size:.96rem; color:var(--muted); }

/* ── statement ──────────────────────────────────────────── */
.sec--statement{
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(194,94,58,.14), transparent 65%),
    var(--ink-2);
  color:var(--ink-text); text-align:center;
}
.statement{ max-width:46rem; }
.statement__h{ margin-bottom:1.6rem; }
.statement__big{
  font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.5rem,4.2vw,2.5rem); line-height:1.25; color:#fff; margin-bottom:1.6rem;
}
.statement__big em{ font-style:italic; color:var(--accent-hi); }
.statement__body{ color:var(--ink-muted); max-width:38rem; margin-inline:auto; }

/* ── flow (how it works) ────────────────────────────────── */
.flow{ display:grid; gap:1rem; }
.flow__item{
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--r);
  padding:1.4rem 1.3rem; box-shadow:var(--shadow); position:relative;
}
.flow__n{
  display:grid; place-content:center; width:2rem; height:2rem; border-radius:50%;
  background:var(--accent); color:#fff; font-size:.9rem; font-weight:600; margin-bottom:.9rem;
}
.flow__item h3{ font-size:1.05rem; margin-bottom:.35rem; }
.flow__item p{ margin:0; font-size:.94rem; color:var(--muted); }

/* ── split sections ─────────────────────────────────────── */
.split{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.split__copy .btn{ margin-top:.6rem; }
.split__panel{
  border:1px solid var(--ink-line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  padding:clamp(1.4rem,3vw,2rem);
}
.panel__title{ font-size:1rem; margin-bottom:1rem; }
.panel__foot{ font-size:.88rem; margin:1.2rem 0 0; color:var(--ink-muted); }

/* light variant, for panels sitting on paper */
.split__panel--light{
  background:#fff; border-color:var(--paper-line); box-shadow:var(--shadow);
}
.split__panel--light .panel__foot{ color:var(--muted); }
.split__panel--light .panel__foot strong{ color:var(--text); }

/* names -> addresses -> mailbox pipeline */
.pipe{ display:grid; gap:.15rem; }
.pipe li{ display:flex; gap:.9rem; align-items:flex-start; position:relative; padding-bottom:1rem; }
.pipe li:last-child{ padding-bottom:0; }
/* connector line between the numbered markers */
.pipe li:not(:last-child)::before{
  content:""; position:absolute; left:.87rem; top:2rem; bottom:.2rem;
  width:1px; background:linear-gradient(180deg, rgba(194,94,58,.5), rgba(194,94,58,.12));
}
.pipe__n{
  flex:none; width:1.75rem; height:1.75rem; border-radius:50%;
  display:grid; place-content:center; font-size:.8rem; font-weight:600;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid rgba(194,94,58,.4);
}
.pipe strong{ display:block; font-size:.97rem; letter-spacing:-.01em; margin-bottom:.1rem; }
.pipe p{ margin:0; font-size:.9rem; color:var(--muted); }

.honest{
  border:1px solid rgba(194,94,58,.35); border-radius:var(--r-lg);
  background:rgba(194,94,58,.07); padding:clamp(1.4rem,3vw,1.9rem);
}
.honest__tag{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:var(--accent-hi); margin:0 0 .7rem;
}
.honest p:last-child{ margin:0; font-size:.98rem; }

/* ── taglist ────────────────────────────────────────────── */
.taglist{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; max-width:56rem; margin-inline:auto; }
.taglist li{
  font-size:.9rem; padding:.5rem .95rem; border-radius:999px;
  background:#fff; border:1px solid var(--paper-line); color:var(--text);
  box-shadow:0 1px 2px rgba(14,18,22,.04);
}

/* ── handoff ────────────────────────────────────────────── */
.handoff__col{
  border:1px solid var(--ink-line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2rem);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}
.handoff__col h3{ font-size:1.1rem; margin-bottom:1.1rem; }
.handoff__col--yes{ border-color:rgba(194,94,58,.35); background:rgba(194,94,58,.06); }

/* ── founder ────────────────────────────────────────────── */
.founder{
  max-width:44rem; margin-inline:auto;
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--r-lg);
  padding:clamp(1.8rem,4.5vw,3rem); box-shadow:var(--shadow-lg);
}
.founder__h{ font-size:clamp(1.55rem,3.4vw,2.2rem); margin-bottom:1.2rem; }
.founder__body p{ color:var(--muted); }
.founder__body p:last-child{ margin-bottom:0; }
.founder__sign{
  margin:1.8rem 0 0; padding-top:1.3rem; border-top:1px solid var(--paper-line);
  display:flex; flex-direction:column;
}
.founder__name{ font-family:var(--serif); font-size:1.35rem; color:var(--text); }
.founder__co{ font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; }

/* ── contact ────────────────────────────────────────────── */
.sec--cta{
  background:
    radial-gradient(60% 70% at 80% 10%, rgba(194,94,58,.2), transparent 60%),
    radial-gradient(50% 60% at 10% 90%, rgba(46,97,86,.16), transparent 60%),
    var(--ink);
  color:var(--ink-text);
}
.contact{ display:grid; gap:clamp(2.2rem,5vw,3.5rem); align-items:start; }
.contact .checks li{ color:rgba(255,255,255,.82); }

.formwrap{
  background:var(--paper); color:var(--text);
  border-radius:var(--r-lg); padding:clamp(1.4rem,3.5vw,2.2rem);
  box-shadow:var(--shadow-lg);
}
.form__row{ display:grid; gap:1rem; }
.field{ margin-bottom:1rem; display:block; }
.field label,.field legend{
  display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem; letter-spacing:-.01em;
}
.req{ color:var(--accent); }
.opt{ color:var(--muted); font-weight:400; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem;
  padding:.8rem .9rem; border-radius:var(--r-sm);
  border:1px solid rgba(14,18,22,.16); background:#fff; color:var(--text);
  transition:border-color .18s, box-shadow .18s;
}
.field textarea{ resize:vertical; min-height:5.5rem; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6672' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:1.05rem;
  padding-right:2.4rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field--fs{ border:0; padding:0; margin:0 0 1rem; }
.radios{ display:grid; gap:.45rem; }
.radios label{
  display:flex; align-items:center; gap:.6rem; margin:0; font-weight:500; font-size:.95rem;
  padding:.7rem .85rem; border:1px solid rgba(14,18,22,.14); border-radius:var(--r-sm);
  background:#fff; cursor:pointer; transition:border-color .18s, background-color .18s;
}
.radios label:hover{ border-color:rgba(194,94,58,.5); }
.radios input{ width:auto; accent-color:var(--accent); margin:0; flex:none; }
.radios label:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }

.field.is-error input,.field.is-error select,.field.is-error textarea{ border-color:#C0392B; }
.field .err{ display:block; font-size:.8rem; color:#C0392B; margin-top:.3rem; font-weight:500; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__fine{ font-size:.82rem; color:var(--muted); text-align:center; margin:.9rem 0 0; }
.form__status{ font-size:.9rem; margin:.8rem 0 0; text-align:center; font-weight:500; }
.form__status.is-bad{ color:#C0392B; }
.linkbtn{
  font:inherit; font-weight:600; color:var(--accent); background:none; border:0;
  padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.linkbtn:hover{ color:var(--accent-hi); }

.thanks{ text-align:center; padding:clamp(1.5rem,4vw,2.5rem) 1rem; }
.thanks__mark{
  width:52px; height:52px; margin:0 auto 1.1rem; border-radius:50%;
  display:grid; place-content:center; background:var(--accent-soft); color:var(--accent);
  border:1px solid rgba(194,94,58,.4);
}
.thanks__mark svg{ width:26px; height:26px; }
.thanks h3{ font-size:1.35rem; }
.thanks p{ color:var(--muted); margin:0; }
.thanks a{ color:var(--accent); }

/* ── footer ─────────────────────────────────────────────── */
.foot{ background:#0A0D11; color:var(--ink-muted); padding-top:clamp(3rem,6vw,4.5rem); }
.foot__inner{ display:grid; gap:2rem; padding-bottom:2.5rem; }
.brand--foot{ color:var(--ink-text); }
.foot__tag{ margin:.9rem 0 0; font-size:.92rem; max-width:26rem; }
.foot__links{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; }
.foot__links a{ text-decoration:none; font-size:.92rem; transition:color .18s; }
.foot__links a:hover{ color:var(--ink-text); }
.foot__contact{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.foot__contact a:first-child{ color:var(--ink-text); text-decoration:none; font-weight:500; }
.foot__contact a:first-child:hover{ color:var(--accent-hi); }
.foot__contact .btn{ color:var(--ink-text); }
.foot__legal{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  padding-block:1.4rem; border-top:1px solid rgba(255,255,255,.08); font-size:.82rem;
}

/* ── reveal ─────────────────────────────────────────────────
   Only hidden when JS is running (html.js is set inline in the
   head). If scripting fails, every section stays visible.      */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ═══════════════ responsive ═══════════════ */
@media (min-width:600px){
  .form__row{ grid-template-columns:1fr 1fr; }
  .radios{ grid-template-columns:1fr 1fr; }
  .grid--2{ grid-template-columns:1fr 1fr; }
  .tiers{ grid-template-columns:repeat(3,1fr); }
  .foot__links{ grid-template-columns:1fr 1fr; }
}

@media (min-width:820px){
  .grid--3{ grid-template-columns:repeat(3,1fr); }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .picker__mobile{ display:none; }
  .picker__grid{ display:grid; }
  .rescard__body{ grid-template-columns:repeat(2,1fr); }
  .resblock--flow{ grid-column:1 / -1; }
  .hero__cta .btn{ flex:0 0 auto; min-width:0; }
}

@media (min-width:980px){
  body{ font-size:17px; }
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; margin-left:.5rem; }
  .nav__toggle{ display:none; }
  .nav__panel{ display:none !important; }

  .hero__inner{ grid-template-columns:1.05fr .95fr; align-items:center; gap:3.5rem; }
  .hero__copy{ max-width:none; }

  .flow{ grid-template-columns:repeat(5,1fr); }
  .flow__item{ padding:1.5rem 1.2rem; }

  .split{ grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center; }
  .split--rev .split__copy{ order:1; }
  .split--rev .honest{ order:2; }

  .contact{ grid-template-columns:.9fr 1.1fr; align-items:center; }

  .steps{ grid-template-columns:1fr 1fr; }
  .steps .step:first-child{ grid-column:1 / -1; }

  .foot__inner{ grid-template-columns:1.4fr 1fr .9fr; gap:3rem; }
  .foot__links{ grid-template-columns:1fr; }
}

@media (min-width:1100px){
  .picker__grid{ grid-template-columns:repeat(7,1fr); }
  .rescard__body{ grid-template-columns:repeat(3,1fr); }
  .resblock--flow{ grid-column:1 / -1; }
}

/* ── motion / print ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  .map-dot{ opacity:1; animation:none; }
}