/* ==========================================================================
   Allby — allby.app
   "A calmer way to look after a dog's health."
   Warm · editorial · reassuring. Dusk-rose brand + soft claymorphism depth.
   ========================================================================== */

:root {
  /* Brand */
  --brand: #FF385C;
  --brand-pressed: #E00B41;
  --brand-light: #FF6A84;
  --brand-deep: #C81048;
  --plum: #92174D;

  /* Ink / text */
  --ink: #1E1C1D;
  --ink-2: #6A6A6A;
  --ink-3: #A9A4A6;

  /* Surfaces */
  --white: #FFFFFF;
  --cloud: #F7F5F4;
  --hairline: #EBE6E4;

  /* Warm tints */
  --brand-soft: #FFF1F4;
  --brand-soft-2: #FFE1E8;
  --peach: #FFE7D6;
  --sky: #E7EEF6;
  --sage: #E6F0E7;
  --cream: #FBF7F3;
  --lilac: #F3ECF5;

  /* Status */
  --success: #008A05;
  --warning: #FF9800;
  --error: #C13515;
  --star: #FFB020;

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

  /* Shape */
  --r-xs: 10px; --r-sm: 14px; --r: 20px; --r-lg: 26px; --r-xl: 34px;

  /* Rhythm */
  --pad: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 11vw, 148px);
  --maxw: 1160px;

  /* Elevation — soft, layered (claymorphism-leaning) */
  --e1: 0 1px 2px rgba(30,28,29,.04), 0 6px 20px rgba(30,28,29,.05);
  --e2: 0 2px 6px rgba(146,23,77,.05), 0 18px 44px rgba(146,23,77,.10);
  --e3: 0 30px 70px rgba(146,23,77,.16);
  --e-brand: 0 12px 30px rgba(255,56,92,.30), 0 2px 6px rgba(255,56,92,.20);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.22,1,.36,1); /* smooth ease-out, no overshoot — calm brand */
}

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100dvh;
  font-family: var(--sans);
  font-size: 17px; line-height: 1.6; color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; }
p { margin: 0; }
ul { margin: 0; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 8px; }

.skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- Layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section-y); }
.eyebrow { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--plum); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.lede { font-size: clamp(17px, 2.1vw, 20px); color: var(--ink-2); max-width: 48ch; }
.center { text-align: center; margin-inline: auto; }
.center .eyebrow { justify-content: center; }

/* --------------------------------------------------------------- Buttons */
.btn {
  --_bg: var(--brand); --_fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  padding: 14px 24px; border-radius: 999px;
  background: var(--_bg); color: var(--_fg); border: 1px solid transparent;
  cursor: pointer; overflow: hidden;
  box-shadow: var(--e-brand);
  transition: transform .18s var(--ease-spring), box-shadow .2s var(--ease), background .18s var(--ease);
}
.btn:hover { background: var(--brand-pressed); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255,56,92,.36); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .07s; background: var(--brand-deep); }
.btn--ghost:active { transform: translateY(0) scale(.98); transition-duration: .07s; background: var(--cloud); }
.btn--ghost { --_bg: #fff; --_fg: var(--ink); border-color: var(--hairline); box-shadow: var(--e1); }
.btn--ghost:hover { background: #fff; border-color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; } }

/* ------------------------------------------------------ Store badges */
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--r-sm);
  box-shadow: var(--e1);
  transition: transform .18s var(--ease-spring), box-shadow .2s var(--ease);
}
.badge:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.badge:active { transform: translateY(-1px) scale(.985); transition-duration: .07s; background: color-mix(in srgb, var(--ink) 88%, black); }
.badge svg { flex: none; }
.badge .badge__txt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.badge .badge__txt small { font-size: 10px; font-weight: 500; opacity: .85; letter-spacing: .02em; }
.badge .badge__txt strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) { .badge:hover { transform: none; } }

/* ------------------------------------------------- Rating chip / stars */
.rating { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }

