/* ============================================================
   The Citrus Society — "Worth the Squeeze" ebook landing page
   Palette: cream paper, lemon yellow, burnt zest, leaf green, ink
   ============================================================ */

:root{
  /* --lemon and --leaf are sampled straight from the logo artwork */
  --cream:      #FFF7E4;
  --paper:      #FFFDF6;
  --lemon:      #F8C848;
  --lemon-deep: #E0A21C;
  --zest:       #EE6C2B;
  --leaf:       #78B050;
  --leaf-deep:  #4C7C2E;
  --ink:        #1D1913;
  --ink-2:      #3A3227;
  --ink-soft:   #6B5F4C;
  --line:       #E4D7B8;
  --dark:       #17140F;

  --shadow-sm: 0 2px 0 var(--ink);
  --shadow:    0 6px 0 var(--ink);
  --shadow-lg: 0 12px 0 rgba(29,25,19,.9);

  --r:   18px;
  --r-lg: 28px;

  --wrap: 1180px;
  --pad: 24px;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:var(--f-display);
  color:var(--ink);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  font-weight:800;
}
/* Fraunces' ampersand is highly decorative and reads as a symbol at heading sizes.
   Headings spell out "and" instead — don't reintroduce "&" here. */
h1{ font-size:clamp(2.15rem,4.3vw,3.5rem); text-wrap:balance; }
h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3{ font-size:1.24rem; font-weight:800; }
p{ margin:0 0 1em; }
a{ color:inherit; }

.sr, .skip{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip:focus{
  position:fixed; top:12px; left:12px; width:auto; height:auto; clip:auto;
  background:var(--ink); color:var(--lemon); padding:10px 16px; border-radius:10px; z-index:999;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:820px; }

/* ---------------- buttons ---------------- */
.btn{
  --bg:var(--lemon); --fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-body); font-weight:700; font-size:.98rem;
  text-decoration:none; cursor:pointer;
  padding:.85em 1.5em; border-radius:100px;
  background:var(--bg); color:var(--fg);
  border:2.5px solid var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 5px 0 var(--ink); }
.btn:active{ transform:translateY(0); box-shadow:0 1px 0 var(--ink); }
.btn s{ opacity:.5; font-weight:500; }
.btn--sm{ padding:.6em 1.1em; font-size:.9rem; }
.btn--lg{ padding:1.05em 2em; font-size:1.06rem; }
.btn--block{ display:flex; width:100%; }
.btn--zest{ --bg:var(--zest); --fg:#fff; }
.btn--ink{ --bg:var(--ink); --fg:var(--lemon); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); box-shadow:none; }
.btn--ghost:hover{ background:#fff; box-shadow:0 5px 0 var(--ink); }

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,247,228,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:2.5px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.nav.is-stuck{ border-bottom-color:var(--ink); box-shadow:0 4px 22px rgba(29,25,19,.07); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.brand__mark{
  width:50px; height:50px; flex-shrink:0;
  object-fit:contain; transition:transform .3s ease;
}
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.06); }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__text b{ font-family:var(--f-display); font-weight:900; font-size:1.05rem; color:var(--ink); letter-spacing:-.02em; }
.brand__text i{ font-style:normal; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }

.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a{
  text-decoration:none; font-size:.94rem; font-weight:500; color:var(--ink-2);
  position:relative; white-space:nowrap;
}
/* .nav__links a sets a colour, so the button needs to win it back */
.nav__links a.btn{ color:var(--fg); }
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px;
  background:var(--zest); transition:right .22s ease;
}
.nav__links a:not(.btn):hover::after{ right:0; }

.nav__toggle{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:46px; height:46px; padding:0 11px;
  background:var(--lemon); border:2.5px solid var(--ink); border-radius:12px; cursor:pointer;
}
.nav__toggle span{ display:block; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------------- hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, #FFE59A 0%, rgba(255,229,154,0) 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  padding:clamp(48px,7vw,86px) 0 clamp(60px,8vw,100px);
}
.hero__sun{
  position:absolute; top:-220px; right:-180px; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,51,.55) 0%, rgba(255,210,51,0) 68%);
  pointer-events:none;
}
.hero__inner{
  position:relative; display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--zest); margin:0 0 18px;
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--zest); flex-shrink:0; }
.eyebrow--light{ color:var(--lemon); }
.eyebrow--light .dot{ background:var(--lemon); }

