/* The Grainline — editorial boutique design system
   Tone: quiet, editorial, modern. Warm stone + near-black + muted sage.
   Restraint over ornament. Whitespace as luxury. */

:root {
  /* Surfaces */
  --bg:            #f1eee8;   /* warm stone */
  --bg-soft:       #e8e4db;   /* deeper stone */
  --bg-wash:       #ddd8cc;   /* stone band */
  --bg-card:       #f7f5f0;   /* paper */

  /* Ink */
  --ink:           #1a1816;   /* near-black, barely warm */
  --ink-soft:      #35322d;
  --muted:         #7a766e;   /* cool taupe */
  --muted-soft:    #a8a49b;

  /* Accents — used sparingly */
  --accent:        #5d6b5a;   /* muted sage — primary CTA */
  --accent-deep:   #3f4d3f;   /* hover, deep sage */
  --gold:          #9a8a6a;   /* antique brass — details */
  --rose:          #a88978;   /* dusty terracotta — soft highlights */
  --rose-soft:     #d9c9bd;

  /* Lines */
  --hairline:      #d6d0c3;
  --hairline-strong:#bab3a2;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Mobile safety net — prevents horizontal page scroll no matter what
   a child element tries to do. Without this, a single image missing a
   max-width (or a nav that doesn't wrap) makes the whole page slide
   sideways on a phone. Belt-and-suspenders; ~0 cost. */
html, body { overflow-x: hidden; max-width: 100%; }

/* Media defaults — nothing should ever exceed its container. */
img, video, svg, iframe { max-width: 100%; height: auto; display: block; }

body {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
}

/* ONE gentle luminance from the top — no grain, no heavy wash */
body::before {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 120% 70% at 50% -20%, #fffaf3 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

main, header, footer, section, .container, .container-narrow,
.form, .page-intro, .greeting, .product-grid, .empty-state { position: relative; z-index: 1; }

.container        { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.container-narrow { max-width: 720px;  margin: 0 auto; padding: 0 40px; }

/* Typography */
.serif { font-family: 'Cormorant Garamond', 'Garamond', serif; }
em, .italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400;
}

.eyebrow {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Header — dissolves into the page, concierge not corporate */
header.masthead {
  padding: 28px 0 24px;
  background: transparent;
  /* The masthead establishes its own stacking context so dropdown
     menus float above any page chrome that comes after it (the dark
     fitting-room banner, hero sections, etc.). Without this, the
     dropdown's z-index was bounded by the masthead's normal-flow
     position and the banner below ate the bottom items of the
     Services + Account dropdowns. */
  position: relative;
  z-index: 200;
}
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1160px; margin: 0 auto; padding: 0 40px;
}
.logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.masthead-nav {
  display: flex; gap: 32px;
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.masthead-nav a {
  color: inherit; text-decoration: none;
  transition: color 200ms var(--ease);
  position: relative;
}
.masthead-nav a::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0);
  transform-origin: center; transition: transform 260ms var(--ease);
}
.masthead-nav a:hover { color: var(--ink); }
.masthead-nav a:hover::after { transform: scaleX(0.6); }

/* Hero — editorial scale with line-art art direction */
.page-intro {
  padding: 96px 0 80px;
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 8% 50%, rgba(201,154,149,0.10), transparent 55%),
    radial-gradient(ellipse 60% 80% at 92% 50%, rgba(176,137,104,0.12), transparent 55%);
}
/* Shop page editorial banner — a single portrait photograph, centered */
.shop-banner {
  max-width: 520px;
  margin: 0 auto 64px;
  padding: 0 32px;
}
.shop-banner-image {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-soft);
  position: relative;
}
.shop-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out, ease-out);
}
.shop-banner-image:hover img { transform: scale(1.06); }
.page-intro > .container {
  animation: rise 900ms var(--ease) both;
  position: relative; z-index: 2;
}
.page-intro h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(52px, 7.5vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 880px; margin-inline: auto;
}
.page-intro h1 em {
  color: var(--accent);
  font-weight: 400;
}
.page-intro p {
  font-size: 17px;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
  font-weight: 300;
  line-height: 1.6;
}
.page-intro p a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rose-soft);
  padding-bottom: 1px;
  transition: border-color 200ms var(--ease);
}
.page-intro p a:hover { border-color: var(--accent); }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-intro > .container { animation: none; }
}

/* Editorial band — a framed band between the hero and the form */
.editorial-band {
  background: var(--bg-wash);
  padding: 72px 40px;
  text-align: center;
  position: relative;
}
.editorial-band::before,
.editorial-band::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 80px; height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.editorial-band::before { top: 28px; }
.editorial-band::after { bottom: 28px; }
.editorial-band blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 auto;
}
.editorial-band cite {
  display: block;
  margin-top: 20px;
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Forms — boutique concierge feel */
.form {
  max-width: 720px;
  margin: 48px auto 120px;
  padding: 0 40px;
}
.form-section {
  padding: 64px 0;
  border-top: 1px solid var(--hairline);
  position: relative;
}
.form-section:first-of-type { border-top: none; padding-top: 32px; }

/* Alternating section rhythm — every other form-section gets a soft wash */
.form-section:nth-of-type(even) {
  background: linear-gradient(180deg, transparent, rgba(245, 237, 227, 0.5) 12%, rgba(245, 237, 227, 0.5) 88%, transparent);
  margin-inline: -40px;
  padding-inline: 40px;
  border-radius: 12px;
  border-top-color: transparent;
}

/* Section numerals — Roman-numeral feel for editorial rhythm */
.form-section::before {
  content: counter(section, upper-roman);
  counter-increment: section;
  position: absolute;
  top: 64px; left: -56px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.1em;
  opacity: 0.75;
}
.form { counter-reset: section; }
@media (max-width: 860px) {
  .form-section::before { display: none; }
}

.form-section-header {
  margin-bottom: 32px;
  display: flex; flex-wrap: wrap; align-items: baseline;
  /* The hint sits immediately to the right of the heading with a
     comfortable gap, instead of `space-between` which stranded the
     hint at the far right edge when the section was short (e.g. the
     "Your name" section with only one input). Inline flow reads as
     a coherent pair regardless of how full the section below is. */
  justify-content: flex-start; gap: 8px 28px;
}
.form-section-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 34px);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.form-section .hint {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}
.field { display: flex; flex-direction: column; }
.field label {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Soft enclosed inputs — champagne-tinted, no harsh outlines */
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 18px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238a7f72' stroke-width='1.2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
.field textarea {
  line-height: 1.55;
  resize: vertical;
  min-height: 96px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted-soft);
  font-style: italic;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--hairline-strong);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(176, 137, 104, 0.12);
  background: var(--bg-card);
}
.field .unit {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin-left: 8px;
}

