/*
 * The whole site's stylesheet.
 *
 * It used to be app-page.css, shared by the generated pages only, while the
 * five hand-written pages each carried their own inline <style> block. That
 * meant the nav, header, footer and buttons existed in six places, and they
 * had already drifted: four near-identical off-whites, five greys, and eight
 * font sizes inside a 0.2rem band.
 *
 * The rules here are in three layers, and the order matters:
 *
 *   1. Tokens          every colour, size and shadow, named once
 *   2. Shared          chrome and components every page uses
 *   3. Page overrides  scoped under a .page-* class on <body>
 *
 * Layer 3 exists because some pages genuinely differ - contact's .card has no
 * accent border, /apps uses a dark store button where an app page uses a white
 * one - and scoping those is what lets layers 1 and 2 stay single copies.
 *
 * Nothing here may style a bare element selector outside a .page-* scope. The
 * contact and privacy blocks used to style label, textarea, h2, p and a
 * globally, which was safe only while nothing else loaded them.
 *
 * Colours come from tokens, with three deliberate exceptions that must NOT be
 * tokenised, because they have to stay put when the theme flips:
 *
 *   - ink on the amber button and on the CTA gradient. Both sit on a fixed
 *     background, so ink that followed the theme would vanish in one of them.
 *   - the phone mockup on the home page (.phone-card and inside it). It is a
 *     picture of an app screen. A screenshot does not repaint itself because
 *     the reader prefers dark mode, and neither should a drawing of one.
 *   - the pair of greens on .compare .yes, which need different values in each
 *     theme to stay legible and are written as a light value plus one override.
 */

/* ===========================================================================
 * 1. Tokens
 * ======================================================================== */

:root {
    color-scheme: light dark;

    /* Brand. The gradient pair is the header and the CTA; amber is the one
       accent, reserved for the primary action and the left edge of a card. */
    --brand: #2563eb;
    --brand-deep: #1e3a8a;
    --accent: #f5a623;
    /* A darker amber for anything carrying meaning rather than decorating -
       #f5a623 only reaches 2.1:1 on white. */
    --accent-ink: #b45309;

    /* Ink, lightest to darkest. */
    --ink-soft: #6b7280;
    --ink-muted: #4b5563;
    --ink-body: #374151;
    --ink: #1f2937;
    --ink-strong: #111827;

    /* Surfaces. */
    --surface: #f5f7fb;
    --surface-raised: #ffffff;
    --surface-sunken: #f8fafc;
    --surface-input: #f9fafb;
    --border: #e5e7eb;
    --border-soft: #eef1f6;

    /* On the blue header. */
    --on-brand: #ffffff;
    --on-brand-soft: #bfdbfe;
    --on-brand-tagline: #e0e7ff;
    --header-veil: rgba(255, 255, 255, 0.08);

    --link: #2563eb;
    --footer-bg: #111827;
    --footer-ink: #ffffff;
    --footer-link: #93c5fd;

    --ok-bg: #dcfce7;
    --ok-ink: #14532d;
    --ok-edge: #16a34a;
    --bad-bg: #fee2e2;
    --bad-ink: #7f1d1d;
    --bad-edge: #dc2626;
    --bad-strong: #b91c1c;
    --bad-tint: #fef2f2;

    --chip-bg: #e0e7ff;
    --chip-ink: #1e3a8a;
    --screenshot-bg: #0b1020;

    /* Type. The system stack renders as SF on an iPhone or a Mac, which is
       what this audience looks at all day, Segoe on Windows and Roboto on
       Android - and it costs no network request and no layout shift. */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

    --text-xs: 0.85rem;
    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.4rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.125rem;
    --text-4xl: 3rem;

    --leading-tight: 1.15;
    --leading-snug: 1.5;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-2xl: 32px;
    --radius-pill: 999px;

    --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 25px 60px rgba(0, 0, 0, 0.25);
    --shadow-btn: 0 10px 25px rgba(0, 0, 0, 0.15);

    --measure: 760px;
    --page: 1150px;
}

/* Dark mode. Only the tokens move - not one rule below this block knows which
   theme it is in. The blue header and the CTA gradient are already dark, so
   they carry over unchanged; what has to change is every white card. */
