/* ==========================================================================
   Mesterplan — marketing site
   --------------------------------------------------------------------------
   Design notes for whoever edits this next:

   The page is built around one idea — a sag moves from tilbud to faktura, and
   Mesterplan is where that journey lives. So the structural device is a real
   sagsnummer (24-118) threaded down the page, not decorative 01/02/03 markers.

   Palette is deliberately not another all-blue B2B SaaS wash. Blue is the
   product's own #5D87FF; the second accent is an ochre borrowed from the
   tommestok and the safety vest — the actual colours of the trade. Ochre is
   rationed: it marks *where the sag is right now* and nothing else. If you add
   a third use of --ochre, delete one of the others.

   Mono (IBM Plex Mono) is for data only — sagsnumre, timer, beløb, datoer.
   Never prose. It is what makes numbers read as numbers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Ink — near-black with blue in it, like blueprint ink */
    --ink: #101728;
    --ink-soft: #1E2942;

    /* Brand blue — from the app's own tailwind config */
    --blue: #5D87FF;
    --blue-hover: #4570EA;
    --blue-deep: #2F47A4;
    --blue-tint: #ECF2FF;

    /* The one accent. Tommestok / advarselsvest. Rationed on purpose. */
    --ochre: #FFB020;
    --ochre-soft: #FFF4DE;

    --white: #FFFFFF;
    --chalk: #F6F7FB;
    --chalk-deep: #EDF0F7;

    --g-100: #F3F5F9;
    --g-200: #E4E8F0;
    --g-300: #CBD2E0;
    --g-400: #9AA4BA;
    --g-500: #6B7794;
    --g-600: #4A5673;

    --text: var(--ink);
    --text-soft: var(--g-500);
    --line: var(--g-200);

    --ok: #13B98F;

    /* Type */
    --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Rhythm */
    --r-sm: 8px;
    --r: 14px;
    --r-lg: 20px;
    --r-xl: 28px;

    --shadow-sm: 0 1px 2px rgba(16, 23, 40, .05);
    --shadow: 0 4px 16px -4px rgba(16, 23, 40, .10), 0 1px 3px rgba(16, 23, 40, .05);
    --shadow-lg: 0 24px 48px -16px rgba(16, 23, 40, .18), 0 4px 12px rgba(16, 23, 40, .06);

    --nav-h: 72px;
}

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

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

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.62;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.028em;
    color: var(--ink);
    text-wrap: balance;
    /* Danish runs on compounds — "Handelsbetingelser", "Privatlivspolitik",
       "kvalitetssikringen". At 320px a single one of those is wider than the
       column and pushes the whole page into horizontal scroll. The document is
       lang="da", so the browser hyphenates at real Danish break points; the
       break-word is the fallback for anything the dictionary won't split. */
    hyphens: auto;
    overflow-wrap: break-word;
}

h1 { font-size: clamp(2.15rem, 4.1vw, 3.2rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -.018em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-hover); text-decoration: none; }
a:hover { color: var(--blue-deep); }

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

ul { margin: 0; padding: 0; list-style: none; }

svg { flex-shrink: 0; }

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

.container {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 24px;
}

.container-narrow { max-width: 760px; }

/* Skip link — keyboard users land here first */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ink);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 0 0 var(--r-sm) 0;
    font-weight: 600;
}
.skip:focus { left: 0; color: var(--white); }

/* Numbers read as numbers */
.num {
    font-family: var(--mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease,
                transform .18s ease, box-shadow .18s ease;
}
.btn svg { width: 17px; height: 17px; }

.btn-primary {
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 1px 2px rgba(16, 23, 40, .12);
}
.btn-primary:hover {
    background: var(--blue-hover);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(93, 135, 255, .7);
}

.btn-secondary {
    background: var(--white);
    color: var(--ink);
    border-color: var(--g-300);
}
.btn-secondary:hover {
    background: var(--white);
    color: var(--ink);
    border-color: var(--ink);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    padding-inline: 14px;
}
.btn-ghost:hover { background: var(--g-100); color: var(--ink); }

.btn-white {
    background: var(--white);
    color: var(--ink);
}
.btn-white:hover { background: var(--blue-tint); color: var(--blue-deep); transform: translateY(-1px); }

.btn-outline-light {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, .35);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .1); color: var(--white); }

