/* Self-hosted Merriweather Sans variable font (latin + latin-ext, italic + normal). */
@font-face {
    font-family: 'Merriweather Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/fonts/MerriweatherSans-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Merriweather Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/fonts/MerriweatherSans-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Merriweather Sans';
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url('/fonts/MerriweatherSans-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Merriweather Sans';
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url('/fonts/MerriweatherSans-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Coffee palette: cream foam top, white middle, espresso ink. */
:root {
    --sky-top: #f7e8cf;       /* foam */
    --sky-bottom: #fbf2e2;    /* milky cream */
    --water: #6f4e37;         /* medium roast (buttons, accents) */
    --water-deep: #4b3424;    /* espresso (hover) */
    --ink: #2b1d14;           /* darkest roast (primary text) */
    --muted: #7a6857;         /* aged paper / muted text */
    --rule: #e6d8c1;          /* divider beige */
    --link: #6f4e37;          /* same as button — readable in body text */
    --link-hover: #4b3424;
    --code-bg: #f7eddd;       /* light crema for inline code */
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 38%, #ffffff 38%, #ffffff 100%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: "Merriweather Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

header.hero {
    text-align: center;
    padding: 56px 24px 40px;
}

/* Invisible click targets in the hero — icon and h1 link back to home on
   subpages, but read like plain branding (no underline, inherit color). */
.hero a {
    color: inherit;
    text-decoration: none;
}
.hero a:hover h1 {
    color: var(--link);
}

.hero .icon {
    width: 128px;
    height: 128px;
    border-radius: 28px;
    box-shadow: 0 6px 18px rgba(43, 29, 20, 0.20);
    margin-bottom: 20px;
}

h1 {
    font-size: 38px;
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: -0.4px;
}
figcaption {
    font-size: 14px;
    font-weight: 500;
}

.tagline {
    font-size: 19px;
    color: var(--muted);
    margin: 0;
}

main {
    background: #ffffff;
    padding: 24px 24px 48px;
}

main h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 36px 0 12px;
    color: var(--ink);
    clear: both;  /* always start a section below any preceding float */
}

main h2:first-of-type {
    margin-top: 12px;
}

main p {
    margin: 0 0 14px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 24px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.feature-grid li {
    padding: 14px 16px;
    background: var(--code-bg);
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.45;
}

.feature-grid li strong {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.cta {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 20px;
    background: var(--water);
    color: #ffffff;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
}
.cta:hover {
    background: var(--water-deep);
    color: #ffffff;
    text-decoration: none;
}

.note {
    background: #fbf2e2;
    border: 1px solid var(--rule);
    color: var(--ink);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
    margin: 18px 0;
}

.requirements {
    font-size: 14px;
    color: var(--muted);
    margin: 12px 0 0;
}
.requirements strong {
    color: var(--ink);
    font-weight: 600;
}

footer {
    text-align: center;
    padding: 30px 24px 60px;
    color: var(--muted);
    font-size: 14px;
}

footer a {
    color: var(--muted);
}

/* Help / docs pages */
.doc-body h2 {
    border-top: 1px solid var(--rule);
    padding-top: 24px;
}

.doc-body h2:first-of-type {
    border-top: none;
    padding-top: 0;
}

.doc-body ol, .doc-body ul {
    padding-left: 24px;
}

.doc-body li {
    margin-bottom: 6px;
}

.providers {
    margin-top: 12px;
    padding: 0;
    list-style: none;
}
.providers li {
    padding: 14px 16px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    margin-bottom: 10px;
}
.providers strong {
    display: block;
    margin-bottom: 4px;
}

.back-link {
    display: inline-block;
    margin-bottom: 24px;
    font-size: 15px;
    color: var(--muted);
}

code {
    background: var(--code-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.94em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Long URL text inside anchors should break instead of overflowing on
   narrow viewports (the help page has full URL paths as link text). */
a {
    overflow-wrap: anywhere;
}

/* Inline SF-Symbol-style status glyphs (green check, orange triangle)
   rendered as inline SVGs so they look identical across platforms and
   don't depend on emoji fonts. Sized slightly larger than the surrounding
   text and baseline-aligned so they sit next to the label cleanly. */
.sf-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    margin: 0 1px;
}
.sf-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Images and figures: scale to container, never overflow. Catch-all. */
img, figure {
    max-width: 100%;
    height: auto;
}
figure {
    margin: 18px 0;
}

/* Menu-bar screenshot — sits in the upper-left of the feature-section grid
   alongside a single-column list of feature tiles. */
figure.menu-shot {
    width: 300px;
    max-width: 100%;
    margin: 18px 0;
}
figure.menu-shot img {
    width: 100%;
}

/* Floated menu screenshot for the docs page: hugs the right edge so
   surrounding paragraphs and lists wrap around it on desktop. The narrow-
   viewport block below clears the float on tablet/phone. */
figure.menu-shot-floated {
    float: right;
    width: 300px;
    max-width: 100%;
    margin: 0 0 12px 24px;
}
figure.menu-shot-floated img {
    width: 100%;
}

/* "What you get" layout: explicit grid-template-areas place the menu
   screenshot in column 2 spanning 4 rows, tiles 1-4 down column 1, and
   tiles 5-6 paired in row 5. Explicit placement (rather than auto-flow)
   so the figure's caption can't push subsequent items into the wrong
   columns. */
.feature-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "t1 menu"
        "t2 menu"
        "t3 menu"
        "t4 menu"
        "t5 t6";
    gap: 16px 24px;
    align-items: start;
    margin-top: 18px;
}
.feature-section .menu-shot {
    grid-area: menu;
    margin: 0;
    width: 100%;
}
.feature-section .menu-shot img {
    width: 100%;
    height: auto;
}
.feature-section .feature-grid {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}
.feature-section .feature-grid li {
    margin: 0;
}
.feature-section .feature-grid li:nth-child(1) { grid-area: t1; }
.feature-section .feature-grid li:nth-child(2) { grid-area: t2; }
.feature-section .feature-grid li:nth-child(3) { grid-area: t3; }
.feature-section .feature-grid li:nth-child(4) { grid-area: t4; }
.feature-section .feature-grid li:nth-child(5) { grid-area: t5; }
.feature-section .feature-grid li:nth-child(6) { grid-area: t6; }

/* ───────────── Responsive breakpoints ───────────── */

/* Tablet & narrow desktop (single-column feature grid, lighter padding). */
@media (max-width: 720px) {
    body {
        font-size: 16px;
    }

    .container {
        padding: 0 18px;
    }

    header.hero {
        padding: 40px 20px 28px;
    }
    .hero .icon {
        width: 96px;
        height: 96px;
        margin-bottom: 16px;
    }

    h1 {
        font-size: 30px;
        letter-spacing: -0.3px;
    }
    .tagline {
        font-size: 17px;
    }

    main {
        padding: 18px 18px 36px;
    }
    main h2 {
        font-size: 20px;
        margin: 28px 0 10px;
    }

    /* Single-column feature grid on narrow viewports. */
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    figure.menu-shot {
        max-width: 280px;
    }

    /* Drop the float on narrow viewports so the figure stacks above the
       text instead of squeezing it against the right edge. */
    figure.menu-shot-floated {
        float: none;
        margin: 18px auto;
        max-width: 280px;
    }

    /* Stack everything single-column on narrow viewports. */
    .feature-section {
        grid-template-columns: 1fr;
        grid-template-areas:
            "menu"
            "t1"
            "t2"
            "t3"
            "t4"
            "t5"
            "t6";
        gap: 12px;
    }
    .feature-section .menu-shot {
        width: 100%;
        max-width: 320px;
        margin: 0 0 6px;
    }

    .cta {
        display: block;
        text-align: center;
        margin-top: 16px;
    }

    /* Footer can wrap multi-link rows; give the dots breathing room. */
    footer {
        padding: 24px 18px 48px;
        line-height: 1.7;
    }
}

/* Phone (tighten further). */
@media (max-width: 480px) {
    .container {
        padding: 0 14px;
    }

    header.hero {
        padding: 32px 14px 22px;
    }
    .hero .icon {
        width: 80px;
        height: 80px;
        border-radius: 18px;
        margin-bottom: 14px;
    }

    h1 {
        font-size: 26px;
    }
    .tagline {
        font-size: 16px;
    }

    main {
        padding: 16px 14px 32px;
    }
    main h2 {
        font-size: 19px;
    }

    .providers li,
    .feature-grid li {
        padding: 12px 14px;
    }
}