/* BellyGood funnel — one screen, no scroll: a specimen card on ruled paper.
   Ink and biscuit taken verbatim from the main site so the logo sits native.
   Committed light palette; a printed field guide has no dark mode. */

:root{
  --ink:        #1F3D2B;
  --amber:      #E9A13B;
  --paper:      #F6EDDD;
  --paper-2:    #FFFDF8;
  --ink-2:      color-mix(in oklab, var(--ink) 76%, var(--paper));
  --ink-3:      color-mix(in oklab, var(--ink) 54%, var(--paper));
  --rule:       color-mix(in oklab, var(--ink) 16%, var(--paper));
  --rule-2:     color-mix(in oklab, var(--ink) 30%, var(--paper));
  --amber-d:    #B4780C;
  --clay:       #A63D22;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --gut: clamp(20px, 4.5vw, 64px);
  /* one unit of vertical give: shrinks with the viewport so the page never
     grows a scrollbar on a 13" laptop */
  --air: clamp(.5rem, 1.4vh, 1.4rem);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(.97rem,.94rem + .18vw,1.06rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
  /* faint horizontal ruling, like a ledger page */
  background-image:linear-gradient(to bottom,color-mix(in oklab,var(--ink) 9%,transparent) 1px,transparent 1px);
  background-size:100% 2.6rem;
  background-attachment:fixed;
}
img,svg{max-width:100%}
a{color:inherit}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--amber-d);outline-offset:3px}
.nojs{margin:0;padding:1rem var(--gut);background:var(--ink);color:var(--paper)}

/* ─────────────────────────── delivery notice ─────────────────────────── */

.notice{
  position:relative;flex:none;
  background:var(--ink);color:var(--paper);
  padding:.7rem var(--gut) .8rem;
  font-size:.88rem;line-height:1.4;
}
.notice::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;
  background:radial-gradient(circle at 6px 0, var(--ink) 5px, transparent 5.5px) repeat-x;
  background-size:12px 12px;
}
.notice-in{max-width:1280px;margin:0 auto;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.notice p{margin:0;flex:1 1 24ch}
.notice em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--amber)}
.stamp{
  flex:none;font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  border:1.5px solid var(--amber);color:var(--amber);
  padding:.34rem .6rem .28rem;rotate:-4.5deg;
  box-shadow:0 0 0 3px var(--ink), 0 0 0 4.5px color-mix(in oklab,var(--amber) 35%,transparent);
}

/* ───────────────────────── the single screen ───────────────────────── */

.sheet{
  flex:1;min-height:0;
  width:100%;max-width:1280px;margin:0 auto;
  padding:calc(var(--air) * 1.6) var(--gut) calc(var(--air) * 1.8);
  display:grid;align-content:center;
  gap:calc(var(--air) * 1.5) clamp(2rem,5vw,5.5rem);
}
@media (min-width:900px){
  .sheet{grid-template-columns:minmax(0,1.1fr) minmax(0,.72fr);align-items:center}
}

.brand{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--serif);font-weight:900;font-size:1.2rem;letter-spacing:-.015em;
  margin-bottom:calc(var(--air) * 1.4);
}
.brand svg{width:30px;height:30px;flex:none}

.eyebrow{
  display:flex;align-items:center;gap:.75rem;
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber-d);margin:0 0 calc(var(--air) * .9);
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:7rem;background:var(--rule-2)}

h1{
  font-family:var(--serif);font-weight:500;font-optical-sizing:auto;
  font-size:clamp(1.85rem,.8rem + 1.9vw + 1.8vh,3.7rem);
  line-height:1;letter-spacing:-.028em;
  margin:0 0 calc(var(--air) * .9);max-width:19ch;text-wrap:balance;
}
h1 .turn{ /* highlighter swipe that survives a line break */
  font-style:italic;font-weight:500;
  background:linear-gradient(var(--amber),var(--amber)) no-repeat 0 88%/100% .1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.deck{
  font-size:clamp(1rem,.95rem + .35vw,1.19rem);color:var(--ink-2);
  max-width:52ch;margin:0 0 calc(var(--air) * 1.2);
}
.deck em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink)}

