/* =========================================================================
   Wonderdoodle: Design System
   Editorial, restrained, print-shop feel inspired by Wonderbly.
   Forest green + butter yellow + cream + near-black. Square-ish corners.
   ========================================================================= */

:root {
  /* Palette */
  --cream:       #FFFFFF;
  --cream-2:     #F5F5F3;
  --cream-3:     #EBEBE8;
  --paper:       #FFFFFF;

  --ink:         #1E1B16;
  --ink-soft:    #4C473E;
  --muted:       #8A8375;

  --green:       #367588;
  --green-dark:  #285B69;
  --green-soft:  #E4EFF2;

  --butter:      #F7E27C;
  --butter-soft: #FBEEB2;

  --peach:       #FBE7D3;   /* soft neutral used for default book cover */

  --line:        rgba(30, 27, 22, 0.12);
  --line-strong: rgba(30, 27, 22, 0.22);

  --shadow-sm: 0 1px 2px rgba(30, 27, 22, 0.06);
  --shadow-md: 0 8px 22px rgba(30, 27, 22, 0.09);
  --shadow-lg: 0 22px 48px rgba(30, 27, 22, 0.14);

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  /* Matched to wonderbly.com, measured: at a 1600px viewport their content
     column is 1280px wide, so 160px of margin sits on each side. Ours ran
     1360px (120px margins) and read wider and busier than the reference.
     Equal margins come from `width: calc(100% - Xpx)` plus `margin: 0 auto`,
     so both sides move together whenever this number changes. */
  --maxw: 1280px;
  /* Square corners throughout. The tokens stay so every box still refers to
     one place if a radius is ever wanted again. */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-pill: 0;

  --nav-h: 70px;
}

/* -------------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; color: var(--ink-soft); }
ul { margin: 0; padding: 0; list-style: none; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 0.9rem;
}

.section-title {
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  margin-bottom: 0.3em;
}

.lead {
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* -------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------- */
.container {
  width: calc(100% - 48px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0;
}

.section { padding: 60px 0; }
.section--tight { padding: 44px 0; }

.section-head {
  max-width: 620px;
  margin: 0 auto 36px;
  text-align: center;
}
.section-head .lead { margin-left: auto; margin-right: auto; }
.center { text-align: center; }

/* Compact section header: one line, left-aligned, optional action on the right.
   Used instead of a full centred eyebrow+title+lead trio so a page doesn't
   read as a stack of competing headlines. */
.section-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.section-bar h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  margin: 0;
}
.section-bar p {
  margin: 6px 0 0;
  font-size: 0.96rem;
  color: var(--ink-soft);
  max-width: 52ch;
}
.section-bar__action { flex: none; padding-bottom: 3px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--green);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, gap 0.15s ease;
}
.link-arrow svg { flex: none; }
.link-arrow:hover { border-color: var(--green); gap: 11px; }

@media (max-width: 640px) {
  .section-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-bar__action { padding-bottom: 0; }
}

/* -------------------------------------------------------------------------
   Subpage masthead: one header per page, not one per section
   ------------------------------------------------------------------------- */
.page-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 52px;
}
.page-head__inner { max-width: 720px; }
.page-head h1 {
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  margin-bottom: 0.35em;
}
.page-head .lead { font-size: 1.09rem; max-width: 56ch; margin: 0; }
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 18px;
}
.crumbs a { color: var(--muted); border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--green); border-color: var(--green); }
.crumbs span[aria-current] { color: var(--ink-soft); font-weight: 600; }

/* Skip link (keyboard users land here first) */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
  font-size: 0.92rem;
}
.skip:focus { left: 0; }

/* Available to screen readers, not shown; for headings the visual design
   conveys another way (e.g. the create-flow stepper). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   Buttons: rectangular, editorial
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.95em 1.7em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}

.btn--primary {
  background: var(--green);
  color: #fff;
}
.btn--primary:hover { background: var(--green-dark); box-shadow: var(--shadow-sm); }

.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-dark); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; box-shadow: var(--shadow-sm); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: #fff; }

.btn--lg { font-size: 1.05rem; padding: 1.05em 2em; }
.btn--sm { font-size: 0.92rem; padding: 0.7em 1.2em; }
.btn--block { display: flex; width: 100%; }

/* -------------------------------------------------------------------------
   Promo bar
   ------------------------------------------------------------------------- */
.promo {
  background: var(--green);
  color: #fff;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 8px 16px;
  letter-spacing: 0.01em;
}
.promo__code {
  display: inline-block;
  background: var(--butter);
  color: var(--ink);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  margin-left: 8px;
  letter-spacing: 0.04em;
}
/* Locked state: the chip is the link to the sign-up that unlocks the code, and
   it is the only one with copy after it ("op je eerste bestelling"), so the
   right-hand gap lives here rather than on every chip. */