@media (prefers-color-scheme: dark) {
    :root {
        --ink-soft: #94a3b8;
        --ink-muted: #b4c0d0;
        --ink-body: #cbd5e1;
        --ink: #e2e8f0;
        --ink-strong: #f1f5f9;

        --surface: #0f172a;
        --surface-raised: #1b2537;
        --surface-sunken: #172033;
        --surface-input: #131c2e;
        --border: #334155;
        --border-soft: #263243;

        --link: #8ab4ff;
        --footer-bg: #0a0f1c;
        --footer-link: #a9c8ff;

        --accent-ink: #fbbf24;

        --ok-bg: #06301c;
        --ok-ink: #b8f5d0;
        --bad-bg: #3b1116;
        --bad-ink: #ffd3d3;
        --bad-strong: #ff9d9d;
        --bad-tint: #2a1114;

        --chip-bg: #1e2a52;
        --chip-ink: #c7d6ff;

        /* Shadows read as dirt on a dark ground; borders do the lifting. */
        --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.4);
        --shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 25px 60px rgba(0, 0, 0, 0.6);
    }
}

/* ===========================================================================
 * 2. Base
 * ======================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    /* Stops iOS inflating text in landscape without disabling zoom. */
    -webkit-text-size-adjust: 100%;
}

/* Form controls do not inherit the font by default. */
input,
select,
textarea,
button {
    font-family: inherit;
}

img {
    max-width: 100%;
}

:where(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

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

/* Available to screen readers, out of the visual flow. Used for the comparison
   table's caption, which a sighted reader gets from the surrounding heading. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===========================================================================
 * 3. Chrome - header, nav, footer
 * ======================================================================== */

/*
 * Every container on the site is `max-width: var(--page)` with a 20px gutter
 * INSIDE it, so each one resolves to the same left edge.
 *
 * The header used to carry that gutter as its own padding, outside the 1150px
 * container its contents then centred within. That put the h1 20px to the left
 * of the body text below it on every page - small enough to look like nothing
 * in particular and wrong enough to see once anything else lines up.
 */
.page-header {
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: var(--on-brand);
    padding: 40px 0 90px;
    position: relative;
    overflow: hidden;
}

.nav,
.crumbs,
.hero,
.header-content,
.content,
.hero-content {
    padding-inline: 20px;
}

.page-header::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: var(--header-veil);
    border-radius: 50%;
    right: -120px;
    top: 40px;
}

.nav {
    max-width: var(--page);
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    gap: 20px;
}

.logo {
    font-size: var(--text-xl);
    font-weight: bold;
}

/* The mark and the wordmark sit on one line. Both selectors are needed because
   the home page renders the pair bare and every other page wraps it in a link
   back to /. */
.logo,
.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo a {
    color: var(--on-brand);
    text-decoration: none;
}

.logo-mark {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: block;
}

.nav a {
    color: var(--on-brand);
    text-decoration: none;
    margin-left: 24px;
    font-weight: 600;
}

.crumbs {
    max-width: var(--page);
    margin: 40px auto 0;
    position: relative;
    z-index: 2;
    font-size: var(--text-sm);
    color: var(--on-brand-soft);
}

.crumbs a {
    color: var(--on-brand-soft);
    text-decoration: none;
    margin: 0;
}

.crumbs a:hover {
    text-decoration: underline;
}

footer {
    background: var(--footer-bg);
    color: var(--footer-ink);
    padding: 30px 20px;
    text-align: center;
}

footer p {
    margin-bottom: 8px;
}

footer a {
    color: var(--footer-link);
    text-decoration: none;
    margin: 0 10px;
}

footer a:hover {
    text-decoration: underline;
}

/* ===========================================================================
 * 4. Hero (generated pages)
 * ======================================================================== */

.hero {
    max-width: var(--page);
    margin: 24px auto 0;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 34px;
    align-items: start;
}

