@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* ============================================================
   DELVE — site styles (design tokens + base + layout, one file)
   Generated from the Delve Design System. Edit brand values in :root below.
   ============================================================ */

/* ============================================================
   DELVE · COLOR TOKENS
   Black (#111111) primary · Rose-gold (#e7a99f) accent.
   Warm, muted neutrals. Rose used for lines, borders, icons,
   and key highlights — never large fills of pure accent.
   ============================================================ */

:root {
  /* ---- Ink (primary / black) ---- */
  --ink-900: #111111;   /* brand black — primary */
  --ink-800: #1c1b1a;
  --ink-700: #2a2826;
  --ink-600: #403d3a;
  --ink-500: #5c5854;

  /* ---- Warm neutral grays ---- */
  --gray-500: #6f6a65;
  --gray-400: #928c85;
  --gray-300: #b8b1aa;
  --gray-200: #e4ded8;
  --gray-150: #ebe5df;
  --gray-100: #f4f0ec;

  /* ---- Paper / surfaces ---- */
  --paper:    #faf8f6;   /* warm off-white page */
  --white:    #ffffff;

  /* ---- Rose-gold accent scale ---- */
  --rose-50:  #faf2ef;
  --rose-100: #f5e2dc;
  --rose-200: #efccc2;
  --rose-300: #e7a99f;   /* brand rose-gold — base accent */
  --rose-400: #d98e81;
  --rose-500: #c57365;   /* deeper rose — accent text on light (AA-ish) */
  --rose-600: #a85a4d;   /* darkest rose — strong accent text / hover */

  /* ---- Functional (kept muted to match brand) ---- */
  --success: #5f7d62;
  --warning: #b8863f;
  --danger:  #a8473d;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Backgrounds & surfaces */
  --bg-page:        var(--paper);
  --surface-card:   var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--gray-100);
  --surface-ink:    var(--ink-900);   /* dark feature sections */
  --surface-rose:   var(--rose-50);   /* soft accent wash */

  /* Text */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--gray-500);
  --text-muted:     var(--gray-400);
  --text-on-ink:    var(--paper);     /* text on black sections */
  --text-on-ink-dim:#b8b1aa;
  --text-accent:    var(--rose-600);  /* accent text on light */
  --text-accent-on-ink: var(--rose-300); /* accent text on black */

  /* Lines & borders */
  --border:         var(--gray-200);
  --border-strong:  var(--ink-900);
  --border-accent:  var(--rose-300);
  --border-on-ink:  rgba(231,169,159,0.35);

  /* Accent */
  --accent:         var(--rose-300);
  --accent-strong:  var(--rose-500);
  --accent-on-ink:  var(--rose-300);

  /* Focus ring */
  --focus-ring:     var(--rose-400);
}

/* ------------------------------------------------------------ */

/* ============================================================
   DELVE · TYPOGRAPHY TOKENS
   Display serif (Cormorant Garamond) for headings & big moments.
   Geometric sans (Jost) for body, UI, labels, eyebrows.
   Headings & eyebrows often set in CAPS with open tracking.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-sans:    'Jost', 'Century Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    var(--font-sans);

  /* ---- Weights ---- */
  --fw-light:     300;   /* @kind other */
  --fw-regular:   400;   /* @kind other */
  --fw-medium:    500;   /* @kind other */
  --fw-semibold:  600;   /* @kind other */
  --fw-bold:      700;   /* @kind other */

  /* ---- Fluid display sizes (serif) ---- */
  --text-display:  clamp(3.25rem, 6vw, 5.5rem);   /* hero */
  --text-h1:       clamp(2.5rem, 4.5vw, 4rem);
  --text-h2:       clamp(2rem, 3.2vw, 2.85rem);
  --text-h3:       clamp(1.5rem, 2.2vw, 2rem);
  --text-h4:       1.375rem;

  /* ---- Body & UI sizes (sans) ---- */
  --text-lead:     1.3125rem;   /* 21px intro paragraphs */
  --text-base:     1rem;        /* 16px */
  --text-sm:       0.875rem;    /* 14px */
  --text-xs:       0.75rem;     /* 12px */
  --text-eyebrow:  0.8125rem;   /* 13px tracked caps */

  /* ---- Line heights ---- */
  --leading-tight:   1.04;   /* display serif */
  --leading-snug:    1.18;   /* headings */
  --leading-normal:  1.6;    /* body */
  --leading-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --tracking-display: -0.01em;
  --tracking-tight:   -0.005em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-caps:    0.22em;   /* eyebrows / nav / buttons in caps */
  --tracking-caps-sm: 0.14em;
}