.btn-lg { padding: 15px 28px; font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: transform .3s ease;
}
.header.is-hidden { transform: translateY(-100%); }

.nav {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--nav-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: -.03em;
    color: var(--ink);
    flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.nav-links a {
    display: block;
    padding: 8px 13px;
    border-radius: var(--r-sm);
    font-size: .95rem;
    font-weight: 600;
    color: var(--g-600);
}
.nav-links a:hover { background: var(--g-100); color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
    content: '';
    display: block;
    height: 2px;
    margin: 5px 13px -7px;
    background: var(--blue);
    border-radius: 2px;
}

.nav-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.nav-toggle {
    display: none;
    margin-left: auto;
    /* 44x44 is the minimum comfortable tap target; this is the only nav control
       on phones and tablets, so it does not get to be 42. */
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}
.nav-toggle svg { width: 21px; height: 21px; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }

.mobile-panel {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--white);
    padding: 12px 24px 24px;
}
.mobile-panel.open { display: block; }
.mobile-panel a.m-link {
    display: block;
    padding: 13px 4px;
    border-bottom: 1px solid var(--g-100);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}
.mobile-panel .m-actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}
.mobile-panel .btn { width: 100%; }

@media (max-width: 940px) {
    .nav-links, .nav-cta { display: none; }
    .nav-toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Section shells
   -------------------------------------------------------------------------- */
.sec { padding: 88px 0; }
.sec-slim { padding: 60px 0; }
.sec-chalk { background: var(--chalk); }
.sec-ink { background: var(--ink); color: rgba(255, 255, 255, .82); }
.sec-ink h2, .sec-ink h3 { color: var(--white); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue-deep);
}
.eyebrow::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--blue);
    border-radius: 2px;
}
.sec-ink .eyebrow { color: var(--blue); }
.sec-ink .eyebrow::before { background: var(--ochre); }

.sec-head {
    max-width: 640px;
    margin-bottom: 52px;
}
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head p {
    margin-top: 16px;
    font-size: 1.13rem;
    color: var(--text-soft);
}
.sec-ink .sec-head p { color: rgba(255, 255, 255, .68); }