/* what is on it — headings only, hairline ruled, no bullets */
.inside{list-style:none;margin:0 0 calc(var(--air) * 1.3);padding:0;max-width:46ch}
.inside li{
  counter-increment:inside;position:relative;
  padding:.5rem 0 .5rem 2.5rem;border-top:1px solid var(--rule);
  font-size:.95rem;color:var(--ink-2);
}
.inside li:last-child{border-bottom:1px solid var(--rule)}
.inside li::before{
  content:counter(inside,decimal-leading-zero);
  position:absolute;left:0;top:.5rem;
  font-family:var(--serif);font-weight:500;font-size:1.05rem;color:var(--amber-d);
  font-variant-numeric:tabular-nums;
}
.say{counter-reset:inside}

.proof{margin:0;padding-left:1.7rem;position:relative;max-width:46ch}
.proof::before{
  content:"\201C";position:absolute;left:-.15rem;top:-.75rem;
  font-family:var(--serif);font-weight:500;font-size:3.2rem;line-height:1;color:var(--amber);
}
.proof blockquote{
  margin:0;font-family:var(--serif);font-weight:500;font-size:1.02rem;
  line-height:1.35;letter-spacing:-.01em;
}
.proof figcaption{
  margin-top:.4rem;font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}

/* ────────────────────── the offer slip (specimen) ────────────────────── */

.ask{min-width:0;max-width:31rem}
.slip{
  position:relative;background:var(--paper-2);
  border:1px solid var(--rule-2);border-left:none;
  padding:calc(var(--air) * .9) clamp(1.1rem,2.2vw,1.7rem) calc(var(--air) * .9) clamp(1.3rem,2.4vw,1.9rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem 1rem;align-items:start;
  box-shadow:1px 1px 0 var(--rule);
}
.slip::before{ /* perforated tear edge */
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:radial-gradient(circle at 0 6px, transparent 5px, var(--rule-2) 5.5px, var(--rule-2) 6px, transparent 6.5px) repeat-y;
  background-size:12px 12px;
}
/* the thing itself, pictured: a document cover built from the offer's own name */
.cover{
  --w:clamp(78px,7.4vw,104px);
  position:relative;margin:0;width:var(--w);rotate:-1.7deg;
}
.cover .face{
  position:relative;display:flex;flex-direction:column;
  aspect-ratio:3/4;padding:.45rem .5rem .4rem;
  background:linear-gradient(158deg,#FFFFFF 0%,var(--paper-2) 62%,color-mix(in oklab,var(--paper) 55%,var(--paper-2)) 100%);
  border:1px solid var(--rule-2);
  box-shadow:3px 3px 0 color-mix(in oklab,var(--ink) 14%,transparent);
}
.cover .kind{font-size:.48rem;font-weight:600;letter-spacing:.2em;color:var(--amber-d)}
.cover .cover-title{
  flex:1;margin-top:.3rem;
  font-family:var(--serif);font-weight:650;font-size:.74rem;line-height:1.12;
  letter-spacing:-.015em;text-wrap:balance;
}
.cover .cover-brand{
  display:flex;align-items:center;gap:.22rem;
  font-family:var(--serif);font-weight:900;font-size:.5rem;letter-spacing:-.01em;
}
.cover .cover-brand svg{width:10px;height:10px;flex:none}
.cover.ebook::before{ /* the sheets underneath */
  content:"";position:absolute;inset:0;translate:5px 5px;
  background:var(--paper-2);border:1px solid var(--rule-2);
}
.cover.ebook .face{border-left:4px solid var(--ink);padding-left:.6rem}
.slip .mark{width:38px;height:38px;flex:none;color:var(--ink);opacity:.9}
.slip .mark svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.slip .fmt{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .2rem}
.slip .name{margin:0;
  font-family:var(--serif);font-weight:650;font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);
  line-height:1.1;letter-spacing:-.02em;margin:0;
}
.slip .line{grid-column:1/-1;margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.45}
.slip .worth{
  grid-column:1/-1;margin:0;padding-top:.6rem;border-top:1px dashed var(--rule-2);
  display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
}
.slip .worth b{font-family:var(--serif);font-weight:650;font-size:1.4rem;letter-spacing:-.02em}
.slip .worth s{color:var(--ink-3);font-size:.88rem}
.slip .worth span{font-size:.78rem;color:var(--ink-3)}

/* ─────────────────────────── capture form ─────────────────────────── */

.capture{margin-top:calc(var(--air) * 1.1)}
.fields{display:grid;gap:calc(var(--air) * .8)}
.field{position:relative}
.field label{
  display:block;font-size:.62rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem;
}
.field input{
  width:100%;border:none;border-bottom:1.5px solid var(--rule-2);
  background:transparent;color:var(--ink);
  font-family:var(--serif);font-weight:500;font-size:1.22rem;
  padding:.3rem 0 .4rem;border-radius:0;
  transition:border-color .18s var(--ease);
}
.field input::placeholder{color:color-mix(in oklab,var(--ink) 34%,var(--paper));font-style:italic}
.field input:focus{outline:none;border-bottom-color:var(--amber-d);border-bottom-width:2.5px;padding-bottom:calc(.4rem - 1px)}
.field input:focus-visible{outline:none}
.field.bad input{border-bottom-color:var(--clay)}
.err{display:block;color:var(--clay);font-size:.82rem;margin-top:.3rem;min-height:1.1em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:calc(var(--air) * 1.1);
  background:var(--amber);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:0;
  font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:-.005em;
  padding:.85rem 1.6rem;min-height:54px;width:100%;cursor:pointer;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);
  text-decoration:none;
}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn .arrow{transition:translate .16s var(--ease)}
.btn:hover .arrow{translate:3px 0}
.cta-sub{margin:.7rem 0 0;font-size:.83rem;color:var(--ink-3)}

