/* ============================================================
   Eat That Frog! — public marketing site + auth pages
   ------------------------------------------------------------
   Shares the vocabulary and palette of the app's design system
   (static/style.css): same brand colours off the logo mark, same
   spacing rhythm, radii, elevation and type scale.

   This surface is light-only by design — it is a marketing site,
   not the themed app shell.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Type ---- */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;

  --fs-2xs: 0.6875rem; --fs-xs: 0.75rem;  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;   --fs-base: 1rem;   --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;   --fs-2xl: 1.75rem; --fs-3xl: 2.125rem;
  --fs-4xl: 2.75rem;   --fs-5xl: 3.25rem;

  /* ---- Spacing (4px rhythm) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ---- Radii ---- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 26px; --r-pill: 999px;

  --z-nav: 40; --z-popover: 60; --z-modal: 1000;

  /* ---- Motion ---- */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
  --ease: cubic-bezier(0.32, 0.72, 0.26, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Brand palette (from static/img/logo-mark.svg) ---- */
  --cream: #f7f4ec;
  --cream-2: #f1ece0;
  --card: #ffffff;
  --surface-2: #fbf9f3;
  --surface-3: #f4f1e8;

  --ink: #1b231c;
  --ink-2: #3d473e;
  --muted: #616a5e;          /* verified >=4.5:1 on cream and on white */

  --green: #3c5540;          /* brand forest — primary actions, links */
  --green-d: #2e4432;
  --green-dd: #24331f;
  --green-l: #4f6f52;
  --sage: #8fac92;
  --on-green: #f7f4ec;

  --gold: #c6a15b;
  --gold-d: #a9863f;
  --gold-text: #7a5a20;      /* gold as TEXT on light surfaces */
  --on-gold: #2a1f08;

  --line: #e6dfd0;           /* decorative hairlines — cards, separators */
  --line-strong: #cfc4ad;    /* dividers that carry meaning */
  /* Borders that are the ONLY visual boundary of a control must clear 3:1
     against both surfaces they sit on (WCAG 1.4.11 non-text contrast). */
  --field-border: #828f7b;   /* 3.41:1 on card, 3.24:1 on surface-2 */
  --control-border: #828f7b;

  --danger: #a83c2c;
  --danger-bg: #fbeae7;
  --danger-line: #e8b9b1;
  --ok: #2f7a4f;
  --ok-bg: #e8f1e6;
  --ok-line: #b6cfae;

  --focus: #3c5540;
  --focus-halo: rgba(60, 85, 64, 0.24);

  /* ---- Elevation ----
     Shadows are tinted warm olive rather than near-black: a desaturated dark
     grey reads as a grey smudge against this cream page, while this sits
     between the cream and the brand green and reads as part of the palette.
     Alphas are nudged up slightly to compensate for the lighter ink. */
  --shadow-rgb: 82, 88, 56;
  --sh-xs: 0 1px 2px rgba(var(--shadow-rgb), 0.07);
  --sh-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.06), 0 2px 6px rgba(var(--shadow-rgb), 0.06);
  --sh-md: 0 2px 4px rgba(var(--shadow-rgb), 0.06), 0 8px 20px rgba(var(--shadow-rgb), 0.09);
  --sh-lg: 0 4px 10px rgba(var(--shadow-rgb), 0.09), 0 18px 44px rgba(var(--shadow-rgb), 0.13);
  --sh-xl: 0 8px 20px rgba(var(--shadow-rgb), 0.11), 0 32px 64px rgba(var(--shadow-rgb), 0.16);
  --shadow: var(--sh-md);

  --tint-green: color-mix(in srgb, var(--green) 8%, transparent);
  --tint-gold: color-mix(in srgb, var(--gold) 16%, transparent);

  --nav-h: 68px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.026em;
  color: var(--ink);
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-d); text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
::selection { background: color-mix(in srgb, var(--green) 22%, transparent); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 500;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--green); color: var(--on-green);
  font-weight: 700; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* ============================================================
   Icons — inline SVG sprite (no emoji anywhere)
   ============================================================ */
.icon {
  width: 1.25em; height: 1.25em; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.24em; pointer-events: none;
}
.icon-lg { width: 1.5em; height: 1.5em; }
.icon-fill { fill: currentColor; stroke: none; }
/* Multi-colour third-party brand marks keep their own fills */
.brand-icon {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: none; vertical-align: -0.25em;
}

