/* ============================================================================
   MaxPet landing, draft redesign (28-09-2026). Served only at /draft/<token>.
   Everything is prefixed .lp- so nothing here can leak into or fight style.css
   on the live pages. Theme variables (--ink, --sage, --bg, ...) come from the
   <style id="petos-theme"> block the page emits, the same one every page uses.
   ---------------------------------------------------------------------------- */

:root {
  --lp-shell: 1160px;
  --lp-gold: #c9a34e;
  --lp-gold-deep: #a8863a;
  --lp-paper: #f4f1e8;
  --lp-graphite: #3b3f3a;
  --lp-ease: cubic-bezier(.2, .7, .2, 1);
  --lp-radius: 22px;
  --lp-radius-sm: 14px;
  --lp-shadow: 0 24px 70px rgba(30, 46, 38, .12);
  --lp-shadow-sm: 0 8px 26px rgba(30, 46, 38, .08);
}

/* ---- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.lp {
  margin: 0;
  background: var(--bg, #eef3ec);
  color: var(--ink, #1e2e26);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* No sideways panning on phones: html (the viewport) is locked to the viewport width, and every
     section clips its own decorative overflow (the paper washes behind headings reach past their
     boxes by design, which is exactly what used to widen the page).
     ⛔ NEVER overflow-x: hidden HERE AS WELL AS ON html: with both set, body becomes its own
     scroll container and every position: sticky on the page stops working (the hero copy and the
     phone scrolled straight off the top, 28-09-2026). clip does not create a scroll container. */
  overflow-x: clip; position: relative; width: 100%;
}
body.lp a { color: inherit; }
body.lp img, body.lp svg { display: block; max-width: 100%; }
body.lp h1, body.lp h2, body.lp h3, body.lp p { margin: 0; }
.lp-shell { width: min(100% - 40px, var(--lp-shell)); margin-inline: auto; }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; border-radius: 6px; }