/* ------------------------------------------------------------ */

/* ============================================================
   DELVE · SPACING & LAYOUT TOKENS
   4px base grid. Generous, editorial whitespace.
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   3rem;      /* 48 */
  --space-8:   4rem;      /* 64 */
  --space-9:   6rem;      /* 96 */
  --space-10:  8rem;      /* 128 */

  /* Section rhythm */
  --section-y:        var(--space-9);
  --section-y-tight:  var(--space-8);

  /* Containers */
  --container-narrow: 720px;
  --container:        1080px;
  --container-wide:   1280px;
  --gutter:           clamp(1.25rem, 5vw, 4rem);  /* @kind spacing */
}

/* ------------------------------------------------------------ */

/* ============================================================
   DELVE · SHAPE & ELEVATION TOKENS
   Sharp corners are core to the brand ("keep corners sharp for a
   modern feel"). Radii are near-zero. Shadows are soft, warm,
   and restrained — depth comes from rule-lines, not heavy cards.
   ============================================================ */

:root {
  /* ---- Radii (sharp by default) ---- */
  --radius-none: 0;
  --radius-xs:   2px;    /* the most we ever round */
  --radius-sm:   3px;
  --radius-pill: 999px;  /* reserved for avatars / dot indicators */

  /* ---- Border widths ---- */
  --border-w:        1px;
  --border-w-thick:  1.5px;
  --rule:            1px solid var(--border);
  --rule-accent:     1px solid var(--border-accent);
  --rule-ink:        1px solid var(--ink-900);

  /* ---- Shadows (warm-tinted, subtle) ---- */
  --shadow-none: none;
  --shadow-xs:  0 1px 2px rgba(28, 27, 26, 0.05);
  --shadow-sm:  0 2px 8px rgba(28, 27, 26, 0.06);
  --shadow-md:  0 8px 24px rgba(28, 27, 26, 0.08);
  --shadow-lg:  0 18px 48px rgba(28, 27, 26, 0.12);
  --shadow-rose: 0 12px 32px rgba(197, 115, 101, 0.18);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --dur-fast:   140ms;   /* @kind other */
  --dur-base:   240ms;   /* @kind other */
  --dur-slow:   420ms;   /* @kind other */

  /* ---- Focus ---- */
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* ------------------------------------------------------------ */

/* ============================================================
   DELVE · BASE ELEMENT STYLES & UTILITIES
   Opinionated defaults built on the tokens. Gives consumers a
   ready brand baseline: serif headings, Jost body, tracked caps
   eyebrows, sharp rule-lines.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--rose-500); }

/* ---- Display & heading helpers ---- */
.delve-display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
}
.delve-h1 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); margin: 0; }
.delve-h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h2); line-height: var(--leading-snug); margin: 0; }
.delve-h3 { font-family: var(--font-display); font-weight: var(--fw-medium);   font-size: var(--text-h3); line-height: var(--leading-snug); margin: 0; }

/* Italic serif for editorial accents (pairs with the script logo) */
.delve-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
}

/* ---- Eyebrow: tracked caps label, the brand's signature device ---- */
.delve-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.delve-eyebrow--ink { color: var(--text-secondary); }
.delve-eyebrow--on-ink { color: var(--text-accent-on-ink); }

