/* Tomatito's website. Colors, fonts and corners are the app's own (mobile/src/design/tokens.ts,
   brand/README.md): the cream page, warm ink, cobalt for links and buttons, fuchsia only for
   Kitchen Memory, Bricolage Grotesque and JetBrains Mono. Dark mode is the app's night blue. */

@font-face { font-family: "Bricolage Grotesque"; src: url(../fonts/BricolageGrotesque_400Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(../fonts/BricolageGrotesque_600SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(../fonts/BricolageGrotesque_800ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/JetBrainsMono_400Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Colors (light) */
  --bg: #F2EDE1;          /* warm cream */
  --surface: #FFFFFF;
  --raised: #FAF7F0;
  --ink: #1A1814;
  --grey: #6B655A;
  --line: #E2DCCD;
  --accent: #1F45C4;      /* cobalt: links and buttons */
  --accent-soft: #DCE4FB;
  --on-accent: #FFFFFF;
  --memory: #9B2A9E;      /* fuchsia: Kitchen Memory only */
  --memory-soft: #F4DDF4;
  --todo: #FFF1A8;        /* an owner to-do, highlighted until it's filled */
  --bezel: #15130F;       /* the drawn phone's frame */
  --glass: rgba(255, 255, 255, .78);
  --shadow: 0 1px 2px rgba(26, 24, 20, .06), 0 12px 32px rgba(26, 24, 20, .08);

  /* Type */
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing, from the app's 4-8-16-24-32 scale */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;

  /* Corners */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --tile: 22.5%;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1726;
    --surface: #14223A;
    --raised: #22345A;
    --ink: #EAF0F8;
    --grey: #A3B3C9;
    --line: #1E2E4A;
    --accent: #86A6FF;
    --accent-soft: #1D2F66;
    --on-accent: #0B1726;
    --memory: #F09AF0;
    --memory-soft: #3A1A40;
    --todo: #5C4A00;
    --bezel: #2B3F66;
    --glass: rgba(20, 34, 58, .82);
    --shadow: none;
    color-scheme: dark;
  }
}

/* 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: 400 17px/1.5 var(--font); }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
a { color: var(--accent); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.icon { width: 1em; height: 1em; flex: none; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: var(--s3); top: -100px; background: var(--surface); padding: var(--s2) var(--s3); border-radius: var(--r-sm); z-index: 10; }
.skip:focus { top: var(--s3); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* Type: titles are Bricolage 800, tight (-0.04em), like the app's screen titles */
.display { font-weight: 800; letter-spacing: -0.04em; line-height: .92; text-wrap: balance; }
h2.display, h3.display { line-height: .96; }
.mono { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.lead { font-size: clamp(19px, 2vw, 22px); line-height: 1.45; }

/* Header */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding-block: var(--s4); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); min-height: 44px; }
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: var(--tile); }
.wordmark { font-weight: 800; font-size: 28px; letter-spacing: -0.04em; line-height: 1; padding-bottom: 3px; }
.header-end { display: flex; align-items: center; gap: var(--s4); }
.nav { display: flex; gap: var(--s4); font-size: 15px; }
.nav a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }
.nav a[aria-current="page"] { color: var(--accent); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.lang a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; padding: 0 14px; color: var(--grey); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.lang a:hover { text-decoration: none; color: var(--ink); }
.lang a[aria-current="true"]:hover { color: var(--bg); }
.lang a:focus-visible { outline-offset: -3px; border-radius: 999px; }
@media (max-width: 640px) {
  .header-end { display: contents; }
  .lang { order: 2; }
  .nav { order: 3; width: 100%; gap: var(--s4); border-top: 1px solid var(--line); }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s4); border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 17px; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn .icon { font-size: 20px; }

/* A Kitchen Memory note, as the app draws it (MemoryNote, the household's own knowledge) */
.note { display: flex; gap: 12px; padding: 14px var(--s3); border-radius: var(--r-md); background: var(--memory-soft); color: var(--ink); }
.note > .icon { font-size: 20px; color: var(--memory); margin-top: 1px; }
.note .mono { display: block; color: var(--memory); margin-bottom: 2px; }
.note .about { font-size: 15px; margin-top: 2px; }

/* A row like the app's list rows: tile, name, a quiet second line */
.row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px 8px 8px; }
.row img, .row .soft { width: 40px; height: 40px; border-radius: var(--tile); }
.row .soft { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 20px; }
.row b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.row small { display: block; font-size: 13px; line-height: 1.3; color: var(--grey); }
.row .day { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }

