/* ==========================================================================
   pressnt — Landing page
   Source of truth: Figma file sn6JzGH4ZivEJ6FezhRr6K, frame "Pr -Home" (6119:141)
   Desktop frame: 1440 × 5936. Values below are taken from Figma nodes/variables.
   ========================================================================== */

/* ---------- Fonts (self-hosted; Figma: "General Sans", "Parastoo") ---------- */
@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Parastoo"; src: url("../assets/fonts/parastoo-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Parastoo"; src: url("../assets/fonts/parastoo-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Design tokens (Figma variables) ---------- */
:root {
  /* Primary Cream */
  --cream-1: #F4EFE6;   /* Primary Cream/Shade 01 */
  --cream-2: #FAF8F4;   /* Primary Cream/Shade 02 */
  /* Primary Gold */
  --gold-1: #8C6B16;    /* Primary Gold/Shade 01 */
  --gold-2: #C9A84C;    /* Primary Gold/Shade 02 */
  --gold-3: #F6EDD8;    /* Primary Gold/Shade 03 */
  /* Primary Green */
  --green-1: #2E4E43;   /* Primary Green/Shade 01 */
  --green-2: #647F71;   /* Primary Green/Shade 02 */
  --green-3: #EAF4F0;   /* Primary Green/Shade 03 */
  /* Primary Brown */
  --brown-1: #493B38;   /* Primary Brown/Shade 01 */
  --brown-2: #4A4441;   /* Primary Brown/Shade 02 */
  --brown-3: #9C9289;   /* Primary Brown/Shade 03 */
  /* Text */
  --text-primary: #1F1F1F;
  --text-secondary: #3D3D3D;
  --text-tertiary: #7A7A7A;
  --text-disabled: #B8B8B8;
  --white: #FFFFFF;
  /* Borders */
  --border-cream: #EDE8DF;
  --border-secondary: #B8B8B8;
  --border-tertiary: #E0E0E0;
  /* One-off fills used in the frame */
  --muted: #858180;        /* 6119:261 "Just now" */
  --record-red: #FB5061;   /* 6119:301 stop button */
  --placeholder: #D9D9D9;  /* image placeholder fill */

  /* Radii (Figma variables) */
  --r-firm: 8px;
  --r-round-l: 40px;
  --r-circular: 200px;

  /* Effects */
  --min-shadow: 0 4px 12px 0 rgba(0,0,0,.06), 0 1px 4px 0 rgba(0,0,0,.04);   /* minShadow */
  --btn-shadow: 0 4px 12px 0 rgba(0,0,0,.06);
  --ds-xs: drop-shadow(0 1px 2px rgba(0,0,0,.04));
  --ds-sm: drop-shadow(0 1px 2px rgba(0,0,0,.04)) drop-shadow(0 4px 6px rgba(0,0,0,.06));

  /* Layout */
  --content: 1200px;
  --gutter: max(24px, calc((100% - var(--content)) / 2));   /* = 120px at the 1440 frame */
  --font-sans: "General Sans", system-ui, sans-serif;
  --font-serif: "Parastoo", Georgia, serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; line-height: inherit; }
img { display: block; max-width: none; }
a { color: inherit; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; cursor: pointer; }
.pre { white-space: pre-wrap; }
.pre-bs { white-space: break-spaces; }   /* Figma counts trailing spaces when centring a line */
.blank-24 { height: 24px; }
.blank-18 { height: 18px; }

:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--white); color: var(--text-primary); padding: 8px 12px; border-radius: var(--r-firm); }
.skip-link:focus { top: 16px; }

/* ---------- Typography (Figma text styles) ---------- */
/* General Sans */
.t-body      { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; }  /* Textlink/Large */
.t-headline  { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }  /* Headline - Body/Medium */
.t-headline-sb { font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 24px; letter-spacing: -0.4px; } /* Headline/Semibold */
.t-title-s   { font-family: var(--font-sans); font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.48px; }  /* Title S/Medium */
.t-caption   { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: -0.28px; }  /* Body - Caption/Medium */
.t-cap-r14   { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: -0.28px; }  /* Body - Caption/Regular */
.t-cap-m12   { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.24px; }  /* Caption/Medium */
.t-cap-r12   { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: -0.144px; } /* Caption/Regular */
/* Parastoo */
.h-display { font-family: var(--font-serif); font-weight: 400; font-size: 72px; line-height: 68px; letter-spacing: -0.864px; }
.h-section { font-family: var(--font-serif); font-weight: 400; font-size: 60px; line-height: 60px; letter-spacing: -0.72px; }
.h-01      { font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 40px; letter-spacing: -0.432px; } /* Heading/01 */
.h-02      { font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 40px; letter-spacing: -0.64px; }  /* Heading/02 */
.h-04      { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 40px; letter-spacing: -0.384px; } /* Heading/04 */
.h-05      { font-family: var(--font-serif); font-weight: 500; font-size: 20px; line-height: 40px; letter-spacing: -0.16px; }  /* Heading/05 */

/* ---------- Shared components ---------- */

/* Tag — 6119:181 / 6119:350 … : h32, px12 py4, radius Firm(8), white, gold-1 Caption/Medium */
.tag {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  height: 32px; padding: 4px 12px; border-radius: var(--r-firm);
  background: var(--white); color: var(--gold-1);
  font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: -0.28px; white-space: nowrap;
  filter: var(--ds-xs);
}
.tag--blur { filter: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Button — instance of "Button" (97:21030): green-2, h56, radius 64, px24 py16 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
  height: 56px; padding: 16px 24px; border-radius: 64px; overflow: hidden;
  background: var(--green-2); color: var(--white); box-shadow: var(--btn-shadow);
  font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; white-space: nowrap;
  text-decoration: none;
}
.btn--180 { width: 180px; }
.btn--282 { width: 282px; }
.btn--384 { width: 384px; }
.btn--icon { padding: 16px 20px 16px 28px; }
.btn--nav { width: 128px; height: 44px; padding: 12px 22px; }

/* Chip tag — 6119:259: gold-3, h24, pt4 pb5 px8, radius 6 */
.chip-tag {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  height: 24px; padding: 4px 8px 5px; border-radius: 6px;
  background: var(--gold-3); color: var(--gold-1); text-align: center; white-space: nowrap;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* Icon circle — 6119:332 / 6119:338: 48px, p10, radius 128 */
.icon-circle {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; padding: 10px; border-radius: 128px; filter: var(--ds-xs);
}
.icon-circle--gold { background: var(--gold-3); }
.icon-circle--mint { background: var(--green-3); }

/* Round button (voice/stop) — 6119:264 / 6119:301: 40px, 2px white border */
.round-btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; padding: 10px; border: 2px solid var(--white); border-radius: 128px; filter: var(--ds-xs);
}
.round-btn--green { background: var(--green-1); }
.round-btn--red { background: var(--record-red); }

