/* Self-hosted from Google Fonts (SIL Open Font License), latin and latin-ext only.
   latin-ext carries ğ, ş and İ; ç, ö, ü and ı are in latin. */
/* Bricolage Grotesque latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* dppeu.cloud (DDPP)
   DDPP palette: navy is the only action colour, gold its accent; ink and paper do the rest.
   Bricolage Grotesque everywhere, JetBrains Mono only for real identifiers
   (GTINs, lots, links, the machine-readable line). */

:root {
    --ink: #0b1b33;
    --ink-2: #3b4a63;
    --muted: #56657c;
    --paper: #f5f7fa;
    --white: #ffffff;
    /* DDPP's logo: navy for actions and the brand, gold as an accent only (never text on
       light backgrounds, where it lacks contrast). */
    --navy: #0c2a70;
    --navy-deep: #081d4f;
    --navy-soft: #e6ebf6;
    --gold: #f0b708;
    --gold-deep: #d9a200;
    --gold-soft: #fdf3d0;
    --line: rgba(11, 27, 51, 0.10);
    --line-strong: rgba(11, 27, 51, 0.22);
    --denim: #243b5e;
    --font: 'Bricolage Grotesque', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --wrap: 1180px;
    --gutter: clamp(16px, 4vw, 32px);
    --page-pad: clamp(20px, 5vw, 64px);
    --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    color-scheme: light;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 84px;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

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

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

p { margin: 0; text-wrap: pretty; }
code { font-family: var(--mono); font-size: 0.92em; font-weight: 500; }

h1, h2, h3 {
    margin: 0;
    line-height: 1.08;
    text-wrap: balance;
}
h1 {
    font-size: clamp(2.35rem, 1.2rem + 4vw, 4.5rem);
    font-weight: 770;
    font-stretch: 86%;
    letter-spacing: -0.032em;
    line-height: 0.98;
}
h2 {
    font-size: clamp(1.9rem, 1.3rem + 2.1vw, 3rem);
    font-weight: 740;
    font-stretch: 88%;
    letter-spacing: -0.026em;
}
h3 {
    font-size: 1.28rem;
    font-weight: 680;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 50;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--white);
    font-weight: 650;
}
.skip:focus { top: 12px; }

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---- Buttons --------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-deep); color: var(--white); }
.btn-quiet { border-color: rgba(12, 42, 112, 0.35); color: var(--navy); }
.btn-quiet:hover { border-color: var(--navy); color: var(--navy-deep); }
.btn-small {
    min-height: 38px;
    padding: 0 14px;
    border-color: rgba(12, 42, 112, 0.35);
    border-radius: 10px;
    color: var(--navy);
    font-size: 0.92rem;
}
.btn-small:hover { border-color: var(--navy); }
.btn-on-dark { background: var(--gold); color: var(--navy); }
.btn-on-dark:hover { background: var(--gold-deep); color: var(--navy-deep); }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.45); color: var(--white); }
.btn-outline-light:hover { border-color: var(--white); color: var(--white); }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---- Language hint ---------------------------------------------------- */

.hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    padding: 9px 16px;
    background: var(--navy-soft);
    font-size: 0.93rem;
}
.hint[hidden] { display: none; }
.hint-link { font-weight: 650; }
.hint-close {
    padding: 2px 8px;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

/* ---- Header ---------------------------------------------------------- */

.top {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: rgba(245, 247, 250, 0.9);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
}
.top-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 64px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}
.brand img { display: block; height: 32px; width: auto; }
.brand:hover { color: var(--ink); }

.top-nav {
    display: flex;
    gap: 24px;
    margin-left: auto;
}
.top-nav a {
    color: var(--ink-2);
    font-size: 0.95rem;
    text-decoration: none;
}
.top-nav a:hover { color: var(--ink); text-decoration: underline; }
.top-spacer { margin-left: auto; }

.lang { position: relative; }
.lang summary {
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 650;
    list-style: none;
    cursor: pointer;
}
.lang summary::-webkit-details-marker { display: none; }
.lang ul {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 18px 36px -18px rgba(11, 27, 51, 0.35);
    list-style: none;
}
.lang li a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
}
.lang li a:hover { background: var(--paper); }
.lang li a[aria-current] { font-weight: 700; }

/* ---- Hero: a passport's data page ------------------------------------ */

.hero { padding: clamp(18px, 3.5vw, 44px) 0 clamp(40px, 6vw, 72px); }

