/* Hushweek website: the app's "Neon night" look (src/constants/theme.ts). True black in dark mode so the data glows,
   a cool white in light mode where the glow becomes a soft coloured shadow. Hot pink is the accent and the dose, amber
   the dose day, cyan the medicine level, lime the weight. Barlow Condensed for headlines and numbers, the system font
   for reading. Every visual of the app is a real capture of the app. */

:root {
  --canvas: #F3F4F7;
  --surface: #FFFFFF;
  --sunken: #E8E9EF;
  --track: #DDDEE6;
  --ink: #0B0B10;
  --ink-2: #55555F;
  --ink-3: #6B6B76;
  --on-ink: #FFFFFF;
  --hairline: rgba(11, 11, 16, 0.09);
  --hairline-strong: rgba(11, 11, 16, 0.16);
  --accent: #D60F5A;
  --accent-light: #FF5C93;
  --accent-soft: rgba(214, 15, 90, 0.10);
  --on-accent: #FFFFFF;
  --amber: #FF9500;
  --amber-soft: rgba(255, 149, 0, 0.14);
  /* Data hues: shapes only, never words (cyan and lime don't reach AA on white). */
  --level: #00A3D1;
  --weight: #57B000;
  --protein: #FF5A2C;
  --water: #1E6FFF;
  --good: #077A50;
  --shadow: rgba(20, 20, 40, 0.14);
  --bezel: #0B0B10;
  /* The glow: on white, a soft coloured shadow below the shape. */
  --glow-accent: 0 14px 30px -14px rgba(214, 15, 90, 0.55);
  --glow-accent-wide: 0 34px 60px -34px rgba(214, 15, 90, 0.35);
  --display: 'Barlow Condensed', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 22px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #000000;
    --surface: #121317;
    --sunken: #22232A;
    --track: #22232A;
    --ink: #F5F5F7;
    --ink-2: #A1A1AC;
    --ink-3: #8A8A96;
    --on-ink: #000000;
    --hairline: rgba(245, 245, 247, 0.10);
    --hairline-strong: rgba(245, 245, 247, 0.18);
    --accent: #FF2D78;
    --accent-light: #FF7AAB;
    --accent-soft: rgba(255, 45, 120, 0.18);
    --on-accent: #0B0B10;
    --amber: #FFB21E;
    --amber-soft: rgba(255, 178, 30, 0.16);
    --level: #1EE3FF;
    --weight: #B8FF3C;
    --protein: #FF6A3D;
    --water: #1EA7FF;
    --good: #3DF5A0;
    --shadow: rgba(0, 0, 0, 0.6);
    --bezel: #1A1B21;
    /* On black, a halo in the shape's own colour. */
    --glow-accent: 0 0 28px -4px rgba(255, 45, 120, 0.6);
    --glow-accent-wide: 0 0 80px -30px rgba(255, 45, 120, 0.45);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 30; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--on-ink); }
.skip:focus { left: 12px; }
.icon { width: 1em; height: 1em; flex: none; }

/* The mark inline: the days in pink, the dose day in amber, glowing on black, a soft shadow on white. */
.mark { overflow: visible; }
.mark .wr-day { stroke: var(--accent); }
.mark .wr-dose { stroke: var(--amber); }
.mark .wr-track { stroke: var(--track); }
.mark .wr-glow { opacity: 0.35; transform: translateY(6px); }
@media (prefers-color-scheme: dark) {
  .mark .wr-glow { opacity: 0.9; transform: none; }
}

