/* Self-hosted brand fonts (replace the Google Fonts stylesheet). One latin file per face, variable weight, subset to
   Google's "latin" range PLUS U+20B9 (the rupee sign, which Google keeps in latin-ext). Built by scripts/fonts/build-fonts.py;
   the file names carry a content hash, so they are cached for a year (immutable) and a rebuilt font gets a new name. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static-home/fonts/montserrat-var.fe6f75e4.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static-home/fonts/cormorant-garamond-var.bc52f7d7.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(/static-home/fonts/cormorant-garamond-italic-var.374a4f26.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static-home/fonts/great-vibes.b83d3505.woff2) format("woff2"); unicode-range: U+0020-007E, U+00A0, U+2019; }
/* Size-adjusted stand-ins shown while the web fonts load, so the swap does not move any text (metrics measured from the
   font files against Arial / Roboto for sans, Times New Roman / Noto Serif for serif; the second face of each pair is the
   Android system font). unicode-range keeps glyphs the brand fonts lack (arrows, ticks) on the normal system fallback. */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 114.5%; ascent-override: 84.54%; descent-override: 21.92%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat Fallback Android"; src: local("Roboto"); size-adjust: 113.89%; ascent-override: 84.99%; descent-override: 22.04%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Fallback"; src: local("Times New Roman"); size-adjust: 97.34%; ascent-override: 94.92%; descent-override: 29.48%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Fallback Android"; src: local("Noto Serif"); size-adjust: 81.1%; ascent-override: 113.94%; descent-override: 35.39%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Great Vibes Fallback"; src: local("Arial"); size-adjust: 62.16%; ascent-override: 136.9%; descent-override: 64.51%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0, U+2019; }

/* ============ Tokens ============ */
:root {
  --maroon: #876B0C;       /* deep gold: bands and surfaces with ivory text (5.2:1) */
  --gold-grad: linear-gradient(180deg, #F6E39B 0%, #E3C455 46%, #D3AF37 50%, #BE9A29 100%); /* polished gold #D3AF37: buttons */
  --gold-sheen: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .6) 50%, transparent 64%);
  --on-gold: #1A1817;
  /* Large-surface metallic foil: top-left specular highlight over a multi-stop 135deg gradient. Darkest stop #BC9524 keeps #1A1817 text at 6.3:1 */
  --gold-foil: radial-gradient(120% 85% at 8% 0%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #F8E7A6 0%, #E3C455 28%, #BC9524 52%, #D9BB4E 78%, #F3DE92 100%);
  --gold-foil-edge: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(110, 82, 8, .35);
  --foil-ink: #1A1817;
  --foil-ink-2: #2A2008;
  --foil-line: rgba(26, 24, 23, .28);
  --maroon-d: #6B5409;
  --gold: #C5A059;
  --gold-d: #6F5320;          /* text-safe gold (4.5:1+ on ivory, sand and #F7F0E4 sections) */
  --tan: #F2E0B5;
  --sand: #EEE3D3;            /* sheet header bars */
  --ivory: #FDFBF7;
  --white: #FFFFFF;
  --ink: #2A1A1E;
  --muted: #6B5A57;
  --line: rgba(135, 107, 12, .12);
  --shadow-s: 0 2px 10px rgba(74, 28, 40, .06);
  --shadow-m: 0 18px 50px -18px rgba(74, 28, 40, .28);
  --shadow-l: 0 40px 90px -30px rgba(74, 28, 40, .35);
  --serif: "Cormorant Garamond", "Cormorant Fallback", "Cormorant Fallback Android", "Times New Roman", serif;
  --sans: "Montserrat", "Montserrat Fallback", "Montserrat Fallback Android", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Great Vibes", "Great Vibes Fallback", cursive;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --radius: 18px;
  --section-y: clamp(4rem, 7.5vw, 6.5rem); /* shared vertical rhythm for sections */
  --z-nav: 50;
  --z-loader: 100;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; scroll-padding-bottom: 96px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; }
h1, h2, h3, .h2, .cta h2 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--gold-grad); color: var(--on-gold); padding: .6rem 1rem; border-radius: 8px; }
.skip-link:focus { top: 1rem; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(860px, 100% - 32px); }
.ico { width: 18px; height: 18px; flex: none; }
.ico--gold { color: var(--gold); }

/* ============ Type ============ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-d); margin: 0 0 1.25rem;
}
.eyebrow__line { width: 36px; height: 1px; background: var(--gold); }
.eyebrow--center { display: flex; justify-content: center; }
.h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.01em;
  margin: 0 0 1rem; color: var(--ink);
}
.h2 em { color: var(--maroon); }
.h2--light, .h2--light em { color: var(--ivory); }
.h2--light em { color: var(--tan); }
.section-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-lede { color: var(--muted); max-width: 52ch; margin: 0 auto; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.6rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease);
  cursor: pointer;
}
.btn:active { transform: scale(.98); }
.btn .ico { transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }
.btn--sm { min-height: 44px; padding: .6rem 1.25rem; font-size: .8125rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--gold-sheen), var(--gold-grad); background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0; background-repeat: no-repeat; color: var(--on-gold); box-shadow: 0 10px 24px -10px rgba(135, 107, 12, .55), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 90, 10, .25); transition: background-position .8s var(--ease), filter .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease); }
.btn--primary:hover { background-position: -60% 0, 0 0; filter: brightness(1.04); }
@media (prefers-reduced-motion: reduce) { .btn--primary { transition: none; } .btn--primary:hover { background-position: 160% 0, 0 0; } }
.btn--ghost { border: 1px solid rgba(135, 107, 12, .35); color: var(--maroon-d); background: transparent; } /* maroon-d: 6:1 on the cream sections, plain maroon was 4.2:1 at this size */
.btn--ghost:hover { background: var(--maroon); color: var(--ivory); border-color: var(--maroon); }
.btn--gold { background: var(--gold); color: #2A1A1E; box-shadow: 0 10px 24px -10px rgba(197, 160, 89, .7); }
.btn--gold:hover { background: #D4B06A; }

/* ============ Loader ============ */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: grid; place-items: center; background: var(--ivory);
  transition: opacity .35s var(--ease), visibility .35s;
  /* CSS-only exit (done by ~0.45s): the loader never sits on top of the headline, and it leaves by itself even if main.js never runs */
  animation: loader-out .3s var(--ease) .15s forwards;
}
.is-ready .loader { opacity: 0; visibility: hidden; }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
.loader__mark { width: 92px; }
.loader__mark circle { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw .45s var(--ease) forwards; }
.loader__mark circle.thin { stroke: var(--maroon); stroke-width: .6; animation-delay: .05s; }
.loader__mark text { font-family: var(--serif); font-size: 44px; fill: var(--maroon); opacity: 0; animation: fade .3s .1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
html:not(.js) .loader { display: none; }

/* ============ Nav ============ */
.nav { position: fixed; top: 12px; left: 0; right: 0; z-index: var(--z-nav); padding-inline: 16px; }
.nav__inner {
  width: min(1200px, 100%); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .55rem .6rem .55rem 1.4rem; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .8) 0%, rgba(246, 227, 155, .36) 55%, rgba(227, 196, 85, .3) 100%); border: 1px solid rgba(211, 175, 55, .45);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-scrolled .nav__inner { background: linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(246, 227, 155, .42) 55%, rgba(227, 196, 85, .3) 100%); border-color: rgba(211, 175, 55, .5); box-shadow: var(--shadow-s), inset 0 1px 0 rgba(255, 255, 255, .85); }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--gold-d); white-space: nowrap; text-decoration: none; transition: opacity .25s var(--ease); }
.logo:hover { opacity: .88; color: var(--gold-d); }
.logo__brand, .logo__text, .logo__script, .logo__word {
  font-family: var(--script);
  font-size: clamp(1.85rem, 3.2vw, 2.3rem);
  font-weight: 400;
  letter-spacing: .015em;
  color: var(--gold-d);
  line-height: 1.05;
  -webkit-font-smoothing: antialiased;
}
.logo:hover .logo__brand,
.logo:hover .logo__text,
.logo:hover .logo__script,
.logo:hover .logo__word { color: var(--gold-d); }
.logo--light { color: var(--ivory); }
.logo--light .logo__brand,
.logo--light .logo__text,
.logo--light .logo__script,
.logo--light .logo__word { color: var(--tan); }
.nav__links { display: none; gap: 2rem; margin-left: auto; }
.nav__links > a { position: relative; font-size: .8125rem; font-weight: 500; letter-spacing: .06em; color: var(--muted); padding: .5rem 0; transition: color .2s; }
.nav__links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: var(--maroon); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.nav__links > a:hover { color: var(--maroon); }
.nav__links > a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display: none; }
.nav__toggle { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center; gap: 6px; }
.nav__toggle span { width: 20px; height: 1.5px; background: var(--maroon); transition: transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-menu {
  width: min(1200px, 100%); margin: 8px auto 0; padding: 1rem; border-radius: 24px;
  background: var(--ivory); border: 1px solid var(--line); box-shadow: var(--shadow-m);
  display: grid; gap: .25rem;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu > a:not(.btn) { padding: .8rem .75rem; font-family: var(--serif); font-size: 1.35rem; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: .75rem; }
@media (min-width: 1180px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle, .mobile-menu { display: none !important; }
}

/* ============ Hero ============ */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(7.5rem, 14vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(242, 224, 181, .55), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(135, 107, 12, .06), transparent 70%),
    var(--ivory);
}
.hero__mandala { position: absolute; color: var(--gold); opacity: .22; pointer-events: none; animation: spin 140s linear infinite; }
.hero__mandala--a { width: 620px; height: 620px; right: -220px; top: -160px; }
.hero__mandala--b { width: 360px; height: 360px; left: -170px; bottom: -120px; animation-direction: reverse; opacity: .14; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__grid { position: relative; display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }

.hero__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3.3rem, 9vw, 6.4rem); line-height: .98; letter-spacing: -.02em;
  margin: 0 0 1.5rem; color: var(--ink);
}
.hero__title em { color: var(--maroon); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .24em; margin-bottom: -.18em; } /* room for descenders (y, g) without changing line spacing */
/* The headline and lede are the page's largest text, so they are painted from the first frame: no opacity, no
   translate, nothing that waits on JS, the loader or fonts. Only decorative parts (eyebrow, price, buttons, the
   dashboard) keep their staggered entrance. */
.hero__title .line > span { display: inline-block; }
.hero__lede { font-size: clamp(1rem, 1.4vw, 1.1rem); color: var(--muted); max-width: 46ch; margin: 0 0 1rem; }
.hero__price { margin: 0 0 1.6rem; font-size: 1rem; color: var(--ink); }
.hero__price strong { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--maroon); margin-right: .15rem; font-variant-numeric: lining-nums tabular-nums; }
.hero__lede em { color: var(--ink); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2rem; }
.hero__trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .875rem; color: var(--muted); }
.hero__trust li { display: inline-flex; align-items: center; gap: .4rem; }
.hero__trust .ico { color: var(--gold-d); width: 16px; height: 16px; }

.hero__visual { position: relative; opacity: 0; transform: translateY(40px) scale(.97); transition: opacity 1.2s .35s var(--ease), transform 1.2s .35s var(--ease); }
.is-ready .hero__visual { opacity: 1; transform: none; }
html:not(.js) .hero__visual { opacity: 1; transform: none; }
/* "27 tabs" ring badge: sits in the device stage's tag row (see "Hero device stage" near the end of this file) */
.badge-rotate {
  position: relative; z-index: 3; width: 118px; height: 118px; flex: none;
  border-radius: 50%; background: var(--white); box-shadow: var(--shadow-m);
  display: grid; place-items: center;
}
.badge-rotate svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.badge-rotate text { font-size: 9.4px; font-weight: 600; letter-spacing: 2.4px; fill: var(--maroon); font-family: var(--sans); }
.badge-rotate__core { font-family: var(--serif); font-size: 2.1rem; color: var(--gold-d); font-weight: 600; }