.page {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 1px 0 rgba(11, 27, 51, 0.05), 0 36px 64px -48px rgba(11, 27, 51, 0.45);
}
/* The guilloche, as printed on real passport pages: behind the lower half,
   fading out towards the headline. */
.page::before {
    content: '';
    position: absolute;
    inset: 38% 0 0 0;
    background: url('img/guilloche.svg') center / 100% 100% no-repeat;
    opacity: 0.12;
    -webkit-mask-image: linear-gradient(to top, #000 45%, transparent);
    mask-image: linear-gradient(to top, #000 45%, transparent);
    pointer-events: none;
}

.page-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(28px, 5vw, 64px) var(--page-pad) clamp(24px, 3vw, 36px);
}

.hero-copy h1 { max-width: 14ch; }
/* The logo's gold rule, once, under the headline. */
.hero-copy h1::after {
    content: "";
    display: block;
    width: 88px;
    height: 6px;
    margin-top: 22px;
    border-radius: 3px;
    background: var(--gold);
}
.lead {
    max-width: 34em;
    margin-top: 24px;
    color: var(--ink-2);
    font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem);
    line-height: 1.55;
}
.espr {
    margin-top: 14px;
    color: var(--ink-2);
    font-size: 0.95rem;
    font-weight: 560;
}
.hero-copy .actions { margin-top: 30px; }
.platforms {
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.9rem;
}

.hero-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.qr-hint {
    max-width: 320px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
    text-align: center;
}
.qr-hint a { display: block; margin-top: 2px; font-weight: 600; }

/* The phone */
.device { width: min(100%, 300px); }
.phone {
    aspect-ratio: 300 / 610;
    padding: 10px;
    border-radius: 46px;
    background: #0d182a;
    box-shadow: inset 0 0 0 1.5px #2b3b57, 0 44px 70px -42px rgba(11, 27, 51, 0.7);
}
.screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 36px;
    background: var(--denim);
}

/* Camera view: the inside of a denim jacket */
.cam {
    position: absolute;
    inset: 0;
    background-color: var(--denim);
    background-image:
        radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.10), transparent 62%),
        repeating-linear-gradient(55deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 5px),
        repeating-linear-gradient(-35deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 4px);
}
.cam-title {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
    font-weight: 650;
    text-align: center;
}
.label {
    position: absolute;
    top: 13%;
    left: 50%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 78%;
    padding: 12px 12px 12px 14px;
    border-radius: 3px;
    background-color: #fbfbf9;
    background-image: repeating-linear-gradient(0deg, rgba(11, 27, 51, 0.035) 0 1px, transparent 1px 3px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 12px 20px -10px rgba(0, 0, 0, 0.55);
    transform: translateX(-50%) rotate(-2deg);
}
/* the stitching */
.label::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(11, 27, 51, 0.2);
    border-radius: 2px;
    pointer-events: none;
}
.label-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--ink);
    font-size: 0.64rem;
    font-weight: 580;
    line-height: 1.25;
}
.label-qr {
    width: 104px;
    padding: 6px;
    background: var(--white);
    color: var(--ink);
}
.qr { width: 100%; height: auto; }

.finder {
    position: absolute;
    top: 9%;
    left: 7%;
    right: 7%;
    height: 31%;
}
.finder i {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid #9cc0ff;
}
.finder i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.finder i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.finder i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.finder i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.scanline {
    position: absolute;
    top: 12%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #9cc0ff, transparent);
    opacity: 0;
}
.found {
    position: absolute;
    top: 41.5%;
    left: 50%;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 650;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
}

/* The passport, as a bottom sheet */
.sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56%;
    padding: 10px 16px 0;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    background: var(--white);
    box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, 0.5);
}
.grip {
    width: 36px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 2px;
    background: #d3d9e3;
}
.sheet-kind {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 620;
}
.chip {
    padding: 1px 7px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 0.58rem;
}
.sheet-product {
    margin-top: 3px;
    font-size: 1.1rem;
    font-weight: 770;
    font-stretch: 90%;
    letter-spacing: -0.012em;
    line-height: 1.15;
}
.sheet-maker { color: var(--ink-2); font-size: 0.66rem; }
.sheet-ids {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.6rem;
}
.sheet-ids code { color: var(--ink); font-size: 0.6rem; }
.sheet-rows { margin: 7px 0 0; }
.sheet-rows div {
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid var(--line);
    font-size: 0.63rem;
    line-height: 1.3;
}
.sheet-rows dt { color: var(--muted); }
.sheet-rows dd { margin: 0; font-weight: 540; }
.sheet-h {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 620;
}
.sheet-events {
    display: grid;
    gap: 2px;
    margin: 3px 0 0;
    padding: 0;
    list-style: none;
}
.sheet-events li { display: flex; gap: 8px; font-size: 0.63rem; }
.sheet-events span { min-width: 66px; color: var(--muted); }
.sheet-save {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    padding: 8px;
    border-radius: 10px;
    background: var(--navy);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 650;
    text-align: center;
    /* anything the sheet cannot fit fades out under the button */
    box-shadow: 0 -16px 14px 6px var(--white);
}