/* --------------------------------------------------------------- Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--hairline); box-shadow: 0 4px 20px rgba(30,28,29,.04); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.brand__mark { width: 34px; height: 34px; flex: none; border-radius: var(--r-xs); box-shadow: var(--e1); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav a.nav__link { padding: 9px 13px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: 15px; transition: color .15s var(--ease), background .15s var(--ease); }
.nav a.nav__link:hover { color: var(--ink); background: var(--cloud); }
.nav a.nav__link:active { background: var(--hairline); transition-duration: .07s; }
.nav .btn { padding: 10px 20px; font-size: 15px; }
.nav .btn--nav { --_bg: transparent; --_fg: var(--plum); border-color: var(--hairline); box-shadow: none; }
.nav .btn--nav:hover {
  background: var(--brand-soft); border-color: var(--brand-soft-2); box-shadow: none;
  color: color-mix(in srgb, var(--plum) 88%, black);
}
.nav .btn--nav:active {
  background: var(--brand-soft-2); border-color: var(--brand-light);
  color: color-mix(in srgb, var(--plum) 82%, black);
}
@media (max-width: 760px) { .nav__links { display: none; } }

/* ---------------------------------------------------------------- Hero */
/* No overflow:hidden. It clipped .hero__bg flat against the hero's top and
   side edges, which drew hard lines under the nav and down both sides of the
   content column. body already carries overflow-x:hidden for the wash's
   -20% lateral bleed. */
.hero { position: relative; padding-top: clamp(44px, 7vw, 92px); }
.hero__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
/* Allby's activity rings, thrown far out of focus. Three tori at the brand
   tints drift behind the phone. Guards live in the module: no GL context at
   all under 768px, one static frame under reduced-motion, and the CSS wash
   above carries the hero on its own in both cases. */
