/* Canoz landing site (#9). Tokens mirror ios/Sources/Design/Theme.swift. Light only, mobile first. */
/* Fonts: the app fonts, self-hosted as subsets. The base files cover Western European and Turkish; the -ext files add
   Latin Extended (pl, cs, ro, hu, vi) and load only on pages that use those letters. A later rule wins where ranges
   overlap, so each base face comes after its -ext face. Non-Latin scripts use the system stacks below (README.md). */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+02C6-02DD, U+0300-0328, U+1E00-1EFF, U+20A0-20C0, U+2113, U+2116, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+2000-200B, U+2013-2014, U+2016, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+02C6-02DD, U+0300-0328, U+1E00-1EFF, U+20A0-20C0, U+2113, U+2116, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193;
}

:root {
  color-scheme: light;
  --background: #FFF8F0;
  --ink: #1F1A17;
  --muted: #6B5F55;
  --soft: #8C7E72;
  --line: #EFE4D8;
  --sand: #F1E8DE;
  --cream: #F7EFE5;
  --accent: #FF7A45;
  --accent-text: #C2410C;
  --selected-fill: #FFEDE3;
  --icon-fill: #FFF1E8;
  --glow: #FFE1CF;
  --cta: #F0612B;
  --success: #2FBF8F;
  --success-text: #1F8A66;
  --success-fill: #DFF6EC;
  --carbs: #F5B83D;
  --protein: #2FBF8F;
  --fats: #9B7BFF;
  --white: #FFFFFF;
  --radius: 22px;
  --shadow: 0 10px 30px rgba(31, 26, 23, 0.08);
  --brand: "Bricolage Grotesque", ui-rounded, system-ui, sans-serif;
  --display: var(--brand);
  --body: "Figtree", system-ui, -apple-system, sans-serif;
  --system: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --heading-tracking: -0.02em;
  --heading-leading: 1.1;
}

/* Scripts the app fonts do not cover: the platform's own font for the whole page (a Latin display face mixed with
   fallback glyphs looks broken). Vietnamese keeps Bricolage for headings (it covers vi) and uses the system body. */
:lang(ru), :lang(uk), :lang(el) { --display: var(--system); --body: var(--system); }
:lang(vi) { --body: var(--system); }
:lang(ar) { --display: system-ui, -apple-system, "Geeza Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; }
:lang(he) { --display: system-ui, -apple-system, "Arial Hebrew", "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif; }
:lang(hi) { --display: "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", Mangal, system-ui, sans-serif; }
:lang(th) { --display: Thonburi, "Leelawadee UI", "Noto Sans Thai", Tahoma, system-ui, sans-serif; }
:lang(ja) { --display: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; }
:lang(ko) { --display: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; }
:lang(zh-Hans) { --display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
:lang(zh-Hant) { --display: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
:lang(ar), :lang(he), :lang(hi), :lang(th), :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant) { --body: var(--display); }
/* Negative tracking breaks joined (Arabic) and dense (CJK, Indic, Thai) scripts; tall marks need more leading. */
:lang(ru), :lang(uk), :lang(el), :lang(ar), :lang(he), :lang(hi), :lang(th), :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant) { --heading-tracking: 0; }
:lang(ar), :lang(hi), :lang(th), :lang(vi) { --heading-leading: 1.35; }
:lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant) { --heading-leading: 1.3; }
:lang(ar) body, :lang(hi) body, :lang(th) body { line-height: 1.75; }
:lang(ja), :lang(zh-Hans), :lang(zh-Hant) { line-break: strict; }
:lang(ja) h1, :lang(ja) h2 { word-break: auto-phrase; }
:lang(ko) { word-break: keep-all; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font: 400 17px/1.55 var(--body);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); font-optical-sizing: auto; line-height: var(--heading-leading); margin: 0; letter-spacing: var(--heading-tracking); }