/* The one moment of motion on the page: the scanner locks on, the passport
   slides up. Without motion the finished state is simply there. */
@media (prefers-reduced-motion: no-preference) {
    .finder { animation: zx-finder 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }
    .finder i { animation: zx-corner 0.25s ease 1s both; }
    .scanline { animation: zx-scan 0.9s ease-in-out 0.45s both; }
    .found { animation: zx-found 1.5s ease 1.15s both; }
    .sheet { animation: zx-sheet 0.8s cubic-bezier(0.2, 0.9, 0.25, 1) 1.75s both; }

    @keyframes zx-finder {
        from { opacity: 0; transform: scale(1.16); }
        to { opacity: 1; transform: scale(1); }
    }
    @keyframes zx-corner {
        from { border-color: rgba(255, 255, 255, 0.95); }
        to { border-color: #9cc0ff; }
    }
    @keyframes zx-scan {
        0% { top: 12%; opacity: 0; }
        15% { opacity: 1; }
        85% { opacity: 1; }
        100% { top: 38%; opacity: 0; }
    }
    @keyframes zx-found {
        0% { opacity: 0; transform: translate(-50%, 6px); }
        15% { opacity: 1; transform: translate(-50%, 0); }
        75% { opacity: 1; }
        100% { opacity: 0; transform: translate(-50%, 0); }
    }
    @keyframes zx-sheet {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    .qa-icon::after { transition: transform 0.2s ease; }
}

/* The machine-readable line: two rows of 44 characters, spread across the
   page like the MRZ at the foot of a passport's data page. */
.mrz {
    position: relative;
    display: grid;
    gap: 0.2em;
    padding: clamp(14px, 2.4vw, 22px) var(--page-pad) clamp(18px, 3vw, 28px);
    border-top: 1px solid var(--line);
    color: rgba(11, 27, 51, 0.72);
    font-family: var(--mono);
    font-size: clamp(8px, 1.9vw, 23px);
    font-weight: 500;
    line-height: 1.25;
}
.mrz-line { display: flex; justify-content: space-between; }

/* ---- Two ways in ----------------------------------------------------- */

.ways { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); }
.ways h2 { max-width: 18ch; }
.ways-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(28px, 5vw, 64px);
    margin-top: 40px;
}
/* The makers are who the product is built for, so their column carries the
   heavy rule; people scanning a code get the light one. */
.way { padding-top: 22px; border-top: 3px solid var(--ink); }
.way-scanners { border-top: 1px solid var(--line-strong); padding-top: 24px; }
.way h3 { font-size: 1.45rem; }
.way-lead { margin-top: 10px; color: var(--ink-2); }
.ticks {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
    content: '';
    position: absolute;
    top: 0.5em;
    left: 1px;
    width: 11px;
    height: 12px;
    background: var(--ink-2);
    clip-path: var(--hex);
}
.way-scanners .ticks li::before { background: var(--line-strong); }
.text-link { display: inline-block; margin-top: 22px; font-weight: 650; }

/* ---- How it works: a real sequence, so it is numbered ----------------- */

.how {
    padding: clamp(56px, 8vw, 100px) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--white);
}
.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
}
.steps::before {
    content: '';
    position: absolute;
    top: 31px;
    left: 28px;
    /* ends at the last hexagon: one column (of four, three 32px gaps) less 28px */
    right: calc((100% - 96px) / 4 - 28px);
    border-top: 1.5px solid var(--line-strong);
}
.step { position: relative; }
.step-mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 62px;
    background: var(--ink);
    clip-path: var(--hex);
}
.step-mark span {
    color: var(--white);
    font-size: 1.32rem;
    font-weight: 780;
}
.step h3 { margin-top: 18px; }
.step p { margin-top: 8px; color: var(--ink-2); font-size: 1rem; }

/* ---- Dates ----------------------------------------------------------- */