/* ============================================================
   Top navigation
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--nav-h);
  padding: var(--sp-3) clamp(var(--sp-4), 4vw, var(--sp-8));
  background: rgba(247, 244, 236, 0.86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-nav .logo {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-right: auto;
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.02em; font-size: var(--fs-lg);
  color: var(--green-d); text-decoration: none;
}
.site-nav .logo:hover { text-decoration: none; color: var(--green-d); }
.logo-mark { width: 36px; height: 36px; display: block; flex: 0 0 auto; border-radius: 10px; }
.site-nav .logo .logo-stack {
  display: flex; flex-direction: column; line-height: 1.05;
  white-space: nowrap; color: var(--green-d);
}
.site-nav .logo .logo-stack .gold { color: var(--gold-d); }
.site-nav .logo .logo-tag {
  font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .18em; color: var(--muted); margin-top: 3px;
}

.site-nav .links { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.site-nav .links a {
  font-weight: 600; font-size: var(--fs-md); color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav .links a:hover { color: var(--green); text-decoration: none; }
/* Nav CTAs sit a little shorter than a standalone .btn so the bar stays
   compact. Desktop only — the mobile drawer restores the full 48px target
   below, since that is where these are actually tapped. */
.site-nav .links a.btn {
  color: inherit;
  min-height: 36px;
  padding: 8px 16px;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px; margin-right: -8px;
  place-items: center;
  background: none; border: none; color: var(--ink);
  border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.nav-toggle:hover { background: var(--tint-green); }
.nav-toggle .icon { width: 22px; height: 22px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-md); font-weight: 700;
  line-height: 1.25; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 17px; height: 17px; }

.btn-primary { background: var(--green); color: var(--on-green); box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--green-d); color: var(--on-green); box-shadow: var(--sh-md); }

.btn-gold, .btn-buy {
  background: linear-gradient(135deg, #d3b273, var(--gold));
  color: var(--on-gold);
  box-shadow: 0 3px 12px rgba(198, 161, 91, 0.32);
}
.btn-gold:hover, .btn-buy:hover {
  filter: brightness(1.05); color: var(--on-gold);
  box-shadow: 0 6px 20px rgba(198, 161, 91, 0.42);
}

.btn-ghost { background: var(--card); border-color: var(--control-border); color: var(--ink); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); background: var(--surface-2); }

.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 34px; padding: 5px 12px; font-size: var(--fs-sm); border-radius: var(--r-xs); }
.btn-spacer { display: block; height: 44px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  text-align: center;
  padding: var(--sp-16) var(--sp-6) var(--sp-12);
  background:
    radial-gradient(1100px 420px at 50% -120px, #e7eede, transparent 70%),
    linear-gradient(165deg, #fbf9f3, #f1ebdf);
}
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, var(--fs-5xl));
  font-weight: 800; letter-spacing: -0.038em;
  margin: 0 auto var(--sp-4); max-width: 18ch; line-height: 1.08;
}
.hero h1 .hl {
  color: var(--green);
  background: linear-gradient(180deg, transparent 62%, var(--tint-gold) 62%);
  padding: 0 2px;
}
.hero p.lead {
  font-size: clamp(1.05rem, 1.9vw, 1.22rem);
  color: var(--ink-2); max-width: 60ch; margin: 0 auto var(--sp-8);
}
.hero .cta-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.hero .microcopy {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-md);
}
.hero .microcopy .icon { width: 15px; height: 15px; color: var(--ok); }