/* Thin accent rule that often precedes an eyebrow */
.delve-tick {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
}

/* ---- Lead paragraph ---- */
.delve-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  font-weight: var(--fw-regular);
}

/* ---- Layout helpers ---- */
.delve-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.delve-container--narrow { max-width: var(--container-narrow); }
.delve-container--wide { max-width: var(--container-wide); }
.delve-section { padding-block: var(--section-y); }

/* Dark feature section */
.delve-on-ink {
  background: var(--surface-ink);
  color: var(--text-on-ink);
}
.delve-on-ink h1, .delve-on-ink h2, .delve-on-ink h3, .delve-on-ink h4 { color: var(--text-on-ink); }

::selection { background: var(--rose-200); color: var(--ink-900); }

/* ------------------------------------------------------------ */

/* ============================================================
   DELVE WEBSITE — premium marketing site
   Apple whitespace · Kearney editorial authority · Slack warmth.
   Composes the design-system tokens; structural CSS only.
   ============================================================ */

.site { min-height: 100vh; background: var(--bg-page); color: var(--text-primary); overflow-x: hidden; }
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--container-wide); }
.wrap--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.ink { background: var(--ink-900); color: var(--text-on-ink); }
.ink h1, .ink h2, .ink h3 { color: var(--paper); }
.rule-top { border-top: 1px solid var(--border); }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; background: rgba(250,248,246,0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur-base), background var(--dur-base); }
.hdr--scrolled { border-bottom-color: var(--border); background: rgba(250,248,246,0.92); }
.hdr__inner { display: flex; align-items: center; gap: var(--space-6); height: 74px; }
.brand { display: flex; align-items: center; gap: 11px; cursor: pointer; background: none; border: 0; padding: 0; }
.brand img { width: 36px; height: 36px; }
.brand__name { font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: .01em; color: var(--ink-900); line-height: 1; }
.nav { display: flex; gap: var(--space-6); margin-left: auto; align-items: center; }
.nav button, .nav a { font-family: var(--font-sans); font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-secondary); background: none; border: 0; cursor: pointer; padding: 4px 0; position: relative; transition: color var(--dur-fast); }
.nav button:hover, .nav a:hover, .nav .is-active { color: var(--ink-900); }
.nav .is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--rose-300); }
.hdr__actions { display: flex; align-items: center; gap: var(--space-4); }
.cartbtn { position: relative; background: none; border: 0; cursor: pointer; color: var(--ink-900); display: inline-flex; padding: 4px; }
.cartbtn svg { width: 21px; height: 21px; stroke-width: 1.5; }
.cartbtn__count { position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--rose-400); color: #fff; font-size: 10px; font-weight: 600; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); letter-spacing: 0; }
.menubtn { display: none; background: none; border: 0; cursor: pointer; color: var(--ink-900); padding: 4px; }
.menubtn svg { width: 24px; height: 24px; stroke-width: 1.5; }
@media (max-width: 900px) { .nav { display: none; } .menubtn { display: inline-flex; } }

/* mobile sheet */
.msheet { position: fixed; inset: 0; z-index: 70; background: var(--paper); display: flex; flex-direction: column;
  padding: var(--gutter); gap: var(--space-2); }
.msheet__top { display: flex; justify-content: space-between; align-items: center; height: 50px; margin-bottom: var(--space-5); }
.msheet a, .msheet button { font-family: var(--font-display); font-size: 30px; color: var(--ink-900); background: none; border: 0; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }
.hero__eyebrow { margin-bottom: var(--space-5); }
.hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5.4vw, 4.75rem);
  line-height: 1.07; letter-spacing: -0.02em; margin: 0 0 var(--space-8); max-width: 17ch; text-wrap: balance; }
