/* =========================================================================
   Timeforce — marketing site
   =========================================================================
   Deliberately a single light theme. The product screenshots are light, and a
   dark ground would leave every one of them floating in a bright rectangle.
   Committing to one world beats inverting badly.

   Palette is cool rather than warm: the app itself is built on system blue,
   and a marketing page that fights its own product looks like a different
   company made it.
   ========================================================================= */

:root {
    /* Ground and ink — greys carry a slight blue bias, never neutral 50 % */
    --ground: #fbfcfe;
    --surface: #ffffff;
    --surface-sunk: #f3f6fa;
    --ink: #0b1220;
    --ink-soft: #33415a;
    --ink-muted: #5f6d84;
    --hairline: #e3e9f1;

    /* One accent, the product's blue. Nothing else competes with it. */
    --accent: #1d6ff2;
    --accent-deep: #1550b8;
    --accent-wash: #eaf2fe;

    /* Semantic, used only where meaning demands it */
    --good: #12795a;
    --good-wash: #e6f4ef;

    --measure: 62ch;
    --radius: 14px;
    --radius-lg: 22px;

    /* Type scale, 1.25 ratio, clamped for small screens */
    --step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.88rem);
    --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
    --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.31rem + 0.7vw, 1.85rem);
    --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.45rem);
    --step-4: clamp(2.1rem, 1.65rem + 2.25vw, 3.25rem);

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
        "Roboto Mono", Menlo, Consolas, monospace;

    --shadow-card: 0 1px 2px rgba(11, 18, 32, 0.04),
        0 10px 24px -14px rgba(11, 18, 32, 0.16);
    --shadow-lift: 0 2px 4px rgba(11, 18, 32, 0.05),
        0 24px 48px -20px rgba(11, 18, 32, 0.28);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

/* Smooth scrolling is switched on by script once the page has finished loading.
   It must NOT be active while the browser is jumping to a #section named in the
   URL: Chrome then animates the whole distance — from the top of the home page
   down to the pricing section is over five thousand pixels — and the first turn
   of the scroll wheel cancels the animation and strands the reader at the top.
   That is indistinguishable from a link that does nothing. Arriving is an
   instant jump; only clicks made afterwards, within the page, glide. */
html.scroll-smooth {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html.scroll-smooth {
        scroll-behavior: auto;
    }
}

/* Anchor targets stop below the sticky masthead instead of underneath it. The
   header is 67 px tall; the extra few pixels keep the section's own top edge
   visible rather than flush against the hairline. */
.section[id] {
    scroll-margin-top: 80px;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.022em;
    text-wrap: balance;
    font-weight: 600;
}

h1 {
    font-size: var(--step-4);
    letter-spacing: -0.032em;
}
h2 {
    font-size: var(--step-3);
}
h3 {
    font-size: var(--step-1);
    letter-spacing: -0.012em;
}

p {
    margin: 0;
}

a {
    color: var(--accent-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

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

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

/* --- layout primitives ------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section {
    padding-block: clamp(3.5rem, 9vw, 7rem);
}

.section--sunk {
    background: var(--surface-sunk);
    border-block: 1px solid var(--hairline);
}

.stack > * + * {
    margin-top: var(--gap, 1rem);
}

/* Eyebrow: mono, because this product is about recorded figures.
   Not decoration — it is the same voice as the data in the app. */
.eyebrow {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin: 0 0 0.85rem;
}

.lead {
    font-size: var(--step-1);
    color: var(--ink-soft);
    max-width: var(--measure);
    line-height: 1.5;
}

.muted {
    color: var(--ink-muted);
}

.small {
    font-size: var(--step--1);
}

/* --- buttons ----------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.72rem 1.3rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: var(--step-0);
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn--primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(21, 80, 184, 0.3),
        0 8px 18px -10px rgba(21, 80, 184, 0.6);
}

.btn--primary:hover {
    background: var(--accent-deep);
}

.btn--ghost {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--hairline);
}

.btn--ghost:hover {
    background: var(--surface-sunk);
}

.btn--light {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}

.btn--light:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* The negotiated plan gets its own weight: clearly a different kind of step
   than "start a trial", without competing with the highlighted plan. */
.btn--dark {
    background: var(--ink);
    color: #fff;
}

.btn--dark:hover {
    background: #16233c;
}

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

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 252, 254, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.masthead[data-scrolled] {
    border-bottom-color: var(--hairline);
    box-shadow: 0 1px 12px -6px rgba(11, 18, 32, 0.22);
}

.masthead__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 66px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    margin-right: auto;
}

.brand__mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(160deg, #3d8bff, var(--accent-deep));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 650;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px -2px rgba(21, 80, 184, 0.7);
}

.masthead nav {
    display: none;
    gap: 1.6rem;
}

.masthead nav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 500;
}

