/* ============================================================
   The Keepsake Pet Club — landing page styles
   Display: Bricolage Grotesque · Body: Newsreader
   ============================================================ */

:root{
  /* paper + kraft */
  --cream:#f4ead2;
  --cream-hi:#faf3e2;
  --paper:#fffdf6;
  --kraft:#cdbd9a;
  --kraft-deep:#b7a37c;
  /* ink */
  --ink:#2c2417;
  --ink-soft:#6a5c47;
  --ink-faint:#917f63;
  /* pops */
  --terra:#c25a38;
  --terra-deep:#a8472a;
  --sage:#7e8a55;
  --sage-deep:#5d6a3a;
  --navy:#26323f;
  --navy-hi:#33424f;
  --mustard:#dca33c;
  --teal:#52796f;

  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Newsreader', Georgia, serif;
  --hand:'Caveat', 'Segoe Script', cursive;

  --maxw:1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* paper grain over everything */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:multiply;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- shared type ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:1.02; margin:0; letter-spacing:-.015em; }
.eyebrow{
  font-family:var(--display); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.26em; color:var(--terra);
  display:inline-flex; align-items:center; gap:.55em;
}
.eyebrow.sage{ color:var(--sage-deep); }
.eyebrow.cream{ color:var(--mustard); }
.lead{ font-size:21px; color:var(--ink-soft); }
.section{ position:relative; z-index:2; padding:clamp(70px,9vw,128px) 24px; }
.wrap{ max-width:var(--maxw); margin:0 auto; }
.center{ text-align:center; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  padding:14px 26px; border-radius:13px; border:2px solid var(--terra-deep);
  background:var(--terra); color:var(--cream-hi); text-decoration:none;
  box-shadow:3px 4px 0 var(--terra-deep);
  transition:transform .12s ease, box-shadow .12s ease, background .15s;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 5px 0 var(--terra-deep); background:#cf6442; }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--terra-deep); }
.btn.ghost{
  background:transparent; color:var(--ink); border-color:var(--ink);
  box-shadow:3px 4px 0 rgba(44,36,23,.22);
}
.btn.ghost:hover{ background:rgba(44,36,23,.05); box-shadow:4px 5px 0 rgba(44,36,23,.22); }
.btn.on-navy{ border-color:#1a232c; box-shadow:3px 4px 0 #1a232c; }
.btn.on-navy:hover{ box-shadow:4px 5px 0 #1a232c; }

/* ---------- decorative: washi tape ---------- */
.washi{
  position:absolute; width:120px; height:34px; z-index:5;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 7px, rgba(255,255,255,0) 7px 14px), var(--tape, var(--sage));
  opacity:.82; box-shadow:0 2px 6px rgba(44,36,23,.14);
}
.washi::before,.washi::after{ content:""; position:absolute; top:0; bottom:0; width:8px;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(44,36,23,.12) 3px 5px); }
.washi::before{ left:0; } .washi::after{ right:0; }

/* ---------- paw prints + icons (sprite below) ---------- */
.paw{ position:absolute; color:var(--kraft-deep); opacity:.5; z-index:1; pointer-events:none; }

/* =================================================================
   ANNOUNCEMENT BAR
   ================================================================= */
.announce{
  position:relative; z-index:41; text-align:center;
  background:var(--terra); color:var(--cream-hi);
  font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.01em;
  padding:18px 28px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  box-shadow:0 3px 0 var(--terra-deep);
}
.announce .star{ color:var(--cream-hi); font-size:1.2em; }
.announce a{
  display:inline-flex; align-items:center;
  background:var(--cream-hi); color:var(--terra-deep);
  font-weight:800; font-size:15px; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap;
  padding:8px 18px; border-radius:30px;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
  transition:background .15s, transform .1s;
}
.announce a:hover{ background:#fff; transform:translateY(-1px); }
.announce a:active{ transform:translateY(1px); }
@media (max-width:560px){
  .announce{ font-size:15px; gap:10px; padding:14px 18px; }
  .announce a{ font-size:14px; padding:7px 15px; }
}

/* =================================================================
   NAV
   ================================================================= */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px clamp(18px,4vw,40px);
  background:rgba(244,234,210,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1.5px solid rgba(106,92,71,.22);
}
.nav .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.nav .brand img{ width:42px; height:42px; }
.nav .brand b{ font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.01em; color:var(--ink); }
.nav .brand small{ display:block; font-family:var(--display); font-weight:600; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin-top:-2px; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink-soft); text-decoration:none; }
.nav-links a:hover{ color:var(--terra-deep); }
.nav .btn{ padding:10px 20px; font-size:14px; white-space:nowrap; box-shadow:2px 3px 0 var(--terra-deep); }

.nav-actions{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px; padding:0; flex:none;
  border:1.5px solid rgba(44,36,23,.22); border-radius:9px;
  background:var(--cream-hi); cursor:pointer;
}
.nav-toggle-bar{ display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:transform .18s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column;
  position:absolute; top:100%; left:0; right:0; z-index:39;
  background:var(--cream-hi); border-bottom:1.5px solid rgba(106,92,71,.22);
  box-shadow:0 14px 26px -16px rgba(44,36,23,.4);
}
.mobile-nav a{
  padding:16px 24px; font-family:var(--display); font-weight:600; font-size:16px;
  color:var(--ink); text-decoration:none; border-top:1px solid rgba(44,36,23,.1);
}
.mobile-nav a:first-child{ border-top:none; }
.mobile-nav a:active,.mobile-nav a:hover{ color:var(--terra-deep); background:rgba(44,36,23,.03); }
.mobile-nav.open{ display:flex; }

/* =================================================================
   HERO
   ================================================================= */
.top-band{ position:relative; padding:clamp(54px,7vw,92px) 24px clamp(64px,8vw,108px); z-index:2; }
.hero-layout{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; grid-template-areas:"copy visual";
  gap:clamp(36px,5vw,72px); align-items:center;
}
.hero-copy{ grid-area:copy; }
.top-band h1{ font-size:clamp(42px,6.4vw,82px); }
.top-band h1 .swoop{ color:var(--terra); position:relative; white-space:nowrap; }
.top-band .lead{ margin:26px 0 0; max-width:30ch; }
.top-band .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.top-band .trust{ margin-top:26px; font-family:var(--display); font-weight:600; font-size:13.5px; letter-spacing:.04em; color:var(--ink-faint); display:flex; align-items:center; gap:9px; }

/* hero visual — taped flatlay framed like mail */
.hero-visual{ position:relative; grid-area:visual; }
.mail-frame{
  position:relative; background:var(--paper); padding:16px 16px 58px;
  box-shadow:0 22px 44px -22px rgba(44,36,23,.5), 0 2px 0 rgba(44,36,23,.06);
  transform:rotate(-2.2deg);
  border:1px solid rgba(44,36,23,.08);
}
.mail-frame image-slot{ width:100%; height:400px; }
.mail-frame .cap{
  position:absolute; left:22px; bottom:14px; right:22px;
  font-family:var(--hand); font-weight:600; font-size:27px; line-height:1; color:var(--ink-soft);
  white-space:nowrap; display:flex; align-items:center; gap:9px;
}
.mail-frame .cap b{ font-family:var(--hand); font-weight:700; color:var(--ink); }
.mail-frame .cap .heart{ color:var(--terra); font-size:20px; }
/* a real little stamp pinned to the flatlay */
.pin-stamp{
  position:absolute; top:-26px; right:-22px; z-index:6; width:96px; height:114px;
  background:var(--cream-hi); transform:rotate(7deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-family:var(--display); color:var(--navy); padding:8px;
  box-shadow:0 8px 18px -8px rgba(44,36,23,.5);
}
.pin-stamp .v{ font-weight:800; font-size:18px; letter-spacing:.02em; text-transform:uppercase; line-height:1; color:var(--terra-deep); }
.pin-stamp .t{ font-weight:700; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; margin-top:5px; }
.pin-stamp .paw{ position:static; opacity:1; color:var(--sage-deep); margin-bottom:3px; }

/* =================================================================
   HOW IT WORKS
   ================================================================= */
.how{ background:var(--kraft); }
.how::after{ /* torn top edge feel via subtle inner shadow */ content:""; }
.how .head{ text-align:center; max-width:660px; margin:0 auto clamp(44px,5vw,64px); }
.how h2{ font-size:clamp(32px,4.4vw,52px); color:var(--ink); margin-top:14px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); }
.step{
  position:relative; background:var(--cream-hi); border:1.5px solid rgba(44,36,23,.16);
  border-radius:16px; padding:34px 26px 30px; text-align:center;
  box-shadow:0 14px 28px -20px rgba(44,36,23,.5);
}
.step .num{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%) rotate(-6deg);
  width:46px; height:46px; border-radius:50%;
  background:var(--terra); color:var(--cream-hi);
  font-family:var(--display); font-weight:800; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid var(--cream-hi); box-shadow:0 4px 0 var(--terra-deep);
}
.step .ic{ width:58px; height:58px; margin:14px auto 16px; color:var(--sage-deep); }
.step h3{ font-size:22px; color:var(--ink); margin-bottom:8px; }
.step p{ margin:0; font-size:16.5px; color:var(--ink-soft); }
.step .dash{ position:absolute; top:40%; right:-32px; color:var(--ink-soft); opacity:.7; z-index:6; }