.hero__title em { font-style: italic; font-weight: 500; color: var(--rose-500); }
.hero__lead { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.65; color: var(--text-secondary); max-width: 52ch; margin: 0 0 var(--space-7); }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.hero__note { font-size: 13px; color: var(--text-muted); margin: var(--space-5) 0 0; letter-spacing: .02em; }
.hero__media { margin-top: var(--space-9); position: relative; }
.hero__media .ph { aspect-ratio: 21/9; }
.hero__media .accent-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--rose-300), transparent); }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(17,17,17,.55)); }
.hero__media-cap { position: absolute; left: var(--space-6); bottom: var(--space-6); color: var(--paper); z-index: 2; }
.hero__media-cap b { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; display: block; }
.hero__media-cap span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--rose-300); }

/* stat strip */
.statstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); border-top: 1px solid var(--border); padding-top: var(--space-6); margin-top: var(--space-8); }
.statstrip .stat__num { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 600; color: var(--ink-900); line-height: 1; }
.statstrip .stat__lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-top: 8px; line-height: 1.4; }
@media (max-width: 720px) { .statstrip { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); } }

/* image placeholder — subtle, monochrome, sharp */
.ph { position: relative; background:
    repeating-linear-gradient(45deg, var(--gray-100) 0 12px, var(--gray-150) 12px 24px);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ph__label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.ph__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph--portrait { aspect-ratio: 4/5; }
.ph--wide { aspect-ratio: 16/10; }
.ph--square { aspect-ratio: 1/1; }

/* ---------- Trust strip ---------- */
.trust { padding-block: var(--space-7); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust__label { text-align: center; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-5); }
.trust__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5) var(--space-8); }
.trust__row span { font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--ink-500); letter-spacing: .02em; opacity: .75; }

/* ---------- Section header ---------- */
.delve-eyebrow-c { white-space: nowrap; }
.sechead { max-width: 62ch; margin-bottom: var(--space-7); }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead__eyebrow { margin-bottom: var(--space-4); }
.sechead h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); line-height: 1.1; margin: 0 0 var(--space-4); text-wrap: balance; letter-spacing: -0.01em; }
.sechead p { font-size: var(--text-lead); color: var(--text-secondary); margin: 0; line-height: 1.65; }
.sechead--split { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); max-width: none; }
.sechead--split > div:first-child { max-width: 46ch; }

/* ---------- Approach (editorial ink band, Kearney) ---------- */
.approach__big { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.16; letter-spacing: -0.01em; color: var(--paper); max-width: 20ch; margin: 0 0 var(--space-8); text-wrap: balance; }
.approach__big em { font-style: italic; color: var(--rose-300); }
.approach__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.approach__col { padding-top: var(--space-5); border-top: 1px solid var(--border-on-ink); }
.approach__col .n { font-family: var(--font-display); font-size: 14px; color: var(--rose-300); letter-spacing: .1em; display: block; margin-bottom: var(--space-3); }
.approach__col h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--paper); margin: 0 0 var(--space-3); }
.approach__col p { font-size: 14.5px; line-height: 1.65; color: var(--text-on-ink-dim); margin: 0; }
@media (max-width: 860px) { .approach__cols { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ---------- Capabilities (numbered editorial list) ---------- */
.caps { border-top: 1px solid var(--border); }
.cap { display: grid; grid-template-columns: 84px 1.1fr 1.4fr auto; gap: var(--space-5); align-items: center;
  padding: var(--space-6) 0; border-bottom: 1px solid var(--border); cursor: default; position: relative; transition: background var(--dur-base) var(--ease-out); }
.cap:hover { background: var(--white); }
.cap__n { font-family: var(--font-display); font-size: 1.15rem; color: var(--rose-500); letter-spacing: .04em; }
.cap__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--ink-900); letter-spacing: -0.01em; }
.cap__desc { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.cap__icon { width: 46px; height: 46px; border: 1px solid var(--border-accent); display: flex; align-items: center; justify-content: center; color: var(--rose-500); justify-self: end; transition: background var(--dur-base), color var(--dur-base); }
.cap__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.cap:hover .cap__icon { background: var(--rose-300); color: var(--ink-900); border-color: var(--rose-300); }
@media (max-width: 860px) {
  .cap { grid-template-columns: 48px 1fr; grid-template-areas: "n name" ". desc"; gap: var(--space-2) var(--space-4); }
  .cap__n { grid-area: n; } .cap__name { grid-area: name; } .cap__desc { grid-area: desc; } .cap__icon { display: none; }
}

/* ---------- Feature moment (Apple full-bleed) ---------- */
.feature { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; }
.feature .ph { position: absolute; inset: 0; border: 0; }
.feature__scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(17,17,17,.9) 0%, rgba(17,17,17,.66) 48%, rgba(17,17,17,.32) 100%); }
.feature .ph__label { display: none; }
.feature__inner { position: relative; z-index: 2; padding-block: var(--space-9); }
.feature__eyebrow { color: var(--rose-300); margin-bottom: var(--space-4); }
.feature h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.7rem); line-height: 1.14; color: var(--paper); max-width: 20ch; margin: 0 0 var(--space-6); letter-spacing: -0.01em; }
.feature h2 em { font-style: italic; color: var(--rose-300); }
.feature p { font-size: var(--text-lead); line-height: 1.65; color: rgba(250,248,246,.82); max-width: 48ch; margin: 0 0 var(--space-6); }