/* Navigation */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--canvas) 78%, transparent); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--hairline); }
.nav-row { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 26px/1 var(--display); letter-spacing: 0; }
.brand svg { width: 34px; height: 34px; margin: -3px -2px -3px -4px; }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav nav a:hover { color: var(--ink); }
.nav-cta { text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-accent); transition: transform 0.15s var(--ease-out); }
.nav-cta:active { transform: scale(0.97); }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: clamp(32px, 5vw, 72px); min-height: min(880px, calc(100dvh - 64px)); padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero h1 { font-size: clamp(56px, 7.4vw, 104px); line-height: 0.94; font-weight: 700; letter-spacing: -0.01em; max-width: 7.2em; }
.lede { margin-top: 24px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.store { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px 11px 16px; border-radius: 16px; background: var(--ink); color: var(--on-ink); text-decoration: none; transition: transform 0.15s var(--ease-out); }
.store:active { transform: scale(0.97); }
.store .icon { width: 26px; height: 26px; }
.store span { display: grid; font: 700 21px/1.05 var(--display); letter-spacing: 0.005em; }
.store small { font: 500 11px/1.3 var(--text); letter-spacing: 0; opacity: 0.72; }
/* Room above the phone for the top of the week ring, where the dose day sits; on a short screen the phone shrinks so
   the hero still fits. */
.hero-phone { display: flex; justify-content: center; padding-top: clamp(56px, 6vw, 84px); }
.hero-phone .phone { width: clamp(236px, min(25vw, (100dvh - 220px) * 0.46), 312px); }
/* Sized and placed round the phone by week-ring.js. */
.ring-hero { position: absolute; left: 0; top: 0; width: 0; height: 0; max-width: none; z-index: 0; pointer-events: none; }

/* The device frame around real captures */
.phone { position: relative; width: clamp(250px, 25vw, 312px); aspect-ratio: 600 / 1304; padding: 10px; border-radius: 54px; background: var(--bezel); box-shadow: 0 50px 90px -40px var(--shadow), 0 20px 40px -20px var(--shadow), inset 0 0 0 1.5px rgba(255, 255, 255, 0.10); }
.phone::after { content: ''; position: absolute; top: 20px; left: 50%; width: 30%; height: 26px; transform: translateX(-50%); border-radius: 20px; background: #000; z-index: 2; }
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 44px; background: var(--sunken); }
.tilt { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) rotate(1deg); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -10px; } }

/* Medicines strip */
.labels { border-block: 1px solid var(--hairline); background: var(--surface); }
.labels-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; padding-block: 22px; font-size: 15px; color: var(--ink-2); }
.labels ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.labels li { padding: 7px 14px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); }
.labels strong { color: var(--ink); font-weight: 600; margin-right: 4px; }

/* Feature story: the phone stays on screen while the steps scroll past */
.story { padding-block: clamp(80px, 11vw, 140px) 40px; }
.story-title { font-size: clamp(42px, 5.6vw, 72px); line-height: 0.98; letter-spacing: -0.01em; font-weight: 700; max-width: 12em; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 24px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { --hue: var(--accent); min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: 30em; opacity: 0.32; transition: opacity 0.5s var(--ease-out); }
.step[data-clip="progress"] { --hue: var(--weight); }
.step[data-clip="food"] { --hue: var(--water); }
.step[data-clip="shots"] { --hue: var(--level); }
.step.is-active { opacity: 1; }
.step-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--hue) 16%, transparent); color: var(--hue); }
.step-icon .icon { width: 26px; height: 26px; }
.step h3 { font-size: clamp(32px, 3.2vw, 42px); line-height: 1.02; letter-spacing: -0.005em; font-weight: 700; }
.step p { font-size: 18px; color: var(--ink-2); }
.phone-inline { display: none; }
.story-stage { position: sticky; top: calc(50vh - min(320px, 30vw)); height: fit-content; display: flex; justify-content: center; padding-block: 40px; }
.stage-phone { width: clamp(270px, 26vw, 320px); }
.stage-phone .clip { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); opacity: 0; transition: opacity 0.6s var(--ease-out); }
.stage-phone .clip.is-active { opacity: 1; }