/* Subpage hero band (blog, etc.) */
.page-hero {
  text-align: center;
  padding: var(--sp-16) var(--sp-6) var(--sp-12);
  background:
    radial-gradient(1100px 400px at 50% -100px, #e7eede, transparent 70%),
    linear-gradient(165deg, #fbf9f3, #f1ebdf);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, var(--fs-4xl));
  font-weight: 800; letter-spacing: -0.034em;
  margin: 0 auto var(--sp-3); max-width: 20ch; line-height: 1.12;
}
.page-hero h1 .hl { color: var(--green); }
.page-hero p.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 58ch; margin: 0 auto; }

/* ============================================================
   Section scaffolding
   ============================================================ */
/* Soft blurred light washes behind every section. Painted as background
   gradients rather than blurred elements: they can never overflow the section
   (no horizontal scroll) and cost nothing to composite. */
.section {
  position: relative;
  max-width: 1120px; margin: 0 auto; padding: var(--sp-20) var(--sp-6);
  background-image:
    radial-gradient(560px 400px at 10% 4%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 62%),
    radial-gradient(620px 460px at 92% 96%, color-mix(in srgb, var(--green) 12%, transparent), transparent 65%);
}
.section.alt {
  background-image:
    radial-gradient(620px 440px at 88% 6%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 63%),
    radial-gradient(560px 420px at 6% 94%, color-mix(in srgb, var(--green) 10%, transparent), transparent 66%);
}
.section h2 {
  font-size: clamp(1.6rem, 3.4vw, var(--fs-3xl));
  text-align: center; margin: 0 0 var(--sp-3); letter-spacing: -0.032em;
}
.section .sub {
  text-align: center; color: var(--muted);
  max-width: 62ch; margin: 0 auto var(--sp-8); font-size: 1.02rem;
}
.section.alt {
  background-color: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.section.alt > * { max-width: 1120px; margin-left: auto; margin-right: auto; }

/* ============================================================
   Features
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.feature {
  position: relative;
  overflow: hidden;                       /* clips the blurred glow below */
  isolation: isolate;
  /* Translucent so the section's light wash reads through the card */
  background: color-mix(in srgb, var(--card) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* A genuinely blurred colour bloom inside each block, clipped by the card */
.feature::before {
  content: ""; position: absolute; z-index: -1;
  top: -70px; right: -60px; width: 210px; height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle,
              color-mix(in srgb, var(--gold) 62%, transparent), transparent 68%);
  filter: blur(30px);
  opacity: .62;
  transition: opacity var(--dur-slow) var(--ease), transform 520ms var(--ease);
  pointer-events: none;
}
.feature:hover::before { opacity: .92; transform: translate3d(-14px, 16px, 0) scale(1.12); }
.feature > * { position: relative; }
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: color-mix(in srgb, var(--green) 30%, var(--line));
}

/* --- Feature icon tile: dark forest plaque, gold gradient glyph --- */
.feature .ico {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: var(--sp-3);
  border-radius: 15px;
  background: linear-gradient(145deg, #47624a 0%, #33482f 52%, #263620 100%);
  border: 1px solid rgba(247, 244, 236, .16);
  box-shadow:
    inset 0 1px 0 rgba(247, 244, 236, .22),      /* top bevel highlight */
    inset 0 -8px 16px rgba(0, 0, 0, .22),        /* inset: sits on the dark plaque */
    0 8px 18px -6px rgba(var(--shadow-rgb), .58); /* cast onto the light card */
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
/* Soft gold halo bleeding out of the plaque */
.feature .ico::after {
  content: ""; position: absolute; inset: -9px; z-index: -1;
  border-radius: 24px;
  background: radial-gradient(circle,
              color-mix(in srgb, var(--gold) 46%, transparent), transparent 70%);
  filter: blur(9px); opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}
.feature:hover .ico { transform: translateY(-2px) rotate(-3deg) scale(1.05); }
.feature:hover .ico::after { opacity: 1; }
.feature .ico .icon {
  width: 24px; height: 24px;
  stroke: url(#iconGold);        /* gradient stroke defined in the sprite */
  stroke-width: 1.85;
}
.feature h3 { margin: 0 0 6px; font-size: var(--fs-lg); line-height: 1.3; }
.feature p { margin: 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.55; }

/* ============================================================
   3D feature carousel
   ------------------------------------------------------------
   Progressive enhancement: the markup is a plain responsive
   grid of .feature cards. JS adds .is-3d to the wrapper only on
   wide viewports with motion allowed, which promotes the grid
   into a perspective stage. No JS, narrow screen or
   prefers-reduced-motion all keep the readable grid.
   ============================================================ */
.feature-3d { position: relative; }
.f3d-controls { display: none; }
.f3d-live {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Stage --- */
.feature-3d.is-3d .f3d-stage {
  display: block;
  position: relative;
  /* Only as tall as the tallest card needs; the cards size to their own
     content and are centred in it rather than stretched to fill. The tallest
     copy renders ~174px (2 lines), so this leaves room for a 3rd wrapped line
     if the webfont falls back to wider metrics. Cards are absolutely
     positioned, so a rare overhang is not clipped. */
  height: 210px;
  margin-bottom: var(--sp-5);
  perspective: 1500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
/* Soft "floor" so the stack reads as depth rather than overlap */
.feature-3d.is-3d .f3d-stage::after {
  content: ""; position: absolute; left: 50%; bottom: -18px;
  width: 620px; max-width: 88%; height: 46px; transform: translateX(-50%);
  /* Uses the shared warm-olive shadow ink, not a one-off dark green: at these
     low alphas a desaturated dark composites to neutral grey on the cream. */
  background: radial-gradient(ellipse at center, rgba(var(--shadow-rgb), .20), transparent 68%);
  filter: blur(6px); pointer-events: none;
}

/* --- Cards --- */
.feature-3d.is-3d .f3d-card {
  --o: 0;      /* signed offset from the active card */
  --ao: 0;     /* absolute offset */
  --tx: 0deg;  /* pointer tilt X (active card only) */
  --ty: 0deg;  /* pointer tilt Y (active card only) */
  position: absolute;
  /* height:auto so a card is exactly icon + title + text tall; the -50% in the
     transform below pairs with top:50% to keep them vertically centred. */
  top: 50%; left: 50%;
  width: 340px; height: auto;
  margin-left: -170px;
  display: block;
  /* transform + opacity only — stays on the compositor */
  transform:
    translate3d(calc(var(--o) * 258px), -50%, calc(var(--ao) * -250px))
    rotateY(calc(var(--o) * -32deg + var(--ty)))
    rotateX(var(--tx))
    scale(calc(1 - var(--ao) * 0.05));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 620ms var(--ease), opacity 480ms var(--ease),
              box-shadow 420ms var(--ease), border-color 420ms var(--ease);
  will-change: transform;
  /* backdrop-filter forces an off-screen pass per element; on six cards that
     are continuously rotating that is real jank, so the 3D deck drops it and
     leans on the card's own blurred bloom instead. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: color-mix(in srgb, var(--card) 93%, transparent);
}
.feature-3d.is-3d .f3d-card[data-far="1"] { opacity: 0; pointer-events: none; }
.feature-3d.is-3d .f3d-card:not(.is-active) { cursor: pointer; }
.feature-3d.is-3d .f3d-card:not(.is-active) h3,
.feature-3d.is-3d .f3d-card:not(.is-active) p { opacity: .8; }
.feature-3d.is-3d .f3d-card.is-active {
  box-shadow: var(--sh-xl);
  border-color: color-mix(in srgb, var(--gold) 60%, var(--line));
  z-index: 5;
}
/* The active card flips its plaque to gold with a dark glyph */
.feature-3d.is-3d .f3d-card.is-active .ico {
  background: linear-gradient(145deg, #e3c893 0%, var(--gold) 55%, #ad8a44 100%);
  border-color: rgba(42, 31, 8, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -8px 16px rgba(0, 0, 0, .13),
    0 10px 24px -6px rgba(198, 161, 91, .62);
}
.feature-3d.is-3d .f3d-card.is-active .ico .icon { stroke: url(#iconInk); }
.feature-3d.is-3d .f3d-card.is-active .ico::after { opacity: 1; }
/* Gold sheen tracking the pointer — active card only (1 focal element) */
.feature-3d.is-3d .f3d-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(198, 161, 91, .20), transparent 66%);
  opacity: 0; pointer-events: none;
  transition: opacity 320ms var(--ease);
}
.feature-3d.is-3d .f3d-card.is-active::after { opacity: 1; }
.feature-3d.is-3d .f3d-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* --- Controls --- */
.feature-3d.is-3d .f3d-controls {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
}
.f3d-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--control-border); border-radius: 50%;
  background: var(--card); color: var(--green-d); cursor: pointer;
  box-shadow: var(--sh-xs);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.f3d-btn:hover { background: var(--surface-2); border-color: var(--green); box-shadow: var(--sh-sm); }
.f3d-btn:active { transform: scale(.94); }
.f3d-btn .icon { width: 19px; height: 19px; stroke-width: 2.2; }

.f3d-dots { display: flex; align-items: center; gap: 2px; }
/* 44px hit area with a small visual dot, so the target is not the dot itself */
.f3d-dot {
  display: grid; place-items: center;
  width: 30px; height: 44px; padding: 0;
  background: none; border: none; cursor: pointer;
}
.f3d-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  /* control-border, not line-strong: an inactive dot still has to be visible
     enough to show how many slides there are (>=3:1). */
  background: var(--control-border);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.f3d-dot:hover::before { background: var(--sage); }
.f3d-dot[aria-selected="true"]::before {
  background: var(--green); transform: scale(1.45);
}
.f3d-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: -6px; border-radius: var(--r-xs); }

/* --- Scroll reveal for the grid fallback (added by JS) --- */
.feature-3d.reveal-ready .feature-grid { perspective: 900px; }
.feature-3d.reveal-ready .feature {
  opacity: 0;
  transform: translateY(20px) rotateX(-7deg);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.feature-3d.reveal-ready .feature.in { opacity: 1; transform: none; }

/* The features block is deliberately tighter top and bottom than the other
   sections: its cards are short, so the default 80px band left it floating. */
#features { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }

/* ============================================================
   Homepage image slider
   ============================================================ */
.slider { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-6); }
.slider-track-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  /* Negative spread keeps the shade tucked under the slider instead of
     smudging out to the sides and corners. */
  box-shadow:
    0 6px 16px -10px rgba(var(--shadow-rgb), .30),
    0 24px 46px -26px rgba(var(--shadow-rgb), .36);
  background: var(--surface-3);
}
.slider-track { display: flex; transition: transform .6s var(--ease); }
.slide { position: relative; min-width: 100%; margin: 0; }
.slide img { display: block; width: 100%; height: 440px; object-fit: cover; }
.slide-cap {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-16) var(--sp-8) var(--sp-6);
  background: linear-gradient(to top, rgba(16, 26, 18, .88), rgba(16, 26, 18, .34) 58%, transparent);
  color: #fff; text-align: left;
}
.slide-cap h3 {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  margin: 0 0 var(--sp-1); color: #fff;
}
.slide-cap p { margin: 0; color: rgba(255, 255, 255, .94); font-size: 1.02rem; line-height: 1.45; }
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--green-d);
  box-shadow: var(--sh-md);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.slider-btn:hover { background: #fff; }
.slider-btn:active { transform: translateY(-50%) scale(.94); }
.slider-btn .icon { width: 20px; height: 20px; stroke-width: 2.25; }
.slider-btn.prev { left: var(--sp-4); }
.slider-btn.next { right: var(--sp-4); }
.slider-dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.slider-dots button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  border: none; background: var(--control-border);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.slider-dots button:hover { background: var(--sage); }
.slider-dots button[aria-selected="true"] { background: var(--green); transform: scale(1.3); }

/* ============================================================
   Product screenshots + lightbox
   ============================================================ */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.shot-fig { margin: 0; }
.shot-fig img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  cursor: zoom-in;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.shot-fig img:hover { transform: translateY(-4px); box-shadow: var(--sh-xl); }
.shot-fig figcaption {
  margin-top: var(--sp-3); text-align: center;
  color: var(--muted); font-size: var(--fs-md);
}

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(16, 22, 18, .90);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-8) var(--sp-5);
  animation: fadeIn var(--dur) var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(1200px, 94vw); max-height: 82vh;
  width: auto; height: auto; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  cursor: zoom-out;
}
.lightbox-caption { margin-top: var(--sp-4); color: #eae6da; font-size: var(--fs-base); text-align: center; }
.lightbox-close {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(0, 0, 0, .38); color: #fff; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.lightbox-close:hover { background: rgba(255, 255, 255, .18); }
.lightbox-close .icon { width: 22px; height: 22px; }

/* ============================================================
   Pricing
   ============================================================ */
.price-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5); align-items: stretch;
}
.price {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  display: flex; flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.price:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.price.featured {
  border: 2px solid var(--green);
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
}
.price.featured:hover { transform: translateY(-11px); box-shadow: var(--sh-xl); }
.price .badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--on-gold);
  font-size: var(--fs-2xs); font-weight: 800;
  padding: 5px 13px; border-radius: var(--r-pill);
  letter-spacing: .06em; white-space: nowrap;
  box-shadow: var(--sh-sm);
}
.price h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); }
.price .amount {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  letter-spacing: -0.036em; font-size: var(--fs-4xl); font-weight: 800;
  color: var(--green-d); line-height: 1.05;
}
.price .period { color: var(--muted); font-size: var(--fs-md); margin-bottom: var(--sp-5); }
.price ul { list-style: none; padding: 0; margin: 0 0 var(--sp-6); }
.price li {
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-md);
}
.price li:last-child { border-bottom: none; }
/* Tick rendered as an SVG mask rather than a text glyph */
.price li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.8 12.6l4.6 4.6L19.2 7.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.8 12.6l4.6 4.6L19.2 7.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.price-cta { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); }