.hero-gl {
  position: absolute; inset: 0; z-index: -1; display: block; pointer-events: none;
  /* Held invisible until the first WebGL frame has rendered (JS adds .is-lit).
     Otherwise the empty canvas can flash its full un-masked rectangle behind
     the phone in the window between three.js arriving and the mask settling. */
  opacity: 0; transition: opacity .5s var(--ease);
  /* Fades the scene out before the viewport edges so a torus rim can never
     terminate on a hard line. */
  -webkit-mask-image: radial-gradient(125% 115% at 50% 45%, #000 52%, transparent 100%);
          mask-image: radial-gradient(125% 115% at 50% 45%, #000 52%, transparent 100%);
}
.hero-gl.is-lit { opacity: 1; }
/* One placed wash instead of three blurred circles — softer, and it does not
   pool coral behind the headline. The .blob spans it replaced are gone from
   the markup, along with the two rules that were only hiding them. */
.hero__bg::before {
  content: ""; position: absolute; inset: -30% -20% auto -20%; height: 130%;
  background:
    radial-gradient(760px 520px at 78% 6%, var(--brand-soft-2) 0%, transparent 62%),
    radial-gradient(620px 480px at 8% 34%, var(--lilac) 0%, transparent 58%),
    radial-gradient(900px 500px at 50% 100%, var(--peach) 0%, transparent 60%);
}

.hero__grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(32px, 6vw, 68px); align-items: center; }
.hero h1 { font-size: clamp(42px, 7.6vw, 76px); letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 22px; text-wrap: balance; }
.hero h1 .accent { color: var(--plum); font-style: italic; }
.hero .lede { font-size: clamp(16.5px, 1.6vw, 19px); max-width: 50ch; margin-bottom: 30px; }
.hero__cta { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hero__proof { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.hero__proof .rating { color: var(--ink-3); }
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__cta { align-items: center; text-align: center; }
  .hero h1, .hero .lede { text-align: center; margin-inline: auto; }
}

/* ------------------------------------------------- Phone / device mockup */
.device { position: relative; width: min(300px, 78%); margin-inline: auto; }
/* transform: translateZ(0) forces the shot onto its own compositing layer so
   drop-shadow rasterises against the WebP's alpha silhouette. Without it,
   WebKit paints the shadow off the opaque border-box on first paint — a hard
   rectangle around the phone that only clears once the layer re-rasterises. */
.device-shot { display: block; width: 100%; height: auto; position: relative; z-index: 1; transform: translateZ(0); filter: drop-shadow(0 30px 60px rgba(146,23,77,.22)); }
.device .device-shot { width: min(320px, 80%); margin-inline: auto; }
.phones .device-shot { width: min(232px, 47%); }
.phones .device-shot:first-child { transform: translateY(-10px) rotate(-3deg); }
.phones .device-shot:last-child { transform: translateY(16px) rotate(3deg); }
@media (prefers-reduced-motion: reduce) { .phones .device-shot { transform: none !important; } }
/* No CSS-drawn phone body any more. The device shots are pre-composited PNGs
   carrying Apple's own iPhone 17 Pro Max bezel (Apple Design Resources), with
   the screen masked by the bezel's alpha — the aperture is a continuous
   squircle, so a guessed border-radius never sat on it correctly. The old
   .device__frame / .device__screen rules drew a fake gradient body at 44px/34px
   and had already fallen out of the markup. */
/* The device rests at a slight angle and straightens on hover. It used to run
   `float 6s infinite` — endless decorative motion with no pause control, which
   WCAG 2.2.2 (Level A) asks you not to do past 5s. The hero's WebGL rings
   carry the ambient life now, so the phone can simply sit still. */
.device { transform: rotate(-2.4deg); transition: transform .34s var(--ease-spring); }
.device:hover { transform: rotate(0) translateY(-8px); }

/* Floating glass cards beside phone */
.floatcard {
  /* Pill, not a rounded rect: these read as floating status chips lifted off
     the screen, and the blur is what separates them from the app UI behind —
     a hairline border on top of that just draws a box. */
  position: absolute; z-index: 3; background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 999px; padding: 11px 15px;
  box-shadow: var(--e2); display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.floatcard small { display: block; font-weight: 500; color: var(--ink-2); font-size: 11.5px; letter-spacing: 0; }
.floatcard .fc-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.floatcard--tl { top: 14%; left: -4%; }
.floatcard--br { bottom: 17%; right: -6%; }
@media (max-width: 520px) { .floatcard--tl { left: 0; } .floatcard--br { right: 0; } }

/* ------------------------------------------------------ Social proof bar */
.proofbar { border-block: 1px solid var(--hairline); background: var(--cream); }
.proofbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 60px); padding-block: 26px; }
.proofstat { text-align: center; }
.proofstat b { display: block; font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); color: var(--ink); font-weight: 500; }
.proofstat span { font-size: 13px; color: var(--ink-2); }
.proofbar .divider { width: 1px; height: 34px; background: var(--hairline); }
@media (max-width: 620px) { .proofbar .divider { display: none; } }

/* ------------------------------------------------------------- Features */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 76px); align-items: center; padding-block: clamp(30px, 5vw, 60px); }
.feature:nth-child(even) .feature__media { order: 2; }
.feature h3 { font-size: clamp(26px, 3.7vw, 40px); margin-bottom: 16px; }
.feature p { color: var(--ink-2); max-width: 42ch; margin-bottom: 20px; }
.feature__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.feature__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--ink); }
.feature__list .chk { flex: none; width: 22px; height: 22px; border-radius: 8px; background: var(--brand-soft-2); color: var(--plum); display: grid; place-items: center; margin-top: 1px; }
.reassure { margin-top: 18px; font-size: 14px; color: var(--ink-2); background: var(--cloud); border-radius: var(--r-sm); padding: 13px 16px; border: 1px solid var(--hairline); display: flex; gap: 10px; }
.reassure svg { flex: none; color: var(--brand); margin-top: 2px; }
@media (max-width: 800px) { .feature { grid-template-columns: 1fr; } .feature:nth-child(even) .feature__media, .feature__media { order: -1; } }