/* Bento */
.bento-section { padding-block: clamp(80px, 10vw, 130px); }
.bento-section h2, .pricing h2, .questions h2 { font-size: clamp(40px, 5.2vw, 66px); line-height: 0.98; letter-spacing: -0.01em; font-weight: 700; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 16px; margin-top: 44px; }
.cell { position: relative; overflow: hidden; border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.cell h3 { font-size: 28px; line-height: 1.05; letter-spacing: 0; font-weight: 700; }
.cell p { color: var(--ink-2); font-size: 16px; }
.cell picture { display: block; margin-top: auto; }
.cell img { border-radius: 16px; width: 100%; height: auto; }
.cell-pattern { grid-column: span 3; grid-row: span 3; }
.cell-pattern picture { margin-block: auto; padding-top: 18px; }
.cell-quote { grid-column: span 3; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), var(--glow-accent); }
.cell-quote .icon { width: 28px; height: 28px; color: var(--accent); }
.cell-quote blockquote { margin: 6px 0 0; font: 600 25px/1.18 var(--display); letter-spacing: 0.002em; }
.cell-quote .cite { color: var(--ink-3); font-size: 14px; margin-top: auto; }
.cell-reminder { grid-column: span 3; background: var(--sunken); }
.cell-supply { grid-column: span 3; }
.cell-ladder { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: clamp(24px, 5vw, 64px); padding: clamp(26px, 3.4vw, 44px); }
.cell-ladder .cell-copy { flex: 1 1 0; display: grid; gap: 10px; max-width: 26em; }
.cell-ladder h3 { font-size: clamp(30px, 3vw, 38px); }
.cell-ladder picture { flex: 1.25 1 0; margin-top: 0; max-width: 600px; margin-left: auto; }

/* Privacy */
.privacy { padding-block: clamp(70px, 9vw, 120px); background: var(--surface); border-block: 1px solid var(--hairline); }
.privacy-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.privacy-statement { position: sticky; top: 120px; display: grid; gap: 18px; }
.lock { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-accent); }
.lock .icon { width: 30px; height: 30px; }
.privacy h2 { font-size: clamp(40px, 5.2vw, 66px); line-height: 0.98; letter-spacing: -0.01em; font-weight: 700; }
.privacy-statement p { font-size: 19px; color: var(--ink-2); max-width: 26em; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.facts li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 22px; border-radius: var(--radius); background: var(--canvas); }
.facts .icon { width: 28px; height: 28px; color: var(--accent); margin-top: 2px; }
.facts h3 { font: 600 18px/1.35 var(--text); }
.facts p { color: var(--ink-2); font-size: 16px; margin-top: 4px; }

/* Pricing */
.pricing { padding-block: clamp(80px, 10vw, 130px); }
.section-lede { margin-top: 16px; font-size: 19px; color: var(--ink-2); max-width: 34em; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; max-width: 900px; }
.plan { display: grid; align-content: start; gap: 16px; padding: clamp(26px, 3vw, 38px); border-radius: 28px; background: var(--surface); }
.plan h3 { font-size: 32px; line-height: 1; font-weight: 700; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.badge { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.price { font: 700 68px/0.95 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.price small { font: 500 17px/1 var(--text); letter-spacing: 0; margin-left: 8px; color: var(--ink-2); }
.price-note { font-size: 15px; color: var(--ink-2); margin-top: -4px; }
.plan ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.plan li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.plan li .icon { width: 20px; height: 20px; color: var(--ink-3); }
.plan-pro { box-shadow: inset 0 0 0 1.5px var(--accent), var(--glow-accent), var(--glow-accent-wide); }
.plan-pro li .icon { color: var(--accent); }

/* Questions */
.questions { padding-block: clamp(70px, 9vw, 120px); border-top: 1px solid var(--hairline); }
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 56px; margin: 44px 0 0; }
.qa dt { font: 700 25px/1.1 var(--display); letter-spacing: 0; }
.qa dd { margin: 10px 0 0; color: var(--ink-2); }
.qa a { color: var(--accent); }

/* Finale */
.finale { position: relative; overflow: hidden; padding-block: clamp(80px, 11vw, 150px); text-align: center; }
.finale-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }
.finale h2 { font-size: clamp(46px, 6.8vw, 88px); line-height: 0.96; letter-spacing: -0.01em; font-weight: 700; }
.finale .stores { justify-content: center; margin-top: 10px; }
/* The mark come alive: week-ring.js draws over the still SVG and hides it. */
.ring-mark { position: relative; width: 148px; height: 148px; margin-bottom: -6px; }
.ring-mark svg { width: 100%; height: 100%; }
.ring-mark canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-mark.ring-live svg { visibility: hidden; }

/* Footer */
.footer { padding-block: 44px 64px; border-top: 1px solid var(--hairline); }
.footer-grid { display: grid; gap: 14px; }
.fine { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); max-width: 64em; }
.fine a { color: var(--accent); }