.masthead nav a:hover {
    color: var(--ink);
}

.masthead__actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

/* Language switcher. Built on <details>, so it opens without JavaScript and
   the summary is focusable and operable by keyboard for free. */
.langpicker {
    position: relative;
}

.langpicker summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    list-style: none;
    font-size: var(--step--1);
    color: var(--ink-soft);
    padding: 0.32rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--hairline);
    background: var(--surface);
    white-space: nowrap;
}

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

.langpicker summary:hover {
    color: var(--ink);
}

.langpicker__globe {
    color: var(--accent);
    font-size: 0.95em;
}

.langpicker[open] summary {
    border-color: var(--accent);
    color: var(--ink);
}

.langpicker__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: 250px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.9rem 1rem 1rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    border: 1px solid var(--hairline);
    z-index: 60;
}

.langpicker__label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.5rem;
}

.langpicker__label--soon {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--hairline);
}

.langpicker__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.langpicker__panel a {
    display: block;
    padding: 0.4rem 0.55rem;
    border-radius: 7px;
    text-decoration: none;
    color: var(--ink);
    font-size: var(--step--1);
}

.langpicker__panel a:hover {
    background: var(--surface-sunk);
}

.langpicker__panel a[aria-current] {
    background: var(--accent-wash);
    color: var(--accent-deep);
    font-weight: 550;
}

/* Announced but not translated yet: visible so the ambition is legible, not
   clickable so nobody lands on a 404. */
.langpicker__soon {
    grid-template-columns: 1fr 1fr;
}

.langpicker__soon li {
    padding: 0.28rem 0.1rem;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

@media (min-width: 900px) {
    .masthead nav {
        display: flex;
    }
}

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

.hero {
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    padding-bottom: 0;
    overflow: hidden;
}

.hero__grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: center;
}

.hero h1 {
    max-width: 20ch;
}

/* People photo beside the copy. It carries warmth; the product screenshot
   below carries proof. Neither can do the other's job. */
.hero__photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    aspect-ratio: 1 / 1;
    background: var(--surface-sunk);
    position: relative;
}

.hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* A whisper of the brand blue over the photo so it belongs to this page
   rather than looking bought in. */
.hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        200deg,
        rgba(29, 111, 242, 0.1),
        rgba(11, 18, 32, 0.06) 55%,
        rgba(11, 18, 32, 0.16)
    );
    pointer-events: none;
}

@media (max-width: 999px) {
    .hero__photo {
        aspect-ratio: 16 / 10;
    }
}

.hero .lead {
    margin-top: 1.15rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.75rem;
}

.hero__note {
    margin-top: 0.85rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

/* Facts strip in mono — reads as specification, not as marketing */
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.4rem;
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
    list-style: none;
    padding-inline: 0;
    font-family: var(--mono);
    font-size: var(--step--1);
    color: var(--ink-muted);
}

.facts li::before {
    content: "· ";
    color: var(--accent);
    font-weight: 700;
}