/* FAB (+) — 6119:362: 40px green-2, radius Round L (40) */
.fab {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--r-round-l);
  background: var(--green-2); filter: var(--ds-sm);
}

/* Small icon button — "Avatar" 6119:215: 36px white, 0.5 border, radius Circular */
.icon-btn-sm {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
  width: 36px; height: 36px; box-shadow: inset 0 0 0 .5px var(--border-cream); border-radius: var(--r-circular); background: var(--white);
}

/* Waveform — 3px bars, radius 4, gap 3 */
.wave { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.wave i { display: block; width: 3px; border-radius: 4px; background: var(--green-2); }
.wave i.off { background: var(--border-cream); }

/* Avatar — white 2px border, image cropped inside */
.avatar { position: relative; display: block; flex-shrink: 0; border-radius: 88px; }
/* Figma: image fill spans the full frame; the 2px white inside stroke is painted over it */
.avatar::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--white); border-radius: inherit; pointer-events: none; }
.avatar__img { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--placeholder); }
.avatar__img img, .media__img img, .founder__photo img { position: absolute; max-width: none; object-fit: cover; }
.avatar--48 { width: 48px; height: 48px; box-shadow: var(--btn-shadow); }
.avatar--56 { width: 56px; height: 56px; box-shadow: var(--btn-shadow); }
.avatar--88 { width: 88px; height: 88px; box-shadow: var(--min-shadow); }

/* Media frame w/ player — 6119:191 / 6119:284: 353 × 331, radius 12 */
.media {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0;
  width: 353px; height: 331px; padding: 275px 8px 8px;
  border-radius: 12px; filter: var(--ds-xs);
}
.media::after, .founder__photo::after { content: ""; position: absolute; inset: 0; border: .5px solid var(--border-cream); border-radius: inherit; pointer-events: none; }
.media__img { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: var(--placeholder); pointer-events: none; }
.player {
  position: relative; display: flex; align-items: center; gap: 24px; flex-shrink: 0;
  width: 337px; height: 48px; padding: 12px 16px;
  background: var(--white); box-shadow: inset 0 0 0 .5px var(--border-cream); border-radius: 8px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.04)) drop-shadow(0 4px 20px rgba(0,0,0,.08));
}
.player > img { flex-shrink: 0; }
.player__track { position: relative; display: flex; flex-direction: column; width: 209px; flex-shrink: 0; }
.player__rail { width: 100%; height: 4px; border-radius: 2px; background: var(--border-cream); }
.player__progress { position: absolute; top: 0; height: 4px; border-radius: 2px; background: var(--brown-3); }
.player__knob {
  position: absolute; top: -3px; width: 10px; height: 10px;
  background: var(--brown-3); border: 2px solid var(--white); border-radius: 12px; box-shadow: var(--min-shadow);
}
.player__time { display: flex; align-items: center; justify-content: center; height: 16px; padding-bottom: 2px; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; }

/* Reminder — 6119:206 / 6119:218 */
.reminder-card { background: var(--white); border-radius: 16px; filter: var(--ds-xs); }
.reminder {
  display: flex; flex-direction: column; justify-content: center; width: 100%; height: 72px;
  padding: 8px 16px 8px 12px; background: var(--cream-1);
  box-shadow: inset 0 0 0 .5px var(--border-cream); border-radius: 10px; filter: var(--ds-xs);
}
.reminder__row { display: flex; align-items: center; gap: 20px; width: 100%; }
.reminder__main { display: flex; align-items: center; gap: 12px; width: 269px; flex-shrink: 0; }
.date-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; padding-top: 1px; border-radius: 10px;
  background: var(--cream-2); color: var(--gold-1); text-align: center; filter: var(--ds-xs);
}
.date-badge__day { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 20px; }
.date-badge__month { display: block; width: 100%; height: 16px; }
.reminder__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 199px; flex-shrink: 0; }
.reminder__title { color: var(--text-primary); min-width: 100%; }
.reminder__sub { color: var(--text-tertiary); width: 204px; }

/* List card — 6119:229 / 6119:455 */
.list-card {
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding: 4px 16px; background: var(--white); box-shadow: inset 0 0 0 .5px var(--border-cream); border-radius: 16px;
}
.list-card__contents { position: relative; display: flex; align-items: center; gap: 4px; width: 100%; height: 56px; }
.list-card__image { display: flex; align-items: center; height: 56px; padding-right: 12px; flex-shrink: 0; }
.list-card__body { display: flex; align-items: center; flex: 1 0 0; min-width: 1px; height: 100%; overflow: hidden; }
.list-card__titles { display: flex; flex-direction: column; justify-content: center; flex: 1 0 0; min-width: 1px; height: 100%; overflow: hidden; }
.list-card__title { color: var(--text-primary); white-space: pre; }
.list-card__sub { color: var(--text-secondary); }
.list-card__acc { width: 32px; height: 100%; flex-shrink: 0; }
.list-card__heart-abs { position: absolute; left: 253px; top: 16px; }

/* Voice card — 6119:257 / 6119:294 */
.voice-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px;
  background: var(--white); border: 1px solid var(--border-cream); border-radius: 16px; filter: var(--ds-xs);   /* stroke included in layout (6119:258 @ x17) */
}
.voice-card__head, .voice-card__wave-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.voice-card__head .chip-tag { min-width: 0; }
.voice-card__meta { display: flex; flex-direction: column; justify-content: center; width: 108px; height: 14px; text-align: right; flex-shrink: 0; }
.voice-card__wave-left { display: flex; align-items: center; gap: 12px; }
.voice-card__msg { width: 100%; height: 35px; color: var(--text-secondary); }

/* ---------- Header ---------- */
.site-header { background: var(--cream-1); box-shadow: inset 0 -1px 0 var(--border-cream); }   /* 1px bottom stroke, not in layout (6120:660; landing y87) */
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 88px; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
}
.site-header__logo { display: block; flex-shrink: 0; }
.site-header__actions { display: flex; align-items: center; gap: 14px; }
.site-nav { display: flex; align-items: center; gap: 12px; }
.site-nav__link {
  display: flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 64px;
  background: var(--cream-1); color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -0.32px;
}