/* =================================================================
   SPOTLIGHT — Pet of the Month (signature stamp)
   ================================================================= */
.spot{ background:var(--navy); color:var(--cream-hi); overflow:hidden; }
.spot .paw{ color:rgba(255,255,255,.07); opacity:1; }
.spot-grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(34px,5vw,70px); align-items:center; }

/* the perforated stamp — real scalloped notches cut from all four edges */
.stamp-card{
  --r:9px;    /* notch radius */
  --s:23px;   /* notch spacing */
  position:relative; flex:none; width:clamp(280px,30vw,380px);
  background:var(--paper); padding:18px; transform:rotate(-1.6deg);
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.4));
  -webkit-mask:
    radial-gradient(var(--r) at 50% 0,    #0000 99%, #000 101%) 0 0    / var(--s) 100% repeat-x,
    radial-gradient(var(--r) at 50% 100%, #0000 99%, #000 101%) 0 100%  / var(--s) 100% repeat-x,
    radial-gradient(var(--r) at 0 50%,    #0000 99%, #000 101%) 0 0    / 100% var(--s) repeat-y,
    radial-gradient(var(--r) at 100% 50%, #0000 99%, #000 101%) 100% 0  / 100% var(--s) repeat-y;
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(var(--r) at 50% 0,    #0000 99%, #000 101%) 0 0    / var(--s) 100% repeat-x,
    radial-gradient(var(--r) at 50% 100%, #0000 99%, #000 101%) 0 100%  / var(--s) 100% repeat-x,
    radial-gradient(var(--r) at 0 50%,    #0000 99%, #000 101%) 0 0    / 100% var(--s) repeat-y,
    radial-gradient(var(--r) at 100% 50%, #0000 99%, #000 101%) 100% 0  / 100% var(--s) repeat-y;
  mask-composite:intersect;
}
.stamp-inner{ position:relative; z-index:2; border:1.5px solid rgba(44,36,23,.25); padding:12px; }
.stamp-top{ display:flex; justify-content:space-between; align-items:flex-start; font-family:var(--display); color:var(--navy); margin-bottom:10px; }
.stamp-top .country{ font-weight:800; font-size:11px; letter-spacing:.18em; text-transform:uppercase; max-width:8em; line-height:1.2; }
.stamp-top .val{ font-weight:800; font-size:30px; line-height:.8; color:var(--terra-deep); text-align:right; }
.stamp-top .val small{ display:block; font-size:9px; letter-spacing:.14em; color:var(--navy); margin-top:3px; }
.stamp-card image-slot{ width:100%; height:300px; }
.stamp-bottom{ text-align:center; font-family:var(--display); color:var(--navy); margin-top:11px; }
.stamp-bottom b{ font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.stamp-bottom span{ display:block; font-size:10px; letter-spacing:.2em; color:var(--ink-faint); margin-top:2px; }
/* postmark overlay on the stamp */
.stamp-cancel{
  position:absolute; z-index:4; top:6px; right:2px; width:96px; height:96px; border-radius:50%;
  border:2px solid rgba(38,50,63,.45); transform:rotate(-16deg); opacity:.5;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--display); font-weight:700; font-size:9px; letter-spacing:.14em; color:var(--navy);
  line-height:1.3;
}
.stamp-cancel::after{ content:""; position:absolute; inset:7px; border:1px dashed rgba(38,50,63,.45); border-radius:50%; }

.spot-copy .eyebrow{ color:var(--mustard); }
.spot-copy h2{ font-size:clamp(34px,4.6vw,56px); margin:14px 0 6px; }
.spot-copy .breed{ font-family:var(--body); font-style:italic; font-size:20px; color:#b9c3a9; margin:0 0 18px; }
.spot-copy p{ color:#d8d2c2; max-width:48ch; }
.spot-copy .quote{ font-style:italic; font-size:22px; color:var(--cream-hi); border-left:3px solid var(--terra); padding-left:18px; margin:22px 0; }
.spot-meta{ display:flex; gap:30px; margin-top:26px; flex-wrap:wrap; }
.spot-meta div{ }
.spot-meta .k{ font-family:var(--display); font-weight:800; font-size:24px; color:var(--mustard); }
.spot-meta .l{ font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#9aa6b0; }

/* =================================================================
   WHAT YOU'LL RECEIVE
   ================================================================= */
.receive .head{ text-align:center; max-width:680px; margin:0 auto clamp(46px,5vw,66px); }
.receive h2{ font-size:clamp(32px,4.4vw,52px); margin-top:14px; }
.receive .head p{ font-size:19px; color:var(--ink-soft); }
.goods{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,36px); }
.good{ position:relative; }
.good .frame{
  position:relative; background:var(--paper); padding:14px;
  border:1px solid rgba(44,36,23,.1);
  box-shadow:0 16px 30px -22px rgba(44,36,23,.6);
}
.good:nth-child(1) .frame{ transform:rotate(-1.8deg); }
.good:nth-child(2) .frame{ transform:rotate(1.2deg); }
.good:nth-child(3) .frame{ transform:rotate(-1deg); }
.good image-slot{ width:100%; height:240px; }
.good h3{ font-size:22px; margin:20px 0 6px; color:var(--ink); }
.good p{ margin:0; font-size:16px; color:var(--ink-soft); }
.good .tag{
  position:absolute; top:-13px; left:14px; z-index:7;
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--sage); color:var(--cream-hi); padding:5px 11px; border-radius:20px;
  transform:rotate(-3deg); box-shadow:0 4px 10px -4px rgba(44,36,23,.5);
}
.good:nth-child(2) .tag{ background:var(--terra); }
.good:nth-child(3) .tag{ background:var(--navy); }
.receive .note-wrap{ display:flex; justify-content:center; margin-top:clamp(42px,5vw,62px); }
.note-stamp{
  position:relative; display:inline-block; text-align:center;
  font-family:var(--display); font-weight:700; font-size:clamp(17px,2vw,22px);
  letter-spacing:.015em; line-height:1.28; color:var(--terra-deep);
  text-transform:uppercase;
  border:2.5px solid var(--terra); border-radius:9px;
  padding:18px 34px; transform:rotate(-2.4deg);
  background:rgba(194,90,56,.045);
}
.note-stamp::before{
  content:""; position:absolute; inset:5px; pointer-events:none;
  border:1.4px dashed var(--terra); border-radius:5px; opacity:.55;
}
.note-stamp .ns-star{ color:var(--terra); margin:0 .5em; font-size:.8em; vertical-align:.06em; }

/* =================================================================
   FOUNDER BIO
   ================================================================= */
.founder-section{ background:var(--kraft); }
.founder-layout{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(38px,5vw,76px); align-items:center; }

.founder-visual{ position:relative; }
.photo-frame{
  position:relative; background:var(--paper); padding:15px;
  transform:rotate(-2deg);
  box-shadow:0 22px 40px -22px rgba(44,36,23,.55), 0 2px 0 rgba(44,36,23,.06);
  border:1px solid rgba(44,36,23,.08);
}
.photo-frame image-slot{ width:100%; height:380px; }
.photo-cap{
  position:absolute; left:0; right:0; bottom:17px; text-align:center;
  font-family:var(--body); font-style:italic; font-size:16px; color:var(--ink-soft);
}

.founder-letter h2{ font-size:clamp(32px,4.2vw,50px); color:var(--ink); margin:13px 0 18px; }
.founder-letter p{ margin:0 0 15px; font-size:18px; color:var(--ink-soft); max-width:54ch; }
.founder-letter p em{ font-style:italic; color:var(--terra-deep); }
.founder-letter .signoff{ font-size:18px; color:var(--ink); margin-top:22px; line-height:1.3; }
.founder-letter .sig{
  font-family:'Caveat', cursive; font-weight:700; font-size:46px; line-height:1;
  color:var(--terra-deep); display:inline-block; margin-top:4px;
}

/* =================================================================
   JOIN
   ================================================================= */
.join{ background:linear-gradient(180deg, var(--sage) 0%, var(--sage-deep) 100%); color:var(--cream-hi); position:relative; overflow:hidden; }
.join .paw{ color:rgba(255,255,255,.1); opacity:1; }
.join-card{
  position:relative; z-index:2; max-width:820px; margin:0 auto; text-align:center;
  background:var(--cream-hi); color:var(--ink); border-radius:22px;
  padding:clamp(36px,5vw,58px) clamp(26px,4vw,56px);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.5);
  border:2px solid rgba(44,36,23,.12);
}
.join-card .eyebrow{ color:var(--terra); }
.join-card h2{ font-size:clamp(32px,4.6vw,52px); margin:14px 0 10px; }
.join-card .lead{ max-width:42ch; margin:0 auto; }
.price{ display:flex; align-items:stretch; justify-content:center; gap:16px; margin:30px 0 8px; flex-wrap:wrap; }
.plan{
  position:relative; flex:0 1 168px; background:var(--paper);
  border:2px solid rgba(44,36,23,.16); border-radius:14px; padding:20px 22px 18px;
  display:flex; flex-direction:column; align-items:center;
}
.plan.best{ border-color:var(--terra); box-shadow:0 10px 24px -16px rgba(194,90,56,.7); }
.plan .amt{ font-family:var(--display); font-weight:800; font-size:40px; color:var(--ink); line-height:1; }
.plan .per{ font-family:var(--display); font-weight:600; font-size:14px; color:var(--ink-soft); margin-top:4px; }
.plan .plan-note{ font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:9px; }
.plan .badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-2.5deg);
  background:var(--terra); color:var(--cream-hi);
  font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 11px; border-radius:20px; white-space:nowrap; box-shadow:0 4px 10px -4px rgba(44,36,23,.5);
}
.plan-or{ align-self:center; font-family:var(--body); font-style:italic; font-size:17px; color:var(--ink-faint); }
.price-sub{ font-size:15px; color:var(--ink-faint); margin:0 0 26px; }
.join form{ display:flex; gap:10px; max-width:460px; margin:0 auto; }
.join input[type=email]{
  flex:1 1 auto; min-width:0; font-family:var(--body); font-size:17px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--ink-faint); border-radius:12px; padding:14px 16px;
}
.join input::placeholder{ color:var(--ink-faint); }
.join input:focus{ outline:none; border-color:var(--sage-deep); box-shadow:0 0 0 3px rgba(94,106,58,.2); }
.join .btn{ padding:14px 24px; }
.join .success{ display:none; font-family:var(--body); font-style:italic; font-size:20px; color:var(--sage-deep); }
.join .notify{ margin:16px auto 0; max-width:46ch; font-family:var(--body); font-style:italic; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.join-card.done .notify{ display:none; }
.join-card.done form{ display:none; }
.join-card.done .price,.join-card.done .price-sub{ display:none; }
.join-card.done .success{ display:block; }
.join .fine{ margin:18px 0 0; font-size:13.5px; color:var(--ink-faint); }

/* =================================================================
   FOOTER
   ================================================================= */
.foot{ background:var(--navy); color:#c3ccd3; position:relative; z-index:2; padding:clamp(48px,6vw,72px) 24px 40px; }
.foot-grid{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; gap:36px; flex-wrap:wrap; }
.foot .brand{ display:flex; align-items:center; gap:13px; }
.foot .brand img{ width:54px; height:54px; filter:brightness(0) invert(1); opacity:.92; }
.foot .brand b{ font-family:var(--display); font-weight:800; font-size:20px; color:var(--cream-hi); display:block; }
.foot .brand .tag{ font-family:var(--body); font-style:italic; font-size:16px; color:#9aa6b0; }
.foot-links{ display:flex; gap:46px; flex-wrap:wrap; }
.foot-col h4{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#7e8a94; margin:0 0 12px; }
.foot-col a{ display:block; font-family:var(--display); font-weight:600; font-size:15px; color:#c3ccd3; text-decoration:none; margin-bottom:8px; }
.foot-col a:hover{ color:var(--terra); }
.foot-bottom{ max-width:var(--maxw); margin:38px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--display); font-size:12.5px; letter-spacing:.08em; color:#7e8a94; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:880px){
  /* hero-flatlay/founder-photo's image-slot renders with zero effective
     size on at least one real mobile Safari device, confirmed with a
     diagnostic solid-color background that never appeared. Tried and
     ruled out on that device, all independently: renaming hero-grid/
     hero-art/bio-grid/bio-portrait (git history), Grid vs Flexbox,
     align-items center/stretch, min-height:0, min-width:0, order:-1 vs
     grid-template-areas, positive vs negative pin-stamp offsets. The one
     configuration that reliably worked in isolated testing (mobile-
     debug.html, since removed) was a plain block-stacked container with
     NO grid or flexbox involvement at all — grid and flex were the common
     thread in every failing variant regardless of their specific config.
     So: no display:grid/flex here at all. hero-visual was physically
     moved before hero-copy in the HTML (see beta.html) so plain DOM order
     puts the photo first, instead of order:-1 or grid-template-areas
     doing it — desktop keeps its current copy-left/photo-right layout via
     grid-area, unaffected by the DOM reorder. */
  .hero-layout{ display:block; }
  .hero-visual{ max-width:460px; margin:0 auto 32px; }
  /* Purely decorative badge that renders far outside hero-visual's bounds
     (up near the announcement bar) on real mobile Safari devices — hidden
     rather than chased further (see git history for what was tried). This
     needs to live at this breakpoint, not the narrower one below, since
     that's the one confirmed to actually apply on the affected phones. */
  .pin-stamp{ display:none; }
  .mail-frame image-slot{ height:280px; }
  /* Caption is white-space:nowrap at the desktop font-size (27px), sized
     for the wider desktop frame. On a narrow phone the frame shrinks to
     ~300px net of padding and the caption text doesn't fit, overflowing
     the frame's edge instead of wrapping. Shrink it to fit narrow frames
     while staying a single line. */
  .mail-frame .cap{ font-size:19px; left:16px; right:16px; }
  .steps{ grid-template-columns:1fr; gap:42px; }
  .step .dash{ display:none; }
  .spot-grid{ grid-template-columns:1fr; gap:40px; }
  /* No display:grid at all here either — same reasoning as hero-layout
     above. founder-visual is already first in the HTML, so plain block
     stacking alone gives the right visual order with no reorder trick
     needed. */
  .founder-layout{ display:block; }
  /* transform:rotate() on .mail-frame/.photo-frame doesn't affect layout,
     only rendering — the rotated corner visually spills past the item's
     computed box, and the grid's row gap alone wasn't enough clearance,
     so the next row's content (heading/eyebrow text) started overlapping
     the rotated photo corner. Extra margin-bottom absorbs the spillover. */
  .founder-visual{ max-width:380px; margin:0 auto 32px; }
  .photo-frame image-slot{ height:300px; }
  .stamp-card{ margin:0 auto; }
  .goods{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width:560px){
  body{ font-size:17px; }
  .join form{ flex-direction:column; }
  .foot-grid{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq{ background:var(--cream-hi); }
.faq-heading{ font-size:clamp(30px,4vw,46px); margin:12px 0 40px; color:var(--ink); }
.faq-list{ max-width:72ch; }
.faq-item{ border-top:1.5px solid rgba(44,36,23,.12); padding:0; }
.faq-item:last-child{ border-bottom:1.5px solid rgba(44,36,23,.12); }
.faq-item summary{
  list-style:none; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:18px; color:var(--ink);
  padding:20px 36px 20px 0; position:relative; user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:10px; height:10px;
  border-right:2px solid var(--terra); border-bottom:2px solid var(--terra);
  transform:translateY(-65%) rotate(45deg);
  transition:transform .2s;
}
.faq-item[open] summary::after{ transform:translateY(-35%) rotate(-135deg); }
.faq-item p{
  font-size:17px; color:var(--ink-soft); margin:0 0 16px;
  line-height:1.7; max-width:64ch;
}
.faq-item p:first-of-type{ margin-top:4px; }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact{ background:var(--kraft); }
.contact-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(40px,6vw,96px); align-items:start; }
.contact-letter h2{ font-size:clamp(30px,4vw,46px); margin:12px 0 18px; color:var(--ink); }
.contact-lead{ font-size:18px; color:var(--ink-soft); line-height:1.6; max-width:38ch; }
.contact-details{ display:flex; flex-direction:column; gap:0; padding-top:8px; }
.contact-row{
  display:grid; grid-template-columns:140px 1fr;
  gap:12px; padding:18px 0; border-top:1.5px solid rgba(44,36,23,.12);
  font-size:17px; align-items:start;
}
.contact-row:last-child{ border-bottom:1.5px solid rgba(44,36,23,.12); }
.contact-lbl{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding-top:2px; }
.contact-details a{ color:var(--terra-deep); text-decoration:none; }
.contact-details a:hover{ text-decoration:underline; }
@media(max-width:720px){
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .contact-row{ grid-template-columns:1fr; gap:4px; }
  .contact-lead{ max-width:100%; }
}