/* Second feature family — image above copy, unequal columns and crops, so the
   pair is composed rather than gridded. Breaks the 4-row zigzag run at 2. */
.pair { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4.4vw, 44px); padding-block: clamp(30px, 5vw, 60px); }
@media (min-width: 801px) { .pair { grid-template-columns: 1.08fr .92fr; gap: clamp(36px, 4.4vw, 58px); } }
.pair-i h3 { font-size: clamp(23px, 2.5vw, 30px); margin: 24px 0 0; }
.pair-i > p { color: var(--ink-2); margin: 13px 0 0; max-width: none; }
.pair-i .scene { aspect-ratio: 4 / 3; }
.pair-i:last-child .scene { aspect-ratio: 5 / 4; }
.pair-i .feature__list { margin-top: 18px; }
.pair-i .reassure { margin-top: 16px; }

/* Photo scene card */
.scene { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--e2); aspect-ratio: 4 / 3.4; background: var(--brand-soft); transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease); }
.scene:hover { transform: translateY(-6px); box-shadow: var(--e3); }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .38s var(--ease); }
.scene:hover .scene__img { transform: scale(1.04); }
.scene__tag { position: absolute; left: 14px; bottom: 14px; z-index: 1; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); color: var(--ink); font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; box-shadow: var(--e1); }
.scene__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(0,138,5,.18); }
@media (prefers-reduced-motion: reduce) { .scene:hover, .scene:hover .scene__img { transform: none; } }

/* --------------------------------------------------------- Habit / rings */
/* Dark band. Gives the page a light → dark → light rhythm and lets the two
   device shots read as lit objects rather than floating on more cream. */
.band { background: var(--ink); color: var(--cream); position: relative; overflow: hidden; }
.band::before {
  content: ""; position: absolute; inset: 0;
  /* Both radials sit well inside the box so their falloff finishes before any
     edge. The old rule put the box's top at 40% of the band (bottom:-60% +
     height:120%) and centred the plum glow at 0% of it, so overflow:hidden
     sliced the gradient at full opacity and drew a hard line across the
     section. Colours and alphas are unchanged; only the geometry moved. */
  background:
    radial-gradient(900px 620px at 24% 26%, rgba(146,23,77,.42), transparent 68%),
    radial-gradient(760px 520px at 86% 74%, rgba(255,56,92,.18), transparent 64%);
}
.band > * { position: relative; }
.band .eyebrow { color: var(--brand-light); }
.habit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 76px); align-items: center; }
.habit h2 { font-size: clamp(30px, 4.6vw, 50px); margin-bottom: 20px; color: var(--cream); }
.habit p { color: rgba(251,247,243,.72); max-width: 44ch; margin-bottom: 14px; }
.habit__points { list-style: none; padding: 0; margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.habit__points li { display: flex; gap: 13px; align-items: flex-start; }
.habit__points b { display: block; font-size: 15.5px; color: var(--cream); }
.habit__points small { color: rgba(251,247,243,.64); font-size: 14px; }
.phones { display: flex; gap: 18px; justify-content: center; align-items: center; }
/* On the dark band the shared plum drop-shadow is invisible. Swap for a real
   dark shadow plus a faint coral bloom so the two shots read as lit objects. */
.band .device-shot {
  filter: drop-shadow(0 26px 52px rgba(0,0,0,.55)) drop-shadow(0 2px 40px rgba(255,106,132,.12));
}
@media (max-width: 800px) { .habit__grid { grid-template-columns: 1fr; } .phones { order: -1; } }

/* --------------------------------------------------------- Testimonials */
.tcards { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
@media (min-width: 821px) {
  .tcards { grid-template-columns: 1.34fr 1fr; gap: 24px; }
  .tcard--lead { grid-row: span 2; padding: 38px 36px; }
  .tcard--lead .tcard__title { font-size: 26px; }
  .tcard--lead .tcard__body { font-size: 17px; }
}
.tcard { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--e1); display: flex; flex-direction: column; gap: 16px; transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease); }
.tcard:hover { transform: translateY(-6px); box-shadow: var(--e2); }
.tcard__ico { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft-2); color: var(--brand); display: grid; place-items: center; }
.tcard__title { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
.tcard__sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.tcard__body { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; margin-top: 18px; flex: 1; text-wrap: pretty; }
@media (max-width: 820px) { .tcards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tcard:hover { transform: none; } }

/* --------------------------------------------------------------- FAQ */
.faq { max-width: 840px; margin-inline: auto; margin-top: clamp(36px, 4.6vw, 56px); }
.qa { border-bottom: 1px solid var(--hairline); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 24px 0; text-align: left; cursor: pointer;
  background: none; border: none; color: inherit;
  font-family: var(--serif); font-size: clamp(18px, 2.1vw, 22px); font-weight: 500;
  letter-spacing: -0.016em; transition: color .22s var(--ease);
}
.faq__q:hover { color: var(--plum); }
.pm { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--cloud);
  display: grid; place-items: center;
  transition: transform .35s var(--ease-spring), background .25s var(--ease); }