/* Pills — used on home page */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--bg-card);
  cursor: pointer;
  user-select: none;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.pill:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: var(--bg);
}
input[type="radio"].pill-input,
input[type="checkbox"].pill-input { display: none; }
input[type="radio"].pill-input:checked + label.pill,
input[type="checkbox"].pill-input:checked + label.pill {
  background: var(--bg-soft);
  border-color: var(--gold);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* Tiles — vibes + silhouettes */
.tile-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.tile-grid--small { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.tile {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 170px;
  padding: 22px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 200ms var(--ease);
}
.tile-grid--small .tile { min-height: 110px; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(47, 42, 36, 0.15);
  border-color: var(--hairline-strong);
}

.tile-content { position: relative; z-index: 2; }
.tile-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tile-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

.tile-check {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--accent);
  opacity: 0; transform: scale(0.9);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  z-index: 3;
  box-shadow: 0 2px 8px rgba(47,42,36,0.12);
}
.tile:has(input:checked) {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 10px 30px -12px rgba(176, 137, 104, 0.35);
}
.tile:has(input:checked) .tile-check { opacity: 1; transform: scale(1); }

/* Photographic vibe tiles — an image DOES the work of the question.
   She's not reading a label and picking a word; she's looking at a
   picture and recognising herself in it. Opt in per-tile via a
   --tile-img CSS custom property so we can roll them out one at a
   time; any tile without that var falls back to the gradient wash. */
.tile--vibe[style*="--tile-img"] {
  background: var(--tile-img) center/cover no-repeat, var(--bg-card);
  color: #f7efdf;
  min-height: 200px;
  align-items: flex-end;
}
.tile--vibe[style*="--tile-img"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(26, 24, 22, 0) 40%,
    rgba(26, 24, 22, 0.62) 100%);
  transition: opacity 260ms var(--ease);
  z-index: 1;
}
.tile--vibe[style*="--tile-img"] .tile-content { z-index: 2; }
.tile--vibe[style*="--tile-img"] .tile-title {
  color: #fbf4e5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.tile--vibe[style*="--tile-img"] .tile-desc {
  color: #e8dcc3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.tile--vibe[style*="--tile-img"] .tile-check {
  background: rgba(255, 255, 255, 0.96);
}
.tile--vibe[style*="--tile-img"]:hover::before { opacity: 0.85; }