/* ---- type ------------------------------------------------------------------ */
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2, #4f6157); margin-bottom: 18px;
}
.lp-eyebrow .paw { width: 14px; height: 14px; color: var(--lp-gold); flex: none; }
.lp-h1 {
  font-size: clamp(2.7rem, 6.6vw, 5rem); line-height: .98; letter-spacing: -.045em; font-weight: 800;
  text-wrap: balance;
}
.lp-h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800;
  text-wrap: balance;
}
.lp-h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
.lp-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-2, #4f6157); text-wrap: pretty; }
.lp-muted { color: var(--ink-2, #4f6157); }
.lp-small { font-size: .86rem; color: var(--ink-3, #8a9a90); }
/* a pencil underline for one word per heading. Drawn in code (SVG), not a hand font. */
.lp-mark { position: relative; white-space: nowrap; }
.lp-mark svg {
  position: absolute; left: -2%; right: -2%; bottom: -.12em; width: 104%; height: .32em;
  color: var(--lp-gold); pointer-events: none;
}
.lp-mark svg path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; opacity: .9; }

/* ---- buttons --------------------------------------------------------------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 22px; border-radius: 15px; border: 1px solid transparent;
  font: inherit; font-size: .95rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform .18s var(--lp-ease), background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn:active { transform: translateY(0); }
.lp-btn--primary { background: var(--sage, #2f6d4d); color: #fff; box-shadow: 0 12px 28px rgba(47, 109, 77, .28); }
.lp-btn--primary:hover { background: var(--sage-dark, #22543a); }
/* `body.lp a { color: inherit }` is (0,1,2) and beat the white above, so every green LINK button had dark
   ink on green (about 2.3:1, too low to read comfortably). Live everywhere since 30-09-2026. */
body.lp a.lp-btn--primary { color: #fff; }
.lp-btn--ghost { background: rgba(255, 255, 255, .55); border-color: var(--line, #dde7dd); color: var(--ink); backdrop-filter: blur(8px); }
.lp-btn--ghost:hover { background: #fff; }
.lp-btn--sm { min-height: 40px; padding: 0 16px; font-size: .86rem; border-radius: 12px; }
.lp-btn svg { width: 16px; height: 16px; }

/* ---- header (floating pill, cooldock-style, our palette) ------------------- */
.lp-header {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
  animation: lp-drop .8s var(--lp-ease) .2s backwards;
}
.lp-header__pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 34px rgba(30, 46, 38, .12), inset 0 1px 0 #fff;
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.lp-header.is-scrolled .lp-header__pill { background: rgba(255, 255, 255, .9); box-shadow: 0 14px 40px rgba(30, 46, 38, .16); }
.lp-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; margin-right: 10px; }
.lp-brand img { width: 28px; height: 28px; border-radius: 8px; }
.lp-brand .name { font-weight: 800; letter-spacing: -.02em; font-size: 1rem; }
.lp-brand .name span { color: var(--sage); }
.lp-brand .tm { font-size: .5em; font-weight: 600; letter-spacing: 0; margin-left: 1px; color: var(--ink-3); }
.lp-nav { display: flex; align-items: center; gap: 2px; }
.lp-nav a {
  text-decoration: none; font-size: .88rem; font-weight: 600; color: var(--ink-2);
  padding: 8px 11px; border-radius: 999px; transition: background-color .15s ease, color .15s ease;
}
.lp-nav a:hover { background: var(--sage-soft, #dce9e0); color: var(--ink); }
.lp-header .lp-btn { margin-left: 6px; }
.lp-nav a[aria-current="page"] { background: var(--sage-soft, #dce9e0); color: var(--ink); }
/* phones: the bar keeps the brand and a menu button, the links open in a sheet under it (29-09-2026) */
.lp-header__burger {
  display: none; place-items: center; width: 40px; height: 40px; margin-left: 2px; padding: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer;
}
.lp-header__burger:hover { background: var(--sage-soft, #dce9e0); }
.lp-header__burger svg { width: 22px; height: 22px; }
.lp-menu {
  pointer-events: auto; margin-top: 8px; width: min(100% - 32px, 340px); display: grid; gap: 2px; padding: 8px;
  border-radius: 20px; background: #fff; border: 1px solid var(--line, #dde7dd);   /* solid: the headline ghosted through at .97 */
  box-shadow: 0 18px 50px rgba(30, 46, 38, .18);
}
.lp-menu[hidden] { display: none; }
.lp-menu a { text-decoration: none; font-weight: 600; font-size: .98rem; padding: 12px 14px; border-radius: 12px; color: var(--ink); }
.lp-menu a:hover, .lp-menu a[aria-current="page"] { background: var(--sage-soft, #dce9e0); }
@media (min-width: 861px) { body.lp .lp-menu { display: none; } }
@media (max-width: 860px) {
  /* phones: the store badges sit right below in the hero, so the header keeps only the brand (28-09-2026) */
  .lp-nav, .lp-header .lp-btn--ghost, .lp-header .lp-btn--primary { display: none; }
  .lp-header__pill { padding: 6px 6px 6px 10px; }
  .lp-brand { margin-right: 4px; }
  .lp-header__burger { display: grid; }
}
/* "Get the app" in the header scrolls back to the badges and gives them a nudge so the click is seen */
.lp-hero__ctas.is-pulse > * { animation: lp-pulse .9s var(--lp-ease); }
@keyframes lp-pulse { 0% { transform: none; } 35% { transform: scale(1.07); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-hero__ctas.is-pulse > * { animation: none; } }
@keyframes lp-drop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }

/* ---- the field: a fixed layer behind the whole page ---------------------------- */
.lp-bg { position: fixed; inset: 0; z-index: 0; background: var(--lp-paper); pointer-events: none; }
.lp-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* past the hero the field is muted a little under the content; JS drives the opacity */
.lp-bg__mute { position: absolute; inset: 0; background: var(--bg); opacity: 0; }
body.lp > main, body.lp > footer { position: relative; z-index: 1; overflow-x: clip; }
.lp-section { overflow-x: clip; }
/* a soft paper wash behind text that sits straight on the field */
.lp-wash { position: relative; }
.lp-wash::before { content: ""; position: absolute; inset: -10% -8%; z-index: -1; border-radius: 40px; background: radial-gradient(ellipse at center, rgba(244,241,232,.9) 0%, rgba(244,241,232,.78) 55%, rgba(244,241,232,0) 78%); pointer-events: none; }
.lp-wash--tight::before { inset: -40% -6%; }
.lp-section__head { position: relative; }
.lp-section__head::before { content: ""; position: absolute; inset: -14% -14%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(244,241,232,.92) 0%, rgba(244,241,232,.8) 50%, rgba(244,241,232,0) 76%); pointer-events: none; }

/* ---- hero: sticky sketch scene ---------------------------------------------- */
.lp-hero { position: relative; height: 260vh; height: 260svh; }
@media (max-width: 720px) { .lp-hero { height: 230svh; } }
.lp-scene {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: transparent;
}
.lp-scene__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp-scene__fade { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
.lp-scene__fade--top { top: 0; height: 34vh; background: linear-gradient(180deg, var(--bg) 0%, rgba(238, 243, 236, 0) 100%); }
.lp-scene__fade--bottom { bottom: 0; height: 22vh; background: linear-gradient(0deg, var(--bg) 0%, rgba(238, 243, 236, 0) 100%); }
/* the end-of-hero wash: the scene settles into the page background as you leave it */
.lp-scene__wash { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; z-index: 3; }

.lp-scene__content {
  position: absolute; z-index: 4; left: 50%; top: 13vh; top: 13svh; transform: translateX(-50%);
  width: min(100% - 40px, 760px); text-align: center;
  will-change: transform, opacity;
}
.lp-scene__content::before { content: ""; position: absolute; inset: -12% -18%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(244,241,232,.92) 0%, rgba(244,241,232,.75) 45%, rgba(244,241,232,0) 72%); pointer-events: none; }
.lp-scene__content > * { animation: lp-rise .9s var(--lp-ease) backwards; }
.lp-scene__content > :nth-child(1) { animation-delay: .15s; }
.lp-scene__content > :nth-child(2) { animation-delay: .3s; }
.lp-scene__content > :nth-child(3) { animation-delay: .5s; }
.lp-scene__content > :nth-child(4) { animation-delay: .7s; }
.lp-scene__content > :nth-child(5) { animation-delay: .85s; }
@keyframes lp-rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.lp-hero .lp-h1 { margin-inline: auto; max-width: 14ch; }
.lp-hero .lp-lead { margin: 22px auto 0; max-width: 42ch; }
.lp-hero__ctas { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.lp-store { display: inline-block; height: 52px; transition: transform .18s var(--lp-ease); }
/* two rows: the app stores, then the three ways in (look around, sign in, create an account) */
.lp-hero__ctas--rows { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
.lp-hero__stores, .lp-hero__account { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) {
  /* phones: badges side by side, Explore across, then Sign in and Create account as a pair.
     Five controls in LESS height than the three stacked ones took before. */
  .lp-hero__ctas--rows { gap: 10px; margin-top: 22px; }
  .lp-hero__stores { gap: 10px; flex-wrap: nowrap; }
  .lp-hero__stores .lp-store { height: 46px; }
  .lp-hero__account { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 322px); }
  .lp-hero__account > :first-child { grid-column: 1 / -1; }
  .lp-hero__account .lp-btn { min-height: 48px; padding: 0 12px; }
}
/* THE FIT. The hero is one screen tall and clips what does not fit, so the type has to give on a
   short screen. A phone in Safari with its toolbars showing is about 550 to 660px tall, NOT the 812
   of its full screen, and a laptop window is often under 700. Measured, not guessed (29-09-2026). */
.lp-hero--account .lp-h1 { font-size: clamp(2.6rem, min(6.6vw, 9.4vh), 5rem); }
@media (min-width: 721px) and (max-height: 860px) {
  .lp-hero--account .lp-hero__trust { display: none; }
  .lp-hero--account .lp-scene__content { top: 11vh; top: 11svh; }
  .lp-hero--account .lp-lead { margin-top: 16px; }
  .lp-hero--account .lp-hero__ctas { margin-top: 20px; }
}
@media (max-height: 700px) { .lp-hero--account .lp-scene__hint { display: none; } }
/* phones: never start the copy under the header bar, however short the screen */
@media (max-width: 720px) { .lp-hero--account .lp-scene__content { top: max(10vh, 78px); top: max(10svh, 78px); } }
@media (max-width: 720px) and (max-height: 600px) {
  .lp-hero--account .lp-eyebrow { margin-bottom: 10px; }
  .lp-hero--account .lp-h1 { font-size: 2.25rem; }
  .lp-hero--account .lp-lead { margin-top: 14px; font-size: .96rem; line-height: 1.45; }
  .lp-hero--account .lp-hero__ctas { margin-top: 14px; gap: 8px; }
  .lp-hero--account .lp-hero__stores .lp-store { height: 42px; }
  .lp-hero--account .lp-hero__account { gap: 8px; }
  .lp-hero--account .lp-hero__account .lp-btn { min-height: 44px; }
}
/* phones: the floating support button sat on top of Create account. It waits until the first scroll. */
@media (max-width: 720px) {
  .cs-dock, .fb-btn { transition: opacity .25s ease; }
  body.lp-at-top .cs-dock, body.lp-at-top .fb-btn { opacity: 0; pointer-events: none; }
}
.lp-store:hover { transform: translateY(-2px); }
.lp-store img { height: 100%; width: auto; }
.lp-hero__trust {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; list-style: none; padding: 0;
  margin: 22px 0 0; font-size: .8rem; color: var(--ink-3);
}
.lp-hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.lp-hero__trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lp-gold); }

/* the phone rises out of the field as you scroll */
.lp-phone-wrap {
  position: absolute; z-index: 4; left: 50%; bottom: 31vh; transform: translateX(-50%) translateY(40vh);
  will-change: transform, opacity; opacity: 0;
  /* ⛔ Decoration only, so it must never take a click. At the top of the page it is invisible (opacity 0)
     but still laid out over the hero buttons, and it swallowed every click on Sign in (30-09-2026). */
  pointer-events: none;
}
.lp-phone {
  /* sized so the phone's top clears the header pill: H = pw*2.172 + 24 <= 69vh - 84 (28-09-2026) */
  --pw: clamp(150px, calc((69vh - 108px) / 2.172), 270px);
  --sw: calc(var(--pw) - 24px);                /* the screen width */
  width: var(--pw); border-radius: calc(var(--pw) * .16); position: relative;
  background: #0e1a14; padding: 12px;
  box-shadow: 0 40px 90px rgba(20, 35, 26, .35), inset 0 0 0 2px #26362e, inset 0 0 0 4px #0b1410;
}
/* the screen is a real screenshot of the app (Biscuit's Home), its status bar cropped off and redrawn here so it is clean */
.lp-phone__screen {
  position: relative; border-radius: calc(var(--pw) * .16 - 12px); overflow: hidden;
  display: flex; flex-direction: column; background: #f5f8f3;
}
.lp-phone__screen--forest { background: #163023; }
.lp-phone__bar {
  flex: none; height: calc(var(--sw) * .141); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}
.lp-phone__time { justify-self: center; font-size: calc(var(--sw) * .04); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.lp-phone__island { width: calc(var(--sw) * .284); height: calc(var(--sw) * .084); border-radius: 999px; background: #000; align-self: start; margin-top: calc(var(--sw) * .025); }
.lp-phone__status { justify-self: center; display: inline-flex; align-items: center; gap: calc(var(--sw) * .016); }
.lp-si { height: calc(var(--sw) * .028); width: auto; display: block; }
.lp-si--batt { height: calc(var(--sw) * .03); }
.lp-phone__shot { display: block; width: 100%; height: auto; }
.lp-phone__home { position: absolute; left: 50%; bottom: calc(var(--sw) * .018); width: calc(var(--sw) * .32); height: calc(var(--sw) * .012); border-radius: 999px; background: #fff; transform: translateX(-50%); opacity: .95; }
.lp-ring-track { fill: none; stroke: #dbe6dc; stroke-width: 11; }
.lp-ring-val { fill: none; stroke: var(--sage); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--lp-ease); }
.lp-ring-num { fill: var(--ink); font-weight: 800; font-size: 34px; letter-spacing: -.03em; }
.lp-ring-cap { fill: var(--ink-3); font-size: 10.5px; font-weight: 600; }
@media (max-width: 720px) {
  .lp-scene__content { top: 10svh; }
  .lp-hero__trust { display: none; }
  .lp-phone-wrap { bottom: 22vh; bottom: 22svh; }
  .lp-phone { --pw: clamp(150px, calc((78vh - 108px) / 2.172), 270px); --pw: clamp(150px, calc((78svh - 108px) / 2.172), 270px); }
}
/* the hint that this thing scrolls */
.lp-scene__hint {
  position: absolute; z-index: 4; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--ink-2);
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; padding: 8px 14px;
  backdrop-filter: blur(8px); transition: opacity .3s ease;
}
.lp-scene__hint svg { width: 14px; height: 14px; animation: lp-nudge 1.6s ease-in-out infinite; }
@keyframes lp-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.lp-scene__hint.is-gone { opacity: 0; pointer-events: none; }

/* ---- sections ---------------------------------------------------------------- */
.lp-section { position: relative; padding: 110px 0; scroll-margin-top: 90px; }
.lp-section--tight { padding: 70px 0; }
.lp-section__head { text-align: center; width: min(100% - 40px, 720px); margin: 0 auto 54px; }
.lp-section__head .lp-lead { margin-top: 16px; }
@media (max-width: 720px) { .lp-section { padding: 74px 0; } .lp-section__head { margin-bottom: 36px; } }

/* reveal on scroll: lifted and blurred in, like the reference, at our pace */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--lp-ease), transform .7s var(--lp-ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="2"] { transition-delay: .1s; } [data-reveal="3"] { transition-delay: .2s; } [data-reveal="4"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---- what it tracks: a sketched icon strip ------------------------------------- */
.lp-tracks { display: flex; justify-content: center; gap: 10px 26px; flex-wrap: wrap; }
.lp-track { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .92rem; color: var(--ink-2); padding: 8px 4px; }
.lp-track svg { width: 28px; height: 28px; color: var(--sage); }
.lp-track svg path, .lp-track svg circle { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- cards ------------------------------------------------------------------------ */
.lp-card {
  background: var(--surface, #fff); border: 1px solid var(--line, #dde7dd); border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm); padding: 28px;
}
.lp-grid-2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: stretch; }
.lp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-grid-2e { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 860px; margin: 0 auto; }
@media (max-width: 900px) { .lp-grid-2, .lp-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .lp-grid-2e { grid-template-columns: 1fr; } }

/* glance section */
.lp-glance { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .lp-glance { grid-template-columns: 1fr; } }
.lp-glance__visual { display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--lp-radius); padding: 34px; box-shadow: var(--lp-shadow-sm); }
.lp-glance__visual .hs-ring { width: 200px; height: 200px; }
.lp-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.lp-list li { position: relative; padding-left: 28px; color: var(--ink-2); }
.lp-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 7px; border-left: 2.5px solid var(--sage); border-bottom: 2.5px solid var(--sage); transform: rotate(-45deg); }
.lp-glance .hs-track { fill: none; stroke: #dfe8df; stroke-width: 11; }
.lp-glance .hs-val { fill: none; stroke: var(--sage); stroke-width: 11; stroke-linecap: round; transition: stroke-dasharray 1.3s var(--lp-ease); }
.lp-glance .hs-num { fill: var(--ink); font-weight: 800; font-size: 36px; }
.lp-glance .hs-cap { fill: var(--ink-3); font-size: 11px; }
.lp-wt .wt-chart { width: 100%; max-width: 340px; }
.lp-wt .wt-area { fill: var(--sage-soft); opacity: .6; }
.lp-wt .wt-ideal { stroke: var(--sage); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .75; }
.lp-wt .wt-line { fill: none; stroke: var(--sage); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-wt .wt-dot { fill: #fff; stroke: var(--sage); stroke-width: 2; }
.lp-wt .wt-dot-last { fill: var(--sage); }
.lp-wt .wt-yl, .lp-wt .wt-now { fill: var(--ink); font-size: 12px; font-weight: 700; }
.lp-wt .wt-xl { fill: var(--ink-3); font-size: 11px; }
.lp-wt .wt-pill { fill: #fff; stroke: var(--sage); stroke-width: 1; }
.lp-wt .wt-pilltext { fill: var(--sage-dark); font-size: 11px; font-weight: 700; }

/* ---- join the dots (See Trends) ------------------------------------------------------- */
.lp-dots { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; align-items: start; }
.lp-dots__col { display: grid; gap: 12px; position: relative; z-index: 2; }
.lp-dots__label { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.lp-chip {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: .95rem; text-align: left;
  transition: transform .18s var(--lp-ease), border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  font-family: inherit; color: inherit; width: 100%;
}
.lp-chip .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sage-soft); color: var(--sage); flex: none; }
.lp-chip .ico svg { width: 18px; height: 18px; }
.lp-chip small { display: block; font-weight: 500; color: var(--ink-3); font-size: .78rem; }
.lp-chip.is-on, .lp-chip:hover { border-color: var(--lp-gold); box-shadow: 0 10px 26px rgba(201, 163, 78, .18); transform: translateY(-2px); }
.lp-chip.is-hit { background: #fbf5e6; border-color: var(--lp-gold); }
.lp-dots__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.lp-dots__lines path { fill: none; stroke: var(--lp-gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 7; opacity: 0; transition: opacity .25s ease; }
.lp-dots__lines path.is-on { opacity: 1; animation: lp-dash 1.2s linear infinite; }
@keyframes lp-dash { to { stroke-dashoffset: -26; } }
.lp-dots__note { margin-top: 22px; text-align: center; color: var(--ink-3); font-size: .9rem; }
.lp-dots__legend { display: none; }
/* phones: the two columns would stack and the curves cross behind the chips, so lay each pair out as
   cause -> effect with a short dashed arrow between them (28-09-2026). NB `body.lp svg { display:block }`
   outranks `.lp-dots__lines`, which is why the old `display:none` never applied. */
@media (max-width: 720px) {
  .lp-dots { grid-template-columns: 1fr; gap: 0; }
  body.lp .lp-dots__lines { display: none; }
  .lp-dots__col { display: contents; }
  .lp-dots__label { display: none; }
  .lp-dots__legend { display: flex; align-items: center; gap: 8px; order: 0; margin-bottom: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .lp-dots__legend svg { width: 14px; height: 14px; color: var(--lp-gold); }
  .lp-chip[data-cause="pollen"] { order: 1; } .lp-chip[data-effect="pollen"] { order: 2; }
  .lp-chip[data-cause="cold"] { order: 3; }   .lp-chip[data-effect="cold"] { order: 4; }
  .lp-chip[data-cause="food"] { order: 5; }   .lp-chip[data-effect="food"] { order: 6; }
  .lp-chip[data-cause] { margin-top: 24px; }
  .lp-chip[data-cause="pollen"] { margin-top: 0; }
  .lp-chip[data-effect] { margin-top: 28px; position: relative; }
  .lp-chip[data-effect]::before { content: ""; position: absolute; left: 32px; top: -26px; height: 20px; border-left: 3px dashed var(--lp-gold); opacity: .35; transition: opacity .25s ease; }
  .lp-chip[data-effect]::after { content: ""; position: absolute; left: 27px; top: -9px; width: 0; height: 0; border-left: 6.5px solid transparent; border-right: 6.5px solid transparent; border-top: 8px solid var(--lp-gold); opacity: .35; transition: opacity .25s ease; }
  .lp-chip[data-effect].is-hit::before, .lp-chip[data-effect].is-hit::after { opacity: 1; }
}

/* ---- marquee of app cards --------------------------------------------------------------- */
.lp-marquee { overflow: hidden; padding: 10px 0 20px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lp-marquee__track { display: flex; gap: 16px; width: max-content; animation: lp-marquee 42s linear infinite; }
/* pause under a real mouse only: on a touchscreen a tap leaves :hover stuck on, which froze the cards (28-09-2026) */
@media (hover: hover) and (pointer: fine) { .lp-marquee:hover .lp-marquee__track { animation-play-state: paused; } }
@keyframes lp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lp-marquee__track { animation: none; } .lp-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; } }
.lp-appcard {
  width: 250px; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px;
  /* a column, NOT a grid: the track stretches every card to the tallest, and a grid shared that spare
     height out to its rows, so heads, text and chips all grew and gapped apart (29-09-2026) */
  box-shadow: var(--lp-shadow-sm); display: flex; flex-direction: column; gap: 10px;
}
.lp-appcard__head { display: flex; align-items: center; gap: 10px; }
.lp-appcard__head i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sage-soft); color: var(--sage); }
.lp-appcard__head i svg { width: 18px; height: 18px; }
.lp-appcard__head b { font-size: .95rem; letter-spacing: -.01em; }
.lp-appcard__head small { display: block; color: var(--ink-3); font-size: .74rem; }
.lp-appcard__body { font-size: .84rem; color: var(--ink-2); min-height: 62px; }   /* three lines, so every visual starts level */
.lp-appcard__viz { height: 44px; flex: none; display: flex; align-items: center; }
.lp-appcard__viz > * { width: 100%; }
.lp-steps { display: flex; gap: 4px; }
.lp-steps i { flex: 1; height: 8px; border-radius: 999px; background: var(--sage-soft); }
.lp-steps i.on { background: var(--sage); }
.lp-steps--gold i.on { background: var(--lp-gold); }
.lp-week { display: flex; justify-content: space-between; }
.lp-week span { display: grid; justify-items: center; gap: 5px; }
.lp-week i { width: 12px; height: 12px; border-radius: 50%; background: var(--sage-soft); }
.lp-week .on i { background: var(--lp-gold); }
.lp-week small { font-size: .64rem; font-weight: 600; color: var(--ink-3); line-height: 1; }
.lp-lines { display: grid; gap: 7px; }
.lp-lines i { display: block; height: 6px; border-radius: 999px; background: var(--sage-soft); }
.lp-lines i:nth-child(2) { width: 82%; }
.lp-lines i:nth-child(3) { width: 56%; }
.lp-appcard__bar { height: 8px; flex: none; border-radius: 999px; background: var(--sage-soft); overflow: hidden; }
.lp-appcard__bar i { display: block; height: 100%; width: var(--w, 60%); background: var(--sage); border-radius: inherit; }
.lp-appcard__pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.lp-appcard__pills span { font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--surface-2, #f5f8f3); border: 1px solid var(--line); color: var(--ink-2); }
.lp-appcard__pills span.gold { background: #fbf5e6; border-color: #efe0b8; color: var(--lp-gold-deep); }
.lp-spark { width: 100%; height: 44px; flex: none; }
.lp-spark path { fill: none; stroke: var(--sage); stroke-width: 2.5; stroke-linecap: round; }
.lp-spark .a { fill: var(--sage-soft); stroke: none; opacity: .7; }

/* ---- MaxBowls -------------------------------------------------------------------------------- */
.lp-bowls { display: grid; grid-template-columns: .95fr 1.05fr; gap: 44px; align-items: center; }
@media (max-width: 900px) { .lp-bowls { grid-template-columns: 1fr; } }
.lp-bowls__art { position: relative; aspect-ratio: 4 / 3; border-radius: var(--lp-radius); overflow: hidden; background: var(--lp-paper); border: 1px solid var(--line); box-shadow: var(--lp-shadow-sm); }
.lp-bowls__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-stat {
  margin: 0 0 20px; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
}
.lp-stat .big { display: block; font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; color: var(--sage-dark); line-height: 1; margin-bottom: 6px; }
.lp-stat .src { display: block; margin-top: 8px; font-size: .74rem; color: var(--ink-3); }
.lp-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--sage-soft); color: var(--sage-dark); border: 1px solid #cfe0d4; border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 700; margin-bottom: 14px; }
.lp-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.lp-price-line { margin-top: 16px; font-size: .92rem; color: var(--ink-2); }
.lp-price-line b { color: var(--ink); }

/* ---- Max: photo beside sketch -------------------------------------------------------------------- */
.lp-max { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: center; }
@media (max-width: 900px) { .lp-max { grid-template-columns: 1fr; } }
.lp-max__pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
.lp-max__photo { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; box-shadow: var(--lp-shadow); border: 6px solid #fff; }
.lp-max__sketch { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--lp-paper); border: 6px solid #fff; box-shadow: var(--lp-shadow); overflow: hidden; }
.lp-max__sketch canvas { width: 100%; height: 100%; display: block; }
.lp-max__caption { grid-column: 1 / -1; text-align: center; font-size: .84rem; color: var(--ink-3); }
.lp-max__caption b { color: var(--ink-2); }

/* ---- vets strip -------------------------------------------------------------------------------- */
.lp-vets {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background: var(--sage-dark); color: #fff; border-radius: var(--lp-radius); padding: 30px 34px;
  box-shadow: var(--lp-shadow);
}
.lp-vets .lp-h3 { color: #fff; font-size: 1.35rem; }
.lp-vets p { color: rgba(255, 255, 255, .78); margin-top: 6px; max-width: 56ch; }
.lp-vets .lp-btn--ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.lp-vets .lp-btn--ghost:hover { background: rgba(255, 255, 255, .22); }

/* ---- pricing ----------------------------------------------------------------------------------- */
.lp-pricing { position: relative; }
.lp-price {
  position: relative; padding: 30px; display: grid; gap: 14px; align-content: start;
}
.lp-price--hero { border-color: var(--sage); box-shadow: 0 30px 70px rgba(47, 109, 77, .16); }
.lp-price__name { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
.lp-price__amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.lp-price__amount small { font-size: 1rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.lp-price__note { color: var(--ink-3); font-size: .86rem; }
.lp-price .lp-list { margin-top: 4px; }
.lp-price .lp-btn { margin-top: 6px; justify-self: start; }
.lp-pricing__dog { position: absolute; bottom: 26px; width: 300px; height: 220px; pointer-events: none; z-index: 0; opacity: .95; }
.lp-pricing__dog--l { left: 6px; }
.lp-pricing__dog--r { right: 6px; transform: scaleX(-1); }
.lp-pricing__dog canvas { width: 100%; height: 100%; }
@media (max-width: 1100px) { .lp-pricing__dog { display: none; } }

/* ---- faq ----------------------------------------------------------------------------------------- */
.lp-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } /* start: an open answer must not stretch its neighbour into an empty box */
@media (max-width: 800px) { .lp-faq { grid-template-columns: 1fr; } }
.lp-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; box-shadow: var(--lp-shadow-sm); }
.lp-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary svg { width: 18px; height: 18px; flex: none; color: var(--sage); transition: transform .25s var(--lp-ease); }
.lp-faq details[open] summary svg { transform: rotate(45deg); }
.lp-faq details p { padding: 0 0 18px; color: var(--ink-2); }

/* ---- footer -------------------------------------------------------------------------------------- */
.lp-footer { padding: 70px 0 40px; border-top: 1px solid var(--line); }
.lp-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; }
@media (max-width: 800px) { .lp-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lp-footer__grid { grid-template-columns: 1fr; } }
.lp-footer h4 { margin: 0 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lp-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lp-footer a { text-decoration: none; color: var(--ink-2); font-size: .92rem; }
.lp-footer a:hover { color: var(--ink); text-decoration: underline; }
.lp-footer__legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-3); line-height: 1.6; }
.lp-footer__legal .lf-marks { display: block; margin-top: 8px; }

/* ---- draft badge: never ships to the live page ------------------------------------------------- */
.draft-flag {
  position: fixed; left: 12px; bottom: 12px; z-index: 9999; background: #7a2e2e; color: #fff;
  font: 700 11px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); opacity: .92;
}
@media print { .draft-flag { display: none; } }

/* ---- utilities (the CSP forbids inline style attributes, so spacing is classes) ---- */
.lp-mt-10 { margin-top: 10px; } .lp-mt-12 { margin-top: 12px; } .lp-mt-14 { margin-top: 14px; } .lp-mt-18 { margin-top: 18px; } .lp-mt-20 { margin-top: 20px; }
.lp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-foot-blurb { max-width: 34ch; }
/* debug: ?hero=off hides the sketch so the rest of the page can be photographed from the top */
.lp-hero--off { display: none; }


/* ============================================================================
   INNER PAGES (Our story, MaxBowls, The science), 29-09-2026.
   A headline over the open field, then the writing on a sheet of paper. The class
   names inside .lp-article are the ones the live pages already use, because the
   bodies are lifted from them verbatim; they are all scoped under .lp-article.
   body.lp h1/h2/h3/p carry margin: 0 at (0,1,2), hence the body.lp prefixes below.
   ---------------------------------------------------------------------------- */
.lp-page { position: relative; z-index: 1; padding-bottom: 96px; }
.lp-pagehead { padding: clamp(118px, 17vh, 176px) 0 clamp(34px, 5vh, 56px); text-align: center; }
.lp-h1--page { font-size: clamp(2.3rem, 5.6vw, 4.1rem); }
/* two classes: body.lp p { margin: 0 } is (0,1,2) and would pin the block to the left */
.lp-pagehead .lp-pagehead__lead { margin: 22px auto 0; max-width: 46ch; }
.lp-pagehead__back {
  /* a block of its own above the eyebrow, not sharing its line */
  display: flex; width: max-content; align-items: center; gap: 7px; margin: 0 auto 20px; padding: 8px 14px 8px 10px;
  font-size: .86rem; font-weight: 600; text-decoration: none; color: var(--ink-2, #4f6157);
  background: rgba(255, 255, 255, .6); border: 1px solid var(--line, #dde7dd); border-radius: 999px;
}
.lp-pagehead__back:hover { background: #fff; color: var(--ink); }
.lp-pagehead__back svg { width: 15px; height: 15px; }
.lp-pagehead__actions { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

.lp-article {
  width: min(100% - 32px, 790px); margin-inline: auto; padding: clamp(24px, 5.4vw, 58px);
  background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .9); border-radius: 30px;
  box-shadow: var(--lp-shadow); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  font-size: 1.04rem; line-height: 1.75; color: var(--ink, #1e2e26); overflow-wrap: anywhere;
}
body.lp .lp-article p { margin: 0 0 18px; }
body.lp .lp-article h2 { margin: 46px 0 14px; font-size: clamp(1.35rem, 2.5vw, 1.72rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 800; text-wrap: balance; }
body.lp .lp-article > h2:first-child { margin-top: 0; }
body.lp .lp-article h3 { margin: 32px 0 4px; font-size: 1.04rem; font-weight: 700; letter-spacing: -.01em; }
body.lp .lp-article a { color: var(--sage-dark, #22543a); font-weight: 600; text-underline-offset: 3px; }
.lp-article ul { margin: 0 0 18px; padding-left: 1.25em; }
.lp-article li { margin: 0 0 9px; }
.lp-article b, .lp-article strong { font-weight: 700; }
.lp-article .lead { font-size: 1.17rem; line-height: 1.65; font-weight: 500; color: var(--ink); }
.lp-article sup a { text-decoration: none; }
.lp-article [id] { scroll-margin-top: 104px; }

/* Our story */
body.lp .lp-article .max-photo {
  width: 190px; height: 190px; margin: 42px auto; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 7px #fff, 0 0 0 8px var(--line, #dde7dd), 0 18px 40px rgba(30, 46, 38, .2);
}
.lp-article .questions { margin: 26px 0; padding: 18px 26px; border-left: 3px solid var(--lp-gold); background: #fbf5e6; border-radius: 0 18px 18px 0; }
body.lp .lp-article .questions p { margin: 8px 0; font-size: 1.1rem; font-style: italic; color: var(--ink-2, #4f6157); }
.lp-article .promise { margin: 40px 0 0; padding: 26px 28px; background: var(--sage-soft, #dce9e0); border-radius: 20px; }
body.lp .lp-article .promise p:last-child { margin-bottom: 0; }
body.lp .lp-article .sign { margin: 32px 0 0; font-style: italic; color: var(--ink-2, #4f6157); }

/* MaxBowls + The science: cards, lists, figures */
.lp-article .card { margin: 28px 0; padding: clamp(18px, 3.4vw, 26px); background: #fff; border: 1px solid var(--line, #dde7dd); border-radius: 20px; box-shadow: var(--lp-shadow-sm); }
body.lp .lp-article .card h2 { margin-top: 0; font-size: 1.24rem; }
body.lp .lp-article .card > :last-child { margin-bottom: 0; }
.lp-article .ev, .lp-article .how, .lp-article .cost-lines, .lp-article .refs { list-style: none; margin: 0; padding: 0; }
.lp-article .ev li, .lp-article .cost-lines li, .lp-article .refs li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line, #dde7dd); }
.lp-article .ev li:last-child, .lp-article .cost-lines li:last-child, .lp-article .refs li:last-child { border-bottom: 0; }
.lp-article .ev b { color: var(--sage-dark, #22543a); }
body.lp .lp-article .ev-intro { margin-bottom: 6px; font-weight: 700; }
.lp-article .sub { color: var(--ink-3, #8a9a90); font-weight: 400; font-size: .9rem; }
.lp-article .how li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; }
.lp-article .how .tick { flex: none; font-weight: 800; color: var(--lp-gold-deep); }
body.lp .lp-article .note { font-size: .86rem; color: var(--ink-3, #8a9a90); }
body.lp .lp-article .how + .note { margin-top: 14px; }
.lp-article .cost-lines { margin: 6px 0 16px; }
.lp-article .cost-lines li { display: flex; justify-content: space-between; gap: 16px; }
.lp-article .cost-lines .amt { font-weight: 800; white-space: nowrap; }
.lp-article .cost-free { color: var(--sage-dark, #22543a); }
body.lp .lp-article .sources { margin: 38px 0 0; font-size: .78rem; line-height: 1.7; color: var(--ink-3, #8a9a90); }
.lp-article .stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 10px; }
.lp-article .stat-box { flex: 1 1 150px; padding: 18px; background: #fff; border: 1px solid var(--line, #dde7dd); border-radius: 18px; box-shadow: var(--lp-shadow-sm); }
.lp-article .stat-box .big { font-size: 1.95rem; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: var(--sage-dark, #22543a); font-variant-numeric: tabular-nums; }
.lp-article .stat-box .lbl { margin-top: 7px; font-size: .82rem; line-height: 1.4; color: var(--ink-3, #8a9a90); }
body.lp .lp-article .src { font-size: .82rem; color: var(--ink-3, #8a9a90); }
.lp-article .disclaim { margin: 24px 0; padding: 8px 0 8px 16px; border-left: 3px solid var(--lp-gold); font-size: .93rem; color: var(--ink-2, #4f6157); }
body.lp .lp-article .refs a { text-decoration: none; }
body.lp .lp-article .refs a:hover { text-decoration: underline; }
.lp-article .ref-meta { font-size: .82rem; line-height: 1.5; color: var(--ink-3, #8a9a90); }

/* the waitlist form: ids and class names are the ones /assets/maxbowls.js already drives */
.lp-article .waitlist-card { border: 2px solid var(--lp-gold); background: #fffdf7; }
body.lp .lp-article .waitlist-card h2 { font-size: 1.45rem; }
.lp-article .field { margin: 0 0 14px; }
.lp-article .field label { display: block; margin: 0 0 6px; font-size: .82rem; font-weight: 700; color: var(--ink-2, #4f6157); }
.lp-article .field input, .lp-article .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line, #dde7dd); border-radius: 12px;
}
.lp-article .field input:focus, .lp-article .field textarea:focus { outline: 3px solid var(--lp-gold); outline-offset: 1px; border-color: transparent; }
.lp-article .field textarea { min-height: 84px; resize: vertical; }
.lp-article .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-article .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px;
  border: 0; border-radius: 14px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: transform .18s var(--lp-ease), background-color .18s ease;
}
.lp-article .btn-primary { background: var(--sage, #2f6d4d); color: #fff; box-shadow: 0 12px 28px rgba(47, 109, 77, .28); }
.lp-article .btn-primary:hover { background: var(--sage-dark, #22543a); transform: translateY(-2px); }
.lp-article .btn-lg { width: 100%; font-size: 1.05rem; }
.lp-article .btn[disabled] { opacity: .6; cursor: default; transform: none; }
.lp-article .msg { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: .95rem; }
.lp-article .msg.ok { display: block; background: #e8f3e8; color: var(--sage-dark, #22543a); }
.lp-article .msg.bad { display: block; background: #fbeaea; color: #a23b3b; }

@media (max-width: 600px) {
  .lp-article { border-radius: 24px; font-size: 1rem; }
  body.lp .lp-article .max-photo { width: 158px; height: 158px; margin: 30px auto; }
  .lp-article .questions, .lp-article .promise { padding-inline: 20px; }
}


/* ============================================================================
   ACCOUNT PAGES (sign in, create account), 29-09-2026. Static files, built by
   tools/build-auth-pages.mjs. The form, the Apple and Google buttons and the
   Turnstile check are the original markup, so the selectors below are the ones
   those parts have always carried (.msg, .social, .alt, #appleid-signin ...).
   ---------------------------------------------------------------------------- */
/* A static page cannot take the server's theme block, and must NOT take /theme.css: that one follows
   a signed-in visitor's OWN theme, and a dark one would put pale ink on these white cards.
   So the redesign's own palette, fixed. */
body.lp--static {
  color-scheme: light;
  --cream: #eef3ec; --bg: #eef3ec; --surface: #fff; --surface-2: #f5f8f3;
  --ink: #1e2e26; --ink-2: #4f6157; --ink-3: #8a9a90; --line: #dde7dd; --line-2: #e8efe6;
  --sage: #2f6d4d; --sage-dark: #22543a; --sage-soft: #dce9e0; --mint: #cfe6d5;
}
.lp-auth { padding-bottom: 0; }
.lp-auth__stage { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: clamp(100px, 14vh, 136px) 0 72px; }
.lp-auth__card {
  width: min(100% - 20px, 436px); padding: clamp(18px, 4.4vw, 40px);
  background: rgba(255, 255, 255, .96); border: 1px solid rgba(255, 255, 255, .9); border-radius: 28px;
  box-shadow: var(--lp-shadow); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
}
.lp-auth__card .lp-eyebrow { margin-bottom: 12px; }
.lp-auth__title { font-size: clamp(1.55rem, 4.2vw, 1.95rem); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.lp-auth form { margin-top: 26px; }
.lp-auth label { display: block; margin-bottom: 15px; font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.lp-auth input {
  display: block; width: 100%; margin-top: 6px; padding: 13px 14px; font: inherit; font-size: 1rem; font-weight: 500;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.lp-auth input:focus { outline: 3px solid var(--lp-gold); outline-offset: 1px; border-color: transparent; }
.lp-auth form button {
  width: 100%; min-height: 52px; margin-top: 6px; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 1.02rem; font-weight: 700; color: #fff; background: var(--sage);
  box-shadow: 0 12px 28px rgba(47, 109, 77, .28); transition: transform .18s var(--lp-ease), background-color .18s ease;
}
.lp-auth form button:hover { background: var(--sage-dark); transform: translateY(-2px); }
.lp-auth form button:active { transform: none; }
/* no display here: the box is [hidden] until auth_msg.js or oauth.js has something to say */
.lp-auth .msg { margin-top: 18px; padding: 12px 14px; border-radius: 12px; font-size: .9rem; }
.lp-auth .msg.err { background: #fdecea; color: #b3261e; }
.lp-auth .msg.ok { background: #e7f4ec; color: #1e7a44; }
/* centred like the Apple and Google buttons; the height is held so the card does not jump when it loads */
.lp-auth .cf-turnstile { display: flex; justify-content: center; margin: 2px 0 16px; min-height: 65px; }
.lp-auth .social { margin-top: 22px; }
.lp-auth .social-sep { display: flex; align-items: center; margin: 0 0 16px; font-size: .8rem; color: var(--ink-3); }
.lp-auth .social-sep::before, .lp-auth .social-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lp-auth .social-sep span { padding: 0 12px; }
.lp-auth .g_id_signin { display: flex; justify-content: center; margin-bottom: 10px; }
.lp-auth #appleid-signin { max-width: 320px; height: 44px; margin: 0 auto 10px; cursor: pointer; }
/* Apple draws its own button: keep the page's image reset off it */
body.lp .lp-auth #appleid-signin svg, body.lp .lp-auth #appleid-signin img { display: inline; max-width: none; }
body.lp .lp-auth .alt { margin-top: 14px; text-align: center; font-size: .9rem; color: var(--ink-2); }
body.lp .lp-auth .alt a { font-weight: 700; color: var(--sage-dark); text-underline-offset: 3px; }