/* Landing-page layout. Loads after base.css, which owns the palette, section
   themes, typography, header, footer, and reveal states. */

/* Fluid, so the gutters grow with the screen instead of stranding empty space
   either side on a large monitor. The percentage is the knob for how much air
   sits left and right — lower it for more. Percentage, not vw: unaffected by
   the scrollbar. */
:root {
  --container:clamp(1100px, 86%, 1800px);
  /* Same gutter the container leaves, but resolved against the viewport, so the
     hero copy can hold the page's left edge while the photo runs full-bleed. */
  --gutter:max(24px, calc((100vw - clamp(1100px, calc(0.86 * (100vw - 48px)), 1800px)) / 2));
  /* The sticky header is what sits at the top here, so the canvas follows it.
     Keep in step with the theme-color meta in each page's <head>. */
  --page-top:var(--cream);
}

/* Hero -----------------------------------------------------------------
   Fills the first screen, logo pinned at the top and the rest centred in what
   is left. min-height, not height: below ~760px the stacked photo and copy are
   taller than the screen and have to push the section open. svh keeps mobile
   Safari's collapsing URL bar from cropping the bottom.

   --hero-pad is the air above and below the copy; the photo ignores it and
   fills the section. position:relative anchors the photo to the section. */
.hero {
  --hero-pad:clamp(48px,6.5vh,96px);
  position:relative;
  display:flex; flex-direction:column; min-height:100vh; min-height:100svh;
}
/* base.css's clamp is sized for sections you scroll to and pushed the grid past
   the fold; the gutter moves to .hero-copy so the photo can reach the edge. */
.hero > .section-pad {
  flex:1; display:flex;
  padding:var(--hero-pad) 0;
}
/* A flex item shrink-wraps by default, which would collapse the grid. */
.hero > .section-pad > .hero-grid { width:100%; }

/* Its own class, not `.hero .container`, which would also catch the header's
   container. Full width with no gap, so the split lands on the screen's centre
   and the photo owns everything right of it; .hero-copy carries the inset the
   container would have given. */
.hero-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  max-width:none;
}
/* Rows, so the text can be centred while the badge floats in the space left
   under it: text in row 2 with equal spacers either side, badge centred in the
   lower one. The margin is doubled because centring halves it — it makes up the
   section's bottom padding, which the badge's half of the gap has and the text's
   half does not. */
.hero-copy {
  display:grid; grid-template-rows:1fr auto 1fr;
  padding-left:var(--gutter); padding-right:clamp(28px,4vw,64px);
  container-type:inline-size;
}
.hero-text { grid-row:2; }
.hero-text > * + * { margin-top:24px; }
.hero .badge { grid-row:3; align-self:center; margin-top:var(--hero-pad); }
/* Each span is one of the three hand-placed lines. */
.hero h1 span { display:block; }
/* Keeps those breaks intact: the longest line, "Blend Calculator", is 7.4x the
   font size, so it fits any column wider than 8cqw. cqw, not vw, because the
   column is what constrains it. 4rem is base.css's ceiling. */
.hero h1 { font-size:min(10.5cqw, 4rem); }
/* Out of flow so it clears the section's padding and fills the right half from
   the top of the page to the next section. cover, since the section's shape
   won't match the image's. */
.hero-photo {
  position:absolute; top:0; right:0; width:50%; height:100%;
  display:block; object-fit:cover;
}
/* Shown whole with a margin, rather than cropped to fill the half. */
.hero-visual { object-fit:contain; padding:clamp(24px, 4vw, 64px); padding-top:clamp(8px, 1.5vw, 24px); }
/* Side by side, the text column's own padding is gap enough, and slimmer
   top/bottom padding lets the picture grow. */
@media (min-width:761px) {
  .hero-visual { padding:clamp(8px, 1.5vw, 24px) clamp(16px, 2vw, 32px) clamp(8px, 1.5vw, 24px) 0; }
}

/* Statement -------------------------------------------------------------
   Sized above the h2 scale so it reads as a statement, not a section heading. */