.lead {
    font-size: 1.19rem;
    line-height: 1.62;
    color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Blueprint ink, not another white SaaS hero. The sagskort is a light card, so
   putting it on ink makes the one thing we most want looked at the brightest
   object on the screen. */
.hero {
    position: relative;
    padding: 62px 0 78px;
    background:
        radial-gradient(1000px 560px at 78% -12%, rgba(93, 135, 255, .38) 0%, transparent 62%),
        radial-gradient(760px 420px at 8% 108%, rgba(93, 135, 255, .16) 0%, transparent 60%),
        var(--ink);
    color: rgba(255, 255, 255, .74);
    overflow: hidden;
}

/* The blueprint grid, now drawn in light on ink — literally a blueprint. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(900px 520px at 26% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(900px 520px at 26% 40%, #000 0%, transparent 80%);
    pointer-events: none;
}

.hero h1 { color: var(--white); }
.hero .hero-lead { color: rgba(255, 255, 255, .72); }
.hero .hero-note { color: rgba(255, 255, 255, .6); }
.hero .eyebrow { color: #A9C1FF; }
.hero .eyebrow::before { background: var(--ochre); }

.hero .container { position: relative; z-index: 1; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 56px;
    align-items: center;
}

/* Hero where the demo is the point: copy on top, the artefact full width
   beneath it, so the plan is big enough to actually read. */
.hero-stack { display: block; }

.hero h1 { margin-bottom: 18px; text-wrap: pretty; }
/* The ochre marker. box-decoration-break keeps each wrapped line's highlight
   self-contained instead of drawing one ragged stepped band across the break. */
.hero h1 .accent {
    background: linear-gradient(180deg, transparent 64%, var(--ochre) 64%, var(--ochre) 93%, transparent 93%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.hero-lead { font-size: 1.19rem; color: var(--g-600); margin-bottom: 30px; max-width: 32em; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }

.hero-note {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .93rem;
    color: var(--text-soft);
}
.hero-note svg { width: 17px; height: 17px; color: var(--ok); }

@media (max-width: 980px) {
    .hero { padding-top: 56px; }
    .hero-grid { grid-template-columns: 1fr; gap: 46px; }
}

/* --------------------------------------------------------------------------
   SIGNATURE — Sagskortet
   One sag, threaded from tilbud to faktura. Ochre marks only "here, now".
   -------------------------------------------------------------------------- */
.sagskort {
    background: var(--white);
    border: 1px solid var(--g-200);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.sk-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--g-100);
    background: linear-gradient(180deg, var(--white), var(--chalk));
}
.sk-nr {
    font-family: var(--mono);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: -.01em;
    color: var(--blue-deep);
    background: var(--blue-tint);
    padding: 5px 9px;
    border-radius: 6px;
    /* A sagsnummer broken across two lines is not a sagsnummer. */
    white-space: nowrap;
    flex-shrink: 0;
}
.sk-title {
    min-width: 0;
    font-weight: 700;
    font-size: .97rem;
    letter-spacing: -.015em;
    /* explicit: the card sits on the ink hero, so inheriting would make this
       white text on a white card */
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sk-state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-soft);
    background: var(--ochre-soft);
    border: 1px solid #F5DFB0;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.sk-state .pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ochre);
}

.sk-thread { padding: 8px 22px 4px; counter-reset: none; }

.sk-step {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 13px 0;
}
/* the thread itself */
.sk-step::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 30px;
    bottom: -4px;
    width: 2px;
    background: var(--g-200);
}
.sk-step:last-child::before { display: none; }
.sk-step.done::before { background: var(--blue); }
.sk-step.now::before {
    background: repeating-linear-gradient(180deg, var(--g-300) 0 4px, transparent 4px 9px);
}

.sk-mark {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--white);
    border: 2px solid var(--g-300);
    flex-shrink: 0;
}
.sk-mark svg { width: 12px; height: 12px; }
.sk-step.done .sk-mark { background: var(--blue); border-color: var(--blue); color: var(--white); }
.sk-step.now .sk-mark {
    border-color: var(--ochre);
    background: var(--ochre-soft);
    box-shadow: 0 0 0 4px rgba(255, 176, 32, .18);
}
.sk-step.now .sk-mark::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ochre);
}

.sk-body { min-width: 0; flex: 1; padding-top: 1px; }
.sk-body b {
    display: block;
    font-size: .93rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--ink);
}
.sk-step.todo .sk-body b { color: var(--g-400); }
.sk-meta {
    display: block;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: .79rem;
    font-weight: 500;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}
.sk-step.todo .sk-meta { color: var(--g-400); }