.pm svg { width: 13px; height: 13px; color: var(--plum); }
.qa.open .pm { transform: rotate(45deg); background: var(--brand-soft-2); }
.faq__q:active .pm { transform: scale(.9); transition-duration: .07s; }
.qa.open .faq__q:active .pm { transform: rotate(45deg) scale(.9); }
.qa .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.qa.open .ans { grid-template-rows: 1fr; }
.qa .ans > p { overflow: hidden; opacity: 0; transition: opacity .18s var(--ease); }
.qa.open .ans > p { opacity: 1; transition-delay: .08s; }
.qa .ans p { color: var(--ink-2); font-size: 16px; padding-bottom: 26px; max-width: 66ch; text-wrap: pretty; }
.qa .ans a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* With JS off the class toggle never runs, so every answer stays collapsed.
   Open them all instead — unreadable content is worse than an unanimated list. */
.no-js .qa .ans { grid-template-rows: 1fr; }
.no-js .qa .ans > p { opacity: 1; }

/* --------------------------------------------------------------- Privacy */
/* A calm white card, not a coral wash. Coral is an action colour — reserved
   for buttons and active states — so a full-bleed brand gradient behind the
   privacy copy fought the one thing this section is meant to convey. */
.trust { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: clamp(34px, 5vw, 60px); display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; box-shadow: var(--e1); position: relative; }