/* ---------- Home ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s6); align-items: center; padding-top: var(--s5); }
.hero h1 { font-size: clamp(46px, 7.4vw, 104px); margin: var(--s3) 0 var(--s4); }
.hero .lead { max-width: 34ch; }
.hero .actions { margin-top: var(--s5); }

/* The stage: the tomatillo, the drawn phone, and two cards from the app beside it */
.stage { position: relative; display: flex; justify-content: flex-end; padding-block: var(--s4); min-width: 0; }
.stage .tomatillo { position: absolute; width: 46%; left: 0; top: 12%; border-radius: var(--tile); }
.phone { position: relative; width: 324px; border-radius: 46px; padding: 10px; background: var(--bezel); box-shadow: 0 30px 60px rgba(0, 0, 0, .22); }
.screen { position: relative; height: 640px; overflow: hidden; border-radius: 37px; background: var(--bg); padding: 14px 14px 0; }
.status { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13px; padding: 2px 10px 14px; }
.island { width: 86px; height: 24px; border-radius: 20px; background: #15130F; }
.screen-title { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.screen-title .display { font-size: 36px; }
.screen-title .icon { font-size: 18px; color: var(--accent); }
.screen-date { font-size: 15px; color: var(--grey); padding: 2px 4px 16px; }
.screen-label { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.screen-label span:last-child { font-weight: 600; font-size: 13px; color: var(--accent); }
.screen-h { font-size: 24px; padding: 4px 4px 12px; }
.screen .rows { display: grid; gap: 8px; }
.screen .row { padding: 8px 10px 8px 8px; gap: 10px; }
.screen .row b { font-size: 14px; }
.screen .row small { font-size: 12px; }
.chip { font-weight: 600; font-size: 13px; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 13px; }
.screen-coming { padding: 18px 4px 8px; }
/* The floating tab bar, like the app's on a recent iPhone */
.tabbar { position: absolute; left: 12px; right: 12px; bottom: 14px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.tabbar span { display: grid; justify-items: center; gap: 1px; padding: 4px 0; border-radius: 999px; font-weight: 600; font-size: 9px; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
.tabbar .icon { font-size: 19px; }
.tabbar .on { color: var(--accent); background: var(--accent-soft); }

.float { position: absolute; right: 304px; top: 66%; width: 236px; }
.float .note { box-shadow: var(--shadow); }

/* Features: four cards, each with a piece of the app */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s8); }
.feature, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.label { display: flex; align-items: center; gap: 10px; }
.label .icon { font-size: 20px; color: var(--grey); }
.feature h2, .panel h2 { font-size: clamp(30px, 3vw, 40px); }
.feature p, .panel p { max-width: 52ch; }
.snip { margin-top: auto; background: var(--bg); border-radius: var(--r-lg); padding: var(--s3); display: grid; gap: var(--s2); }
.snip .mono { padding: 0 var(--s1); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; font-size: 15px; }
.check .icon { font-size: 24px; color: var(--grey); }
.check.done .icon { color: var(--accent); }
.check.done span { text-decoration: line-through; color: var(--grey); }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.moment { display: flex; gap: 12px; align-items: flex-start; background: var(--accent-soft); border-radius: var(--r-md); padding: var(--s3); }
.moment .icon { font-size: 22px; color: var(--accent); margin-top: 2px; }
.moment b { display: block; font-weight: 600; }
.points { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.points .icon { font-size: 22px; color: var(--grey); margin-top: 2px; }
.points b { display: block; font-weight: 600; }

.cta { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4) var(--s5); align-items: end; scroll-margin-top: var(--s4); }
.cta h2 { font-size: clamp(40px, 5vw, 72px); margin: 12px 0 var(--s3); }
.cta p { max-width: 46ch; }
.cta .email { font-size: 15px; color: var(--grey); margin-top: var(--s2); }
.cta .end { display: grid; gap: var(--s2); justify-items: start; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--s5); padding-top: var(--s2); }
  .stage { flex-direction: column; align-items: center; padding-top: 0; }
  .stage .tomatillo { display: none; }
  .phone { width: min(330px, 100%); }
  .screen { height: 520px; }
  .float { position: relative; right: auto; top: auto; width: min(300px, 92%); margin-top: -20px; }
  .features, .duo { grid-template-columns: 1fr; }
  .features { margin-top: var(--s7); }
  .feature, .panel { padding: var(--s4); }
  .cta { grid-template-columns: 1fr; margin-top: var(--s7); }
}

/* ---------- Reading pages: support, privacy, terms, legal notice ---------- */
.doc-head { padding-block: var(--s5) var(--s6); display: grid; gap: var(--s3); max-width: 760px; }
.doc-head h1 { font-size: clamp(44px, 6.4vw, 80px); }
.doc-head .updated { color: var(--grey); font-size: 15px; }
.doc { max-width: 66ch; font-size: 18px; line-height: 1.6; display: grid; gap: var(--s3); }
.doc h2 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(26px, 3vw, 32px); margin-top: var(--s5); scroll-margin-top: var(--s4); text-wrap: balance; }
.doc h3 { font-weight: 600; font-size: 19px; margin-top: var(--s3); }
.doc ul, .doc ol { padding-left: 1.3em; display: grid; gap: var(--s2); }
.doc b, .doc strong { font-weight: 600; }
.summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: grid; gap: var(--s3); }
.summary h2 { margin-top: 0; font-size: 24px; }
.facts { display: grid; gap: 2px; }
.facts dt { font-weight: 600; }
.facts dt:not(:first-child) { margin-top: var(--s3); }
.facts dd { color: var(--ink); }
.contact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: grid; gap: var(--s2); }
.contact .email { display: inline-flex; align-items: center; min-height: 44px; font-size: 22px; font-weight: 600; word-break: break-word; }
.doc .contact h2.mono { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; line-height: 1.5; margin-top: 0; }
.qa { display: grid; gap: var(--s2); }
.qa h2 { font-size: clamp(22px, 2.4vw, 26px); }
mark.todo { background: var(--todo); color: var(--ink); padding: 0 4px; border-radius: 4px; }
mark.todo::before { content: "To do: "; font-weight: 600; }
:lang(fr) mark.todo::before { content: "À faire\202F: "; }

.lost { display: grid; justify-items: start; gap: var(--s3); padding-block: var(--s6) var(--s4); max-width: 640px; }
.lost img { width: 144px; border-radius: var(--tile); }
.lost h1 { font-size: clamp(44px, 6.4vw, 72px); }

/* Footer */
.site-footer { margin-top: var(--s8); border-top: 1px solid var(--line); padding-block: var(--s5) var(--s6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); font-size: 15px; }
.site-footer nav { display: flex; flex-wrap: wrap; column-gap: var(--s4); }
.site-footer nav a { color: var(--ink); font-weight: 400; display: inline-flex; align-items: center; min-height: 44px; }
.site-footer p { color: var(--grey); align-self: center; }
.more { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 640px) {
  .site-footer .sep { display: none; }
  .site-footer p a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer p .nowrap { display: block; }
}
@media (max-width: 900px) { .site-footer { margin-top: var(--s7); } }