.hero-icon {
    width: 140px;
    height: 140px;
    border-radius: var(--radius-2xl);
    display: block;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.hero h1 {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    margin-bottom: 14px;
    /* Long review titles break better with a slightly tighter track. */
    letter-spacing: -0.015em;
}

.hero.no-icon {
    grid-template-columns: 1fr;
}

.hero.no-icon h1 {
    max-width: 900px;
}

.tagline {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    max-width: 660px;
    margin-bottom: 24px;
    color: var(--on-brand-tagline);
}

.hero-meta {
    margin-top: 16px;
    font-size: var(--text-sm);
    color: var(--on-brand-soft);
}

.article-meta {
    color: var(--on-brand-soft);
    font-size: var(--text-sm);
    margin-top: 18px;
}

/* The byline sits on the dark hero, so it follows .crumbs rather than the
   body link colour - underlined on hover only, so the meta line stays meta. */
.article-meta a {
    color: var(--on-brand);
    text-decoration: none;
    font-weight: 600;
}

.article-meta a:hover {
    text-decoration: underline;
}

/* ===========================================================================
 * 5. Layout and buttons
 * ======================================================================== */

main {
    display: block;
}

.section {
    max-width: var(--page);
    margin: auto;
    padding: 64px 20px 0;
}

.section:last-of-type {
    padding-bottom: 70px;
}

.section h2 {
    font-size: var(--text-3xl);
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

.section > p {
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
    max-width: 800px;
    margin-bottom: 18px;
}

/* Amber, picked up from the spark in the logo. It is the one accent the palette
   has, so it is reserved for the primary action on a page. */
.btn {
    display: inline-block;
    background: var(--accent);
    color: #1f2937;
    padding: 15px 30px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: bold;
    box-shadow: var(--shadow-btn);
    margin-top: 26px;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-raised);
    color: var(--brand-deep);
    padding: 14px 26px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.store-btn .apple {
    font-size: 1.3rem;
    line-height: 1;
}

.cta {
    background: linear-gradient(135deg, var(--ink-strong), var(--brand-deep));
    color: #ffffff;
    text-align: center;
    padding: 70px 20px;
    margin-top: 70px;
}

.cta h2 {
    font-size: var(--text-3xl);
    margin-bottom: 15px;
}

.cta p {
    max-width: 650px;
    margin: auto;
    line-height: var(--leading-normal);
    font-size: var(--text-base);
}

/* The CTA sits on its own gradient in both themes, so its ink is fixed rather
   than tokenised - --ink-strong going pale in dark mode would erase it. */
@media (prefers-color-scheme: dark) {
    .cta {
        background: linear-gradient(135deg, #0b1020, var(--brand-deep));
    }
}

/* ===========================================================================
 * 6. Cards, lists and FAQ
 * ======================================================================== */

.card {
    background: var(--surface-raised);
    border-radius: 20px;
    padding: 34px;
    box-shadow: var(--shadow);
    border-left: 5px solid var(--accent);
}

.steps {
    counter-reset: step;
    list-style: none;
    display: grid;
    gap: 18px;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 54px;
    line-height: 1.65;
    color: var(--ink-body);
    font-size: var(--text-base);
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -2px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #ffffff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checklist {
    list-style: none;
    display: grid;
    gap: 12px;
}

.checklist li {
    color: var(--ink-body);
    line-height: var(--leading-normal);
    font-size: var(--text-base);
}

.checklist li::before {
    content: "✓";
    color: var(--accent-ink);
    font-weight: bold;
    margin-right: 10px;
}

/* The sources block at the foot of a review. Numbered rather than ticked:
   .checklist's tick next to a competitor's own documentation reads as a
   verdict on the source, and these are citations, not endorsements. */
.sources {
    list-style: decimal;
    padding-left: 1.4rem;
    display: grid;
    gap: 10px;
}

.sources li {
    color: var(--ink-body);
    line-height: 1.55;
    font-size: var(--text-sm);
}

.faq {
    display: grid;
    gap: 16px;
}

.faq details {
    background: var(--surface-raised);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    /* Vertical padding lives on the summary so the whole ~48px strip is
       tappable, rather than just the 21px line of text. */
    padding: 6px 24px;
}

.faq summary {
    font-weight: bold;
    font-size: var(--text-base);
    cursor: pointer;
    list-style: none;
    padding: 14px 0;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    float: right;
    color: var(--brand);
    font-size: var(--text-xl);
    line-height: 1;
}

.faq details[open] summary::after {
    content: "–";
}

.faq p {
    margin-top: 2px;
    padding-bottom: 14px;
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
}

.faq a {
    color: var(--link);
}

.other-apps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.other-app {
    background: var(--surface-raised);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: var(--ink);
}

.other-app:hover {
    box-shadow: var(--shadow-lg);
}

.other-app img {
    width: 64px;
    height: 64px;
    border-radius: 15px;
    display: block;
}

.other-app strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.other-app span {
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

/* ===========================================================================
 * 7. Prose (articles, reviews, explainers)
 * ======================================================================== */

/*
 * Left-aligned, deliberately, and it was tried the other way.
 *
 * A 2,600-word review does hug the left of a wide window with dead space
 * beside it, and centring the measure looks better in a screenshot of one
 * paragraph. It does not survive a whole page: this site aligns everything to
 * the left edge of a single 1150px container, so a centred .prose leaves the
 * h1 above it and the FAQ below it on the old edge and the article floating
 * between them. Scoping the centring to prose-with-no-siblings only moved the
 * seam onto pages that mix prose with a card list or a comparison table.
 *
 * One edge for every block beats a better-looking measure. If this is ever
 * revisited, the change is to centre the whole container - hero, prose, FAQ
 * and all - not this one block inside it.
 */
.prose {
    max-width: var(--measure);
}

.prose h2 {
    font-size: var(--text-2xl);
    margin: 46px 0 14px;
    letter-spacing: -0.01em;
    scroll-margin-top: 24px;
}

.prose h3 {
    font-size: 1.25rem;
    margin: 30px 0 10px;
}

.prose p {
    color: var(--ink-body);
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
    margin-bottom: 16px;
}

.prose ul {
    margin: 0 0 18px 22px;
}

.prose li {
    color: var(--ink-body);
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
    margin-bottom: 9px;
}

.prose a {
    color: var(--link);
}

.prose .lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--ink-muted);
}

/* A quotation from the company being reviewed. Set apart because the whole
   credibility of a review page is that these are their words, not ours. */
.prose blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 22px;
    border-left: 4px solid var(--accent);
}

.prose blockquote p {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--ink);
    margin-bottom: 0;
}