/* ---------- Products / storefront ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 860px) { .prod-grid { grid-template-columns: 1fr; } }
.prod { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base); }
.prod:hover { border-color: var(--ink-900); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.prod__media { position: relative; }
.prod__media .ph { aspect-ratio: 4/3; border: 0; border-bottom: 1px solid var(--border); }
.prod__img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-bottom: 1px solid var(--border); }
.prod__badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.prod__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.prod__type { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-600); font-weight: 500; }
.prod__name { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.18; color: var(--ink-900); margin: 0; }
.prod__desc { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; flex: 1; }
.prod__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.prod__price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink-900); }
.prod__price s { font-family: var(--font-sans); font-size: .85rem; color: var(--text-muted); font-weight: 400; margin-right: 8px; }

/* storefront page header */
.storehead { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-7); align-items: end; padding-block: var(--section-y-tight) var(--space-7); border-bottom: 1px solid var(--border); margin-bottom: var(--space-7); }
.storehead h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h1); line-height: 1.04; margin: var(--space-4) 0 0; letter-spacing: -0.015em; }
.storehead p { font-size: var(--text-lead); color: var(--text-secondary); line-height: 1.6; margin: 0; }
.storefilter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-7); }
.chipbtn { background: none; border: 0; cursor: pointer; padding: 0; }
@media (max-width: 860px) { .storehead { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- Engagement tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
@media (max-width: 940px) { .tiers { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.tier { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); padding: var(--space-6); transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); }
.tier:hover { border-color: var(--ink-900); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tier--featured { border-color: var(--ink-900); border-top: 3px solid var(--rose-300); box-shadow: var(--shadow-sm); }
.tier__flag { position: absolute; top: -13px; left: var(--space-6); }
.tier__head { margin-bottom: var(--space-4); }
.tier__name { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; margin: 0 0 4px; }
.tier__who { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.tier__price { font-family: var(--font-display); font-weight: 600; font-size: 2rem; color: var(--ink-900); line-height: 1; }
.tier__term { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.tier__blurb { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: var(--space-4) 0 var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.tier__feats { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: 11px; flex: 1; }
.tier__feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-primary); }
.tier__feats svg { width: 16px; height: 16px; color: var(--rose-500); stroke-width: 2; flex: none; margin-top: 3px; }
.tier__cta { margin-top: auto; }
.tiers__note { text-align: center; font-size: 14px; color: var(--text-secondary); margin: var(--space-7) 0 0; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--rose-600); border-bottom: 1px solid var(--rose-300); }
.linklike:hover { color: var(--rose-500); }

/* ---------- Cart drawer ---------- */
.cart-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(17,17,17,.42); opacity: 0; pointer-events: none; transition: opacity var(--dur-base); }
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }
.cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(420px, 92vw); background: var(--paper);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); box-shadow: var(--shadow-lg); }
.site .cart.is-open, .cart.cart.is-open { transform: translateX(0) !important; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-5); border-bottom: 1px solid var(--border); }
.cart__head h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin: 0; }
.cart__close { background: none; border: 0; cursor: pointer; color: var(--ink-900); display: inline-flex; padding: 4px; }
.cart__close svg { width: 22px; height: 22px; stroke-width: 1.5; }
.cart__items { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.cart__empty { color: var(--text-muted); font-size: 14px; text-align: center; margin-top: var(--space-8); }
.citem { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: start; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.citem .ph { width: 56px; height: 56px; }
.citem__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; margin: 0 0 2px; }
.citem__type { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-600); }
.citem__price { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.citem__remove { background: none; border: 0; cursor: pointer; color: var(--text-muted); font-size: 12px; letter-spacing: .04em; padding: 4px 0; text-align: left; }
.citem__remove:hover { color: var(--danger); }
.cart__foot { border-top: 1px solid var(--border); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; }
.cart__total span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.cart__total b { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; }
.cart__note { font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.5; }

/* ---------- Apply CTA band ---------- */
.applyband { text-align: center; }
.applyband h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.12; color: var(--paper); max-width: 22ch; margin: 0 auto var(--space-5); text-wrap: balance; }
.applyband h2 em { font-style: italic; color: var(--rose-300); }
.applyband p { font-size: var(--text-lead); color: var(--text-on-ink-dim); max-width: 50ch; margin: 0 auto var(--space-7); line-height: 1.6; }