/* ============================================================
   Blog
   ============================================================ */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.post-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.post-card .post-thumb {
  display: block; width: 100%; height: 180px;
  object-fit: cover; object-position: center; background: var(--surface-3);
}
.post-card .pc-body {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; flex: 1;
}
.post-card .date {
  color: var(--gold-text); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.post-card h3 { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-lg); line-height: 1.35; }
.post-card p { color: var(--muted); margin: 0 0 var(--sp-4); font-size: var(--fs-md); }
.post-card a.more {
  margin-top: auto; font-weight: 700; font-size: var(--fs-md);
  display: inline-flex; align-items: center; gap: 6px;
}
.post-card a.more .icon { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.post-card a.more:hover { text-decoration: none; }
.post-card a.more:hover .icon { transform: translateX(3px); }

.post-hero {
  display: block; width: 100%; max-width: 780px; height: auto;
  margin: 0 auto var(--sp-4);
  aspect-ratio: 1200 / 630; object-fit: contain;
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
.article { max-width: 720px; margin: 0 auto; padding: var(--sp-16) var(--sp-6); }
.article .date {
  color: var(--gold-text); font-weight: 700; font-size: var(--fs-md);
  text-transform: uppercase; letter-spacing: .05em;
}
.article h1 {
  font-size: clamp(1.75rem, 4vw, var(--fs-3xl));
  margin: var(--sp-2) 0 var(--sp-2); line-height: 1.15;
}
.article .byline { color: var(--muted); margin-bottom: var(--sp-8); }
.article p { font-size: 1.08rem; margin: 0 0 var(--sp-5); max-width: 68ch; }
.article .back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--sp-6); font-weight: 600;
}
.article .back .icon { width: 15px; height: 15px; }