.trust h2 { color: var(--ink); font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 16px; }
.trust p { color: var(--ink-2); max-width: 52ch; }
/* Shield sits in a soft tile instead of floating on the gradient. */
.trust__shield { width: clamp(120px, 16vw, 170px); aspect-ratio: 1; border-radius: 36px; background: var(--lilac); display: grid; place-items: center; box-shadow: var(--e1); flex: none; }
.trust__lock { width: 46%; height: 46%; color: var(--plum); }
.trust a.underline { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
@media (max-width: 700px) { .trust { grid-template-columns: 1fr; justify-items: center; text-align: center; } .trust .eyebrow { justify-content: center; } }
@media (max-width: 720px) { .trust { grid-template-columns: 1fr; } .trust__lock { order: -1; width: 64px; height: 64px; } }

/* --------------------------------------------------------------- Pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 42px; }
.plan { border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: clamp(26px, 3.5vw, 38px); background: #fff; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--e1); transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease); }
.plan:hover { transform: translateY(-5px); box-shadow: var(--e2); }
.plan--pro { border-color: transparent; box-shadow: var(--e2); position: relative;
  background: linear-gradient(168deg, var(--brand-soft) 0%, var(--white) 46%); }
.plan--pro::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-xl);
  padding: 1.5px; background: linear-gradient(150deg, var(--brand), var(--plum));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.plan h3 { font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.plan .price { font-family: var(--serif); font-size: 17px; color: var(--ink-2); }
.plan .price small { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--ink-2); }
.plan ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plan li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; }
.plan li .chk { flex: none; width: 20px; height: 20px; border-radius: 8px; background: var(--brand-soft-2); color: var(--plum); display: grid; place-items: center; margin-top: 1px; }
.plan__note { font-size: 13px; color: var(--ink-2); margin-top: auto; }
.plan .btn { width: 100%; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .plan:hover { transform: none; } }

/* --------------------------------------------------------------- Final CTA */
.final { position: relative; overflow: hidden; }
.finalcard { background: linear-gradient(160deg, var(--cream), var(--brand-soft)); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: clamp(40px, 7vw, 80px); text-align: center; box-shadow: var(--e2); }
.finalcard h2 { font-size: clamp(30px, 5vw, 56px); margin-bottom: 18px; }
.finalcard p { color: var(--ink-2); margin: 0 auto 30px; max-width: 42ch; }
.finalcard .badges { justify-content: center; }
.finalcard .rating { justify-content: center; margin-top: 22px; }

/* --------------------------------------------------------------- Footer */
.site-footer { border-top: 1px solid var(--hairline); background: var(--cloud); }
.site-footer .wrap { padding-block: 52px; }
.footer__top { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; }
.footer__brand { display: flex; flex-direction: column; gap: 10px; max-width: 32ch; }
.footer__brand .brand { font-size: 20px; }
.footer__brand p { color: var(--ink-2); font-size: 15px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.footer__links a { color: var(--ink-2); font-size: 15px; padding: 4px 0; transition: color .15s var(--ease); }
.footer__links a:hover { color: var(--brand); }
.footer__bottom { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.footer__bottom small { color: var(--ink-3); font-size: 13px; }
.studio-credit { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
/* The credit carries a third-party mark now. It is not recoloured or dimmed on
   hover: the wordmark is Zoel's asset, shipped verbatim, and dimming would move
   it toward the background. A hairline supplies the link affordance instead. */
.studio-credit a { display: inline-flex; align-items: center; border-bottom: 1px solid transparent;
  padding-bottom: 2px; transition: border-color .18s var(--ease); }
.studio-credit a:hover { border-bottom-color: var(--ink-3); }
.studio-credit img { display: block; height: 15px; width: auto; }

/* ------------------------------------------------------- Reveal on scroll */
/* 460ms with a 60ms step: the last block settles at ~700ms instead of 1.21s.
   Entrances must not make the reader wait to read. Transform carries the
   spring curve, opacity the plain ease — the two are not the same gesture. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .46s var(--ease), transform .46s var(--ease-spring); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .06s; }
.reveal[data-delay="2"] { transition-delay: .12s; }
.reveal[data-delay="3"] { transition-delay: .18s; }
.reveal[data-delay="4"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  /* Axis motion goes; the background and colour shift stays, so every control
     still confirms hover and press without moving. */
  .badge:hover, .badge:active, .btn:hover, .btn:active,
  .device:hover, .tcard:hover, .plan:hover { transform: none; }
  .scene:hover, .scene:hover .scene__img { transform: none; }
  .faq__q:active .pm { transform: none; }
  .qa.open .pm, .qa.open .faq__q:active .pm { transform: rotate(45deg); }
  .qa .ans { transition: none; }
}

/* ==================================================================== Legal */
.legal { padding-block: clamp(40px, 6vw, 72px); }
.legal .wrap { max-width: 760px; }
.legal__head { border-bottom: 1px solid var(--hairline); padding-bottom: 24px; margin-bottom: 8px; }
.legal__head h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 10px; }
.legal__updated { color: var(--ink-2); font-size: 15px; }
.legal__draft { margin-top: 20px; background: #FFF7ED; border: 1px solid var(--warning); color: #7a4a00; border-radius: var(--r-sm); padding: 14px 18px; font-size: 14.5px; }
.legal__draft strong { color: #6b3f00; }
.legal__note { margin-top: 14px; color: var(--ink-2); font-size: 14px; }
.legal h2 { font-size: clamp(20px, 2.6vw, 26px); margin-top: 40px; margin-bottom: 12px; padding-top: 8px; }
.legal h2 .num { color: var(--brand); font-family: var(--sans); font-weight: 700; font-size: 0.7em; margin-right: 10px; }
.legal h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; margin-top: 22px; margin-bottom: 8px; }
.legal p { color: var(--ink); margin-bottom: 14px; }
.legal ul { padding-left: 22px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.legal li { color: var(--ink); }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.legal__toc { background: var(--cloud); border: 1px solid var(--hairline); border-radius: var(--r); padding: 20px 24px; margin: 24px 0 8px; }
.legal__toc h2 { margin: 0 0 12px; font-size: 15px; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding: 0; }
.legal__toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal__toc li { margin-bottom: 6px; font-size: 14.5px; }
.legal__toc a { color: var(--ink-2); text-decoration: none; }
.legal__toc a:hover { color: var(--brand); }
.legal__back { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; margin-bottom: 24px; }
.legal__back:hover { color: var(--brand); }
@media (max-width: 560px) { .legal__toc ol { columns: 1; } }

/* --------------------------------------------------------------- Support
   One form, not two competing cards. Structure follows the studio reference:
   paired columns, uppercase micro-labels, generous field height, a single
   full-width action, and a line underneath saying what happens after you
   press it. Palette stays on the page's light system — the reference was a
   pattern reference, not a brand one. */
.support .lede { margin-top: 14px; }
.sform {
  max-width: 780px; margin: clamp(34px, 4.6vw, 56px) auto 0;
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 40px); box-shadow: var(--e1);
  display: grid; gap: 18px;
}
.sform__pair { display: grid; gap: 18px; }
@media (min-width: 681px) { .sform__pair { grid-template-columns: 1fr 1fr; } }
.sform__row { display: flex; flex-direction: column; gap: 8px; }
/* Allby has no mono face, so the reference's mono label maps onto the
   uppercase micro-label already used by .eyebrow. Tracking is mandatory at
   this size: caps without it collide. */
.sform__row > span {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2);
}
.sform__row .opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-3); }
.sform input, .sform select, .sform textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--cloud);
  /* WCAG 1.4.11 wants 3:1 on an input's identifying boundary. The cloud fill is
     1.04:1 against the white card, so the border carries it alone and
     --hairline (1.24:1) fell short. Derived from --ink-3, not a new value. */
  border: 1px solid color-mix(in srgb, var(--ink-3) 80%, var(--ink));
  border-radius: var(--r-sm); padding: 14px 16px; resize: vertical;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.sform textarea { min-height: 132px; line-height: 1.5; }
