/* Colours mirror frontend/theme/tokens.ts (graphite on black, silver text, petrol accent "blue" option).
   Fonts are self-hosted (Inter, Viga: SIL OFL, see assets/fonts). No third-party requests. */
@font-face { font-family: Inter; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/Inter_400Regular.ttf") format("truetype"); }
@font-face { font-family: Inter; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/Inter_500Medium.ttf") format("truetype"); }
@font-face { font-family: Inter; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/Inter_600SemiBold.ttf") format("truetype"); }
/* Metric-matched local fallback so the swap to Inter does not shift the layout (CLS). Values are the usual Inter-over-Arial overrides. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; }
/* Ionicons (MIT, the icon font the app uses), subset to the ten glyphs of the sample profile and the setup wizard. See assets/fonts/LICENSE-Ionicons-MIT.txt. */
@font-face { font-family: Ionicons; font-weight: 400; font-style: normal; font-display: block; src: url("/assets/fonts/Ionicons-subset.ttf") format("truetype"); }
@font-face { font-family: Viga; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/Viga-Regular.ttf") format("truetype"); }

:root {
  --bg: #000000; --backdrop: #080D11; --surface: #13191D; --raised: #1C2429; --soft: #223036;
  --border: #35434B; --control-border: #96A5AF;
  --text: #F1F5F7; --muted: #C3CDD3;
  --accent: #7FD9E2; --accent-pressed: #6AC5D0; --accent-soft: #12313B; --glow: #16B6C5;
  --fill: #075D73; --fill-pressed: #033F55; --on-fill: #F1F5F7;
  --warn-bg: #2b2208; --warn-text: #f7d58b; --focus: #7FD9E2;
  --glass: rgba(28, 36, 41, .55); --hair: rgba(255, 255, 255, .14); --numeral: #6F8590;
  --header-h: 4rem; --hero-top: max(var(--header-h), var(--space-3));
  --card-w: clamp(190px, 14.5vw, 360px); --rail-gap: clamp(14px, 1.7vw, 28px);
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem;
  /* Type ramp (the app's: frontend/theme/tokens.ts fontSize and type). rem, so the fluid root scale applies; px are at the 1440 root (16px).
     Floors: body 17, secondary 15, smallest readable (legal lines, helper text, consent and privacy) 13, caption 12 only for badges, eyebrows and numerals. */
  --fs-display: 2.125rem; --fs-title: 1.5rem; --fs-headline: 1.125rem; --fs-body: var(--step-body); --fs-callout: 1rem; --fs-subhead: .9375rem; --fs-footnote: .8125rem; --fs-caption: .75rem; --lh-body: 1.45;
  --step-body: 1.0625rem; --step-title: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem); --step-section: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* One fluid scale for the whole site, about 360 to 2560 px: the root size runs from 15.2px (phones) to 16px at 1440 and on to 20px at 2560.
   Everything sized in rem (type, spacing, icon, cards, header) follows it. rem here is the visitor's own default size, so their browser setting still counts. */
html { font-size: max(clamp(.95rem, .9333rem + .0741vw, 1rem), calc(1rem + .36vw - 5.184px)); -webkit-text-size-adjust: 100%; background: var(--bg); scroll-padding-top: var(--header-h); }
[id] { scroll-margin-top: var(--header-h); }
body { margin: 0; min-width: 320px; min-height: 100dvh; display: flex; flex-direction: column; color: var(--text); font: var(--step-body)/var(--lh-body) Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Weights: Inter 400, 500 and 600 are the shipped faces, and the app's bold copy is 600 too; nothing asks for 700, so no browser fakes a bold. */
strong, b, th, h1, h2, h3, h4, h5, h6 { font-weight: 600; }
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-pressed); }
a:focus-visible, button:focus-visible, summary:focus-visible, .button:focus-visible, .table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: .5rem; top: -4rem; background: var(--fill); color: var(--on-fill); padding: .6rem 1rem; border-radius: 8px; z-index: 40; }
.skip:focus { top: .5rem; }

/* Ambient glass backdrop. Static by default; drifts only when motion is allowed. */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 100% 70% at 50% -18%, #1d2b38 0%, #0d131b 47%, #080D11 100%); }
.orb { position: absolute; display: block; border-radius: 999px; filter: blur(48px); opacity: .35; }
.o1 { width: 36rem; height: 36rem; top: -14rem; left: -14rem; background: radial-gradient(circle at 58% 56%, rgba(22, 182, 197, .7), rgba(7, 93, 115, .2) 41%, transparent 69%); }
.o2 { width: 30rem; height: 30rem; top: 14rem; right: -12rem; background: radial-gradient(circle, rgba(139, 200, 214, .3), rgba(7, 93, 115, .14) 41%, transparent 71%); }
@media (prefers-reduced-motion: no-preference) {
  .o1 { animation: drift-a 30s ease-in-out infinite alternate; }
  .o2 { animation: drift-b 36s ease-in-out infinite alternate; }
}
@keyframes drift-a { to { transform: translate3d(4rem, 3rem, 0); } }
@keyframes drift-b { to { transform: translate3d(-4rem, -2rem, 0); } }

header, footer, main, .draft-banner { width: 100%; max-width: 62rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
nav { display: flex; align-items: center; gap: .5rem 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: Viga, Inter, sans-serif; font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--text); margin-right: auto; }
.links { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.links a, .langs a { display: inline-block; padding: .55rem 0; min-height: 44px; color: var(--muted); text-decoration: none; }
.links a:hover, .langs a:hover { color: var(--text); text-decoration: underline; }
.links a[aria-current="page"], .langs a[aria-current] { color: var(--accent); }
.langs { display: flex; gap: .75rem; margin-left: .25rem; padding-left: 1.25rem; border-left: 1px solid var(--hair); }
.langs a[aria-current] { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
main { flex: 1 0 auto; padding-top: 2rem; padding-bottom: 3rem; }
footer { padding-top: 1.5rem; padding-bottom: 2.5rem; color: var(--muted); border-top: 1px solid var(--border); font-size: var(--fs-subhead); }
footer p { margin: .4rem 0; }
.age-line { color: var(--text); font-weight: 600; }

h1 { font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-weight: 600; font-size: var(--step-title); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 1rem; }
h2 { font-size: var(--step-section); font-weight: 600; letter-spacing: -.02em; margin: var(--space-5) 0 var(--space-2); line-height: 1.2; }
h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.lead { font-size: 1.2rem; color: var(--muted); }
.lead-sm { font-size: 1.05rem; color: var(--muted); max-width: 46rem; }
.muted { color: var(--muted); }
.prose p, .prose li, .legal p, .legal li { max-width: 68ch; }

.glass { background: var(--surface); background: var(--glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; padding: 1.25rem 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .08); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; margin: 1.5rem 0; }
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.25rem 0; }
.glass p { margin: 0; }
.glass h2 { margin-top: 0; font-size: 1.2rem; }
.glass ul { margin: 0; padding-left: 1.2rem; }

.hero { text-align: center; padding: 2.5rem 0 1.5rem; }
.hero-mark { filter: drop-shadow(0 0 20px rgba(22, 182, 197, .25)); } /* a glow that follows the icon's own shape: a box-shadow would draw a square in its transparent corners */
.eyebrow { margin: 1rem 0 .5rem; color: var(--muted); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.3rem, 9vw, 4.2rem); letter-spacing: -.02em; margin: 0 0 .75rem; }
.hero .lead { max-width: 34rem; margin: 0 auto 1rem; }
.pill { display: inline-block; border: 1px solid var(--control-border); background: var(--raised); color: var(--text); border-radius: 999px; padding: .2rem .8rem; font-size: var(--fs-caption); font-weight: 600; vertical-align: middle; }
.pill-accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-size: var(--fs-callout); padding: .35rem 1.1rem; }
.badge { display: inline-block; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: .4rem 1rem; margin: .25rem .5rem .25rem 0; }
.age-note { max-width: 34rem; margin: 1rem auto 0; padding: .6rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--glass); color: var(--text); }
.age-note strong { color: var(--accent); }
.more { margin-top: 1rem; }

