/*
  getinrange.app — one stylesheet for every page.

  Every value here comes from the Claude Design canvas "InRange Website"
  (22 September 2026). The canvas draws each page twice, at 390 and at 1440
  wide; the base rules below are the 390 drawing and the block at the end is
  the 1440 one. Between the two widths the desktop layout holds from 960 px,
  with its side margins narrowing from 130 px, and above 1440 the content stays
  at the width it was drawn and the bands of colour run to the edges.

  Where the canvas words a sentence differently for the phone, both versions
  are in the page and `.d` / `.m` pick one. They use !important on purpose:
  a class that also sets `display` elsewhere must never be able to outrank
  the rule that hides it.
*/

:root {
  --paper: #F1EAE2;
  --ink: #1A1C19;
  --on-ink: #F2F3F0;
  --muted: #6B6F68;
  --faint: #8A8478;
  --link: #1E5B3E;
  --rule: #1a1c1918;
  --rule-strong: #1a1c1926;
  --rule-mid: #1a1c1920;
  --forest: #143A2B;
  --forest-text: #D6DDD4;
  --forest-muted: #A9B4A6;
  --forest-accent: #63C08F;
  --sand: #E8DFD2;
  --lavender: #E3DCEF;
  --peach: #F7E4D7;
  --mint: #D8E8DE;
  --gold: #C08A2E;
  --white: #FFFFFF;
  --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); }
a:hover { color: var(--ink); }
h1, h2, h3, p { margin: 0; }
strong { font-weight: 600; }
[id] { scroll-margin-top: 24px; }

@media (max-width: 959.98px) { .d { display: none !important; } }

/* ------------------------------------------------------------ header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.brand span { font: 600 19px/1 var(--sans); letter-spacing: -0.025em; }

.site-nav { display: none; }

.menu-button {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
}
.menu-button span {
  position: absolute;
  left: 2px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform .2s ease, top .2s ease;
}
.menu-button span:first-child { top: 9.25px; }
.menu-button span:last-child { top: 15.25px; }
body.menu-open .menu-button span:first-child { top: 12px; transform: rotate(45deg); }
body.menu-open .menu-button span:last-child { top: 12px; transform: rotate(-45deg); }

/* The phone menu: a full screen of large links, the App Store line at the foot. */
.menu-panel {
  position: fixed;
  inset: 59px 0 0 0;
  z-index: 20;
  background: var(--paper);
  flex-direction: column;
  display: none;
}
body.menu-open .menu-panel { display: flex; }
body.menu-open { overflow: hidden; }
.menu-panel nav { flex: 1; display: flex; flex-direction: column; padding: 8px 20px 0; }
.menu-panel nav a {
  font: 400 30px/1 var(--sans);
  letter-spacing: -0.028em;
  color: var(--ink);
  text-decoration: none;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule-mid);
}
.menu-panel .menu-foot { padding: 0 20px 40px; }

/* ------------------------------------------------------------ App Store state */

/* Before launch the App Store line stands where the badge will go. */
.coming-soon { font-size: 17px; font-weight: 500; color: var(--ink); }
.coming-chip {
  font-size: 15px;
  color: var(--muted);
  margin-left: 8px;
  border: 1px solid #1a1c1930;
  border-radius: 9px;
  padding: 13px 18px;
}
.fineprint { font-size: 15px; color: var(--muted); }

/* ------------------------------------------------------------ shared blocks */

.section { padding: 48px var(--gutter); }
.section.ruled { border-top: 1px solid var(--rule); }

.h-section {
  font: 400 30px/1.12 var(--sans);
  letter-spacing: -0.028em;
  margin: 0 0 16px;
}
.lead { font-size: 17px; line-height: 1.55; }