a.promo__code { transition: background 0.15s ease; margin-right: 8px; }
a.promo__code:hover { background: #fff; }

/* -------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s ease;
}
.nav.is-scrolled { box-shadow: var(--shadow-sm); }

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 38px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.01em;
  color: var(--green);
  margin-right: 4px;
}
.brand__mark { width: 32px; height: 32px; flex: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav__links a {
  position: relative;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
  padding: 6px 0;
  transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--green); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transition: transform 0.18s ease;
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--green); font-weight: 600; }
.nav__links a.is-active::after { transform: scaleX(1); }

.nav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Language picker ------------------------------------------------------- */
.langpick { position: relative; flex: none; }
.langpick__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  padding: 6px 11px 6px 9px;
  cursor: pointer;
  font: 600 0.78rem/1 var(--font-body);
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.langpick__btn:hover { border-color: var(--ink); }
.langpick__btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.langpick__btn > svg:not(.langpick__chev) {
  width: 19px;
  height: 14px;
  border-radius: 0;
  display: block;
  flex: none;
}
.langpick__chev { color: var(--muted); flex: none; }
.langpick__btn[aria-expanded="true"] .langpick__chev { transform: rotate(180deg); }

.langpick__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 172px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 60;
}
.langpick__menu.is-hidden { display: none; }
.langpick__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  cursor: pointer;
  font: 500 0.9rem/1 var(--font-body);
  color: var(--ink);
  text-align: left;
}
.langpick__opt svg { width: 20px; height: 15px; border-radius: 0; flex: none; display: block; }
.langpick__opt:hover { background: var(--cream-2); }
.langpick__opt.is-on { font-weight: 700; background: var(--green-soft); }
.langpick__opt:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* In the mobile drawer the picker sits on its own row, below the links, and
   opens downward from the left edge. */
.mobile-menu .langpick { margin-top: 20px; align-self: flex-start; }
.mobile-menu .langpick__menu { right: auto; left: 0; }

.nav__icon {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  transition: color 0.15s ease;
}
.nav__icon:hover { color: var(--green); }
.nav__cart-label { font-size: 0.95rem; font-weight: 500; }

/* Basket, with the number of books waiting in it */
.nav__cart { position: relative; }
.nav__cart-count {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--green);
  color: #fff;
  font: 700 0.66rem/16px var(--font-body);
  text-align: center;
}
.nav__cart-count.is-hidden { display: none; }