.facts a {
    color: var(--accent-deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(21, 80, 184, 0.35);
}

.facts a:hover {
    border-bottom-color: var(--accent-deep);
}

/* Screenshot frame: a hint of window chrome, bleeding off the section edge
   so the page feels like it continues into the product. */
.shot {
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
    border: 1px solid var(--hairline);
}

.shot__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(#fdfefe, #f4f7fb);
    border-bottom: 1px solid var(--hairline);
}

.shot__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d7dfe9;
}

.shot__url {
    margin-left: 0.5rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-muted);
}

.shot img {
    width: 100%;
}

/* Feature rows zoom into the top-left of the capture. A whole 1440-wide page
   scaled into half a column is a grey smudge; this keeps the interface at a
   size where the reader can see what it is. */
.shot__viewport {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.shot__viewport img {
    width: 142%;
    max-width: none;
}

.hero__shot {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: -4rem;
}

@media (min-width: 1000px) {
    .hero__grid {
        grid-template-columns: 1.15fr 0.85fr;
    }
    .hero__shot {
        margin-top: clamp(3rem, 7vw, 5rem);
    }
}

/* --- cards ------------------------------------------------------------- */

.cards {
    display: grid;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

@media (min-width: 760px) {
    .cards--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: clamp(1.35rem, 3vw, 1.9rem);
    box-shadow: var(--shadow-card);
}

.card h3 {
    margin-bottom: 0.6rem;
}

.card p {
    color: var(--ink-soft);
}

/* Numbered only where the content is genuinely a sequence — the three
   problems are not, so they get no numbers. */

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

.feature {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    border-top: 1px solid var(--hairline);
}

.feature:first-of-type {
    border-top: 0;
}

.feature__kicker {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 0.7rem;
}

.feature h3 {
    font-size: var(--step-2);
    letter-spacing: -0.02em;
    margin-bottom: 0.9rem;
}

.feature p {
    color: var(--ink-soft);
    max-width: var(--measure);
}

.checks {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
    display: grid;
    gap: 0.55rem;
}

.checks li {
    position: relative;
    padding-left: 1.7rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.85rem;
    height: 0.5rem;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}

@media (min-width: 940px) {
    .feature {
        grid-template-columns: 1fr 1.12fr;
    }
    .feature--flip .feature__text {
        order: 2;
    }
}

/* --- security ---------------------------------------------------------- */

.security {
    background: var(--ink);
    color: #eef2f8;
}

.security h2 {
    color: #fff;
}

.security .eyebrow {
    color: #7fb0ff;
}

.security .lead {
    color: #b9c4d4;
}

.seccols {
    display: grid;
    gap: 1.75rem;
    margin-top: 2.75rem;
}

.seccol {
    padding: 1.5rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.seccol h3 {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #9dc0ff;
    font-weight: 500;
    margin-bottom: 1rem;
}

.seccol ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.seccol li {
    font-size: var(--step--1);
    color: #ccd6e4;
    padding-left: 1.6rem;
    position: relative;
    line-height: 1.5;
}

.seccol li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 0.8rem;
    height: 0.48rem;
    border-left: 2px solid #58d0a4;
    border-bottom: 2px solid #58d0a4;
    transform: rotate(-45deg);
}

@media (min-width: 820px) {
    .seccols {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- pricing ----------------------------------------------------------- */

.plans {
    display: grid;
    gap: 1.25rem;
    margin-top: 2.75rem;
    align-items: start;
}

.plan {
    background: var(--surface);
    border-radius: var(--radius);
    padding: clamp(1.4rem, 3vw, 2rem);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plan--featured {
    box-shadow: var(--shadow-lift);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.plan__tag {
    align-self: flex-start;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-deep);
    background: var(--accent-wash);
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.9rem;
}

.plan__name {
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.plan__tagline {
    color: var(--ink-muted);
    font-size: var(--step--1);
    margin-top: 0.4rem;
    min-height: 3.2em;
}

.plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.plan__amount {
    font-size: var(--step-3);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.plan__cycle {
    color: var(--ink-muted);
    font-size: var(--step--1);
}

.plan__alt {
    font-family: var(--mono);
    font-size: var(--step--1);
    color: var(--ink-muted);
    margin-top: 0.35rem;
    font-variant-numeric: tabular-nums;
}

/* Sits where the figure would be, and takes up the same vertical space so the
   four cards stay aligned across the row. */
.plan__contact {
    margin-top: 1.3rem;
    font-size: var(--step-0);
    font-weight: 550;
    color: var(--ink);
    line-height: 1.35;
    min-height: 3.5em;
    display: flex;
    align-items: center;
}

.plan--contact {
    background: linear-gradient(180deg, #fff, #f7faff);
}

.plan__limits {
    display: grid;
    gap: 0.3rem;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--hairline);
    font-family: var(--mono);
    font-size: var(--step--1);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.plan .checks {
    margin-top: 1.2rem;
    flex: 1;
}

.plan .btn {
    margin-top: 1.6rem;
    justify-content: center;
}

/* Four plans: two-up on tablets, four-up only once there is real room. Three
   columns would orphan the fourth card on its own row. */
@media (min-width: 700px) {
    .plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1120px) {
    .plans {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    /* The pricing row needs more width than the reading column. */
    #pricing .wrap {
        max-width: 1340px;
    }
}

.pricing__foot {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
}

@media (min-width: 760px) {
    .pricing__foot {
        grid-template-columns: 1.4fr 1fr;
    }
}

.addons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
    list-style: none;
    padding: 0;
}

.addons li {
    font-family: var(--mono);
    font-size: var(--step--1);
    background: var(--accent-wash);
    color: var(--accent-deep);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.paymethods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
    list-style: none;
    padding: 0;
}

.paymethods li {
    font-size: var(--step--1);
    color: var(--ink-soft);
    background: var(--surface-sunk);
    border: 1px solid var(--hairline);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}

/* --- faq --------------------------------------------------------------- */

.faq {
    margin-top: 2.5rem;
    max-width: 780px;
}

.faq details {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0 1.35rem;
    margin-bottom: 0.8rem;
}

.faq summary {
    cursor: pointer;
    padding: 1.15rem 2rem 1.15rem 0;
    font-weight: 550;
    list-style: none;
    position: relative;
}

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

.faq summary::after {
    content: "";
    position: absolute;
    right: 0.25rem;
    top: 1.5rem;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--ink-muted);
    border-bottom: 2px solid var(--ink-muted);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.faq details[open] summary::after {
    transform: rotate(-135deg);
}

.faq details p {
    padding-bottom: 1.3rem;
    color: var(--ink-soft);
    max-width: var(--measure);
}

/* --- closing cta ------------------------------------------------------- */

.closing {
    background: linear-gradient(150deg, var(--accent-deep), #0d2f6b 65%, #0b1220);
    color: #fff;
    text-align: center;
}

.closing h2 {
    color: #fff;
    max-width: 24ch;
    margin-inline: auto;
}

.closing .lead {
    color: #cfdcf0;
    margin-inline: auto;
    margin-top: 1rem;
}

.closing__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.9rem;
}

.closing .btn--primary {
    background: #fff;
    color: var(--accent-deep);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}

.closing .btn--primary:hover {
    background: #eaf2fe;
}

.closing__note {
    margin-top: 1.1rem;
    font-size: var(--step--1);
    color: #b6c6de;
}

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

.foot {
    background: var(--ink);
    color: #93a1b6;
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
    font-size: var(--step--1);
}

.foot__grid {
    display: grid;
    gap: 2rem;
}

.foot h4 {
    margin: 0 0 0.7rem;
    color: #dbe3ee;
    font-size: var(--step--1);
    font-weight: 600;
}

.foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.foot a {
    color: #93a1b6;
    text-decoration: none;
}

.foot a:hover {
    color: #fff;
    text-decoration: underline;
}

.foot__brand .brand {
    color: #fff;
    margin-bottom: 0.75rem;
}

.foot__bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    color: #78879d;
}

/* Two steps rather than one, because the guides column made it five. At tablet
   width five columns would leave each link wrapping over three lines, so the
   brand block takes the full row and the four link columns pair up. */
@media (min-width: 780px) {
    .foot__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .foot__brand {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1040px) {
    .foot__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    }

    .foot__brand {
        grid-column: auto;
    }
}

/* --- legal pages ------------------------------------------------------- */

.doc {
    max-width: 760px;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.doc h1 {
    font-size: var(--step-3);
    margin-bottom: 1.5rem;
}

.doc h2 {
    font-size: var(--step-1);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.doc p,
.doc li {
    color: var(--ink-soft);
    max-width: var(--measure);
}

.doc p + p {
    margin-top: 0.9rem;
}

.doc__note {
    background: #fff8e6;
    border: 1px solid #f0dca6;
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    color: #6b5417;
    font-size: var(--step--1);
    margin-bottom: 2rem;
}

.doc dl {
    margin: 0;
}

.doc dt {
    font-family: var(--mono);
    font-size: var(--step--1);
    color: var(--ink-muted);
    margin-top: 1rem;
}

.doc dd {
    margin: 0.2rem 0 0;
    color: var(--ink);
}

/* --- guides ------------------------------------------------------------
   The knowledge base. Set as a reference document rather than a marketing
   page: one narrow column, a visible trail at the top, and quoted statute
   given its own weight so a reader can tell the law from our reading of it. */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

.crumbs a {
    color: var(--ink-muted);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--accent-deep);
    text-decoration: underline;
}

.crumbs__sep {
    color: #b9c4d4;
}

.guide,
.guides {
    max-width: 780px;
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}

.guide__head {
    margin-top: 1.6rem;
}

.guide__head h1 {
    font-size: var(--step-3);
    margin: 0.5rem 0 0.9rem;
}

.guide__head .lead {
    max-width: var(--measure);
}

.guide__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.2rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

/* Table of contents. A list of destinations, so it is numbered and quiet — it
   must not compete with the article's own first heading. */
.guide__toc {
    margin-top: 2.2rem;
    padding: 1.2rem 1.4rem;
    background: var(--surface-sunk);
    border-radius: var(--radius);
}

.guide__toc-title {
    margin: 0 0 0.6rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink);
}

.guide__toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.guide__toc li {
    counter-increment: toc;
    padding: 0.22rem 0;
    font-size: var(--step--1);
}

.guide__toc li::before {
    content: counter(toc) '.';
    display: inline-block;
    min-width: 1.5rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.guide__toc a {
    color: var(--ink-soft);
    text-decoration: none;
}

.guide__toc a:hover {
    color: var(--accent-deep);
    text-decoration: underline;
}

/* --- the prose itself --- */

.guide__body {
    margin-top: 2.6rem;
}

.guide__body h2 {
    font-size: var(--step-2);
    margin: 2.8rem 0 0.8rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--hairline);
    scroll-margin-top: 84px;
    text-wrap: balance;
}

.guide__body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.guide__body h3 {
    font-size: var(--step-1);
    margin: 2rem 0 0.6rem;
    scroll-margin-top: 84px;
    text-wrap: balance;
}

.guide__body p,
.guide__body li {
    color: var(--ink-soft);
    max-width: var(--measure);
}

.guide__body p {
    margin: 0 0 1rem;
}

.guide__body ul,
.guide__body ol {
    margin: 0 0 1.2rem;
    padding-left: 1.3rem;
}

.guide__body li {
    padding: 0.2rem 0;
}

.guide__body li > strong:first-child {
    color: var(--ink);
}

.guide__body a {
    color: var(--accent-deep);
}

/* Quoted statute. The left rule and the change of ground say "these are not our
   words" without a label on every quotation. */
.guide__body blockquote {
    margin: 1.4rem 0;
    padding: 1rem 1.3rem;
    border-left: 3px solid var(--accent);
    background: var(--surface-sunk);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.guide__body blockquote p {
    margin: 0;
    color: var(--ink);
}

.guide__body blockquote p + p {
    margin-top: 0.7rem;
}

.guide__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4rem 0;
    font-size: var(--step--1);
}

.guide__body th,
.guide__body td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}

.guide__body th {
    color: var(--ink);
    font-weight: 600;
}

.guide__body td {
    color: var(--ink-soft);
}

/* Wide content scrolls inside its own box; the page itself never scrolls
   sideways. The minimum width is what forces that scroll — without it the table
   just squeezes, and on a phone every cell became four wrapped lines. */
.guide__body .table-scroll {
    overflow-x: auto;
    margin: 1.4rem 0;
    padding-bottom: 0.4rem;
}

.guide__body .table-scroll table {
    margin: 0;
    min-width: 34rem;
}

/* --- sources, notice, call to action --- */

.guide__sources {
    margin-top: 3rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--hairline);
}

.guide__sources h2 {
    font-size: var(--step-0);
    margin: 0 0 0.7rem;
}

.guide__sources ul {
    margin: 0;
    padding-left: 1.2rem;
}

.guide__sources li {
    padding: 0.22rem 0;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

/* The same palette as the note on the legal pages, deliberately: a reader who
   has met one recognises the other as the same kind of qualification. */
.guide__disclaimer {
    margin-top: 1.8rem;
    padding: 1.1rem 1.3rem;
    background: #fff8e6;
    border: 1px solid #f0dca6;
    border-radius: var(--radius);
    color: #6b5417;
    font-size: var(--step--1);
}

.guide__disclaimer strong {
    color: #543f0c;
}

.guide__cta {
    margin-top: 2.4rem;
    padding: clamp(1.4rem, 3vw, 2rem);
    background: var(--accent-wash);
    border-radius: var(--radius-lg);
}

.guide__cta h2 {
    font-size: var(--step-1);
    margin: 0 0 0.5rem;
}

.guide__cta p {
    margin: 0 0 1.2rem;
    color: var(--ink-soft);
    max-width: var(--measure);
}

.guide__related {
    margin-top: 3rem;
}

.guide__related h2 {
    font-size: var(--step-0);
    margin: 0 0 1rem;
}

.guide__related-list {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide__related-list a {
    display: block;
    height: 100%;
    padding: 1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.guide__related-list a:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.guide__related-kicker {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.guide__related-title {
    display: block;
    margin-top: 0.25rem;
    color: var(--ink);
    font-weight: 600;
}

@media (min-width: 700px) {
    .guide__related-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- the overview --- */

.guides__head {
    margin: 1.6rem 0 2.6rem;
}

.guides__head h1 {
    font-size: var(--step-3);
    margin: 0 0 0.8rem;
}

.guides__group + .guides__group {
    margin-top: 2.8rem;
}

.guides__group h2 {
    font-size: var(--step-0);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 1rem;
}

.guides__list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guidecard a {
    display: block;
    height: 100%;
    padding: 1.3rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.guidecard a:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.guidecard h3 {
    margin: 0 0 0.5rem;
    font-size: var(--step-1);
    color: var(--ink);
    text-wrap: balance;
}

.guidecard p {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

/* Two classes deep on purpose: `.guidecard p` above zeroes the margin, and a
   single class would lose the cascade to it and leave the date glued to the
   description. */
.guidecard .guidecard__meta {
    margin-top: 0.8rem;
    color: var(--ink-muted);
    font-size: 0.8rem;
}

.guides .guide__disclaimer {
    margin-top: 3rem;
}

/* The teaser on the home page. Three across on a wide screen, because there it
   sits between two full-width sections and a single column would look unfinished. */
.guides__list--teaser {
    margin-top: 2.2rem;
}

.guidecard__kicker {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.guides__list--teaser .guidecard h3 {
    font-size: var(--step-0);
}

.guides__more {
    margin-top: 1.6rem;
}

.guides__more a {
    color: var(--accent-deep);
    font-weight: 600;
    text-decoration: none;
}

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

@media (min-width: 780px) {
    .guides__list--teaser {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- scroll reveal ----------------------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- cookie banner ------------------------------------------------------ */

/* Sits at the bottom rather than covering the page: a full-screen overlay that
   blocks reading until you answer is coercion dressed as a choice, and both
   buttons carry equal visual weight for the same reason. */
.cookiebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -8px 32px -16px rgba(11, 18, 32, 0.35);
}

.cookiebar[hidden] {
    display: none;
}

.cookiebar__inner {
    max-width: 1180px;
    margin-inline: auto;
    padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
    display: grid;
    gap: 1rem;
    align-items: center;
}

.cookiebar__title {
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.cookiebar__body {
    font-size: var(--step--1);
    color: var(--ink-soft);
    max-width: 78ch;
    line-height: 1.5;
}

.cookiebar__actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Equal size for both, so declining is exactly as easy as agreeing. */
.cookiebar__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 10rem;
}

@media (min-width: 860px) {
    .cookiebar__inner {
        grid-template-columns: 1fr auto;
        gap: 2rem;
    }
    .cookiebar__actions .btn {
        flex: 0 0 auto;
    }
}

/* ---------------------------------------------------------------------------
   Enquiry dialog

   Replaces the mailto links. A native <dialog>, so focus trapping, Escape and the
   backdrop come from the browser rather than from JavaScript that gets them
   subtly wrong for keyboard users.
   --------------------------------------------------------------------------- */

.formdlg {
    width: min(34rem, calc(100vw - 2rem));
    padding: 2rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 2px 6px rgb(11 18 32 / 0.06), 0 40px 80px -30px rgb(11 18 32 / 0.4);
    color: var(--ink);
}

.formdlg::backdrop {
    background: rgb(11 18 32 / 0.45);
}

.formdlg__dismiss {
    float: right;
    margin: -0.75rem -0.5rem 0 0;
}

.formdlg__dismiss button {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.formdlg__dismiss button:hover { background: var(--surface-sunk); color: var(--ink); }

.formdlg__title { margin: 0 0 0.35rem; font-size: 1.4rem; letter-spacing: -0.01em; }
.formdlg__lead { margin: 0 0 1.5rem; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.55; }

.formdlg__form { display: grid; gap: 1rem; }
.formdlg__grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }

@media (max-width: 32rem) {
    .formdlg { padding: 1.5rem; }
    .formdlg__grid { grid-template-columns: 1fr; }
}

.field { display: grid; gap: 0.35rem; font-size: 0.9rem; }
.field > span { font-weight: 500; }

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
}

.field input:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.field textarea { resize: vertical; min-height: 5.5rem; }

.field--check {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    color: var(--ink-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.field--check input { margin-top: 0.15rem; }
.field--check a { color: var(--accent-deep); }

/* Off-screen rather than display:none — the more careful bots skip fields that
   are plainly hidden, and this one only works if it looks fillable. */
.formdlg__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formdlg__error {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.88rem;
}

.formdlg__submit { justify-self: start; }

.formdlg__done h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.formdlg__done p { margin: 0 0 1.25rem; color: var(--ink-muted); line-height: 1.6; }

/* The [hidden] attribute is only a UA rule of `display: none`, so any class that
   sets display — .formdlg__form is a grid — silently wins over it. Without this
   the form stays on screen next to its own success message. */
.formdlg [hidden] {
    display: none;
}