/* ============================================================
   Cards & forms
   ============================================================ */
.form-wrap { max-width: 560px; margin: 0 auto; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--sh-md);
}
.field { margin-bottom: var(--sp-5); }
.field label {
  display: block; font-weight: 700; margin-bottom: var(--sp-2); font-size: var(--fs-md);
  color: var(--ink);
}
.field input, .field textarea, .field select {
  width: 100%; min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-base);
  background: var(--surface-2); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:hover, .field textarea:hover { border-color: var(--green-l); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--focus-halo);
  background: var(--card);
}
.field textarea { line-height: 1.6; resize: vertical; }

/* Deliberately NOT flex: a flex container turns each bare text node into its
   own flex item, so `gap` opens visible holes around any inline <strong>/<em>
   inside the message. Normal text flow with an inline icon keeps it one run. */
.notice, .errbox {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.notice { background: var(--ok-bg); color: #245c3c; border: 1px solid var(--ok-line); }
.errbox { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); }
.notice .icon, .errbox .icon {
  width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px;
}
.notice a, .errbox a { color: inherit; font-weight: 700; text-decoration: underline; }

.captcha-q {
  font-weight: 800; color: var(--green-d);
  background: var(--tint-green); border: 1px solid var(--line);
  padding: 3px 10px; border-radius: var(--r-xs);
  display: inline-block; font-variant-numeric: tabular-nums;
}

/* --- Phone field: country-code dropdown with SVG flags --- */
.phone-row { display: flex; gap: var(--sp-2); }
.phone-row input { flex: 1 1 auto; min-width: 0; }
.cc-dd { position: relative; flex: 0 0 auto; }
.cc-btn {
  display: flex; align-items: center; gap: 7px; min-width: 104px; min-height: 46px;
  padding: 12px 12px;
  border: 1px solid var(--field-border); border-radius: var(--r-sm);
  font: inherit; background: var(--surface-2); color: inherit; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cc-btn:hover { border-color: var(--green-l); }
.cc-btn:focus, .cc-btn[aria-expanded="true"] {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--focus-halo);
}
.cc-flag {
  width: 18px; height: 12px; object-fit: cover; flex: 0 0 auto;
  border-radius: 2px; border: 1px solid rgba(0, 0, 0, .14); background: #fff;
}
.cc-btn-label { font-weight: 600; font-size: var(--fs-md); }
.cc-caret {
  width: 12px; height: 12px; margin-left: auto; flex: 0 0 auto;
  background: currentColor; color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--dur) var(--ease);
}
.cc-btn[aria-expanded="true"] .cc-caret { transform: rotate(180deg); }
.cc-panel {
  position: absolute; z-index: var(--z-popover); top: calc(100% + 6px); left: 0;
  width: 320px; max-width: 82vw;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-lg); overflow: hidden;
}
.cc-search-wrap { padding: var(--sp-2); border-bottom: 1px solid var(--line); }
.cc-search {
  width: 100%; min-height: 40px; padding: 9px 11px;
  border: 1px solid var(--field-border); border-radius: var(--r-xs);
  font: inherit; font-size: var(--fs-md); background: var(--surface-2);
}
.cc-search:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--focus-halo); }
.cc-list { max-height: 272px; overflow-y: auto; padding: var(--sp-1); }
.cc-opt {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: 40px; padding: 9px 11px; border: 0; border-radius: var(--r-xs);
  font: inherit; font-size: var(--fs-md); text-align: left;
  background: transparent; color: inherit; cursor: pointer;
}
.cc-opt:hover, .cc-opt:focus { background: var(--tint-green); outline: none; }
.cc-opt.is-selected { background: color-mix(in srgb, var(--green) 14%, transparent); font-weight: 700; }
.cc-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-dial { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.phone-err { display: block; margin-top: 6px; font-size: var(--fs-md); color: var(--danger); font-weight: 600; }

/* ============================================================
   Auth pages
   ============================================================ */
.auth-wrap {
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-12) var(--sp-4) var(--sp-16);
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  background:
    radial-gradient(1000px 400px at 50% -140px, #e7eede, transparent 70%),
    linear-gradient(165deg, #fbf9f3, #ede7da);
}
.auth-card { width: 100%; max-width: 430px; }
.auth-card .brand {
  display: block; text-align: center; text-decoration: none;
  font-family: var(--font-display); letter-spacing: -0.028em;
  font-size: var(--fs-xl); font-weight: 800; color: var(--green-d);
  margin-bottom: var(--sp-1);
}
.auth-card .brand:hover { text-decoration: none; color: var(--green-d); }
.auth-card .brand span { color: var(--gold-d); }
.auth-card .brand .brand-mark {
  width: 56px; height: 56px; display: block; margin: 0 auto var(--sp-3);
}
.auth-card .brand .brand-tag {
  display: block; font-family: var(--font-body); font-size: var(--fs-2xs);
  font-weight: 700; letter-spacing: .2em; color: var(--muted); margin-top: var(--sp-1);
}
.auth-card .tag { text-align: center; color: var(--muted); margin: 0 0 var(--sp-6); }
.auth-card h1 { font-size: var(--fs-xl); text-align: center; margin: 0 0 var(--sp-6); }
.auth-card .card { padding: var(--sp-8) var(--sp-6); }
.auth-alt { text-align: center; margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-md); }
.auth-alt a { font-weight: 600; }
.auth-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); font-size: var(--fs-md); flex-wrap: wrap;
}
.auth-row a { font-weight: 600; }