/* ---------- Apply page (multi-step) ---------- */
.apply { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-9); padding-block: var(--section-y-tight); align-items: start; }
@media (max-width: 940px) { .apply { grid-template-columns: 1fr; gap: var(--space-7); } }
.apply__aside h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h1); line-height: 1.04; margin: var(--space-4) 0 var(--space-5); letter-spacing: -0.015em; }
.apply__aside p { font-size: var(--text-lead); color: var(--text-secondary); line-height: 1.65; margin: 0 0 var(--space-7); }
.apply__steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.apply__steps li { display: flex; gap: var(--space-4); align-items: flex-start; font-size: 14px; color: var(--text-muted); transition: color var(--dur-base); }
.apply__steps li .dot { width: 28px; height: 28px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-family: var(--font-display); color: var(--text-muted); flex: none; transition: all var(--dur-base); }
.apply__steps li.is-active { color: var(--ink-900); }
.apply__steps li.is-active .dot { border-color: var(--rose-300); background: var(--rose-300); color: var(--ink-900); }
.apply__steps li.is-done .dot { border-color: var(--ink-900); background: var(--ink-900); color: var(--paper); }
.apply__steps li > span:last-child { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; flex: 1; min-width: 0; }
.apply__steps li b { font-family: var(--font-sans); font-weight: 500; font-size: 13px; letter-spacing: .04em; line-height: 1.2; }
.apply__steps li small { font-size: 12.5px; line-height: 1.4; }

