/* ==========================================================================
   Relix site.css (v2.0.0) - the one stylesheet for relixhealth.com.
   Source of truth: design-system.md. Mobile-first: base = 375px,
   enhancements at min-width 600px and 1024px (plus 400px for .hide-xs).
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted EB Garamond) ---------- */
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/ebgaramond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/ebgaramond-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/ebgaramond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/ebgaramond-500i.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  color-scheme: light dark;

  --bg: #F5F2EE;
  --bg-sunk: #EDE9E3;
  --ink: #1C1C1A;
  --ink-2: #5F5F58;
  --green: #426B52;
  --green-press: #2E4D3A;
  --on-green: #FFFFFF;
  --amber: #8C541C;
  --rule: rgba(28, 28, 26, 0.14);
  --band: #426B52;
  --band-ink: #FFFFFF;
  --band-ink-2: rgba(255, 255, 255, 0.82);
  --band-btn: #F5F2EE;
  --band-btn-ink: #2E4D3A;
  --focus: #426B52;

  /* The one allowed shadow: app screen images only. */
  --shadow-screen: 0 24px 48px -24px rgba(28, 28, 26, 0.35);

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --radius-btn: 6px;
  --gutter: 20px;
  --section-pad: 32px;
  --section-pad-lg: 48px; /* closing band + doc pages */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14160F;
    --bg-sunk: #1C1F17;
    --ink: #ECE8E1;
    --ink-2: #A6A59C;
    --green: #78B892;
    --green-press: #94D9AE;
    --on-green: #14160F;
    --amber: #D98D41;
    --rule: rgba(236, 232, 225, 0.16);
    --band: #22382B;
    --band-ink: #ECE8E1;
    --band-ink-2: rgba(236, 232, 225, 0.78);
    --band-btn: #ECE8E1;
    --band-btn-ink: #14160F;
    --focus: #94D9AE;
    --shadow-screen: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  }
}

@media (min-width: 600px) {
  :root { --gutter: 32px; --section-pad: 48px; --section-pad-lg: 64px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --section-pad: 64px; --section-pad-lg: 96px; }
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-variant-numeric: oldstyle-nums;
  color: var(--ink);
}
h1 { font-size: clamp(40px, 10vw, 76px); line-height: 1.02; letter-spacing: -0.015em; }
h2 { font-size: clamp(32px, 6vw, 48px); line-height: 1.06; letter-spacing: -0.01em; }
h3 { font-size: 22px; line-height: 1.2; letter-spacing: 0; }

/* Emphasis in serif headings is italic, same weight. */
h1 em, h2 em, h3 em { font-style: italic; font-weight: inherit; }
/* The italic phrase starts its own line (App Store asset style). */
h1 em, h2 em { display: block; }

strong, b { font-weight: 500; }

a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: background-color .15s, color .15s;
}
a:hover { color: var(--green-press); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (min-width: 600px) {
  body { font-size: 17px; }
  h3 { font-size: 24px; }
}

/* ---------- 4. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: calc(1160px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 8px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-btn);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.hide-xs { display: none !important; }
@media (min-width: 400px) {
  .hide-xs { display: inline-flex !important; }
}

/* ---------- 5. Buttons, trial note, fine print ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 22px;
  background: var(--green);
  color: var(--on-green);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-btn);
  box-shadow: none;
  transition: background-color .15s, color .15s;
}
.btn:hover,
.btn:active {
  background: var(--green-press);
  color: var(--on-green);
}
.btn--sm {
  min-height: 44px; /* 44px tap-target floor (design system lists 40px) */
  padding: 10px 14px;
  font-size: 15px;
}
.btn--band {
  background: var(--band-btn);
  color: var(--band-btn-ink);
}
.btn--band:hover,
.btn--band:active {
  background: var(--band-btn);
  color: var(--band-btn-ink);
}