.statement { text-align:center; }
.statement h2 { font-size:clamp(2.4rem,5.6vw,3.6rem); }

/* Section headings ----------------------------------------------------- */
.section-head { text-align:center; margin-bottom:clamp(40px,5vw,64px); }
.section-head p { margin-top:14px; }

/* How it works --------------------------------------------------------- */
.how-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
/* No video: one centred column, narrow enough that the steps don't run to full
   measure. The track shrinks below 720px on its own, so phones are covered. */
.how-grid.no-video { grid-template-columns:minmax(0,720px); justify-content:center; }

/* Drop-in slot for the demo video: swap the placeholder markup for a
   <video class="video-slot" ...> and this still applies. Portrait recording?
   Change aspect-ratio to 9/16. */
.video-slot {
  width:100%; aspect-ratio:16/9;
  background:rgb(var(--ink-rgb) / .08);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
video.video-slot { object-fit:cover; }
.video-slot .play {
  width:64px; height:64px; border-radius:50%;
  background:rgb(var(--ink-rgb) / .16);
  display:flex; align-items:center; justify-content:center;
}
.video-slot .play::after {
  content:""; margin-left:4px;
  border-left:18px solid rgb(var(--ink-rgb) / .45);
  border-top:11px solid transparent; border-bottom:11px solid transparent;
}

.how-text {
  background:var(--cream); border-radius:var(--radius);
  padding:clamp(28px,4vw,44px);
  display:flex; flex-direction:column;
}
.steps { display:flex; flex-direction:column; gap:clamp(26px,3vw,38px); }
.step { display:grid; grid-template-columns:auto 1fr; column-gap:20px; align-items:start; }
/* Same line-height as the h4 beside it; the numeral is larger, so its cap sits
   lower and the negative margin takes that back. Tops then read as level. */
.step .num {
  font-family:var(--heading-font); font-size:2.2rem; line-height:1.2;
  margin-top:-.134em;
  color:var(--gold);
}
/* The gold numeral would vanish on the gold section. */
.theme-bright .step .num { color:var(--beige); }
.step h4 { margin-bottom:8px; }
.step .step-body { grid-column:2; }

/* Features -------------------------------------------------------------
   Scroll-snap carousel: native swipe on touch, arrows on desktop. The cards
   are bare, so the screenshots sit straight on the section colour. */
.carousel { position:relative; }
.car-track {
  display:flex; gap:26px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  /* A scroll container clips at its padding box, and overflow-x:auto forces
     overflow-y to auto whatever we ask for — so with no top padding the cards'
     hover lift is shaved straight off the screenshots, which sit flush against
     this edge. The padding opens room for it; the negative margin puts the
     track back where it was, so nothing below moves. */
  padding-top:10px; margin-top:-10px;
  padding-bottom:4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.car-track::-webkit-scrollbar { display:none; }

.feature {
  flex:0 0 calc((100% - 2 * 26px) / 3);    /* three across on desktop */
  scroll-snap-align:start; text-align:center;
}
.feature h4 { margin-bottom:8px; }
.feature p { font-size:.98rem; }
/* The frames are whole phones, 2.04x as tall as they are wide, so width drives
   how tall the card runs: every 10px here is another 20px of section. The cap
   is what shrinks them — the column is far wider — so it is the only number to
   change. */
.feature img {
  width:100%; max-width:210px; height:auto; display:block;
  margin:0 auto 22px;
}
/* A notification overhangs this frame, so widen it to keep the phone the same size. */
.feature img.shot-wide { max-width:min(calc(210px * 955 / 640), 100%); }

/* Shared rows for image, heading and text, so those line up across the cards
   however many lines a heading wraps to. Falls back to the flex track above. */
@supports (grid-template-rows:subgrid) {
  .car-track {
    display:grid; grid-auto-flow:column;
    grid-template-rows:auto auto auto;
    grid-auto-columns:calc((100% - 2 * 26px) / 3);  /* three across on desktop */
    gap:0 26px;
  }
  .feature { display:grid; grid-template-rows:subgrid; grid-row:span 3; }
  @media (max-width:960px) { .car-track { grid-auto-columns:calc((100% - 26px) / 2); } }
  @media (max-width:600px) { .car-track { grid-auto-columns:100%; } }
}
/* Arrows sit outside the track where there's room, and tuck in when there
   isn't. They stay real buttons, so keyboard and screen readers get them. */
.car-btn {
  position:absolute; top:38%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:0; padding:0; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .15s ease;
}
/* An SVG chevron centres exactly; the ‹ › glyphs have uneven side bearings. */
.car-btn svg { display:block; }
.car-btn:disabled { opacity:.3; cursor:default; }
.car-btn.prev { left:-22px; }
.car-btn.next { right:-22px; }
@media (max-width:1220px) {
  .car-btn.prev { left:4px; }
  .car-btn.next { right:4px; }
}

/* Closing call to action ----------------------------------------------- */
.closing { text-align:center; }
/* Gold rather than the theme's beige, for punch on the charcoal. */
.closing h2, #notebook h2 { color:var(--gold); }
.closing .badge { margin-top:32px; }
.closing p { margin-top:18px; }

/* One plant silhouette centred behind each charcoal band's text: gold through
   a mask. The band turns beige in dark mode, where the same tint barely shows,
   hence the stronger alpha there. */
#notebook, #get, .title-band { position:relative; isolation:isolate; --plant-alpha:.1; }
:root[data-theme="dark"] :is(#notebook, #get, .title-band) { --plant-alpha:.14; }
:is(#notebook, #get, .title-band)::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:50%; left:50%; transform:translate(-50%, -50%);
  width:clamp(300px, 44vw, 640px); aspect-ratio:1;
  background:var(--gold); opacity:var(--plant-alpha);
  -webkit-mask:var(--plant) center / contain no-repeat;
  mask:var(--plant) center / contain no-repeat;
}
#notebook::before { --plant:url(/img/plants/woody.webp); }
#get::before { --plant:url(/img/plants/floral.webp); transform:translate(-50%, -50%) scaleX(-1); }
.title-band::before { --plant:url(/img/plants/herbal.webp); }

/* Safety notice --------------------------------------------------------
   Beige rather than theme-cream's cream, so the notice sits on the same
   surface as the hero: the two are only 3% apart, so the difference read as an
   accident. Overriding just --bg keeps the theme's charcoal text. */
.safety-section { --bg:var(--beige); }

.safety { text-align:center; font-size:.95rem; }
/* An h2, so it matches "Features" and the other section headings. */
.safety h2 { margin-bottom:20px; }
.safety p + p { margin-top:.85em; }
.safety a { font-weight:600; }

/* Responsive ----------------------------------------------------------- */
@media (max-width:960px) {
  .feature { flex:0 0 calc((100% - 26px) / 2); }   /* two across */
}
@media (max-width:760px) {
  /* Stacked, so the logo centres over the column instead of holding the edge. */
  .hero .site-header .container { justify-content:center; }
  /* The gap below the logo is the section's --hero-pad, so match it above and
     the logo sits evenly between the top of the screen and the photo. */
  .hero .site-header { padding-top:calc(var(--hero-pad) + var(--safe-t)); }
  .hero-grid { grid-template-columns:1fr; gap:clamp(32px,5vw,72px); text-align:center; }
  /* Stacked: no spare height to float the badge in, so it follows the text. */
  .hero-copy { display:block; padding:0 24px; }
  .hero-copy .badge { margin-top:24px; }
  .hero .lead { margin-left:auto; margin-right:auto; }
  /* Back into the flow, above the copy. */
  .hero-photo {
    position:static; width:100%; max-width:420px; height:auto;
    margin:0 auto; order:-1;
  }
  .how-grid { grid-template-columns:1fr; }
  .video-slot { max-width:520px; margin:0 auto; }
}
@media (max-width:600px) {
  .feature { flex:0 0 100%; }                      /* one at a time */
  /* Width is the wrong lever on a phone: the frame is 2.04x as tall as it is
     wide, so the 320px that fits across the column stood 654px tall — over
     three quarters of a 844px screen, with the heading and copy pushed off it.
     Cap the height against the viewport and let the width follow, so a card
     stays a card at any phone size. 320px is still the ceiling, being half the
     source files, but on a phone the height is what binds. */
  .feature img { width:auto; max-width:min(320px, 100%); max-height:44svh; }
  /* Looser leading, now that the paragraphs wrap to short lines. */
  .safety { font-size:1rem; line-height:1.7; }
}

@media (prefers-reduced-motion:reduce) {
  .car-track { scroll-behavior:auto; }
}

/* Notebook offer: shared by the English and French public pages. */
.notebook-header { position:sticky; top:0; z-index:20; background:var(--cream); color:var(--ink); border-bottom:1px solid rgb(var(--ink-rgb) / .12); padding:calc(14px + var(--safe-t)) max(20px,var(--safe-r)) 14px max(20px,var(--safe-l)); }
.notebook-header .container { display:flex; align-items:center; gap:24px; }
/* The same font on every page, whatever the page's own text font. */
.notebook-header { font-family:'Epilogue',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.notebook-header img { display:block; width:185px; height:auto; }
.primary-nav { display:flex; flex:1; justify-content:center; gap:30px; font-size:.88rem; --pill-inset:-10px -16px; }
/* 600, the weight the footer's nav links already carry — the header set is the
   same kind of link and was the only one left at the body weight. */
.primary-nav a { text-decoration:none; font-weight:600; }
/* "The app" menu: a native disclosure, so it opens without JS; navigation.js closes it. */
.nav-menu { position:relative; }
.nav-menu summary {
  position:relative; isolation:isolate; display:inline-flex; align-items:center;
  font-weight:600; cursor:pointer; list-style:none;
}
.nav-menu summary::-webkit-details-marker { display:none; }
/* Its gold pill, hover lift and press come from the nav links' rules in motion.css. */
.nav-menu-list {
  position:absolute; top:calc(100% + 18px); left:50%; z-index:30; transform:translateX(-50%);
  display:flex; flex-direction:column; min-width:220px; padding:8px; border-radius:20px;
  background:#fff; box-shadow:0 18px 40px rgb(var(--shadow-rgb) / .14);
}
/* Rows, not the nav's floating pills. */
.notebook-page .primary-nav .nav-menu-list a { display:block; padding:11px 14px; border-radius:12px; white-space:nowrap; }
.notebook-page .primary-nav .nav-menu-list a::before { content:none; }
.notebook-page .primary-nav .nav-menu-list a:is(:hover, :active) { transform:none; background:var(--cream); }
.languages { display:flex; gap:4px; flex-shrink:0; font-size:.88rem; }
/* Circles: a fixed square box, so EN and FR come out the same size. The
   outline keeps the unselected one reading as a button. */
.languages a {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; text-decoration:none;
  box-shadow:inset 0 0 0 1.5px rgb(var(--ink-rgb) / .3);
}
.languages a[aria-current="page"] { background:var(--deep); color:var(--on-deep); box-shadow:none; }
.download-button { display:inline-block; background:var(--deep); color:var(--on-deep); padding:14px 20px; border-radius:999px; font-size:.95rem; font-weight:700; line-height:1.4; text-align:center; text-decoration:none; }
/* No max-width: 215px was narrower than the English label, which broke it over
   two lines. It sets its own width and keeps the label on one line; the header
   is flex, so the row absorbs it. */
.notebook-header .download-button { font-size:.82rem; white-space:nowrap; }
/* Each section fills at least one screen; longer content expands naturally.
   Centering shares spare space evenly above and below the existing padding. */
.notebook-page main > section {
  min-height:100vh;
  min-height:100svh;
}
.notebook-page main > section.section-pad {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(64px,10svh,128px);
  padding-bottom:clamp(64px,10svh,128px);
}
.notebook-page main > section.section-pad > .container { width:100%; }
/* Cream rather than the theme's beige, so the hero matches the other pale
   sections further down the page. The height leaves room for the sticky
   header, so the content centres in what is actually visible. */
.notebook-hero { --bg:var(--cream); }
.notebook-page main > .notebook-hero { min-height:calc(100svh - var(--header-height, 0px)); }
/* The moderne title of the recipe pages: Bricolage Grotesque, the part after
   "&" on its own lines in gold. cqw keeps the longest word ("essentielles.")
   inside the column. */
.notebook-hero h1 {
  color:#1e1c1a; font:800 min(12cqw, 5.4rem)/.9 'Bricolage Grotesque','Arial Black',Impact,sans-serif;
  letter-spacing:-.05em; text-wrap:balance;
}
.notebook-hero h1 .accent-word { color:var(--gold); }
/* A word inside the gold line kept in ink, and on that line. */
.notebook-hero h1 .title-ink { display:inline; color:#1e1c1a; }
.notebook-hero .hero-copy {
  grid-template-rows:auto auto;
  align-content:center;
  gap:26px;
}
.notebook-hero .hero-text { grid-row:auto; }
.notebook-hero .hero-action { align-self:start; }
.eyebrow { font-size:.85rem; font-weight:700; letter-spacing:.05em; margin-bottom:18px; }
.reason-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.reason { border-top:1px solid color-mix(in srgb, currentColor 30%, transparent); padding-top:24px; }
/* Numbers set in the heading face and gold, so they read with the section title. */
.reason .eyebrow { font-family:var(--heading-font); color:var(--gold); }
.reason h3 { margin-bottom:16px; }
.reason p { max-width:40ch; }
/* Shared rows, so the number, heading and text line up across the three
   columns however many lines a heading wraps to. Off once they stack. */
@supports (grid-template-rows:subgrid) {
  @media (min-width:761px) {
    .reason-grid { grid-template-rows:auto auto auto; }
    .reason { display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:0; }
  }
}
/* Unlike the gold band this replaced, this section's ground flips with the
   page, so the arrows have to flip with it: --deep and --cream were safe only
   while the gold kept the section a light-mode island. --ink against --bg is
   the section's own text-on-ground pair, so it inverts by construction — a
   dark disc on a pale page, a pale disc on a dark one.

   The hairline is the boundary the gold used to be. #plans wears the same
   theme, so the two grounds are identical in both modes and the sections
   would otherwise run together; --ink-rgb flips with them, so one rule
   serves both.

   It runs the width of the content column, not the viewport, and sits on the
   section's own bottom edge — the boundary itself, which is the one place that
   does not depend on how these pages pad or centre their sections.

   The width restates what --container works out to. --container is a
   percentage, and it resolves against whatever box the element sits in: inside
   .container that is the section's content box, but ::after's containing block
   is the padding box, so the same declaration would come out a gutter wider
   than the text above it. Taking the 48px off by hand lands on the same number
   without reaching for vw, which would count the scrollbar. */
.notebook-features { position:relative; --btn-bg:var(--ink); --btn-fg:var(--bg); }
.notebook-features::after {
  content:""; position:absolute; bottom:0; left:0; right:0;
  width:min(clamp(1100px, calc(0.86 * (100% - 48px)), 1800px), calc(100% - 48px));
  margin-inline:auto;
  height:1px; background:rgb(var(--ink-rgb) / .12);
}
.feature h3 { font-size:1.5rem; margin-bottom:10px; }
.step h3 { font-size:1.6rem; margin-bottom:8px; }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1050px; margin:auto; }
.web-plan { padding:clamp(24px,4vw,42px); border:1px solid rgb(var(--ink-rgb) / .28); border-radius:24px; }
.web-plan.pro { background:var(--beige); border:2px solid var(--ink); }
.plan-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.plan-header h3 { margin:0; }
.billing-switch { position:relative; isolation:isolate; display:flex; gap:2px; padding:3px; border:1px solid rgb(var(--ink-rgb) / .28); border-radius:999px; }
.billing-switch::before { content:""; position:absolute; z-index:-1; top:3px; bottom:3px; left:0; width:var(--billing-width, 0px); transform:translateX(var(--billing-left, 3px)); border-radius:999px; background:var(--gold); transition:transform 260ms ease-in-out, width 260ms ease-in-out; }
.billing-switch[hidden] { display:none; }
.billing-switch button { display:flex; align-items:center; justify-content:center; gap:4px; min-height:32px; padding:6px 8px; border:0; border-radius:999px; background:transparent; color:var(--ink); font:inherit; font-size:.75rem; font-weight:600; cursor:pointer; }
.billing-switch button[aria-pressed="true"] { background:transparent; color:var(--on-accent); }
.billing-switch button:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.billing-badge { font-size:.65rem; white-space:nowrap; }
.web-plan .billing-note { margin-top:24px; font-size:.88rem; line-height:1.6; min-height:3.2em; }
.plan-price-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin:12px 0; }
.web-plan .plan-price-row .price { margin:0; }
.annual-comparison { font-size:1.2rem; opacity:.65; white-space:nowrap; }
.web-plan .price { font-family:var(--heading-font); font-size:clamp(2.2rem,4vw,3rem); margin:12px 0; }
.web-plan ul { margin:24px 0 0; padding-left:22px; }
.web-plan li + li { margin-top:12px; }
.subscription-terms { max-width:1000px; margin:28px auto 0; font-size:.94rem; line-height:1.7; }
.subscription-terms p + p { margin-top:14px; }
.subscription-terms .subscription-details { font-size:.8rem; line-height:1.6; }
.narrow { max-width:800px; }
.narrow h1 + p, .narrow h2 + p { margin-top:22px; }
.narrow > p + p { margin-top:20px; }
.text-link { display:inline-block; margin-top:24px; font-weight:700; text-underline-offset:4px; }
.landing-faq { margin:30px 0; }
.landing-faq details { border-bottom:1px solid rgb(var(--ink-rgb) / .28); padding:20px 0; }
.landing-faq summary { cursor:pointer; font-weight:700; }
.landing-faq details p { margin:16px 0 0; line-height:1.7; }
.closing .download-button { margin-top:28px; background:var(--cream); color:var(--ink); }
.help-heading { margin-top:42px; }
.help-download { margin-top:40px; }
.notebook-page [id] { scroll-margin-top:var(--header-height, 0px); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:50; background:white; color:#222; padding:12px; }
.skip-link:focus { top:10px; }
@media(max-width:1100px) { .primary-nav { display:none; } .notebook-header .container { gap:16px; } .notebook-header .languages { margin-left:auto; } }
/* With the nav gone, the toggle heads the right-hand group instead of trailing
   the logo. */
@media(max-width:1100px) { .notebook-header .theme-toggle { margin-left:auto; } :root[data-theme] .notebook-header .languages { margin-left:0; } }
@media(max-width:760px) {
 .notebook-hero .hero-copy { order:0; padding:0 24px; }
 .notebook-hero .hero-photo { order:1; max-width:none; }
 /* Stacked, the photo is the last thing in the section, so --hero-pad stops
    being air under the copy and becomes a strip of ground between the photo
    and the band below it. The top half still does its job. */
 .notebook-hero > .section-pad { padding-bottom:0; }
 /* Dropping the padding is not enough on a tall phone: the section is a
    min-height:100vh column, and any slack left when the copy and photo do not
    fill it settles under the photo. space-between parks it between the two
    instead, so the photo ends on the section boundary at every screen size. */
 .notebook-hero .hero-grid { align-content:space-between; }
 .notebook-hero .hero-action { margin-top:24px; }
 .notebook-hero h1 { font-size:clamp(2.5rem,8vw,3.5rem); }
 .reason-grid, .plan-grid { grid-template-columns:1fr; }
 .notebook-header .container { flex-wrap:wrap; gap:10px; }
 .notebook-header img { width:155px; }
 /* The hero's own button is right below, so the header drops its copy. */
 .notebook-header .download-button { display:none; }
}
@media(max-width:520px) {
 .notebook-header { padding-top:calc(10px + var(--safe-t)); padding-bottom:10px; }
}/* Center the text and download action together as one group. */
.notebook-hero .hero-action { grid-row:auto; }

/* Titles and buttons share the original yellow accent; the hero title is ink
   with a gold second half (above). */
.notebook-page { --title-accent:var(--gold); }
.notebook-page .theme-cream,
.notebook-page .theme-dark { --heading:var(--title-accent); }
.notebook-page .download-button { background:var(--gold); color:var(--on-accent); transition:background-color .2s ease, transform .2s ease; }
.notebook-page .download-button:hover { background:var(--gold-hover); transform:translateY(-2px); }
.notebook-page .languages a[aria-current="page"] { background:var(--gold); color:var(--on-accent); }
.notebook-page .web-plan.pro { border-color:var(--title-accent); }
.notebook-page .text-link { color:var(--title-accent); }
.notebook-page #sharing { --heading:var(--ink); --body:var(--ink); }
.notebook-page #sharing .text-link { color:var(--ink); }
@media (prefers-reduced-motion:reduce) {
 .notebook-page .download-button { transition:none; }
 .notebook-page .download-button:hover { transform:none; }
}

/* Page title bands (support, sharing, legal) wear the closing band's gold. */
.notebook-page .title-band { --heading:var(--gold); }

.notebook-page .dark-heading { color:var(--ink); }

/* Dark amber keeps the accent readable on pale backgrounds. The dark theme
   inverts the problem — pale grounds become charcoal, where the plain amber is
   the readable one — so --amber-deep carries both values. */
.notebook-page .theme-cream,
.notebook-page .theme-dark { --heading:var(--amber-deep); }
/* The carousel section shares #plans's ground, so it wears #plans's heading
   too, not the dark amber the other cream sections use. It has to follow the
   rule above rather than join the #plans group below: that group outranks the
   accent on an id, and this section has none. */
.notebook-page .notebook-features { --heading:var(--title-accent); }
/* Sharing guidance uses dark headings in both languages. */
.notebook-page.sharing-page .theme-cream { --heading:var(--ink); }
/* The home page's plans and FAQ headings wear the hero's yellow instead. */
.notebook-page #plans,
.notebook-page #faq { --heading:var(--title-accent); }

/* The sharing and support pages open on a title band holding a heading and one
   line, which the page-wide "every section fills a screen" rule was stretching
   to 100vh — so most of the height came from that, not from the padding. Sized
   as a band instead, with padding of its own, landing between the two.

   The home pages are not caught by this: their first section is the hero,
   which carries .section-pad on an inner div rather than on the section. */
.notebook-page main > section.section-pad:first-child {
  min-height:0;
  padding-top:clamp(52px,6.5vw,92px);
  padding-bottom:clamp(52px,6.5vw,92px);
}

/* "Share a recipe, keep the details" measures 13.45em in the heading face, so
   the 4rem ceiling wants 861px and wraps in the 800px column. 3.6rem wants
   775px and holds one line down to roughly 610px wide, where it wraps like any
   other heading rather than shrinking to nothing. Lowering the ceiling only:
   the clamp keeps its own behaviour on phones. English alone — the French
   title is half again as long and would need 2.6rem to do the same. */
.sharing-page:lang(en) h1 { font-size:clamp(2.6rem, 6.4vw, 3.6rem); }

/* A two-tone ring remains visible against every section colour. */
.notebook-page :is(a, button, summary, [tabindex]):focus-visible {
  outline:3px solid var(--ink);
  outline-offset:3px;
  box-shadow:0 0 0 6px var(--focus-halo);
}
.notebook-page :is(a, button, summary, [tabindex]) { scroll-margin-block:calc(var(--header-height, 0px) + 16px) 16px; }

@media (max-width:760px) {
  /* Let the header scroll away so zoomed text has the whole screen. */
  .notebook-header { position:relative; }
  .notebook-page [id],
  .notebook-page :is(a, button, summary, [tabindex]) { scroll-margin-block:16px; }
  .mobile-heading-line { display:block; }
  .languages a { width:44px; height:44px; }
  .languages { font-size:1rem; }
  .notebook-page .hero-copy { min-width:0; padding-left:max(24px,var(--safe-l)); padding-right:max(24px,var(--safe-r)); }
  .notebook-page h1 { font-size:clamp(2rem,8vw,3.5rem); }
  /* Long heading reads better ragged-right than centred on a phone. */
  #plans .section-head { text-align:left; }
  .notebook-page :is(h1,h2,h3,p,li,a,summary) { overflow-wrap:anywhere; }
  .notebook-page :is(.reason-grid,.plan-grid,.container) { min-width:0; }
  .notebook-page .subscription-terms,
  .notebook-page .subscription-details,
  .notebook-page .feature small { font-size:1rem; line-height:1.65; }
  .notebook-page .text-link { padding-block:12px; }
  .landing-faq summary { min-height:44px; padding-block:10px; }
  .landing-faq details { padding-block:10px; }
  /* Separate controls from the screenshot, with room for focus outlines. */
  .carousel { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
  .carousel .car-track { order:0; flex:0 0 100%; min-width:0; }
  .carousel .car-btn { position:static; order:1; transform:none; width:48px; height:48px; }
  .notebook-page .carousel .car-btn:is(:hover,:focus-visible,:active) { transform:none; }
}

/* Home pages: the pins' type, Bricolage titles and Epilogue text. */
.home-page {
  --heading-font:'Bricolage Grotesque','Arial Black',Impact,sans-serif;
  --body-font:'Epilogue',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.home-page :is(h2,h3,h4) { font-weight:800; letter-spacing:-.045em; line-height:1; }
.home-page .reason .eyebrow { font-weight:800; letter-spacing:-.03em; }
/* Kept in the serif: the plan prices and the headings of the two dark bands. */
.home-page :is(.web-plan .price, #notebook h2, #get h2) { font-family:'Averia Serif Libre',Georgia,'Times New Roman',serif; }
.home-page :is(#notebook h2, #get h2) { font-weight:400; letter-spacing:-.02em; line-height:1.2; }
.home-page .lead { font-weight:500; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.45; }
/* Carousel titles: the opening in the hero's ink, the rest in gold. */
.home-page .feature h3 { color:#1e1c1a; }
.home-page .feature h3 .accent-word { color:var(--gold); }

/* Phones: the footer links fold behind a Menu button. navigation.js adds
   .is-collapsible, so without JS they stay as they were. */
.footer-toggle { display:none; }
@media (max-width:760px) {
  .site-footer.is-collapsible .wordmark { display:block; margin:0 auto 18px; }
  .site-footer.is-collapsible .footer-toggle {
    display:inline-flex; align-items:center; min-height:44px; padding:10px 24px;
    border:0; border-radius:999px; background:#fff; color:var(--on-accent);
    font:inherit; font-weight:700; cursor:pointer;
  }
  .site-footer.is-collapsible:not(.is-open) nav { display:none; }
  .site-footer.is-collapsible nav {
    display:flex; flex-direction:column; max-width:320px; margin:16px auto 0; padding:8px;
    border-radius:20px; background:#fff; box-shadow:0 18px 40px rgb(var(--shadow-rgb) / .14);
  }
  /* Rows, as in the header's menu. */
  .site-footer.is-collapsible nav a { justify-content:center; margin:0; padding:10px 14px; border-radius:12px; }
  .site-footer.is-collapsible nav a::before { content:none; }
  .site-footer.is-collapsible nav a:is(:hover, :active) { transform:none; background:var(--cream); }
}