.sk-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 22px;
    border-top: 1px solid var(--g-100);
    background: var(--chalk);
}
.sk-foot .lbl { font-size: .82rem; font-weight: 600; color: var(--text-soft); }
.sk-foot .val {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* On a phone the head has no room for all three chips at full size. Keep the
   sagsnummer and the status, and let the address truncate — that is what the
   real app does too. */
@media (max-width: 460px) {
    .sk-head { gap: 9px; padding: 15px 16px; }
    .sk-nr { font-size: .75rem; padding: 4px 7px; }
    .sk-title { font-size: .89rem; }
    .sk-state { font-size: .75rem; padding: 3px 8px; }
    .sk-thread { padding-inline: 16px; }
    .sk-foot { padding: 13px 16px; }
    .sk-foot .lbl { font-size: .78rem; }
    .sk-foot .val { font-size: .86rem; }
}

/* --------------------------------------------------------------------------
   SIGNATURE — Tegningsanalyse
   A schematic plan on the left, the takeoff it produces on the right. The row
   fields are the real ones the analysis returns (kategori, label, mængde,
   enhed, konfidens) — inventing a prettier shape here would be lying about
   the product.

   Detections are marked in BLUE, not ochre. Ochre still means only "where the
   sag is right now"; spending it on a second meaning would flatten the signal.
   -------------------------------------------------------------------------- */
/* Full container width, not a hero side-column: a takeoff is the thing being
   demonstrated, and at half width the plan is too small to read. */
.hero-demo { max-width: 700px; margin-bottom: 30px; }
.hero-demo .hero-lead { margin-bottom: 22px; }

.takeoff {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    background: var(--white);
    border: 1px solid var(--g-200);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
@media (max-width: 720px) { .takeoff { grid-template-columns: minmax(0, 1fr); } }

.takeoff-plan {
    position: relative;
    padding: 18px;
    background:
        linear-gradient(var(--chalk-deep) 1px, transparent 1px) 0 0 / 100% 22px,
        linear-gradient(90deg, var(--chalk-deep) 1px, transparent 1px) 0 0 / 22px 100%,
        var(--chalk);
    border-right: 1px solid var(--g-100);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (max-width: 720px) { .takeoff-plan { border-right: 0; border-bottom: 1px solid var(--g-100); } }

.takeoff-file {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: .76rem;
    font-weight: 500;
    color: var(--g-600);
}
.takeoff-file svg { width: 14px; height: 14px; color: var(--blue-deep); }

.takeoff-plan svg.plan { width: 100%; height: auto; }

.takeoff-side { display: flex; flex-direction: column; min-width: 0; }

.takeoff-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--g-100);
    font-weight: 700;
    font-size: .93rem;
    letter-spacing: -.015em;
}
.takeoff-head .badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--blue-tint);
    color: var(--blue-deep);
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.takeoff-rows { padding: 4px 0; }

.tk-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto 54px;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
}
.tk-pin {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 600;
}
.tk-label { min-width: 0; }
.tk-label b {
    display: block;
    font-size: .89rem;
    font-weight: 600;
    letter-spacing: -.012em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-label span {
    display: block;
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--g-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-qty {
    font-family: var(--mono);
    font-weight: 600;
    font-size: .86rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Confidence, shown rather than hidden: the model is not always sure, and a
   takeoff you cannot sanity-check is worse than no takeoff. */
.tk-conf {
    height: 4px;
    border-radius: 2px;
    background: var(--g-200);
    overflow: hidden;
}
.tk-conf i { display: block; height: 100%; background: var(--blue); border-radius: 2px; }
.tk-conf.low i { background: var(--g-400); }

.takeoff-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 14px 20px;
    border-top: 1px solid var(--g-100);
    background: var(--chalk);
    font-size: .84rem;
    font-weight: 600;
    color: var(--text-soft);
}
.takeoff-foot .val {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 460px) {
    .tk-row { grid-template-columns: 20px minmax(0, 1fr) auto; padding-inline: 16px; }
    .tk-conf { display: none; }
    .takeoff-head, .takeoff-foot { padding-inline: 16px; }
}

/* --------------------------------------------------------------------------
   Device frames
   Pure CSS — no device mockup images. A PNG frame would be another 200 KB,
   would not adapt to dark surfaces, and would go soft on a retina screen.
   The screenshots inside are real product, so the frame should be the only
   thing that is drawn.
   -------------------------------------------------------------------------- */
.devices {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* --- MacBook ---------------------------------------------------------- */
.mac { width: 100%; }

.mac-screen {
    position: relative;
    background: var(--ink);
    border: 10px solid var(--ink);
    border-radius: 14px 14px 4px 4px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.mac-screen img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* The wedge under the lid: a lighter lip, then the desk-side base. */
.mac-base {
    position: relative;
    height: 12px;
    /* the base flares wider than the lid, but only by as much as the container
       gutter allows — at -3.2% it pushed past the viewport at 1024 and 1180 */
    margin: 0 -2%;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, #2A3547 0%, #1E2942 60%, #151C2B 100%);
    box-shadow: 0 10px 22px -10px rgba(16, 23, 40, .55);
}
/* the notch you push the lid open with */
.mac-base::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 92px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 0 0 6px 6px;
    background: rgba(0, 0, 0, .35);
}

/* --- iPhone ----------------------------------------------------------- */
.iphone {
    position: absolute;
    right: -8px;
    bottom: -26px;
    width: 23%;
    max-width: 210px;
    min-width: 132px;
    background: var(--white);
    border: 7px solid var(--ink);
    border-radius: 30px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .06) inset;
    overflow: hidden;
    /* status-bar strip so the island sits on white rather than on top of the
       screenshot's own heading */
    padding-top: 22px;
}
.iphone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0 0 23px 23px;
}
/* Dynamic Island. Sits over the screenshot, which is what a real one does. */
.iphone::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    width: 32%;
    height: 10px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--ink);
    z-index: 2;
}