.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--ink); color: var(--white); padding: 8px 14px; border-radius: 10px; z-index: 10; }
.skip:focus { inset-inline-start: 16px; }
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 16px; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 22px var(--brand); letter-spacing: -0.02em; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.top nav { display: flex; align-items: center; gap: 6px; }
.top nav > a { display: none; color: var(--muted); text-decoration: none; font-weight: 600; padding: 8px 10px; border-radius: 10px; }
.top nav > a:hover { color: var(--ink); background: var(--cream); }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; font-weight: 600; color: var(--muted); padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); width: min(calc(100vw - 32px), 520px); max-height: min(70vh, 640px); overflow-y: auto; z-index: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.lang li { min-width: 0; }
.lang li a { display: block; padding: 8px 12px; font-family: var(--system); overflow-wrap: anywhere; border-radius: 10px; color: var(--ink); text-decoration: none; }
.lang li a:hover, .lang li a[aria-current="true"] { background: var(--selected-fill); }

/* Hero */
.hero { display: grid; gap: 28px; padding-block: 18px 40px; }
.eyebrow { display: inline-block; font-weight: 700; font-size: 14px; color: var(--accent-text); background: var(--selected-fill); padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.hero h1 { font-size: clamp(36px, 9vw, 64px); font-weight: 800; }
.hero h1 .accent { color: var(--accent-text); }
.hero p.sub { color: var(--muted); font-size: 18px; margin: 16px 0 24px; max-width: 34em; }
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.badge { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--white); text-decoration: none; padding: 12px 20px; border-radius: 14px; font-weight: 700; min-height: 52px; }
.badge svg { width: 22px; height: 22px; fill: currentColor; }
.badge[aria-disabled="true"] { background: var(--cta); cursor: default; }
.store small { color: var(--soft); font-weight: 600; }