.nav__toggle {
  display: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   Hero: a boxed split panel with a zigzag seam
   Above the phone breakpoints it runs --hero-bleed wider than the content
   column on each side, so the top of the page reads as a masthead rather than
   as the first card in the stack. It never reaches the window edge. Narrower
   than that there is no room to bleed, so it keeps the .container width below
   and every phone rule further down applies unchanged.
   ------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(360px, 36%) minmax(0, 64%);
  align-items: stretch;
  background: var(--cream);
  width: calc(100% - 48px);
  max-width: var(--maxw);
  margin: 34px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero__panel {
  position: relative;
  background: var(--butter);
  display: flex;
  align-items: center;
  padding: 40px clamp(28px, 3.6vw, 52px);
}
.hero__panel-inner { max-width: 430px; }
.hero__zig {
  position: absolute;
  top: 0;
  left: 100%;
  width: 20px;
  height: 100%;
  background: var(--butter);
  z-index: 2;
  clip-path: polygon(
    0% 0%,
    100% 5.556%, 0% 11.111%, 100% 16.667%, 0% 22.222%,
    100% 27.778%, 0% 33.333%, 100% 38.889%, 0% 44.444%,
    100% 50%, 0% 55.556%, 100% 61.111%, 0% 66.667%,
    100% 72.222%, 0% 77.778%, 100% 83.333%, 0% 88.889%,
    100% 94.444%, 0% 100%
  );
}
.hero h1 {
  /* The 2.7vw slope keeps the headline at three lines down to ~1150px. A
     steeper slope holds a bigger size but wraps to four, which is what made
     the panel the tallest part of the hero. */
  font-size: clamp(1.9rem, 2.7vw, 2.4rem);
  font-weight: 500;
  margin-bottom: 0.3em;
  color: var(--ink);
}
.hero h1 em {
  font-style: italic;
  color: var(--green);
}
.hero__sub {
  font-size: 1.04rem;
  color: var(--ink-soft);
  max-width: 42ch;
  margin-bottom: 1.15em;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__note {
  margin: 16px 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__note svg { color: var(--green); flex: none; }

.hero__visual {
  position: relative;
  background: var(--paper);
  display: grid;
  place-items: center;
  padding: 22px 40px;
  overflow: hidden;
}
.hero__shot {
  position: relative;
  width: min(560px, 100%);
  /* A floor only, below the cover's own height, so the panel keeps its shape if
     the cover image fails to load. The cover is what sets the height. */
  min-height: 340px;
}
.hero__book {
  width: min(330px, 61%);
  margin-left: auto;
  transform: rotate(2.25deg) translateY(-2px);
  transform-origin: 50% 72%;
  box-shadow:
    0 30px 54px rgba(30, 27, 22, 0.22),
    0 7px 16px rgba(30, 27, 22, 0.13);
}
.hero__shot .hero__book.book-cover {
  display: grid;
  width: min(330px, 61%);
  box-shadow:
    0 30px 54px rgba(30, 27, 22, 0.22),
    0 7px 16px rgba(30, 27, 22, 0.13);
}
.hero__sketch {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 138px;
  width: 154px;
  margin: 0;
  background: #fff;
  padding: 8px 8px 6px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transform: rotate(-5deg);
}
.hero__sketch img { border-radius: 0; }
.hero__sketch figcaption {
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
  margin-top: 5px;
}
.hero__journey {
  position: absolute;
  z-index: 1;
  left: 137px;
  top: 160px;
  width: 132px;
  overflow: visible;
  color: var(--green);
  transform: rotate(-2deg);
}
.hero__journey path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 8;
}
.hero__journey path:last-child { stroke-dasharray: none; }

/* -------------------------------------------------------------------------
   How it works: editorial numbered columns
   ------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.step {
  border-top: 2px solid var(--ink);
  padding-top: 22px;
}
.step__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--green);
  margin-bottom: 16px;
}
.step__icon { display: none; }
.step h3 { font-size: 1.4rem; margin-bottom: 0.3em; }
.step p { margin: 0; font-size: 0.98rem; }

/* -------------------------------------------------------------------------
   Split showcase
   ------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.media-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  background: var(--paper);
}
.ba .media-frame {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.ba .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ba__card--drawing .media-frame img {
  transform: scale(1.55);
  transform-origin: 50% 38%;
}
.ba__card--source .media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}
.ba__card--source .media-frame { position: relative; }
/* Book covers are 4:5, so at full column width they tower over the copy. */
.media-frame--portrait { max-width: 330px; margin: 0 auto; }
.split__list { margin-top: 22px; }
.split__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  color: var(--ink-soft);
}
.split__list .tick {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  margin-top: 2px;
}

/* Sections used to alternate white and grey down the page. They are all plain
   white now; the spacing and the boxed panels carry the rhythm instead. */
.tint { background: var(--paper); }
.tint--cream { background: var(--paper); }

/* Before / after */
.ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
}
.ba__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.ba__label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.ba__arrow { color: var(--green); }

/* -------------------------------------------------------------------------
   Product grid (bestsellers / examples)
   ------------------------------------------------------------------------- */
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.products--roomy { gap: 32px; }
/* Flex column so price/age rows sit on one line across the grid, whatever the
   description length. */