.oauth { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-1); }
.oauth a {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 46px; padding: 12px;
  border: 1px solid var(--control-border); border-radius: var(--r-sm);
  font-weight: 700; font-size: var(--fs-md);
  background: var(--card); color: var(--ink); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur-fast) var(--ease);
}
.oauth a:hover {
  border-color: var(--green); box-shadow: var(--sh-sm);
  background: var(--surface-2); color: var(--ink); text-decoration: none;
}
.oauth a.disabled { opacity: .5; pointer-events: none; }

.divider {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--muted); margin: var(--sp-5) 0; font-size: var(--fs-md);
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line-strong);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-xs); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq-item[open] { box-shadow: var(--sh-sm); border-color: color-mix(in srgb, var(--green) 26%, var(--line)); }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-5) var(--sp-6);
  font-weight: 700; color: var(--ink); font-size: 1.04rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: 0 0 auto;
  width: 18px; height: 18px;
  background: var(--gold-d);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:hover { color: var(--green); }
.faq-item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.faq-answer { padding: 0 var(--sp-6) var(--sp-5); }
.faq-answer p { margin: 0; color: var(--muted); line-height: 1.65; }

/* ============================================================
   Checkout / order summary
   ============================================================ */
.order-summary {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  background: var(--surface-2);
}
.order-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: var(--sp-2) 0; }
.order-row .muted { color: var(--muted); font-weight: 500; font-size: var(--fs-md); }
.order-row.total {
  border-top: 1px solid var(--line-strong);
  margin-top: var(--sp-2); padding-top: var(--sp-3);
  font-size: 1.06rem; font-weight: 700;
}
.order-row.total strong { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.billed-to { color: var(--muted); font-size: var(--fs-md); margin: 0 0 var(--sp-5); }
.billed-to strong { color: var(--ink); }
.order-feats { margin: var(--sp-3) 0 var(--sp-1); padding: 0; list-style: none; color: var(--ink-2); font-size: var(--fs-md); }
.order-feats li { position: relative; margin: var(--sp-1) 0; padding-left: var(--sp-6); }
.order-feats li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 15px; height: 15px; margin-top: -7px;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.8 12.6l4.6 4.6L19.2 7.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.8 12.6l4.6 4.6L19.2 7.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Block, not flex — see the note on .notice above. */
.secure-note { display: block; text-align: center; color: var(--muted); }
.secure-note .icon {
  width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px;
}

/* ============================================================
   Admin
   ============================================================ */
.admin-wrap { max-width: 1120px; margin: 0 auto; padding: var(--sp-12) var(--sp-6); }
.admin-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm);
}
.admin-table th, .admin-table td {
  padding: var(--sp-3) var(--sp-4); text-align: left;
  border-bottom: 1px solid var(--line); font-size: var(--fs-md);
}
.admin-table th {
  background: var(--green); color: var(--on-green);
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--surface-3); }
.admin-table select, .admin-table input {
  padding: 6px 9px; min-height: 34px;
  border: 1px solid var(--field-border); border-radius: var(--r-xs); font: inherit;
  background: var(--card); color: var(--ink);
}
.admin-table select:focus, .admin-table input:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--focus-halo);
}
.tag-pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.tag-pill.active { background: var(--ok-bg); color: #245c3c; }
.tag-pill.disabled { background: var(--danger-bg); color: var(--danger); }
.tag-pill.admin { background: var(--tint-gold); color: var(--gold-text); }

/* ============================================================
   Footer
   ============================================================ */
.site-foot {
  background: var(--green-dd); color: #d9e2d3;
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
}
.site-foot a {
  color: #fff; font-weight: 600; margin: 0 var(--sp-3);
  display: inline-block; padding: var(--sp-1) 0;
}
.site-foot a:hover { color: var(--gold); text-decoration: underline; }
.site-foot .small {
  color: #a8bba2; font-size: var(--fs-md); margin-top: var(--sp-4);
  display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap;
}

/* ============================================================
   Motion
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .feature-grid, .shots, .price-grid, .post-grid { grid-template-columns: 1fr; }
  .price.featured { transform: none; }
  .price.featured:hover { transform: translateY(-3px); }

  .site-nav .links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--card); border-bottom: 1px solid var(--line);
    padding: var(--sp-2) 0; box-shadow: var(--sh-lg);
  }
  .site-nav .links.open { display: flex; }
  .site-nav .links a {
    padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--line);
    min-height: 48px; display: flex; align-items: center;
  }
  /* Must repeat the .btn selector: the desktop rule above is more specific
     than `.site-nav .links a`, so without this it would win here too and drop
     the drawer CTA under the 44px touch minimum. */
  .site-nav .links a.btn {
    margin: var(--sp-2) var(--sp-6); justify-content: center; border-bottom: none;
    min-height: 48px; padding: 11px 20px;
  }
  .site-nav .links a:last-child { border-bottom: none; }
  .nav-toggle { display: grid; }

  .section { padding: var(--sp-16) var(--sp-5); }
  .hero { padding: var(--sp-12) var(--sp-5) var(--sp-10); }
  .slide img { height: 300px; }
  .slide-cap { padding: var(--sp-12) var(--sp-5) var(--sp-4); }
  .slider-btn { width: 40px; height: 40px; }
  .page-hero { padding: var(--sp-12) var(--sp-5) var(--sp-10); }
  .card { padding: var(--sp-6); }
  .auth-card .card { padding: var(--sp-6) var(--sp-5); }

  /* Admin table scrolls rather than breaking the page */
  .admin-wrap { padding: var(--sp-8) var(--sp-4); }
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 560px) {
  .slide img { height: 240px; }
  .slide-cap p { font-size: var(--fs-md); }
  .hero .cta-row .btn { width: 100%; }
  .site-foot a { display: block; margin: var(--sp-2) 0; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .feature:hover, .price:hover, .post-card:hover, .shot-fig img:hover { transform: none; }
  .price.featured, .price.featured:hover { transform: none; }
  /* The carousel is never promoted to 3D under reduced motion (JS checks the
     same query), but belt-and-braces: keep the grid flat and fully visible. */
  .feature-3d.reveal-ready .feature { opacity: 1; transform: none; }
}