/* highlighter marker — painted as a background so it can't fall behind the
   section's own background layers the way a z-index:-1 pseudo-element does */
.hl{
  color:var(--ink); white-space:nowrap;
  background-image:linear-gradient(var(--lemon), var(--lemon));
  background-repeat:no-repeat;
  background-size:100% .28em;
  background-position:0 82%;
  padding-inline:.08em;
}

.lede{ font-size:clamp(1.04rem,1.5vw,1.2rem); color:var(--ink-soft); max-width:56ch; margin-bottom:30px; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px; }

.hero__ticks{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; margin:0; }
.hero__ticks li{ font-size:.88rem; font-weight:500; color:var(--ink-soft); display:flex; align-items:center; gap:7px; }
.hero__ticks li::before{
  content:"✓"; font-weight:800; color:var(--leaf-deep);
  width:19px; height:19px; border-radius:50%; background:#DDEECB;
  display:grid; place-items:center; font-size:.7rem; flex-shrink:0;
}

.hero__art{ position:relative; }

/* photos with graceful empty state */
.photo{
  position:relative; margin:0; overflow:hidden;
  border:3px solid var(--ink); border-radius:var(--r-lg);
  background:linear-gradient(135deg,#FFE9A8,#FFD9B0);
  box-shadow:var(--shadow-lg);
}
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo figcaption{ display:none; }
.photo.is-empty img{ display:none; }
.photo.is-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
}
.photo.is-empty::before{ content:"🍋"; font-size:2.6rem; opacity:.5; }
.photo.is-empty figcaption{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem; color:var(--ink); opacity:.55; text-align:center; padding:0 16px;
  word-break:break-word;
}
.photo--hero{ aspect-ratio:4/5; transform:rotate(1.6deg); }
.photo--tall{ aspect-ratio:3/4; }
.photo--small{
  aspect-ratio:1/1; position:absolute; right:-6%; bottom:-8%; width:46%;
  transform:rotate(-4deg); box-shadow:var(--shadow);
}

.badge--float{
  position:absolute; left:-18px; bottom:32px;
  display:flex; align-items:center; gap:11px;
  background:var(--paper); border:2.5px solid var(--ink); border-radius:100px;
  padding:11px 20px 11px 14px; box-shadow:var(--shadow-sm);
  transform:rotate(-2.5deg);
}
.badge--float b{ font-size:1.5rem; line-height:1; }
.badge--float span{ font-size:.76rem; line-height:1.3; color:var(--ink-soft); }
.badge--float strong{ color:var(--ink); font-size:.86rem; }