/* ---------- Sections ---------- */
.section { position: relative; padding: 80px var(--gutter); }
.section__inner { width: 100%; max-width: var(--content); margin: 0 auto; }
.section-head { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 664px; max-width: 100%; }
.section-head .tag { align-self: center; }
.section-head__title { display: flex; flex-direction: column; justify-content: center; width: 100%; color: var(--brown-1); text-align: center; }
.section-head__title--112 { height: 112px; }
.section-head__title--56 { height: 56px; }

/* ---------- Hero — 6119:625 ---------- */
/* 694px at the 1440 frame; above that the height scales with width (same aspect as the frame) so the
   photo keeps the Figma framing on wide monitors, capped at the viewport height. */
.hero { --hero-h: clamp(694px, 48.1944vw, 100vh);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  height: var(--hero-h); min-height: 694px;
  /* copy keeps its Figma position relative to the photo: 40px at 694px tall, proportional above */
  padding: max(40px, calc(var(--hero-h) * 0.5576 - 347px)) var(--gutter) 60px; }
/* High-res original (3744×2496) placed to reproduce the Figma crop of 6119:625 without distortion.
   The box keeps the photo's 3:2 aspect at the 1440 frame; object-fit: cover prevents stretching at other sizes. */
.hero__bg { position: absolute; left: -19.86%; top: -25.07%; width: 120%; height: 166%; max-width: none; object-fit: cover; pointer-events: none; }
.hero__row { position: relative; display: flex; align-items: center; width: 100%; gap: clamp(0px, calc(100% - 973px), 227px); max-width: var(--content); margin: 0 auto; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 486px; flex-shrink: 0; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.hero__title { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 180px; color: var(--white); white-space: pre; }
.hero__lede { width: 100%; color: var(--text-secondary); text-shadow: 0 4px 40px rgba(244,239,230,.64), 0 1px 4px rgba(244,239,230,.4); }
.hero__lede span, .security__lede span, .security-feature__text span, .step__text span { display: block; white-space: pre-wrap; }

.hero-visual { position: relative; width: 487px; height: 594px; }
.hero-visual > * { position: absolute; }
.hero-visual__media { left: 0; top: 119px; }
.hero-visual__reminder { left: 61px; top: 498px; width: 373px; padding: 12px; }
.hero-visual__safe { left: 174px; top: 330px; width: 313px; height: 72px; }
.hero-visual__voice { left: 205px; top: 0; width: 282px; height: 155px; justify-content: center; }
.card-media { display: flex; align-items: center; padding: 16px; background: var(--white); border-radius: 16px; filter: var(--ds-sm); }
.list-card--hero { box-shadow: inset 0 0 0 .5px var(--border-cream), var(--min-shadow); }
.voice-card--hero .chip-tag { width: 74px; }
.voice-card--hero .chip-tag, .voice-card--rec .chip-tag { justify-content: center; }

/* Fit-to-width wrapper (responsive scaling of fixed-size Figma composites) */
.fit { flex-shrink: 0; }

/* ---------- How it works — 6119:636 ---------- */
.section--how { background: var(--cream-2); min-height: 960px; }
.how, .features { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.how__body { display: flex; flex-direction: column; align-items: center; gap: 60px; width: 100%; }
.cols { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; width: 100%; }
.cols--top { align-items: flex-start; }
.step { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 384px; flex-shrink: 0; }
.step-card {
  display: flex; flex-direction: column; align-items: flex-start; width: 384px; height: 328px;
  padding: 32px 32px 42px; background: var(--white); border-radius: 24px; filter: var(--ds-sm);
}
.step-card__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 320px; }
.step-card__top { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.step-card__head { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; }
.step-card__heading { color: var(--brown-2); flex-shrink: 0; }
.step__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; text-align: center; }
.step__title { width: 100%; color: var(--gold-1); }
.step__text { width: 100%; color: var(--text-secondary); }

/* Circle filter bar — 6119:364 */
.filter-bar { display: flex; align-items: center; gap: 12px; width: 100%; }
.filter-chip {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  width: 70px; height: 40px; padding: 10px 12px;
  background: var(--white); box-shadow: inset 0 0 0 .5px var(--border-cream); border-radius: 24px;
}
.filter-chip--active { width: 78px; padding: 10px 15px; background: var(--cream-2); box-shadow: inset 0 0 0 .5px var(--gold-2); filter: var(--ds-xs); }
.filter-chip--us { gap: 6px; padding: 10px; justify-content: center; }
.filter-chip__icon { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.filter-chip__icon--24 { width: 24px; height: 24px; }
.filter-chip__icon--16 { width: 16px; height: 16px; }
.filter-chip__label { color: var(--text-tertiary); text-align: center; flex-shrink: 0; }
.ico-all { position: relative; width: 28.44px; height: 22.293px; flex-shrink: 0; }
.ico-us  { position: relative; width: 20.873px; height: 20.873px; flex-shrink: 0; }
.ico-all__dot { position: absolute; left: 18.44px; top: 0; width: 10px; height: 10px; border: 1.75px solid var(--green-2); border-radius: 8px; }
.ico-box {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 11px 5px 4px; flex-shrink: 0;
  background: var(--white); border: 1.75px solid var(--brown-3); border-radius: 8px;
}
.ico-box--active { background: var(--green-3); border-color: var(--green-2); }
.ico-box__line { position: relative; width: 6px; height: 1px; flex-shrink: 0; }
.ico-box__line img { position: absolute; left: -0.875px; top: -0.875px; }
.ico-sub { position: absolute; }

/* Circle avatars — 6119:399 */
.circle-list { display: flex; align-items: center; gap: 28px; width: 100%; }
.circle-item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 88px; flex-shrink: 0; }
.circle-item__label { display: block; min-width: 100%; color: var(--text-secondary); text-align: center; }

/* Create treasure — 6119:419 / 6119:423 */
.fake-input { display: flex; align-items: center; gap: 2px; width: 100%; padding: 10px 0; white-space: nowrap; }
.fake-input__placeholder { color: var(--text-disabled); }
.fake-input__cursor { width: 2px; height: 16px; border-radius: 10px; background: var(--gold-1); flex-shrink: 0; }
.treasure-types { display: flex; align-items: flex-start; gap: 28px; width: 100%; }
.treasure-type { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 88px; height: 120px; flex-shrink: 0; }
.treasure-type__btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 88px; height: 88px; padding: 16px 23px 16px 24px; border-radius: 128px;
  background: var(--white); box-shadow: inset 0 0 0 .5px var(--border-cream); filter: drop-shadow(0 4px 6px rgba(0,0,0,.06));
}
.treasure-type__btn--active { background: var(--green-1); }
.treasure-type__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; }
.treasure-type__label { display: block; min-width: 100%; text-align: center; flex-shrink: 0; }