.dates { padding: clamp(56px, 8vw, 104px) 0; }
.dates-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 16px 40px;
}
.dates-head p { max-width: 34em; color: var(--ink-2); }
.timeline {
    margin: 36px 0 0;
    padding: 0;
    border-top: 1px solid var(--line-strong);
    list-style: none;
}
.tl {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr) 8.5rem;
    gap: 24px;
    padding: 20px 0 22px;
    border-bottom: 1px solid var(--line);
}
.tl-when {
    font-size: 1.02rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tl-body h3 { font-size: 1.12rem; }
.tl-body p { max-width: 62ch; margin-top: 4px; color: var(--ink-2); font-size: 0.98rem; }
.tl-src { display: inline-block; margin-top: 6px; font-size: 0.88rem; }
.tl-status { text-align: right; }
/* Certainty is drawn with the border: filled for what is in force or live,
   a solid outline for adopted law that applies later, dashed for estimates. */
.tl-status span {
    display: inline-block;
    padding: 3px 11px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 650;
    white-space: nowrap;
}
.tl-live .tl-status span,
.tl-in_force .tl-status span { background: var(--ink); color: var(--white); }
.tl-adopted .tl-status span { background: var(--white); }
.tl-expected .tl-status span { border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); }
.tl-expected .tl-when { color: var(--ink-2); font-weight: 620; }
.dates-note { max-width: 72ch; margin-top: 18px; color: var(--muted); font-size: 0.88rem; }

/* ---- Built to stay readable: a spec sheet, not cards ------------------ */

.built {
    padding: clamp(56px, 8vw, 100px) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--white);
}
.specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 40px 0 0;
    border-top: 1px solid var(--line-strong);
}
.spec { padding: 22px 24px 24px 0; border-bottom: 1px solid var(--line); }
.spec:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid var(--line); }
.spec dt { font-size: 1.1rem; font-weight: 700; }
.spec dd { margin: 6px 0 0; color: var(--ink-2); font-size: 0.98rem; }

/* ---- Questions ------------------------------------------------------- */

.faq { padding: clamp(56px, 8vw, 104px) 0; }
.faq-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 24px 56px;
}
.qas { border-top: 1px solid var(--line-strong); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--navy-deep); }
.qa-icon {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 0.3em;
}
.qa-icon::before,
.qa-icon::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
}
.qa-icon::after { transform: rotate(90deg); }
.qa[open] .qa-icon::after { transform: rotate(0deg); }
.qa p { max-width: 62ch; padding: 0 0 20px; color: var(--ink-2); }

/* ---- Closing call ---------------------------------------------------- */

.cta {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 8vw, 96px) 0;
    background: var(--navy);
    color: var(--white);
}
.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('img/guilloche.svg') center / 100% 100% no-repeat;
    opacity: 0.1;
    filter: brightness(0) invert(1);
    pointer-events: none;
}
.cta-inner { position: relative; }
.cta h2 { max-width: 18ch; }
.cta p { max-width: 40em; margin-top: 14px; color: rgba(255, 255, 255, 0.8); }
.cta .actions { margin-top: 28px; }
.cta :focus-visible { outline-color: var(--white); }

/* ---- Footer ---------------------------------------------------------- */