.apply__panel { background: var(--white); border: 1px solid var(--border); padding: clamp(1.5rem, 3vw, var(--space-7)); }
.apply__progress { height: 2px; background: var(--gray-200); margin-bottom: var(--space-6); position: relative; }
.apply__progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rose-300); transition: width var(--dur-slow) var(--ease-out); }
.apply__stepname { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--rose-600); margin-bottom: var(--space-2); }
.apply__q { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1.18; margin: 0 0 var(--space-6); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.field-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }
.optcards { display: flex; flex-direction: column; gap: var(--space-3); }
.optcard { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); background: var(--white); cursor: pointer; text-align: left; transition: border-color var(--dur-fast), background var(--dur-fast); font-family: var(--font-sans); }
.optcard:hover { border-color: var(--rose-300); }
.optcard.is-sel { border-color: var(--ink-900); background: var(--rose-50); }
.optcard .mark { width: 20px; height: 20px; border: 1px solid var(--border-strong); border-radius: 999px; flex: none; position: relative; }
.optcard.is-sel .mark { border-color: var(--ink-900); }
.optcard.is-sel .mark::after { content: ""; position: absolute; inset: 4px; background: var(--rose-400); border-radius: 999px; }
.optcard .t { font-weight: 500; font-size: 15px; color: var(--ink-900); }
.optcard .s { font-size: 13px; color: var(--text-secondary); }
.apply__actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-7); gap: var(--space-4); }
.apply__done { text-align: center; padding: var(--space-7) 0; }
.apply__done .mark { width: 64px; height: 64px; border: 1px solid var(--rose-300); border-radius: 999px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); color: var(--rose-500); }
.apply__done .mark svg { width: 30px; height: 30px; stroke-width: 1.5; }
.apply__done h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; margin: 0 0 var(--space-3); }
.apply__done p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; max-width: 40ch; margin: 0 auto var(--space-6); }

/* ---------- Proof / testimonials ---------- */
.proof { position: relative; }
.proof__stage { min-height: 240px; display: flex; align-items: center; }
.proof__nav { display: flex; gap: 10px; margin-top: var(--space-6); }
.proof__dot { width: 9px; height: 9px; border-radius: 999px; border: 1px solid var(--border-on-ink); background: transparent; cursor: pointer; padding: 0; transition: background var(--dur-fast); }
.proof__dot.is-active { background: var(--rose-300); border-color: var(--rose-300); }

/* ---------- Insights / blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.post { display: flex; flex-direction: column; cursor: pointer; }
.post .ph { margin-bottom: var(--space-4); }
.post__meta { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.post__date { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.post h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.18; margin: 0 0 8px; transition: color var(--dur-fast); }
.post:hover h3 { color: var(--rose-600); }
.post p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.post__author { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr; } }
.blogpage { padding-block: var(--section-y-tight); }
.blogpage__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-7); border-bottom: 1px solid var(--border); padding-bottom: var(--space-5); flex-wrap: wrap; }
.blogpage__head > div:first-child { flex: 1 1 auto; min-width: 260px; }
.cats { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Community ---------- */
.community { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; }
.community__form { display: flex; gap: var(--space-3); align-items: flex-end; max-width: 460px; }
.community__form > div { flex: 1; }
.community__ok { font-size: 15px; color: var(--rose-300); margin-top: var(--space-3); }
@media (max-width: 860px) { .community { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { background: var(--ink-900); color: var(--text-on-ink); padding-block: var(--space-8) var(--space-6); }
.foot__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-7); border-bottom: 1px solid var(--border-on-ink); }
.foot__brand img { width: 42px; height: 42px; margin-bottom: var(--space-4); }
.foot__brand p { color: var(--text-on-ink-dim); font-size: 14px; line-height: 1.6; max-width: 34ch; }
.foot__col h4 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--rose-300); font-family: var(--font-sans); font-weight: 500; margin: 0 0 var(--space-4); }
.foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.foot__col a, .foot__col li, .foot__col button { font-size: 14px; color: var(--text-on-ink-dim); text-decoration: none; transition: color var(--dur-fast); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-sans); }
.foot__col a:hover, .foot__col button:hover { color: var(--paper); }
.foot__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-5); gap: var(--space-4); flex-wrap: wrap; }
.foot__bottom span { font-size: 12px; color: var(--text-on-ink-dim); letter-spacing: .04em; }
.social { display: flex; gap: 14px; }
.social a { color: var(--text-on-ink-dim); display: inline-flex; transition: color var(--dur-fast); }
.social a:hover { color: var(--rose-300); }
.social svg { width: 18px; height: 18px; stroke-width: 1.5; }
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 560px) { .foot__top { grid-template-columns: 1fr; } }