/* Verafeel marketing site — design tokens ported from the real app (lib/theme.tsx), extended
   for a website context with bolder color blocking, a stamp motif, and small hand-made
   imperfections (slight tilts, varied section rhythm) the in-app design system doesn't need. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Quicksand:wght@500;600;700&display=swap");

:root {
  --cream: #FAF7F2;
  --white: #FFFFFF;
  --teal: #6FA89C;
  --deep-teal: #3F6F65;
  --ink-teal: #1E4438;
  --lavender: #E4DEF2;
  --lavender-solid: #B8A9E0;
  --lavender-text: #5B4B8A;
  --mint: #DDEEEA;
  --mint-solid: #8FC4B7;
  --amber: #E0B15C;
  --amber-deep: #B9832F;
  --charcoal: #3A3A3A;
  --muted: #8A8780;
  --border: #E8E4DA;
  --dark: #201E1B;
  --dark-2: #2A2620;

  --font-display: "Quicksand", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-card: 18px;
  --radius-pill: 999px;
  --radius-sheet: 26px;

  --ease: cubic-bezier(.4,0,.2,1);
  --max: 1120px;
  --max-narrow: 720px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--deep-teal); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 24px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,247,242,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.site-header nav {
  max-width: var(--max); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px;
  background: url('../assets/logo.svg') no-repeat center / contain;
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--charcoal); }
.nav-links { display: flex; align-items: center; gap: 6px 20px; margin-left: auto; flex-wrap: wrap; }
.nav-links a:not(.btn) {
  font-size: 14px; color: var(--charcoal); text-decoration: none; padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:not(.btn):hover { border-bottom-color: var(--teal); }

/* ---------- Buttons / pills ---------- */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  height: 46px; padding: 0 24px; border-radius: var(--radius-sheet);
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  border: none; cursor: pointer; transition: transform 160ms var(--ease), opacity 160ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--deep-teal); color: var(--cream); }
.btn-primary:hover { opacity: 0.88; }
.btn-cream { background: var(--cream); color: var(--deep-teal); }
.btn-cream:hover { opacity: 0.85; }
.btn-outline { background: var(--white); color: var(--charcoal); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--teal); }
.btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-teal);
  background: var(--mint); padding: 7px 14px; border-radius: var(--radius-pill);
}

/* ---------- Stamp badge (scalloped, brand motif for small chips) ---------- */
.stamp-badge {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px 9px 16px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  color: var(--ink-teal); background: var(--mint); border-radius: var(--radius-pill);
  white-space: nowrap;
}
.stamp-badge::before {
  content: ''; position: absolute; left: -3px; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--cream); transform: translateY(-50%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* ---------- Eyebrow (used sparingly now, not on every section) ---------- */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; }

/* ---------- Blobs ---------- */
.blob { position: absolute; pointer-events: none; z-index: 0; }

/* ---------- Phone frame (bespoke — cream body, teal hairline, not a generic dark bezel) ---------- */
.phone {
  position: relative; width: 250px; max-width: 100%; flex-shrink: 0;
}
.phone-shell {
  border-radius: 34px; background: var(--cream); padding: 7px;
  border: 1.5px solid var(--border);
  box-shadow: 0 22px 40px -18px rgba(63,111,101,0.35);
}
.phone-screen {
  border-radius: 28px; overflow: hidden; background: var(--white);
  aspect-ratio: 390 / 844;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone-cap {
  margin-top: 12px;
}
.phone-cap .t { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--charcoal); }
.phone-cap .n { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-top: 3px; }
.tilt-l { transform: rotate(-2.2deg); }
.tilt-r { transform: rotate(1.8deg); }

/* ---------- Layout helpers ---------- */
.section { position: relative; overflow: hidden; }
.section-band { padding: 88px 0; }
.split {
  display: flex; gap: 56px; align-items: center; flex-wrap: wrap;
}
.split > * { flex: 1; min-width: 300px; }
.h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; }
.lede { font-size: 16px; line-height: 1.7; color: var(--charcoal); }
.lede-muted { font-size: 15px; line-height: 1.7; color: var(--muted); }

/* Bold full-bleed sections (color, not just cream+hairline everywhere) */
.section-deep { background: var(--deep-teal); color: var(--cream); }
.section-deep .h2, .section-deep h1 { color: var(--cream); }
.section-lavender { background: var(--lavender); }
.section-mint { background: var(--mint); }