.shot {
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
}
.shot img { width: 100%; height: auto; display: block; }
.shot.on-dark { border-color: #f2f3f02e; border-radius: 28px; }

/* ------------------------------------------------------------ landing: opening */

.hero {
  padding: 44px var(--gutter) 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero h1 {
  font: 400 39px/1.06 var(--sans);
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.hero .lead { margin-top: 20px; }
.hero .store { margin-top: 28px; padding: 13px 13px 13px 0; }
.hero .fineprint { margin-top: 8px; }
.hero .shot { margin-top: 32px; width: 100%; height: 420px; }

/* ------------------------------------------------------------ landing: three steps */

.steps { display: flex; flex-direction: column; gap: 28px; }
.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 18px;
}
.step .num { font: 400 13px/1 var(--mono); color: var(--muted); }
.step h3 { font: 600 22px/1.2 var(--sans); letter-spacing: -0.02em; }
.step p { font-size: 16px; line-height: 1.6; }
#how .h-section { margin-bottom: 32px; }

/* ------------------------------------------------------------ landing: library */

.library .lead { margin-bottom: 28px; }
.library .shot { margin-bottom: 28px; }
.figures {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule-mid);
  border-radius: 18px;
  overflow: hidden;
  margin: 0 0 24px;
}
.figure {
  background: var(--white);
  padding: 18px 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.figure .value { font: 600 28px/1 var(--sans); letter-spacing: -0.02em; order: 2; }
.figure .label { font-size: 16px; color: var(--muted); order: 1; }

.dose {
  background: var(--lavender);
  border-radius: 18px;
  padding: 20px 22px;
}
.dose .top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.dose .title { font: 600 18px/1.3 var(--sans); letter-spacing: -0.015em; }
.dose .delta { font: 600 26px/1 var(--sans); letter-spacing: -0.02em; }
.dose .rows { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; font-size: 15px; }
.dose .row { display: flex; justify-content: space-between; gap: 12px; }
.dose .row .n { color: var(--muted); }

.aside-note {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  border-left: 2px solid var(--gold);
  padding-left: 14px;
}
.library .side { display: none; }

/* ------------------------------------------------------------ landing: report */

.report { background: var(--forest); color: var(--on-ink); }
.report .lead { color: var(--forest-text); margin-bottom: 28px; }
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 16px;
  margin: 0 0 28px;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .value { font: 600 32px/1 var(--sans); letter-spacing: -0.02em; }
.stat .value.accent { color: var(--forest-accent); }
.stat .label { font-size: 14px; color: var(--forest-muted); }
.report .pair { display: flex; gap: 12px; margin: 0 0 24px; }
.report .pair .shot { flex: 1; }
.report .notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--forest-text);
}

/* ------------------------------------------------------------ landing: sharing */

.sharing .lead { margin-bottom: 24px; }
.sharing .shot { height: 380px; margin: 0 0 24px; }
.cards {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule-mid);
  border-radius: 18px;
  overflow: hidden;
}
.card { padding: 20px 22px; }
.card.family { background: var(--peach); }
.card.dietitian { background: var(--mint); }
.card h3 { font: 600 18px/1.3 var(--sans); letter-spacing: -0.015em; margin: 0 0 6px; }
.card p { font-size: 15px; line-height: 1.55; }

/* ------------------------------------------------------------ landing: what it does not do */

.nots .h-section { margin-bottom: 12px; }
.nots .intro { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0 0 32px; }
.not-list { display: flex; flex-direction: column; gap: 24px; }
.not { border-top: 1px solid var(--rule-strong); padding-top: 16px; }
.not h3 { font: 600 20px/1.25 var(--sans); letter-spacing: -0.02em; margin: 0 0 6px; }
.not p { font-size: 16px; line-height: 1.6; }
.not-device { margin-top: 32px; font: 600 21px/1.3 var(--sans); letter-spacing: -0.02em; }

/* ------------------------------------------------------------ landing: privacy band */

.privacy-band { background: var(--sand); }
.privacy-band .lead { margin: 0 0 16px; }
.privacy-band .more { font-size: 17px; font-weight: 500; color: var(--link); }
.privacy-band .detail { display: none; }

/* ------------------------------------------------------------ landing: closing */