.id-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.25rem 0; }
.id-card { background: linear-gradient(150deg, var(--soft), var(--surface) 70%); border: 1px solid var(--border); border-radius: 22px; padding: 1.1rem; display: grid; gap: .9rem; justify-items: center; box-shadow: 0 14px 30px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .08); }
.id-top { display: flex; align-items: center; gap: .8rem; width: 100%; }
.id-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--on-fill); font-family: Viga, Inter, sans-serif; font-size: 1.2rem; flex: none; }
.id-name { margin: 0; font-weight: 600; font-size: 1.1rem; overflow-wrap: anywhere; }
.id-sub { margin: 0; color: var(--muted); font-size: var(--fs-footnote); }
.id-qr { background: var(--text); padding: .6rem; border-radius: 12px; line-height: 0; }
.qr { width: 112px; height: 112px; fill: #080D11; }
.qr .qr-gap { fill: var(--text); }
.id-foot { margin: 0; color: var(--accent); font-size: var(--fs-footnote); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.facts { display: grid; grid-template-columns: 1fr; gap: .25rem; }
.facts dt { color: var(--muted); font-size: var(--fs-subhead); margin-top: .6rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.button { display: inline-block; background: var(--fill); color: var(--on-fill); font: inherit; font-weight: 600; font-size: 1.05rem; padding: .8rem 1.6rem; border: 0; border-radius: 999px; text-decoration: none; min-height: 44px; cursor: pointer; }
.button[hidden] { display: none; }
.button:hover { background: var(--fill-pressed); color: var(--on-fill); }
.button:disabled, .button[aria-disabled="true"] { background: var(--raised); color: var(--muted); cursor: not-allowed; border: 1px solid var(--control-border); }

.draft-banner { background: var(--warn-bg); color: var(--warn-text); border-bottom: 1px solid #5c4a14; padding-top: .75rem; padding-bottom: .75rem; max-width: none; }
.draft-banner > * { max-width: 44rem; }
mark.tbc { background: var(--warn-bg); color: var(--warn-text); outline: 1px solid #5c4a14; padding: 0 .3em; font-weight: 600; border-radius: 3px; }
.legal blockquote { margin: 1rem 0; padding: .1rem 1rem; border-left: 3px solid var(--border); color: var(--muted); }
.legal hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.legal code { background: var(--raised); padding: .1em .35em; border-radius: 4px; font-size: .92em; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--border); border-radius: 8px; }
table { border-collapse: collapse; min-width: 36rem; width: 100%; font-size: var(--fs-subhead); }
th, td { text-align: left; vertical-align: top; padding: .6rem .75rem; border-bottom: 1px solid var(--border); }
th { background: var(--surface); }

@media (min-width: 40rem) {
  h1 { font-size: 2.4rem; }
  .grid, .id-grid { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: 14rem 1fr; }
  .facts dt { margin-top: 0; }
}
/* Without backdrop-filter support the glass gets a solid, still readable fill. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .age-note { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---- Discovery grid (sample profile cards), ported from the partner design with the app palette ---- */
[hidden] { display: none !important; }
.discovery h2 { margin-bottom: .3rem; }
.cards { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard { margin: 0; min-width: 0; }
.pcard-in { position: relative; display: block; width: 100%; aspect-ratio: .7; overflow: hidden; margin: 0; isolation: isolate; border: 1px solid rgba(195, 205, 211, .28); border-radius: 22px; background: var(--surface); box-shadow: 0 14px 28px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .1); padding: 0; color: var(--text); text-align: left; font: inherit; cursor: default; }
.pcard-in.is-live:hover, .you-card .pcard-in:hover { border-color: var(--accent); }
.pcard-in:has(.pcard-open:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(127, 217, 226, .35), 0 14px 28px rgba(0, 0, 0, .25); }
.pcard-open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 22px; background: transparent; cursor: pointer; }
.pcard-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pcard-open:disabled { cursor: not-allowed; }
.button:disabled { cursor: not-allowed; }
.pcard-visual { position: absolute; inset: 0; background: linear-gradient(145deg, #0B7185, #12313B 68%); overflow: hidden; }
.tone-blue .pcard-visual, .pcard-visual.tone-blue { background: linear-gradient(145deg, #075D73, #12313B 68%, #080D11); }
.tone-steel .pcard-visual, .pcard-visual.tone-steel { background: linear-gradient(145deg, #4B5C66, #1C2429 57%, #080D11); }
.tone-cyan .pcard-visual, .pcard-visual.tone-cyan { background: linear-gradient(150deg, #0B7185, #0E3441 59%, #080D11); }
.tone-silver .pcard-visual, .pcard-visual.tone-silver { background: linear-gradient(145deg, #8D9CA6, #35434B 58%, #13191D); }
.tone-ink .pcard-visual, .pcard-visual.tone-ink { background: linear-gradient(145deg, #223036, #13191D 60%, #000000); }
.pcard-info { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 14px 14px 13px; border-top: 1px solid rgba(241, 245, 247, .16); border-radius: 18px 18px 0 0; background: rgba(8, 13, 17, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pcard-info h3 { margin: 0; font-size: 1.05rem; line-height: 1.1; }
.pcard-info h3 span { margin-right: .3rem; }
.pcard-info p { margin: .3rem 0 0; color: var(--muted); font-size: var(--fs-footnote); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you-card .pcard-visual { background: linear-gradient(145deg, #12313B, #080D11); border: 0; }
.you-card .pcard-in { border: 2px solid var(--accent); }
.plus { position: absolute; z-index: 1; top: 44%; left: 50%; transform: translate(-50%, -50%); width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--on-fill); font-size: 2rem; line-height: 1; }
/* Six blurred, non-interactive background cards that fade out below the front row. */
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 62rem) { .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } }
@media (prefers-reduced-motion: no-preference) { .pcard-in { transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease; } .pcard-art { transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .pcard-in.is-live:hover .pcard-art, .you-card .pcard-in:hover .plus { transform: scale(1.06); } .pcard-in.is-live:hover, .you-card .pcard-in:hover { transform: translateY(-5px); } }

/* ---- Dialogs (sample profile, KINK ID preview) ---- */
.dlg { width: min(calc(100% - 24px), 40rem); max-height: calc(100dvh - 24px); overflow: auto; padding: 0; border: 1px solid rgba(195, 205, 211, .3); border-radius: 24px; background: linear-gradient(140deg, #12313B, #13191D 58%, #080D11); color: var(--text); box-shadow: 0 30px 100px rgba(0, 0, 0, .6); }
.dlg::backdrop { background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlg-close { position: absolute; top: .6rem; right: .6rem; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--control-border); background: rgba(8, 13, 17, .85); color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.dlg-close:hover { border-color: var(--accent); }
.dlg-visual { position: relative; height: 12rem; }
.dlg-copy, .dlg-pad { padding: 1.25rem 1.25rem 1.5rem; }
.dlg-copy h2 { margin: .25rem 0; }
.dlg-kid { width: min(calc(100% - 24px), 46rem); }
.dlg-pad h2 { margin-top: .25rem; }
.notice { padding: .7rem 1rem; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); color: var(--text); }
.kid-form { margin-top: 1rem; }
.field { margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; margin-bottom: .35rem; font-weight: 600; padding: 0; }
.field input[type="text"], .field input[type="file"] { width: 100%; min-height: 44px; padding: .6rem .8rem; border: 1px solid var(--control-border); border-radius: 12px; background: var(--backdrop); color: var(--text); font: inherit; }
.field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: #F26D6A; }
.at { display: flex; align-items: center; gap: .4rem; }
.at span { color: var(--accent); font-weight: 600; }
.hint { color: var(--muted); font-size: var(--fs-footnote); font-weight: 400; margin: .3rem 0 0; }
legend .hint { display: inline; }
.err { color: #FF9C99; font-size: var(--fs-subhead); margin: .3rem 0 0; min-height: 0; }
.err:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-block; margin: 0 !important; font-weight: 400 !important; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-block; min-height: 44px; padding: .6rem .9rem; border: 1px solid var(--control-border); border-radius: 999px; background: var(--raised); }
.chip input:checked + span { background: var(--fill); border-color: var(--accent); color: var(--on-fill); font-weight: 600; }
.chip input:checked + span::before { content: "\2713\00a0"; }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip input:disabled + span { opacity: .5; }
.two { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 36rem) { .two { grid-template-columns: 1fr 1fr; } }
.button-quiet { background: var(--raised); border: 1px solid var(--control-border); }
.id-card-big { max-width: 26rem; margin: 1rem auto; justify-items: stretch; }
.id-card-big .id-qr { justify-self: center; }
.id-card-big .id-foot { justify-self: center; text-align: center; }
.kid-group h3 { margin: 0 0 .35rem; font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tagrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { padding: .2rem .7rem; border: 1px solid var(--control-border); border-radius: 999px; background: var(--raised); font-size: var(--fs-subhead); }
.id-avatar-photo { overflow: hidden; }
.id-photo { width: 100%; height: 100%; object-fit: cover; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
body:has(dialog[open]) { overflow: hidden; }
.you-card .pcard-info p { white-space: normal; }

/* ---- KINK ID survey ---- */
.survey-progress { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .5rem; color: var(--muted); font-size: var(--fs-subhead); }
.survey-progress progress { flex: 1; height: 6px; accent-color: var(--accent); }
.survey-q { margin: 0 0 .5rem; }
.survey-legend { font-size: 1.15rem; line-height: 1.4; font-weight: 600; margin-bottom: .75rem !important; }
.survey-scale { display: grid; gap: .5rem; }
.survey-opt { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--control-border); border-radius: 12px; background: var(--raised); cursor: pointer; font-weight: 400 !important; margin: 0 !important; }
.survey-opt input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); flex: none; }
.survey-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.survey-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.arch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.arch { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: baseline; }
.arch-name { font-weight: 600; }
.arch-pct { color: var(--accent); font-weight: 600; }
.arch-bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--raised); border: 1px solid var(--border); overflow: hidden; }
.arch-fill { display: block; height: 100%; background: var(--accent); }

/* ---- Moving petrol background (assets/petrol-bg.js, from web/src/backdrop). The static gradient above is the fallback. ---- */
.ambient canvas.bg-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .15s linear; }
.ambient[data-gl="1"] canvas.bg-gl { opacity: 1; }
.ambient[data-gl="1"] .orb { display: none; }
/* Home (full strength): the still frame (reduced motion, no WebGL) shows the same six soft pools as the moving picture. */
.ambient[data-mode="auth"] { background: radial-gradient(ellipse 52% 46% at 14% 30%, rgba(220, 228, 232, .1), transparent 72%), radial-gradient(ellipse 36% 32% at 82% 10%, rgba(220, 228, 232, .1), transparent 72%), radial-gradient(ellipse 50% 44% at 96% 60%, rgba(22, 182, 197, .2), transparent 72%), radial-gradient(ellipse 40% 36% at 50% 96%, rgba(22, 182, 197, .2), transparent 72%), radial-gradient(ellipse 46% 42% at 26% 80%, rgba(7, 93, 115, .5), transparent 72%), radial-gradient(ellipse 40% 36% at 75% 30%, rgba(7, 93, 115, .5), transparent 72%), var(--backdrop); }
.ambient.is-paused .orb { animation-play-state: paused; }
/* Pause control: small, quiet, in the footer row so it never covers content (WCAG 2.2.2). The hit area is 44px. */
.bg-toggle { position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); opacity: .6; cursor: pointer; }
.bg-toggle::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: rgba(8, 13, 17, .55); }
.bg-toggle svg { position: relative; fill: currentColor; }
.bg-toggle:hover, .bg-toggle:focus-visible { opacity: 1; color: var(--text); }
.bg-toggle[hidden] { display: none; }
.bg-toggle.is-floating { position: fixed; right: 10px; bottom: 10px; z-index: 30; }
.footer-tools { display: flex; justify-content: flex-end; margin-top: .25rem; }
.footer-tools:has(.bg-toggle[hidden]) { display: none; }

/* ---- Landing v2: header, compact hero, card carousel (layout after the partner concept, own assets only) ---- */
.site-header { z-index: 20; max-width: none; padding: 0; background: rgba(8, 13, 17, .94); border-bottom: 1px solid rgba(255, 255, 255, .1); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: rgba(8, 13, 17, .88); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); } }
.site-header { --nav-max: 88rem; --nav-gutter: clamp(16px, 3vw, 32px); position: relative; }
.site-header nav { max-width: var(--nav-max); margin: 0 auto; padding: 0 var(--nav-gutter); min-height: 3.5rem; border-bottom: 0; flex-wrap: nowrap; gap: 0 1rem; }
@media (min-width: 54rem) { .site-header { position: sticky; top: 0; } }
@media (max-width: 53.99rem) { :root { --header-h: 0px; } }
.home { max-width: none; padding: 0 0 var(--space-5); }
.home > section { max-width: 62rem; margin-inline: auto; padding-inline: 1rem; }
.home > section + section { margin-top: var(--space-5); }
.home > .hero-compact + .discovery { margin-top: var(--space-3); }
.home > section > h2:first-child { margin-top: 0; }
.hero-compact { padding: 0 0 .5rem; padding-top: var(--hero-top); }
.hero-brand { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 26px); text-align: left; }
.hero-compact .hero-mark { width: clamp(72px, 9vw, 104px); height: auto; }
.hero-compact .eyebrow { margin: 0 0 .4rem; }
.hero-compact h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); line-height: 1.05; margin: 0; }
.hero-compact .lead { margin: .9rem auto .75rem; font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem; margin-top: var(--space-3); }
.hero-compact .age-note { margin: var(--space-2) auto 0; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--muted); font-size: var(--fs-subhead); }
.hero-compact .age-note strong { color: var(--text); }
.trust { max-width: 34rem; margin: var(--space-1) auto 0; color: var(--muted); font-size: var(--fs-subhead); }
/* The carousel keeps the content column's left edge (same as the heading) and may bleed to the right edge of the page only. */
.home > .discovery { position: relative; z-index: 1; max-width: none; padding-right: 0; padding-left: max(1rem, calc((100% - 62rem) / 2 + 1rem)); }
.discovery > h2 { margin-bottom: .3rem; }
.rail-controls { display: flex; justify-content: flex-end; gap: .5rem; margin: 0; width: min(calc(100% - 1rem), 60rem); }
.rail-controls:not(:has(.rail-btn:not([hidden]))) { display: none; }
.rail-btn { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--control-border); background: var(--raised); color: var(--text); cursor: pointer; }
.rail-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rail-btn:disabled { opacity: .4; cursor: not-allowed; }
.discovery .rail { display: flex; grid-template-columns: none; gap: var(--rail-gap); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 14px 4px 24px; scroll-padding-inline: 4px; margin: 0 0 0 -4px; }
.discovery .rail::-webkit-scrollbar { display: none; }
.rail-wrap.can-next:not(.can-prev) .rail { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); }
.rail-wrap.can-prev:not(.can-next) .rail { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
.rail-wrap.can-prev.can-next .rail { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 72px), transparent); }
.discovery .rail > .pcard { flex: 0 0 var(--card-w); scroll-snap-align: start; }
.discovery .rail .pcard-in { border-radius: 30px; }
.discovery .rail .pcard-info { padding: 16px 16px 15px; border-radius: 24px 24px 0 0; }
.discovery .rail .pcard-info h3 { font-size: clamp(1.1rem, .9rem + .6vw, 1.45rem); letter-spacing: -.02em; }
.discovery .rail .pcard-info p { font-size: var(--fs-subhead); }
@media (max-width: 680px) {
  :root { --card-w: clamp(200px, 62vw, 280px); }
  .hero-brand { flex-direction: column; text-align: center; gap: 10px; }
  .hero-compact .hero-mark { width: 64px; }
}
/* Background rows: smaller and fainter row by row, cut off and faded into the page. Sized directly (never a scaled padded track), so the first card lines up with the main rail. */
.rail-bg { margin-top: calc(-1 * var(--space-1)); pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 94%); mask-image: linear-gradient(to bottom, #000, transparent 94%); }
.rail-bg-row { display: flex; gap: calc(var(--rail-gap) * var(--bg-scale)); overflow: hidden; filter: saturate(.7); -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent); mask-image: linear-gradient(to bottom, #000 25%, transparent); }
.rail-bg-row:nth-child(1) { --bg-scale: .8; height: calc(var(--card-w) * .8 * .75); opacity: .6; }
.rail-bg-row:nth-child(2) { --bg-scale: .62; height: calc(var(--card-w) * .62 * .55); opacity: .38; margin-top: var(--space-1); }
.rail-bg-row:nth-child(n+3) { --bg-scale: .5; height: calc(var(--card-w) * .5 * .45); opacity: .24; margin-top: var(--space-1); }
.pcard-bg { flex: 0 0 calc(var(--card-w) * var(--bg-scale)); margin: 0; min-width: 0; }
.pcard-bg .pcard-in { border-radius: 24px; cursor: default; }
.pcard-bg .pcard-info { padding: 12px 12px 10px; border-radius: 18px 18px 0 0; }
.pcard-bg .bg-name { margin: 0; font-size: var(--fs-subhead); font-weight: 600; line-height: 1.1; }
.pcard-bg .bg-name span { margin-right: .3rem; }
.pcard-bg .bg-tags { margin: .25rem 0 0; font-size: var(--fs-footnote); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg { border-radius: 28px; }
.pcard-open:focus-visible, .button:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  /* v2 */
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .hero-compact .hero-brand, .hero-compact .lead, .hero-cta { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-compact .lead { animation-delay: .08s; }
  .hero-cta { animation-delay: .16s; }
  .discovery .rail > .pcard { animation: rise .75s cubic-bezier(.2, .8, .2, 1) both; }
  .discovery .rail > .pcard:nth-child(2) { animation-delay: .06s; }
  .discovery .rail > .pcard:nth-child(3) { animation-delay: .12s; }
  .discovery .rail > .pcard:nth-child(4) { animation-delay: .18s; }
  .discovery .rail > .pcard:nth-child(5) { animation-delay: .24s; }
  .discovery .rail > .pcard:nth-child(6) { animation-delay: .3s; }
  .dlg[open] { animation: rise .28s ease-out both; }
  .button { transition: background .2s ease, transform .15s ease; }
  .button:active { transform: scale(.97); }
}

/* ---- Content pages (How it works, Safety and privacy, FAQ, Contact): same column, type and background as home ---- */
.ambient-soft { background: radial-gradient(ellipse 100% 70% at 50% -18%, #16212b 0%, #0b1118 47%, #080D11 100%); }
.ambient-soft .orb { opacity: .2; }
.page { max-width: 62rem; padding-top: var(--space-4); padding-bottom: var(--space-5); }
.page h1 { font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-weight: 600; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); line-height: 1.05; letter-spacing: -.03em; margin: 0; overflow-wrap: break-word; }
.page-head { margin-bottom: var(--space-4); }
.legal h1 { margin-bottom: var(--space-3); }
.page-lead { margin: var(--space-2) 0 0; max-width: 40rem; color: var(--muted); font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.45; }
.page h2 { margin: 0; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); letter-spacing: -.02em; }
.legal h2 { margin: var(--space-5) 0 var(--space-2); font-size: var(--step-section); }

/* How it works: a large numbered sequence, hairlines between steps, no boxes */
.seq { list-style: none; margin: 0; padding: 0; }
.seq-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: start; padding: var(--space-4) 0; }
.seq-item + .seq-item { border-top: 1px solid var(--hair); }
.seq-num { grid-row: span 2; min-width: 1.5em; font-family: Viga, Inter, sans-serif; font-size: clamp(3.5rem, 2.4rem + 4.4vw, 6rem); line-height: .85; letter-spacing: -.04em; color: var(--numeral); }
.seq-copy h2 { margin-bottom: .4rem; }
.seq-copy p { margin: 0; max-width: 34rem; color: var(--muted); }
.seq-art { grid-column: 2; width: 9rem; margin-top: var(--space-1); color: var(--accent); }
.seq-art svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.seq-art .fill { fill: rgba(127, 217, 226, .16); }
.seq-art .solid { fill: currentColor; stroke: none; }
.seq-art .faint { opacity: .45; }
.seq-art .tick { stroke-width: 2.4; }
.seq-art .a-tick { stroke-width: 2; }
.seq-art .link { stroke-width: 1; opacity: .15; }
.seq-art .node { fill: var(--bg, #000); stroke-width: 1.5; }
.seq-art .halo { fill: currentColor; stroke: none; opacity: .16; }
.seq-art .ini { fill: #080D11; stroke: none; font: 600 9px Inter, sans-serif; }
/* Step 3: three rings of people around you. Each ring turns slowly at its own speed and in its own direction, a few nodes breathe,
   and the two avatars with an initial counter-turn so the letter stays upright. Static under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .seq-art .orbit { transform-origin: 120px 90px; animation: spin 46s linear infinite reverse; }
  .seq-art .orbit-2 { animation-duration: 66s; animation-direction: normal; }
  .seq-art .orbit-3 { animation-duration: 90s; animation-direction: reverse; }
  .seq-art .upright-2 { transform-origin: 120px 40px; animation: spin 66s linear infinite reverse; }
  .seq-art .upright-3 { transform-origin: 52.5px 51px; animation: spin 90s linear infinite; }
  .seq-art .pulse-1 { animation: breathe 5s ease-in-out infinite; }
  .seq-art .pulse-2 { animation: breathe 6.5s ease-in-out -2s infinite; }
  .seq-art .pulse-3 { animation: breathe 7.5s ease-in-out -4s infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes breathe { 0%, 100% { opacity: .1; } 50% { opacity: .34; } }
}
/* Steps 1, 2 and 4: calm ambient loops that tell the step (assets/how-art.js adds .is-live when the picture first scrolls into view and .is-in while it is on
   screen). Only transform, opacity and stroke-dashoffset move. The pictures above are the finished still states, which is what stays without the script
   and under reduced motion. */
.seq-art .a-type1, .seq-art .a-type2 { transform-box: fill-box; transform-origin: 0 50%; }
.seq-art .a-pop1, .seq-art .a-pop2, .seq-art .chip, .seq-art .a-dot { transform-box: fill-box; transform-origin: 50% 50%; }
.seq-art .a-b1, .seq-art .a-b3 { transform-box: fill-box; transform-origin: 0 100%; }
.seq-art .a-b2 { transform-box: fill-box; transform-origin: 100% 100%; }
.seq-art .chip .sel { fill: rgba(127, 217, 226, .16); stroke: none; opacity: 0; }
.seq-art .chip .chk { opacity: 0; }
.seq-art .chip.on .sel, .seq-art .chip.on .chk { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .seq-art.is-live:not(.is-in) * { animation-play-state: paused; }
  /* 1. Make a profile: the card assembles itself, holds, fades and starts again (9s). */
  .seq-art.is-live .art-profile .a-in { animation: a1-reset 9s ease-in-out infinite; }
  .seq-art.is-live .art-profile .a-draw { stroke-dasharray: 1; animation: a1-draw 9s ease-out infinite both; }
  .seq-art.is-live .art-profile .a-type1 { animation: a1-type1 9s cubic-bezier(.3, .6, .3, 1) infinite both; }
  .seq-art.is-live .art-profile .a-type2 { animation: a1-type2 9s cubic-bezier(.3, .6, .3, 1) infinite both; }
  .seq-art.is-live .art-profile .a-pop1 { animation: a1-pop1 9s cubic-bezier(.3, 1.5, .5, 1) infinite both; }
  .seq-art.is-live .art-profile .a-pop2 { animation: a1-pop2 9s cubic-bezier(.3, 1.5, .5, 1) infinite both; }
  .seq-art.is-live .art-profile .a-pulse { animation: a1-pulse 3s ease-in-out infinite; }
  @keyframes a1-reset { 0%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
  @keyframes a1-draw { 0% { stroke-dashoffset: 1; } 20%, 100% { stroke-dashoffset: 0; } }
  @keyframes a1-type1 { 0%, 14% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
  @keyframes a1-type2 { 0%, 28% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
  @keyframes a1-pop1 { 0%, 42% { transform: scale(0); opacity: 0; } 44% { opacity: 1; } 50%, 100% { transform: scale(1); opacity: 1; } }
  @keyframes a1-pop2 { 0%, 51% { transform: scale(0); opacity: 0; } 53% { opacity: 1; } 59%, 100% { transform: scale(1); opacity: 1; } }
  @keyframes a1-pulse { 0%, 100% { opacity: .1; } 50% { opacity: .38; } }
  /* 2. Say what you are into: a chip is chosen about every 1.75s (fill fades in, the check draws, a small spring), the earlier choice relaxes back (10.5s). */
  .seq-art.is-live .art-tags .chip .sel { animation: a2-sel 10.5s ease-in-out infinite both; }
  .seq-art.is-live .art-tags .chip .chk { stroke-dasharray: 1; animation: a2-chk 10.5s ease-out infinite both; }
  .seq-art.is-live .art-tags .chip { animation: a2-pop 10.5s cubic-bezier(.3, 1.6, .5, 1) infinite both; }
  .seq-art.is-live .art-tags .d0, .seq-art.is-live .art-tags .d0 .sel, .seq-art.is-live .art-tags .d0 .chk { animation-delay: 0s; }
  .seq-art.is-live .art-tags .d1, .seq-art.is-live .art-tags .d1 .sel, .seq-art.is-live .art-tags .d1 .chk { animation-delay: 1.75s; }
  .seq-art.is-live .art-tags .d2, .seq-art.is-live .art-tags .d2 .sel, .seq-art.is-live .art-tags .d2 .chk { animation-delay: 3.5s; }
  .seq-art.is-live .art-tags .d3, .seq-art.is-live .art-tags .d3 .sel, .seq-art.is-live .art-tags .d3 .chk { animation-delay: 5.25s; }
  .seq-art.is-live .art-tags .d4, .seq-art.is-live .art-tags .d4 .sel, .seq-art.is-live .art-tags .d4 .chk { animation-delay: 7s; }
  .seq-art.is-live .art-tags .d5, .seq-art.is-live .art-tags .d5 .sel, .seq-art.is-live .art-tags .d5 .chk { animation-delay: 8.75s; }
  @keyframes a2-sel { 0% { opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 38%, 100% { opacity: 0; } }
  @keyframes a2-chk { 0% { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } 8% { stroke-dashoffset: 0; } 30% { stroke-dashoffset: 0; opacity: 1; } 38%, 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes a2-pop { 0% { transform: scale(1); } 3% { transform: scale(1.06); } 8%, 100% { transform: scale(1); } }
  /* 4. Talk, on your terms: bubbles arrive one by one, the message is read, then the other person types (10s). */
  .seq-art.is-live .art-chat .a-in { animation: a4-reset 10s ease-in-out infinite; }
  .seq-art.is-live .art-chat .a-b1 { animation: a4-b1 10s cubic-bezier(.3, 1.4, .5, 1) infinite both; }
  .seq-art.is-live .art-chat .a-b2 { animation: a4-b2 10s cubic-bezier(.3, 1.4, .5, 1) infinite both; }
  .seq-art.is-live .art-chat .a-tick1 { stroke-dasharray: 1; animation: a4-tick1 10s ease-out infinite both; }
  .seq-art.is-live .art-chat .a-tick2 { stroke-dasharray: 1; animation: a4-tick2 10s ease-out infinite both; }
  .seq-art.is-live .art-chat .a-b3 { animation: a4-b3 10s cubic-bezier(.3, 1.4, .5, 1) infinite both; }
  .seq-art.is-live .art-chat .a-dot { animation: a4-dot 1.2s ease-in-out infinite; }
  .seq-art.is-live .art-chat .a-dot2 { animation-delay: .15s; }
  .seq-art.is-live .art-chat .a-dot3 { animation-delay: .3s; }
  @keyframes a4-reset { 0%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
  @keyframes a4-b1 { 0% { opacity: 0; transform: translateY(8px) scale(.94); } 7%, 100% { opacity: 1; transform: none; } }
  @keyframes a4-b2 { 0%, 17% { opacity: 0; transform: translateY(8px) scale(.94); } 24%, 100% { opacity: 1; transform: none; } }
  @keyframes a4-tick1 { 0%, 30% { stroke-dashoffset: 1; opacity: 0; } 31% { opacity: 1; } 36%, 100% { stroke-dashoffset: 0; opacity: 1; } }
  @keyframes a4-tick2 { 0%, 31.500% { stroke-dashoffset: 1; opacity: 0; } 32.500% { opacity: 1; } 37.500%, 100% { stroke-dashoffset: 0; opacity: 1; } }
  @keyframes a4-b3 { 0%, 46% { opacity: 0; transform: translateY(8px) scale(.94); } 53%, 100% { opacity: 1; transform: none; } }
  @keyframes a4-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3.5px); } }
}
@media (min-width: 54rem) {
  .seq-item { grid-template-columns: 7rem minmax(0, 1fr) 15rem; align-items: center; gap: 0 var(--space-4); }
  .seq-num { grid-row: auto; }
  .seq-art { grid-column: auto; width: auto; margin: 0; }
  .seq-item:nth-child(even) { grid-template-columns: 15rem 7rem minmax(0, 1fr); }
  .seq-item:nth-child(even) .seq-art { order: -1; }
}

/* Plain sections with a hairline between them (Safety, and the KINK ID note on How it works) */
.sec { display: grid; gap: var(--space-2) var(--space-5); padding: var(--space-4) 0; }
.sec + .sec { border-top: 1px solid var(--hair); }
.sec-body ul { margin: 0; padding-left: 1.2rem; }
.sec-body li { margin: 0 0 .6rem; max-width: 40rem; }
.sec-body li:last-child { margin-bottom: 0; }
.sec-body p { margin: 0 0 .6rem; max-width: 40rem; }
.sec-body p:last-child { margin-bottom: 0; }
.sec-kid { margin-top: var(--space-2); border-top: 1px solid var(--hair); }
@media (min-width: 54rem) { .sec { grid-template-columns: 15rem minmax(0, 1fr); } }

/* Safety summary strip: the one place a filled surface is used */
.tiles { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.tile { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: rgba(127, 217, 226, .08); }
.tile strong { font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.tile span { color: var(--muted); font-size: var(--fs-subhead); line-height: 1.4; }
@media (min-width: 34rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* FAQ: full-width rows with hairlines, a plus that turns into a cross */
.faq { border-top: 1px solid var(--hair); }
.faq-row { border-bottom: 1px solid var(--hair); }
.faq-row summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 1rem 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; line-height: 1.35; border-radius: 8px; }
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::marker { content: ""; }
.faq-row summary:hover .faq-q { color: var(--accent); }
.faq-row summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.faq-icon { position: relative; flex: none; width: 24px; height: 24px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; background: var(--accent); }
.faq-icon::after { transform: rotate(90deg); }
.faq-row[open] .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 0 1.25rem; max-width: 46rem; }
.faq-a p { margin: 0; color: var(--muted); }
.faq-a p + p { margin-top: .6rem; }
@media (prefers-reduced-motion: no-preference) {
  .faq-row { interpolate-size: allow-keywords; }
  .faq-row::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
  .faq-row[open]::details-content { block-size: auto; }
  .faq-icon { transition: transform .25s ease; }
}

/* Contact: label left, mailbox right, hairlines; the block is centred vertically when the page is tall */
.page-contact { display: flex; flex-direction: column; justify-content: center; }
.rows { max-width: 44rem; margin: 0 0 var(--space-3); border-top: 1px solid var(--hair); }
.rows .row { display: grid; gap: .15rem 2rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--hair); }
.rows dt { color: var(--muted); }
.rows dd { margin: 0; overflow-wrap: anywhere; }
.rows dd a { display: inline-block; padding: .4rem 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 600; }
.contact-note { max-width: 44rem; margin: 0 0 var(--space-1); }
@media (min-width: 40rem) { .rows .row { grid-template-columns: 1fr auto; } .rows dd { text-align: right; } }

/* ---- Home v2 (phases 2 to 5) ---- */
/* Heading alignment: one rule for the whole site. Every heading is left aligned on the content column; only the home hero (mascot, title, lead, actions) is centred, by owner decision. */
.home > section > h2, .home .lead-sm { text-align: left; }

/* Primary action: a brighter petrol fill with dark text (contrast above 7:1); the other buttons keep the deep petrol fill */
.button-primary { background: var(--accent); color: #04212A; font-size: 1.1rem; padding: .85rem 2rem; box-shadow: 0 6px 24px rgba(22, 182, 197, .28); }
.button-primary:hover { background: #A6E8EE; color: #04212A; }
.button-primary:disabled { background: var(--raised); color: var(--muted); box-shadow: none; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.text-link:hover { color: var(--accent); }

/* Per-card artwork: eight compositions of plain shapes, coloured by the tone of the card */
.pcard-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pcard-art .a { fill: var(--art-a); }
.pcard-art .b { fill: var(--art-b); }
.pcard-art .c { fill: var(--art-c); }
.tone-blue { --art-a: rgba(127, 217, 226, .5); --art-b: rgba(22, 182, 197, .42); --art-c: rgba(241, 245, 247, .16); }
.tone-steel { --art-a: rgba(195, 205, 211, .34); --art-b: rgba(75, 92, 102, .75); --art-c: rgba(127, 217, 226, .26); }
.tone-cyan { --art-a: rgba(22, 182, 197, .55); --art-b: rgba(127, 217, 226, .28); --art-c: rgba(8, 13, 17, .4); }
.tone-silver { --art-a: rgba(241, 245, 247, .38); --art-b: rgba(141, 156, 166, .55); --art-c: rgba(7, 93, 115, .55); }
.tone-ink { --art-a: rgba(34, 48, 54, .95); --art-b: rgba(127, 217, 226, .32); --art-c: rgba(22, 182, 197, .24); }
.dlg-visual .pcard-art { position: absolute; }
.you-card .pcard-info p.you-line { margin-top: .45rem; color: var(--muted); font-size: var(--fs-footnote); line-height: 1.3; }
.rail-caption { margin: var(--space-2) 0 0; max-width: 40rem; color: var(--muted); font-size: var(--fs-footnote); }
.discovery > .lead-sm { margin: 0 0 var(--space-1); }

/* Safety highlights on home: the tiles are links to the Safety anchors */
.tiles-links .tile { height: 100%; text-decoration: none; color: var(--text); border: 1px solid transparent; transition: border-color .2s ease; }
.tiles-links .tile:hover { border-color: var(--accent); background: rgba(127, 217, 226, .12); }
.tiles-links li { display: block; }

/* Waitlist form */
.wl-form { max-width: 34rem; margin-top: var(--space-2); }
.wl-form .field input[type="email"] { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1px solid var(--control-border); border-radius: 12px; background: var(--backdrop); color: var(--text); font: inherit; }
.wl-form .field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wl-form .field input[aria-invalid="true"] { border-color: #F26D6A; }
.check { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 .9rem; cursor: pointer; }
.check input { flex: none; width: 1.5rem; height: 1.5rem; margin: .15rem 0 0; accent-color: var(--accent); }
.check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.check span { max-width: 32rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-status { margin: .75rem 0 0; padding: 0; min-height: 0; }
.wl-status:empty { display: none; }
.wl-status[data-state="ok"] { padding: .7rem 1rem; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); color: var(--text); }
.wl-status[data-state="error"] { padding: .7rem 1rem; border: 1px solid #F26D6A; border-radius: 12px; background: #2A1414; color: #FFC9C7; }

/* FAQ teaser on home reuses the FAQ rows */
.home .faq { margin-top: var(--space-2); }
.home .more { margin-top: var(--space-2); }

/* Small muted caption under a page lead (launch note, "contact us" line); FAQ groups */
.page-note { margin: var(--space-1) 0 0; max-width: 40rem; color: var(--muted); font-size: var(--fs-subhead); line-height: 1.5; }
.faq-group + .faq-group { margin-top: var(--space-4); }
.faq-group > h2 { margin-bottom: var(--space-2); }
.check input[aria-invalid="true"] { outline: 2px solid #F26D6A; outline-offset: 2px; }
.rows dd .addr-soon { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 600; color: var(--muted); }
.soon-tag { display: inline-block; margin-left: .5rem; padding: .1rem .65rem; border: 1px solid var(--hair); border-radius: 999px; font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }

/* ---- Header: ONE row at every width. Logo left, links centre, language switch and Log in right (Log in last).
   When the links do not fit (below 75rem) they move into a menu panel opened by a button; they never wrap. ---- */
.site-header .brand { flex: 1 1 0; margin-right: 0; white-space: nowrap; }
.site-header .links { flex-wrap: nowrap; white-space: nowrap; }
.site-header .langs { flex: 1 1 0; justify-content: flex-end; margin: 0; padding: 0; border: 0; }
.login { display: inline-flex; align-items: center; flex: none; min-height: 44px; margin-left: .25rem; padding: 0 1.1rem; border: 1px solid var(--control-border); border-radius: 999px; background: rgba(8, 13, 17, .45); color: var(--text); font-weight: 600; white-space: nowrap; text-decoration: none; }
.login:hover { border-color: var(--accent); color: var(--text); }
.menu-btn { display: none; flex: none; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--control-border); border-radius: 12px; background: rgba(8, 13, 17, .45); color: var(--text); cursor: pointer; }
.menu-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn .m-close, .nav-open .menu-btn .m-open { display: none; }
.nav-open .menu-btn .m-close { display: inline; }
@media (min-width: 37.5rem) {
  .nav-panel { display: contents; }
}
@media (max-width: 37.49rem) {
  .menu-btn { display: grid; }
  .site-header .brand { flex: 0 1 auto; margin-right: auto; }
  .nav-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 21; flex-direction: column; align-items: stretch; gap: .25rem; max-height: calc(100vh - 4rem); overflow-y: auto; padding: .5rem max(var(--nav-gutter), calc((100% - var(--nav-max)) / 2 + var(--nav-gutter))) 1rem; background: #0a1015; border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 30px rgba(0, 0, 0, .35); }
  .nav-open .nav-panel { display: flex; }
  .site-header .links { flex-direction: column; gap: 0; white-space: normal; }
  .site-header .langs { flex: none; justify-content: flex-start; gap: 1.25rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--hair); }
}
/* Wide screens: nav-menu.js measures the real row (per language) and sets .nav-compact when the links, language switch and Log in
   would not keep a 2rem gap; the same compact layout as above then applies, whatever the viewport width. */
@media (min-width: 37.5rem) { .site-header nav { column-gap: 2rem; } }
/* Pages without a language switch (privacy, terms): an empty right-hand spacer keeps the links centred exactly as on the other pages. */
@media (min-width: 37.5rem) { .site-header nav:not(.nav-compact) .nav-panel:not(:has(.langs))::after { content: ""; flex: 1 1 0; } }
.site-header nav.nav-compact { column-gap: 1rem; }
.site-header nav.nav-compact .menu-btn { display: grid; }
.site-header nav.nav-compact .brand { flex: 0 1 auto; margin-right: auto; }
.site-header nav.nav-compact .nav-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 21; flex-direction: column; align-items: stretch; gap: .25rem; max-height: calc(100vh - 4rem); overflow-y: auto; padding: .5rem max(var(--nav-gutter), calc((100% - var(--nav-max)) / 2 + var(--nav-gutter))) 1rem; background: #0a1015; border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 30px rgba(0, 0, 0, .35); }
.site-header nav.nav-compact.nav-open .nav-panel { display: flex; }
.site-header nav.nav-compact .links { flex-direction: column; gap: 0; white-space: normal; }
.site-header nav.nav-compact .langs { flex: none; justify-content: flex-start; gap: 1.25rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--hair); }
/* Without scripts the menu button cannot work: show the links under the logo (they may wrap). */
@media (scripting: none) {
  .menu-btn { display: none; }
  .site-header nav { flex-wrap: wrap; }
  .nav-panel { display: flex; position: static; flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; order: 5; max-height: none; padding: 0 0 .5rem; background: none; border: 0; box-shadow: none; }
  .site-header .links { flex-direction: row; flex-wrap: wrap; gap: .25rem 1.1rem; }
  .site-header .langs { flex: none; margin: 0; padding: 0; border: 0; }
}

/* ---- Top bar: a floating glass capsule (owner, 2026-10-23). Same structure: logo left, links centre, language and Log in right, compact menu when the row
   does not fit. The header itself is transparent (the page background runs to the top edge); the capsule is the nav: blur and saturation on a translucent
   fill, a 1px inner hairline and a soft long shadow, slightly more opaque and tighter after a little scrolling (a class set by nav-menu.js, no motion
   under reduced motion). Sizes are rem, so the bar follows the fluid root scale. ---- */
:root { --header-h: 5rem; }
.site-header, .site-header.is-scrolled { position: sticky; top: 0; z-index: 20; padding: 12px var(--nav-gutter) 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.site-header { --bar-h: 3.4rem; --bar-bg: rgba(12, 18, 23, .86); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { --bar-bg: rgba(14, 20, 26, .5); } }
.site-header.is-scrolled { --bar-h: 3.05rem; --bar-bg: rgba(10, 15, 20, .9); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header.is-scrolled { --bar-bg: rgba(10, 15, 20, .74); } }
.site-header nav { position: relative; pointer-events: auto; max-width: min(var(--nav-max), 68.75rem); min-height: max(var(--bar-h), 44px); padding: 0 .65rem 0 1.1rem; border-radius: 999px; background: var(--bar-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 44px -14px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .2); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header nav { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } }
.site-header.is-scrolled nav { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 22px 50px -14px rgba(0, 0, 0, .62), 0 2px 10px rgba(0, 0, 0, .26); }
@media (max-width: 53.99rem) { .site-header, .site-header.is-scrolled { padding-inline: 12px; } .site-header nav { padding-left: .9rem; } }
@media (prefers-reduced-motion: no-preference) {
  .site-header nav { transition: background-color .25s ease, box-shadow .25s ease, min-height .25s ease; }
  .site-header .links a, .site-header .langs a, .lang-btn, .login, .menu-btn { transition: color .2s ease, background-color .2s ease; }
}
/* Wordmark: the app icon and "Ronski" in Viga, normal case, as the app shows it. */
.site-header .brand { gap: .55rem; font-family: Viga, Inter, sans-serif; font-size: 1.3rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.site-header .brand img { width: 2rem; height: 2rem; }
/* Links: regular weight, secondary colour, primary on hover; the current page has a small petrol dot under it. */
.site-header .links { gap: 0; }
.site-header .links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: var(--muted); font-size: var(--fs-subhead); font-weight: 400; text-decoration: none; }
.site-header .links a:hover { color: var(--text); text-decoration: none; }
.site-header .links a[aria-current="page"] { color: var(--text); }
/* The indicator: a short petrol bar under the current link. It carries a view-transition-name, so between pages (cross-document View Transitions) it slides from
   the old link to the new one; nav-menu.js does the same with a small animation where those are not supported. */
.site-header .links .ind { position: absolute; left: .75rem; right: .75rem; bottom: .32rem; height: 3px; border-radius: 3px; background: var(--accent); view-transition-name: nav-ind; }
.site-header nav.nav-compact .links .ind { display: none; }
@media (max-width: 37.49rem) { .site-header .links .ind { display: none; } }
.site-header .langs { gap: .15rem; align-items: center; }
.site-header .langs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; color: var(--muted); font-size: var(--fs-footnote); font-weight: 400; text-decoration: none; }
.site-header .langs a:hover { color: var(--text); text-decoration: none; }
.site-header .langs a[aria-current] { color: var(--text); text-decoration: none; }
/* Language picker (built by nav-menu.js): a globe and the current code, no box; the three links open in a small glass menu. */
.site-header .langs.is-pick { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .5rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: var(--fs-footnote); font-weight: 400; letter-spacing: .02em; cursor: pointer; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--text); background: none; }
.lang-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.lang-menu { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 25; min-width: 5.5rem; flex-direction: column; gap: .1rem; padding: .35rem; border-radius: 1rem; background: rgba(12, 18, 23, .96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px -10px rgba(0, 0, 0, .55); }
.lang-menu:not([hidden]) { display: flex; }
.lang-menu a { justify-content: flex-start; padding: 0 .85rem; border-radius: .7rem; font-size: var(--fs-subhead); }
.lang-menu a:hover { background: rgba(255, 255, 255, .09); }
.lang-menu a[aria-current] { background: rgba(255, 255, 255, .13); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lang-menu { background: rgba(12, 18, 23, .78); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } }
/* Log in: a compact solid petrol pill (white on #075D73 is 6.8:1), no outline and no glow. */
.login { min-height: 2.15rem; margin-left: .5rem; padding: 0 1rem; border: 0; background: var(--fill); color: var(--on-fill); font-size: var(--fs-subhead); font-weight: 600; box-shadow: none; }
.login:hover { background: var(--fill-pressed); color: var(--on-fill); }
.login::after { content: ""; position: absolute; inset: -.5rem -.15rem; }
.login { position: relative; }
.menu-btn { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.menu-btn:hover { background: rgba(255, 255, 255, .14); }
/* The compact menu opens as a glass sheet under the capsule. Language links stay inline in it. */
@media (max-width: 37.49rem) { .site-header .nav-panel { top: calc(100% + .6rem); left: 0; right: 0; padding: .6rem 1rem 1rem; border: 0; border-radius: 1.5rem; background: rgba(12, 18, 23, .94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 22px 50px -14px rgba(0, 0, 0, .6); } .site-header .lang-btn { display: none; } .site-header .lang-menu { position: static; display: flex; flex-direction: row; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.site-header nav.nav-compact .nav-panel { top: calc(100% + .6rem); left: 0; right: 0; padding: .6rem 1rem 1rem; border: 0; border-radius: 1.5rem; background: rgba(12, 18, 23, .94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 22px 50px -14px rgba(0, 0, 0, .6); }
.site-header nav.nav-compact .lang-btn { display: none; }
.site-header nav.nav-compact .lang-menu { position: static; display: flex; flex-direction: row; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

.site-footer a, a[href^="/privacy"], a[href^="/terms"], a[href^="/security"], a[href^="mailto:"], .trust a { white-space: nowrap; }

/* ---- Contact: two glass cards (stacked on phones), the whole card is a mailto link ---- */
.ccards { display: grid; gap: 1rem; max-width: 46rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .ccards { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.ccard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; background: rgba(19, 25, 29, .55); box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 14px 34px -16px rgba(0, 0, 0, .55); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ccard { -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); } }
.ccard-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: .25rem; border-radius: 50%; border: 1px solid rgba(127, 217, 226, .35); background: rgba(127, 217, 226, .1); color: var(--accent); }
.ccard-icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ccard h2 { margin: 0; font-size: var(--fs-headline); font-weight: 600; letter-spacing: 0; }
.ccard p { flex: 1; margin: 0; color: var(--muted); font-size: var(--fs-subhead); line-height: var(--lh-body); }
.ccard-mail { margin-top: .5rem; font-size: var(--fs-callout); font-weight: 600; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.ccard-mail::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.ccard-mail:hover { text-decoration: underline; text-underline-offset: 3px; }
.ccard-mail:focus-visible { outline: none; }
.ccard:has(.ccard-mail:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.ccard-copy { position: relative; z-index: 1; min-height: 2.25rem; padding: 0 .9rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--text); font: inherit; font-size: var(--fs-footnote); font-weight: 500; cursor: pointer; }
.ccard-copy[hidden] { display: none; }
.ccard-copy:hover { background: rgba(255, 255, 255, .12); }
.ccard-copy:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ctoast { min-height: 1.5rem; margin: .75rem 0 0; font-size: var(--fs-footnote); font-weight: 500; color: var(--accent); opacity: 0; }
.ctoast.is-on { opacity: 1; }
.contact-links { margin: 1.5rem 0 0; font-size: var(--fs-subhead); }
.contact-links a { color: var(--muted); }
.contact-links a:hover { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .ccard { transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, box-shadow .25s ease; }
  .ccard:hover, .ccard:has(.ccard-mail:focus-visible) { transform: translateY(-3px); }
  .ctoast { transition: opacity .25s ease; }
}
.ccard:hover { border-color: rgba(127, 217, 226, .45); }

/* ---- Page changes (cross-document View Transitions, where supported; none under reduced motion). Nothing tall is ever snapshotted: only the viewport-sized root and the
   small header and bar. The old page simply fades out over the new one (about 180ms) while the new content fades in and rises 10px by itself (a live CSS animation of
   about 300ms, see below), so the page change costs the same on a long page like Home as on a short one. The header capsule and the indicator bar are named so they stay put
   (the bar glides to the new link), and the header does not blur while the transition runs. ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(root), ::view-transition-group(site-header) { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { z-index: 2; animation: pt-out .18s ease both; }
  ::view-transition-new(root) { animation: none; }
  ::view-transition-old(site-header) { display: none; }
  ::view-transition-new(site-header) { animation: none; }
  /* The bar is as wide as the link's text, so its group morphs position and width together. */
  ::view-transition-group(nav-ind) { animation-duration: .48s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  @keyframes pt-out { to { opacity: 0; } }
  /* The new page's content: a calm entrance on every page load, with or without View Transitions. */
  main, .site-footer { animation: pt-in-load .3s cubic-bezier(.2, .8, .2, 1) .04s both; }
  @keyframes pt-in-load { from { opacity: 0; transform: translateY(10px); } }
  /* No blur while pages change (nav-menu.js sets .is-vt around the transition): a plain, slightly denser capsule instead. */
  .is-vt .site-header nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 15, 20, .9); }
}

/* No flash and no shift on load: with scripts on (html.js is set in the head) the language links wait invisibly, in the same slot, until the picker replaces them. */
.js .site-header .langs:not(.is-pick) { visibility: hidden; }
@media (max-width: 37.49rem) { .js .site-header .langs:not(.is-pick) { visibility: visible; } }

/* Tablets and unfolded foldables (600 to 1199px): the full links stay in the capsule, with tighter spacing; the wordmark text drops (the icon stays) on the
   narrowest ones. nav-menu.js measures the real row per language and only falls back to the menu button when the links truly do not fit. */
@media (min-width: 37.5rem) and (max-width: 74.99rem) {
  .site-header, .site-header.is-scrolled { padding-inline: 8px; }
  .site-header nav { column-gap: .1rem; padding-left: .6rem; padding-right: .4rem; }
  .site-header .links a { padding: 0 .38rem; font-size: var(--fs-footnote); }
  .site-header .links .ind { left: .38rem; right: .38rem; }
  .site-header .langs a, .lang-btn { padding-inline: .25rem; }
  .login { margin-left: .15rem; padding: 0 .7rem; font-size: var(--fs-footnote); }
  .site-header nav:not(.nav-compact) .brand { flex: 0 0 auto; }
  .site-header nav:not(.nav-compact) .brand img { flex: none; }
  .site-header nav:not(.nav-compact) .langs { flex: 0 0 auto; }
  .site-header nav:not(.nav-compact) .links { margin-inline: auto; }
}
@media (min-width: 37.5rem) and (max-width: 55.99rem) { .site-header .brand span { display: none; } }

/* ---- Scroll-under band (every page): from the very top of the screen (the safe area and the gap above the capsule) to just below the capsule, a blurred band that is solid
   at the top and fades to nothing, so text scrolling under the floating header dissolves instead of showing through (Safari's blur alone is too weak over text).
   Solid gradient where backdrop-filter is missing. On phones the capsule itself is a little denser as well. ---- */
.site-header::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) * -1); height: calc(env(safe-area-inset-top, 0px) + 12px + max(var(--bar-h), 44px) + 1.75rem); pointer-events: none; background: linear-gradient(to bottom, rgba(8, 13, 17, 1) 0%, rgba(8, 13, 17, .94) 52%, rgba(8, 13, 17, 0) 100%); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: linear-gradient(to bottom, rgba(8, 13, 17, 1) 0%, rgba(8, 13, 17, .78) 55%, rgba(8, 13, 17, 0) 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
}
@media (max-width: 53.99rem) {
  .site-header { --bar-bg: rgba(12, 18, 23, .9); }
  .site-header.is-scrolled { --bar-bg: rgba(10, 15, 20, .94); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { --bar-bg: rgba(14, 20, 26, .88); } .site-header.is-scrolled { --bar-bg: rgba(10, 15, 20, .92); } }
}
/* The first content starts clearly below the capsule (at least 16px), also when the page jumps to it. */
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
.pd-card { scroll-margin-top: calc(var(--header-h) + 1.25rem); }
.pd-intro { padding-top: .25rem; }

/* Footer Instagram glyph and the third contact card */
.social-link { display: inline-flex; align-items: center; vertical-align: middle; margin-left: .15rem; color: var(--muted); }
.social-link svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social-link:hover { color: var(--text); }
.ccard-icon svg circle:last-child, .social-link svg circle:last-child { fill: currentColor; stroke: none; }
@media (min-width: 40rem) { .ccards .ccard:nth-child(3):last-child { grid-column: 1 / -1; } }