@media (max-width: 640px) {
    /* On a phone the overlapping phone-in-a-phone reads as clutter and shrinks
       the screenshot that matters. Stack them instead. */
    .iphone {
        position: static;
        width: 58%;
        max-width: 240px;
        margin: 22px auto 0;
    }
    .mac-base { margin-inline: -1.5%; }
}

.devices-note {
    margin-top: 38px;
    font-size: .86rem;
    color: var(--text-soft);
    text-align: center;
}


/* --------------------------------------------------------------------------
   Trust strip — marquee of the integrations
   Names, not logos: we have no licence to third-party marks, and a wall of
   borrowed logos implies endorsements nobody gave us.
   -------------------------------------------------------------------------- */
.strip {
    padding: 30px 0 34px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.strip-label {
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--g-400);
    text-align: center;
}

.strip .strip-label { margin-bottom: 22px; }

.marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    /* fade the ends so items enter and leave rather than being cut off */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 52px;
    padding-right: 52px;
    animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--g-400);
    white-space: nowrap;
    transition: color .2s ease;
}
.marquee-item:hover { color: var(--ink-soft); }

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    /* No crawling text. Show one static, wrapped row instead. */
    .marquee { -webkit-mask-image: none; mask-image: none; }
    .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 14px 32px; }
    .marquee-track[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   Sagens gang — the flow strip
   -------------------------------------------------------------------------- */
.flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--white);
    overflow: hidden;
}
.flow-step {
    position: relative;
    padding: 26px 22px;
    border-right: 1px solid var(--g-100);
}
.flow-step:last-child { border-right: 0; }
.flow-step .k {
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--g-400);
}
.flow-step h3 { margin: 8px 0 6px; font-size: 1.04rem; }
.flow-step p { font-size: .9rem; color: var(--text-soft); line-height: 1.5; }
.flow-step::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-top: 2px solid var(--g-300);
    border-right: 2px solid var(--g-300);
    transform: rotate(45deg);
    background: var(--white);
    z-index: 1;
}
.flow-step:last-child::after { display: none; }

@media (max-width: 1000px) {
    .flow { grid-template-columns: repeat(2, 1fr); }
    .flow-step::after { display: none; }
    .flow-step { border-bottom: 1px solid var(--g-100); }
}
@media (max-width: 560px) {
    .flow { grid-template-columns: 1fr; }
    .flow-step { border-right: 0; }
}

/* --------------------------------------------------------------------------
   Problem / solution
   -------------------------------------------------------------------------- */
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .ps-grid { grid-template-columns: 1fr; } }