/* Vibe-specific washes — muted, not shouting */
.tile--vibe { color: var(--ink); }
.tile--minimalist { background: linear-gradient(145deg, #f7f3ec 0%, #ebe4d6 100%); }
.tile--classic    { background: linear-gradient(145deg, #f4ecdd 0%, #ddcdb0 100%); }
.tile--elegant    { background: linear-gradient(145deg, #f2ebe0 0%, #d2c2a3 100%); }
.tile--romantic   { background: linear-gradient(145deg, #f7e6e3 0%, #e8ccc8 100%); }
.tile--edgy       { background: linear-gradient(145deg, #48403c 0%, #2a2622 100%); color: #f5ede3; }
.tile--edgy .tile-title { color: #f5ede3; }
.tile--edgy .tile-desc  { color: #c9bca0; }
.tile--bohemian   { background: linear-gradient(145deg, #e4d2b4 0%, #b8936a 100%); }
.tile--preppy     { background: linear-gradient(145deg, #e5ecee 0%, #a2b8c4 100%); }
.tile--sporty     { background: linear-gradient(145deg, #ecefea 0%, #b7c4b4 100%); }
.tile--trendy     { background: linear-gradient(145deg, #f3e2d7 0%, #e0a894 100%); }
.tile--vintage    { background: linear-gradient(145deg, #ecdcc4 0%, #a0785c 100%); }

.tile--silhouette { background: var(--bg-card); }
.tile--silhouette .tile-title { font-size: 18px; }

/* Swatches */
.swatch-grid {
  display: grid; gap: 22px 14px;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.swatch {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
  position: relative;
}
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.swatch:hover .swatch-circle { transform: scale(1.06); border-color: var(--gold); }
.swatch:has(input:checked) .swatch-circle {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--gold);
}
.swatch--avoid:has(input:checked) .swatch-circle {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--ink);
  position: relative;
}
.swatch--avoid:has(input:checked) .swatch-circle::after {
  content: ""; position: absolute;
  top: 50%; left: -6px; right: -6px; height: 2px;
  background: var(--ink); transform: rotate(-45deg);
}
.swatch-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* Inspiration gallery + uploader */
.image-gallery {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-bottom: 24px;
}
.image-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  transition: box-shadow 260ms var(--ease);
}
.image-card:hover { box-shadow: 0 10px 30px -12px rgba(47,42,36,0.18); }
.image-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-delete { position: absolute; top: 8px; right: 8px; margin: 0; }
.image-delete button {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(47, 42, 36, 0.72);
  color: var(--bg); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 200ms var(--ease);
}
.image-delete button:hover { background: var(--accent-deep); }

.image-analysis {
  position: absolute; inset: auto 0 0 0;
  padding: 14px;
  background: linear-gradient(to top, rgba(47,42,36,0.92), rgba(47,42,36,0));
  color: var(--bg);
  opacity: 0; transition: opacity 220ms var(--ease);
}
.image-card:hover .image-analysis { opacity: 1; }
.image-analysis-summary {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px; line-height: 1.35;
  margin-bottom: 8px;
}
.image-analysis-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.image-analysis-tags span {
  font-size: 10px; letter-spacing: 0.06em;
  padding: 2px 7px; background: rgba(255,255,255,0.16);
  border-radius: 3px; text-transform: lowercase;
}

.uploader { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.uploader-drop {
  display: flex; align-items: center; justify-content: center;
  min-height: 132px; padding: 28px;
  border: 1.5px dashed var(--hairline-strong);
  border-radius: 8px;
  background: var(--bg-soft);
  cursor: pointer;
  text-align: center;
  transition: background 220ms var(--ease), border-color 220ms var(--ease);
}
.uploader-drop:hover {
  border-color: var(--gold);
  background: #faf3e8;
}
.uploader-drop input { display: none; }
.uploader-text strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 4px;
}
.uploader-text span {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 16px 44px;
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fbf7f2;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(47,42,36,0.06), 0 8px 20px -8px rgba(138,106,82,0.35);
  transition: transform 260ms var(--ease), background 220ms var(--ease), box-shadow 260ms var(--ease);
}
.btn:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(47,42,36,0.08), 0 14px 28px -10px rgba(92,74,58,0.4);
}
/* Tactile press feedback — the "the interface heard me" micro-beat.
   Subtle scale beats no feedback every time on primary CTAs. */
.btn:active {
  transform: scale(0.97);
  transition-duration: 120ms;
}
.btn-secondary {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.btn-secondary:hover {
  background: var(--bg-soft);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

.form-actions { text-align: center; padding: 56px 0 0; }

/* Recommendations page */
.greeting {
  padding: 80px 0 48px;
  text-align: center;
}
.greeting h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 56px);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.greeting h1 em { color: var(--accent); }
.greeting p { font-size: 16px; color: var(--muted); }
.filter-chip {
  display: inline-block; margin: 12px 4px 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 56px 32px;
  padding: 56px 40px 120px;
  max-width: 1160px;
  margin: 0 auto;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), opacity 220ms ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -16px rgba(47,42,36,0.18);
}
.card.is-hiding {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

/* --- Card action buttons (heart / hide) ---------------------------------
   Sit in the top-right of the image, revealed on card hover (always on mobile).
   Heart fills stone-red when active. Hide is a quiet X. */
.card-actions {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.card:hover .card-actions,
.card:focus-within .card-actions,
.card-action.is-active {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 720px) {
  .card-actions { opacity: 1; transform: none; }
}
.card-action {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 160ms ease-out, background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.card-action:hover { transform: scale(1.06); }
.card-action:active { transform: scale(0.94); }
.card-action-love { color: var(--muted); }
.card-action-love svg path { fill: transparent; stroke: currentColor; }
.card-action-love.is-active {
  color: var(--rose);
  border-color: var(--rose-soft);
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.card-action-love.is-active svg path { fill: currentColor; stroke: currentColor; }
.card-action-hide { color: var(--muted); }
.card-action-hide:hover { color: var(--ink); }
.card-action-wardrobe { color: var(--muted); }
.card-action-wardrobe svg path { fill: transparent; stroke: currentColor; }
.card-action-wardrobe:hover { color: var(--ink); }
.card-action-wardrobe.is-active {
  color: var(--ink);
  background: var(--ink);
  border-color: var(--ink);
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.card-action-wardrobe.is-active svg path {
  fill: none;
  stroke: var(--paper, #f7f5f0);
}

/* --- Danger / destructive action button --------------------------------- */
.btn-danger {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 12px 22px;
  background: transparent;
  color: #7a2a2a;
  border: 1px solid #c08888;
  border-radius: 4px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 160ms ease-out;
}
.btn-danger:hover { background: #7a2a2a; color: var(--bg-card); }
.btn-danger:active { transform: scale(0.97); }

/* --- Feedback callout (heart/X teaching moment) ------------------------- */
.feedback-callout {
  margin: 8px 0 40px;
  transition: opacity 220ms ease, transform 220ms ease;
}
.feedback-callout.is-dismissing { opacity: 0; transform: translateY(-4px); }
.feedback-callout-inner {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.feedback-callout-icons {
  display: flex; gap: 8px; flex-shrink: 0;
  padding-top: 2px;
}
.feedback-callout-heart,
.feedback-callout-x {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
}
.feedback-callout-heart { color: var(--rose); }
.feedback-callout-x { color: var(--muted); }
.feedback-callout p {
  flex: 1;
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.feedback-callout p em { color: var(--ink); font-style: italic; font-weight: 500; }
.feedback-callout-xglyph {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
}
.feedback-callout-dismiss {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted-soft);
  flex-shrink: 0;
  transition: color 160ms ease, transform 160ms ease;
}
.feedback-callout-dismiss:hover { color: var(--ink-soft); }
.feedback-callout-dismiss:active { transform: scale(0.94); }

/* "Why we picked this" line — a single italic breath under the fit note. */
.card-why {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--accent-deep);
  margin-top: 4px;
  line-height: 1.4;
}
.card-image {
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  text-decoration: none;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.card-image:hover img {
  transform: scale(1.03);
}
.card-image-placeholder {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
  text-align: center;
  padding: 24px;
  line-height: 1.3;
}
.card-body {
  padding: 26px 26px 28px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.card-brand {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.card-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  min-height: 2.4em;
  margin-top: 4px;
}
.card-size {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 10px 0 2px;
}
.card-size strong { font-weight: 500; }
.card-size em { color: var(--accent); font-style: italic; }
.card-fit-note {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
}
.card-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--ink);
  margin-top: auto;
  padding-top: 18px;
}
.card-price .sale { color: var(--accent); font-weight: 500; }
.card-price .strike {
  color: var(--muted); text-decoration: line-through;
  font-size: 15px; margin-left: 8px;
}
.card-cta {
  margin-top: 14px;
  display: block; text-align: center;
  padding: 12px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  border-radius: 999px;
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.card-cta:hover {
  background: var(--ink);
  color: var(--bg);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.card-unavailable {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--accent);
  margin-top: 10px;
}

.empty-state { padding: 120px 40px; text-align: center; }
.empty-state h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 32px; margin-bottom: 16px;
}
.empty-state p { color: var(--muted); max-width: 480px; margin: 0 auto 32px; }

.error-banner {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 18px 24px;
  background: var(--rose-soft);
  color: #7a4040;
  border: 1px solid var(--rose);
  border-radius: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  text-align: center;
}

/* ----------------------------------------------------------------------
   Newsletter strip. Sits above the legal footer on every public page
   for signed-out visitors. Editorial-leaning — left-aligned copy,
   inline form, sage button. Designed to read as part of the page
   rather than an interruption. The strip itself is the same warm
   cream wash as the footer to make them feel like one thing.
---------------------------------------------------------------------- */
.newsletter-strip {
  padding: 56px 0 48px;
  border-top: 1px solid var(--hairline);
  background: var(--bg-wash);
}
.newsletter-inner {
  max-width: 880px; margin: 0 auto; padding: 0 40px;
}
.newsletter-copy { text-align: left; max-width: 560px; }
.newsletter-copy .eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: #b08a3a; margin-bottom: 14px;
}
.newsletter-copy h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem; line-height: 1.15; margin: 0 0 12px; color: var(--ink);
  font-weight: 500;
}
.newsletter-copy p {
  font-size: 0.96rem; color: var(--muted); line-height: 1.6;
  margin: 0 0 22px;
}
.newsletter-form {
  display: flex; gap: 0; align-items: stretch;
  max-width: 480px;
  border: 1px solid var(--hairline);
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 160ms ease-out;
}
.newsletter-form:focus-within { border-color: var(--ink); }
.newsletter-form input[type="email"] {
  flex: 1; padding: 14px 16px; border: none; background: transparent;
  font: inherit; font-size: 0.96rem; color: var(--ink); outline: none;
}
.newsletter-form button {
  padding: 0 22px; border: none;
  background: #5d6b5a; color: #fff; cursor: pointer;
  font: inherit; font-size: 0.92rem; letter-spacing: 0.04em;
  transition: background 160ms ease-out, transform 160ms ease-out;
}
.newsletter-form button:hover { background: #4d5a4a; }
.newsletter-form button:active { transform: scale(0.98); }
.newsletter-status {
  margin: 14px 0 0;
  font-size: 0.92rem;
  font-style: italic;
  min-height: 1.2em;
}
@media (max-width: 600px) {
  .newsletter-copy h2 { font-size: 1.6rem; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { padding: 14px; }
}

footer.site-footer {
  padding: 48px 0;
  border-top: 1px solid var(--hairline);
  background: var(--bg-wash);
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.site-footer-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 40px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.site-footer-links {
  display: flex; gap: 24px; align-items: center;
}
.site-footer-links a {
  color: var(--muted); text-decoration: none;
  transition: color 160ms ease;
}
.site-footer-links a:hover { color: var(--ink); }

/* Termly-embedded legal pages. Termly injects HTML directly (no iframe),
   so we override its defaults to match the site — Cormorant Garamond for
   headings, warm stone palette, editorial spacing. We scope every rule
   under .legal-embed so Termly's own chrome stays unaffected elsewhere. */
.legal-embed {
  padding: 0 0 96px;
}
.legal-embed .container {
  max-width: 760px;
}
/* Headings — match the app's serif display type */
.legal-embed h1,
.legal-embed h2,
.legal-embed h3,
.legal-embed h4,
.legal-embed h5,
.legal-embed h6 {
  font-family: 'Cormorant Garamond', 'Garamond', serif !important;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.legal-embed h1 { font-size: 32px; margin: 48px 0 20px; }
.legal-embed h2 { font-size: 26px; margin: 40px 0 16px; }
.legal-embed h3 { font-size: 21px; margin: 32px 0 12px; }
.legal-embed h4 { font-size: 18px; margin: 24px 0 10px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }

/* Body copy — same serif as the rest of the site, generous leading */
.legal-embed p,
.legal-embed li,
.legal-embed span,
.legal-embed div,
.legal-embed td,
.legal-embed th {
  font-family: 'Cormorant Garamond', 'Garamond', serif !important;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 400;
}
.legal-embed p { margin: 0 0 18px; }
.legal-embed ul,
.legal-embed ol { margin: 0 0 18px; padding-left: 22px; }
.legal-embed li { margin: 0 0 8px; }

/* Links — muted sage like the rest of the site */
.legal-embed a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rose-soft);
  transition: border-color 200ms var(--ease);
}
.legal-embed a:hover { border-color: var(--accent); }

/* Emphasis */
.legal-embed strong,
.legal-embed b { color: var(--ink); font-weight: 600; }
.legal-embed em,
.legal-embed i { font-style: italic; }

/* Tables — in case Termly uses them for the data-sharing matrix */
.legal-embed table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}
.legal-embed th,
.legal-embed td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.legal-embed th {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 11px !important;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Horizontal rules — softer hairline */
.legal-embed hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 40px 0;
}

/* Responsive */
@media (max-width: 720px) {
  .container, .container-narrow { padding: 0 24px; }
  .masthead-inner { padding: 0 24px; }
  .page-intro { padding: 56px 0 32px; }
  .form { padding: 0 24px; margin: 24px auto 80px; }
  .form-section { padding: 40px 0; }
  .product-grid { padding: 40px 24px 80px; gap: 40px 20px; }
  .site-footer-inner { padding: 0 24px; }
}

/* Masthead on phones — five nav links + logo won't fit on one row at
   375px. Stack the logo over the nav, center both, and tighten the
   tracking so the links fit without wrapping awkwardly. Mirrors how
   editorial mastheads print: title on top, section rubric below. */
@media (max-width: 620px) {
  .masthead-inner {
    flex-direction: column;
    gap: 14px;
    align-items: center;
    text-align: center;
  }
  .masthead-nav {
    gap: 18px;
    font-size: 13px;
    letter-spacing: 0.06em;
    flex-wrap: wrap;
    justify-content: center;
  }
  header.masthead { padding: 22px 0 18px; }
}

/* Fit-nudge bar — wrap cleanly on narrow screens. */
@media (max-width: 620px) {
  .fit-nudge-inner {
    flex-wrap: wrap;
    gap: 8px 12px;
    text-align: center;
    justify-content: center;
  }
}

/* Site footer — stack the copyright + links on phones. */
@media (max-width: 620px) {
  .site-footer-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* ------------------------------------------------------------------------ */
/* Landing page                                                             */
/* ------------------------------------------------------------------------ */

.landing-hero {
  padding: 120px 0 90px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  border-bottom: 1px solid var(--hairline);
}
.landing-hero-inner { max-width: 820px; }

/* Full-bleed editorial hero: linen texture background, type overlay */
.landing-hero-full {
  position: relative;
  padding: 0;
  min-height: min(88vh, 840px);
  background-color: var(--bg);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  text-align: left;
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
/* Scrim: warm cream on the left for type legibility; fades to transparent
   on the right so the linen texture reads cleanly. Bottom fade bridges
   tonally into the cream section that follows (no hard divider). */
.landing-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(241, 238, 232, 0) 62%,
      rgba(232, 228, 219, 0.92) 100%),
    linear-gradient(90deg,
      rgba(241, 238, 232, 0.86) 0%,
      rgba(241, 238, 232, 0.58) 34%,
      rgba(241, 238, 232, 0.12) 62%,
      rgba(241, 238, 232, 0) 100%);
}
.landing-hero-inner-full {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(96px, 14vh, 180px) clamp(28px, 6vw, 80px)
           clamp(120px, 16vh, 200px);
  min-height: inherit;
  display: flex;
  align-items: center;
}
.landing-hero-full .landing-hero-copy {
  max-width: 560px;
}
.landing-hero-full .landing-title {
  text-align: left;
  margin: 16px 0 20px;
}
.landing-hero-full .landing-lede {
  margin-left: 0;
  margin-right: 0;
  max-width: 480px;
}
.landing-hero-full .landing-cta-row {
  justify-content: flex-start;
}
.landing-hero-footnote {
  margin: 14px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}
@media (max-width: 640px) {
  .landing-hero-full {
    min-height: 78vh;
    background-position: center 30%;
  }
  .landing-hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(241, 238, 232, 0.55) 0%,
        rgba(241, 238, 232, 0.8) 38%,
        rgba(241, 238, 232, 0.92) 72%,
        rgba(232, 228, 219, 0.96) 100%);
  }
}
/* Kill the hairline under the full-bleed hero so the tonal fade reads as
   one continuous surface — no hard rectangle between image and section. */
.landing-hero-full + .landing-section-soft {
  border-top: 0;
}

/* Inline FTC-required affiliate disclosure, sized to be honest without
   being loud. Sits near product grids on results pages. */
.affiliate-note {
  max-width: 520px;
  margin: 0 auto 1.5rem;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-style: italic;
}
.affiliate-note a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--hairline);
  transition: text-decoration-color 180ms ease;
}
.affiliate-note a:hover { text-decoration-color: var(--ink); color: var(--ink); }

/* Quiet pointer from /shop into /style for deeper taste profiling.
   Replaces the old pill-block duplicate and sits just above the submit. */
.taste-nudge {
  max-width: 640px;
  margin: 32px 0 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
}
.taste-nudge a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
  transition: border-color 180ms ease;
}
.taste-nudge a:hover { border-color: var(--ink); }

/* ------------------------------------------------------------------------ */
/* Shared page masthead — same integration treatment as .landing-hero-full  */
/* Used by /shop, /style, /discover. Each page sets --masthead-img inline.  */
/* ------------------------------------------------------------------------ */
.page-masthead {
  position: relative;
  padding: 0;
  min-height: clamp(360px, 52vh, 560px);
  background-color: var(--bg);
  background-image: var(--masthead-img);
  background-size: cover;
  background-position: var(--masthead-pos, center 40%);
  background-repeat: no-repeat;
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 0;
}
.page-masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(241, 238, 232, 0) 60%,
      rgba(241, 238, 232, 0.92) 100%),
    linear-gradient(90deg,
      rgba(241, 238, 232, 0.82) 0%,
      rgba(241, 238, 232, 0.55) 36%,
      rgba(241, 238, 232, 0.12) 64%,
      rgba(241, 238, 232, 0) 100%);
}
.page-masthead-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 96px) clamp(28px, 6vw, 80px)
           clamp(64px, 10vh, 112px);
  min-height: inherit;
  display: flex;
  align-items: center;
}
.page-masthead-copy {
  max-width: 560px;
}
.page-masthead .eyebrow {
  margin-bottom: 12px;
}
.page-masthead h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.4px;
  margin: 0 0 18px;
  color: var(--ink);
}
.page-masthead h1 em {
  font-style: italic;
}
.page-masthead p {
  margin: 0;
  max-width: 480px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 640px) {
  .page-masthead {
    min-height: 360px;
    background-position: center 30%;
  }
  .page-masthead::after {
    background:
      linear-gradient(180deg,
        rgba(241, 238, 232, 0.5) 0%,
        rgba(241, 238, 232, 0.82) 40%,
        rgba(241, 238, 232, 0.94) 100%);
  }
}

/* Split hero: editorial image + copy */
.landing-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  text-align: left;
  min-height: min(86vh, 820px);
  align-items: stretch;
  background: var(--bg);
}
.landing-hero-split .landing-hero-copy {
  padding: clamp(48px, 8vw, 120px) clamp(28px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
}
.landing-hero-split .landing-title {
  text-align: left;
  margin-left: 0;
}
.landing-hero-split .landing-lede {
  margin-left: 0;
  margin-right: 0;
}
.landing-hero-split .landing-cta-row {
  justify-content: flex-start;
}
.landing-hero-image {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
}
.landing-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transform: scale(1.02);
  transition: transform 1.6s var(--ease-out, ease-out);
}
.landing-hero-split:hover .landing-hero-image img {
  transform: scale(1.05);
}
@media (max-width: 860px) {
  .landing-hero-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .landing-hero-image {
    aspect-ratio: 4/5;
    order: -1;
  }
}
.landing-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 1.05;
  color: var(--ink);
  margin: 16px 0 20px;
  letter-spacing: -0.5px;
}
.landing-title em {
  font-style: italic;
  color: var(--accent);
}
.landing-lede {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.landing-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.landing-section {
  padding: 96px 0;
}
.landing-section-soft {
  background: var(--bg-soft);
  border-block: 1px solid var(--hairline);
}
.landing-section-title {
  font-size: 38px;
  font-weight: 400;
  margin: 0 0 40px;
  letter-spacing: -0.2px;
}
.landing-section-title em {
  font-style: italic;
  color: var(--accent);
}
.landing-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.landing-section-header .landing-section-title { margin: 0; }

/* Mood tiles */
.mood-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.mood-tile {
  aspect-ratio: 3/4;
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
  position: relative;
  overflow: hidden;
}
.mood-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,24,22,0) 40%, rgba(26,24,22,0.65) 100%);
  z-index: 1;
  transition: opacity 280ms var(--ease);
  pointer-events: none;
}
.mood-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
  transition: transform 700ms var(--ease-out, ease-out), filter 280ms var(--ease);
  filter: saturate(0.92);
}
.mood-tile .mood-label,
.mood-tile .mood-desc { color: #fbf7f2; }
.mood-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -18px rgba(47,42,36,0.28);
  border-color: var(--hairline-strong);
}
.mood-tile:hover .mood-img { transform: scale(1.04); filter: saturate(1); }
.mood-tile:hover::before { opacity: 0.85; }
.mood-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 400;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 18px rgba(0,0,0,0.35);
}
.mood-desc {
  font-size: 13px;
  font-style: italic;
  margin-top: 6px;
  position: relative;
  z-index: 2;
  opacity: 0.92;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

/* Category chips */
.category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.category-chip {
  padding: 14px 26px;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-card);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease), transform 240ms var(--ease);
  letter-spacing: 0.2px;
}
.category-chip:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Featured grid */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 20px;
}
.featured-card {
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: transform 0.3s var(--ease);
}
.featured-card:hover { transform: translateY(-3px); }
.featured-image {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-soft);
  margin-bottom: 14px;
}
.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.featured-card:hover .featured-image img { transform: scale(1.04); }
.featured-brand {
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.featured-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 4px;
  max-height: 2.6em;
  overflow: hidden;
}
.featured-price {
  font-size: 13px;
  color: var(--ink-soft);
}
.featured-footer {
  text-align: center;
  margin-top: 60px;
}

.landing-close .landing-manifesto {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.landing-close .landing-manifesto p { margin: 0 0 16px; }
.landing-close .landing-manifesto a {
  color: var(--accent);
  font-style: italic;
}

/* ---- Welcome section — the empathetic "we see you" copy ---- */
.landing-welcome-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.landing-welcome-inner .eyebrow {
  justify-content: center;
  display: inline-block;
}
.landing-welcome-inner h2 {
  font-size: clamp(32px, 4.3vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 12px 0 32px;
  font-weight: 400;
}
.landing-welcome-inner p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 20px;
}
.landing-welcome-inner p em {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

/* ---- Centered section header variant ---- */
.landing-section-header-centered {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.landing-section-sub {
  font-size: 17px;
  color: var(--muted);
  margin-top: 8px;
}

/* ---- Three-step service section ---- */
.service-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  max-width: 960px;
  margin: 0 auto;
}
.service-step {
  text-align: center;
  padding: 0 12px;
}
.service-numeral {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 18px;
  letter-spacing: 0.05em;
}
.service-step h3 {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: var(--ink);
}
.service-step p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}
/* Inline pricing under each service heading. Quiet, italic, hairline above. */
.service-price {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: -6px 0 14px;
}

/* ---- "What the audit includes" — numbered editorial list ---- */
.audit-includes {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  max-width: 760px;
  display: grid;
  gap: 28px;
}
.audit-includes li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}
.audit-includes li:last-child { border-bottom: none; }
.audit-includes-num {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1;
  padding-top: 4px;
}
.audit-includes h3 {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.audit-includes p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}
@media (max-width: 640px) {
  .audit-includes li {
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }
  .audit-includes-num { font-size: 22px; }
  .audit-includes h3 { font-size: 20px; }
}

/* ---- "What you receive" list ---- */
.landing-receive-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.receive-list {
  list-style: none;
  padding: 0;
  margin: 32px auto 0;
  max-width: 580px;
  text-align: left;
}
.receive-list li {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
.receive-list li:last-child { border-bottom: none; }
.receive-list li::before {
  content: "—";
  color: var(--gold);
  margin-right: 14px;
  font-style: italic;
}

/* ---- Final invitation section ---- */
.landing-invitation {
  text-align: center;
}
.landing-invitation-title {
  font-size: clamp(40px, 5.5vw, 60px);
  line-height: 1.1;
  margin: 12px 0 20px;
}
.landing-invitation-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}
.landing-invitation-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 40px;
}
.landing-cta-centered {
  justify-content: center;
}

@media (max-width: 900px) {
  .mood-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-section { padding: 72px 0; }
  .service-steps { grid-template-columns: 1fr; gap: 48px; max-width: 480px; }
}
@media (max-width: 560px) {
  .landing-hero { padding: 72px 20px 56px; }
  .landing-section { padding: 56px 0; }
  .landing-section-title { font-size: 30px; }
  .receive-list li { font-size: 18px; padding: 18px 0; }
}

/* ========================================================================= */
/* Motion layer (Emil principles — editorial, restrained)                    */
/* Appended so it overrides earlier single-curve/all-transition declarations.*/
/* ========================================================================= */

:root {
  /* Stronger custom curves — the built-in CSS easings are too weak */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);
  /* Existing --ease kept as-is for backward compat, mapped to editorial ease-out */
  --ease:         cubic-bezier(0.23, 1, 0.32, 1);

  --dur-press:    160ms;
  --dur-hover:    220ms;
  --dur-enter:    440ms;
  --dur-reveal:   480ms;
}

/* --- Pressable elements: instant feedback on press --- */
.btn,
.btn-ghost,
.btn-secondary,
.pill,
.tile,
.category-chip,
.card-cta,
.swatch,
.masthead-nav a,
.landing-cta-row a {
  transition:
    transform var(--dur-press) var(--ease-out),
    background var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}
.btn:active,
.btn-ghost:active,
.btn-secondary:active,
.pill:active,
.tile:active,
.category-chip:active,
.card-cta:active {
  transform: scale(0.97);
}
/* Buttons that also translateY on hover: preserve that intent on active too */
.btn:active { transform: translateY(0) scale(0.97); }

/* --- Hover is only for real pointers (no tap-stick on phones) --- */
@media (hover: none) {
  .btn:hover,
  .btn-ghost:hover,
  .btn-secondary:hover,
  .tile:hover,
  .mood-tile:hover,
  .category-chip:hover,
  .card:hover,
  .card-image:hover img,
  .featured-card:hover,
  .featured-card:hover .featured-image img,
  .swatch:hover .swatch-circle { transform: none !important; box-shadow: none; }
}

/* --- Card image zoom: stronger curve, slightly tighter --- */
.card-image img,
.featured-image img {
  transition: transform 500ms var(--ease-out);
  will-change: transform;
}

/* --- Card hover lift: explicit props only, custom ease --- */
.card {
  transition:
    transform 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out);
}
.mood-tile {
  transition:
    transform 360ms var(--ease-out),
    box-shadow 360ms var(--ease-out),
    border-color 240ms var(--ease-out);
}
.mood-tile::before {
  transition: opacity 360ms var(--ease-out);
}

/* --- Enter animations: a fade + whisper of growth --- */
@keyframes gl-fade-up {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes gl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gl-hero-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Landing hero stagger — runs once on page load.
   Using animation rather than transition because the elements aren't
   toggling state; they're arriving. Set will-change only for duration. */
.landing-hero .eyebrow,
.landing-hero .landing-title,
.landing-hero .landing-lede,
.landing-hero .landing-cta-row {
  opacity: 0;
  animation: gl-hero-in var(--dur-enter) var(--ease-out) forwards;
}
.landing-hero .eyebrow         { animation-delay: 60ms;  }
.landing-hero .landing-title   { animation-delay: 140ms; }
.landing-hero .landing-lede    { animation-delay: 260ms; }
.landing-hero .landing-cta-row { animation-delay: 360ms; }

/* Editorial band quote fades in just after hero title */
.landing-hero + .editorial-band blockquote,
.landing-hero + .editorial-band cite {
  opacity: 0;
  animation: gl-fade-up var(--dur-reveal) var(--ease-out) forwards;
}
.landing-hero + .editorial-band blockquote { animation-delay: 480ms; }
.landing-hero + .editorial-band cite       { animation-delay: 620ms; }

/* --- Scroll-triggered reveal for below-fold sections --- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger children of a revealed container.
   Kept short (60ms) — long delays make the grid feel slow. */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 440ms var(--ease-out),
    transform 440ms var(--ease-out);
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Cap the stagger at 300ms (item 6+). Beyond that, a long grid starts to
   feel slow — everything 6+ lands together, which still reads as staggered
   relative to items 1–5 but doesn't make the user wait ~1s for the last card. */
[data-reveal-stagger].is-visible > *:nth-child(1)  { transition-delay:   0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2)  { transition-delay:  60ms; }
[data-reveal-stagger].is-visible > *:nth-child(3)  { transition-delay: 120ms; }
[data-reveal-stagger].is-visible > *:nth-child(4)  { transition-delay: 180ms; }
[data-reveal-stagger].is-visible > *:nth-child(5)  { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(n+6) { transition-delay: 300ms; }

/* --- Form (shop page) sections: quiet fade-up on arrival --- */
.form .form-section {
  opacity: 0;
  animation: gl-fade-up var(--dur-enter) var(--ease-out) forwards;
}
.form .form-section:nth-of-type(1) { animation-delay:  60ms; }
.form .form-section:nth-of-type(2) { animation-delay: 140ms; }
.form .form-section:nth-of-type(3) { animation-delay: 220ms; }
.form .form-section:nth-of-type(4) { animation-delay: 300ms; }
.form .form-section:nth-of-type(5) { animation-delay: 380ms; }
.form .form-actions {
  opacity: 0;
  animation: gl-fade-up var(--dur-enter) var(--ease-out) forwards;
  animation-delay: 460ms;
}

/* --- Focus rings: visible but on-brand --- */
.btn:focus-visible,
.btn-ghost:focus-visible,
.btn-secondary:focus-visible,
.category-chip:focus-visible,
.mood-tile:focus-visible,
.pill:focus-visible + .pill-input,
.card-cta:focus-visible,
.masthead-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Reduced motion: keep opacity, drop translation/scale --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
  [data-reveal],
  [data-reveal-stagger] > *,
  .form .form-section,
  .form .form-actions,
  .landing-hero .eyebrow,
  .landing-hero .landing-title,
  .landing-hero .landing-lede,
  .landing-hero .landing-cta-row,
  .landing-hero + .editorial-band blockquote,
  .landing-hero + .editorial-band cite {
    opacity: 1 !important;
    transform: none !important;
  }
  .btn:active,
  .btn-ghost:active,
  .pill:active,
  .tile:active,
  .category-chip:active,
  .card-cta:active { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Fit nudge strip ----------
   Appears above all page content when the current session has clickouts
   with no fit feedback yet. Quiet: not a popover, not a modal. Part of
   the page scroll, but visually distinct enough to catch a returning
   user's eye. */
.fit-nudge {
  background: #1a1a1a;
  color: #f6efe2;
  font-size: 14px;
  border-bottom: 1px solid #000;
}
.fit-nudge-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.fit-nudge-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
  padding-right: 12px;
  border-right: 1px solid rgba(246, 239, 226, 0.25);
}
.fit-nudge-copy { flex: 1 1 auto; font-style: italic; }
.fit-nudge-btn {
  color: #1a1a1a;
  background: #f6efe2;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms ease-out;
}
.fit-nudge-btn:hover { background: #fff; }
.fit-nudge-btn:active { transform: scale(0.97); }
@media (max-width: 600px) {
  .fit-nudge-eyebrow { border-right: none; padding-right: 0; flex-basis: 100%; }
  .fit-nudge-inner { padding: 10px 16px; gap: 8px; }
}

/* ====================================================================
   /audit hero — left-aligned typography, generous whitespace, cleaner
   composition than the generic .page-masthead. Sits over the same
   background-image system, just with a different inner layout.
==================================================================== */
.audit-hero { min-height: clamp(440px, 60vh, 620px); }
.audit-hero-copy { max-width: 600px; }
.audit-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0 0 22px;
  color: var(--ink);
}
.audit-hero-title em { font-style: italic; color: var(--accent); }
.audit-hero-sub {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  max-width: 520px;
  margin: 0 0 32px;
}
.audit-hero-cta { margin-top: 4px; }
@media (max-width: 640px) {
  .audit-hero { min-height: 420px; }
  .audit-hero-sub { font-size: 17px; }
}

/* ====================================================================
   /audit/confirmed — quiet, typography-led
==================================================================== */
.audit-confirmed-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.audit-confirmed-title {
  font-size: clamp(44px, 6vw, 68px);
  line-height: 1.05;
  margin: 14px 0 32px;
  color: var(--ink);
}
.audit-confirmed-title em { font-style: italic; color: var(--accent); }
.audit-confirmed-body {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink);
  text-align: left;
  max-width: 560px;
  margin: 0 auto;
}
.audit-confirmed-body p { margin: 0 0 1.1em; }
.audit-confirmed-aside {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin: 1.4rem auto 0;
  max-width: 520px;
  word-break: break-word;
}
.audit-confirmed-aside a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.audit-confirmed-aside a:hover { border-color: var(--accent); }

/* ====================================================================
   /audit/intake — multi-section form
==================================================================== */
.intake-page { padding-bottom: 100px; }
.intake-container { max-width: 720px; }
.intake-header { text-align: center; margin: 0 auto 48px; max-width: 600px; }
.intake-title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  margin: 12px 0 18px;
  color: var(--ink);
}
.intake-title em { font-style: italic; color: var(--accent); }
.intake-lede {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* Sticky progress strip — sits below the masthead nav */
.intake-progress {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 14px 0 12px;
  margin: -20px -16px 32px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 16px;
}
.intake-progress-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.intake-progress-bar {
  flex: 1;
  height: 2px;
  background: var(--hairline);
  border-radius: 1px;
  overflow: hidden;
}
.intake-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
.intake-save-exit {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.intake-save-exit:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
@media (max-width: 540px) {
  .intake-save-exit { display: none; } /* mobile: lede already explains it */
}

/* Section blocks */
.intake-section {
  margin: 64px 0;
  padding-top: 12px;
}
.intake-section + .intake-section {
  border-top: 1px solid var(--hairline);
  padding-top: 56px;
}
.intake-section-head { margin-bottom: 36px; }
.intake-section-head h2 {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 36px);
  letter-spacing: -0.01em;
  margin: 8px 0 14px;
  color: var(--ink);
}
.intake-section-intro {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
}

/* Question + input */
.intake-q { margin: 28px 0; }
.intake-q label {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 10px;
  font-weight: 500;
}
.intake-q label .optional {
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  margin-left: 4px;
}
.intake-q input[type="text"],
.intake-q input[type="number"],
.intake-q select,
.intake-q textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg-card, #fff);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  box-sizing: border-box;
}
.intake-q textarea { resize: vertical; min-height: 76px; }
.intake-q input:focus,
.intake-q select:focus,
.intake-q textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(93, 107, 90, 0.12);
}
.intake-help {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
  margin: 8px 0 0;
}

/* Week-breakdown grid (Q15) */
.week-grid {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.week-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 12px;
  align-items: center;
}
.week-row label {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.week-row .week-input {
  padding: 8px 10px;
  font-size: 14px;
  text-align: center;
}
.week-total {
  margin-top: 14px;
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 16px;
  color: var(--muted);
}
.week-total span { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) {
  .week-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--hairline);
  }
  .week-row .week-input { width: 100%; text-align: left; }
}

/* Checkbox tile grids (Q23, Q24, Q29) */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.checkbox-grid-narrow {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.checkbox-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  transition: border-color 160ms ease, background 160ms ease;
  margin: 0;
}
.checkbox-tile:hover { border-color: var(--gold); }
.checkbox-tile input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0;
}
.checkbox-tile:has(input:checked) {
  border-color: var(--accent);
  background: rgba(93, 107, 90, 0.06);
}