.callout {
    background: var(--surface-raised);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 28px 0;
    box-shadow: var(--shadow-sm);
}

.callout p:last-child {
    margin-bottom: 0;
}

/* The contents box on a long review. These pages answer one question and are
   read by someone who wants a specific part of the answer. */
.toc {
    background: var(--surface-raised);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px 26px;
    margin: 0 0 30px;
}

.toc h2 {
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 12px;
}

.toc ol {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 7px;
}

.toc li {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--ink-muted);
}

.toc a {
    color: var(--link);
    text-decoration: none;
}

.toc a:hover {
    text-decoration: underline;
}

.article-list {
    display: grid;
    gap: 22px;
    max-width: 860px;
}

.article-card {
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow);
    border-left: 5px solid var(--accent);
    text-decoration: none;
    display: block;
    color: inherit;
}

.article-card:hover {
    box-shadow: var(--shadow-lg);
}

.article-card h2 {
    font-size: var(--text-xl);
    margin-bottom: 10px;
    color: var(--ink);
}

.article-card p {
    color: var(--ink-muted);
    line-height: 1.65;
    margin-bottom: 12px;
}

.article-card .read {
    color: var(--link);
    font-weight: 600;
}

/* ===========================================================================
 * 8. App screenshots
 * ======================================================================== */

/* Four phone screenshots across on a wide screen, two on a phone. auto-fit
   with a real minimum is what makes them wrap; minmax(0, 1fr) would force
   every shot onto one row however many there are. */
.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    max-width: 1000px;
}

.shot figure {
    margin: 0;
}

.shot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xl);
    background: var(--screenshot-bg);
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.22);
}

.shot figcaption {
    margin-top: 12px;
    color: var(--ink-soft);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    text-align: center;
}

/* ===========================================================================
 * 9. Comparison table
 * ======================================================================== */

/* Wide tables must scroll inside their own box rather than pushing the page
   sideways on a phone - the same rule the screenshot grid follows. */
.table-wrap {
    overflow-x: auto;
    /* Sits outside .prose so the columns get the full section width; the prose
       either side of it stays at its readable measure. */
    margin: 6px 0 26px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    background: var(--surface-raised);
}

.compare {
    border-collapse: collapse;
    width: 100%;
    min-width: 620px;
    font-size: var(--text-sm);
}

.compare th,
.compare td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    line-height: var(--leading-snug);
    vertical-align: top;
}

.compare thead th {
    background: var(--surface-sunken);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.compare tbody tr:last-child td {
    border-bottom: 0;
}

.compare th[scope="row"] {
    font-weight: bold;
    white-space: nowrap;
}

.compare th[scope="row"] a {
    color: var(--link);
    text-decoration: none;
}

.compare th[scope="row"] a:hover {
    text-decoration: underline;
}

.compare .app-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.compare .app-cell img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: block;
    flex-shrink: 0;
}

.compare .yes {
    color: #15803d;
    font-weight: bold;
}

