/* RecipeScale: the app's own two palettes, "Editor" (light paper, crimson) and "Noir" (near-black, warm cream ink,
   brighter crimson), following the system setting like the app does. Tokens are copied from the app's main.css.
   Inter carries everything. Crimson is kept for the wordmark, the change in percent, the slider and the tips. */
:root {
  --bg: #ece7d9;
  --paper: #f2ede0;
  --s1: #e4ddcc;
  --s2: #d8d0bc;
  --hair: rgba(20, 20, 24, 0.13);
  --hair-strong: rgba(20, 20, 24, 0.32);
  --ink: #121215;
  --soft: rgba(18, 18, 21, 0.72);
  --mute: rgba(18, 18, 21, 0.6);
  --accent: #cb1f3c;
  --accent-soft: rgba(203, 31, 60, 0.1);
  --shadow: 0 1px 2px rgba(10, 10, 14, 0.04), 0 8px 24px rgba(10, 10, 14, 0.06);
  --gutter: clamp(20px, 5vw, 56px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0c10;
    --paper: #141418;
    --s1: #1a1a20;
    --s2: #23232a;
    --hair: rgba(238, 232, 216, 0.11);
    --hair-strong: rgba(238, 232, 216, 0.28);
    --ink: #f1ead5;
    --soft: rgba(241, 234, 213, 0.75);
    --mute: rgba(241, 234, 213, 0.58);
    --accent: #eb3f5d;
    --accent-soft: rgba(235, 63, 93, 0.15);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.36), 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.5 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'ss01' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px;
}
h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
svg { display: block; }

/* Fractions: "1⁄3" in its own span, drawn with Inter's fraction glyphs. The whole number sits outside the span, so
   the feature never touches it. Screen readers get the single fraction character instead. */
.fr { font-feature-settings: 'ss01' 1, 'cv11' 1, 'frac' 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.bar, main, .foot { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: 20px; max-width: 1240px; margin: 0 auto; }
.bar .home { text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: -0.015em; line-height: 1; color: var(--ink); }
.bar .home span, .wordmark span { color: var(--accent); }
.bar .store { text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 16px; border: 1px solid var(--hair); border-radius: 999px; }
.bar .store:hover { color: var(--ink); border-color: var(--hair-strong); }
main { max-width: 1240px; margin: 0 auto; }

/* Hero: the pitch, then the scaler itself. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 6vw, 96px); align-items: start; padding: clamp(24px, 5vw, 64px) 0 clamp(56px, 8vw, 104px); }
.pitch { padding-top: clamp(0px, 4vw, 56px); position: sticky; top: 40px; }
.pitch h1 { font-size: clamp(42px, 5.4vw, 66px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; max-width: 13ch; }
.lede { margin-top: 22px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: var(--soft); max-width: 36ch; }
.cta { display: inline-block; margin-top: 30px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); font-weight: 600; font-size: 17px; text-decoration: none; padding: 16px 28px; border-radius: 999px; transition: transform .12s ease, opacity .12s ease; }
.cta:hover { color: var(--paper); opacity: .9; }
.cta:active { transform: scale(.97); }
.fine { margin-top: 14px; font-size: 14.5px; color: var(--mute); }

/* The demo is the app's scaled view: recipe pill, the big factor, From/To steppers, slider, then the list. */
.demo { margin: 0; background: var(--paper); border: 1px solid var(--hair); border-radius: 24px; padding: clamp(18px, 2.6vw, 28px); box-shadow: var(--shadow); }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--hair); }
.tabs button, .units button { border: 0; background: none; cursor: pointer; border-radius: 999px; font-weight: 600; color: var(--soft); transition: background-color .15s ease, color .15s ease; }
.tabs button { min-height: 38px; padding: 0 16px; font-size: 14px; }
.tabs button[aria-pressed="true"], .units button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tabs button:hover:not([aria-pressed="true"]), .units button:hover:not([aria-pressed="true"]) { color: var(--ink); }