/* Submit row */
.intake-submit-row {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.intake-submit-row .btn { min-width: 220px; }
.intake-submit-row .btn[disabled] { opacity: 0.6; cursor: progress; }
.intake-saved-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}

/* =====================================================================
   Services menu — /services
   Three editorial cards, equal weight. Service-card-* classes are
   distinct from the existing .service-step (used on /audit) so they
   don't collide. Cards stack on mobile, sit in a 3-up grid on desktop.
===================================================================== */

.services-hero {
  background: var(--bg-card);
  min-height: 0;
}
.services-hero::after { display: none; }
.services-hero .page-masthead-inner {
  padding: clamp(72px, 10vh, 112px) clamp(28px, 6vw, 80px)
           clamp(32px, 5vh, 56px);
  min-height: 0;
  align-items: flex-start;
}
.services-hero-copy { max-width: 640px; }
.services-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0.5rem 0 1.25rem;
}
.services-hero-sub {
  font-size: 1.125rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 540px;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 0;
}
/* Tighten the gap between the services hero and the cards section.
   Default .landing-section padding is 96px; here we only need a
   fraction of that since the hero already supplies breathing room. */
.services-hero + .landing-section {
  padding-top: clamp(16px, 2.5vh, 32px);
}
@media (min-width: 880px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.service-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.service-card .service-numeral {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 16px;
}
.service-card .eyebrow { color: var(--muted); }
.service-card-title {
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 6px 0 18px;
  line-height: 1.15;
}
.service-card-price {
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.service-card-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
}
.service-card-cadence {
  color: var(--muted);
  font-size: 1rem;
  font-style: italic;
}
.service-card-lede {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.service-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  border-top: 1px solid var(--hairline);
}
.service-card-list li {
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  line-height: 1.5;
}
.service-card-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.service-card-cta .btn { width: 100%; text-align: center; }
.btn-link {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--hairline);
  padding: 4px 0;
}
.btn-link:hover { color: var(--accent); }