/* known visitor — no card, a ruled dossier line */
.known{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:.8rem 0 .9rem;display:flex;gap:.9rem;align-items:center;
}
.known .initial{
  flex:none;width:42px;height:42px;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-weight:650;font-size:1.3rem;
}
.known .who{min-width:0;flex:1}
.known .who b{display:block;font-size:.98rem;font-weight:600}
.known .who span{display:block;font-size:.86rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.known .swap{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;font-size:.8rem;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:3px;
}
.known .swap:hover{color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fine{
  margin:calc(var(--air) * 1.2) 0 0;font-size:.76rem;line-height:1.45;color:var(--ink-3);
  padding-top:.7rem;border-top:1px solid var(--rule);
}
.fine a{color:var(--ink-2);text-underline-offset:3px}

/* ─────────────────── the fork: one question, two stamps ─────────────────── */

/* The question breaks the two-column grid on purpose — a fork in the road is
   not an offer with a form beside it, and the page should feel like one. */
.sheet.fork,.sheet.end{max-width:940px}
@media (min-width:900px){
  .sheet.fork,.sheet.end{grid-template-columns:minmax(0,1fr)}
  .sheet.fork h1{font-size:clamp(2.4rem,1rem + 2.6vw + 2vh,4.2rem);max-width:16ch}
  .sheet.fork .deck{max-width:56ch}
}

.pick{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(.7rem,2.2vw,1.6rem);
  margin-top:calc(var(--air) * 1.2);max-width:40rem;
}
/* Each answer is a rubber stamp: sitting crooked until you press it, then
   straightening and driving into the paper. Same ink-and-shadow language as
   the "Sent" stamp on the delivery notice. */
.pick button{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:.2rem;min-height:clamp(108px,19vh,208px);
  padding:1.1rem clamp(.9rem,2vw,1.4rem) 1.15rem;
  background:var(--paper-2);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:0;
  font:inherit;text-align:left;cursor:pointer;
  box-shadow:6px 6px 0 var(--ink);
  rotate:-1.5deg;
  transition:rotate .2s var(--ease),translate .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease);
}
.pick button::before{ /* the stamp's inner rule */
  content:"";position:absolute;inset:5px;border:1px solid currentColor;opacity:.24;pointer-events:none;
}
.pick .yes{background:var(--amber);rotate:1.5deg}
.pick b{
  font-family:var(--serif);font-weight:900;font-optical-sizing:auto;
  font-size:clamp(1.9rem,1.1rem + 2.4vw,3.1rem);
  line-height:.86;letter-spacing:.01em;text-transform:uppercase;
}
.pick span{font-size:.83rem;line-height:1.3;color:var(--ink-2)}
.pick .yes span{color:color-mix(in oklab,var(--ink) 78%,var(--amber))}
.pick button:hover{rotate:0deg;translate:2px 2px;box-shadow:4px 4px 0 var(--ink)}
.pick button:active{rotate:0deg;translate:6px 6px;box-shadow:0 0 0 var(--ink)}
.pick button[disabled]{opacity:.5;cursor:progress}
@media (prefers-reduced-motion:reduce){
  .pick button,.pick .yes{rotate:none;transition:none}
}
.sheet.fork .err{margin-top:.6rem}

/* ─────────────────── off-ramps: no-thanks and thank-you ─────────────────── */

.lede{
  font-size:clamp(1rem,.95rem + .35vw,1.16rem);color:var(--ink-2);
  max-width:54ch;margin:0 0 calc(var(--air) * 1.1);
}

/* Live delivery state, ruled top and bottom so it reads as a line of record
   rather than a toast that will disappear. */
.status{
  display:flex;gap:.75rem;align-items:baseline;
  margin:0;padding:.7rem 0 .8rem;max-width:54ch;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  font-family:var(--serif);font-weight:500;font-size:1.02rem;line-height:1.35;
}
.status::before{
  content:"";flex:none;width:.55rem;height:.55rem;translate:0 -.12rem;
  background:var(--amber-d);
}
.status.ok::before{background:var(--ink)}
.status.bad::before{background:var(--clay)}
@media (prefers-reduced-motion:no-preference){
  .status::before{animation:blink 1.5s var(--ease) infinite}
  .status.ok::before,.status.bad::before{animation:none}
  @keyframes blink{50%{opacity:.2}}
}

.ledger{counter-reset:led;list-style:none;margin:calc(var(--air) * 1.2) 0 0;padding:0;max-width:56ch}
.ledger li{
  counter-increment:led;position:relative;
  padding:.7rem 0 .75rem 2.6rem;border-top:1px solid var(--rule);
}
.ledger li:last-child{border-bottom:1px solid var(--rule)}
.ledger li::before{
  content:counter(led,decimal-leading-zero);
  position:absolute;left:0;top:.72rem;
  font-family:var(--serif);font-weight:500;font-size:1.05rem;color:var(--amber-d);
  font-variant-numeric:tabular-nums;
}
.ledger b{display:block;font-size:.97rem;font-weight:600;margin-bottom:.1rem}
.ledger span{display:block;font-size:.88rem;line-height:1.5;color:var(--ink-2)}

/* ───────────────────────────── one screen, small ─────────────────────── */

@media (max-width:899px){
  .brand{margin-bottom:calc(var(--air) * .9)}
  h1{max-width:none}
  /* ponytail: on a phone the fold is ~640px — the deck and the pull-quote are
     the two things the headline and the slip already say. Drop them with the
     slip's blurb, keep the three specifics, keep it all in one screen. */
  .deck,.proof,.slip .line{display:none}
  .cover{--w:64px}
  .fine{margin-top:calc(var(--air) * .8);padding-top:.5rem}
  .cta-sub{margin-top:.55rem}
  .inside{margin-bottom:0;max-width:none}
  .inside li{padding:.42rem 0 .42rem 2.3rem;font-size:.9rem}
  .lede{font-size:.95rem;margin-bottom:calc(var(--air) * .7)}
  .ledger{margin-top:calc(var(--air) * .8)}
  .ledger li{padding:.55rem 0 .6rem 2.3rem}
  .ledger li::before{top:.58rem}
  .ledger span{font-size:.84rem}
  .status{font-size:.96rem;padding:.55rem 0 .6rem}
  .pick{margin-top:calc(var(--air) * .9);max-width:none}
  .pick button{min-height:clamp(96px,14vh,128px);padding:.9rem .85rem 1.05rem;box-shadow:4px 4px 0 var(--ink)}
  /* the sentence is the receipt; the stamp is decoration the fold can't afford */
  .notice{font-size:.8rem;padding:.55rem var(--gut) .65rem}
  .notice .stamp{display:none}
}
@media (max-width:899px) and (min-height:900px){
  .deck{display:block;margin-bottom:calc(var(--air) * 1)}
}

/* ─────────────────────────── entrance ─────────────────────────── */

@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;translate:0 12px;animation:rise .75s var(--ease) forwards;animation-delay:var(--d,0ms)}
  @keyframes rise{to{opacity:1;translate:0 0}}
}