/* Safe list card — 6119:455 */
.list-card--safe { width: 100%; height: 88px; box-shadow: inset 0 0 0 .5px var(--border-cream), var(--btn-shadow); }

/* ---------- Feature Highlights — 6119:642 ---------- */
.section--features { background: var(--cream-1); min-height: 783px; }
.feature-col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 384px; flex-shrink: 0; }
.feature-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 384px; height: 244px; padding: 32px;
  background: var(--white); border: 1px solid var(--border-cream); border-radius: 24px; filter: var(--ds-xs);   /* stroke included (6119:332 @ 33,33) */
}
.feature-card__title { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 32px; color: var(--brown-1); }
.feature-card__text { width: 100%; height: 72px; color: var(--text-secondary); }
.voice-card--rec { width: 384px; height: 114px; }
.voice-card__timer { width: 68px; color: var(--text-tertiary); flex-shrink: 0; }
.greeting-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: 384px; height: 451px; padding: 16px;
  background: var(--white); border: 1px solid var(--border-cream); border-radius: 16px; filter: var(--ds-xs);   /* stroke included (6119:282 @ 17,17) */
}
.greeting-card__msg { width: 100%; height: 72px; color: var(--text-secondary); }
.reminder-card--feature { width: 384px; height: 114px; padding: 16px; border: .5px solid var(--border-cream); }   /* stroke included (6119:218 @ 16.5) */

/* ---------- Breakline — 6119:643 ---------- */
.breakline { position: relative; display: flex; align-items: center; justify-content: center; height: 384px; overflow: hidden; }
.breakline__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26.08%; pointer-events: none; }
.breakline__logo { position: relative; }
/* Photo carousel — client request 2026-10-07 (not in Figma). Each slide waits off to the right; the active one
   slides in while the previous one slides out to the left (only these two animate, so a slide re-parks off-screen
   instantly). js/main.js advances it every 5s. */
.breakline__slides { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.breakline__slide { translate: 100% 0; }
.breakline__slide.is-active { translate: 0 0; }
.breakline__slide.is-prev { translate: -100% 0; }
.breakline__slide.is-active, .breakline__slide.is-prev { transition: translate 900ms cubic-bezier(.65, 0, .35, 1); }
.breakline__slide--center { object-position: 50% 50%; }   /* client photos are pre-cropped to the 1440×384 ratio */

/* ---------- Security — 6119:645 ---------- */
.section--security { background: var(--green-1); min-height: 488px; }
.security { display: flex; align-items: center; gap: clamp(0px, calc(100% - 1074px), 126px); }
.security__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 486px; flex-shrink: 0; }
.security__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.security__title { display: flex; flex-direction: column; justify-content: center; width: 381px; height: 112px; color: var(--white); white-space: pre; }
.security__lede { width: 100%; color: var(--green-3); }
.security__features { display: flex; align-items: center; gap: 24px; }
.security-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 282px; flex-shrink: 0; }
.security-feature__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.security-feature__title { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 32px; color: var(--white); }
.security-feature__text { width: 100%; height: 72px; color: var(--green-3); }