.ps-card {
    padding: 34px;
    border-radius: var(--r-lg);
    border: 1px solid var(--g-200);
    background: var(--white);
}
.ps-card.solution { border-color: #C7D6FF; background: linear-gradient(180deg, var(--blue-tint), var(--white) 62%); }
.ps-card h2 { font-size: 1.42rem; margin-bottom: 20px; }
.ps-tag {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--g-500);
}
.ps-card.solution .ps-tag { color: var(--blue-deep); }
.ps-list li {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--g-100);
    font-size: .99rem;
}
.ps-list li:first-child { border-top: 0; }
.ps-list svg { width: 18px; height: 18px; margin-top: 4px; }
.ico-x { color: var(--g-400); }
.ico-check { color: var(--blue); }

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.cards.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px) { .cards, .cards.two { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards, .cards.two { grid-template-columns: 1fr; } }

.card {
    padding: 28px;
    background: var(--white);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.card { color: inherit; display: block; }
a.card:hover, .card.hoverable:hover {
    border-color: var(--blue);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    color: inherit;
}
.card-ico {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 11px;
    background: var(--blue-tint);
    color: var(--blue-deep);
}
.card-ico svg { width: 21px; height: 21px; }
.card h3 { margin-bottom: 9px; }
.card p { font-size: .96rem; color: var(--text-soft); line-height: 1.58; }

/* Card sitting on .sec-ink */
.card-on-ink {
    background: transparent;
    border-color: rgba(255, 255, 255, .14);
}
.card-on-ink h3 { color: var(--white); }
.card-on-ink p { color: rgba(255, 255, 255, .62); }

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--blue-hover);
}
.card-link svg { width: 15px; height: 15px; transition: transform .2s ease; }
a.card:hover .card-link svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Integrations
   -------------------------------------------------------------------------- */
.int-group + .int-group { margin-top: 44px; }
.int-group > h3 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 1.06rem;
}
.int-group > h3 .count {
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 500;
    color: var(--g-400);
}

.int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .int-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .int-grid { grid-template-columns: 1fr; } }

.int {
    padding: 22px;
    background: var(--white);
    border: 1px solid var(--g-200);
    border-radius: var(--r);
}
.int-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.015em;
}
.int-name .mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--chalk-deep);
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 600;
}
.int p { font-size: .92rem; color: var(--text-soft); line-height: 1.55; }
.int ul { margin-top: 12px; }
.int ul li {
    display: flex;
    gap: 9px;
    padding: 4px 0;
    font-size: .87rem;
    color: var(--g-600);
}
.int ul svg { width: 15px; height: 15px; margin-top: 4px; color: var(--blue); }

/* --------------------------------------------------------------------------
   Feature detail rows (funktioner page)
   -------------------------------------------------------------------------- */
.frow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    padding: 56px 0;
    border-top: 1px solid var(--line);
}
.frow:first-of-type { border-top: 0; }
.frow.flip .frow-media { order: -1; }
.frow h2 { font-size: 1.7rem; margin-bottom: 14px; }
.frow p { color: var(--text-soft); }
.frow-list { margin-top: 18px; }
.frow-list li {
    display: flex;
    gap: 11px;
    padding: 7px 0;
    font-size: .97rem;
}
.frow-list svg { width: 17px; height: 17px; margin-top: 5px; color: var(--blue); }

@media (max-width: 900px) {
    /* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr) and refuses
       to shrink below its content's min-content width, which let the panel push
       the page into horizontal scroll at 320px. */
    .frow { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 0; }
    .frow.flip .frow-media { order: 0; }
}

/* Small faux-UI panel used beside feature rows */
.panel {
    background: var(--white);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.panel-top {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--g-100);
    background: var(--chalk);
    font-size: .84rem;
    font-weight: 700;
    color: var(--ink-soft);
}
.panel-top .num { margin-left: auto; font-size: .8rem; color: var(--text-soft); font-weight: 500; }
.prow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--g-100);
    font-size: .89rem;
}
.prow:last-child { border-bottom: 0; }
/* flex: 1 1 0 with min-width:0 — without the explicit min-width a flex item's
   automatic minimum size is its content, so the ellipsis never engages and the
   row grows past the panel instead of truncating. */