@media (prefers-color-scheme: dark) {
    .compare .yes {
        color: #6ee7a8;
    }
}

.table-note {
    color: var(--ink-soft);
    font-size: var(--text-sm);
    line-height: 1.55;
    margin: -14px 0 26px;
}

/* A "best for X" pick, so the page answers the question rather than only
   tabulating it. */
.picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 6px 0 26px;
}

.pick {
    background: var(--surface-raised);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--accent);
}

.pick h3 {
    font-size: var(--text-base);
    margin-bottom: 8px;
}

.pick p {
    color: var(--ink-muted);
    line-height: var(--leading-normal);
    font-size: var(--text-sm);
    margin: 0;
}

.pick a {
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

/* ===========================================================================
 * 10. Suggestion form (/make-extra-pocket-money)
 *
 * Scoped under .suggest-form rather than styling bare input and label
 * elements, because this stylesheet is loaded by every page on the site and
 * most of them have no form at all.
 * ======================================================================== */

.suggest-form .field {
    margin-bottom: 20px;
}

.suggest-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: var(--text-sm);
}

.suggest-form .hint {
    display: block;
    font-weight: normal;
    color: var(--ink-soft);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    margin: 3px 0 0;
}

.suggest-form .required {
    color: var(--bad-edge);
}

.suggest-form input[type="text"],
.suggest-form input[type="email"],
.suggest-form select,
.suggest-form textarea {
    width: 100%;
    padding: 13px 15px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: var(--surface-input);
    color: var(--ink);
}

.suggest-form input:focus,
.suggest-form select:focus,
.suggest-form textarea:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface-raised);
}

.suggest-form textarea {
    min-height: 150px;
    resize: vertical;
    line-height: var(--leading-snug);
}

/* Hidden from people, filled in by most bots - see the honeypot note in
   google-apps-script/README.md. */
.suggest-form .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.suggest-form .submit-btn {
    background: var(--accent);
    color: #1f2937;
    border: none;
    padding: 16px 34px;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
}

.suggest-form .submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.suggest-form .form-note {
    color: var(--ink-soft);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    margin-top: 18px;
    overflow-wrap: anywhere;
}

.suggest-form .form-note a {
    color: var(--link);
}

.suggest-form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}

.suggest-form legend {
    font-weight: bold;
    font-size: var(--text-sm);
    margin-bottom: 10px;
    padding: 0;
}

.suggest-form .choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.suggest-form .choices-inline {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* The whole tile is the label, so the tap target is the tile rather than the
   14px box - the same reason the nav links carry padding on mobile. */
.suggest-form .choice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 13px 15px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-input);
    font-weight: normal;
    font-size: var(--text-sm);
    line-height: 1.45;
    cursor: pointer;
}

.suggest-form .choice:hover {
    border-color: var(--on-brand-soft);
    background: var(--surface-sunken);
}

.suggest-form .choice:focus-within {
    border-color: var(--brand);
    background: var(--surface-raised);
}

.suggest-form .choice input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--brand);
}

.suggest-form .choice strong {
    display: block;
}

.suggest-form .choice-note {
    display: block;
    color: var(--ink-soft);
    font-size: var(--text-xs);
}

.suggest-form .counter {
    color: var(--ink-soft);
    font-size: var(--text-xs);
    margin-top: 6px;
    text-align: right;
}

.suggest-form .field-error {
    display: none;
    color: var(--bad-strong);
    font-size: var(--text-sm);
    font-weight: bold;
    margin-top: 7px;
}

.suggest-form .field-error.show {
    display: block;
}

.suggest-form [aria-invalid="true"] {
    border-color: var(--bad-edge);
    background: var(--bad-tint);
}

.status {
    display: none;
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.status.show {
    display: block;
}

.status.success {
    background: var(--ok-bg);
    color: var(--ok-ink);
    border-left: 5px solid var(--ok-edge);
}

.status.error {
    background: var(--bad-bg);
    color: var(--bad-ink);
    border-left: 5px solid var(--bad-edge);
}

.status a {
    color: inherit;
    font-weight: bold;
}

/* The app grid appears inside prose on /make-extra-pocket-money, where it needs
   the breathing room a bare <p> would otherwise have supplied. */
.prose .other-apps {
    margin: 6px 0 26px;
}

/* ===========================================================================
 * 11. Page overrides
 *
 * Everything below is scoped to one page. A rule only belongs here if that
 * page genuinely differs from the shared version above.
 * ======================================================================== */

/* --- Home ---------------------------------------------------------------- */

/* Gutter lives on .nav and .hero-content, as it does on .page-header. */
.home-hero {
    min-height: 620px;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: var(--on-brand);
    padding: 40px 0 80px;
    position: relative;
    overflow: hidden;
}

.home-hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: var(--header-veil);
    border-radius: 50%;
    right: -120px;
    top: 80px;
}