.scale { margin-top: 22px; }
.scale-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 500; color: var(--soft); }
.delta { font-variant-numeric: tabular-nums; }
.delta.up { color: var(--accent); font-weight: 600; }
.ratio { display: flex; align-items: baseline; justify-content: center; height: 76px; margin: 8px 0 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.ratio .x { font-size: 30px; font-weight: 500; color: var(--mute); margin-right: 3px; }
.ratio [data-out="ratio"] { font-size: 72px; font-weight: 700; letter-spacing: -0.035em; }
.ratio .flip { animation: flip .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes flip { from { opacity: 0; transform: translateY(12px); } }

.steppers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stepper .lab { display: block; font-size: 13px; font-weight: 500; color: var(--soft); margin-bottom: 8px; }
.pill { display: flex; align-items: stretch; height: 48px; border: 1px solid var(--hair); border-radius: 999px; overflow: hidden; }
.pill.strong { border-color: var(--hair-strong); }
.pill button { flex: 1; min-width: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--ink); transition: background-color .15s ease; }
.pill button svg { width: 20px; height: 20px; }
.pill button:hover:not(:disabled) { background: var(--s1); }
.pill button:active:not(:disabled) { background: var(--s2); }
.pill button:disabled { color: var(--mute); opacity: .45; cursor: default; }
.pill button:focus-visible { outline-offset: -3px; border-radius: 999px; }
.pill output { min-width: 52px; display: grid; place-items: center; padding: 0 6px; border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pill.strong output { border-color: var(--hair-strong); font-weight: 700; }

/* The app's slider: a hairline track and a crimson thumb with a ring in the card colour. */
.slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 36px; margin: 10px 0 0; background: transparent; cursor: pointer; }
.slider::-webkit-slider-runnable-track { height: 2px; background: var(--hair-strong); border-radius: 999px; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--accent); border: 0; box-shadow: 0 0 0 4px var(--paper); }
.slider::-moz-range-track { height: 2px; background: var(--hair-strong); border-radius: 999px; }
.slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 0; box-shadow: 0 0 0 4px var(--paper); }
.slider:focus-visible { outline-offset: 2px; }

.list-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 13px; font-weight: 500; color: var(--soft); }
.units { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--hair); background: var(--s1); }
.units button { min-height: 32px; padding: 0 14px; font-size: 13px; }
.note { display: flex; gap: 7px; align-items: flex-start; margin-top: 12px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--mute); }
.note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.note[hidden] { display: none; }

.ings { list-style: none; margin: 12px 0 0; padding: 0; }
.ings li { display: grid; grid-template-columns: 56px 52px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--hair); }
.ings li:last-child { border-bottom: 1px solid var(--hair); }
.qty { text-align: right; white-space: nowrap; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.unit { white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--soft); }
.name { font-size: 17px; font-weight: 500; line-height: 1.3; }
.was { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--mute); }
.tip { display: flex; gap: 6px; align-items: flex-start; margin-top: 5px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--accent); }
.tip svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.demo figcaption { margin-top: 14px; font-size: 13.5px; color: var(--mute); }

/* Features: plain text in a grid, no cards. */
.features, .help { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--hair); }
.features h2, .help h2 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.025em; }
.grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.grid h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.grid p { margin-top: 8px; color: var(--soft); max-width: 38ch; }

.help-cols { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.faq details { border-top: 1px solid var(--hair); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--mute); font-weight: 400; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p, .faq details ul { margin-top: 10px; color: var(--soft); max-width: 60ch; }
.faq details ul { padding-left: 20px; }
.faq details li + li { margin-top: 4px; }
.faq b { color: var(--ink); font-weight: 600; }
.contact { background: var(--paper); border: 1px solid var(--hair); border-radius: 20px; padding: 28px; }
.contact h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.contact p { margin-top: 8px; color: var(--soft); }
.contact .mail { margin-top: 18px; font-size: 18px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.copy { margin-top: 14px; font-size: 15px; font-weight: 600; background: none; border: 1px solid var(--hair); border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.copy:hover { border-color: var(--hair-strong); }

.foot { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 28px; padding-bottom: max(36px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); color: var(--mute); font-size: 15px; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* Legal pages: one comfortable reading column. */
.legal > * { max-width: 720px; }
.legal { padding-top: clamp(24px, 5vw, 64px); padding-bottom: 72px; }
.legal h1 { font-size: clamp(38px, 5.4vw, 58px); font-weight: 700; letter-spacing: -0.03em; }
.legal .updated { margin-top: 12px; color: var(--mute); font-size: 15px; }
.legal .intro { margin-top: 26px; font-size: 20px; line-height: 1.45; max-width: 36ch; }
.legal section { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--hair); }
.legal h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.legal section p { margin-top: 10px; color: var(--soft); max-width: 64ch; }
.legal b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .pitch { position: static; padding-top: 0; }
  .demo { max-width: 560px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-cols { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; gap: 28px; }
  .ratio { height: 66px; margin-bottom: 10px; }
  .ratio [data-out="ratio"] { font-size: 62px; }
  .ings li { grid-template-columns: 48px 44px minmax(0, 1fr); column-gap: 10px; }
  .contact { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ratio .flip { animation: none; }
  .cta, .tabs button, .units button, .pill button { transition: none; }
}