.sform input:hover, .sform select:hover, .sform textarea:hover { border-color: var(--ink-3); }
.sform input:focus, .sform select:focus, .sform textarea:focus {
  outline: none; background: #fff; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft-2);
}
/* --ink-3 fails AA on the field fill, so placeholders sit at --ink-2. */
.sform input::placeholder, .sform textarea::placeholder { color: var(--ink-2); opacity: 1; }
.sform .btn { width: 100%; margin-top: 4px; }
.sform .btn svg { flex: none; transition: transform .22s var(--ease-spring); }
.sform .btn:hover svg { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .sform .btn:hover svg { transform: none; } }
.sform__err { display: none; font-size: 13px; color: var(--error); letter-spacing: 0; text-transform: none; font-weight: 500; }
.sform.is-invalid .sform__err { display: block; }
.sform.is-invalid input[type="email"] { border-color: var(--error); background: #fff; }
.support__note { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.support__note a { color: var(--plum); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.support__links {
  list-style: none; padding: 0; margin: clamp(26px, 3vw, 38px) 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
}
.support__links a { color: var(--ink-2); font-size: 15px; border-bottom: 1px solid transparent; transition: color .18s var(--ease), border-color .18s var(--ease); }
.support__links a:hover { color: var(--brand); border-bottom-color: currentColor; }