.product { display: flex; flex-direction: column; }
.product__tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 24px;
  margin-bottom: 14px;
  transition: background 0.2s ease;
}
.product:hover .product__tile { background: var(--cream-2); }
.product__tile img {
  width: 72%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease;
}
.product:hover .product__tile img { transform: translateY(-4px); }
.product__title { font-size: 1.16rem; margin: 0 0 4px; }
.product__desc { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 10px; }
.product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
}
.product__price { font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.product__ages { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.product__meta {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

/* -------------------------------------------------------------------------
   "What's in every book" strip
   ------------------------------------------------------------------------- */
.incl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.incl__cell { background: var(--paper); padding: 26px 24px; }
.incl__cell h3 { font-size: 1.08rem; margin-bottom: 6px; }
.incl__cell p { margin: 0; font-size: 0.92rem; }
.incl__num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: 12px;
}
@media (max-width: 900px) { .incl { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .incl { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Detailed process steps (how-it-works page)
   ------------------------------------------------------------------------- */
.process { display: flex; flex-direction: column; gap: 64px; }
.process__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.process__row:nth-child(even) .process__media { order: 2; }
/* Cap the artwork so a portrait cover doesn't tower over its copy column. */
.process__media .media-frame { max-width: 380px; margin: 0 auto; }
.process__media .media-frame--step-original {
  width: min(100%, 242px);
  height: 380px;
}
.process__media .media-frame--step-original img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.process__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}
.process__label b {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid; place-items: center;
  font-size: 0.8rem;
  letter-spacing: 0;
}
.process__copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.4em; }
.process__copy p { max-width: 50ch; }
.process__note {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: var(--cream-2);
  border-left: 2px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .process { gap: 48px; }
  .process__row { grid-template-columns: 1fr; gap: 28px; }
  .process__row:nth-child(even) .process__media { order: 0; }
}

/* -------------------------------------------------------------------------
   FAQ groups (faq page)
   ------------------------------------------------------------------------- */
.faq-group { max-width: 800px; margin: 0 auto 48px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 6px;
}

/* -------------------------------------------------------------------------
   Pricing
   ------------------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.plan {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan--featured {
  border: 2px solid var(--green);
  z-index: 1;
  transform: translateY(-4px) scale(1.018);
  box-shadow: 0 12px 30px rgba(30, 27, 22, 0.08);
}
.plan__flag {
  position: absolute;
  top: -13px; left: 32px;
  background: var(--green);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
}
.plan h3 { font-size: 1.5rem; margin-bottom: 4px; }
.plan__desc { font-size: 0.92rem; color: var(--muted); min-height: 42px; margin-bottom: 16px; }
.plan__price { font-family: var(--font-display); font-size: 2.6rem; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.plan__price span { font-family: var(--font-body); font-size: 0.95rem; color: var(--muted); font-weight: 500; }
.plan__unit { font-size: 0.85rem; color: var(--muted); margin-bottom: 22px; }
.plan__feats { margin-bottom: 26px; flex: 1; }
.plan__feats li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.94rem; color: var(--ink-soft);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.plan__feats li:last-child { border-bottom: 0; }
.plan__feats .tick { color: var(--green); flex: none; margin-top: 2px; }

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
}
.faq__q .chev { flex: none; transition: transform 0.25s ease; color: var(--green); }
.faq__item.is-open .chev { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq__a p { padding: 0 0 24px; margin: 0; max-width: 64ch; }

/* -------------------------------------------------------------------------
   CTA band
   ------------------------------------------------------------------------- */
.cta-band {
  background: var(--green);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 66px 48px;
  text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.cta-band p { color: rgba(255,255,255,0.82); max-width: 52ch; margin: 0 auto 28px; }
.cta-band .btn { background: var(--butter); color: var(--ink); }
.cta-band .btn:hover { background: #fff; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.footer {
  background: var(--green);
  color: rgba(255,255,255,0.78);
  padding: 72px 0 34px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer__about { font-size: 0.94rem; color: rgba(255,255,255,0.72); max-width: 34ch; }
.footer h4 {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer__links li { margin-bottom: 10px; }
.footer__links a { color: rgba(255,255,255,0.78); font-size: 0.95rem; transition: color 0.15s ease; }
.footer__links a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  flex-wrap: wrap;
}
.footer__bottom p { margin: 0; font-size: 0.86rem; color: rgba(255,255,255,0.6); }
.footer__legal {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.footer__legal a {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.6);
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer__legal a:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.24);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.85);
  transition: background 0.15s ease, color 0.15s ease;
}
.footer__social a:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* -------------------------------------------------------------------------
   Reveal-on-scroll
   ------------------------------------------------------------------------- */
/* Reveal class kept for markup compatibility, but content is static (no scroll-in) */
.reveal { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
   Focus & motion
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 0;
}
.footer :focus-visible, .cta-band :focus-visible, .promo :focus-visible {
  outline-color: var(--butter);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; margin-top: 24px; }
  .hero__panel { padding: 40px 32px 44px; }
  .hero__zig { display: none; }
  .hero__visual { padding: 34px 40px 38px; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--reverse .split__media { order: 0; }
  .products { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .nav__inner { gap: 20px; }
  .nav__links { gap: 18px; }
  .nav__links a { font-size: 0.9rem; }
  .nav__actions { gap: 12px; }
}

@media (max-width: 900px) {
  .nav__links, .nav__actions .nav__icon, .nav__cart-label { display: none; }
  .nav__actions .btn { display: none; }
  .nav__toggle { display: inline-flex; }
}

@media (max-width: 560px) {
  .container, .hero { width: calc(100% - 36px); }
  .hero__visual { padding: 28px 20px 32px; }
  .hero__shot { min-height: 250px; }
  .hero__shot .hero__book.book-cover { width: min(220px, 62%); }
  .hero__book { transform: rotate(1.5deg); }
  .hero__sketch { top: 104px; width: 104px; padding: 6px 6px 5px; }
  .hero__sketch figcaption { font-size: 0.56rem; }
  .hero__journey { left: 90px; top: 118px; width: 80px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 44px 0; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .plans { grid-template-columns: 1fr; }
  .ba { grid-template-columns: 1fr; }
  .ba__mid { transform: rotate(90deg); justify-self: center; }
  .cta-band { padding: 52px 26px; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 900px) {
  .plan--featured { transform: none; }
}

@media (max-width: 460px) {
  .products { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* Mobile menu drawer */
.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0;   /* `top` is corrected on open, see main.js */
  background: var(--cream);
  z-index: 90;
  overflow-y: auto;
  padding: 30px 28px;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu.is-open { transform: none; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn { margin-top: 22px; }