/* ---------- Value / grid cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 22px;
}
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

/* ---------- Testimonials: scalloped stamp cards, gently tilted, corkboard feel ---------- */
.stamp-wall { display: flex; flex-wrap: wrap; gap: 30px 26px; justify-content: flex-start; }
.stamp-quote {
  width: 100%; max-width: 300px; padding: 30px 26px; background: var(--white);
  clip-path: path("M0,0 L0,0 A15.6,15.6 0 0 0 31.2,0 L31.2,0 A15.6,15.6 0 0 0 62.5,0 L62.5,0 A15.6,15.6 0 0 0 93.7,0 L93.7,0 A15.6,15.6 0 0 0 125,0 L125,0 A15.6,15.6 0 0 0 156.2,0 L156.2,0 A15.6,15.6 0 0 0 187.5,0 L187.5,0 A15.6,15.6 0 0 0 218.7,0 L218.7,0 A15.6,15.6 0 0 0 250,0 L250,0 A15.6,15.6 0 0 0 281.2,0 L281.2,0 A15.6,15.6 0 0 0 312.5,0 L312.5,0 A15.6,15.6 0 0 0 343.7,0 L343.7,0 A15.6,15.6 0 0 0 375,0 L375,0 L375,0 A15,15 0 0 0 375,30 L375,30 A15,15 0 0 0 375,60 L375,60 A15,15 0 0 0 375,90 L375,90 A15,15 0 0 0 375,120 L375,120 A15,15 0 0 0 375,150 L375,150 A15,15 0 0 0 375,180 L375,180 A15,15 0 0 0 375,210 L375,210 A15,15 0 0 0 375,240 L375,240 A15,15 0 0 0 375,270 L375,270 A15,15 0 0 0 375,300 L375,300 L375,300 A15.6,15.6 0 0 0 343.8,300 L343.8,300 A15.6,15.6 0 0 0 312.5,300 L312.5,300 A15.6,15.6 0 0 0 281.3,300 L281.3,300 A15.6,15.6 0 0 0 250,300 L250,300 A15.6,15.6 0 0 0 218.8,300 L218.8,300 A15.6,15.6 0 0 0 187.5,300 L187.5,300 A15.6,15.6 0 0 0 156.3,300 L156.3,300 A15.6,15.6 0 0 0 125,300 L125,300 A15.6,15.6 0 0 0 93.8,300 L93.8,300 A15.6,15.6 0 0 0 62.5,300 L62.5,300 A15.6,15.6 0 0 0 31.3,300 L31.3,300 A15.6,15.6 0 0 0 0,300 L0,300 L0,300 A15,15 0 0 0 0,270 L0,270 A15,15 0 0 0 0,240 L0,240 A15,15 0 0 0 0,210 L0,210 A15,15 0 0 0 0,180 L0,180 A15,15 0 0 0 0,150 L0,150 A15,15 0 0 0 0,120 L0,120 A15,15 0 0 0 0,90 L0,90 A15,15 0 0 0 0,60 L0,60 A15,15 0 0 0 0,30 L0,30 A15,15 0 0 0 0,0 Z");
  filter: drop-shadow(0 10px 18px rgba(58,52,42,0.10));
}
.stamp-quote p { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--charcoal); }
.stamp-quote footer { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.stamp-wall .stamp-quote:nth-child(1) { transform: rotate(-2deg); }
.stamp-wall .stamp-quote:nth-child(2) { transform: rotate(1.6deg); }
.stamp-wall .stamp-quote:nth-child(3) { transform: rotate(-1.2deg); }
.stamp-wall .stamp-quote:nth-child(4) { transform: rotate(2.1deg); }

/* ---------- Marks grid ---------- */
.marks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; }
.marks-grid .mark { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.marks-grid .mark span { font-size: 10px; color: var(--muted); }

/* ---------- Mascot rows ---------- */
.mascot-row { display: flex; gap: 14px; align-items: center; }
.mascot-row img { height: 54px; width: 54px; object-fit: contain; object-position: center bottom; flex-shrink: 0; }
.mascot-row img.blend { opacity: 0.88; filter: saturate(0.45) brightness(0.9); }
.mascot-row .name { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.mascot-row .desc { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; }

/* ---------- Mood mechanic demo ---------- */
.demo-card { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px; }
.mood-btn {
  font-family: var(--font-body); font-size: 14px; height: 42px; padding: 0 18px;
  border-radius: var(--radius-pill); cursor: pointer; background: var(--white);
  border: 1px solid var(--border); color: var(--charcoal); transition: all 140ms var(--ease);
}
.mood-btn.active { background: var(--mint); border-color: var(--teal); color: var(--deep-teal); }
.follow-up { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); animation: fadeIn 280ms var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.follow-opt { font-size: 14px; padding: 12px 14px; border-radius: 14px; background: var(--lavender); color: var(--lavender-text); margin-top: 8px; }

.feature-what { font-size: 13.5px; font-weight: 600; margin-top: 12px; }
.ph-toolbar { display: flex; gap: 14px; margin-top: 16px; }
.ph-tool { text-align: center; }
.ph-tool .circ { width: 34px; height: 34px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ph-tool .lbl { font-size: 7.5px; color: var(--muted); margin-top: 4px; }
.ph-palette { background: var(--white); border-radius: 14px; padding: 4px 12px; margin-top: 12px; box-shadow: 0 -6px 14px rgba(0,0,0,0.04); }
.ph-palette-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ph-palette-row:last-child { border-bottom: none; }
.ph-palette-row .circ { width: 24px; height: 24px; border-radius: 50%; background: var(--mint); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.ph-palette-row .t { font-family: var(--font-display); font-weight: 600; font-size: 10px; color: var(--charcoal); }
.ph-palette-row .n { font-size: 7.5px; color: var(--muted); margin-top: 1px; }
.feature-what b { font-weight: 700; }

/* ---------- Feature preview strip (minimal home, depth lives on features.html) ---------- */
.feature-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 36px; }
.feature-tile {
  display: block; text-decoration: none; color: inherit; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px;
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.feature-tile:hover { border-color: var(--teal); transform: translateY(-2px); }
.feature-tile-art { width: 100%; height: 84px; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.feature-tile-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--charcoal); margin-top: 12px; }
.feature-tile-n { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.feature-tile-link { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--deep-teal); margin-top: 10px; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq-item .q { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.faq-item .a { font-size: 15px; line-height: 1.75; color: var(--muted); margin-top: 8px; }
.faq-group-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin-top: 44px; }
.faq-group-label:first-child { margin-top: 0; }

/* ---------- Inner page hero ---------- */
.inner-hero { padding: 76px 0 48px; }
.inner-hero .kicker { font-size: 12px; color: var(--muted); }
.inner-hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; margin-top: 10px; }
.inner-hero p { font-size: 16.5px; line-height: 1.7; color: var(--muted); margin-top: 16px; max-width: 600px; }

/* ---------- Policy layout ---------- */
.policy-wrap { display: flex; gap: 52px; align-items: flex-start; flex-wrap: wrap; }
.policy-toc { width: 200px; flex-shrink: 0; position: sticky; top: 90px; }
.policy-toc a { display: block; font-size: 13px; text-decoration: none; color: var(--charcoal); padding: 5px 0; }
.policy-toc a:hover { color: var(--deep-teal); }
.policy-body { flex: 1; min-width: 300px; max-width: 640px; }
.policy-body section { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 32px; }
.policy-body section:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.policy-body h2 { font-size: 21px; }
.policy-body p { font-size: 15px; line-height: 1.8; margin-top: 12px; }
.policy-callout { border-radius: var(--radius-card); padding: 26px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: rgba(250,247,242,0.62); font-size: 13px; line-height: 1.5; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 32px; padding: 60px 24px 26px; max-width: var(--max); margin: 0 auto; }
.footer-brand p { margin-top: 12px; max-width: 260px; }
.footer-col-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--cream); }
.footer-links { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--cream); }
.footer-bottom {
  max-width: var(--max); margin: 0 auto; padding: 18px 24px 40px; border-top: 1px solid rgba(250,247,242,0.12);
  display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12px;
}
.footer-bottom .push { margin-left: auto; }