.services-faq {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 0;
}
.services-faq-list dt {
  font-size: 1.125rem;
  color: var(--ink);
  font-weight: 500;
  margin-top: 24px;
  margin-bottom: 8px;
}
.services-faq-list dd {
  margin: 0 0 8px 0;
  color: var(--ink-soft);
  line-height: 1.7;
}
.services-faq-list dd a { color: var(--accent); }

/* =====================================================================
   Custom checkout — /audit/checkout, /event/checkout, /subscribe/checkout
   Two-column layout: order summary left, payment form right.
   Stacks on mobile, sits side-by-side from 880px up.
===================================================================== */

.checkout-page {
  padding: 60px 0 100px;
  min-height: calc(100vh - 220px);
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 880px) {
  .checkout-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
}

.checkout-back {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-block;
}
.checkout-back:hover { color: var(--accent); }

.checkout-summary { padding-top: 12px; }
.checkout-summary-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 6px 0 16px;
  line-height: 1.1;
}
.checkout-summary-lede {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 28px;
}
.checkout-summary-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  border-top: 1px solid var(--hairline);
}
.checkout-summary-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.95rem;
  color: var(--ink-soft);
  position: relative;
  padding-left: 24px;
  line-height: 1.5;
}
.checkout-summary-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

.checkout-total {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  padding: 24px 28px;
  margin-top: 12px;
}
.checkout-total-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 1rem;
  color: var(--ink-soft);
}
.checkout-total-final {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  margin-top: 6px;
  font-size: 1.125rem;
  color: var(--ink);
}
.checkout-total-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
  font-style: italic;
  line-height: 1.5;
}