/* ---------------- marquee ---------------- */
.marquee{
  background:var(--ink); color:var(--lemon); overflow:hidden;
  border-block:3px solid var(--ink); padding:14px 0;
}
.marquee__track{
  display:flex; align-items:center; gap:36px; width:max-content;
  animation:slide 38s linear infinite;
}
.marquee span{
  font-family:var(--f-display); font-weight:800; font-size:1.05rem;
  letter-spacing:.02em; white-space:nowrap;
}
.marquee i{ font-style:normal; font-size:.95rem; opacity:.85; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ---------------- sections ---------------- */
.section{ padding:clamp(64px,8vw,110px) 0; }
.section--cream{ background:var(--cream); border-block:3px solid var(--ink); }
.section--dark{ background:var(--dark); border-block:3px solid var(--ink); }
.section--dark, .section--dark p{ color:#CFC5B0; }
.section--dark h2, .section--dark h3{ color:var(--paper); }

.sec-head{ max-width:760px; margin-bottom:clamp(36px,4vw,58px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }
.sec-head h2 em{ font-style:italic; color:var(--zest); }
.sec-sub{ font-size:1.06rem; color:var(--ink-soft); margin-top:14px; }
.sec-sub--light{ color:#A99C85; }

.grid{ display:grid; gap:22px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--tight{ gap:22px; }
/* each card keeps its own height instead of stretching to the tallest sibling */
.grid--start{ align-items:start; }

/* ---------------- cards ---------------- */
.card{
  background:var(--paper); border:3px solid var(--ink); border-radius:var(--r-lg);
  padding:30px 28px; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:0 11px 0 var(--ink); }
.card__num{
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--lemon); border:2.5px solid var(--ink);
  font-family:var(--f-display); font-weight:900; font-size:.95rem; color:var(--ink);
  margin-bottom:16px;
}
.card p{ margin:0; color:var(--ink-soft); font-size:.96rem; }

/* ---------------- parts (the book's 4 parts) ---------------- */
.parts{ display:grid; gap:22px; }
.part{
  background:var(--paper); border:3px solid var(--ink); border-radius:var(--r-lg);
  padding:32px 34px; box-shadow:var(--shadow);
}
.part--star{ background:linear-gradient(180deg,#FFF6DC,#FFEFC0); }
.part__head{ padding-bottom:20px; border-bottom:2px solid var(--line); margin-bottom:22px; }
.part__tag{
  display:inline-block; margin-bottom:12px;
  background:var(--ink); color:var(--lemon); border-radius:100px;
  padding:5px 15px; font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.part--star .part__tag{ background:var(--zest); color:#fff; }
.part__head h3{ font-size:clamp(1.35rem,2.4vw,1.85rem); margin:0 0 8px; }
.part__head p{ margin:0; color:var(--ink-soft); font-size:1rem; max-width:62ch; }

/* numbered because the book's sections really are numbered and ordered */
.part__list{ margin:0; padding:0; list-style:none; counter-reset:sec; display:grid; gap:15px; }
.part__list li{
  counter-increment:sec; position:relative; padding-left:46px;
  font-size:.96rem; color:var(--ink-soft); max-width:82ch;
}
.part__list li::before{
  content:counter(sec); position:absolute; left:0; top:-1px;
  width:30px; height:30px; border-radius:9px;
  background:var(--cream); border:2px solid var(--ink);
  display:grid; place-items:center;
  font-family:var(--f-display); font-weight:900; font-size:.85rem; color:var(--ink);
}
.part--star .part__list li::before{ background:var(--lemon); }
.part__list b{ color:var(--ink); font-weight:700; }

/* ---------------- steps ---------------- */
.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.step{
  position:relative; padding:26px 26px 26px 76px;
  background:#211D16; border:2.5px solid #3B342A; border-radius:var(--r);
  transition:border-color .2s ease, transform .2s ease;
}
.step:hover{ border-color:var(--lemon); transform:translateY(-3px); }
.step__n{
  position:absolute; left:24px; top:26px;
  width:36px; height:36px; border-radius:50%;
  background:var(--lemon); color:var(--ink);
  display:grid; place-items:center;
  font-family:var(--f-display); font-weight:900; font-size:1rem;
}
.step h3{ font-size:1.05rem; margin:4px 0 7px; }
.step p{ margin:0; font-size:.92rem; color:#A99C85; }

/* ---------------- table ---------------- */
.table-scroll{
  overflow-x:auto; border:3px solid var(--ink); border-radius:var(--r-lg);
  background:var(--paper); box-shadow:var(--shadow);
}
.ctable{ width:100%; border-collapse:collapse; min-width:340px; }
.ctable caption{
  caption-side:top; text-align:left;
  background:var(--ink); color:var(--paper);
  font-family:var(--f-display); font-weight:800; font-size:1rem;
  padding:15px 20px;
}
.ctable th, .ctable td{ padding:13px 20px; text-align:left; font-size:.93rem; }
.ctable tbody th{ font-weight:500; color:var(--ink-2); }
.ctable tbody tr{ border-top:2px solid var(--line); }
.ctable tbody tr:first-child{ border-top:0; }
.ctable td{
  color:var(--ink); text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; font-weight:500;
}
.ctable__total{ background:#FFF3C4; }
.ctable__total th, .ctable__total td{
  font-family:var(--f-display); font-weight:900; font-size:1.02rem;
  border-top:3px solid var(--ink); color:var(--ink);
}

/* the one number the whole section exists to deliver */
.grand{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-top:22px; padding:26px 34px;
  background:var(--lemon); border:3px solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.grand span{
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.1rem,2vw,1.4rem); color:var(--ink);
}
.grand b{
  font-family:var(--f-display); font-weight:900; letter-spacing:-.03em;
  font-size:clamp(2.2rem,5vw,3.4rem); color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1;
}

/* ---------------- cup economics ---------------- */
.cup{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,48px); align-items:center;
  margin-top:clamp(40px,5vw,64px); padding:clamp(28px,4vw,40px);
  background:var(--paper); border:3px solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.cup__copy h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin:0 0 12px; }
.cup__copy p{ margin:0; color:var(--ink-soft); font-size:.97rem; }
.cup__stats{ display:grid; gap:12px; }
.stat{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 22px; border:2.5px solid var(--ink); border-radius:100px; background:var(--cream);
}
.stat span{ font-size:.9rem; color:var(--ink-soft); font-weight:500; }
.stat b{
  font-family:var(--f-display); font-weight:900; font-size:1.5rem; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat--hero{ background:var(--lemon); box-shadow:var(--shadow-sm); }
.stat--hero b{ font-size:1.9rem; }

/* ---------------- timeline ---------------- */
.tl{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.tl li{
  position:relative; padding:26px 22px;
  background:var(--paper); border:3px solid var(--ink); border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.tl b{
  display:block; font-family:var(--f-display); font-weight:900;
  font-size:1.5rem; color:var(--ink); line-height:1.1; margin-bottom:4px;
}
.tl span{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--zest); margin-bottom:11px;
}
.tl p{ margin:0; font-size:.88rem; color:var(--ink-soft); }

.fineprint{
  margin:18px auto 0; max-width:720px; text-align:center;
  font-size:.83rem; color:var(--ink-soft); opacity:.85;
}

/* ---------------- story ---------------- */
.story{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,6vw,72px); align-items:center; }
.story__art{ position:relative; padding-bottom:26px; }
.story__copy p{ color:var(--ink-soft); }
.story__sign{
  font-family:var(--f-display); font-style:italic; font-size:1.12rem;
  color:var(--ink); margin-bottom:22px;
}

/* ---------------- pricing ---------------- */
.price{
  position:relative; max-width:520px; margin:0 auto;
  background:var(--paper); border:3px solid var(--ink); border-radius:var(--r-lg);
  padding:44px 38px 34px; box-shadow:0 14px 0 var(--lemon-deep);
}
.price__ribbon{
  position:absolute; top:-17px; left:50%; transform:translateX(-50%);
  background:var(--zest); color:#fff; border:2.5px solid var(--ink); border-radius:100px;
  padding:6px 20px; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
}
.price__seal{
  width:96px; height:96px; margin:0 auto 12px; object-fit:contain; display:block;
}
/* the card is a light island inside .section--dark — claw the text colours back */
.price, .price p, .price li{ color:var(--ink-2); }
.price h3{ text-align:center; font-size:1.55rem; margin:6px 0 4px; color:var(--ink); }
.price__sub{ text-align:center; color:var(--ink-soft); font-size:.94rem; margin-bottom:20px; }
.price__amount{ text-align:center; margin-bottom:26px; }
.price__amount s{ font-size:1.4rem; color:var(--ink-soft); opacity:.6; margin-right:12px; }
.price__amount b{ font-family:var(--f-display); font-size:4rem; font-weight:900; color:var(--ink); letter-spacing:-.03em; }
.price__list{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:11px; }
.price__list li{ position:relative; padding-left:30px; font-size:.95rem; color:var(--ink-2); }
.price__list li::before{
  content:"🍋"; position:absolute; left:0; top:0; font-size:.9rem;
}
.price .price__guar{
  margin:18px 0 0; text-align:center; font-size:.83rem; color:var(--ink-soft); line-height:1.55;
}

/* ---------------- final ---------------- */
.final{
  background:linear-gradient(160deg,var(--lemon) 0%,var(--lemon-deep) 100%);
  border-block:3px solid var(--ink);
  padding:clamp(64px,8vw,100px) 0; text-align:center;
}
.final__inner{ max-width:720px; }
.final__lemon{ font-size:3rem; display:block; margin-bottom:14px; }
.final h2{ margin-bottom:12px; }
.final p{ font-size:1.12rem; color:var(--ink-2); margin-bottom:28px; }

/* ---------------- faq ---------------- */
.faq{ display:grid; gap:12px; }
.faq details{
  background:var(--paper); border:3px solid var(--ink); border-radius:var(--r);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 56px 20px 24px; position:relative;
  font-family:var(--f-display); font-weight:800; font-size:1.04rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; background:var(--lemon); border:2px solid var(--ink);
  display:grid; place-items:center; font-size:1.05rem; font-weight:700; line-height:1;
  transition:transform .2s ease;
}
.faq details[open] summary::after{ content:"−"; transform:translateY(-50%) rotate(180deg); }
.faq details[open] summary{ background:var(--cream); }
.faq details > div{ padding:4px 24px 22px; }
.faq details p{ margin:0; font-size:.96rem; color:var(--ink-soft); }

/* ---------------- footer ---------------- */
.foot{ background:var(--dark); color:#A99C85; padding:56px 0 26px; }
.foot__inner{ display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap; padding-bottom:34px; }
/* the logo is black linework, so it needs a light disc behind it on the dark footer */
.foot__logo{
  width:110px; height:110px; object-fit:contain; margin-bottom:14px;
  background:var(--paper); border-radius:50%; padding:7px;
}
.foot__brand p{ max-width:38ch; font-size:.92rem; margin-bottom:10px; }
.foot__brand a{ color:var(--lemon); font-weight:700; text-decoration:none; font-size:.92rem; }
.foot__brand a:hover{ text-decoration:underline; }
.foot__nav{ display:grid; gap:10px; align-content:start; }
.foot__nav a{ color:#A99C85; text-decoration:none; font-size:.92rem; }
.foot__nav a:hover{ color:var(--lemon); }
.foot__legal{ border-top:1px solid #302A21; padding-top:22px; }
.foot__legal p{ margin:0; font-size:.78rem; line-height:1.6; opacity:.7; max-width:90ch; }

/* ---------------- reveal ---------------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------------- responsive ---------------- */
@media (max-width:960px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__art{ max-width:440px; margin-inline:auto; }
  .grid--3{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .story{ grid-template-columns:1fr; }
  .story__art{ max-width:400px; }
  .cup{ grid-template-columns:1fr; }
  .tl{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  .nav__links{
    position:absolute; top:76px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-bottom:3px solid var(--ink);
    padding:8px 24px 22px;
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .nav__links a:not(.btn)::after{ display:none; }
  .nav__links .btn{ margin-top:14px; border-bottom:2.5px solid var(--ink); }
  .nav__toggle{ display:flex; }
}

@media (max-width:700px){
  :root{ --pad:18px; }
  body{ font-size:16px; }
  .grid--2{ grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; }
  .hl{ white-space:normal; }
  .badge--float{ left:0; bottom:14px; }
    .price{ padding:38px 24px 28px; }
  .price__amount b{ font-size:3.2rem; }
    .part{ padding:26px 22px; }
  .tl{ grid-template-columns:1fr; }
  .grand{ flex-direction:column; align-items:flex-start; gap:4px; padding:24px; }
  .ctable th, .ctable td{ padding:12px 14px; }
}

/* ---------------- trailer refund offer, in the pricing card ---------------- */
.price__offer{
  margin:0 0 20px; padding:16px 18px 14px;
  background:var(--lemon); border:2.5px solid var(--ink); border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.price__offer b{
  display:block; font-family:var(--f-display); font-size:1.02rem; font-weight:800;
  color:var(--ink); margin-bottom:5px;
}
.price__offer p{ margin:0; font-size:.88rem; line-height:1.5; color:var(--ink-2); }
.price__offer span{
  display:block; margin-top:9px; padding-top:8px;
  border-top:1px solid rgba(29,25,19,.28);
  font-size:.74rem; color:rgba(29,25,19,.7);
}