/* ---------- Founder — 6119:650 ---------- */
.section--founder { background: var(--cream-1); min-height: 940px; padding-left: max(16px, calc(var(--gutter) - 10px)); }
.founder { display: flex; align-items: flex-start; gap: clamp(0px, calc(100% - 1098px), 112px); max-width: 1210px; }
.founder__photo-wrap { display: flex; align-items: center; padding-top: 56px; flex-shrink: 0; }
.founder__photo-card { display: flex; align-items: center; width: 306px; height: 388px; padding: 16px; background: var(--white); border-radius: 16px; filter: var(--ds-sm); }
.founder__photo { position: relative; width: 274px; height: 356px; overflow: hidden; border-radius: 12px; box-shadow: 0 1px 4px 0 rgba(0,0,0,.04); }
.founder__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 792px; }
.founder__note { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; }
.founder__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.founder__quote { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
.founder__quote-text { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 56px; color: var(--brown-1); }
.founder__quote-cite { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 24px; color: var(--text-tertiary); }
.founder__letter { width: 100%; color: var(--text-secondary); }
.founder__letter a { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; }
/* 6119:502 link: General Sans Semibold, underlined; colour #3D3D3D (Text/Secondary) per client request 2026-10-07 */
.founder__link { font-weight: 600; color: var(--text-secondary); }   /* #3D3D3D — client request 2026-10-07 (was Gold 01) */
.founder__letter ol { list-style: decimal; }
.founder__letter li { margin-left: 24px; }
.founder__sign { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.founder__sign img { width: 208px; height: 31px; object-fit: cover; }
.founder__role { height: 17px; color: var(--brown-3); }
.founder__pillars { display: flex; align-items: center; gap: 24px; width: 100%; height: 104px; }
.pillar { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 384px; padding-top: 16px; border-top: .5px solid var(--border-secondary);   /* 6119:509 @ y16.5 */ flex-shrink: 0; }
.pillar__title { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 24px; color: var(--green-1); }
.pillar p { width: 100%; color: var(--text-secondary); }
/* Our Mission only (6119:508 w792; text 6119:510 w587 h48) */
.pillar--full { width: 100%; }
.pillar--full .pillar__text { width: 587px; max-width: 100%; height: 48px; }

/* ---------- FAQ — 6119:652 ---------- */
.section--faq { background: var(--cream-2); min-height: 831px; }
.faq { display: flex; align-items: flex-start; gap: clamp(0px, calc(100% - 1174px), 26px); }
.faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 486px; flex-shrink: 0; }
.faq__intro-text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.faq__title { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 112px; color: var(--brown-1); }
.faq__title span { display: block; }
.faq__list { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 688px; min-height: 671px; }
.faq-item { display: flex; align-items: flex-start; gap: 24px; width: 100%; padding-top: 16px; border-top: .5px solid var(--border-tertiary);   /* 6119:535 @ y16.5 */ }
.faq-item__content { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 586px; flex-shrink: 0; color: var(--text-secondary); }
.faq-item__q { width: 100%; min-height: 48px; }
.faq-item.is-open .faq-item__q { min-height: 24px; }
.faq-item__btn { display: block; width: 100%; }
.faq-item__a { width: 100%; }
.faq-item__a a { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; }
.faq-item:not(.is-open) .faq-item__a { display: none; }
.faq-item__toggle { display: flex; cursor: pointer; align-items: center; justify-content: center; width: 78px; height: 24px; flex-shrink: 0; }
.faq-item .i-minus, .faq-item.is-open .i-plus { display: none; }
.faq-item.is-open .i-minus { display: block; }

/* ---------- Pre Footer — 6119:657 ---------- */
.prefooter { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; min-height: 584px; padding: 80px var(--gutter); }
.prefooter__bg { position: absolute; left: -4.14%; top: -39%; width: 108.27%; height: 178%; max-width: none; object-fit: cover; pointer-events: none; }
.prefooter__card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; max-width: var(--content); height: 424px; padding: 60px 128px;   /* fixed 424 in Figma (content 304 top-aligned) */
  background: var(--green-1); border: 1px solid var(--green-2); border-radius: 24px;   /* stroke included (6119:655 @ 129,61) */ filter: var(--ds-sm);
}
.prefooter__content { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 944px; flex-shrink: 0; }
.prefooter__text { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.prefooter__text .tag { align-self: center; }
.prefooter__title { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 56px; color: var(--white); text-align: center; }
.prefooter__lede { width: 100%; color: var(--green-3); text-align: center; }
.prefooter__actions { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 222px; }
.prefooter__login { min-width: 100%; color: var(--gold-3); white-space: nowrap; }
.prefooter__login a { color: var(--gold-2); text-decoration: underline; text-decoration-skip-ink: none; text-decoration-thickness: from-font; text-underline-position: from-font; }

/* ---------- Footer — 6119:561 ---------- */
.site-footer { background: var(--brown-2); }
.site-footer__top { height: 128px; padding: 40px var(--gutter); }
.site-footer__row { display: flex; align-items: center; justify-content: space-between; max-width: var(--content); margin: 0 auto; }
.site-footer__links { display: flex; align-items: center; gap: 12px; }
.site-footer__link { display: flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 64px; background: var(--brown-2); color: var(--white); text-decoration: none; white-space: nowrap; }
.site-footer__bottom { height: 56px; padding: 16px var(--gutter); border-top: .5px solid var(--text-tertiary); }   /* 6119:572 @ y16.5 */
.site-footer__row--bottom { color: var(--gold-3); }
.site-footer__copy { width: 549px; max-width: 100%; }
.site-footer__tagline { display: flex; flex-direction: column; justify-content: center; width: 180px; height: 24px; text-align: right; flex-shrink: 0; }

/* ==========================================================================
   Contact Us page — Figma frame 6094:27144 (1440 × 1301)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Headline - Body/Regular: General Sans 400 16/20 -2% */
.t-input { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }

/* Hero Banner — 6120:685: h344, Cream 01, pt/pb 80, pl 120, content 486 */
.contact-hero { min-height: 344px; padding: 80px var(--gutter); background: var(--cream-1); }
.contact-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 486px; max-width: 100%; }
.contact-hero__title { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 56px; color: var(--brown-1); white-space: nowrap; }
.contact-hero__lede { width: 100%; color: var(--text-secondary); }

/* Form area — 6094:27170 (#FAF8F4, y433, h684). Figma leaves a 1px gap at y432 that shows the white frame fill. */
.contact-body { min-height: 684px; margin-top: 1px; padding: 79px var(--gutter) 173px; background: var(--cream-2); }
.contact-form-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 588px; max-width: 100%; margin: 0 auto; }
.contact-form-wrap__title { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 32px; color: var(--brown-1); text-align: center; }
.contact-form { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; width: 100%; }

/* Text Field 3 (6099:27788) / Text Field 9 (6094:27622): white, 0.5 Border/Cream inside stroke, radius 12 */
.field-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
.field-wrap:not(.field-wrap--area) .field { filter: drop-shadow(0 1px 2px rgba(0,0,0,.04)); }
.field {
  display: block; width: 100%; height: 56px; margin: 0; padding: 0 16px;
  background: var(--white); color: var(--text-secondary);
  border: 0; border-radius: 12px; box-shadow: inset 0 0 0 .5px var(--border-cream);
  -webkit-appearance: none; appearance: none; outline: none;
}
.field::placeholder { color: var(--text-secondary); opacity: 1; }   /* Figma placeholder = Text/Secondary */
.field--area { height: 160px; padding: 12px 16px; resize: none; overflow: auto;
  box-shadow: inset 0 0 0 .5px var(--border-cream), 0 1px 4px 0 rgba(0,0,0,.04); }
.field:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-1); }
.field--area:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-1), 0 1px 4px 0 rgba(0,0,0,.04); }
/* Error state — not defined in Figma; uses the design's existing red (#FB5061) and Caption type */
.field[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--record-red); }
.field--area[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--record-red), 0 1px 4px 0 rgba(0,0,0,.04); }
.field-error { margin: 0; padding-left: 16px; color: var(--record-red); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.24px; }

/* Text Field 3 — Filled variant (Figma 6212:10691): label Caption/Medium 12/16 Text/Tertiary on top,
   value Headline-Body/Regular 16/20 Text/Primary in a 24px row; content centred in the 56px field.
   The label stays in the accessibility tree while empty (opacity 0), and appears once there is a value. */
.field-wrap--text { position: relative; }
.field-label {
  position: absolute; left: 16px; top: 8px; z-index: 1; opacity: 0; pointer-events: none;
  color: var(--text-tertiary); font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.24px;
}
.field-wrap--text:has(.field:not(:placeholder-shown)) .field-label { opacity: 1; }
.field-wrap--text .field:not(:placeholder-shown) { padding: 24px 16px 8px; color: var(--text-primary); filter: none; }

/* Button — 6094:27642: full width, h56, Green 02, glassBlur+Shadow. Radius 48 on desktop (client request 2026-10-07; Figma Firm-2 = 12) */
.btn-block {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; padding: 16px 32px;
  border: 0; border-radius: 48px; overflow: hidden; cursor: pointer;
  background: var(--green-2); color: var(--white); box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
  -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);
  font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; white-space: nowrap;
}
.btn-block[disabled] { cursor: progress; opacity: .6; }

