/* Trial — one stylesheet for the marketing pages and the two legal documents.
   Every colour is lifted from Trial/Core/Design/Theme.swift rather than picked again
   here, so the site and the app cannot drift apart. Where a token below has no
   counterpart in the app it is marked derived. */

:root {
    color-scheme: light dark;

    /* Ground — Theme.background / surface / surfaceRaised / surfaceSunken */
    --base: #F4F5F4;
    --surface: #E2E6DF;
    --raised: #EDF0EA;
    --sunken: #D6DCD2;

    /* Text — Theme.textPrimary / textSecondary / textTertiary */
    --ink: #242823;
    --ink-soft: #5B6158;
    --ink-faint: #7E857B;
    --rule: rgba(36, 40, 35, 0.12);
    --rule-strong: rgba(36, 40, 35, 0.22);

    /* Trial hues — Hue.action, .accent, .clay, .teal, .plum, .moss */
    --action: #455B16;
    --action-wash: #E7EED1;
    --accent: #3B4FA8;
    --accent-wash: #BBCBFF;
    --clay: #8C4A2B;
    --clay-wash: #F3E3D9;
    --teal: #1F5A66;
    --teal-wash: #DCEAEC;
    --plum: #5E3A6E;
    --plum-wash: #ECE1F1;
    --moss: #2B5A3C;
    --moss-wash: #DCEADF;

    /* Derived: ink that sits on a solid --action fill. Hue.ink. */
    --on-action: #FFFFFF;

    /* Shape — Theme.cardRadius / tileRadius / pillRadius */
    --r-card: 22px;
    --r-tile: 14px;
    --r-pill: 11px;

    --display: "Figtree", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --base: #1A1E1A;
        --surface: #2B3228;
        --raised: #353D31;
        --sunken: #141812;

        --ink: #EFF3E9;
        --ink-soft: #B4BCAA;
        --ink-faint: #8A9280;
        --rule: rgba(239, 243, 233, 0.14);
        --rule-strong: rgba(239, 243, 233, 0.26);

        --action: #C6DD62;
        --action-wash: #293218;
        --accent: #BBCBFF;
        --accent-wash: #1D2340;
        --clay: #E5A57E;
        --clay-wash: #32200F;
        --teal: #7FC7D6;
        --teal-wash: #0F2A30;
        --plum: #CBA5DC;
        --plum-wash: #2A1B32;
        --moss: #8ED39F;
        --moss-wash: #15301E;

        --on-action: #1A1E1A;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    background: var(--base);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; }

h1, h2, h3, .display {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-wrap: balance;
    margin: 0;
}

/* ---------------------------------------------------------------- shell */

.shell {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--ink);
}
.wordmark img { width: 34px; height: 34px; }
.wordmark span {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}
.topnav a { color: var(--ink-soft); text-decoration: none; }
.topnav a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 620px) {
    .topnav a.hide-small { display: none; }
}

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

.hero { padding-top: 2.5rem; padding-bottom: 4.5rem; }
@media (min-width: 900px) {
    .hero {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 4rem;
        align-items: center;
        padding-top: 3.5rem;
        padding-bottom: 6rem;
    }
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--action-wash);
    color: var(--action);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.45rem 0.85rem;
    border-radius: var(--r-pill);
}
.pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.hero h1 {
    font-size: clamp(2.6rem, 7vw, 4.25rem);
    font-weight: 900;
    margin: 1.5rem 0 0;
}

.lede {
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    color: var(--ink-soft);
    max-width: 34rem;
    margin: 1.25rem 0 0;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 2rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.4rem;
    border-radius: var(--r-tile);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 1.5px solid transparent;
}
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-quiet {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-strong);
}
.btn-quiet:hover { background: var(--surface); }

.cta-note {
    font-size: 0.88rem;
    color: var(--ink-faint);
    margin: 0.9rem 0 0;
}

/* The phone-ish card in the hero. Not a screenshot: a real card built from the same
   tokens the app draws with, so it stays honest when the app changes. */

.showcase {
    margin-top: 3rem;
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 1.15rem;
    border-top: 4px solid var(--moss);
    max-width: 24rem;
}
@media (min-width: 900px) { .showcase { margin-top: 0; justify-self: end; width: 100%; } }

.showcase h3 {
    font-size: 1.32rem;
    font-weight: 800;
    margin: 0 0 0.9rem;
    line-height: 1.16;
}

.daystrip {
    display: flex;
    gap: 4px;
    margin-bottom: 0.9rem;
}
.daystrip i {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(43, 90, 60, 0.18);
}
.daystrip i.done { background: var(--moss); }

.showrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
}
.faces { display: flex; }
.faces b {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    margin-left: -8px;
    display: grid;
    place-items: center;
    font-size: 13px;
}
.faces b:first-child { margin-left: 0; }
.showrow .spacer { flex: 1; }
.showrow .go {
    background: var(--moss-wash);
    color: var(--moss);
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill);
}

/* ---------------------------------------------------------------- sections */

section { padding: 4rem 0; }
section + section { border-top: 1px solid var(--rule); }

.eyebrow {
    font-family: var(--display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--action);
    margin: 0 0 0.9rem;
}

