/* The app's own faces, served from this origin.
   Self-hosted rather than pulled from Google Fonts, and that is a privacy decision rather than a
   performance one: a stylesheet link to fonts.googleapis.com makes every visitor's browser call
   Google and hand over an IP address, on the site whose entire purpose is a policy saying nothing
   about them is collected. A German court has held that exact arrangement to be a GDPR violation
   (LG Munchen I, 3 O 17493/20), and Germany is this app's first market.
   All three are SIL Open Font Licence 1.1 — see fonts/LICENCE.md, which travels with them. */
@font-face {
    font-family: "Caprasimo";
    src: url("fonts/caprasimo_regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("fonts/figtree_regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("fonts/figtree_semibold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
}

/* The app's tokens, from core/ui/theme/HaloColors.kt. Copied rather than generated: a stylesheet is
   not worth a build step, and these have not moved since the design settled. */
:root {
    color-scheme: light dark;

    --bg: #F5EAD8;
    --surface: #EBDDC5;
    --raised: #F9F4ED;
    --text: #201E1D;
    --muted: #645C50;
    --line: #DCD3C4;
    --accent: #C67139;
    --accent-deep: #8C491A;
    --sage: #7A8A5E;
    --alarm: #8F2417;
    /* The bezel's edge. Invisible on a light ground; in dark it is what keeps a #211f1c frame
       from vanishing into a #2E2B25 page at 1.2:1. */
    --bezel-rim: rgba(32, 30, 29, 0);

    --measure: 36rem;
    --page: 68rem;
    /* One phone size everywhere. A hero frame a little larger than the ones below reads as an
       inconsistency rather than as emphasis, because every screenshot in them is the same shape. */
    --phone: 330px;
    --shadow: 0 1px 2px rgba(32, 30, 29, .04), 0 12px 34px -12px rgba(32, 30, 29, .18);
    --shadow-lift: 0 2px 4px rgba(32, 30, 29, .05), 0 30px 60px -22px rgba(32, 30, 29, .32);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* The app's own dark scheme, not an invention. Every value below is a HaloColors ramp
           entry bound by HaloDarkColorScheme; the previous set included a ground darker than
           `Organic.text`, which is the darkest colour the design system contains. */
        --bg: #2E2B25;          /* neutral900 — background */
        --surface: #474238;     /* neutral800 — surfaceVariant */
        --raised: #474238;      /* neutral800 — surfaceContainer */
        --text: #F9F4ED;        /* neutral100 — onSurface */
        --muted: #DCD3C4;       /* neutral300 — onSurfaceVariant */
        --line: #82796A;        /* neutral600 — outline */
        --accent: #F6A06B;      /* accent400  — primary */
        --accent-deep: #FFC6A5; /* accent300 */
        --bezel-rim: rgba(249, 244, 237, .16);
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 34px -12px rgba(0, 0, 0, .6);
        --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 30px 60px -22px rgba(0, 0, 0, .75);
    }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 78px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1.0625rem/1.65 "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: "Caprasimo", Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.06;
    margin: 0;
}

p { margin: 0 0 1.1rem; }

a { color: var(--accent-deep); text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; }

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

.top {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(180%) blur(14px);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: .7rem; min-height: 62px; }
.top img { width: 30px; height: 30px; border-radius: 8px; }
.top .name { font-family: "Caprasimo", Georgia, serif; font-size: 1.15rem; }
.top nav { margin-left: auto; display: flex; gap: 1.4rem; font-size: .95rem; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--text); }

/* A blurred bar is a nicety; a legible one is not. Without backdrop-filter the translucent ground
   would let a screenshot scroll under the nav at whatever contrast it happened to have. */
@supports not (backdrop-filter: blur(1px)) {
    .top { background: var(--bg); }
}

@media (max-width: 26rem) {
    .top .wrap { gap: .5rem; padding-inline: 1rem; }
    .top .name { font-size: 1rem; }
    .top nav { gap: 1rem; font-size: .875rem; }
    /* The page below is one scroll. The anchor is a convenience; the policy link is not. */
    .top nav a[href="#how"] { display: none; }
}

/* ---- hero -------------------------------------------------------------------------------- */

.hero {
    position: relative;
    /* `clip`, not `hidden`: the bloom below is a 1100px square anchored above the fold, and without
       this it extends the document by its own height — a screen of empty page under the footer that
       looks like the site failed to load. `clip` contains it without creating a scroll container. */
    overflow: clip;
    padding: clamp(3rem, 9vw, 6rem) 0 0;
    text-align: center;
}

/* A warm bloom behind the wordmark rather than a flat field. Sits under everything and is
   deliberately enormous and soft — a small gradient reads as a shape, a large one as light. */
.hero::before {
    content: "";
    position: absolute;
    /* top / right / bottom / left — one horizontal anchor only, or `right` is dropped. */
    inset: -30% auto auto 50%;
    translate: -50% 0;
    width: min(120vw, 1100px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 40%,
        color-mix(in srgb, var(--accent) 18%, transparent) 0%,
        transparent 62%);
    pointer-events: none;
}

.hero > * { position: relative; }

.hero .mark {
    width: 84px; height: 84px; border-radius: 20px;
    box-shadow: var(--shadow-lift);
    margin-bottom: 1.75rem;
}