.hero-content {
    max-width: var(--page);
    margin: 90px auto 0;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    margin-bottom: 22px;
    letter-spacing: -0.02em;
}

.hero-content > div > p {
    font-size: var(--text-lg);
    max-width: 620px;
    line-height: var(--leading-normal);
    margin-bottom: 30px;
    color: var(--on-brand-tagline);
}

.hero-content .btn {
    margin-top: 0;
}

.phone-card {
    background: #ffffff;
    color: #1f2937;
    border-radius: 35px;
    padding: 25px;
    max-width: 320px;
    margin: auto;
    box-shadow: var(--shadow-xl);
}

.phone-top {
    width: 80px;
    height: 6px;
    background: #d1d5db;
    border-radius: var(--radius-sm);
    margin: 0 auto 25px;
}

.app-screen {
    background: #f8fafc;
    border-radius: 25px;
    padding: 25px;
    text-align: center;
}

.reward {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.reward-amount {
    font-size: 2rem;
    font-weight: bold;
}

.reward-note {
    font-size: var(--text-xs);
    opacity: 0.9;
    margin-top: 4px;
}

.app-line {
    height: 12px;
    background: #e5e7eb;
    border-radius: 8px;
    margin: 14px 0;
}

.page-home .section {
    padding: 80px 20px;
    text-align: center;
}

.page-home .section h2 {
    font-size: var(--text-3xl);
    margin-bottom: 15px;
}

.section-intro {
    max-width: 760px;
    margin: 0 auto 45px;
    font-size: var(--text-base);
    color: var(--ink-muted);
    line-height: var(--leading-normal);
}

.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.feature {
    background: var(--surface-raised);
    padding: 35px 28px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease;
    text-align: left;
}

.feature:hover {
    transform: translateY(-6px);
}

/* Real SVG rather than an emoji. An emoji is a different picture on every
   platform, and on the three that matter it is somebody else's illustration
   style sitting in the middle of ours. */
.feature .icon {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    color: var(--brand);
    display: block;
}

.feature h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
}

.feature p {
    color: var(--ink-muted);
    line-height: var(--leading-snug);
}

.design-section {
    background: var(--surface-raised);
}

.design-grid {
    max-width: var(--page);
    margin: auto;
    padding: 80px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
}

.design-text h2 {
    font-size: var(--text-3xl);
    margin-bottom: 18px;
}

.design-text p {
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: 22px;
    font-size: var(--text-base);
}

.page-home .checklist li {
    font-weight: 600;
}

.app-panels {
    display: grid;
    gap: 18px;
}

.panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 24px;
    border-left: 5px solid var(--accent);
}

.panel h3 {
    margin-bottom: 6px;
}

.panel p {
    color: var(--ink-muted);
    line-height: var(--leading-normal);
}