.prow .t { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .v {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 500;
    font-size: .84rem;
    color: var(--g-600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tagx {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: var(--blue-tint);
    color: var(--blue-deep);
}
.tagx.warn { background: var(--ochre-soft); color: #8A5B00; }
.tagx.ok { background: #E2F7F1; color: #0A7A5E; }

/* --------------------------------------------------------------------------
   Pricing (value, not numbers)
   -------------------------------------------------------------------------- */
.price-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 0;
    border: 1px solid var(--g-200);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--white);
}
@media (max-width: 900px) { .price-panel { grid-template-columns: 1fr; } }

.price-main { padding: 40px; }
.price-main h2 { font-size: 1.6rem; margin-bottom: 12px; }
.price-incl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 22px;
    margin-top: 24px;
}
@media (max-width: 620px) { .price-incl { grid-template-columns: 1fr; } }
.price-incl li {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    font-size: .95rem;
}
.price-incl svg { width: 16px; height: 16px; margin-top: 5px; color: var(--blue); }

.price-side {
    padding: 40px;
    background: var(--ink);
    color: rgba(255, 255, 255, .78);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.price-side h3 { color: var(--white); font-size: 1.28rem; margin-bottom: 10px; }
.price-side p { font-size: .97rem; }
.price-side .btn { margin-top: 22px; }
.price-side .fineprint {
    margin-top: 16px;
    font-size: .84rem;
    color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Plans
   Note: the "Mest valgt" badge is BLUE, not ochre, on purpose. Ochre marks
   where a sag is right now; making it also mean "recommended plan" would be
   its third unrelated job and the signal stops meaning anything.
   -------------------------------------------------------------------------- */
.plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
@media (max-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr); } }

.plan {
    position: relative;
    padding: 34px;
    background: var(--white);
    border: 1px solid var(--g-200);
    border-radius: var(--r-xl);
}
.plan.featured {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue), var(--shadow-lg);
}
.plan-badge {
    position: absolute;
    top: -12px;
    left: 34px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--blue);
    color: var(--white);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.plan-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.plan-for { margin-top: 4px; font-size: .93rem; color: var(--text-soft); }

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 22px 0 4px;
    flex-wrap: wrap;
}
.plan-amount {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 2.5rem;
    letter-spacing: -.045em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
/* The mono space glyph is full-width, so a literal "269 kr" renders with a
   distracting gap. Set the currency as its own element and control the space. */
.plan-cur {
    font-size: .48em;
    margin-left: .22em;
    letter-spacing: 0;
}
.plan-unit { font-size: .93rem; font-weight: 600; color: var(--text-soft); }
.plan-note { font-size: .87rem; color: var(--text-soft); }
.plan .btn { width: 100%; margin: 24px 0 6px; }

.plan-list { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--g-100); }
.plan-list li {
    display: flex;
    gap: 11px;
    padding: 7px 0;
    font-size: .95rem;
}
.plan-list svg { width: 16px; height: 16px; margin-top: 5px; color: var(--blue); }
.plan-list li.muted { color: var(--g-400); }
.plan-list li.muted svg { color: var(--g-300); }
.plan-list .head {
    display: block;
    margin-bottom: 6px;
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--g-400);
}

/* Credit packs — one-time purchases, so visually distinct from the plans */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 780px) { .packs { grid-template-columns: minmax(0, 1fr); } }