/* Motion: things rise in once; nothing loops except the week ring and the hero phone */
.js .reveal { opacity: 0; translate: 0 24px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tilt { animation: none; }
  .js .reveal { opacity: 1; translate: none; }
  .step, .stage-phone .clip { transition: none; }
}

/* Narrow windows: one column, the story's phones sit inline under each step */
@media (max-width: 900px) {
  .nav nav { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; text-align: left; }
  .nav-cta { margin-left: auto; }
  .hero-phone { margin-top: 8px; padding-top: 64px; }
  .hero-phone .phone { width: clamp(250px, 66vw, 300px); }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-stage { display: none; }
  .step { min-height: 0; opacity: 1; padding-block: 44px; max-width: none; }
  .phone-inline { display: block; margin: 18px auto 0; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .cell-pattern, .cell-quote, .cell-reminder, .cell-supply, .cell-ladder { grid-column: auto; grid-row: auto; }
  .cell-ladder { flex-direction: column; align-items: stretch; padding: 26px; }
  .cell-ladder picture { margin-left: 0; max-width: none; }
  .privacy-grid, .plans, .qa { grid-template-columns: minmax(0, 1fr); }
  .privacy-statement { position: static; }
}

/* Legal pages: one readable column in the app's type, the same blocks the app renders. */
.legal { padding-block: clamp(36px, 6vw, 64px) 88px; }
.legal-doc { max-width: 780px; }
.legal-doc h1 { font: 700 clamp(44px, 6vw, 64px)/0.98 var(--display); letter-spacing: -0.01em; }
.legal-doc .updated { margin-top: 14px; color: var(--ink-3); font-size: 15px; }
.legal-doc h2 { margin-top: 48px; font: 700 30px/1.1 var(--display); letter-spacing: 0; }
.legal-doc h3 { margin-top: 28px; font: 600 18px/1.35 var(--text); }
.legal-doc p, .legal-doc ul, .legal-doc ol { margin: 12px 0 0; color: var(--ink-2); }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--accent); text-underline-offset: 3px; }
.legal-doc ul, .legal-doc ol { padding-left: 1.3em; }
.legal-doc li + li { margin-top: 8px; }
.legal-doc li::marker { color: var(--accent); }
.summary-box { margin-top: 32px; padding: 22px 26px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.summary-box > :first-child { margin-top: 0; }
.summary-box p:first-child strong { font: 700 23px/1.15 var(--display); }
.table-wrap { margin-top: 16px; overflow-x: auto; border-radius: 16px; background: var(--surface); border: 1px solid var(--hairline); }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 12px 16px; }
.legal-doc th { font-weight: 600; color: var(--ink); background: var(--sunken); }
.legal-doc td { color: var(--ink-2); border-top: 1px solid var(--hairline); }
.legal-doc td:first-child { color: var(--ink); font-weight: 500; }
.nav nav a[aria-current="page"] { color: var(--ink); }