/* ============ Sheet/window mockups ============ */
.window {
  position: relative; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-l); border: 1px solid rgba(42, 26, 30, .06); overflow: hidden; min-width: 0;
}
.window__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(42, 26, 30, .06); }
.window__bar i { width: 11px; height: 11px; border-radius: 50%; background: #CFC3B0; }
.window__bar i:nth-child(2) { background: #DDD3C3; }
.window__bar i:nth-child(3) { background: #ECE6DC; }
.window__bar span { margin-left: auto; font-size: .6875rem; letter-spacing: .08em; color: #7A6662; }
.window__body { padding: clamp(14px, 3vw, 26px); }
.sheet-title { text-align: center; font-size: clamp(.78rem, 1.4vw, .95rem); letter-spacing: .38em; text-transform: uppercase; margin: .25rem 0 .2rem; font-weight: 500; }
.sheet-sub { text-align: center; font-size: .7rem; color: var(--muted); font-style: italic; margin: 0 0 1.1rem; font-family: var(--serif); font-size: .92rem; }
.window__body > .sheet-title:only-of-type { margin-bottom: 1.1rem; }

.sheet-block { border: 1px solid rgba(42, 26, 30, .07); border-radius: 10px; overflow: hidden; min-width: 0; }
.sheet-block__head {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--sand); padding: .5rem .8rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #5B4A45;
}
.sheet-block__head--sub { margin-top: .8rem; border-radius: 6px; }
.sheet-block--center { display: flex; flex-direction: column; align-items: center; padding-bottom: .9rem; }
.sheet-block--center .sheet-block__head { align-self: stretch; }

.legend { display: inline-flex; gap: .4rem; align-items: center; font-size: .6875rem; letter-spacing: .08em; font-weight: 500; }
.legend i, .lg { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.lg--b { background: #D9C6AE; }
.lg--a { background: var(--maroon); }
.legend--stack { flex-direction: column; align-items: flex-start; gap: .3rem; font-size: .6875rem; color: var(--muted); letter-spacing: 0; }
.legend--stack span, .legend--wrap span { display: inline-flex; align-items: center; gap: .4rem; }
.legend--wrap { flex-wrap: wrap; justify-content: center; gap: .3rem .8rem; font-size: .6875rem; color: var(--muted); letter-spacing: 0; padding: 0 .5rem; }

.tile { background: var(--ivory); border: 1px solid rgba(42, 26, 30, .06); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.tile__label { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #7A6662; }
.tile__big { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1; color: var(--maroon); font-weight: 500; }
.tile__big small { font-size: .5em; color: var(--muted); }
.tile__foot { font-size: .6875rem; color: var(--muted); }
.meter { display: block; height: 6px; border-radius: 99px; background: #F1EADF; overflow: hidden; }
.meter > span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--maroon)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }

.donut { width: 64px; height: 64px; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 5; }
.donut__track { stroke: #F1EADF; }
.donut__val { stroke: var(--maroon); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s var(--ease); }
.donut text { transform: rotate(90deg); transform-origin: 21px 21px; font-family: var(--serif); font-size: 9px; fill: var(--ink); }
.donut--split { width: 110px; height: 110px; margin: .8rem 0 .6rem; }
.donut--split .donut__track { stroke: #D9C6AE; }
.donut--split .donut__val { stroke-linecap: butt; }
.panel.play .donut--split .donut__val { stroke-dasharray: var(--v) 100; }

/* ============ Marquee ============ */
.marquee { overflow: hidden; background: var(--maroon); color: var(--tan); padding: 1.1rem 0; }
.marquee__track { display: flex; width: max-content; align-items: center; gap: 2.2rem; animation: marquee 40s linear infinite; }
.marquee__track span { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-style: italic; white-space: nowrap; }
.marquee__track i { font-style: normal; color: var(--tan); font-size: .8125rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ Statement ============ */
.statement { padding: var(--section-y) 0 clamp(3rem, 6vw, 4.5rem); text-align: center; }
.statement__text {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 2.75rem); line-height: 1.3; font-weight: 400;
  margin: 0 auto 4rem; color: var(--ink);
}
.statement__text em { color: var(--maroon); }
/* Colour (not opacity) carries the scroll reveal so every word stays >= 6:1 in every state */
.reveal-words .w { display: inline-block; color: var(--muted); transition: color .6s var(--ease); }
.reveal-words .w.on { color: var(--ink); }
.statement__text em .w.on { color: var(--maroon); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; border-top: 1px solid var(--line); padding-top: 3rem; padding-bottom: 0; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num { display: block; font-variant-numeric: lining-nums; font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: var(--maroon); font-weight: 500; }
.stat__label { display: block; margin-top: .5rem; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ============ Showcase ============ */
.inside {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  background: var(--paper-grain), linear-gradient(180deg, var(--ivory), #FAF3EB 30%, #F5EBE5 70%, var(--ivory));
}
.showcase { display: grid; gap: 2rem; }
@media (min-width: 980px) { .showcase { grid-template-columns: 340px 1fr; gap: 3.5rem; align-items: start; } }

.showcase__tabs {
  position: relative; display: flex; gap: .6rem; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: .6rem; margin-inline: -16px; padding-inline: 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.showcase__tabs::-webkit-scrollbar { display: none; }
.stab {
  flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: .9rem; text-align: left;
  padding: .8rem 1.25rem; border-radius: 999px; border: 1px solid rgba(197, 160, 89, .32); background: var(--white);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease);
  min-height: 48px; -webkit-tap-highlight-color: transparent;
}
.stab:active { transform: scale(.97); }
.stab__txt strong { display: block; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.stab__txt small { display: none; }
.stab[aria-selected="true"] {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-xd));
  border-color: var(--gold); color: var(--ivory);
  box-shadow: 0 6px 20px -4px rgba(135, 107, 12, .4);
}
.showcase__progress { display: none; }

@media (min-width: 980px) {
  .showcase__tabs { position: sticky; top: 110px; flex-direction: column; overflow: visible; margin: 0; padding: 0 0 0 1.25rem; gap: 0; }
  .stab {
    border: 0; border-radius: 0; background: none; padding: 1.15rem 0; gap: 1.25rem;
    border-bottom: 1px solid rgba(197, 160, 89, .22); align-items: flex-start;
  }
  .stab:hover .stab__txt strong { color: var(--maroon); }
  .stab__txt strong { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; letter-spacing: 0; transition: color .25s; }
  .stab__txt small { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .4s var(--ease); }
  .stab[aria-selected="true"] { background: none; color: var(--ink); box-shadow: none; }
  .stab[aria-selected="true"] .stab__txt strong { color: var(--maroon); }
  .stab[aria-selected="true"] .stab__txt small { max-height: 3em; opacity: 1; margin-top: .2rem; }
  .showcase__progress { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px; background: rgba(197, 160, 89, .25); border-radius: 2px; }
  .showcase__progress span { position: absolute; left: 0; width: 100%; height: calc(100% / 6); background: linear-gradient(180deg, var(--gold), var(--maroon)); border-radius: 2px; transform: translateY(calc(var(--idx, 0) * 100%)); transition: transform .5s var(--ease); }
}

.showcase__stage { position: relative; min-width: 0; }
.inside .window {
  border: 1px solid rgba(232, 185, 189, .5);
  box-shadow: 0 16px 44px -10px rgba(74, 28, 40, .1), 0 0 0 1px rgba(197, 160, 89, .24);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.inside .window:hover {
  box-shadow: 0 22px 52px -12px rgba(74, 28, 40, .14), 0 0 0 1px rgba(197, 160, 89, .35);
}
.inside .window__bar {
  background: linear-gradient(90deg, #FAF6F0, #F5EDE3);
  border-bottom: 1px solid rgba(197, 160, 89, .22);
}
.panel { min-width: 0; }
.panel[hidden] { display: none; }
.panel.is-active { animation: panelIn .5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.panel__notes { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
@media (min-width: 720px) { .panel__notes { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.panel__notes li { display: flex; gap: .5rem; font-size: .95rem; color: var(--muted); line-height: 1.45; }
.panel__notes .ico { color: var(--maroon); margin-top: 1px; }

/* budget */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.kpi { background: var(--ivory); border: 1px solid rgba(42, 26, 30, .06); border-radius: 10px; padding: 10px; text-align: center; min-width: 0; }
.kpi span { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7A6662; }
.kpi strong { display: block; font-family: var(--serif); font-size: clamp(.95rem, 2.4vw, 1.4rem); font-weight: 600; color: var(--ink); white-space: nowrap; }
.kpi--accent strong { color: var(--maroon); }
.bars { display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: clamp(4px, 1.4vw, 14px); height: clamp(170px, 26vw, 230px); padding: 1rem .8rem 0; background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), #F2ECE3 calc(25% - 1px) 25%); background-size: 100% calc(100% - 26px); background-repeat: no-repeat; }
.bar-g { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: calc(100% - 26px); }
.bar { width: 42%; max-width: 18px; border-radius: 3px 3px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); }
.bar--b { height: var(--b); background: #D9C6AE; }
.bar--a { height: var(--a); background: var(--maroon); transition-delay: .12s; }
.bar--over { background: #BF9A20; }
.bar-g em { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.panel.play .bar { transform: scaleY(1); }
.bar-g:nth-child(2) .bar { transition-delay: .06s; } .bar-g:nth-child(3) .bar { transition-delay: .12s; } .bar-g:nth-child(4) .bar { transition-delay: .18s; }
.bar-g:nth-child(5) .bar { transition-delay: .24s; } .bar-g:nth-child(6) .bar { transition-delay: .3s; } .bar-g:nth-child(7) .bar { transition-delay: .36s; } .bar-g:nth-child(8) .bar { transition-delay: .42s; }
@media (max-width: 480px) { .bar-g em { font-size: .625rem; transform: translateX(-50%) rotate(-35deg); transform-origin: top center; } }

/* tasks */
.rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.ring { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.ring svg { width: clamp(46px, 9vw, 64px); height: auto; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.2; }
.ring circle:first-child { stroke: #F1EADF; }
.ring circle:last-child { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.3s var(--ease); }
.panel.play .ring circle:last-child { stroke-dasharray: var(--p) 100; }
.ring:nth-child(2) circle:last-child { transition-delay: .1s; } .ring:nth-child(3) circle:last-child { transition-delay: .2s; } .ring:nth-child(4) circle:last-child { transition-delay: .3s; }
.tasks { border: 1px solid rgba(42, 26, 30, .07); border-radius: 10px; overflow: hidden; }
.task { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: .6rem; padding: .62rem .8rem; font-size: .76rem; border-bottom: 1px solid #F3EEE6; opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * .09s); }
.task:last-child { border-bottom: 0; }
.task:nth-child(even) { background: var(--ivory); }
.panel.play .task { opacity: 1; transform: none; }
.task__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .4s; }
.cbx { width: 16px; height: 16px; border-radius: 4px; border: 1.4px solid #CDB9A6; display: grid; place-items: center; transition: background-color .3s, border-color .3s; transition-delay: calc(.6s + var(--i) * .25s); }
.cbx svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .3s; transition-delay: inherit; }
.panel.play .task:not(.task--todo) .cbx { background: var(--maroon); border-color: var(--maroon); }
.panel.play .task:not(.task--todo) .cbx svg { opacity: 1; }
.panel.play .task:not(.task--todo) .task__name { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(135, 107, 12, .4); transition-delay: calc(.6s + var(--i) * .25s); }
.pill { font-size: .6875rem; padding: .18rem .55rem; border-radius: 99px; background: var(--sand); color: #5B4A45; white-space: nowrap; }
.prio { font-size: .6875rem; font-weight: 600; padding: .18rem .5rem; border-radius: 4px; }
.prio--h { background: #F6DDE3; color: #876B0C; }
.prio--m { background: #F5EBD3; color: #7A5A1E; }
.prio--l { background: #E4EEE3; color: #3C6A45; }
@media (max-width: 420px) { .pill { display: none; } .task { grid-template-columns: 20px 1fr auto; } }

/* guests */
.guests { display: grid; gap: 12px; }
@media (min-width: 620px) { .guests { grid-template-columns: 1.6fr 1fr; } }
.hbars { display: grid; gap: .65rem; padding: 1rem .9rem; }
.hbar { display: grid; grid-template-columns: 74px 1fr 34px; align-items: center; gap: .6rem; font-size: .72rem; }
.hbar em { font-style: normal; color: var(--muted); }
.hbar span { height: 12px; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, var(--tan), var(--gold)); width: var(--w); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.hbar:nth-child(4) span { background: linear-gradient(90deg, #BF9A20, var(--maroon)); }
.hbar b { font-weight: 600; font-size: .72rem; text-align: right; }
.panel.play .hbar span { transform: scaleX(1); }
.hbar:nth-child(2) span { transition-delay: .08s; } .hbar:nth-child(3) span { transition-delay: .16s; } .hbar:nth-child(4) span { transition-delay: .24s; } .hbar:nth-child(5) span { transition-delay: .32s; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 12px; }
.chip { font-size: .6875rem; padding: .3rem .75rem; border-radius: 99px; background: var(--ivory); border: 1px solid rgba(42, 26, 30, .08); color: var(--muted); }
.chip--ok { background: #E4EEE3; color: #2F5C39; border-color: transparent; }
.chip--no { background: #F6DDE3; color: var(--maroon); border-color: transparent; }

/* honeymoon */
.pie { width: 130px; height: 130px; margin: .9rem 0 .6rem; transform: rotate(-90deg); }
.pie circle { fill: none; stroke-width: 20; stroke: var(--c); stroke-dasharray: 0 100; stroke-dashoffset: calc(var(--o) * -1); transition: stroke-dasharray 1s var(--ease); }
.panel.play .pie circle { stroke-dasharray: var(--v) 100; }
.pie circle:nth-child(2) { transition-delay: .15s; } .pie circle:nth-child(3) { transition-delay: .3s; } .pie circle:nth-child(4) { transition-delay: .45s; } .pie circle:nth-child(5) { transition-delay: .6s; }
/* ============ Included ============ */
.included { position: relative; overflow-x: clip; overflow-y: visible; padding: var(--section-y) 0; }
.included__mandala { position: absolute; width: 560px; height: 560px; left: 50%; top: 40px; transform: translateX(-50%); color: var(--gold); opacity: .1; pointer-events: none; }
.tabs-list { position: relative; list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 0 3rem; max-width: 1000px; }
@media (min-width: 600px) { .tabs-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .tabs-list { grid-template-columns: repeat(3, 1fr); } }
.tabs-list li { display: flex; align-items: center; gap: 1.1rem; padding: .95rem 0; border-bottom: 1px solid rgba(197, 160, 89, .22); font-size: .82rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #4A3A3D; transition: color .25s; }
.tabs-list li span { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 1px solid rgba(197, 160, 89, .35); box-shadow: var(--shadow-s); font-family: var(--serif); font-size: .95rem; letter-spacing: 0; color: var(--gold-d); transition: background-color .25s, color .25s, border-color .25s, transform .25s; }
.tabs-list li:hover { color: var(--maroon); }
.tabs-list li:hover span { background: var(--maroon); color: var(--ivory); border-color: var(--gold); transform: scale(1.08); }
.js [data-stagger] > li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease), color .25s; transition-delay: calc(var(--i, 0) * 35ms); }
.js [data-stagger].in > li { opacity: 1; transform: none; }
.perks { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 4rem; }
@media (min-width: 600px) { .perks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .perks { grid-template-columns: repeat(4, 1fr); } }
.perk { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; background: var(--white); border-radius: 16px; box-shadow: var(--shadow-s); border: 1px solid rgba(42, 26, 30, .04); }
.perk svg { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--maroon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.perk strong { display: block; font-size: .88rem; }
.perk small { color: var(--muted); font-size: .8125rem; }

/* ============ How it works ============ */
.how { padding: var(--section-y) 0; background: #F7F0E4; }
.steps { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .steps { grid-template-columns: 1fr 80px 1fr 80px 1fr; } }
.step { text-align: center; padding: 0 .5rem; }
.step__num { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--gold); font-family: var(--serif); font-size: 1.8rem; color: var(--maroon); background: var(--ivory); margin-bottom: 1.1rem; }
.step h3 { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; margin: 0 0 .4rem; }
.step p { margin: 0 auto; color: var(--muted); font-size: 1rem; max-width: 32ch; }
.step__line { display: none; }
@media (min-width: 900px) {
  .step__line { display: block; height: 1px; margin-top: 32px; background: rgba(197, 160, 89, .35); overflow: hidden; }
  .step__line span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1.2s .4s var(--ease); }
  .steps.in .step__line span { transform: scaleX(1); }
}

/* ============ Pricing ============ */
.pricing { padding: var(--section-y) 0; }
.plans { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: center; } }
.plan { position: relative; display: flex; flex-direction: column; padding: 2.2rem 1.9rem; border-radius: 22px; background: linear-gradient(180deg, #fff, #FFFCF7); border: 1px solid var(--line); box-shadow: var(--shadow-s); transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
.plan:hover { box-shadow: var(--shadow-m); border-color: rgba(197, 160, 89, .6); }
.plan h3 { font-family: var(--serif); font-size: 1.8rem; font-weight: 600; margin: 0; }
.plan__desc { color: var(--muted); font-size: 1rem; margin: .3rem 0 1.4rem; min-height: 2.8em; }
.plan__price { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; font-size: 3rem; line-height: 1; margin: 0 0 1.6rem; color: var(--maroon); font-weight: 600; display: flex; align-items: baseline; gap: .15rem; }
.plan__cur { font-size: .55em; }
.plan__price s { font-size: 1.1rem; color: var(--muted); margin-left: .6rem; font-weight: 400; }
.plan ul { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .7rem; flex: 1; }
.plan li { display: flex; gap: .6rem; font-size: 1rem; line-height: 1.45; }
.plan li .ico { color: var(--gold-d); margin-top: 1px; }
.plan--featured { background: var(--maroon); color: var(--ivory); border-color: var(--maroon); box-shadow: var(--shadow-l), inset 0 0 0 1px rgba(197, 160, 89, .45); outline: 1px solid rgba(197, 160, 89, .35); outline-offset: -10px; padding-block: 2.8rem; }
.plan--featured:hover { border-color: var(--gold); }
.plan--featured .plan__desc { color: rgba(253, 251, 247, .78); }
.plan--featured .plan__price { color: var(--tan); }
.plan--featured .plan__price s { color: rgba(253, 251, 247, .78); }
.plan--featured li .ico { color: var(--tan); }
.plan__ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--ink); font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: .4rem 1rem; border-radius: 99px; white-space: nowrap; }
.pricing__note { text-align: center; color: var(--muted); font-size: .8125rem; margin-top: 2rem; }

/* ============ Reviews Carousel ============ */
.reviews {
  padding: var(--section-y) 0;
  background: var(--paper-grain), var(--blush-l);
  overflow: hidden;
  position: relative;
}
.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}
.reviews-head .eyebrow { margin-bottom: .4rem; }
.reviews-head .h2 { margin: 0; }
.reviews-nav { display: flex; gap: .6rem; flex: none; }

.reviews__carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(340px, 82vw);
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: .5rem 2px 1.5rem;
}
.reviews__carousel::-webkit-scrollbar { display: none; }
.reviews__carousel:focus-visible { outline: 2px solid var(--maroon); outline-offset: -4px; }
@media (max-width: 600px) {
  .reviews__carousel {
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
}

.review {
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.2rem 1.8rem;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(232, 185, 189, .55);
  box-shadow: 0 8px 24px -6px rgba(74, 28, 40, .07);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.review:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -10px rgba(74, 28, 40, .14);
  border-color: var(--gold);
}
.review .stars { display: flex; align-items: center; gap: 3px; margin: 0 0 .9rem; color: var(--gold); }
.review .stars svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.review .stars .star--muted { color: rgba(197, 160, 89, .28) !important; fill: currentColor; }
.review .stars__score { font-size: .8125rem; font-weight: 700; color: var(--gold-d); margin-left: .4rem; font-variant-numeric: tabular-nums; line-height: 1; }
.review blockquote { margin: 0 0 1.25rem; font-family: var(--serif); font-size: 1.26rem; line-height: 1.45; color: var(--ink); flex: 1; }
.review figcaption { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); font-weight: 600; padding-top: .85rem; border-top: 1px solid rgba(135, 107, 12, .08); }

.reviews-progress {
  height: 3px;
  border-radius: 3px;
  background: rgba(135, 107, 12, .12);
  overflow: hidden;
  max-width: 320px;
  margin: 1.5rem auto 0;
}
.reviews-progress span {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--gold);
  border-radius: inherit;
  transform: translateX(var(--x, 0));
  transition: transform .15s linear;
}

@media (max-width: 640px) {
  .reviews-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .reviews-nav { align-self: flex-start; }
  .review { padding: 1.6rem 1.4rem; }
}

/* ============ FAQ ============ */
.faq { padding: var(--section-y) 0; }
.faq__list { display: grid; gap: .75rem; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 16px; transition: border-color .25s, box-shadow .25s; }
.faq details[open] { border-color: rgba(197, 160, 89, .7); box-shadow: var(--shadow-s); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq__q { margin: 0; font: inherit; }
.faq summary .ico { color: var(--maroon); transition: transform .3s var(--ease); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details > div { padding: 0 1.4rem 1.3rem; color: var(--muted); font-size: 1rem; }
.faq details > div p { margin: 0; }

/* ============ CTA ============ */
.cta { position: relative; overflow: hidden; padding: var(--section-y) 0; background: radial-gradient(80% 100% at 50% 0%, #977710, var(--maroon) 50%, var(--maroon-d)); text-align: center; color: var(--ivory); }
.cta__mandala { position: absolute; width: 760px; height: 760px; left: 50%; top: 50%; margin: -380px 0 0 -380px; color: var(--gold); opacity: .18; animation: spin 160s linear infinite; pointer-events: none; }
.cta__inner { position: relative; }
.cta__script { font-family: var(--script); font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--tan); margin: 0 0 .25rem; line-height: 1.2; }
.cta .h2 { margin-bottom: 2rem; }

/* ============ Footer ============ */
.footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FDFBF7 0%, #FAF4EE 50%, #F5ECE9 100%);
  color: #5C4048;
  border-top: 1px solid rgba(197, 160, 89, .25);
  padding: 3.5rem 0 2rem;
  font-size: .85rem;
}
/* Room under the legal row on every width, so the floating WhatsApp button never sits on top of the footer's last links. */
.footer { padding-bottom: 5.5rem; }
.footer__grid { display: grid; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(135, 107, 12, .12); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1fr auto; align-items: center; } }
.footer__tag { margin: .5rem 0 0; color: #6B5A57; }
.footer__base nav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.footer a { color: #4A1C28; transition: color .2s; }
.footer a:hover { color: var(--maroon); }
.footer .logo { display: inline-flex; align-items: center; gap: .75rem; }
.footer .logo__brand, .footer .logo__text, .footer .logo__script, .footer .logo__word {
  font-family: var(--script);
  font-size: clamp(1.85rem, 2.5vw, 2.35rem);
  font-weight: 400;
  letter-spacing: .015em;
  color: var(--gold-d);
  line-height: 1.05;
  white-space: nowrap;
}
.footer a.logo:hover { opacity: .88; color: var(--gold-d); }
.footer a.logo:hover .logo__brand,
.footer a.logo:hover .logo__text,
.footer a.logo:hover .logo__script,
.footer a.logo:hover .logo__word { color: var(--gold-d); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: 1.5rem; font-size: .8125rem; color: #7A6268; }
.footer__base a { color: #5C4048; }
.footer__base a:hover { color: var(--maroon); }
.footer .logo__badge {
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid rgba(197, 160, 89, .25);
  box-shadow: 0 4px 14px rgba(74, 28, 40, .05);
}
.footer .wc { bottom: 0; right: 0; width: clamp(140px, 16vw, 220px); opacity: .35; }

/* ============ Scroll reveal ============ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: min(var(--d, 0s), .24s); }
.js .reveal.in { opacity: 1; transform: none; }
.hero .reveal { transition-delay: calc(.4s + var(--d, 0s)); }
.js .hero .reveal { opacity: 0; transform: translateY(20px); }
.is-ready .hero .reveal { opacity: 1; transform: none; }

/* If main.js failed to run (see the safety net in <head>), show everything. */
.js-failed .reveal, .js-failed [data-stagger] > li, .js-failed .hero__visual { opacity: 1; transform: none; }
.js-failed .loader { display: none; }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .loader { display: none; }
  .marquee__track, .reviews__track { animation: none !important; }
  .reveal-words .w { color: var(--ink); }
  .statement__text em .w { color: var(--maroon); }
}

/* ============ Mega menu ============ */
.has-mega { position: static; }
.nav__trigger { display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; font-weight: 500; letter-spacing: .06em; color: var(--muted); padding: .5rem 0; min-height: 44px; transition: color .2s; }
.nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: var(--maroon); }
.ico--chev { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav__trigger[aria-expanded="true"] .ico--chev { transform: rotate(180deg); }
.nav__links { align-items: center; }
.mega { position: absolute; left: 16px; right: 16px; top: calc(100% + 10px); display: flex; justify-content: center; }
.mega[hidden] { display: none; }
/* "Studios": a small dropdown, positioned under its own button (the Planners mega menu spans the whole bar). */
.has-drop { position: relative; }
.drop { position: absolute; top: calc(100% + 14px); left: 50%; width: 288px; margin-left: -144px; z-index: 5; padding: .5rem; border-radius: 20px; background: var(--ivory); border: 1px solid var(--line); box-shadow: var(--shadow-l); animation: megaIn .35s var(--ease); }
.drop[hidden] { display: none; }
.drop__item { display: block; padding: .65rem .8rem; border-radius: 12px; transition: background-color .2s; }
.drop__item:hover { background: var(--white); }
.drop__item strong { display: block; font-size: .82rem; font-weight: 600; color: var(--ink); }
.drop__item small { display: block; font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--muted); }
.mega__inner {
  width: min(1100px, 100%); display: grid; grid-template-columns: 1.05fr 1.2fr 1fr; gap: 2rem;
  padding: 1.6rem; border-radius: 26px; background: var(--ivory); border: 1px solid var(--line); box-shadow: var(--shadow-l);
  animation: megaIn .35s var(--ease);
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } }
.mega__feature {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .6rem; padding: 1.6rem;
  border-radius: 18px; color: var(--ivory);
  background: radial-gradient(120% 90% at 100% 0%, #977710, var(--maroon) 55%, var(--maroon-d));
  transition: box-shadow .3s var(--ease);
}
.mega__feature:hover { box-shadow: var(--shadow-m); }
.mega__feature-tag { align-self: flex-start; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; background: var(--gold); color: var(--ink); padding: .3rem .7rem; border-radius: 99px; }
.mega__feature-icon { width: 44px; height: 44px; color: var(--tan); margin-top: .4rem; }
.mega__feature strong { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.15; }
.mega__feature > span:not(.mega__feature-tag):not(.mega__feature-cta) { font-size: .8125rem; color: rgba(253, 251, 247, .8); line-height: 1.55; }
.mega__feature-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tan); }
.mega__feature:hover .mega__feature-cta .ico { transform: translateX(4px); }
.mega__feature-cta .ico { transition: transform .25s var(--ease); }
.mega__label { margin: .2rem 0 .6rem .6rem; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.mega__col { display: flex; flex-direction: column; }
.mega__item { display: flex; align-items: center; gap: .85rem; padding: .6rem; border-radius: 12px; transition: background-color .2s; }
.mega__item:hover { background: var(--white); }
.mega__item svg { width: 34px; height: 34px; flex: none; padding: 6px; border-radius: 10px; background: #F5ECDF; color: var(--maroon); transition: background-color .2s, color .2s; }
.mega__item:hover svg { background: var(--maroon); color: var(--tan); }
.mega__item strong { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--ink); }
.mega__item small { display: block; font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--muted); }
.mega__all { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .8rem .6rem 0; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); }
.tag { font-style: normal; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 99px; background: var(--sand); color: #5B4A45; }
.tag--free { background: #E4EEE3; color: #2F5C39; }

/* mobile menu groups */
.mobile-menu { max-height: calc(100dvh - 100px); overflow-y: auto; }
.mm-group { border-bottom: 1px solid var(--line); }
.mm-group summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: .8rem .75rem; font-family: var(--serif); font-size: 1.35rem; cursor: pointer; min-height: 48px; }
.mm-group summary::-webkit-details-marker { display: none; }
.mm-group summary .ico { color: var(--maroon); transition: transform .3s var(--ease); }
.mm-group[open] summary .ico { transform: rotate(180deg); }
.mm-sub { display: grid; gap: .1rem; padding: 0 .25rem .75rem; }
.mm-sub a { display: flex; align-items: center; gap: .75rem; padding: .55rem .5rem; border-radius: 10px; font-size: .9rem; min-height: 44px; }
.mm-sub a:active { background: var(--white); }
.mm-sub svg { width: 30px; height: 30px; flex: none; padding: 5px; border-radius: 8px; background: #F5ECDF; color: var(--maroon); }
.mm-feature { background: var(--maroon); color: var(--ivory); margin-bottom: .3rem; }
.mm-feature svg { background: rgba(255, 255, 255, .12); color: var(--tan); }
.mm-feature strong { display: block; font-weight: 600; }
.mm-feature small { color: var(--tan); font-size: .8125rem; }
.mobile-menu a.mm-link { padding: .8rem .75rem; font-family: var(--serif); font-size: 1.35rem; border-bottom: 1px solid var(--line); }

/* ============ Collection ============ */
.collection { position: relative; padding: var(--section-y) 0; }
.product {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--white);
  border: 1px solid rgba(42, 26, 30, .06); box-shadow: var(--shadow-s);
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.product:hover { box-shadow: var(--shadow-m); border-color: rgba(197, 160, 89, .55); }
.product__art { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #FBF4E8, #F2E6D3); }
.product__icon { width: 54px; height: 54px; color: var(--maroon); position: relative; z-index: 1; transition: transform .5s var(--ease); }
.product:hover .product__icon { transform: translateY(-4px); }
.product__art--night { background: linear-gradient(160deg, #2B1E35, #4A2340); }
.product__art--night .product__icon { color: var(--tan); }
.product__art--gold { background: linear-gradient(160deg, #F7E9C6, #E9CF95); }
.product__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; }
.product__num { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.product h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.15; }
.product__tag { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--muted); line-height: 1.35; }
.product__meta { margin: .2rem 0 0; font-size: .8125rem; color: #7A6662; }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); min-height: 44px; }
.link-arrow .ico { transition: transform .25s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }

/* product mini-graphics (animate when card reveals) */
.mini-bars { position: absolute; right: 22px; bottom: 22px; display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.mini-bars i { width: 8px; height: var(--h); border-radius: 2px 2px 0 0; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease); }
.mini-bars i:nth-child(2) { background: var(--maroon); transition-delay: .08s; } .mini-bars i:nth-child(3) { transition-delay: .16s; } .mini-bars i:nth-child(4) { background: var(--maroon); transition-delay: .24s; }
.product.in .mini-bars i { transform: scaleY(1); }
.mini-dots { position: absolute; right: 18px; bottom: 20px; display: flex; }
.mini-dots i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid #FBF4E8; margin-left: -6px; transform: scale(0); transition: transform .6s var(--ease); }
.mini-dots i:nth-child(2) { transition-delay: .08s; } .mini-dots i:nth-child(3) { transition-delay: .16s; } .mini-dots i:nth-child(4) { transition-delay: .24s; }
.product.in .mini-dots i { transform: scale(1); }
.mini-env { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: center; gap: 6px; }
.mini-env i { font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--maroon); background: var(--white); padding: .2rem .45rem; border-radius: 4px; box-shadow: var(--shadow-s); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mini-env i:nth-child(2) { transition-delay: .1s; } .mini-env i:nth-child(3) { transition-delay: .2s; }
.product.in .mini-env i { opacity: 1; transform: none; }
.mini-abc { position: absolute; right: 18px; top: 18px; display: grid; gap: 4px; }
.mini-abc i { font-style: normal; font-family: var(--serif); font-size: .8rem; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--maroon); box-shadow: var(--shadow-s); }
.mini-abc i:first-child { background: var(--maroon); color: var(--tan); }
.mini-wave { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; height: 26px; }
.mini-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--gold); transform: scaleY(.3); animation: eq 1.2s ease-in-out infinite; animation-play-state: paused; }
.mini-wave i:nth-child(2n) { background: var(--maroon); animation-delay: -.3s; } .mini-wave i:nth-child(3n) { animation-delay: -.6s; } .mini-wave i:nth-child(5) { animation-delay: -.9s; }
.product:hover .mini-wave i, .product.in .mini-wave i { animation-play-state: running; }
@keyframes eq { 50% { transform: scaleY(1); } }
.mini-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--tan); animation: twinkle 3s ease-in-out infinite; }
.mini-stars i:nth-child(1) { left: 18%; top: 22%; } .mini-stars i:nth-child(2) { left: 78%; top: 30%; animation-delay: -1s; } .mini-stars i:nth-child(3) { left: 30%; top: 75%; animation-delay: -2s; } .mini-stars i:nth-child(4) { left: 86%; top: 72%; animation-delay: -.5s; } .mini-stars i:nth-child(5) { left: 60%; top: 14%; animation-delay: -1.5s; }
@keyframes twinkle { 50% { opacity: .2; } }
.mini-ticks { position: absolute; right: 20px; bottom: 18px; display: grid; gap: 5px; }
.mini-ticks i { width: 40px; height: 6px; border-radius: 3px; background: rgba(135, 107, 12, .18); position: relative; overflow: hidden; }
.mini-ticks i::after { content: ""; position: absolute; inset: 0; background: var(--maroon); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.mini-ticks i:nth-child(2)::after { transition-delay: .2s; }
.product.in .mini-ticks i:not(:last-child)::after { transform: scaleX(1); }
.product--soon .product__body { background: linear-gradient(180deg, var(--white), #FBF6EE); }

/* ============ Panel extras ============ */
.panel__buy { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); min-height: 44px; }
.panel__buy .ico { transition: transform .25s var(--ease); }
.panel__buy:hover .ico { transform: translateX(4px); }
.bars { grid-template-columns: repeat(6, 1fr); }
.whatif { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 12px; padding: .6rem .8rem; border-radius: 10px; background: var(--ivory); border: 1px dashed rgba(197, 160, 89, .6); font-size: .7rem; }
.whatif__label { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7A6662; margin-right: .3rem; }
.whatif__opt { padding: .2rem .55rem; border-radius: 99px; background: var(--white); border: 1px solid rgba(42, 26, 30, .08); }
.whatif__opt.is-on { background: var(--maroon); color: var(--ivory); border-color: var(--maroon); }
.whatif__res { margin-left: auto; font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--maroon); }
.whatif__res small { font-family: var(--sans); font-size: .6875rem; font-weight: 500; color: #B03A58; }

.hbars { position: relative; }
.hbar--max span { background: linear-gradient(90deg, #BF9A20, var(--maroon)) !important; }
.hbar:nth-child(4) span { background: linear-gradient(90deg, var(--tan), var(--gold)); }
.pie--sm { width: 110px; height: 110px; }
.wa-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 12px; padding: .55rem .7rem; border-radius: 10px; border: 1px solid rgba(42, 26, 30, .07); font-size: .72rem; }
.wa-row__name { font-weight: 600; margin-right: auto; }
.wa-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 99px; background: #E3F3E7; color: #1E6B3A; font-weight: 600; font-size: .6875rem; }
.wa-btn svg { width: 14px; height: 14px; }
.panel.play .wa-btn { animation: pulse 2.4s 1.2s ease-out 2; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 107, 58, .35); } 100% { box-shadow: 0 0 0 10px rgba(30, 107, 58, 0); } }

.looks { border: 1px solid rgba(42, 26, 30, .07); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.look { display: grid; grid-template-columns: 26px 70px 1fr auto; align-items: center; gap: .6rem; padding: .55rem .8rem; font-size: .74rem; border-bottom: 1px solid #F3EEE6; opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * .1s); }
.look:last-child { border-bottom: 0; }
.panel.play .look { opacity: 1; transform: none; }
.look__sw { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
.look__fn { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7A6662; }
.look__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { font-size: .6875rem; font-weight: 600; padding: .2rem .5rem; border-radius: 4px; white-space: nowrap; }
.status--ok { background: #E4EEE3; color: #2F5C39; }
.status--trial { background: #F5EBD3; color: #7A5A1E; }
.status--late { background: #F6DDE3; color: var(--maroon); }
.stackbar { display: flex; margin: .8rem; height: 26px; border-radius: 6px; overflow: hidden; }
.stackbar span { width: var(--w); background: var(--c); display: grid; place-items: center; font-size: .6875rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.stackbar span:nth-child(3), .stackbar span:nth-child(4) { color: #5B4A45; }
.stackbar span:nth-child(2) { transition-delay: .15s; } .stackbar span:nth-child(3) { transition-delay: .3s; } .stackbar span:nth-child(4) { transition-delay: .45s; }
.panel.play .stackbar span { transform: scaleX(1); }
@media (max-width: 420px) { .look { grid-template-columns: 22px 1fr auto; } .look__fn { display: none; } }

.shagun { display: grid; gap: 12px; }
@media (min-width: 620px) { .shagun { grid-template-columns: 1fr 1.4fr; } }
.donut--split text { font-size: 8px; }
.envs { display: grid; gap: .6rem; padding: .9rem; }
.env { display: grid; grid-template-columns: 54px 1fr 40px; align-items: center; gap: .6rem; font-size: .7rem; }
.env__amt { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--maroon); }
.env b { text-align: right; font-weight: 600; font-size: .6875rem; color: var(--muted); }
.panel.play .env .meter > span { transform: scaleX(1); transition-delay: calc(var(--i) * .12s); }
.env-total { display: flex; justify-content: space-between; align-items: center; margin: 0 .9rem .9rem; padding-top: .6rem; border-top: 1px dashed rgba(42, 26, 30, .12); font-size: .6875rem; color: var(--muted); }
.env-total strong { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }

.ros { border: 1px solid rgba(42, 26, 30, .07); border-radius: 10px; overflow: hidden; }
.act { display: grid; grid-template-columns: 40px 80px 1fr auto; align-items: center; gap: .7rem; padding: .62rem .8rem; font-size: .74rem; border-bottom: 1px solid #F3EEE6; }
.act:last-child { border-bottom: 0; }
.act time { font-family: var(--serif); font-weight: 600; font-size: .95rem; color: var(--maroon); }
.act__bar { height: 8px; border-radius: 4px; background: #F1EADF; position: relative; overflow: hidden; }
.act__bar::after { content: ""; position: absolute; inset: 0; width: calc(var(--len) * 2.4); max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--maroon)); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); transition-delay: calc(var(--i) * .12s); }
.panel.play .act__bar::after { transform: scaleX(1); }
.act__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .act { grid-template-columns: 36px 1fr auto; } .act__bar { display: none; } }
.now-playing { display: flex; align-items: center; gap: .7rem; margin-top: 12px; padding: .65rem .85rem; border-radius: 10px; background: var(--ink); color: rgba(253, 251, 247, .85); font-size: .72rem; }
.now-playing strong { color: var(--tan); }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.eq i { width: 3px; height: 100%; background: var(--gold); border-radius: 1px; transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.25s; } .eq i:nth-child(3) { animation-delay: -.5s; } .eq i:nth-child(4) { animation-delay: -.75s; }
.prio--ok { background: #E4EEE3; color: #2F5C39; }

/* ============ Bonus: Save the Date ============ */
.h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem; color: var(--maroon); }
.bonus { display: grid; gap: 3rem; align-items: center; margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.8rem, 4vw, 3.2rem); border-radius: 28px; background: linear-gradient(140deg, #FFFFFF, #F7EEDF); border: 1px solid rgba(197, 160, 89, .35); }
@media (min-width: 900px) { .bonus { grid-template-columns: 1fr 1.05fr; } }
.bonus__copy p:not(.eyebrow) { color: var(--muted); margin: 0 0 1.2rem; }
.bonus__copy em { color: var(--ink); }
.bonus__list { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: .5rem; font-size: 1rem; }
.bonus__list li { display: flex; gap: .5rem; align-items: center; }
.bonus__list .ico { color: var(--gold-d); }
.bonus__fan { position: relative; height: clamp(300px, 46vw, 440px); }
.bonus__fan .card { position: absolute; left: 50%; top: 50%; width: clamp(150px, 26vw, 230px); height: auto; border-radius: 10px; box-shadow: var(--shadow-l); transform: translate(-50%, -50%); transition: transform 1.2s var(--ease); }
.bonus__fan.in .card--l { transform: translate(-112%, -46%) rotate(-9deg); }
.bonus__fan.in .card--r { transform: translate(12%, -46%) rotate(9deg); }
.bonus__fan.in .card--c { transform: translate(-50%, -52%); }
.bonus__fan .card--c { z-index: 2; }
@media (hover: hover) {
  .bonus__fan.in:hover .card--l { transform: translate(-122%, -46%) rotate(-12deg); }
  .bonus__fan.in:hover .card--r { transform: translate(22%, -46%) rotate(12deg); }
}

/* ============ Pricing extras ============ */
.price-note { font-family: var(--sans); font-size: .8125rem; font-weight: 400; letter-spacing: .02em; color: rgba(253, 251, 247, .78); margin-left: .35rem; white-space: nowrap; }
.plan:not(.plan--featured) .price-note { color: var(--muted); }
.plan__each { font-family: var(--sans); font-size: .8125rem; letter-spacing: .04em; color: var(--muted); font-weight: 500; margin-left: .3rem; }
.plan__select-label { font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7A6662; margin-bottom: .4rem; }
.plan__select { width: 100%; min-height: 46px; margin-bottom: 1.2rem; padding: .6rem 2.2rem .6rem .9rem; border-radius: 12px; border: 1px solid #8F8579; background: var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23876B0C' stroke-width='1.6' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center / 16px; font: inherit; font-size: .88rem; color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ============ Free checklist ============ */
.free { padding: var(--section-y) 0; background: linear-gradient(160deg, #F7EEDF, var(--tan)); }
.free__grid { display: grid; gap: 2.5rem; align-items: center; }
.free__points { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; gap: .6rem; font-size: 1rem; color: #4F3F3B; }
.free__points li { display: flex; align-items: center; gap: .6rem; }
.free__points .ico { color: var(--maroon); width: 18px; height: 18px; }
@media (min-width: 900px) { .free__grid { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.free__copy p:not(.eyebrow) { color: #4F3F3B; max-width: 52ch; }
.free__small { font-size: .95rem; }
.free__form { display: grid; gap: 1rem; padding: clamp(1.5rem, 4vw, 2.2rem); border-radius: 24px; background: var(--white); box-shadow: var(--shadow-m); }
.field { display: grid; gap: .35rem; }
.field label { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5B4A45; }
.field label small { font-size: .8125rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: #7A6662; }
.field input { height: 52px; min-height: 52px; padding: .7rem .9rem; border-radius: 14px; border: 1px solid #8F8579; background: #fff; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field input:focus { border-color: var(--maroon); box-shadow: 0 0 0 4px rgba(135, 107, 12, .1); }
.field input:focus-visible, .plan__select:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: #B03A58; }
.field__err { font-size: .8125rem; color: #B03A58; min-height: 0; }
.free__ok { margin: 0; text-align: center; font-family: var(--serif); font-size: 1.2rem; color: var(--maroon); }

/* ============ CTA / footer extras ============ */
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }
.btn--outline-light { border: 1px solid rgba(253, 251, 247, .5); color: var(--ivory); }
.btn--outline-light:hover { background: var(--ivory); color: var(--maroon); }
/* Brand on its own row, then the four link columns two by two (four across from 1000px); brand joins the row from 1280px. */
.footer__grid { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; column-gap: 1.5rem; } }
@media (min-width: 1280px) { .footer__grid { grid-template-columns: 17.5rem repeat(5, minmax(0, 1fr)); } .footer__brand { grid-column: auto; } }
@media (min-width: 1280px) { .footer .footer__brand .logo { flex-direction: column; align-items: flex-start; gap: .5rem; } }
.footer nav.footer__col { display: grid; gap: .55rem; align-content: start; }
.footer__col p { margin: 0 0 .6rem; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.footer__social { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; color: #5C4048; }
.footer__social:hover { color: var(--maroon); }

@media (prefers-reduced-motion: reduce) {
  .bonus__fan .card--l { transform: translate(-112%, -46%) rotate(-9deg); }
  .bonus__fan .card--r { transform: translate(12%, -46%) rotate(9deg); }
  .eq i, .mini-wave i, .mini-stars i { animation: none !important; }
}

/* bar chart: fixed group height so % bar heights resolve */
.bars { height: auto; padding-bottom: 28px; background-size: 100% clamp(140px, 22vw, 200px); background-position: 0 1rem; }
.bar-g { height: clamp(140px, 22vw, 200px); }
@media (min-width: 980px) { .showcase__stage { min-height: 640px; } }
@media (max-width: 600px) {
  .bonus__fan.in .card--l { transform: translate(-96%, -46%) rotate(-8deg); }
  .bonus__fan.in .card--r { transform: translate(-4%, -46%) rotate(8deg); }
}
@media (max-width: 899px) { .plan--featured { order: -1; } }

/* ============ Collection: kit feature + single-planner rail ============ */
.kit-feature {
  position: relative; overflow: hidden; display: grid; gap: 2.5rem; align-items: center;
  padding: clamp(1.8rem, 4.5vw, 3.5rem); border-radius: 30px; color: var(--ivory);
  background: radial-gradient(90% 120% at 100% 0%, #977710 0%, var(--maroon) 45%, var(--maroon-d) 100%);
  box-shadow: var(--shadow-l);
}
@media (min-width: 960px) { .kit-feature { grid-template-columns: 1fr 1.08fr; gap: 3rem; } }
.kit-feature__mandala { position: absolute; width: 640px; height: 640px; right: -180px; top: -200px; color: var(--gold); opacity: .16; animation: spin 150s linear infinite; pointer-events: none; }
.kit-feature__copy { position: relative; }
.kit-feature__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .4rem .9rem; border-radius: 99px; background: rgba(197, 160, 89, .18); border: 1px solid rgba(197, 160, 89, .45); color: var(--tan); font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.kit-feature__eyebrow .ico { width: 12px; height: 12px; color: var(--gold); }
.kit-feature h3 { margin: 0 0 .6rem; font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.01em; }
.kit-feature__tag { margin: 0 0 1.6rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: rgba(253, 251, 247, .85); }
.kit-feature__chips { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.2rem; font-size: .95rem; }
.kit-feature__chips li { display: flex; align-items: center; gap: .5rem; }
.kit-feature__chips .ico { width: 16px; height: 16px; color: var(--gold); flex: none; }
@media (max-width: 420px) { .kit-feature__chips { grid-template-columns: 1fr; } }
.kit-feature__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(242, 224, 181, .2); }
.kit-feature__price { font-variant-numeric: lining-nums tabular-nums; margin: 0; font-family: var(--serif); font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--tan); }
.kit-feature__price span { font-size: .55em; }
.kit-feature__price s { font-size: 1.05rem; font-weight: 400; color: rgba(253, 251, 247, .5); margin-left: .3rem; }
.kit-feature__more { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); border-bottom: 1px solid rgba(253, 251, 247, .4); padding: .3rem 0; transition: border-color .2s, color .2s; }
.kit-feature__more:hover { color: var(--tan); border-color: var(--tan); }

.kit-feature__art { position: relative; padding: 0 0 1.5rem; }
.kit-window { transform: translateY(24px); opacity: 0; transition: transform 1.1s .15s var(--ease), opacity 1.1s .15s var(--ease); }
.kit-feature.in .kit-window { transform: none; opacity: 1; }
.kit-window .window__bar span { color: #7A6662; }
.kit-window__body { display: grid; grid-template-columns: 150px 1fr; height: 300px; color: var(--ink); }
.tabroll { position: relative; overflow: hidden; background: #FAF5EC; border-right: 1px solid rgba(42, 26, 30, .06); -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.tabroll ul { list-style: none; margin: 0; padding: 0 .7rem; animation: tabroll 38s linear infinite; }
.tabroll li { padding: .42rem .6rem; margin-bottom: 3px; border-radius: 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6B5A57; background: var(--white); border: 1px solid rgba(42, 26, 30, .05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabroll li:nth-child(3n+1) { border-left: 2px solid var(--gold); }
.kit-feature:hover .tabroll ul { animation-play-state: paused; }
@keyframes tabroll { to { transform: translateY(-100%); } }
.kit-window__main { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.kit-window__main .sheet-title { margin: 0; }
.kit-window__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.kit-window__tiles .tile__big { font-size: 1.9rem; }
.kit-window__chart { flex: 1; display: flex; align-items: center; justify-content: space-around; gap: 1rem; padding: .6rem; border-radius: 12px; background: var(--ivory); border: 1px solid rgba(42, 26, 30, .06); }
.kit-donut { width: 84px; height: 84px; }
.kit-feature.in .kit-donut .donut__val { stroke-dasharray: 62 100; transition-delay: .7s; }
.kit-bars { position: static; height: 70px; gap: 7px; }
.kit-bars i { width: 12px; }
.kit-feature.in .kit-bars i { transform: scaleY(1); transition-delay: calc(.7s + var(--d, 0s)); }
.kit-bars i:nth-child(2) { --d: .08s; } .kit-bars i:nth-child(3) { --d: .16s; } .kit-bars i:nth-child(4) { --d: .24s; } .kit-bars i:nth-child(5) { --d: .32s; background: var(--maroon); }
.kit-feature__std { position: absolute; right: -6px; bottom: -4px; width: clamp(96px, 13vw, 140px); height: auto; border-radius: 8px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .45); transform: rotate(8deg) translateY(30px); opacity: 0; transition: transform 1.1s .45s var(--ease), opacity 1.1s .45s var(--ease); }
.kit-feature.in .kit-feature__std { transform: rotate(6deg); opacity: 1; }
@media (max-width: 520px) {
  .kit-window__body { grid-template-columns: 110px 1fr; height: 260px; }
  .tabroll li { font-size: .6875rem; }
  .kit-window__chart .kit-bars { display: none; }
  .kit-feature__std { width: 84px; right: -4px; }
}

.rail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: clamp(3.5rem, 7vw, 5rem) 0 1.5rem; }
.rail-head .eyebrow { margin-bottom: .5rem; }
.rail-head__sub { margin: 0; color: var(--muted); font-size: 1rem; }
.rail-nav { display: flex; gap: .6rem; flex: none; }
.rail-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(197, 160, 89, .5); color: var(--maroon); background: var(--white); transition: background-color .25s, color .25s, border-color .25s, opacity .25s; }
.rail-btn:hover:not(:disabled) { background: var(--maroon); color: var(--ivory); border-color: var(--maroon); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.ico--flip { transform: rotate(180deg); }
@media (max-width: 600px) { .rail-nav { display: none; } }

.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(320px, 82vw); gap: 1.25rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: .5rem max(16px, calc((100vw - 1200px) / 2)) 1.5rem;
  scroll-padding-inline: max(16px, calc((100vw - 1200px) / 2));
}
.rail::-webkit-scrollbar { display: none; }
.rail { scroll-padding-right: 6rem; }
.rail:focus-visible { outline-offset: -4px; }
.rail .product { scroll-snap-align: start; opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.rail .product.in { opacity: 1; transform: none; }
html:not(.js) .rail .product { opacity: 1; transform: none; }
.rail .product__art { height: 170px; }
.rail .product__body { flex: 1; }
.product__foot { margin-top: auto; padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: .8rem; border-top: 1px solid var(--line); }
.product__meta { margin-bottom: .6rem; }
.product__price { font-variant-numeric: lining-nums tabular-nums; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--maroon); }
.product--free .product__price { color: #2F5C39; }
.product--soon .product__price { font-family: var(--sans); font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7A6662; }
.rail-progress { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; max-width: 320px; margin: 0 auto; }
.rail-progress span { display: block; height: 100%; width: 30%; background: var(--gold); border-radius: inherit; transform: translateX(var(--x, 0)); transition: transform .15s linear; }

@media (prefers-reduced-motion: reduce) {
  .tabroll ul { animation: none !important; }
  .kit-window, .kit-feature__std, .rail .product { opacity: 1; transform: none; }
}
.window__bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kit-feature__std { z-index: 2; }
.kit-window__tiles .tile__label { white-space: nowrap; }
@media (max-width: 520px) {
  .kit-feature__std { display: none; }
  .kit-window__main { padding: .8rem; }
  .kit-window__main .sheet-title { letter-spacing: .22em; }
  .kit-window__tiles { grid-template-columns: 1fr; gap: .4rem; }
  .kit-window__tiles .tile { padding: 8px 10px; flex-direction: row; justify-content: space-between; align-items: center; }
  .kit-window__tiles .tile__big { font-size: 1.4rem; }
  .kit-donut { width: 70px; height: 70px; }
}

/* ============ Floating WhatsApp button ============ */
.wa-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: .5rem; }
.wa-float__label {
  display: none; pointer-events: none; white-space: nowrap; padding: .35rem .8rem; border-radius: 999px;
  background: var(--white); border: 1px solid rgba(197, 160, 89, .6); color: var(--gold-d);
  font-family: var(--serif); font-size: 1rem; box-shadow: var(--shadow-s);
  opacity: 0; transform: translateX(8px); transition: opacity .2s, transform .2s;
}
.wa-float__disc {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #D4AF37, #C5A059 50%, #A8832F);
  box-shadow: 0 0 0 2px #fff, 0 10px 24px -6px rgba(74, 28, 40, .45);
  transition: transform .2s;
}
.wa-float__disc::after { /* soft pulse */
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(197, 160, 89, .4); pointer-events: none;
  z-index: -1; animation: wa-ping 2.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.wa-float__disc svg { width: 28px; height: 28px; fill: #2A1A1E; position: relative; } /* ink glyph: white on gold fails 3:1 */
.wa-float:hover .wa-float__disc, .wa-float:focus-visible .wa-float__disc { transform: scale(1.05); }
.wa-float:focus-visible .wa-float__disc { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--gold); }
@keyframes wa-ping { 75%, 100% { transform: scale(1.7); opacity: 0; } }
@media (min-width: 768px) {
  .wa-float { right: 24px; bottom: 24px; }
  .wa-float__disc { width: 56px; height: 56px; }
  .wa-float__label { display: block; }
  .wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-float__disc::after { animation: none; } }
@media print { .wa-float { display: none; } }

/* ============ Logo mark ============ */
.logo__mark { height: 46px; width: auto; max-width: none; flex-shrink: 0; object-fit: contain; align-self: center; margin-right: .2rem; }
.logo__mark--lg { height: 54px; }
.logo__badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: .35rem .5rem; border-radius: 14px; background: var(--ivory); margin-right: .5rem; }
@media (max-width: 480px) { .logo__mark { height: 38px; } .logo__mark--lg { height: 46px; } }
.logo--light { align-items: center; }
.footer__social--next { margin-left: 1.25rem; }
.footer__connect { margin-top: 1.25rem; max-width: 17rem; }
.soc__head { margin: 0 0 .7rem; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.footer__socials { list-style: none; margin: 0; padding: 0; }
.soc { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; color: #4A1C28; transition: color .25s var(--ease); }
.soc:hover, .soc:focus-visible { color: var(--maroon); }
.soc:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; border-radius: 8px; }
.soc__logo { flex: none; width: 24px; height: 24px; object-fit: contain; transition: transform .3s var(--ease); }
.soc:hover .soc__logo { transform: scale(1.08); }
.soc__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.soc__name { font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.soc__handle { font-size: .82rem; overflow-wrap: anywhere; }
.soc .soc__go { width: 12px; height: 12px; margin-left: auto; color: var(--maroon); opacity: 0; transform: translateX(-4px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.soc:hover .soc__go, .soc:focus-visible .soc__go { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .soc, .soc__logo, .soc .soc__go { transition: none; } .soc:hover .soc__logo { transform: none; } }

/* ============ Cart button ============ */
.nav__cart { position: relative; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--maroon); transition: background-color .2s; }
.nav__cart:hover { background: rgba(135, 107, 12, .08); }
.nav__cart .ico { width: 22px; height: 22px; }
.nav__cart + .nav__toggle { margin-left: 0; }
@media (max-width: 979px) { .nav__cart { margin-right: -.9rem; } }
.nav__cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold-grad); color: var(--on-gold); font-size: .8125rem; font-weight: 600; line-height: 18px; text-align: center; }
.nav__cart-count[hidden] { display: none; }
@media (min-width: 980px) { .nav__cart { margin-left: 0; } }

/* ============ Supported payment apps ============ */
.payapps { margin-top: 2.25rem; }
.payapps__title { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.25rem; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.payapps__title::before, .payapps__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.payapps__title::after { transform: scaleX(-1); }
.payapps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }
.payapps__list li { display: grid; place-items: center; width: 118px; height: 52px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.payapps__list img { display: block; width: auto; height: auto; max-width: 92px; max-height: 28px; object-fit: contain; }

/* ============ Polish pass: section dividers, link underline, mobile hero ============ */
/* Where two ivory sections meet: hairline with a small rotated gold square */
.collection::before, .included::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1200px, 100% - 32px); height: 1px; background: var(--line);
}
.collection::after, .included::after {
  content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  background: var(--gold); transform: rotate(45deg); pointer-events: none;
}
.included::after { top: -4px; }

/* Gold underline draws in on text links */
.footer a:not(.logo):not(.btn), .link-arrow, .panel__buy, .mega__all {
  background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: color .2s, background-size .3s var(--ease);
}
.footer a:not(.logo):not(.btn):hover, .link-arrow:hover, .panel__buy:hover, .mega__all:hover { background-size: 100% 1px; }

@media (max-width: 480px) {
  .hero { padding-bottom: 2.5rem; }
  .hero .eyebrow { letter-spacing: .12em; font-size: .8125rem; gap: .5rem; white-space: nowrap; }
  .hero .eyebrow__line { width: 24px; }
  .hero__ctas { display: grid; gap: .75rem; }
  .hero__ctas .btn { width: 100%; }
  .hero__trust { font-size: .8125rem; gap: .5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js [data-stagger] > li { opacity: 1; transform: none; }
  .btn:active { transform: none; }
  .footer a, .link-arrow, .panel__buy, .mega__all { transition: none; }
}

/* Header: spread the links evenly between the logo and the CTA instead of pushing them all to the right (one huge gap). */
@media (min-width: 980px) {
  .nav__links { flex: 1; justify-content: space-evenly; gap: 1rem; margin-left: 0; padding-inline: clamp(0rem, 1.6vw, 2.5rem); }
  .nav__links > a, .nav__links .nav__trigger, .nav__cta { white-space: nowrap; }
}

/* ============ WhatsApp buttons: black & gold, with the real WhatsApp logo ============ */
.btn--wa {
  position: relative; overflow: hidden; isolation: isolate; gap: .8rem; color: #E9C46A;
  background: linear-gradient(180deg, #1d1d1d 0%, #0c0c0c 55%, #000 100%);
  border: 1px solid #C5A059;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 226, 150, .3), inset 0 0 0 1px rgba(197, 160, 89, .16);
  text-shadow: 0 0 14px rgba(212, 175, 55, .35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s, color .25s;
}
.btn--wa::before { /* soft gold glass highlight on the top half */
  content: ""; position: absolute; inset: 0 0 50% 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 226, 150, .16), rgba(255, 226, 150, 0));
}
.btn--wa::after { /* gold sheen that sweeps across */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 30%; z-index: -1;
  background: linear-gradient(100deg, rgba(255, 222, 140, 0), rgba(255, 222, 140, .42), rgba(255, 222, 140, 0));
  transform: skewX(-18deg); animation: wa-sheen 5.5s ease-in-out infinite;
}
.btn__wa-ico { /* gold disc with a dark WhatsApp mark and a light ring: same look as the floating WhatsApp button */
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, #E6C469 0%, #C5A059 55%, #A8832F 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .92), 0 3px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn__wa-ico .ico { width: 19px; height: 19px; color: #2A1A1E; }
.btn--wa:hover { transform: translateY(-2px); color: #F6D77F; border-color: #E6C469; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .85), 0 0 0 4px rgba(212, 175, 55, .22), 0 0 26px rgba(212, 175, 55, .35), inset 0 1px 0 rgba(255, 226, 150, .4), inset 0 0 0 1px rgba(197, 160, 89, .25); }
.btn--wa:active { transform: translateY(0) scale(.98); }
.btn--wa:focus-visible { outline: 2px solid #E6C469; outline-offset: 3px; }
.plan .btn + .btn { margin-top: .7rem; }
.kit-feature__buy .btn--wa { margin-top: .1rem; }
@keyframes wa-sheen { 0%, 62% { left: -45%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .btn--wa::after { animation: none; display: none; } .btn--wa:hover { transform: none; } }

/* ============ "Instant access" label under prices ============ */
.instant { display: block; margin: .2rem 0 0; font-style: normal; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7A6662; line-height: 1.3; }
.instant--light { color: rgba(253, 251, 247, .8); }
.product__pricebox { display: grid; }
.plan .instant { margin: -.15rem 0 1rem; }

/* ============ Free checklist: Get it on WhatsApp card ============ */
.free__cta { display: grid; gap: 1rem; padding: clamp(1.5rem, 4vw, 2.2rem); border-radius: 24px; background: var(--white); box-shadow: var(--shadow-m); text-align: center; }
.free__cta-tag { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.free__cta-tag span { color: inherit; }
.free__cta-title { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600; line-height: 1.15; color: var(--ink); }
.free__cta-text { margin: 0; color: var(--muted); font-size: 1rem; }
.free__cta-alt { font-size: .8125rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.free__cta-alt:hover { color: var(--maroon); }

/* ============ Analytics consent banner (Europe/UK visitors only) ============ */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 80; max-width: 24rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-m); }
.consent p { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--muted); }
.consent a { color: var(--maroon); font-weight: 600; text-underline-offset: 2px; }
.consent__btns { display: flex; gap: .5rem; margin-top: .75rem; }
.consent__btns button { min-height: 36px; padding: .35rem 1.1rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.consent__btns button[data-consent="granted"] { background: var(--gold-grad); border-color: var(--gold); color: var(--on-gold); }
@media (max-width: 480px) { .consent { left: 12px; right: 12px; max-width: none; } }
@media print { .consent { display: none; } }

/* ============ Launch price: real regular price struck through + savings pill ============ */
.hero__was { margin: 0 .1rem 0 .15rem; font-size: .95rem; color: var(--muted); text-decoration-thickness: 1px; }
.hero__launch { display: inline-block; padding: .12rem .6rem; border-radius: 999px; border: 1px solid rgba(197, 160, 89, .6); background: rgba(197, 160, 89, .14); color: var(--gold-d); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; vertical-align: .12em; }
.save-pill { display: inline-flex; align-items: center; padding: .3rem .8rem; border-radius: 999px; border: 1px solid rgba(197, 160, 89, .6); background: rgba(197, 160, 89, .16); color: var(--gold-d); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: lining-nums tabular-nums; }
.save-line { margin: -.2rem 0 .9rem; }
.plan--featured .save-pill, .kit-feature .save-pill { background: rgba(242, 213, 138, .16); border-color: rgba(242, 213, 138, .55); color: #F4DC95; }
.kit-feature__buy .save-pill { align-self: center; }
.tag--live { background: rgba(197, 160, 89, .2); color: var(--gold-d); }
.product--live .product__price { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--maroon); letter-spacing: 0; text-transform: none; }


/* ============ Accessibility: focus visibility ============ */
.reviews__rail:focus-visible { outline: 2px solid var(--maroon); outline-offset: -4px; }
/* Footer links: >= 24px tall tap targets (WCAG 2.5.8) */
.footer__col a, .footer__social, .footer__base a { display: inline-block; padding-block: .3rem; }
.footer__social { display: inline-flex; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ============ Ivory refresh: foil medallions, gold frames, trust strip, sticky buy bar ============
   Tokens match the Instagram launch set. Gold (--gold) is for borders and decoration only; text uses --gold-d on light grounds
   and --gold-l on maroon. All frames and foil layers are pointer-events:none and aria-hidden. */
:root {
  --gold-l: #E3C887;
  --maroon-xd: #4D3C07;
  --ground: linear-gradient(180deg, #FDFBF7 0%, #F4EBDD 100%);
  --ground-maroon: radial-gradient(120% 90% at 50% 0%, #4A3A0C 0%, #2A2008 55%, #130F05 100%); /* near-black seal ground so the gold medallions read */
  --card-rule: 2px solid var(--maroon);
}

/* 1. Ground: ivory-to-sand wash on the plain sections (the alternating #F7F0E4 bands stay as they are) */
.statement, .collection, .pricing, .faq { background: var(--ground); }

/* 1b. Double gold frame on the hero (outer 1.5px gold, inner hairline). Starts below the floating nav. */
.hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
.hero::before { inset: 88px max(6px, calc((100% - 1260px) / 2)) 12px; border: 1.5px solid var(--gold); }
.hero::after { inset: 96px max(14px, calc((100% - 1260px) / 2 + 8px)) 20px; border: 1px solid rgba(197, 160, 89, .45); }
@media (max-width: 600px) { .hero::after { display: none; } .hero::before { inset: 84px 6px 8px; } }

/* 4. Logo badge: white ellipse with a gold ring */
.nav .logo__mark { height: 44px; margin-right: .45rem; }
@media (max-width: 480px) { .nav .logo__mark { height: 34px; } }

/* 5. White cards with a 2px maroon top rule */
.plan:not(.plan--featured), .faq details, .review { border-top: var(--card-rule); }
.plan--featured { outline: 1.5px solid var(--gold); outline-offset: -10px; }

/* 6. INSTANT ACCESS chip. Same label everywhere, now a gold-bordered maroon chip */
.instant { display: inline-block; width: fit-content; margin: .35rem 0 0; padding: .3rem .7rem; border: 1px solid var(--gold); border-radius: 999px; background: var(--maroon); color: var(--ivory); font-size: .8125rem; letter-spacing: .1em; line-height: 1; }
.instant--light { background: var(--maroon-xd); color: var(--ivory); }
.product--live .instant { padding: 0; border: 0; border-radius: 0; background: none; color: #7A6662; letter-spacing: .16em; }
.plan .instant { margin: -.15rem 0 1rem; }
.chip-instant { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--gold); border-radius: 999px; background: var(--maroon); color: var(--ivory); font: 600 .62rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }

/* 3. Hero: price chip row, one primary CTA, quiet link for the free checklist */
.hero__price { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.hero__price .chip-instant { margin-right: .25rem; }
.hero__price strong { margin-right: 0; }
.hero__ctas { align-items: center; gap: .85rem 1.6rem; margin-bottom: 0; }
.hero__alt { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .875rem; font-weight: 600; letter-spacing: .04em; color: var(--maroon); border-bottom: 1px solid rgba(135, 107, 12, .35); padding: .3rem 0; transition: border-color .2s; }
.hero__alt:hover { border-color: var(--maroon); }
.hero__alt .ico { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.hero__alt:hover .ico { transform: translateX(4px); }
.hero__title { font-size: clamp(2.9rem, 9vw, 4.4rem); }
@media (min-width: 980px) { .hero__title { font-size: clamp(3.4rem, 4.9vw, 4.4rem); } } /* 4.4rem cap: the headline column keeps the 1440px width on wider screens, and "Caterer? Planned." must still fit on one line there */
.hero__once { font-size: 1rem; color: var(--muted); }

/* 9. Trust strip: only what is true of every order (no counts) */
.trust { list-style: none; margin: 0; padding: 1rem 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.2rem; background: #fff; border-block: 1px solid rgba(197, 160, 89, .45); font-size: .8125rem; font-weight: 500; color: #4F3F3B; }
.trust li { display: inline-flex; align-items: center; gap: .55rem; }
.trust .ico { width: 20px; height: 20px; color: var(--gold-d); }

/* 2. Foil medallions */
.medallion { width: 72px; height: 72px; flex: none; margin-inline: auto; overflow: visible; }
.section-head > .medallion { margin-bottom: 1rem; }
.product__art { background: var(--ground-maroon); border-bottom: 1.5px solid var(--gold); }
.product__art .medallion { width: 108px; height: 108px; margin: 0; transition: transform .5s var(--ease); }
.product:hover .product__art .medallion { transform: scale(1.06) rotate(4deg); }
.rail .product__art { height: 170px; }

/* 7. Section dividers: hairline, gold diamond, hairline under each section heading; kicker rules either side of centred eyebrows */
.section-head::after { content: ""; display: block; width: min(240px, 60%); height: 11px; margin: 1.6rem auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 11'%3E%3Cpath d='M0 5.5h104M136 5.5h104' stroke='%23C5A059' stroke-width='1' fill='none' opacity='.7'/%3E%3Cpath d='M120 0.5l5 5-5 5-5-5z' fill='%23C5A059'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.eyebrow--center { align-items: center; gap: .9rem; }
.eyebrow--center::before, .eyebrow--center::after { content: ""; width: 28px; height: 1px; background: var(--gold); }
.reviews .section-head::after, .faq .section-head::after { margin-top: 1.4rem; }

/* 10. Closing CTA: maroon ground, double gold frame, sunburst seal */
.cta { background: var(--ground-maroon); }
.cta::before, .cta::after { content: ""; position: absolute; pointer-events: none; }
.cta::before { inset: 14px max(6px, calc((100% - 1260px) / 2)); border: 1.5px solid var(--gold-l); }
.cta::after { inset: 23px max(14px, calc((100% - 1260px) / 2 + 8px)); border: 1px solid rgba(227, 200, 135, .45); }
@media (max-width: 600px) { .cta::before { inset: 8px 6px; } .cta::after { display: none; } }
.cta__seal { width: 88px; height: 88px; margin-bottom: .5rem; }
.cta__script { color: var(--tan); }

/* 8. Sticky mobile buy bar. Hidden until the hero CTA has scrolled away; hidden again over the pricing and closing sections. */
.buybar { display: none; }
@media (max-width: 759px) {
  .buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 16px calc(.65rem + env(safe-area-inset-bottom)); background: var(--maroon-xd); border-top: 1.5px solid var(--gold); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .45); transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
  .buybar.is-on { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
  .buybar__txt { margin: 0; display: grid; line-height: 1.2; color: var(--ivory); }
  .buybar__name { font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tan); }
  .buybar strong { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--ivory); font-variant-numeric: lining-nums tabular-nums; }
  .buybar .btn { min-height: 48px; padding-inline: 1.4rem; }
  .has-buybar .wa-float { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .has-buybar .footer { padding-bottom: 8rem; }
}
@media (prefers-reduced-motion: reduce) { .buybar, .buybar.is-on { transition: none; } .product__art .medallion, .hero__alt .ico { transition: none; } }

/* 11. Watercolor layer (stage A): blush + sage accents, a paper grain and painted-look florals (#wc-corner in the sprite).
   Decorative only: aria-hidden, no animation, never behind body text. Maroon, gold and the black/gold WhatsApp buttons are untouched. */
:root {
  --blush: #F6E1E1;
  --blush-l: #FBF0EE;
  --blush-d: #E8B9BD;
  --sage: #A9B8A2;
  --sage-d: #5F7358;           /* text-safe sage (5:1 on ivory) */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ground: var(--paper-grain), linear-gradient(180deg, #FDFBF7 0%, #F6ECE4 100%);
}
.wc { position: absolute; z-index: 0; width: clamp(180px, 28vw, 380px); aspect-ratio: 1; height: auto; pointer-events: none; opacity: 1; }
.wc--tl { top: 0; left: 0; }
.wc--tr { top: 0; right: 0; transform: scaleX(-1); }
.wc--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.wc--br { bottom: 0; right: 0; transform: scale(-1, -1); }
.wc--sm { width: clamp(130px, 19vw, 270px); opacity: 1; }
.hero .wc { --w: clamp(190px, 22vw, 286px); width: var(--w); top: calc(var(--w) * -.21); left: calc(var(--w) * -.21); } /* scaled and pushed off the corner so no bloom or leaf reaches the eyebrow or headline */
.hero {
  background:
    var(--paper-grain),
    radial-gradient(45% 45% at 6% 4%, rgba(232, 185, 189, .5), transparent 70%),
    radial-gradient(40% 40% at 98% 96%, rgba(169, 184, 162, .3), transparent 70%),
    radial-gradient(60% 50% at 85% 20%, rgba(242, 224, 181, .5), transparent 70%),
    var(--ivory);
}
.free { position: relative; overflow: hidden; background: var(--paper-grain), linear-gradient(160deg, var(--blush-l), #F8EBD8); }
.free__grid, .cta__inner { position: relative; z-index: 1; }
.reviews { position: relative; background: var(--paper-grain), var(--blush-l); }
.plan { background: linear-gradient(180deg, #fff, #FFFAF6); border-color: rgba(232, 185, 189, .65); }
.plan--featured { background: var(--maroon); border-color: var(--maroon); }
.product__art { background: radial-gradient(90% 90% at 30% 20%, #FFFBEF, #F6EBCB 55%, #E6CF8C); } /* champagne-to-gold (was a pink wash) */
.product__art::after { content: ""; position: absolute; inset: auto -18px -22px auto; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, rgba(211, 175, 55, .38), transparent 70%); pointer-events: none; }
.cta .wc { opacity: .9; }
@media (max-width: 600px) { .wc { width: 150px; } .wc--sm { width: 110px; } .hero .wc { --w: 170px; } }
/* Hero couple: stands in the left margin beside the gold frame at full strength. Wide screens only: the hero grid shifts right to free the column, so no text ever sits behind it. */
.hero__couple { display: none; }
@media (min-width: 1280px) {
  /* left edge fixed (couple art stands in the left margin); right edge lands on the same line as the header and every other container, so both outer margins match */
  /* --frame-l is where the gold frame's left line sits (same formula as .hero::before). Wide screens push the frame inward, so the headline column and the couple art follow it: the text always starts 186px inside the frame line and the art keeps its position relative to it. At 1440px and below the max() keeps the original 276px / 4px. */
  .hero { --frame-l: max(6px, calc((100% - 1260px) / 2)); }
  .hero__grid { width: auto; margin-left: max(276px, calc(var(--frame-l) + 186px)); margin-right: max(16px, calc((100% - 1200px) / 2)); }
  .hero__couple { display: block; position: absolute; z-index: 2; left: max(4px, calc(var(--frame-l) - 86px)); top: 57%; transform: translateY(-50%); width: 224px; height: auto; pointer-events: none; filter: drop-shadow(0 14px 16px rgba(74, 28, 40, .18)); }
}
/* Free checklist: original watercolor-style couple as a middle column between the copy and the card. Wide screens only; its negative margins let it stand taller than the row without growing the section. */
.free__couple { display: none; }
@media (min-width: 1100px) {
  .free__grid { grid-template-columns: 1fr 230px 1fr; gap: 2.5rem; }
  .free__couple { display: block; width: 236px; height: auto; align-self: end; margin-block: -4.5rem -3.5rem; pointer-events: none; filter: drop-shadow(0 14px 16px rgba(74, 28, 40, .16)); }
}
/* Footer base */
.footer { position: relative; }
.footer .container { position: relative; z-index: 1; }

/* ============ Hero copy polish: balanced lede, tidy price row, high-contrast primary CTA ============ */
.hero__lede { max-width: 42ch; line-height: 1.65; text-wrap: balance; }
.hero__price { margin-bottom: 1.5rem; }
.hero__once { flex-basis: 100%; margin-top: .15rem; }
.hero__cta {
  position: relative; overflow: hidden; isolation: isolate; min-height: 62px; padding: 1.1rem 2.6rem; font-size: .92rem; letter-spacing: .14em;
  background: var(--gold-grad);
  box-shadow: 0 22px 38px -16px rgba(135, 107, 12, .75), 0 0 0 1px rgba(197, 160, 89, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.hero__cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none; transform: translateX(-160%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); animation: heroSheen 5s ease-in-out 1.8s infinite; }
.hero__cta:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 28px 44px -16px rgba(135, 107, 12, .85), 0 0 0 1px rgba(214, 178, 100, .9), 0 0 0 5px rgba(197, 160, 89, .2), inset 0 1px 0 rgba(255, 255, 255, .28); }
@keyframes heroSheen { 0%, 55% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(520%) skewX(-20deg); } }
@media (min-width: 601px) {
  .hero__ctas { flex-direction: column; align-items: flex-start; gap: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .hero__cta::after { animation: none; display: none; } .hero__cta, .hero__cta:hover { transition: none; transform: none; } }

/* Hero assurance list and CTA band copy */
.hero__assure { flex-direction: column; flex-wrap: nowrap; gap: .55rem; margin-top: 1.5rem; max-width: 60ch; font-size: .95rem; color: var(--ink); }
.hero__assure li { align-items: flex-start; line-height: 1.4; }
.hero__assure li { display: block; position: relative; padding-left: 1.65rem; } /* text and link flow as one sentence */
.hero__assure .ico { position: absolute; left: 0; top: .2rem; margin: 0; }
.hero__assure a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }
.cta__sub { max-width: 46ch; margin: .9rem auto 1.75rem; color: rgba(253, 251, 247, .84); text-wrap: balance; }
.cta__note { margin: 1.1rem 0 0; font-size: .9rem; color: rgba(253, 251, 247, .72); }

/* Homepage keyword paragraph: quiet body copy under the collection heading */
.seo-about { max-width: 64ch; margin: 1rem auto 0; font-size: 1rem; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.seo-about a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }

/* ============ Mobile + accessibility pass ============ */
/* Header: the script wordmark scales on phones so the cart and menu buttons are never squeezed or clipped. */
.nav__cart, .nav__toggle { flex: none; }
.logo { min-width: 0; }
@media (max-width: 479px) {
  .logo__brand { font-size: clamp(1.35rem, 6.2vw, 1.85rem); }
  .nav__inner { gap: .5rem; padding-left: 1rem; }
  .logo { gap: .4rem; }
}

/* Hero copy may shrink and wrap (text zoom, small screens) instead of being clipped. */
.hero__grid > *, .hero__copy { min-width: 0; }
.hero__title, .hero__lede { overflow-wrap: break-word; }
@media (max-width: 480px) { .hero .eyebrow { font-size: .8125rem; white-space: normal; } }

/* Label text never goes below 12px. (The sample dashboard mock-ups stay as drawn: they are a picture.) */
.eyebrow, .mega__label, .mega__feature-tag, .tag, .product__num, .footer__col p, .kit-feature__eyebrow,
.soc__head, .soc__name, .instant, .free__cta-tag, .hero__launch, .save-pill, .plan__ribbon, .buybar__name,
.product--soon .product__price { font-size: .8125rem; }
.instant { white-space: nowrap; }

/* Contrast */
.panel__buy { color: #4A1C28; }
.footer__base { font-size: .875rem; }
.footer__base a { color: #4A1C28; }
.cta__note { color: rgba(253, 251, 247, .86); }

/* Touch targets: at least 44px for links that stand on their own. */
.footer nav.footer__col { gap: 0; }
.footer__col a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
.footer__base a { display: inline-flex; align-items: center; min-height: 44px; }
.free__cta-alt, .kit-feature__more, .hero__alt { display: inline-flex; align-items: center; min-height: 44px; }
.mobile-menu a.mm-link { padding: .65rem .75rem; font-size: 1.25rem; min-height: 48px; display: flex; align-items: center; }
.mobile-menu .btn { position: sticky; bottom: 0; }


/* WhatsApp float: a little smaller on phones, and it steps aside while you scroll down to read. */
@media (max-width: 759px) {
  .wa-float { right: 12px; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .wa-float__disc { width: 46px; height: 46px; }
  .wa-float.is-away { opacity: 0; transform: translateY(14px); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

.chip-instant { font-size: .8125rem; }
#main:focus { outline: none; }

/* ============ Metallic gold foil ============
   Big gold surfaces use --gold-foil (polished gradient with a specular highlight); buttons and pills use --gold-grad.
   Inside a foil band the light-text tokens flip to warm near-black so every child rule reads dark on gold. The deep gold
   #876B0C stays for text and borders on ivory only. */
.marquee, .cta, .kit-feature, .mega__feature, .mm-feature, .plan--featured, .buybar {
  --ivory: #1A1817; --tan: #2A2008; --gold-l: #2A2008; --gold: #3F3006;
  background: var(--gold-foil); color: var(--foil-ink);
}
/* Inner light mock-up keeps the light theme */
.kit-window { --ivory: #FDFBF7; --tan: #F2E0B5; --gold: #C5A059; --gold-l: #E3C887; color: var(--ink); }

.marquee { box-shadow: var(--gold-foil-edge); }
.kit-feature { box-shadow: var(--shadow-l), var(--gold-foil-edge); }
.kit-feature__mandala, .cta__mandala { opacity: .1; }
.kit-feature__eyebrow { background: rgba(26, 24, 23, .08); border-color: var(--foil-line); color: var(--foil-ink); }
.kit-feature__eyebrow .ico, .kit-feature__chips .ico { color: var(--foil-ink); }
.kit-feature__tag { color: var(--foil-ink-2); }
.kit-feature__buy { border-top-color: var(--foil-line); }
.kit-feature__price, .kit-feature h3 { color: var(--foil-ink); }
.kit-feature__price s { color: var(--foil-ink-2); }
.kit-feature__more { color: var(--foil-ink); border-bottom-color: rgba(26, 24, 23, .5); }
.kit-feature__more:hover { color: var(--foil-ink); border-color: var(--foil-ink); }
.price-note { color: var(--foil-ink-2); }
.plan:not(.plan--featured) .price-note { color: var(--muted); }

.plan--featured { border-color: rgba(26, 24, 23, .22); box-shadow: var(--shadow-l), var(--gold-foil-edge); outline: 1px solid rgba(26, 24, 23, .22); outline-offset: -10px; }
.plan--featured:hover { border-color: rgba(26, 24, 23, .4); }
.plan--featured h3, .plan--featured .plan__price { color: var(--foil-ink); }
.plan--featured .plan__desc, .plan--featured .plan__price s { color: var(--foil-ink-2); }
.plan--featured li .ico { color: var(--foil-ink); }

.cta::before { border-color: rgba(26, 24, 23, .4); }
.cta::after { border-color: rgba(26, 24, 23, .22); }
.cta__script, .cta .h2, .cta .h2 em { color: var(--foil-ink); }
.cta .h2 em { color: var(--foil-ink-2); }
.cta__sub, .cta__note { color: var(--foil-ink); }
.cta .wc { opacity: .75; }
.btn--outline-light { border: 1.5px solid rgba(26, 24, 23, .6); color: var(--foil-ink); }
.btn--outline-light:hover { background: #1A1817; color: #F8E7A6; border-color: #1A1817; }

.mega__feature { box-shadow: var(--gold-foil-edge); }
.mega__feature:hover { box-shadow: var(--shadow-m), var(--gold-foil-edge); }
.mega__feature > span:not(.mega__feature-tag):not(.mega__feature-cta) { color: var(--foil-ink-2); }
.mega__feature-tag { background: var(--gold-grad); color: var(--on-gold); border: 1px solid var(--foil-line); }
.mm-feature { box-shadow: var(--gold-foil-edge); }
.mm-feature svg { background: rgba(26, 24, 23, .1); color: var(--foil-ink); }
.mm-feature small { color: var(--foil-ink-2); }

@media (max-width: 759px) {
  .buybar { background: var(--gold-foil); border-top: 1px solid rgba(26, 24, 23, .35); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
  .buybar__name { color: var(--foil-ink-2); }
  .buybar strong { color: var(--foil-ink); }
}

/* Flat gold buttons and pills become polished gold; on a gold band they get a dark bezel so they still separate */
.btn--gold { background: var(--gold-sheen), var(--gold-grad); background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0; background-repeat: no-repeat; color: var(--on-gold); box-shadow: 0 10px 24px -10px rgba(135, 107, 12, .55), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 90, 10, .25); transition: background-position .8s var(--ease), filter .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease); }
.btn--gold:hover { background: var(--gold-sheen), var(--gold-grad); background-size: 260% 100%, 100% 100%; background-position: -60% 0, 0 0; background-repeat: no-repeat; filter: brightness(1.05); }
.kit-feature .btn--gold, .plan--featured .btn--gold, .cta .btn--gold, .buybar .btn--gold { box-shadow: 0 0 0 1.5px #1A1817, 0 10px 22px -8px rgba(26, 24, 23, .6), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(120, 90, 10, .3); }
@media (prefers-reduced-motion: reduce) { .btn--gold { transition: none; } .btn--gold:hover { background-position: 160% 0, 0 0; } }
.plan__ribbon { background: var(--gold-grad); color: var(--on-gold); box-shadow: 0 0 0 1px rgba(26, 24, 23, .55), 0 6px 14px -6px rgba(26, 24, 23, .5), inset 0 1px 0 rgba(255, 255, 255, .7); }
.instant, .instant--light, .chip-instant { background: var(--gold-grad); color: var(--on-gold); border-color: var(--foil-line); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.product--live .instant { background: none; box-shadow: none; border: 0; color: #7A6662; font-weight: inherit; }
.save-pill, .plan--featured .save-pill, .kit-feature .save-pill { background: rgba(26, 24, 23, .09); border-color: var(--foil-line); color: var(--foil-ink); }
.plan:not(.plan--featured) .save-pill { background: rgba(197, 160, 89, .16); border-color: rgba(197, 160, 89, .6); color: var(--gold-d); }

/* Interactive and data-viz fills */
.stab[aria-selected="true"] { background: linear-gradient(135deg, #F6E39B, #E8CF70); color: var(--on-gold); border-color: var(--foil-line); box-shadow: 0 6px 20px -4px rgba(135, 107, 12, .4), inset 0 1px 0 rgba(255, 255, 255, .6); }
.stab[aria-selected="true"] .stab__txt strong { color: var(--on-gold); }
.stab[aria-selected="true"] .stab__txt small { color: var(--foil-ink-2); }
@media (min-width: 980px) {
  .stab[aria-selected="true"] { background: linear-gradient(90deg, #F6E39B, #E8CF70); border: 0; border-bottom: 1px solid rgba(197, 160, 89, .22); border-left: 3px solid #BE9A29; border-image: var(--gold-grad) 1; border-image-slice: 1; border-width: 0 0 0 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); padding-left: 1rem; margin-left: -1rem; padding-right: .75rem; border-radius: 0 12px 12px 0; }
}
.showcase__progress span { background: var(--gold-grad); }
.whatif__opt.is-on { background: var(--gold-grad); color: var(--on-gold); border-color: var(--foil-line); }
.rail-btn:hover:not(:disabled) { background: var(--gold-grad); color: var(--on-gold); border-color: var(--foil-line); }
.tabs-list li:hover span { background: var(--gold-grad); color: var(--on-gold); border-color: var(--foil-line); }
.mega__item:hover svg { background: var(--gold-grad); color: var(--on-gold); }
.btn--ghost:hover { background: var(--gold-grad); color: var(--on-gold); border-color: var(--foil-line); }
.mini-abc i:first-child { background: var(--gold-grad); color: var(--on-gold); }
.lg--a, .bar--a, .kit-bars i:nth-child(5) { background: var(--gold-grad); }
.panel.play .task:not(.task--todo) .cbx { background: var(--gold-grad); border-color: rgba(26, 24, 23, .45); }
.cbx svg { color: var(--on-gold); }
.mini-bars i:nth-child(2), .mini-bars i:nth-child(4), .mini-wave i:nth-child(2n) { background: var(--gold-grad); }
.mini-ticks i::after { background: var(--gold-grad); }
.meter > span, .act__bar::after { background: var(--gold-foil); }
.hbar:nth-child(4) span, .hbar--max span { background: var(--gold-foil) !important; }
.cta__seal { box-sizing: content-box; padding: 12px; border-radius: 50%; background: var(--ground-maroon); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 0 4px rgba(26, 24, 23, .45), 0 10px 22px -8px rgba(26, 24, 23, .6); }

/* Review fixes: focus rings on gold, kit band text and layout, marquee, label contrast */
.marquee :focus-visible, .cta :focus-visible, .kit-feature :focus-visible, .plan--featured :focus-visible, .buybar :focus-visible,
.mega__feature:focus-visible, .mm-feature:focus-visible, .btn--primary:focus-visible, .btn--gold:focus-visible, .hero__cta:focus-visible,
.stab:focus-visible { outline: 2px solid #1A1817; outline-offset: 2px; }
.marquee { padding: .82rem 0; border-block: 1px solid #BE9A29; }
.kit-feature h3 { color: #2B1D05; }
.kit-feature__chips, .kit-feature__chips li, .kit-feature__price, .kit-feature .price-note { color: #3A2A0A; }
.kit-feature__tag, .kit-feature__price s { color: #3A2A0A; }
.kit-feature__buy { justify-content: flex-start; row-gap: .9rem; }
.kit-feature__buy::after { content: ""; flex-basis: 100%; height: 0; order: 3; }
.kit-feature__price { order: 1; }
.kit-feature__buy .save-pill { order: 1; }
.kit-feature__buy .instant { order: 2; margin: 0; }
.kit-feature__buy .btn--gold { order: 4; }
.kit-feature__buy .btn--wa { order: 4; margin-top: 0; }
.kit-feature__buy .kit-feature__more { order: 5; }
.kit-feature .btn--gold { background: linear-gradient(180deg, #2A2008, #1A1208); color: #F6E39B; border: 1px solid #E3C455; box-shadow: 0 10px 22px -8px rgba(26, 24, 23, .6), inset 0 1px 0 rgba(246, 227, 155, .35); }
.kit-feature .btn--gold:hover { background: linear-gradient(180deg, #3A2D0B, #241A0A); filter: none; }
.chip--no, .status--late { color: var(--maroon-d); }
.kit-feature__buy::before { content: ""; flex-basis: 100%; height: 0; order: 2; }
.kit-feature__buy::after { order: 4; }
.kit-feature__buy .instant { order: 3; }
.kit-feature__buy .btn--gold { order: 3; }
.kit-feature__buy .btn--wa, .kit-feature__buy .kit-feature__more { order: 5; }

/* Round 2: quiet single-product link under the hero CTA row */
/* gap, not a text space: flex layout trims the trailing space before the price span */
.hero__solo { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: #876B0C; text-decoration: underline; text-decoration-color: rgba(135, 107, 12, .45); text-underline-offset: .25em; transition: text-decoration-color .2s, color .2s; }
.hero__solo:hover { color: var(--maroon); text-decoration-color: currentColor; }
@media (max-width: 759px) { .hero__ctas .hero__solo { margin-top: -.4rem; } .hero__ctas .hero__alt, .hero__ctas .hero__solo { justify-self: start; } }


/* Phones: sheet-window titles a little less letter-spaced so they fit. */
@media (max-width: 519px) { .sheet-title { letter-spacing: .28em; } }

/* Round 2: single-planner rail. The reveal used to slide cards in with translateX(30px); scroll-snap measured the shifted
   position, scrolled the rail 30px, and the first card ended up cropped at the left edge once the transform cleared.
   The reveal is now vertical, so snap positions never depend on it. */
.link-arrow { white-space: nowrap; }
.rail .product__foot { flex-wrap: wrap; row-gap: .1rem; }
.rail .link-arrow { letter-spacing: .1em; }
@media (max-width: 600px) {
  .rail { grid-auto-columns: min(320px, 78vw); gap: 1rem; }
}

/* ============ Delight (round 3): gold selection, scrollbar, hero dust, logo glow. Decorative only, transform/opacity only. ============ */
::selection { background: rgba(211, 175, 55, .42); color: #1A1817; } /* dark ink on polished gold */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-track { background: var(--ivory); }
  ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #F6E39B 0%, #D3AF37 50%, #BE9A29 100%); border: 1px solid rgba(135, 107, 12, .35); border-radius: 9999px; }
}

/* Hero: five faint gold motes (two are marigold petals) drift upward behind the content. aria-hidden, behind the copy,
   peak opacity .55, off below 600px (phones), still when the tab is hidden or the visitor asks for reduced motion. */
.hero__motes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__motes i {
  position: absolute; display: block; width: 6px; height: 6px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #F6E39B 0%, #D3AF37 55%, rgba(211, 175, 55, 0) 72%);
  animation: mote 12s ease-in-out infinite; will-change: transform, opacity;
}
.hero__motes i:nth-child(1) { left: 54%; bottom: 14%; animation-delay: 0s; }
.hero__motes i:nth-child(2) { left: 92%; bottom: 30%; width: 8px; height: 8px; animation-duration: 15s; animation-delay: 2.5s; }
.hero__motes i:nth-child(3) { left: 4%; bottom: 22%; width: 5px; height: 5px; animation-duration: 13s; animation-delay: 5s; }
.hero__motes i:nth-child(4) { left: 66%; bottom: 8%; width: 9px; height: 12px; border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #F8E7A6, #D3AF37 60%, #BE9A29); animation-duration: 16s; animation-delay: 1.5s; }
.hero__motes i:nth-child(5) { left: 8%; bottom: 55%; width: 8px; height: 11px; border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #F8E7A6, #D3AF37 60%, #BE9A29); animation-duration: 18s; animation-delay: 7s; }
@keyframes mote {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  15% { opacity: .55; }
  70% { opacity: .35; }
  100% { opacity: 0; transform: translate3d(14px, -140px, 0) rotate(70deg); }
}
.is-tab-hidden .hero__motes i { animation-play-state: paused; }
@media (max-width: 600px) { .hero__motes { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__motes { display: none; } }

/* Nav logo: a soft gold glow wakes behind the mark on hover / keyboard focus. */
.nav .logo { position: relative; isolation: isolate; }
.nav .logo::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 68px; height: 68px; margin-top: -34px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(246, 227, 155, .8) 0%, rgba(227, 196, 85, .3) 45%, rgba(227, 196, 85, 0) 70%);
  opacity: 0; transform: scale(.7); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.nav .logo:hover::before, .nav .logo:focus-visible::before { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .nav .logo::before { transition: none; transform: none; } }



/* ---- Mobile reading + chrome (review pass) ---- */
.nav { transition: transform .35s var(--ease); }
.nav.is-tucked { transform: translateY(-140%); }
.seo-more[hidden] { display: none; }
.seo-more { display: block; margin: .6rem auto 0; padding: .35rem .2rem; background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--maroon); font: 600 .8125rem/1 var(--sans, inherit); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 720px) {
  .section-head .section-lede, .section-head .seo-about { text-align: left; max-width: 34rem; }
  .seo-about { font-size: .9375rem; line-height: 1.65; }
  .seo-about.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* Kit workbook preview: lift it off the gold with a firm edge and shadow so the sheet reads as a real screenshot */
.kit-window { border: 1px solid rgba(26, 24, 23, .28); box-shadow: 0 30px 60px -18px rgba(42, 32, 8, .55), 0 0 0 6px rgba(255, 255, 255, .22); background: #FFFFFF; }
.kit-window .window__bar { background: #F6F1E7; border-bottom-color: rgba(42, 26, 30, .12); }
.kit-window .window__bar span { color: #4F3F3C; }
.kit-window .tabroll li { color: #3F302D; }
.kit-window .tile__label, .kit-window .sheet-title { color: #5A4A46; }

/* ---- Nav "Buy the Kit" is the same gold button as the Store header's, so the two headers match (it was an ink button). ---- */

/* ---- Review fixes: reflow, contrast, motion control, forced colors ---- */
/* 320px: the plan grid track sized to its min-content (nowrap price row) and clipped the featured card */
@media (max-width: 899px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan__price { flex-wrap: wrap; } }
/* "Or start free" measured 4.19-4.50:1 on the real backdrop; --gold-d text keeps the gold theme and clears 6:1 */
.hero .hero__alt { color: #6F5320; }
/* Pause-on-hover/focus for content that moves without being asked to */
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .kit-feature:focus-within .tabroll ul { animation-play-state: paused; }
/* Windows high-contrast / forced colors: borderless buttons turned into bare text */
@media (forced-colors: active) { .btn { border: 1px solid ButtonText; } .btn:focus-visible { outline: 2px solid Highlight; } }
@media (prefers-contrast: more) { :root { --muted: #4A3C39; } .eyebrow, .section-lede { color: #3F302D; } }

/* While the mobile menu is open the floating WhatsApp button would sit on top of the menu's last button: hide it. */
.is-menu-open .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
/* Ring badge text: ONE repetition ("27 TABS · SELF-UPDATING ·", 25 characters) spaced to fill ~93% of the 276-unit circle (slack for Safari's wider letters), so the text never runs past the path (it used to be 124-141% of the circle and was cut or wrapped over its own start). */
.badge-rotate text { letter-spacing: 5.1px; }

/* Header logo a little bigger (owner request). Phones under 385px keep the old size: at 360px the gap between the wordmark and the bag button is only ~11px. */
@media (min-width: 385px) and (max-width: 480px) { .nav .logo__mark { height: 37px; } }
@media (min-width: 481px) { .nav .logo__mark { height: 48px; } }
@media (min-width: 385px) and (max-width: 600px) { .nav .logo__brand { font-size: clamp(1.45rem, 6.5vw, 2rem); } }
@media (min-width: 601px) { .nav .logo__brand { font-size: clamp(2rem, 3.4vw, 2.55rem); } }

/* Hero price row. One line needs ~465px ([Instant access] [price] [strike-through] [Launch price]); when the row has less room (every phone, and the 1024-1440px desktop columns) it used to leave the "Launch price" pill alone on a line. Now the price and strike-through sit on the first line and the two pills side by side on the second. The switch is by the ROW'S OWN width (container query, with margin for Safari's wider letters), with a phone media query as a fallback for old browsers. */
.hero__price { container: hero-price / inline-size; }
.hero__amount { display: inline-flex; align-items: center; gap: .6rem; }
@container hero-price (max-width: 490px) {
  .hero__price .hero__amount { order: 1; flex-basis: 100%; }
  .hero__price .chip-instant { order: 2; margin-right: 0; }
  .hero__price .hero__launch { order: 3; }
  .hero__price .hero__once { order: 4; }
}
@media (max-width: 600px) {
  .hero__price .hero__amount { order: 1; flex-basis: 100%; }
  .hero__price .chip-instant { order: 2; margin-right: 0; }
  .hero__price .hero__launch { order: 3; }
  .hero__price .hero__once { order: 4; }
}

/* Single-planner cards: a gold BUY button beside the price (same cart path as the Kit's buttons); "Peek inside" drops to its own line below. */
.product__foot--buy { flex-wrap: wrap; }
.product__foot--buy .product__buy { margin-left: auto; min-width: 5.5rem; }
.product__foot--buy .link-arrow { flex-basis: 100%; }

/* Kit section: one real Buy button (adds the Kit to the cart) replaces the WhatsApp button and the scroll-only duplicate. A little larger than a normal button so it carries the weight the WhatsApp button had. */
.kit-feature__buy .kit-feature__cta { min-height: 56px; padding-inline: 2rem; }

/* Planner cards: a real museum picture (public domain, credited in the footer) behind a small gold medallion chip. Ivory frame hairline on top, a soft warm wash so the colours sit with the gold theme. */
.product__art--photo { background: var(--ivory); border-bottom: 1.5px solid var(--gold); }
.product__art--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product__art--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(253, 251, 247, 0) 55%, rgba(60, 45, 10, .18)); pointer-events: none; }
.product__art--photo::after { display: none; }
.product__art--photo .medallion { position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 52px; height: 52px; margin: 0; padding: 6px; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 1.5px var(--gold), 0 6px 14px -6px rgba(60, 45, 10, .5); }
.product:hover .product__art--photo .medallion { transform: none; }
/* Designed creatives (logo and brand name are drawn into the image): no medallion chip, no dark wash. */
.product__art--creative::before { display: none; }
.product__art--creative { border-bottom-color: rgba(197, 160, 89, .6); }
/* Kit picture in the Planners mega-menu feature tile, in place of the book icon. */
.mega__feature-art { display: block; width: 100%; height: auto; aspect-ratio: 880 / 472; border-radius: 10px; margin-top: .2rem; box-shadow: 0 10px 22px -10px rgba(40, 30, 5, .55); }

/* Under the planner rail: a plain way into the full store page (/store) from the homepage. */
.rail-more { display: flex; justify-content: center; margin-top: 1.6rem; }
.rail-more .btn { gap: .5rem; }

/* Five header links plus the wordmark need room: the full nav starts at 1180px, and between 1180 and 1359px the links sit closer and the wordmark is a touch smaller so nothing collides. */
@media (min-width: 1180px) and (max-width: 1359px) {
  .nav__links { gap: 1.25rem; }
  .nav .logo__brand { font-size: 2rem; }
}

/* Header with "Invitation card studio": the wordmark keeps its full width (it used to shrink and run into the first link), and the links sit a little tighter and smaller to make room. */
@media (min-width: 1180px) {
  .nav .logo { flex: none; min-width: auto; }
  .nav .logo__brand { font-size: 1.85rem; }
  .nav__links { min-width: 0; gap: .75rem; padding-inline: 0; }
  .nav__links > a, .nav__links .nav__trigger { font-size: .78rem; letter-spacing: .04em; }
}
@media (min-width: 1500px) {
  .nav__links { gap: 1.25rem; padding-inline: 1rem; }
  .nav__links > a, .nav__links .nav__trigger { font-size: .8125rem; letter-spacing: .06em; }
}

/* Free checklist: email form inside the .free__cta card. */
.free__signup { display: grid; gap: .75rem; text-align: left; }
.free__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.free__msg { margin: 0; min-height: 1.3em; font-size: .875rem; line-height: 1.4; text-align: center; color: var(--muted); }
.free__msg--ok { color: var(--gold-d); }
.free__msg--err { color: #9B1C31; }
.free__signup .btn[disabled] { opacity: .7; cursor: default; }

/* Video invitations promo: copy beside three stills of the same video (opening, reveal, finished card) */
.vidpromo { padding: var(--section-y) 0; background: var(--ivory); }
.vidpromo__grid { display: grid; gap: 2.5rem; align-items: center; }
.vidpromo__copy p:not(.eyebrow) { color: #4F3F3B; max-width: 52ch; }
.vidpromo__price { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1.4rem; font-family: var(--serif); font-size: 1.6rem; color: var(--ink); }
.vidpromo__price s { color: var(--muted); font-size: 1.1rem; }
.vidpromo__price span { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); }
.vidpromo__phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 2vw, 1.1rem); max-width: 520px; margin-inline: auto; align-items: start; }
.vidpromo__phones img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; box-shadow: var(--shadow-m); }
.vidpromo__phones img:nth-child(2) { transform: translateY(1.5rem); }
@media (min-width: 900px) { .vidpromo__grid { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }

/* The checklist card title is a link: keep its look, but show it is one on hover and keyboard focus. */
.product__title-link { color: inherit; text-decoration: none; }
.product__title-link:hover, .product__title-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ============ Hero device stage ============
   An iPhone 17 Pro in front (Google Sheets app on the Kit's Dashboard tab) and an "iPhone Duo" dual-screen beside and
   behind it (Checklist + Run-sheets tabs), with the "Opens in Google Sheets + Excel" pill hanging off the Pro's foot and
   the "27 tabs" ring stamped on the Duo's top-right corner as a seal, so the stage reads as one object. Same construction as the
   Kit page's showcase and the agentiq.co.in hero.
   Data: every visible value is from the Kit's Demo workbook (Setup C14:G25 via the Dashboard's function table, Checklist
   rows 8, 17, 25, 28, 39, 49, Run-sheets rows 6-12 = the Roka). Dates use the Dashboard's dd-mmm-yyyy format; the Dashboard
   totals and "118 days to go" are from a recalculated render. Tab strips list real tabs in workbook order. The Demo's venue
   column is never shown (it names a real hotel).
   Sizing: drawn at a fixed 624x616 design size and scaled with `zoom`, so its box is reserved from the first paint (no
   layout shift). The two devices sit side by side (the Pro covers only the Duo's outer bezel), so nothing on either
   screen is hidden and the Duo's smallest text renders at about 8 CSS px on a 1280-1440px laptop.
   Phones (<768px): a scroll-snap carousel, slide 1 the Pro, slide 2 the Duo, with dots (main.js keeps them in sync).
   Decorative: .hstage carries role="img" and the full description; every slide is aria-hidden. */
.hstage {
  --hz: 1;
  position: relative; width: 624px; height: 616px; margin-inline: auto; zoom: var(--hz);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.25; color: #1f1f1f; text-align: left;
}
@media (min-width: 768px) { .hstage { --hz: 1.06; } }
@media (min-width: 980px) { .hstage { --hz: .75; margin-inline: auto 0; } }
@media (min-width: 1010px) { .hstage { --hz: .78; } }
@media (min-width: 1060px) { .hstage { --hz: .82; } }
@media (min-width: 1180px) { .hstage { --hz: .91; } }
/* 1280+: the hero grid moves right (couple art in the margin) and the column narrows; the visual borrows a little of the
   column gap on the left and of the outer margin on the right (still inside the gold frame) */
@media (min-width: 1280px) { .hero__visual { margin-inline: -24px -8px; } .hstage { --hz: .81; margin-inline: auto; } }
@media (min-width: 1360px) { .hstage { --hz: .85; } }
@media (min-width: 1440px) { .hero__visual { margin-inline: -24px -40px; } .hstage { --hz: .93; } }
.hstage svg { display: inline-block; max-width: none; }
.hstage p { margin: 0; }
.hstage__slide { display: contents; }

/* Blush + gold glow behind the devices (gradients only, no blur filter) */
.hstage__glow {
  position: absolute; inset: -4% -6% -2%; z-index: 0; pointer-events: none;
  background: radial-gradient(30% 36% at 22% 56%, rgba(232, 185, 189, .5), transparent 72%), radial-gradient(38% 40% at 70% 30%, rgba(227, 196, 85, .24), transparent 72%), radial-gradient(30% 26% at 74% 84%, rgba(232, 185, 189, .34), transparent 72%);
}
/* Contact shadows: soft ellipses on the "floor" under each device (they stay put while the devices float) */
.hstage__floor { position: absolute; z-index: 0; height: 26px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(74, 28, 40, .34), rgba(74, 28, 40, .12) 55%, transparent); }
.hstage__floor--pro { left: 24px; top: 582px; width: 216px; }
.hstage__floor--duo { left: 300px; top: 418px; width: 290px; height: 22px; opacity: .8; }

/* Shared metal: champagne titanium lit from the top-left (both devices use the same gradient, rim and shadow recipe) */
.hstage__chassis, .hstage__duobody {
  background: linear-gradient(160deg, #F3EEE2 0%, #D6CDB7 34%, #B5AB93 68%, #9C9279 100%);
  border: 1px solid rgba(110, 98, 72, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 1px 0 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(80, 70, 48, .35), 0 30px 60px -24px rgba(74, 28, 40, .42), 0 10px 22px -12px rgba(60, 45, 10, .3);
}

/* ---- iPhone 17 Pro (front) ---- */
.hstage__pro { position: absolute; left: 0; top: 58px; z-index: 2; width: 248px; height: 536px; animation: hsFloat 9s ease-in-out infinite; }
.hstage__chassis { position: relative; height: 100%; border-radius: 46px; padding: 4px; }
.hstage__chassis::before, .hstage__chassis::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: linear-gradient(90deg, #8F8670, #E2DAC7 55%, #A39A83); }
.hstage__chassis::before { left: -4px; top: 112px; height: 50px; box-shadow: 0 -34px 0 -.5px #B3AA94; } /* volume + action */
.hstage__chassis::after { right: -4px; top: 146px; height: 74px; } /* power */
.hstage__screen { position: relative; height: 100%; overflow: hidden; border-radius: 42px; background: #fff; box-shadow: 0 0 0 1.5px #0B0B0C; display: flex; flex-direction: column; }
.hstage__island { position: absolute; top: 9px; left: 50%; z-index: 30; width: 78px; height: 21px; margin-left: -39px; border-radius: 999px; background: #000; }
.hstage__island::after { content: ""; position: absolute; right: 9px; top: 6.5px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2B3856 0 18%, #04060B 60%); }
.hs-status { flex: none; display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 8px 22px 0 27px; font-size: 12px; font-weight: 600; color: #000; }
.hs-status__ico { display: inline-flex; align-items: center; gap: 4px; }
.hs-status__ico svg { width: 12px; height: 11px; fill: currentColor; }
.hs-status__ico .hs-bat { width: 22px; }
.hstage__home { flex: none; padding: 5px 0 7px; background: #F8F9FA; }
.hstage__home::after { content: ""; display: block; width: 92px; height: 4px; margin: 0 auto; border-radius: 4px; background: #111; }

/* Google Sheets app chrome: top bar and the sheet-tab strip */
.hs-bar { flex: none; display: flex; align-items: center; gap: 7px; padding: 2px 12px 5px; border-bottom: 1px solid #E3E3E3; }
.hs-bar__ok { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #E8F0FE; color: #0B57D0; font-size: 11px; }
.hs-bar__logo { flex: none; width: 13px; height: 18px; }
.hs-bar__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-weight: 500; }
.hs-bar__acts { flex: none; font-size: 12px; letter-spacing: .2em; color: #444746; }
.hs-tabs { flex: none; display: flex; align-items: center; gap: 2px; padding: 4px 0 3px 8px; border-top: 1px solid #E3E3E3; background: #F8F9FA; font-size: 10.5px; color: #444746; white-space: nowrap; }
.hs-tabs__add { flex: none; padding: 0 5px 0 2px; font-size: 14px; line-height: 1; color: #5F6368; }
/* the strip scrolls in the real app: it runs off the right edge under a fade instead of cutting a word */
.hs-tabs__list { flex: 1; min-width: 0; display: flex; gap: 2px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 98%); mask-image: linear-gradient(90deg, #000 72%, transparent 98%); }
.hs-tabs__list > span { flex: none; padding: 3px 9px; border-radius: 99px; }
.hs-tabs .is-on { background: #D3E3FD; color: #041E49; font-weight: 600; }

/* Dashboard tab (the workbook's own foil-gold bands; dark text on gold) */
.hs-dash { flex: 1; min-height: 0; display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; }
.hs-dash__band { flex: none; display: grid; place-items: center; height: 29px; background: var(--gold-foil); box-shadow: var(--gold-foil-edge); font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--foil-ink); white-space: nowrap; }
.hs-dash__date { flex: none; padding: 3px 10px; background: #FBF6E6; text-align: center; font-size: 10px; line-height: 1.22; font-weight: 700; color: #5C4708; white-space: nowrap; }
.hs-dash__date > span { display: block; }
.hs-dash__date b { font-variant-numeric: tabular-nums; }
.hs-kpis { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; background: #E8DFC4; }
.hs-kpi { display: flex; flex-direction: column; justify-content: flex-end; min-height: 39px; padding: 4px 4px; background: #FDFAF1; text-align: center; }
.hs-kpi small { display: block; font-size: 10px; line-height: 1.15; font-weight: 700; letter-spacing: .02em; color: #6B5A2A; white-space: nowrap; }
.hs-kpi small span { display: block; letter-spacing: 0; }
.hs-kpi--foil { padding-top: 3px; }
.hs-kpi--foil small { line-height: 1.08; }
.hs-kpi b { display: block; margin-top: 2px; font-family: var(--serif); font-size: 17px; line-height: 1.05; font-weight: 700; color: #3B2F0C; font-variant-numeric: lining-nums; }
.hs-kpi--foil { background: var(--gold-foil); }
.hs-kpi--foil small, .hs-kpi--foil b { color: var(--foil-ink); }
.hs-dash__h { flex: none; padding: 6px 8px 3px; font-family: var(--serif); font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #5C4708; white-space: nowrap; }
.hs-row { display: grid; grid-template-columns: minmax(0, 1fr) 66px 62px; align-items: center; height: 19px; border-bottom: 1px solid #F0EAD8; font-size: 10px; line-height: 1.2; }
.hs-row > span { padding: 0 4px; white-space: nowrap; }
/* long function names end in an ellipsis (the cell is narrower than the name), never a cut glyph */
.hs-row > span:first-child { padding-left: 8px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.hs-row > span:nth-child(2) { color: #444746; font-variant-numeric: tabular-nums; }
.hs-row > span:last-child { padding-right: 9px; text-align: right; font-variant-numeric: tabular-nums; }
.hs-row--head { flex: none; height: 18px; border: 0; background: var(--gold-foil); font-size: 10px; font-weight: 700; color: var(--foil-ink); }
.hs-row--head > span:nth-child(2) { color: var(--foil-ink); }
.hs-rows { flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.hs-rows .hs-row:nth-child(even) { background: #FBF8EF; }

/* Glass: a fixed reflection plus a slow sheen across each screen */
.hstage__glass, .hstage__dglass { position: absolute; z-index: 8; overflow: hidden; pointer-events: none; }
.hstage__glass { inset: 0; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 26%, transparent 44%); }
.hstage__dglass { inset: 7px; border-radius: 38px; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 26%, transparent 44%); }
.hstage__glass::after, .hstage__dglass::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: translateX(-160%) skewX(-18deg); animation: hsSheen 9s ease-in-out infinite;
}
.hstage__dglass::after { animation-delay: -4.5s; }

/* ---- iPhone Duo (beside/behind): two 174px screens on a hinge ---- */
.hstage__duo { position: absolute; left: 244px; top: 0; z-index: 1; width: 374px; }
.hstage__duofloat { position: relative; animation: hsFloat 9s ease-in-out -4.5s infinite; }
.hstage__duobody { position: relative; display: flex; padding: 6px; border-radius: 44px; }
.hstage__duobody::before, .hstage__duobody::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: linear-gradient(90deg, #8F8670, #E2DAC7 55%, #A39A83); }
.hstage__duobody::before { left: -4px; top: 92px; height: 44px; }
.hstage__duobody::after { right: -4px; top: 124px; height: 70px; }
.hstage__dscreen { position: relative; z-index: 1; flex: none; width: 174px; height: 412px; display: flex; flex-direction: column; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px #0B0B0C; }
.hstage__dscreen--l { border-radius: 36px 8px 8px 36px; }
.hstage__dscreen--r { border-radius: 8px 36px 36px 8px; }
.hstage__hinge { position: relative; flex: none; width: 12px; margin-inline: 1.5px; background: linear-gradient(90deg, #6F6650 0%, #A59B83 16%, #D9D1BF 40%, #F6F1E6 50%, #D9D1BF 60%, #A59B83 84%, #6F6650 100%); box-shadow: inset 0 0 4px rgba(60, 45, 10, .45); }
.hstage__hinge i { position: absolute; left: 2px; right: 2px; height: 64px; border-radius: 5px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .35) 0 1px, rgba(60, 45, 10, .25) 1px 3px), linear-gradient(90deg, #8F8670, #E4DDCC 50%, #8F8670); box-shadow: 0 0 0 1px rgba(60, 45, 10, .35); }
.hstage__hinge i:first-child { top: 44px; }
.hstage__hinge i:last-child { bottom: 44px; }
.hstage__cam { position: absolute; top: 9px; left: 50%; z-index: 5; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2B3856 0 18%, #04060B 58%); box-shadow: 0 0 0 2px #000; }
.hs-dstatus { flex: none; display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 8px 18px 0 20px; font-size: 10px; font-weight: 600; color: #000; }
.hs-dstatus .hs-status__ico svg { width: 11px; height: 10px; }
.hs-dstatus .hs-status__ico .hs-bat { width: 18px; }
.hstage__dhome { flex: none; padding: 5px 0 7px; background: #F8F9FA; }
.hstage__dhome::after { content: ""; display: block; width: 62px; height: 3px; margin: 0 auto; border-radius: 3px; background: #111; }
.hs-bar--c { gap: 6px; padding: 2px 10px 5px; }
.hs-bar--c .hs-bar__ok { width: 18px; height: 18px; font-size: 10px; }
.hs-bar--c .hs-bar__logo { width: 11px; height: 15px; }
.hs-bar--c .hs-bar__title { font-size: 10.5px; }
.hstage__dscreen .hs-tabs { padding: 4px 0 3px 6px; font-size: 10px; }
.hstage__dscreen .hs-tabs__add { font-size: 13px; }
.hstage__dscreen .hs-tabs__list > span { padding: 2px 8px; }
.hs-filter { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; background: #FBF6E6; border-bottom: 1px solid #EFE6CC; font-family: var(--serif); font-size: 11.5px; font-weight: 700; color: #5C4708; white-space: nowrap; }
.hs-filter > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hs-filter__chip { flex: none; padding: 1px 6px; border-radius: 99px; border: 1px solid #C9B98A; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 700; color: #5C4708; }
.hs-fill { flex: 1; min-height: 0; background: repeating-linear-gradient(180deg, #fff 0 20px, #F0EAD8 20px 21px); }

/* Checklist rows: the When and Status columns share a line, the task gets the full width under them */
.hs-task { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 6px; padding: 5px 9px 6px; border-bottom: 1px solid #F0EAD8; font-family: Arial, Helvetica, sans-serif; font-size: 10.5px; line-height: 1.22; }
.hs-task:nth-of-type(even) { background: #FBF8EF; }
.hs-task__when { font-size: 10px; font-weight: 700; color: #6B5A2A; }
.hs-task__txt { grid-column: 1 / -1; color: #1F1F1F; }
.hs-task--head, .hs-run--head { padding-block: 3px; border: 0; background: var(--gold-foil) !important; font-size: 10px; font-weight: 700; color: var(--foil-ink); }
.hs-pill { justify-self: end; padding: 1px 6px; border-radius: 99px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.hs-pill--done { background: #E6F4EA; color: #137333; }
.hs-pill--prog { background: #E8F0FE; color: #0B57D0; }
.hs-pill--todo { background: #F1F3F4; color: #4A4E52; }

/* Run-sheet rows (Start time, Duration (min), What happens: the workbook's column order) */
.hs-run { flex: none; display: grid; grid-template-columns: 30px 18px minmax(0, 1fr); align-items: baseline; gap: 0 6px; padding: 4px 9px 5px; border-bottom: 1px solid #F0EAD8; font-family: Arial, Helvetica, sans-serif; font-size: 10.5px; line-height: 1.22; }
.hs-run:nth-of-type(even) { background: #FBF8EF; }
.hs-run__t { font-weight: 700; font-variant-numeric: tabular-nums; color: #2A1F05; }
.hs-run__m { text-align: right; font-variant-numeric: tabular-nums; color: #444746; }
.hs-run__txt { min-width: 0; color: #1F1F1F; }
.hs-run--head > span:nth-child(2) { text-align: right; }

/* ---- Pill (hangs off the Pro's foot) and the "27 tabs" seal (stamped on the Duo's top-right corner, over the status bar,
   diagonally opposite the pill and clear of the fixed WhatsApp button in the bottom-right of the viewport) ---- */
.hstage__pill {
  position: absolute; left: 112px; bottom: -17px; z-index: 12;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 15px 8px 12px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(232, 185, 189, .95); box-shadow: inset 0 1px 0 #fff, 0 14px 28px -12px rgba(74, 28, 40, .45), 0 3px 8px -4px rgba(74, 28, 40, .25);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.hstage__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #0F9D58; box-shadow: 0 0 0 3px rgba(15, 157, 88, .18); }
.hstage .hstage__seal { position: absolute; right: -6px; top: -62px; z-index: 12; width: 100px; height: 100px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .55), 0 16px 30px -12px rgba(74, 28, 40, .4); }
.hstage .hstage__seal .badge-rotate__core { font-size: 1.9rem; }

/* Carousel dots: phones only (the markup keeps their row so nothing shifts when main.js wires them up) */
.hs-dots { display: none; }

@keyframes hsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes hsSheen { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 80%, 100% { transform: translateX(560%) skewX(-18deg); } }
.is-tab-hidden .hstage__pro, .is-tab-hidden .hstage__duofloat, .is-tab-hidden .hstage__glass::after, .is-tab-hidden .hstage__dglass::after, .is-tab-hidden .hstage .badge-rotate svg { animation-play-state: paused; }
/* Every loop stops for visitors who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .hstage__pro, .hstage__duofloat, .hstage__glass::after, .hstage__dglass::after, .hstage .badge-rotate svg { animation: none !important; }
}

/* ---- Phones and small tablets: a swipeable carousel. Slide 1 = the Pro, slide 2 = the Duo; each slide is the scroller's
   width, padded so ~20px of the next phone peeks in and a visitor can see there is a second one. Works without JS
   (scroll-snap); main.js only syncs the dots. The -16px bleed matches the page gutter; .hero clips overflow, so the page
   never scrolls sideways. */
@media (max-width: 767px) {
  .hstage {
    width: auto; height: auto; zoom: 1; margin: 0 -16px; padding: 18px 30px 30px; display: flex; align-items: center; gap: 10px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 30px; scrollbar-width: none;
  }
  .hstage::-webkit-scrollbar { display: none; }
  .hstage__glow { inset: 0; }
  .hstage__slide { position: relative; display: flex; flex: 0 0 100%; justify-content: center; align-items: center; scroll-snap-align: center; scroll-snap-stop: always; }
  .hstage__slide--pro { padding-bottom: 20px; } /* room for the pill that hangs off the phone */
  .hstage__pro, .hstage__duo { position: relative; left: auto; top: auto; flex: none; }
  .hstage__pro { zoom: var(--pz, 1.1); }
  .hstage__duo { zoom: var(--dz, .86); }
  .hstage__floor--pro { left: 50%; top: auto; bottom: 8px; width: 74%; margin-left: -37%; }
  .hstage__floor--duo { display: none; }
  .hstage__pill { left: 50%; transform: translateX(-50%); }
  .hs-dots { display: flex; justify-content: center; gap: 2px; margin-top: -14px; }
  html:not(.js) .hs-dots { visibility: hidden; } /* without JS the row stays reserved but empty; swiping still works */
  .hs-dots__dot { position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hs-dots__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 99px; background: rgba(42, 26, 30, .24); transition: width .25s, margin .25s, background .25s; }
  .hs-dots__dot[aria-current="true"]::after { width: 22px; margin-left: -11px; background: var(--gold-foil); box-shadow: inset 0 0 0 1px rgba(110, 82, 8, .35); }
  .hs-dots__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 99px; }
}
/* Zoom steps so each phone fills its slide (slide width = viewport - 60px) */
@media (max-width: 767px) { .hstage__duo { --dz: 1.05; } .hstage__pro { --pz: 1.2; } }
@media (max-width: 519px) { .hstage__duo { --dz: .9; } .hstage__pro { --pz: 1.12; } }
@media (max-width: 379px) { .hstage__duo { --dz: .8; } .hstage__pro { --pz: 1.04; } }
@media (max-width: 349px) { .hstage__duo { --dz: .69; } .hstage__pro { --pz: .96; } }

/* ---- Sharpen-for-sales pass (2026-11-12) ---- */
/* The guarantee sits under the Kit price, so the promise is read at the moment of deciding. Dark text on the gold card. */
.kit-feature__buy .kit-feature__promise { order: 6; flex-basis: 100%; }
.kit-feature__promise { display: flex; gap: .55rem; align-items: flex-start; margin: 1.1rem 0 0; max-width: 30rem; font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.kit-feature__promise .ico { flex: none; margin-top: .2rem; color: var(--ink); }
.kit-feature__promise a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* The pricing note and payment apps now close the shop section. */
.collection .pricing__note { margin-top: 2.5rem; }
/* Plain-text summary at the foot of the page: quiet, readable, keeps the internal links for search and AI answers. */
.about-seo { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--ground); border-top: 1px solid var(--line); }
.about-seo__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 1.9rem); text-align: center; margin: 0 0 1rem; color: var(--ink); }
.about-seo .section-lede { text-align: center; margin-inline: auto; }
@media (max-width: 720px) { .about-seo__title, .about-seo .section-lede { text-align: left; } }
/* Phones: the 27 tabs in two compact columns instead of one 1,750px column */
@media (max-width: 599px) {
  .tabs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .9rem; }
  .tabs-list li { gap: .55rem; padding: .6rem 0; font-size: .68rem; letter-spacing: .08em; }
  .tabs-list li span { width: 26px; height: 26px; font-size: .7rem; }
}