.foot { padding: 44px 0 52px; color: var(--ink-2); font-size: 0.9rem; }
.foot-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 48px;
}
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.foot-text { grid-column: 1; display: grid; gap: 4px; max-width: 60ch; }
.foot-links,
.foot-langs { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links { grid-column: 2; grid-row: 1 / span 2; align-content: start; justify-content: flex-end; max-width: 420px; }
.foot-links a,
.foot-langs a { color: var(--ink-2); }
.foot-links a:hover,
.foot-langs a:hover { color: var(--navy-deep); }
.foot-langs,
.foot-copy { grid-column: 1; }
.foot-copy { color: var(--muted); }

/* ---- Example passport ------------------------------------------------ */

.passport-main {
    max-width: 42rem;
    margin: 0 auto;
    padding: 24px var(--gutter) 64px;
}
.example-banner {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--navy-soft);
    font-size: 0.93rem;
}
.passport {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: var(--white);
}
.passport-head {
    position: relative;
    padding: 26px 22px 22px;
    border-bottom: 1px solid var(--line);
}
.passport-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('img/guilloche.svg') center / 100% 100% no-repeat;
    opacity: 0.09;
    pointer-events: none;
}
.passport-kind { position: relative; color: var(--muted); font-size: 0.86rem; font-weight: 620; }
.passport-head h1 {
    position: relative;
    margin-top: 6px;
    font-size: clamp(2rem, 1.5rem + 2vw, 2.6rem);
}
.passport-maker { position: relative; margin-top: 10px; color: var(--ink-2); }
.passport-sec { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.passport-sec:last-child { border-bottom: 0; }
.passport-sec h2 {
    font-size: 1.04rem;
    font-weight: 700;
    font-stretch: 100%;
    letter-spacing: 0;
}
.passport-sec > p { margin-top: 8px; color: var(--ink-2); }
.kv { margin: 10px 0 0; }
.kv div {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}
.kv div:first-child { border-top: 0; padding-top: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.wrap-any { overflow-wrap: anywhere; }
.docs { margin: 10px 0 0; padding-left: 20px; color: var(--ink-2); }
.events { margin: 10px 0 0; padding: 0; list-style: none; }
.events li {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0 12px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}
.events li:first-child { border-top: 0; padding-top: 0; }
.ev-when { grid-row: span 2; color: var(--muted); font-variant-numeric: tabular-nums; }
.ev-what { font-weight: 650; }
.ev-where { color: var(--ink-2); font-size: 0.93rem; }
.passport-locked { background: repeating-linear-gradient(135deg, rgba(11, 27, 51, 0.035) 0 8px, transparent 8px 16px); }
.passport-locked h2 { display: flex; align-items: center; gap: 8px; }
.passport-locked h2::before {
    content: '';
    width: 14px;
    height: 16px;
    background: var(--ink-2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 1 1 8 0v2h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1zm2 0h4V5a2 2 0 1 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 1 1 8 0v2h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1zm2 0h4V5a2 2 0 1 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.passport-back { margin-top: 28px; text-align: center; }

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

.notfound { max-width: 42rem; margin: 0 auto; padding: 96px var(--gutter) 120px; }
.notfound p { margin-top: 14px; color: var(--ink-2); }
.notfound-langs { display: grid; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }

/* ---- Smaller screens ------------------------------------------------- */

@media (max-width: 980px) {
    .top-nav { display: none; }
    .lang { margin-left: auto; }
    .page-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-copy h1 { max-width: 16ch; }
    .ways-grid { grid-template-columns: minmax(0, 1fr); }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .steps::before { display: none; }
    .dates-head { grid-template-columns: minmax(0, 1fr); }
    .tl { grid-template-columns: 10.5rem minmax(0, 1fr); gap: 8px 24px; }
    .tl-status { grid-column: 2; grid-row: 1; text-align: left; }
    .tl-body { grid-column: 2; }
    .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spec:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
    .spec:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--line); }
    .faq-inner { grid-template-columns: minmax(0, 1fr); }
    .foot-inner { grid-template-columns: minmax(0, 1fr); }
    .foot-links { grid-column: 1; grid-row: auto; justify-content: flex-start; max-width: none; }
}

@media (max-width: 640px) {
    body { font-size: 1rem; }
    .top-start { display: none; }
    .top-inner { height: 58px; }
    .page { border-radius: 16px; }
    .hero-copy .actions .btn { flex: 1 1 100%; }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; }
    .step-mark { grid-row: span 2; }
    .step h3 { margin-top: 4px; }
    .tl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .tl-when { grid-row: 1; }
    .tl-status { grid-column: 1; grid-row: 2; }
    .tl-body { grid-column: 1; }
    .specs { grid-template-columns: minmax(0, 1fr); }
    .spec:nth-child(n) { padding-left: 0; border-left: 0; }
    .cta .actions .btn { flex: 1 1 100%; }
    .kv div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .events li { grid-template-columns: minmax(0, 1fr); }
    .ev-when { grid-row: auto; }
}

/* ---- Legal pages (src/legal/{lang}/*.md) ------------------------------- */

.doc { padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 8vw, 96px); }
.doc-body { max-width: 780px; }
.doc-body h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.doc-meta { margin: 0 0 36px; color: var(--muted); }
.doc-body h2 {
    margin: 40px 0 12px;
    font-size: 1.3rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    scroll-margin-top: 96px;
}
.doc-body p,
.doc-body li { max-width: 70ch; color: var(--ink-2); font-size: 1.02rem; line-height: 1.65; }
.doc-body p { margin: 0 0 14px; }
.doc-body ul,
.doc-body ol { margin: 0 0 16px; padding-left: 1.3em; }
.doc-body li { margin: 6px 0; }
.doc-body a { color: var(--navy); text-underline-offset: 2px; overflow-wrap: anywhere; }
.doc-body strong { color: var(--ink); font-weight: 650; }