/* Button hover — Primary Green/Shade 01 (#2E4E43); reverts on mouse-out. Applies to every green CTA. */
.btn:hover, .btn-block:hover:not([disabled]) { background: var(--green-1); }
.contact-form__status { align-self: stretch; margin: 0; color: var(--text-secondary); text-align: center; }

/* ==========================================================================
   Legal pages — Privacy Policy, Figma frame 6094:27645
   ========================================================================== */
/* Hero — both legal pages use the Terms hero (6161:15875): Cream 01, y88–360, content 80px below the header (y168).
   The Privacy frame (6094:27666) originally showed 263px because its content overlapped it; unified on request. */
.legal-hero { height: 272px; padding: 80px var(--gutter); background: var(--cream-1); }   /* unified: Terms hero 6161:15875 (h272, py 80) used on both legal pages */
.legal-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 486px; max-width: 100%; }
.legal-hero__inner--terms { width: 583px; }                                   /* 6161:15874 */
.legal-hero__title { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 56px; color: var(--brown-1); white-space: nowrap; }

/* Content — 6161:15871: Cream 02, pt 80, column 996 centred (px 222 at 1440) */
.legal-body { padding: 80px var(--gutter); background: var(--cream-2); }
.legal { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 996px; max-width: 100%; margin: 0 auto;
  color: var(--text-secondary); font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; }
/* Heading/04 in Primary Gold 01 (6094:27726 / 6160:15832) */
.legal__h1 { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 24px; color: var(--gold-1); }
/* Group: sub-heading(s) + body, gap 8 (6094:27730 …) */
.legal__group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.legal__h2 { width: 100%; font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; }                      /* General Sans Semibold */
.legal__h3 { width: 100%; font-weight: 600; font-style: italic; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; }   /* General Sans Semibold Italic */
.legal__body { width: 100%; }
.legal__body > * + * { margin-top: 24px; }            /* Figma separates paragraphs with one empty 24px line */
.legal__body > .flush { margin-top: 0; }
.legal__body strong, .legal__lines strong { font-weight: 600; }
.legal__lines > * + * { margin-top: 0; }               /* cookie blocks: consecutive lines, no blank line */
.legal ul { margin: 0; padding: 0; list-style: disc; }
.legal li { margin-left: 24px; }                       /* ms-[24px], marker outside */
.legal__link { color: inherit; text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; }

/* Terms & Conditions — Figma 6098:27737: content 6161:15873 has pb 120 (the 5px white strip above it was removed on request) */
.legal-body--terms { padding-bottom: 120px; }

/* ---------- Mobile-only pieces (hidden on desktop) ---------- */
.site-header { position: relative; z-index: 20; }
.menu-btn { display: none; }
.nav-drawer { display: none; }
.hero__shade, .prefooter__shade { display: none; }
.br-m { display: none; }

/* ==========================================================================
   Responsive
   Desktop: Figma 6119:141 (1440). Mobile (≤767px): Figma 6194:8822 "Pr - Home - M" (393).
   Tablet (768–1247) has no Figma frame: layout re-flows and fixed-size composites scale.
   ========================================================================== */

/* Wider than the frame: content stays 1200 centred (Figma constraints: centre) */