section h2 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    max-width: 28rem;
}
section > .shell > p.intro {
    color: var(--ink-soft);
    max-width: 38rem;
    margin: 1rem 0 0;
}

.grid {
    display: grid;
    gap: 1rem;
    margin-top: 2.5rem;
}
@media (min-width: 720px) { .grid.two   { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid.four  { grid-template-columns: repeat(4, 1fr); } }

.card {
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 1.5rem;
}
.card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; }

/* Numbered because the content really is a sequence: a Trial runs in this order. */
.step .n {
    font-family: var(--display);
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--action);
    display: block;
    margin-bottom: 0.9rem;
}

.tier {
    background: var(--raised);
    border-radius: var(--r-card);
    padding: 1.5rem;
    border-left: 3px solid var(--tier-color, var(--action));
}
.tier .label {
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tier-color);
    margin: 0 0 0.6rem;
}
.tier p.example { color: var(--ink); font-weight: 600; margin: 0 0 0.5rem; font-size: 1.02rem; }
.tier p.why { color: var(--ink-soft); font-size: 0.93rem; margin: 0; }

.pull {
    font-family: var(--display);
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -0.015em;
    color: var(--ink);
    max-width: 32rem;
    margin: 2.5rem 0 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--action);
}

/* Experiment sampler — the real library, with its real day counts. */

.exp {
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 1.35rem 1.5rem;
    border-top: 4px solid var(--hue, var(--action));
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.exp .theme {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hue);
}
.exp h3 { font-size: 1.16rem; line-height: 1.22; }
.exp .why { color: var(--ink-soft); font-size: 0.92rem; margin: 0; flex: 1; }
.exp .len {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

/* Privacy block */

.stance {
    background: var(--action-wash);
    border-radius: var(--r-card);
    padding: 2rem;
    margin-top: 2.5rem;
}
.stance ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.85rem;
}
@media (min-width: 720px) { .stance ul { grid-template-columns: 1fr 1fr; gap: 0.85rem 2rem; } }
.stance li {
    color: var(--ink);
    font-size: 0.97rem;
    padding-left: 1.6rem;
    position: relative;
}
.stance li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--action);
}
.stance li b { font-weight: 700; }

/* FAQ */

.faq { margin-top: 2.5rem; max-width: 46rem; }
.faq details {
    border-bottom: 1px solid var(--rule);
    padding: 1.1rem 0;
}
.faq summary {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    font-weight: 700;
    color: var(--action);
    font-size: 1.3rem;
    line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--ink-soft); margin: 0.75rem 0 0; font-size: 0.97rem; }

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

.sitefoot {
    border-top: 1px solid var(--rule);
    padding: 3rem 0 4rem;
    color: var(--ink-faint);
    font-size: 0.92rem;
}
.sitefoot .cols {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: space-between;
}
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.sitefoot a { color: var(--ink-soft); text-decoration: none; }
.sitefoot a:hover { text-decoration: underline; }
.sitefoot .fine { margin: 2.5rem 0 0; max-width: 34rem; }

/* ---------------------------------------------------------------- documents
   The privacy policy and the terms. Narrower measure, larger type: a policy
   nobody can read fails at the only thing it exists to do. */

.doc {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1rem 1.5rem 6rem;
}

.doc header {
    border-bottom: 2px solid var(--ink);
    padding-bottom: 1.5rem;
    margin-bottom: 2.5rem;
}
.doc .mark {
    font-family: var(--display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--action);
    margin: 0 0 0.75rem;
}
.doc h1 {
    font-size: clamp(2rem, 6vw, 2.9rem);
    font-weight: 900;
    margin: 0 0 0.5rem;
}
.doc .meta { color: var(--ink-faint); font-size: 0.9rem; margin: 0; }

.doc h2 { font-size: 1.35rem; margin: 2.75rem 0 0.75rem; }
.doc h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; font-weight: 700; }
.doc p, .doc li { color: var(--ink-soft); }
.doc li { margin-bottom: 0.4rem; }
.doc strong { color: var(--ink); font-weight: 650; }

.doc .summary {
    background: var(--action-wash);
    border-radius: var(--r-tile);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}
.doc .summary p { color: var(--ink); }
.doc .summary p:last-child { margin-bottom: 0; }
.doc .summary h2 { margin-top: 0; font-size: 1.05rem; }

.doc .callout {
    background: var(--clay-wash);
    border-radius: var(--r-tile);
    padding: 1.1rem 1.4rem;
    margin: 1.75rem 0;
}
.doc .callout strong { color: var(--clay); }
.doc .callout p { color: var(--ink); }
.doc .callout p:last-child { margin-bottom: 0; }

.doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.94rem;
}
.doc th, .doc td {
    text-align: left;
    padding: 0.65rem 0.75rem 0.65rem 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    color: var(--ink-soft);
}
.doc th { color: var(--ink); font-weight: 650; }
.scroll { overflow-x: auto; }

.doc footer {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-faint);
    font-size: 0.9rem;
}
.doc footer a { color: var(--ink-faint); }

.backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-faint);
    text-decoration: none;
    padding: 1.5rem 0 0;
}
.backlink:hover { color: var(--ink); }