.pack {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 20px 22px;
    background: var(--white);
    border: 1px solid var(--g-200);
    border-radius: var(--r);
}
.pack-name { font-weight: 700; font-size: 1rem; }
.pack-pages {
    display: block;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-soft);
}
.pack-price {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.claim-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}
@media (max-width: 780px) { .claim-row { grid-template-columns: 1fr; } }
.claim {
    padding: 24px;
    border: 1px solid var(--g-200);
    border-radius: var(--r);
    background: var(--white);
}
.claim h3 { font-size: 1.02rem; margin-bottom: 7px; }
.claim p { font-size: .92rem; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   Contact cards
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
    padding: 30px;
    background: var(--white);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    text-align: center;
}
.contact-card .ico {
    width: 46px;
    height: 46px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--blue-tint);
    color: var(--blue-deep);
}
.contact-card .ico svg { width: 22px; height: 22px; }
.contact-card h2 { font-size: 1.12rem; margin-bottom: 8px; }
.contact-card p { font-size: .93rem; color: var(--text-soft); margin-bottom: 14px; }
.contact-card .big {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 1rem;
    color: var(--blue-hover);
    font-variant-numeric: tabular-nums;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
@media (max-width: 820px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
.info-item h3 {
    font-size: .78rem;
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--g-400);
    margin-bottom: 8px;
}
.info-item p, .info-item a { font-size: .99rem; color: var(--ink); }
.info-item a:hover { color: var(--blue-hover); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 4px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.faq-q svg {
    width: 19px;
    height: 19px;
    margin-left: auto;
    color: var(--g-400);
    transition: transform .22s ease;
}
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--blue); }
.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .26s ease;
}
.faq-a > div { overflow: hidden; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p {
    padding: 0 4px 22px;
    color: var(--text-soft);
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.closing {
    position: relative;
    padding: 92px 0;
    background: var(--ink);
    color: rgba(255, 255, 255, .74);
    text-align: center;
    overflow: hidden;
}
.closing::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(760px 380px at 50% 0%, rgba(93, 135, 255, .30) 0%, transparent 70%);
}
.closing .container { position: relative; z-index: 1; }
.closing h2 { color: var(--white); margin-bottom: 16px; }
.closing h2 .accent { color: var(--ochre); }
.closing p { font-size: 1.1rem; max-width: 46ch; margin-inline: auto; margin-bottom: 30px; }
.closing .hero-actions { justify-content: center; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
    padding: 66px 0 54px;
    background: linear-gradient(180deg, var(--chalk), var(--white));
    border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.05rem); margin-bottom: 16px; }
.page-hero .lead { max-width: 62ch; }

/* --------------------------------------------------------------------------
   Legal prose
   -------------------------------------------------------------------------- */
.prose { max-width: 760px; font-size: 1rem; }
.prose h2 {
    font-size: 1.28rem;
    margin: 40px 0 12px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--g-600); }
.prose ul { margin: 10px 0 16px; }
.prose ul li {
    position: relative;
    padding: 5px 0 5px 20px;
}
.prose ul li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--g-300);
}
.prose .updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--chalk);
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-soft);
}
.callout {
    margin: 22px 0;
    padding: 18px 20px;
    border-left: 3px solid var(--ochre);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--ochre-soft);
    font-size: .95rem;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
    padding: 66px 0 30px;
    background: var(--ink);
    color: rgba(255, 255, 255, .62);
    font-size: .93rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 40px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand .brand { color: var(--white); margin-bottom: 14px; }
.footer-brand .brand:hover { color: var(--white); }
.footer-brand > p { max-width: 34ch; margin-bottom: 20px; }

.footer-contact { display: grid; gap: 9px; font-size: .89rem; }
.footer-contact div { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact svg { width: 15px; height: 15px; margin-top: 4px; color: var(--g-500); }
.footer-contact a { color: rgba(255, 255, 255, .62); }
.footer-contact a:hover { color: var(--white); }

.footer h4 {
    margin-bottom: 15px;
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.footer-links li { padding: 5px 0; }
.footer-links a { color: rgba(255, 255, 255, .68); }
.footer-links a:hover { color: var(--white); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .86rem;
    color: rgba(255, 255, 255, .42);
}
.footer-bottom .right { margin-left: auto; display: flex; gap: 18px; }
.footer-bottom a { color: rgba(255, 255, 255, .5); }
.footer-bottom a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   Scroll reveal — the sag thread assembling itself, once, on entry

   Scoped under .js (set by an inline script in the document head) so that with
   JavaScript off the content is simply visible rather than stuck at opacity 0.
   -------------------------------------------------------------------------- */
.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}

/* Utilities.
   These exist so no page needs a style="" attribute — the Content-Security-Policy
   the API sends for wwwroot uses a bare style-src 'self', which blocks inline
   style attributes. Reach for a utility here rather than relaxing that policy. */
.mt-0 { margin-top: 0; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.text-soft { color: var(--text-soft); }
.center { text-align: center; }
.stack-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.stack-cta.center { justify-content: center; }
.sec-cta { margin-top: 32px; }