.stage { position: relative; display: grid; justify-items: center; margin: 0; }
.stage::before { content: ""; position: absolute; inset: 8% 4% 0; background: radial-gradient(closest-side, var(--glow), transparent); z-index: -1; }
.card { width: min(100%, 360px); background: var(--white); border-radius: 28px; box-shadow: var(--shadow); padding: 20px; border: 1px solid var(--line); }
.card .tag { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent-text); background: var(--selected-fill); padding: 4px 10px; border-radius: 999px; }
.card h3 { font-size: 24px; margin: 10px 0 4px; }
.card .kcal { font: 800 44px var(--display); letter-spacing: var(--heading-tracking); }
.card .kcal span { font: 600 18px var(--body); color: var(--muted); margin-inline-start: 4px; letter-spacing: 0; }
.macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.macro { background: var(--cream); border-radius: 14px; padding: 10px 8px; }
.macro small { display: flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap; overflow: hidden; font-weight: 700; color: var(--muted); }
.macro small::before { flex: none; content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.macro.protein { --dot: var(--protein); }
.macro.carbs { --dot: var(--carbs); }
.macro.fats { --dot: var(--fats); }
.macro b { display: block; white-space: nowrap; font: 800 22px var(--display); margin-top: 2px; }
.card .ai { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.stage { padding-top: 64px; }
.stage .cat { position: absolute; width: 120px; inset-inline-end: max(0px, calc(50% - 200px)); top: 0; filter: drop-shadow(0 8px 14px rgba(31, 26, 23, 0.12)); }
.stage figcaption { font-size: 12px; color: var(--soft); margin-top: 10px; }

/* Sections */
section { padding-block: 36px; }
section h2 { font-size: clamp(28px, 6vw, 42px); font-weight: 800; margin-bottom: 22px; }
.features { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0; }
.feature { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; align-content: start; }
.feature img { width: 72px; height: 72px; background: var(--icon-fill); border-radius: 18px; padding: 4px; }
.feature h3 { font-size: 20px; margin: 4px 0 6px; }
.feature p { margin: 0; color: var(--muted); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding-block: 18px; padding-inline: 64px 18px; position: relative; font-weight: 600; }
.steps li::before { content: counter(step); position: absolute; inset-inline-start: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--cta); color: var(--white); display: grid; place-items: center; font: 800 16px var(--display); }

.cuisine p { color: var(--muted); max-width: 40em; margin: 0 0 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips li { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 700; }

.privacy { background: var(--success-fill); border-radius: 28px; padding: 28px 20px; }
.privacy ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.privacy li { padding-inline-start: 34px; position: relative; font-weight: 600; }
.privacy li::before { content: ""; position: absolute; inset-inline-start: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.8 12.5l-1.4 1.4 5.1 5.1L20 8.5l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 16px no-repeat; }
.privacy a { color: var(--success-text); font-weight: 700; }

.cta { text-align: center; }
.cta img { width: 180px; margin: 0 auto 8px; }
.cta p { color: var(--muted); margin: 10px 0 22px; }
.cta .store { justify-content: center; }

footer { border-top: 1px solid var(--line); margin-top: 24px; padding-block: 28px 40px; color: var(--soft); font-size: 14px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
footer nav a { color: var(--muted); font-weight: 600; }
footer p { margin: 8px 0; }

/* Guides list (home and guide pages) */
.section-d { color: var(--muted); max-width: 40em; margin: -8px 0 18px; }
.guides { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.guides a { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; color: var(--ink); text-decoration: none; }
.guides a:hover { border-color: var(--accent); }
.guides img { width: 48px; height: 48px; background: var(--icon-fill); border-radius: 14px; padding: 3px; }
.guides b { display: block; font: 800 18px/var(--heading-leading) var(--display); letter-spacing: var(--heading-tracking); }
.guides small { display: block; color: var(--muted); font-size: 15px; margin-top: 4px; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 0 18px; }
.faq summary { cursor: pointer; list-style: none; font-weight: 700; padding-block: 16px; padding-inline: 0 28px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; inset-inline-end: 0; top: 12px; font: 800 24px var(--display); color: var(--accent-text); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; color: var(--muted); }

/* Guide, legal and 404 pages */
.doc { max-width: 820px; padding-block: 8px 24px; }
.doc section { padding-block: 20px; }
.doc section h2 { font-size: clamp(24px, 5vw, 30px); margin-bottom: 12px; }
.doc p { margin: 0 0 14px; }
.crumbs { font-size: 14px; color: var(--soft); margin: 8px 0 18px; }
.crumbs a { color: var(--muted); font-weight: 600; }
.doc-head h1, .nf h1 { font-size: clamp(34px, 8vw, 54px); font-weight: 800; }
.lead { color: var(--muted); font-size: 19px; margin: 16px 0 8px; }
.guide-cta { display: grid; gap: 16px; align-items: center; background: var(--selected-fill); border-radius: 28px; padding: 24px 20px; margin-block: 20px; }
.guide-cta img { width: 96px; height: 96px; }
.guide-cta h2 { font-size: 26px; font-weight: 800; }
.guide-cta p { color: var(--muted); margin: 6px 0 16px; }
.docs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.docs a { font-weight: 700; color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); }
.docs a[aria-current="page"] { background: var(--selected-fill); color: var(--accent-text); border-color: var(--selected-fill); }
.legal { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; }
.legal h1 { font-size: clamp(30px, 7vw, 40px); font-weight: 800; margin-bottom: 8px; }
.legal h2 { font-size: 22px; font-weight: 700; margin: 32px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal h3 { font-size: 18px; margin: 24px 0 6px; }
.legal p, .legal li { overflow-wrap: anywhere; }
.legal ul, .legal ol { padding-inline-start: 22px; }
.legal li { margin: 6px 0; }
.legal li::marker { color: var(--accent); }
.nf { text-align: center; padding-block: 24px; }
.nf img { width: 160px; margin: 0 auto 12px; }
.nf-langs { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; justify-items: center; }
footer .guides-nav a { font-weight: 500; }

@media (min-width: 720px) {
  .lang ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .top nav > a { display: inline-block; }
  .hero { grid-template-columns: 1.1fr 0.9fr; align-items: center; padding-block: 40px 64px; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .guides { grid-template-columns: repeat(2, 1fr); }
  .guide-cta { grid-template-columns: 96px 1fr; padding: 28px 32px; }
  .legal { padding: 40px 48px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .privacy { padding: 40px; }
  section { padding-block: 56px; }
  .stage { padding-top: 40px; }
  .stage .cat { width: 150px; top: -20px; }
}
@media (min-width: 1000px) {
  .features { grid-template-columns: repeat(3, 1fr); }
  .feature { grid-template-columns: 1fr; }
}

/* Support page: the contact card's mail button */
.badge.mail { background: var(--cta); color: var(--white); font-size: 16px; }
.support-card { margin-top: 8px; }