/* ---------- Toast (waitlist confirm) ---------- */
.field {
  font-family: var(--font-body); font-size: 15px; height: 48px; padding: 0 20px;
  border-radius: var(--radius-sheet); border: 1px solid var(--border); background: var(--white);
  color: var(--charcoal); width: 300px; max-width: 78vw;
}

@media (max-width: 640px) {
  .nav-links { gap: 6px 14px; }
  .nav-links a:not(.btn) { display: none; }
  .nav-links a.btn { margin-left: auto; }
  .policy-toc { display: none; }
  .marks-grid { grid-template-columns: repeat(4,1fr); gap: 14px 6px; }
}

/* ============================================================
   LIVE PHONE SCREENS — real recreations built straight from the app's own component code
   (Home.tsx, StretchRecap.tsx), not screenshots. Guaranteed accurate today, and unlike a PNG
   it can't go stale the next time the app's layout changes.
   ============================================================ */
.phone-screen-html {
  width: 100%; height: 100%; background: var(--cream); color: var(--charcoal); position: relative; overflow: hidden;
  font-family: var(--font-body); padding: 18px 16px; box-sizing: border-box;
}
.ph-eyebrow { font-size: 10px; color: var(--muted); }
.ph-heading { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.15; color: var(--charcoal); margin-top: 4px; }
.ph-field { border-bottom: 1.5px solid #C9C2B2; padding-bottom: 10px; margin-top: 22px; font-size: 11px; color: var(--muted); position: relative; z-index: 1; }
.ph-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.ph-pill { font-family: var(--font-display); font-weight: 600; font-size: 10px; height: 26px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.ph-pill-dark { background: var(--dark); color: var(--cream); }
.ph-pill-teal { background: var(--teal); color: var(--white); opacity: 0.55; }
.ph-mint-bar { background: var(--mint); border: 1.3px solid var(--mint-solid); border-radius: 12px; padding: 9px 11px; margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.ph-mint-bar .t { font-family: var(--font-display); font-weight: 600; font-size: 10.5px; color: var(--deep-teal); }
.ph-mint-bar .n { font-size: 9px; color: var(--deep-teal); opacity: 0.85; margin-top: 1px; }
.ph-scallop-bar {
  margin-top: 9px; width: 204px; height: 44px; box-sizing: border-box; padding: 8px 11px;
  background: var(--lavender); display: flex; align-items: center; gap: 8px;
  clip-path: path("M0,0 L0.0,0 A6.8,6.8 0 0 0 13.6,0 L13.6,0 A6.8,6.8 0 0 0 27.2,0 L27.2,0 A6.8,6.8 0 0 0 40.8,0 L40.8,0 A6.8,6.8 0 0 0 54.4,0 L54.4,0 A6.8,6.8 0 0 0 68.0,0 L68.0,0 A6.8,6.8 0 0 0 81.6,0 L81.6,0 A6.8,6.8 0 0 0 95.2,0 L95.2,0 A6.8,6.8 0 0 0 108.8,0 L108.8,0 A6.8,6.8 0 0 0 122.4,0 L122.4,0 A6.8,6.8 0 0 0 136.0,0 L136.0,0 A6.8,6.8 0 0 0 149.6,0 L149.6,0 A6.8,6.8 0 0 0 163.2,0 L163.2,0 A6.8,6.8 0 0 0 176.8,0 L176.8,0 A6.8,6.8 0 0 0 190.4,0 L190.4,0 A6.8,6.8 0 0 0 204.0,0 L204,0 L204,0.0 A7.3,7.3 0 0 0 204,14.7 L204,14.7 A7.3,7.3 0 0 0 204,29.3 L204,29.3 A7.3,7.3 0 0 0 204,44.0 L204,44 L204.0,44 A6.8,6.8 0 0 0 190.4,44 L190.4,44 A6.8,6.8 0 0 0 176.8,44 L176.8,44 A6.8,6.8 0 0 0 163.2,44 L163.2,44 A6.8,6.8 0 0 0 149.6,44 L149.6,44 A6.8,6.8 0 0 0 136.0,44 L136.0,44 A6.8,6.8 0 0 0 122.4,44 L122.4,44 A6.8,6.8 0 0 0 108.8,44 L108.8,44 A6.8,6.8 0 0 0 95.2,44 L95.2,44 A6.8,6.8 0 0 0 81.6,44 L81.6,44 A6.8,6.8 0 0 0 68.0,44 L68.0,44 A6.8,6.8 0 0 0 54.4,44 L54.4,44 A6.8,6.8 0 0 0 40.8,44 L40.8,44 A6.8,6.8 0 0 0 27.2,44 L27.2,44 A6.8,6.8 0 0 0 13.6,44 L13.6,44 A6.8,6.8 0 0 0 0.0,44 L0,44 L0,44.0 A7.3,7.3 0 0 0 0,29.3 L0,29.3 A7.3,7.3 0 0 0 0,14.7 L0,14.7 A7.3,7.3 0 0 0 0,0.0 Z");
}
.ph-scallop-bar .t { font-family: var(--font-display); font-weight: 600; font-size: 10.5px; color: var(--lavender-text); }
.ph-scallop-bar .n { font-size: 9px; color: var(--lavender-text); opacity: 0.85; margin-top: 1px; }
.ph-insights-label { font-size: 10px; color: var(--muted); margin-top: 14px; }
.ph-insights-heading { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-top: 2px; }
.ph-insight-card { background: var(--lavender); border-radius: 12px; padding: 11px; margin-top: 8px; }
.ph-insight-card .t { font-family: var(--font-display); font-weight: 600; font-size: 10.5px; color: var(--lavender-text); }
.ph-insight-card .n { font-size: 9px; color: var(--lavender-text); opacity: 0.85; margin-top: 2px; }
.ph-vera-corner { position: absolute; top: -4px; right: 6px; width: 46px; z-index: 0; }
.ph-vera-corner img { width: 100%; }

/* ---- Your Stretch step recreations ---- */
.ph-stretch-intro { display: flex; flex-direction: column; height: 100%; }
.ph-mascot-row { display: flex; align-items: flex-end; gap: 4px; }
.ph-mascot-row img { height: 34px; width: auto; }
.ph-stretch-meta { font-size: 9px; color: var(--muted); margin-top: 10px; }
.ph-stretch-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-top: 5px; line-height: 1.2; }
.ph-stretch-body { font-size: 10px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
.ph-stretch-btn { margin-top: auto; background: var(--teal); color: var(--white); text-align: center; border-radius: 999px; padding: 10px; font-family: var(--font-display); font-weight: 600; font-size: 11px; }

.ph-mira-step { display: flex; flex-direction: column; height: 100%; }
.ph-mira-label { font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.ph-mira-title { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; margin-top: 5px; line-height: 1.25; }
.ph-mira-body { font-size: 9.5px; line-height: 1.5; color: var(--muted); margin-top: 7px; }
.ph-mira-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.ph-mira-footer img { height: 78px; width: auto; }
.ph-mira-footer .ph-next { background: #9FB0BF; color: var(--white); border-radius: 999px; padding: 9px 16px; font-family: var(--font-display); font-weight: 600; font-size: 10.5px; }

.ph-theo-step { height: 100%; display: flex; flex-direction: column; }
.ph-theo-label { font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.ph-theo-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ph-theo-row img { height: 64px; width: auto; flex-shrink: 0; }
.ph-theo-num { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 26px; color: var(--charcoal); }
.ph-theo-cap { font-size: 9px; color: var(--charcoal); line-height: 1.4; margin-top: 2px; }
.ph-theo-card { background: var(--lavender); border-radius: 12px; padding: 10px; margin-top: 12px; }
.ph-theo-card .t { font-family: var(--font-display); font-weight: 600; font-size: 10.5px; color: var(--lavender-text); }
.ph-theo-card .n { font-size: 8px; color: var(--lavender-text); opacity: 0.75; margin-top: 5px; }
.ph-theo-q { font-size: 10px; color: var(--charcoal); margin-top: 12px; }
.ph-theo-buttons { display: flex; gap: 6px; margin-top: auto; }
.ph-theo-buttons span { flex: 1; text-align: center; border-radius: 999px; padding: 8px; font-family: var(--font-display); font-weight: 600; font-size: 9.5px; }
.ph-theo-buttons .primary { background: var(--lavender-text); color: var(--white); }
.ph-theo-buttons .outline { background: var(--white); border: 1px solid var(--border); color: var(--charcoal); }

.ph-sam-step { position: relative; height: 100%; }
.ph-sam-step img.ph-sam-mark { position: absolute; top: -20px; right: -26px; width: 108px; height: auto; z-index: 0; }
.ph-sam-content { position: relative; z-index: 1; margin-top: 64px; max-width: 78%; }
.ph-sam-label { font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.ph-sam-title { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; margin-top: 5px; line-height: 1.25; }
.ph-sam-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; margin-top: 9px; }
.ph-sam-card .row { display: flex; justify-content: space-between; padding: 7px 9px; border-bottom: 1px solid var(--border); font-size: 9px; }
.ph-sam-card .row:last-child { border-bottom: none; }
.ph-sam-card .row .v { color: var(--muted); }
.ph-sam-body { font-size: 9.5px; color: var(--muted); line-height: 1.45; margin-top: 9px; }

/* ---- Shareable cards: swipeable carousel, real templates from the app's Share sheet ---- */
.share-card-logo { display: flex; align-items: center; gap: 6px; }
.share-card-logo .dots { width: 22px; height: 16px; position: relative; flex-shrink: 0; }
.share-card-logo .dots span { position: absolute; width: 16px; height: 16px; border-radius: 50%; top: 0; }
.share-card-logo .dots span:first-child { left: 0; background: var(--teal); }
.share-card-logo .dots span:last-child { left: 8px; background: var(--lavender-solid); mix-blend-mode: multiply; }
.share-card-logo b { font-family: var(--font-display); font-weight: 700; font-size: 13px; }

.share-carousel { position: relative; max-width: 340px; margin: 40px auto 0; }
.share-carousel-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; padding: 4px 0 10px;
}
.share-carousel-track::-webkit-scrollbar { display: none; }
.share-slide { flex: 0 0 300px; scroll-snap-align: center; }
.share-card {
  width: 300px; height: 372px; border-radius: 22px; padding: 22px; box-sizing: border-box;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  box-shadow: 0 16px 30px -14px rgba(58,52,42,0.28);
}
.share-card .lock { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.share-eyebrow { font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.3px; opacity: 0.75; }
.share-card-quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.4; margin-top: 12px; }
.share-card-byline { font-size: 10.5px; opacity: 0.7; margin-top: 8px; }
.share-card-extra { font-size: 11.5px; line-height: 1.6; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.08); opacity: 0.85; }
.share-card-spacer { flex: 1; }
.share-weather-icon { width: 46px; height: 46px; border-radius: 50%; background: #F2C879; position: relative; margin-top: 18px; }
.share-weather-icon::after { content: ''; position: absolute; left: 14px; top: 18px; width: 40px; height: 26px; background: var(--white); border-radius: 999px; }
.share-card-big { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; margin-top: 16px; }
.share-card-row { display: flex; gap: 24px; margin-top: auto; }
.share-card-row div div:first-child { font-size: 10px; opacity: 0.7; }
.share-card-row div div:last-child { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-top: 3px; }
.share-week-chart { display: flex; align-items: flex-end; gap: 9px; height: 70px; margin-top: 20px; }
.share-week-chart span { flex: 1; border-radius: 4px 4px 0 0; }
.share-week-days { display: flex; gap: 9px; margin-top: 6px; }
.share-week-days span { flex: 1; text-align: center; font-size: 9px; opacity: 0.6; }
.share-word-cloud { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 18px; align-content: flex-start; flex: 1; }
.share-word-cloud span { font-family: var(--font-display); font-weight: 700; }
.share-type-code { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--deep-teal); margin-top: 14px; }
.share-type-name { font-size: 10.5px; letter-spacing: 0.5px; color: var(--muted); text-transform: uppercase; margin-top: 2px; }
.share-axis { display: flex; justify-content: space-between; font-size: 8.5px; color: var(--muted); margin-top: 10px; }
.share-axis-bar { height: 4px; background: var(--border); border-radius: 999px; margin-top: 4px; position: relative; }
.share-axis-bar span { position: absolute; left: 0; top: 0; height: 100%; background: var(--teal); border-radius: 999px; }
.share-unlock { margin-top: 12px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 11px; background: rgba(58,52,42,0.06); border-radius: 999px; padding: 8px; }

.share-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border); cursor: pointer; font-size: 16px; color: var(--charcoal);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.share-arrow.prev { left: -8px; }
.share-arrow.next { right: -8px; }
.share-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.share-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 160ms var(--ease); }
.share-dots span.active { background: var(--deep-teal); width: 16px; border-radius: 999px; }
@media (max-width: 480px) {
  .share-arrow.prev { left: 4px; } .share-arrow.next { right: 4px; }
}

/* ---- Special Stamps: glowing premium designs, real gradients ported from the app's recipe data ---- */
.stamp-showcase { display: flex; flex-wrap: wrap; gap: 22px; justify-content: flex-start; }
.stamp-swatch {
  width: 118px; height: 140px; position: relative; flex-shrink: 0;
  background-size: 240% 240%; animation: stampShift 7s ease-in-out infinite;
}
@keyframes stampShift { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } }
.stamp-scallop { clip-path: path("M0,0 L0.0,0 A7.4,7.4 0 0 0 14.8,0 L14.8,0 A7.4,7.4 0 0 0 29.5,0 L29.5,0 A7.4,7.4 0 0 0 44.3,0 L44.3,0 A7.4,7.4 0 0 0 59.0,0 L59.0,0 A7.4,7.4 0 0 0 73.8,0 L73.8,0 A7.4,7.4 0 0 0 88.5,0 L88.5,0 A7.4,7.4 0 0 0 103.3,0 L103.3,0 A7.4,7.4 0 0 0 118.0,0 L118,0 L118,0.0 A7.0,7.0 0 0 0 118,14.0 L118,14.0 A7.0,7.0 0 0 0 118,28.0 L118,28.0 A7.0,7.0 0 0 0 118,42.0 L118,42.0 A7.0,7.0 0 0 0 118,56.0 L118,56.0 A7.0,7.0 0 0 0 118,70.0 L118,70.0 A7.0,7.0 0 0 0 118,84.0 L118,84.0 A7.0,7.0 0 0 0 118,98.0 L118,98.0 A7.0,7.0 0 0 0 118,112.0 L118,112.0 A7.0,7.0 0 0 0 118,126.0 L118,126.0 A7.0,7.0 0 0 0 118,140.0 L118,140 L118.0,140 A7.4,7.4 0 0 0 103.3,140 L103.3,140 A7.4,7.4 0 0 0 88.5,140 L88.5,140 A7.4,7.4 0 0 0 73.8,140 L73.8,140 A7.4,7.4 0 0 0 59.0,140 L59.0,140 A7.4,7.4 0 0 0 44.3,140 L44.3,140 A7.4,7.4 0 0 0 29.5,140 L29.5,140 A7.4,7.4 0 0 0 14.8,140 L14.8,140 A7.4,7.4 0 0 0 0.0,140 L0,140 L0,140.0 A7.0,7.0 0 0 0 0,126.0 L0,126.0 A7.0,7.0 0 0 0 0,112.0 L0,112.0 A7.0,7.0 0 0 0 0,98.0 L0,98.0 A7.0,7.0 0 0 0 0,84.0 L0,84.0 A7.0,7.0 0 0 0 0,70.0 L0,70.0 A7.0,7.0 0 0 0 0,56.0 L0,56.0 A7.0,7.0 0 0 0 0,42.0 L0,42.0 A7.0,7.0 0 0 0 0,28.0 L0,28.0 A7.0,7.0 0 0 0 0,14.0 L0,14.0 A7.0,7.0 0 0 0 0,0.0 Z"); }
.stamp-facet { clip-path: path("M0,0 L0.0,0 L7.4,-7.0 L14.8,0 L14.8,0 L22.1,-7.0 L29.5,0 L29.5,0 L36.9,-7.0 L44.3,0 L44.3,0 L51.6,-7.0 L59.0,0 L59.0,0 L66.4,-7.0 L73.8,0 L73.8,0 L81.1,-7.0 L88.5,0 L88.5,0 L95.9,-7.0 L103.3,0 L103.3,0 L110.6,-7.0 L118.0,0 L118,0 L118,0.0 L125.0,7.0 L118,14.0 L118,14.0 L125.0,21.0 L118,28.0 L118,28.0 L125.0,35.0 L118,42.0 L118,42.0 L125.0,49.0 L118,56.0 L118,56.0 L125.0,63.0 L118,70.0 L118,70.0 L125.0,77.0 L118,84.0 L118,84.0 L125.0,91.0 L118,98.0 L118,98.0 L125.0,105.0 L118,112.0 L118,112.0 L125.0,119.0 L118,126.0 L118,126.0 L125.0,133.0 L118,140.0 L118,140 L118.0,140 L110.6,147.0 L103.3,140 L103.3,140 L95.9,147.0 L88.5,140 L88.5,140 L81.1,147.0 L73.8,140 L73.8,140 L66.4,147.0 L59.0,140 L59.0,140 L51.6,147.0 L44.3,140 L44.3,140 L36.9,147.0 L29.5,140 L29.5,140 L22.1,147.0 L14.8,140 L14.8,140 L7.4,147.0 L0.0,140 L0,140 L0,140.0 L-7.0,133.0 L0,126.0 L0,126.0 L-7.0,119.0 L0,112.0 L0,112.0 L-7.0,105.0 L0,98.0 L0,98.0 L-7.0,91.0 L0,84.0 L0,84.0 L-7.0,77.0 L0,70.0 L0,70.0 L-7.0,63.0 L0,56.0 L0,56.0 L-7.0,49.0 L0,42.0 L0,42.0 L-7.0,35.0 L0,28.0 L0,28.0 L-7.0,21.0 L0,14.0 L0,14.0 L-7.0,7.0 L0,0.0 Z"); }

.stamp-molten { background-image: radial-gradient(2px 2px at 22% 26%, #fff, transparent), radial-gradient(2px 2px at 70% 55%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 80%, #fff, transparent), linear-gradient(135deg, #2B0E05, #D9481E, #F2A13B, #2B0E05); filter: drop-shadow(0 0 16px rgba(242,161,59,0.55)); }
.stamp-nebula { background-image: radial-gradient(2px 2px at 30% 20%, #fff, transparent), radial-gradient(2px 2px at 65% 65%, #fff, transparent), radial-gradient(1.5px 1.5px at 20% 75%, #fff, transparent), linear-gradient(135deg, #2E1F4D, #7A5FB0, #C98A9E, #2E1F4D); filter: drop-shadow(0 0 16px rgba(184,169,224,0.5)); }
.stamp-obsidian { background-image: linear-gradient(150deg, #17151C 46%, #4A4656 50%, #17151C 54%); filter: drop-shadow(0 0 8px rgba(58,55,66,0.45)); }
.stamp-solarflare { background-image: radial-gradient(2px 2px at 25% 30%, #fff, transparent), radial-gradient(2px 2px at 72% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 50% 82%, #fff, transparent), linear-gradient(135deg, #3A1E00, #E0B15C, #FFF3C0, #3A1E00); filter: drop-shadow(0 0 16px rgba(255,243,192,0.55)); }
.stamp-void { background-image: linear-gradient(160deg, #0B0A10 60%, #1A1824 100%); filter: drop-shadow(0 0 12px rgba(184,169,224,0.35)) drop-shadow(0 0 12px rgba(127,184,172,0.22)); }
.stamp-prism { background-image: radial-gradient(2px 2px at 20% 25%, #fff, transparent), radial-gradient(2px 2px at 60% 55%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 80%, #fff, transparent), linear-gradient(135deg, #8FC4B7, #B8A9E0, #C98A9E, #E0B15C, #7FA8C9, #8FC4B7); filter: drop-shadow(0 0 18px rgba(143,196,183,0.5)); }

.stamp-cap { margin-top: 12px; max-width: 118px; }
.stamp-cap .t { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.stamp-cap .n { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-top: 3px; }

/* ---- Report dimension rings, real labels, illustrative numbers ---- */
.report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; margin-top: 18px; }
.report-ring { width: 100%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.report-ring .num { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.report-ring-label { text-align: center; font-size: 9.5px; color: var(--muted); margin-top: 5px; }

/* ---- Calendar month, mixed real stamp tiers, tiny swatches ---- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px; }
.cal-dow { font-size: 7.5px; color: var(--muted); text-align: center; text-transform: uppercase; }
.cal-cell { aspect-ratio: 1; border-radius: 5px; position: relative; }
.cal-cell.empty { background: var(--panel, #EFEBE2); }
.cal-milestone { background: var(--mint); border: 1.5px solid var(--amber); }
.cal-streak { background: var(--mint); border: 1.5px solid var(--deep-teal); }
.cal-echo { background: linear-gradient(90deg, #F3E3E7 50%, #E6EFF6 50%); }
.cal-constellation { background: #2E2B4A; }
.cal-anniversary { background: #FBF0DC; border: 1.5px solid var(--amber); }
.cal-rare { background: linear-gradient(160deg, #E4DEF2, #DCEAF3); }
.cal-legendary { background: linear-gradient(120deg, #FBF0DC, #F2C879, #E4DEF2); }
.cal-spring { background: linear-gradient(160deg, #FBEFF3, #F3D3DE); }
.cal-summer { background: linear-gradient(160deg, #FFF4DC, #F2C879); }
.cal-autumn { background: linear-gradient(135deg, #F0997B, #E0B15C, #A9825A); }
.cal-winter { background: linear-gradient(160deg, #FFFFFF, #B9D6E8); }

/* ============================================================
   v2: real rendered screens (website/tools/render-screens.cjs), chapters, pricing, mascots
   ============================================================ */
.split > .phone { flex: 0 0 250px; min-width: 0; }
.phone-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 34px 26px; margin-top: 44px; align-items: start; justify-items: center; }
.phone-row .phone { width: 100%; max-width: 250px; }
@media (min-width: 1000px) { .phone-row-5 { grid-template-columns: repeat(5, 1fr); gap: 34px 18px; } }
.chapter-nav { position: sticky; top: 59px; z-index: 40; background: rgba(250,247,242,0.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
.chapter-nav .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.chapter-nav .wrap::-webkit-scrollbar { display: none; }
.chapter-nav a { flex-shrink: 0; font-size: 13px; font-weight: 500; text-decoration: none; color: var(--charcoal); padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--white); }
.chapter-nav a:hover { border-color: var(--teal); color: var(--deep-teal); }
.chapter-label { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--muted); }
section[id] { scroll-margin-top: 120px; }
.feat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 22px; margin-top: 26px; }
.feat-list .t { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.feat-list .n { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 4px; }
.section-deep .feat-list .n, .section-deep .lede-muted { color: rgba(250,247,242,0.75); }
.plus-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--lavender-text); background: var(--lavender); padding: 4px 10px; border-radius: var(--radius-pill); vertical-align: middle; }
.free-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--ink-teal); background: var(--mint); padding: 4px 10px; border-radius: var(--radius-pill); vertical-align: middle; }
.mark-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 28px; }
.mark-item { display: flex; gap: 12px; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.mark-item img { width: 30px; height: 30px; flex-shrink: 0; }
.mark-item .t { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; }
.mark-item .n { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.secret-card { background: var(--dark); color: var(--cream); border-radius: var(--radius-card); padding: 26px; }
.secret-card .t { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.secret-card .n { font-size: 14px; line-height: 1.7; color: rgba(250,247,242,0.72); margin-top: 8px; }
.secret-card .k { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amber); }
/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin-top: 40px; }
.price-card { background: var(--white); border: 1px solid var(--border); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; }
.price-card.plus { border: 1.5px solid var(--lavender-solid); background: linear-gradient(180deg, #F4F1FA 0%, var(--white) 55%); }
.price-card .name { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.price-card .price { font-family: var(--font-display); font-weight: 700; font-size: 34px; margin-top: 14px; }
.price-card .price small { font-size: 14px; font-weight: 600; color: var(--muted); }
.price-card .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.price-card ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.price-card li { font-size: 14px; line-height: 1.5; padding-left: 24px; position: relative; }
.price-card li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.price-card.plus li::before { border-color: var(--lavender-solid); }
.beta-banner { background: var(--mint); border: 1px solid var(--mint-solid); color: var(--ink-teal); border-radius: 16px; padding: 16px 20px; font-size: 14.5px; line-height: 1.6; margin-top: 28px; }
.compare { width: 100%; border-collapse: collapse; margin-top: 30px; font-size: 14px; }
.compare th, .compare td { text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.compare th { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--muted); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 90px; }
.compare .yes { color: var(--deep-teal); font-weight: 700; }
.compare .no { color: var(--muted); }
.compare-wrap { overflow-x: auto; }
/* Mascots page */
.mascot-feature { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.mascot-feature .art { width: 200px; height: 200px; border-radius: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0 auto; }
.mascot-feature .art img { width: 170px; height: 170px; object-fit: contain; }
.mascot-feature .body { flex: 1; min-width: 280px; }
.mascot-feature .role { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.mascot-quote { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.5; margin-top: 18px; padding-left: 16px; border-left: 3px solid var(--border); }
@media (max-width: 640px) {
  .section-band { padding: 64px 0; }
  .phone-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .phone-row .phone.tilt-l, .phone-row .phone.tilt-r { transform: none; }
  .phone-shell { border-radius: 26px; padding: 5px; }
  .phone-screen { border-radius: 21px; }
  .chapter-nav { top: 58px; }
}
.feature-tile-shot { height: 150px; background: var(--cream); border: 1px solid var(--border); align-items: flex-start; }
.feature-tile-shot img { width: 78%; margin-top: 12px; border-radius: 12px 12px 0 0; box-shadow: 0 6px 16px -8px rgba(63,111,101,0.35); }
.feature-strip { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature-tile-shot { height: 170px; }
.feature-tile-shot img { width: 62%; }
.feature-tile-shot img { height: calc(100% - 12px); object-fit: cover; object-position: top; }