.panel a {
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

.panel a:hover {
    text-decoration: underline;
}

.page-home .cta {
    padding: 80px 20px;
    margin-top: 0;
}

/* --- Apps ---------------------------------------------------------------- */

.header-content {
    max-width: var(--page);
    margin: 70px auto 0;
    position: relative;
    z-index: 2;
}

.header-content h1 {
    font-size: 3.4rem;
    line-height: var(--leading-tight);
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}

.header-content p {
    font-size: var(--text-lg);
    max-width: 680px;
    line-height: var(--leading-normal);
    color: var(--on-brand-tagline);
}

.page-apps .section {
    padding: 70px 20px;
}

.app-list {
    display: grid;
    gap: 30px;
}

.app-card {
    background: var(--surface-raised);
    border-radius: 20px;
    padding: 35px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 30px;
    align-items: start;
    border-left: 5px solid var(--accent);
}

.app-icon {
    width: 110px;
    height: 110px;
    border-radius: 26px;
    display: block;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(17, 24, 39, 0.22);
}

.app-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.app-card h2 {
    font-size: 1.7rem;
}

.app-card h2 a {
    color: inherit;
    text-decoration: none;
}

.app-card h2 a:hover {
    color: var(--brand);
}

/* The icon anchor is the grid item, so it has to size like the image did. */
.app-card > a {
    display: block;
    width: 110px;
    height: 110px;
}

.app-card > div > p {
    color: var(--ink-muted);
    line-height: 1.65;
    margin-bottom: 18px;
    font-size: var(--text-base);
}

.more-link {
    display: inline-block;
    margin-left: 18px;
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

.more-link:hover {
    text-decoration: underline;
}

.tag {
    background: var(--chip-bg);
    color: var(--chip-ink);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}

/* Marks a just-released app. Amber, so it reads as the accent rather than as a
   second category chip, with the same ink the amber buttons use (6.9:1). */
.tag.new {
    background: var(--accent);
    color: #1f2937;
}

.page-apps .checklist {
    margin-bottom: 22px;
}

/* The dark store button belongs to /apps; the app detail pages use the white
   one defined above, on their blue header. */
.page-apps .store-btn {
    background: var(--ink-strong);
    color: #ffffff;
    padding: 12px 22px;
    font-size: var(--text-sm);
    margin-bottom: 14px;
    box-shadow: none;
}

.page-apps .store-btn:hover {
    background: var(--ink);
}

.page-apps .store-btn .apple {
    font-size: 1.25rem;
}

.meta {
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.page-apps .cta {
    padding: 80px 20px;
    margin-top: 0;
}

/* --- Contact ------------------------------------------------------------- */

.page-contact .section {
    padding: 70px 20px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: start;
}

/* No accent edge here - the form card is the page, not a highlight within it. */
.page-contact .card {
    padding: 38px;
    border-left: 0;
}

.page-contact .card h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.card-intro {
    color: var(--ink-muted);
    line-height: var(--leading-normal);
    margin-bottom: 28px;
}

.page-contact .field {
    margin-bottom: 20px;
}

.page-contact label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: var(--text-sm);
}

.page-contact .required {
    color: var(--bad-edge);
}

.page-contact input[type="text"],
.page-contact input[type="email"],
.page-contact select,
.page-contact textarea {
    width: 100%;
    padding: 13px 15px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: var(--surface-input);
    color: var(--ink);
}

.page-contact input:focus,
.page-contact select:focus,
.page-contact textarea:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface-raised);
}

.page-contact textarea {
    min-height: 160px;
    resize: vertical;
    line-height: var(--leading-snug);
}

.page-contact .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.page-contact .submit-btn {
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: #ffffff;
    border: none;
    padding: 16px 34px;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
}

.page-contact .submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.page-contact .submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.page-contact .form-note {
    color: var(--ink-soft);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    margin-top: 18px;
}

.page-contact .form-note a {
    color: var(--link);
}

.side-card {
    background: var(--surface-raised);
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--shadow);
    border-left: 5px solid var(--accent);
    margin-bottom: 24px;
}

.side-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.side-card p,
.side-card li {
    color: var(--ink-muted);
    line-height: 1.65;
}

.side-card ul {
    padding-left: 20px;
    margin-top: 10px;
}

.side-card li {
    margin-bottom: 8px;
}