.hero h1 { font-size: clamp(2.9rem, 9vw, 5rem); margin-bottom: 1.1rem; }

.lede {
    font-size: clamp(1.15rem, 2.6vw, 1.4rem);
    color: var(--muted);
    max-width: 27ch;
    margin: 0 auto 2.2rem;
    line-height: 1.45;
}

.cta { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.cta img { height: 56px; }
.cta .aside { color: var(--muted); font-size: .95rem; }

/* ---- phones ------------------------------------------------------------------------------ */

/* A frame in CSS rather than a mockup image: the screenshots are rendered at exactly 1080×1920 by
   the app's own composables, so a bezel drawn here stays sharp at any density and can follow the
   colour scheme, which a baked-in PNG frame cannot. */
.phone {
    position: relative;
    width: 100%;
    max-width: var(--phone);
    aspect-ratio: 1080 / 1920;
    border-radius: 36px;   /* HaloShapes.extraLarge */
    padding: 7px;
    background: linear-gradient(160deg, #4a463f, #211f1c 55%);
    box-shadow: inset 0 0 0 1px var(--bezel-rim), var(--shadow-lift);
    flex: 0 0 auto;
}
.phone img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 28px;   /* extraLarge minus the bezel — concentric */
    display: block;
}
.hero .phone { margin: clamp(2.5rem, 6vw, 4rem) auto 0; }

/* ---- the four answers -------------------------------------------------------------------- */

/* The app's own verdict pills — VerdictPalette.container over .onContainer, the same pair the
   reason chips use inside the screenshots below. Deliberately fixed in both schemes, because
   VerdictPalettes is shared across themes on purpose: a verdict may not change colour with the
   time of day. The previous version tinted four dots with `--sage`, `--accent` and `--alarm`,
   which are Material's secondary, primary and error roles rather than verdict colours — and
   `--alarm` was never redefined for dark, leaving "Do not eat" at 2.03:1 against the ground. The
   one answer meaning *put it down* was the one a dark-mode reader could not see. */
.answers {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
}
.answers li {
    padding: .5rem 1.15rem;
    border-radius: 999px;      /* HaloShape.pill */
    font-size: 1rem;
    font-weight: 600;
}
.answers .fits   { background: #E1EECC; color: #272E1B; }   /* sage200   / sage900   */
.answers .check  { background: #FFE1D0; color: #402310; }   /* accent200 / accent900 */
.answers .avoid  { background: #FFC6A5; color: #402310; }   /* accent300 / accent900 */
.answers .unsure { background: #DCD3C4; color: #2E2B25; }   /* neutral300 / neutral900 */

/* ---- alternating feature rows ------------------------------------------------------------ */

.feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
    padding: clamp(3rem, 8vw, 5rem) 0;
}
.feature + .feature { border-top: 1px solid var(--line); }
.feature .shot { display: flex; justify-content: center; }
.feature h2 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); margin-bottom: 1rem; }
.feature p { color: var(--muted); max-width: var(--measure); }
.feature strong { color: var(--text); font-weight: 600; }

/* 60rem, not 46. At 46rem a 330px phone sat beside a 340px text column — two narrow strips on
   every portrait tablet. The phone takes its own width and the prose takes the rest. */
@media (min-width: 60rem) {
    .feature { grid-template-columns: minmax(0, 1fr) var(--phone); }
    .feature.flip { grid-template-columns: var(--phone) minmax(0, 1fr); }
    .feature.flip .shot { order: -1; }
}

/* ---- the honest bit ---------------------------------------------------------------------- */

.caveat {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: clamp(1.75rem, 5vw, 2.75rem);
    margin: clamp(3rem, 8vw, 5rem) 0;
    box-shadow: var(--shadow);
}
.caveat h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 1rem; }
.caveat p { color: var(--muted); max-width: var(--measure); }
.caveat p:last-child { margin-bottom: 0; }

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

footer {
    border-top: 1px solid var(--line);
    padding: 2.25rem 0 4rem;
    color: var(--muted);
    font-size: .95rem;
}
footer .wrap { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
footer a { color: var(--muted); }

/* ---- the privacy document ---------------------------------------------------------------- */

body.doc main { max-width: var(--measure); margin: 0 auto; padding: 1rem 1.5rem 5rem; }
.doc-head { border-bottom: 1px solid var(--line); }
.doc-head .back {
    display: block; max-width: var(--measure); margin: 0 auto;
    padding: 1.25rem 1.5rem; font-weight: 600; text-decoration: none;
    font-family: "Caprasimo", Georgia, serif; font-size: 1.15rem;
}
body.doc section { padding: 2.75rem 0; }
body.doc section + section { border-top: 1px solid var(--line); }
body.doc h1 { font-size: 2.1rem; margin-bottom: 1.5rem; }
body.doc h2 { font-size: 1.3rem; margin: 2.25rem 0 .6rem; }
body.doc p, body.doc li { color: var(--muted); }
body.doc li { margin-bottom: .6rem; }
body.doc .contact { margin-top: 2rem; font-size: .95rem; }

/* Nothing here needs to move for anyone who has asked it not to. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}