.closing {
  padding: 56px var(--gutter) 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.closing h2 { font: 400 32px/1.1 var(--sans); letter-spacing: -0.03em; }
.closing .store { margin-top: 26px; padding: 13px 13px 13px 0; }
.closing .fineprint { margin-top: 6px; }

/* ------------------------------------------------------------ footer */

.site-footer {
  border-top: 1px solid var(--rule-strong);
  padding: 32px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-footer .row { display: flex; flex-direction: column; gap: 16px; }
.site-footer .links { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.site-footer .links a { color: var(--ink); }
.site-footer .copy { font-size: 15px; color: var(--muted); }
.site-footer .legal { font-size: 13px; line-height: 1.5; color: var(--muted); }
.site-footer.compact { gap: 14px; }

/* ------------------------------------------------------------ privacy and support */

.doc { padding: 40px var(--gutter) 56px; }
.doc h1 { font: 400 32px/1.08 var(--sans); letter-spacing: -0.03em; margin: 0 0 8px; }
.doc .updated { font-size: 15px; color: var(--muted); margin: 0 0 32px; }
.toc { display: none; }

.prose {
  font: 400 17px/1.65 var(--sans);
  letter-spacing: -0.003em;
  color: var(--ink);
}
.prose p { margin: 0 0 20px; }
.prose p.end, .prose .end { margin-bottom: 44px; }
.prose h2 { margin: 0 0 10px; font: 600 23px/1.25 var(--sans); letter-spacing: -0.015em; }
.prose h3 { margin: 18px 0 8px; font: 600 17px/1.4 var(--sans); letter-spacing: -0.005em; }
.prose h3 + p { margin-bottom: 24px; }
.prose p + h3 { margin-top: 0; }
.prose .quiet { margin-bottom: 0; }
.prose ul { margin: 0 0 44px; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose .quiet { color: var(--muted); margin-bottom: 0; }
.prose code {
  font: 400 15px/1 var(--mono);
  background: #1a1c190f;
  padding: 2px 5px;
  border-radius: 4px;
}
.processors {
  margin: 0 0 44px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #1a1c1922;
  border-radius: 4px;
  overflow: hidden;
}
.processor {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 2px;
}
.processor .who { font-weight: 600; }
.processor .when { color: var(--muted); font-size: 15px; }
.prose h2#processors { margin-bottom: 14px; }

.support-head { padding: 40px var(--gutter) 0; }
.support-head h1 { font: 400 32px/1.08 var(--sans); letter-spacing: -0.03em; margin: 0 0 16px; }
.support-head .lead { margin: 0 0 24px; }
.support-body { padding: 0 var(--gutter) 48px; }
.reach {
  background: var(--white);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 40px;
}
.micro {
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.reach .address {
  font: 600 20px/1.2 var(--sans);
  letter-spacing: -0.02em;
  color: var(--link);
  text-decoration: none;
}
.reach .note { font-size: 15px; line-height: 1.55; }
.questions-label { border-top: 1px solid var(--rule-strong); padding-top: 14px; margin-bottom: 28px; }

/* ------------------------------------------------------------ not found */

.missing-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.missing {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px var(--gutter);
}
.missing .num { font: 400 13px/1 var(--mono); color: var(--muted); margin-bottom: 18px; }
.missing h1 { font: 400 34px/1.08 var(--sans); letter-spacing: -0.03em; }
.missing .ways { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; font-size: 17px; }
.missing .ways .home { color: var(--link); font-weight: 500; }
.missing .ways .other { color: var(--ink); }
.site-footer.missing-footer { padding: 24px var(--gutter) 32px; gap: 10px; font-size: 15px; }
.site-footer.missing-footer .links { flex-direction: row; gap: 20px; font-size: 15px; }

/* ================================================================ 1440 drawing */

@media (min-width: 960px) {
  :root { --gutter: max(clamp(40px, 9.03vw, 130px), calc((100vw - 1180px) / 2)); }

  .m { display: none !important; }

  .site-header { padding: 22px var(--gutter); }
  .brand { gap: 11px; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .brand span { font-size: 22px; }
  .menu-button, .menu-panel { display: none !important; }
  .site-nav { display: flex; align-items: center; gap: 34px; font-size: 16px; }
  .site-nav a { color: var(--ink); text-decoration: none; }
  .site-nav a[aria-current="page"] { font-weight: 500; }

  .section { padding: 88px var(--gutter) 96px; }
  .h-section { font: 400 50px/1.1 var(--sans); letter-spacing: -0.03em; margin: 0 0 24px; }
  .lead { font-size: 19px; }
  .shot { border-radius: 42px; }
  .shot.on-dark { border-radius: 42px; }

  .hero {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: center;
    padding: 96px var(--gutter) 104px;
  }
  .hero .copy { display: flex; flex-direction: column; align-items: flex-start; }
  .hero h1 { font: 400 74px/1.03 var(--sans); letter-spacing: -0.035em; }
  .hero .lead { margin-top: 28px; max-width: 620px; font-size: 21px; line-height: 1.5; }
  .hero .store { margin-top: 42px; padding: 15px 15px 15px 0; }
  .hero .fineprint { margin-top: 18px; font-size: 16px; }
  .hero .shot { margin-top: 0; height: 720px; }

  #how .h-section { margin-bottom: 56px; max-width: 720px; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-mid); }
  .step { background: var(--paper); border-top: 0; padding: 0 34px; gap: 14px; }
  .step:first-child { padding-left: 0; }
  .step:last-child { padding-right: 0; }
  .step .num { font-size: 14px; }
  .step h3 { font-size: 27px; }
  .step p { font-size: 17px; }

  .library { display: grid; grid-template-columns: 1fr 340px; gap: 80px; align-items: start; }
  .library .h-section { max-width: 620px; }
  .library .lead { max-width: 580px; margin-bottom: 44px; }
  .figures { flex-direction: row; border-radius: 20px; margin: 0 0 40px; }
  .figure { flex: 1; padding: 26px 28px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; }
  .figure .value { font-size: 42px; order: 1; }
  .figure .label { font-size: 15px; order: 2; }
  .dose { border-radius: 20px; padding: 28px 30px; max-width: 580px; }
  .dose .top { gap: 20px; }
  .dose .title { font-size: 20px; }
  .dose .delta { font-size: 30px; }
  .dose .rows { margin-top: 16px; gap: 8px; font-size: 16px; }
  .dose .row { gap: 16px; }
  .aside-note { margin-top: 36px; max-width: 580px; font-size: 17px; padding-left: 16px; }
  .library .side { display: flex; flex-direction: column; gap: 18px; }
  .library .side .shot { margin-bottom: 0; }
  .library .side .caption { font-size: 15px; color: var(--muted); }
  .library .side .shot.cropped { height: 400px; }

  .report-grid { display: grid; grid-template-columns: 1fr 640px; gap: 70px; align-items: start; }
  .report .lead { margin-bottom: 40px; }
  .stats { gap: 28px 20px; margin: 0 0 40px; }
  .stat { gap: 5px; }
  .stat .value { font-size: 40px; }
  .stat .label { font-size: 15px; }
  .report .pair { gap: 20px; margin: 0; }
  .report .notes {
    gap: 14px;
    border-top: 1px solid #f2f3f026;
    padding-top: 26px;
    font-size: 17px;
  }

  .sharing { display: grid; grid-template-columns: 340px 1fr; gap: 80px; align-items: center; }
  .sharing .shot { height: 640px; margin: 0; }
  .sharing .h-section { max-width: 640px; }
  .sharing .lead { max-width: 620px; margin-bottom: 32px; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; max-width: 620px; }
  .card { padding: 26px 28px; }
  .card h3 { font-size: 20px; margin-bottom: 8px; }
  .card p { font-size: 16px; }

  .nots .h-section { margin-bottom: 20px; max-width: 760px; }
  .nots .intro { max-width: 620px; font-size: 19px; margin-bottom: 56px; }
  .not-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 60px; max-width: 1000px; }
  .not { padding-top: 20px; }
  .not h3 { font-size: 24px; margin-bottom: 8px; }
  .not p { font-size: 17px; }
  .not-device { margin-top: 56px; font-size: 26px; }

  .privacy-band { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .privacy-band .lead { margin: 0; }
  .privacy-band .detail { display: flex; flex-direction: column; gap: 16px; padding-top: 10px; }
  .privacy-band .detail .body { font-size: 17px; line-height: 1.6; }
  .privacy-band .more { font-size: 18px; }

  .closing { padding: 104px var(--gutter) 112px; }
  .closing h2 { max-width: 900px; font: 400 56px/1.08 var(--sans); letter-spacing: -0.032em; }
  .closing .store { margin-top: 40px; padding: 15px 15px 15px 0; }
  .closing .fineprint { margin-top: 14px; font-size: 16px; }

  .site-footer { padding: 44px var(--gutter) 56px; gap: 20px; }
  .site-footer .row { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
  .site-footer .links { flex-direction: row; align-items: center; gap: 28px; }
  .site-footer .copy { font-size: 16px; }
  .site-footer .legal { font-size: 14px; line-height: normal; max-width: 760px; }

  .doc { padding: 76px var(--gutter) 96px; display: grid; grid-template-columns: 260px minmax(0, 720px); gap: 80px; align-items: start; }
  .doc h1 { font: 400 54px/1.06 var(--sans); letter-spacing: -0.032em; }
  .doc .updated { font-size: 16px; margin-bottom: 48px; }
  .toc { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 40px; }
  .toc .micro { font-size: 12px; margin-bottom: 4px; }
  .toc a { font-size: 15px; color: var(--ink); text-decoration: none; }
  .toc a:hover { color: var(--link); }

  .support-head { padding: 76px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 80px; align-items: start; }
  .support-head h1 { font: 400 54px/1.06 var(--sans); letter-spacing: -0.032em; margin: 0 0 20px; }
  .support-head .lead { margin: 0; }
  .reach { border-radius: 20px; padding: 28px 30px; gap: 10px; margin: 0; }
  .reach .micro { font-size: 12px; }
  .reach .address { font-size: 24px; }
  .reach .note { font-size: 16px; }
  .support-body { padding: 48px var(--gutter) 96px; display: grid; grid-template-columns: 260px minmax(0, 720px); gap: 80px; align-items: start; }
  .support-body .questions-label { font-size: 12px; padding-top: 16px; margin: 0; }

  .missing { padding: 0 var(--gutter); }
  .missing .num { font-size: 14px; margin-bottom: 24px; }
  .missing h1 { max-width: 820px; font: 400 60px/1.06 var(--sans); letter-spacing: -0.032em; }
  .missing .ways { flex-direction: row; align-items: center; gap: 28px; margin-top: 40px; font-size: 18px; }
  .site-footer.missing-footer { padding: 32px var(--gutter) 40px; flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; font-size: 16px; }
  .site-footer.missing-footer .links { gap: 28px; font-size: 16px; }
}