.trial {
  max-width: 34em;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.fine {
  max-width: 40em;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.fine a { text-decoration: underline; }

/* ---------- 6. Nav ---------- */
.site-nav {
  border-bottom: 1px solid var(--rule);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}
.site-nav__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-nav__logo img {
  height: 26px;
  width: auto;
}
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav__links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}
.site-nav__links a:not(.btn):hover,
.site-nav__links a[aria-current="page"] { color: var(--green); }
.site-nav__links .btn { margin-left: 4px; }

/* ---------- 7. Numbered / plain sections ---------- */
.sec__grid {
  display: grid;
  border-top: 1px solid var(--rule);
  padding-block: var(--section-pad);
}
.sec__num {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variant-numeric: lining-nums;
  font-size: 20px;
  line-height: 1;
  color: var(--green);
}
.sec__text > * + * { margin-top: 16px; }
.sec__text h2 { margin-bottom: 8px; }
.sec__text p:not(.fine) { max-width: 34em; }
.sec__text .fine { margin-top: 24px; }

.sec__fig {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 32px;
}

/* App screen image / hero video */
.screen {
  display: block;
  width: min(72vw, 300px);
  height: auto;
  aspect-ratio: 400 / 869;
  background: var(--bg-sunk);
  border-radius: 11% / 5.06%;
  box-shadow: var(--shadow-screen);
}

/* ---------- 8. Hero ---------- */
.hero {
  padding-block: var(--section-pad);
}
.hero__grid { display: grid; }
.hero__text > * + * { margin-top: 24px; }
.hero__text .lead { max-width: 34em; }
.hero__text .btn { margin-top: 32px; }
.hero__text .trial { margin-top: 12px; }
.hero__text .fine { margin-top: 16px; }
.hero__fig {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 32px;
}

.lead {
  font-size: 18px;
  line-height: 1.5;
}

@media (min-width: 600px) {
  .lead { font-size: 20px; }
}

/* ---------- 9. Also in Relix (feature list) ---------- */
.features { border-top: 0; }
.features__list { margin-top: 32px; }
.features__row {
  display: grid;
  gap: 8px;
  padding-block: 24px;
  border-top: 1px solid var(--rule);
}
.features__row dt {
  font-family: var(--serif);
  font-weight: 500;
  font-variant-numeric: oldstyle-nums;
  font-size: 22px;
  line-height: 1.2;
}
.features__row dd { max-width: 34em; }

/* ---------- 10. Privacy claims ---------- */
.claims { margin-top: 32px; }
.claims__item {
  padding-block: 24px;
  border-top: 1px solid var(--rule);
}
.claims__item h3 { margin-bottom: 8px; }
.claims__item p { max-width: 34em; }
.claims__link,
.link-tap {
  display: inline-block;
  padding-block: 12px;
}
.claims__link { margin-top: 16px; }

/* ---------- 11. Closing band (full-bleed) ---------- */
.band {
  background: var(--band);
  color: var(--band-ink);
  padding-block: var(--section-pad-lg);
}
.band h2 { color: var(--band-ink); }
.band__lead {
  margin-top: 16px;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.5;
  color: var(--band-ink);
}
.band .btn { margin-top: 32px; }
.band .trial,
.band .fine { color: var(--band-ink-2); }
.band .fine { margin-top: 16px; }
.band a:not(.btn) { color: var(--band-ink); }
.band a:not(.btn):hover { color: var(--band-ink); }
.band :focus-visible { outline-color: var(--band-ink); }

@media (min-width: 600px) {
  .band__lead { font-size: 20px; }
}

/* ---------- 12. Footer ---------- */
.site-footer {
  padding-block: 48px;
  border-top: 1px solid var(--rule);
}
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer__logo img {
  height: 22px;
  width: auto;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  color: var(--ink-2);
}
.site-footer__links a {
  display: inline-block;
  padding-block: 12px;
}
/* Separators only where the row fits on one line, so none can dangle at a wrap. */
@media (min-width: 600px) {
  .site-footer__links { column-gap: 0; }
  .site-footer__links li + li::before {
    content: "·";
    margin-inline: 8px;
  }
}
.site-footer .fine { margin-top: 16px; }
.site-footer__legal { margin-top: 16px; }

/* ---------- 13. Doc layout (privacy, terms, support, 404) ---------- */
.doc { padding-block: var(--section-pad-lg); }
.doc__body {
  max-width: 40em;
  font-size: 17px;
  line-height: 1.65;
}
.doc__body h1 {
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.doc__body h2 {
  margin-top: 48px;
  margin-bottom: 12px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0;
}
.doc__body h3 {
  margin-top: 32px;
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 1.2;
}
.doc__body p,
.doc__body ul,
.doc__body ol { margin-top: 16px; }
.doc__body h2 + p,
.doc__body h3 + p,
.doc__body h2 + ul,
.doc__body h2 + ol,
.doc__body h3 + ul,
.doc__body h3 + ol { margin-top: 0; }
.doc__body ul,
.doc__body ol { padding-left: 1.25em; }
.doc__body li { margin-top: 8px; }
.doc__body li:first-child { margin-top: 0; }
.doc__body ul ul,
.doc__body ol ol,
.doc__body ul ol,
.doc__body ol ul { margin-top: 8px; }
.doc__body a { color: var(--green); text-decoration: underline; }
.doc__body a:hover { color: var(--green-press); }
.doc__body strong { font-weight: 500; }
.doc__body .fine { margin-top: 16px; }
.doc__body .doc__updated { margin-top: 12px; margin-bottom: 32px; }

/* ---------- 14. Breakpoint: 600px (tablet) ---------- */
@media (min-width: 600px) {
  .hero__grid {
    grid-template-columns: 7fr 5fr;
    column-gap: 32px;
    align-items: center;
  }
  .hero__fig { margin-top: 0; justify-content: flex-end; }
  .hero__fig .screen { width: 100%; max-width: 360px; }

  .sec__grid--numbered {
    grid-template-columns: 7fr 5fr;
    column-gap: 32px;
  }
  .sec__grid--numbered .sec__num { grid-column: 1 / -1; }
  .sec__grid--numbered .sec__text { grid-column: 1; }
  .sec__grid--numbered .sec__fig {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    justify-content: flex-start;
  }
  .sec__fig .screen { width: 100%; max-width: 300px; }

  .features__row {
    grid-template-columns: 1fr 2fr;
    column-gap: 32px;
  }
  .features__row dt { font-size: 24px; }
}

/* ---------- 15. Breakpoint: 1024px (desktop, 12-col grid) ---------- */
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .hero__text { grid-column: 1 / 7; }
  .hero { padding-top: 48px; }
  .hero__fig { grid-column: 8 / 13; }
  .hero__fig .screen { max-width: 320px; }

  .sec__grid--numbered,
  .sec__grid--plain {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 32px;
  }
  .sec__grid--numbered .sec__num {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    padding-top: 24px;
  }
  .sec__grid--numbered .sec__text { grid-column: 2 / 7; grid-row: 1; }
  .sec__grid--numbered .sec__fig { grid-column: 8 / 12; grid-row: 1; }
  .sec__fig .screen { max-width: 340px; }

  .sec__grid--plain > * { grid-column: 2 / 12; }

  .claims {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .claims__item:nth-child(odd) { padding-right: 32px; }
  .claims__item:nth-child(even) {
    padding-left: 32px;
    border-left: 1px solid var(--rule);
  }
}

/* ---------- 16. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}