/* Content can no longer be 1200 wide */
@media (max-width: 1247px) {
  .prefooter__title, .founder__quote-text, .section-head__title--56 { height: auto; min-height: 56px; }
  .section-head__title--112 { height: auto; min-height: 112px; }
  .site-nav { gap: 4px; }
  .cols { flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  .security { flex-direction: column; align-items: flex-start; gap: 60px; }
  .founder { flex-direction: column; align-items: center; gap: 48px; }
  .founder__photo-wrap { padding-top: 0; }
  .founder__content { width: 100%; max-width: 792px; }
  .faq { flex-direction: column; gap: 48px; }
  .faq__list { width: 100%; min-height: 0; }
  .faq-item__content { flex: 1 1 auto; width: auto; min-width: 0; }
  .prefooter__card { padding: 60px 48px; height: auto; min-height: 424px; }
  .prefooter__content { width: 100%; flex-shrink: 1; }
  .prefooter__card { align-items: center; }
}

@media (max-width: 1023px) {
  .hero { height: auto; padding-top: 40px; }
  /* Stacked hero (no Figma frame): plain cover crop centred on the family; the lede no longer sits
     over the lake, so it switches to white for legibility. */
  .hero__bg { left: 0; top: -16%; width: 100%; height: 116%; object-position: 58% 100%; }   /* trims the white sky band */
  .hero__lede { color: var(--white); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
  .site-nav { display: none; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 48px; }
  .hero { padding-bottom: 60px; }
  .section-head__title--112 { height: auto; }
  .founder__pillars { flex-direction: column; align-items: stretch; height: auto; }
  .pillar { width: 100%; }
}

/* ==========================================================================
   Mobile — Figma 6194:8822 "Pr - Home - M" (393 wide). Page y = Figma y − 53 (iOS status bar;
   the iOS home indicator at the bottom is ignored). Content column = 100% − 2×20px (353 at 393).
   ========================================================================== */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  /* Typography (mobile sizes from the frame) */
  .h-display { font-size: 56px; line-height: 48px; letter-spacing: -0.672px; }   /* 6194:9025 */
  .h-section { font-size: 48px; line-height: 44px; letter-spacing: -0.576px; }   /* 6194:9288 … */

  /* ---------- Header Nav Resting — 6194:9116: px20 py16, 44px row, 1px bottom stroke (in layout) ---------- */
  .site-header { background: var(--cream-2); }                                 /* 6194:9116 / 6212:10764: no fill, frame bg Cream 02 shows through (Figma px 250,248,244) */
  .site-header__inner { height: 77px; padding: 16px 20px 17px; }
  .site-header__logo img { width: 114px; height: 44px; }
  .site-nav { display: none; }
  .site-header__actions { gap: 16px; }                                        /* 6194:9114 */
  .menu-btn {                                                                  /* 6194:9113 → icon 6194:9017 */
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; padding: 8px; border-radius: 64px; background: none;
  }
  /* Nav Drawer — Figma 6217:11030: full screen, Cream 01, pt/pl 20, column 353 gap 16 */
  .nav-drawer { position: fixed; inset: 0; z-index: 100; display: block; overflow-y: auto; padding: 20px; background: var(--cream-1); }
  .nav-drawer[hidden] { display: none; }
  .nav-drawer__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }   /* 6217:11018 */
  .nav-drawer__bar { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 20px 8px 0; }   /* 6217:11031 */
  .nav-drawer__close {                                                          /* 6217:11033 */
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 48px; height: 48px; border-radius: var(--r-circular);
    background: var(--white); box-shadow: inset 0 0 0 .5px var(--border-cream);
  }
  .nav-drawer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .nav-drawer__link {                                                           /* 6217:11019 … py 12, no side padding */
    display: flex; align-items: center; padding: 12px 0; border-radius: 64px;
    color: var(--text-secondary); text-decoration: none;
    font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; white-space: nowrap;
  }
  .nav-drawer__link--legal { color: var(--gold-1); }                            /* 6217:11045 / 11048 */
  .nav-drawer__divider { width: 100%; height: 1px; flex-shrink: 0; background: var(--border-cream); }   /* 6217:11051 */
  html.is-drawer-open { overflow: hidden; }

  /* ---------- Hero Banner — 6217:11053 (h500, px20 py60, photo + 24% black) ---------- */
  .hero { height: auto; min-height: 0; padding: 0; display: block; background: var(--cream-1); }
  /* Photo fitted to the Figma crop (pixel-error fit vs 6217:11053): 1026×684 at (−393, −60) on the 393 frame;
     width scales with the viewport, height is the fixed 500px banner; clipped to the banner. */
  .hero__bg { left: -100%; top: -60px; width: 261.07%; height: 684px; object-fit: cover; clip-path: inset(60px 0 124px 0); }
  .hero__shade { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 500px; background: rgba(0,0,0,.24); pointer-events: none; }
  .hero__row { flex-direction: column; align-items: stretch; gap: 0; max-width: none; }
  .hero__copy { width: auto; height: 500px; padding: 60px 20px; gap: 32px; }
  .hero__title { height: 140px; }
  .hero__lede { color: var(--white); text-shadow: 0 4px 40px #221917; }
  .hero__lede span { display: inline; white-space: normal; }
  .hero__copy .btn--180 { width: 100%; }

  /* Hero Banner Image — 6194:9293 (Cream 01, py60, cards stacked gap 16) */
  .hero .fit { --fit: off; width: auto; }
  .hero-visual { position: static; width: auto; height: auto; display: flex; flex-direction: column; gap: 16px; padding: 60px 20px; }
  .hero-visual > * { position: relative; left: auto; top: auto; }
  .hero-visual__voice  { order: 1; width: 100%; height: 141px; justify-content: flex-start; }   /* 6194:9085 */
  .hero-visual__voice .voice-card__msg { height: 20px; }
  .hero-visual__voice .voice-card__msg br { display: none; }
  .hero-visual__media  { order: 2; width: 100%; }                                                /* 6194:9029 */
  .hero-visual__media .media { width: 100%; }                                                    /* 321 */
  .hero-visual__media .player { width: 100%; }                                                   /* 305 */
  .hero-visual__media .player__track { width: 178px; }                                           /* 6194:9036 */
  .hero-visual__safe   { order: 3; width: 100%; }                                                /* 6194:9057 */
  .hero-visual__safe .list-card__heart-abs { left: auto; right: 0; }                             /* 6194:9080 */
  .hero-visual__reminder { order: 4; width: 100%; }                                              /* 6194:9045 */
  .hero-visual__reminder .reminder__row { gap: 25px; width: calc(100% + 4px); }                  /* 6194:9047: 305 */
  .hero-visual__reminder .reminder__main { flex: 0 1 244px; width: auto; min-width: 0; }
  .hero-visual__reminder .reminder__text { flex: 1 1 199px; width: auto; min-width: 0; }
  .reminder__sub { font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.24px; }  /* 6194:9054 */

  /* Fixed-size composites keep the mobile Figma width (353) and scale below 393 */
  .fit { --fit-w: 353; }
  /* Phones wider than the 393 frame (an iPhone 15 Pro Max is 430): the 353 card
     sits in the middle, not against the left padding. Auto margins never go
     negative, so a card scaled down below 393 still starts at the padding. */
  .section .fit, .section .fit.feature-col > * { margin-inline: auto; }

  /* ---------- How it Works — 6194:9119 (px20 py60, gap 60) ---------- */
  .section { padding: 60px 20px; }
  .section--how, .section--features, .section--security, .section--founder, .section--faq { min-height: 0; }
  .section-head { width: 100%; }
  .how .section-head { height: 192px; }                                        /* 6194:9285 fixed */
  .features .section-head { height: 148px; }                                   /* 6194:9620 fixed */
  .section-head__title--112 { height: 129px; min-height: 0; }                  /* 6194:9288 */
  .section-head__title--56 { height: 88px; min-height: 0; }                    /* 6194:9623 */
  .cols { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .how .cols { gap: 40px; }                                                     /* 6194:9455 */
  .step, .feature-col { width: 100%; }
  .step-card { width: 353px; }
  .step-card__content { width: 100%; }
  .circle-list, .treasure-types { gap: 12px; }                                  /* 6194:9503 / 9532 */
  .btn--384 { width: 100%; }                                                    /* 6194:9600 */

  /* ---------- Feature Highlights — 6217:11138 (cards stacked, gap 16) ---------- */
  .features .cols { gap: 16px; }
  .feature-col { gap: 16px; }
  .feature-col:last-child { flex-direction: column-reverse; }                   /* 6217:11109: calendar card, then reminder */
  .feature-card, .voice-card--rec, .greeting-card, .reminder-card--feature { width: 353px; }
  .feature-card[data-figma="6119:326"] { height: 250px; }                       /* 6217:11110 */
  .feature-card__text br { display: none; }
  .greeting-card .media { width: 100%; }                                        /* 6217:11099: 319 */
  .greeting-card .media__img img { top: -7.46% !important; height: 144.52% !important; }
  .greeting-card .player { width: 100%; }   /* Figma 337 overflows the 303 media; kept inside the card */
  .greeting-card .player__track { width: auto; flex: 0 1 209px; min-width: 0; }
  .reminder-card--feature .reminder__row { gap: 0; }                            /* 6217:11117 */
  .reminder-card--feature .reminder__main { margin-right: -10px; }              /* 6217:11118 */

  /* ---------- Breakline — 6194:9719 (h316, cover) ---------- */
  .breakline { height: 316px; }
  .breakline__bg { object-position: 50% 50%; }
  .breakline__slide--right-m { object-position: 85% 50%; }                   /* carousel photo 3: the family sits right of centre */

  /* ---------- Security Features — 6194:9722 (centred column) ---------- */
  .security { flex-direction: column; align-items: stretch; gap: 60px; width: calc(100% + 1px); }   /* 6194:9723 is 354 wide */
  .security__copy { width: 100%; align-items: center; }
  .security__text { align-items: center; }
  .security__text .tag { align-self: center; }
  .security__title { width: 100%; height: 92px; text-align: center; white-space: nowrap; }   /* 6194:9728; nowrap drops the desktop trailing space when centred */
  .security__copy .btn--282 { width: 100%; }
  .security__features { flex-direction: column; align-items: stretch; gap: 24px; }
  .security-feature, .security-feature[style] { width: 100%; align-items: center; }
  .security-feature[style] { height: 192px !important; }                        /* 6194:9732 */
  .security-feature__copy { text-align: center; }
  .security-feature__text { height: auto; }
  .security-feature__text span { display: inline; white-space: normal; }

  /* ---------- Notes from Founder — 6217:11140 (centred column, gap 60) ---------- */
  .section--founder { padding-left: 20px; }
  .founder { flex-direction: column; align-items: center; gap: 60px; }
  .founder__photo-wrap { padding-top: 0; }
  .founder__content { width: 100%; }
  .founder__intro { align-items: center; }                                      /* 6194:9757 */
  .founder__intro .tag { align-self: center; }
  .founder__quote { align-items: stretch; text-align: center; }                 /* 6194:9760 */
  .founder__quote-text { height: 82px; }                                        /* 6194:9761 */
  .founder__pillars { height: 104px; }
  .pillar--full .pillar__text { width: 100%; }

  /* ---------- FAQs — 6194:9874 (centred intro, list gap 24) ---------- */
  .faq { flex-direction: column; gap: 60px; }
  .faq__intro { width: 100%; gap: 24px; }
  .faq__intro-text { align-items: center; text-align: center; }
  .faq__intro-text .tag { align-self: center; }
  .faq__title { height: 76px; font-size: 44px; line-height: 44px; letter-spacing: -0.528px; }   /* 6194:9830 */
  .faq__intro .btn--180 { width: 100%; }
  .faq__list { width: 100%; min-height: 732px; }                               /* 6194:9888 fixed 732 */
  .faq-item { position: relative; }
  .faq-item__content { width: 100%; flex: 1 1 auto; }
  .faq-item__q { padding-right: 48px; }                                         /* question column 305 of 353 */
  .faq-item__q br, .faq-item__a br { display: none; }
  .faq-item__a[style] { height: auto !important; }
  .faq-item__toggle { position: absolute; right: 0; top: 15.5px; width: 24px; height: 24px; }   /* 6194:9893: 16 from the outer edge (0.5 stroke) */

  /* ---------- Pre Footer — 6217:11141 (h662, cover photo + 24% black) ---------- */
  .prefooter { min-height: 662px; padding: 60px 20px; }
  .prefooter__bg { left: 0; top: 0; width: 100%; height: 100%; object-position: 50% 50%; }
  .prefooter__shade { display: block; position: absolute; inset: 0; background: rgba(0,0,0,.24); pointer-events: none; }
  .prefooter__card { height: 542px; min-height: 0; padding: 60px 32px; align-items: center; }   /* 6194:9875 */
  .prefooter__content { width: 100%; }
  .prefooter__title { height: 124px; font-size: 40px; line-height: 44px; letter-spacing: -0.48px; }   /* 6194:9880 */
  .br-m { display: inline; }
  .prefooter__text .tag { width: 138px; }                                       /* text fixed at 114 */

  /* ---------- Footer — 6217:11142 ---------- */
  .site-footer__top { height: 240px; padding: 40px 20px; }                      /* 6194:9941 */
  .site-footer__top .site-footer__row { flex-direction: column; justify-content: space-between; align-items: center; height: 160px; }
  .site-footer__links { flex-direction: column; justify-content: center; gap: 12px; height: 98px; }
  .site-footer__bottom { height: 100px; padding: 16px 20px; }                   /* 6194:9950 */
  .site-footer__row--bottom { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .site-footer__copy { width: 100%; }
  .site-footer__tagline { width: 100%; text-align: center; }

  /* ---------- Contact / legal pages (no mobile Figma frames yet — interim) ---------- */
  /* Contact Us — Figma 6212:10028 "Pr - Contact Us - M" (web y = Figma y − 53; page 1259) */
  .contact-hero { min-height: 0; height: 286px; padding: 60px 20px; }                        /* 6212:10575 */
  .contact-hero__inner { width: calc(100% + 1px); }                                           /* 6212:10576: 354 */
  .contact-hero__title { height: 40px; font-size: 48px; line-height: 44px; letter-spacing: -0.576px; }   /* 6212:10579 */
  .contact-body { min-height: 0; margin-top: 0; padding: 60px 20px; }                        /* no 1px seam on mobile */
  .contact-form-wrap { width: 100%; }
  .contact-form .btn-block { margin-top: 4px; border-radius: 32px; }                         /* 6212:10713: 20 below message, radius 32 */
  /* Legal pages — Figma 6212:10716 "Pr - Privacy - M" (web y = Figma y − 53). Terms mobile (6212:10863) is identical apart from the 100px footer gap. */
  .legal-hero { height: 216px; padding: 60px 20px; }                                          /* 6212:10772: Cream 01, y130, h216 */
  .legal-hero__inner { width: calc(100% + 1px); max-width: none; }                                             /* 6212:10773: 354, gap 24 */
  .legal-hero__title { height: 40px; font-size: 48px; line-height: 44px; letter-spacing: -0.576px; }   /* 6212:10776 */
  .legal-body { padding: 60px 20px 130px; }                                                   /* 6212:10840 at y406 (60 below hero); footer 130 below content */
  .legal-body--terms { padding-bottom: 100px; }                                            /* 6212:10984 ends y6158; footer 6212:10925 at y6258 */
  /* .legal / __h1 / __group / __h2 / __h3 / __body keep the desktop values: 6212:10840–10862 match them (column gap 24, Heading/04 box h24, groups gap 8, 16/24 body) */
}

/* Narrower phones than the 393 frame: fixed Figma heading boxes (which let 3-line text overflow
   evenly at 393) grow instead, so extra wrapped lines never overlap neighbours. */
@media (max-width: 389px) {
  .how .section-head, .features .section-head { height: auto; }
  .section-head__title--112, .section-head__title--56, .security__title, .founder__quote-text,
  .faq__title, .prefooter__title { height: auto; }
  .security__title { white-space: normal; }
  .prefooter__card { height: auto; min-height: 542px; }
  .prefooter__title .br-m { display: none; }
}