.side-card a {
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

.side-card a:hover {
    text-decoration: underline;
}

.email-line {
    font-size: var(--text-base);
    margin-top: 8px;
}

/*
 * Our support addresses are long enough to be wider than a phone screen, and
 * an email address has no break opportunity, so it sets a min-content floor
 * that pushed the whole grid wider than the viewport.
 */
.email-line,
.side-card a,
.page-contact .form-note a {
    overflow-wrap: anywhere;
}

.faq-section {
    background: var(--surface-raised);
    padding: 70px 20px;
}

.faq-inner {
    max-width: 900px;
    margin: auto;
}

.faq-inner h2 {
    font-size: var(--text-3xl);
    margin-bottom: 12px;
}

.faq-intro {
    color: var(--ink-muted);
    line-height: 1.65;
    margin-bottom: 30px;
}

/* On contact the FAQ sits on a white band, so the panels invert: tinted fill
   and an accent edge instead of a white card and a shadow. */
.page-contact .faq {
    gap: 14px;
}

.page-contact .faq details {
    background: var(--surface);
    border-left: 5px solid var(--accent);
    box-shadow: none;
}

/* --- Privacy ------------------------------------------------------------- */

.page-privacy {
    line-height: var(--leading-relaxed);
}

.page-privacy header {
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: #ffffff;
    text-align: center;
    padding: 50px 20px;
}

.page-privacy header h1 {
    margin: 0;
    font-size: var(--text-3xl);
}

.page-privacy .container {
    max-width: 1000px;
    margin: 40px auto;
    background: var(--surface-raised);
    padding: 40px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.page-privacy h2 {
    color: var(--brand);
    margin-top: 35px;
    font-size: var(--text-xl);
}

/* Scoped to .container, not the page: the subtitle under the h1 is a bare <p>
   sitting on the blue header, and body ink on that gradient is unreadable. */
.page-privacy p {
    margin-bottom: 15px;
}

.page-privacy .container p,
.page-privacy .container li {
    color: var(--ink-body);
}

.page-privacy ul {
    padding-left: 25px;
}

.page-privacy li {
    margin-bottom: 8px;
}

.page-privacy .last-updated {
    color: var(--ink-soft);
    font-style: italic;
}

.page-privacy a {
    color: var(--link);
    text-decoration: none;
}

.page-privacy a:hover {
    text-decoration: underline;
}

.page-privacy footer {
    margin-top: 40px;
    padding: 30px;
}

.page-privacy footer a {
    margin: 0 4px;
    display: inline-block;
    padding: 10px 8px;
}

/* Long policy URLs and support addresses have no break opportunity, so
   without this they force the page wider than a narrow phone. */
.page-privacy .container a,
.page-privacy .container li,
.page-privacy .container p {
    overflow-wrap: anywhere;
}

/* --- 404 ----------------------------------------------------------------- */

.page-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-404 .page-header {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-404 .nav {
    width: 100%;
}

.content {
    max-width: var(--page);
    width: 100%;
    margin: 90px auto auto;
    position: relative;
    z-index: 2;
}

.code {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    color: var(--on-brand-soft);
    margin-bottom: 14px;
}

.content h1 {
    font-size: 3.4rem;
    line-height: var(--leading-tight);
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}

.content p {
    font-size: var(--text-lg);
    max-width: 620px;
    line-height: var(--leading-normal);
    margin-bottom: 32px;
    color: var(--on-brand-tagline);
}

.page-404 .btn {
    margin-top: 0;
    margin-right: 14px;
    margin-bottom: 14px;
}

.btn.ghost {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: none;
}

/* ===========================================================================
 * 12. Responsive
 *
 * Two breakpoints rather than one. The site had only 850px, which left the
 * 850-1150px range - most tablets in landscape, and a half-width desktop
 * window - rendering two-column layouts inside a container narrower than they
 * were designed for.
 * ======================================================================== */

@media (max-width: 1150px) {
    .hero-content,
    .design-grid {
        gap: 34px;
    }

    .features {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .page-contact .section {
        gap: 28px;
    }
}

@media (max-width: 850px) {
    .nav {
        flex-direction: column;
        gap: 15px;
    }

    .nav a {
        display: inline-block;
        margin: 0 2px;
        padding: 12px 10px;
    }

    footer a {
        display: inline-block;
        padding: 10px 8px;
    }

    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-icon {
        margin: 0 auto;
    }

    .hero h1 {
        font-size: 2.3rem;
    }

    .tagline {
        text-align: left;
    }

    .other-apps {
        grid-template-columns: 1fr;
    }

    .shots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .picks {
        grid-template-columns: 1fr;
    }

    .suggest-form .choices {
        grid-template-columns: 1fr;
    }

    /* Home */
    .hero-content,
    .design-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }

    .features {
        grid-template-columns: 1fr;
    }

    .feature {
        text-align: center;
    }

    .feature .icon {
        margin-inline: auto;
    }

    .page-home .checklist li {
        text-align: left;
    }

    /* Apps */
    .header-content h1 {
        font-size: 2.5rem;
    }

    .app-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .app-card > a,
    .app-icon {
        margin: 0 auto;
    }

    .more-link {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }

    .app-head {
        justify-content: center;
    }

    .page-apps .checklist li {
        text-align: left;
    }

    /* Contact */
    .page-contact .section {
        grid-template-columns: 1fr;
    }

    /* Grid items default to min-width:auto, so they refuse to shrink below
       their content. Let them. */
    .page-contact .section > * {
        min-width: 0;
    }

    .page-contact .card {
        padding: 28px;
    }

    /* 404 */
    .content h1 {
        font-size: 2.5rem;
    }
}