.checkout-form-wrap {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  padding: 40px 36px;
}
@media (max-width: 600px) {
  .checkout-form-wrap { padding: 28px 22px; }
}

.checkout-q { margin-bottom: 28px; }
.checkout-q label {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 10px;
}
.checkout-q label .optional {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--muted-soft);
  margin-left: 6px;
}
.checkout-q input[type="email"],
.checkout-q input[type="text"],
.checkout-q textarea {
  width: 100%;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  background: #ffffff;
  color: var(--ink);
  border-radius: 2px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.checkout-q input:focus,
.checkout-q textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.checkout-q textarea { resize: vertical; min-height: 80px; }

.checkout-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
  font-style: italic;
}

#payment-element {
  /* Stripe iframe lives in here. Give it some breathing room and a
     light background that matches the form's card surface. */
  margin-top: 4px;
  min-height: 40px;
}

.checkout-error {
  background: #f7e6e0;
  border: 1px solid #d8a89a;
  color: #8a3520;
  padding: 12px 16px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Terms-acceptance row. Sits directly above the pay button; the
   visual weight is intentionally low (small text, no bold) so it
   doesn't compete with the form's main signal — but the input is
   required, gated by JS, and re-checked server-side. The Pay button
   is what carries the eye; the checkbox is the consent that has to
   precede it. */
.checkout-terms-row {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.checkout-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  cursor: pointer;
}
.checkout-terms-label input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #5d6b5a;
  cursor: pointer;
}
.checkout-terms-label a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 2px;
  transition: text-decoration-color 160ms ease-out;
}
.checkout-terms-label a:hover {
  text-decoration-color: var(--ink);
}

.checkout-submit-row {
  margin-top: 20px;
  padding-top: 0;
}
.checkout-submit-row .btn {
  width: 100%;
  text-align: center;
  padding: 18px 24px;
  font-size: 15px;
}
.checkout-submit-row .btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}
.checkout-trust {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
  text-align: center;
  line-height: 1.5;
}
.checkout-trust-lock { margin-right: 4px; }