/* Speaker Ready public site — marketing and sign-in pages */
@font-face {
  font-family: "Archivo"; src: url("/fonts/archivo.woff") format("woff");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
:root {
  --ink: #14213d;      /* stage navy */
  --paper: #f6f7f9;    /* cool paper */
  --white: #ffffff;
  --amber: #ffb000;    /* timer warning */
  --amber-ink: #6b4a00;
  --go: #1f9d55;       /* cue light */
  --stop: #d64545;
  --slate: #5b6573;
  --line: #d8dde4;
  --measure: 62ch;
  font-family: "Archivo", system-ui, sans-serif;
  color: var(--ink); background: var(--paper);
  font-size: 17px; line-height: 1.55;
  font-variant-numeric: lining-nums;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.wrap { width: min(1180px, 100% - 40px); margin: 0 auto; }

/* condensed display type: flight-case stencil */
.display { font-stretch: 68%; font-weight: 800; letter-spacing: -.01em; line-height: .98; }
h1, h2, h3 { margin: 0; }
h2.display { font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 18ch; }
h3 { font-size: 1.05rem; font-weight: 700; }
.lede { font-size: 1.18rem; color: var(--slate); max-width: var(--measure); margin: 18px 0 0; }
p { max-width: var(--measure); }

/* ---- top navigation ---- */
.nav { display: flex; align-items: center; gap: 26px; padding: 22px 0; }
.logo { white-space: nowrap; display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-stretch: 75%; font-size: 1.45rem; letter-spacing: .01em; }
.logo-mark { width: 40px; height: 40px; flex: none; background: url('/img/logo.png') center / contain no-repeat; }
.nav .links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav .links a { text-decoration: none; font-weight: 600; color: var(--slate); }
.nav .links a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav .links a.hide-sm { display: none; } }
.nav .links a { white-space: nowrap; }
@media (max-width: 420px) { .nav { gap: 12px; } .nav .links { gap: 12px; } .logo { font-size: 1.25rem; } .nav .btn.small { padding: 7px 11px; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--ink); background: var(--ink); color: var(--white) !important;
  font: inherit; font-weight: 700; padding: 12px 20px; border-radius: 8px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #22325a; border-color: #22325a; }
.btn.light { background: transparent; color: var(--ink) !important; }
.btn.light:hover { background: var(--white); }
.btn.small { padding: 8px 14px; font-size: .92rem; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---- hero ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 48px 0 90px; }
.hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.4rem); }
.hero .cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero .fine { margin-top: 14px; font-size: .9rem; color: var(--slate); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 40px; padding-bottom: 60px; } }

/* the confidence monitor */
.monitor { position: relative; }
.monitor-screen { position: relative; overflow: hidden; background: #000; border-radius: 14px; padding: 18px 22px 22px; color: #fff; box-shadow: 0 0 0 10px #232a36, 0 30px 60px -20px rgba(20, 33, 61, .45); aspect-ratio: 16 / 10; display: flex; flex-direction: column; }
.monitor-top { display: flex; justify-content: space-between; gap: 12px; color: #9aa3b3; font-size: .82rem; font-weight: 600; }
.monitor-time { flex: 1; display: grid; place-items: center; font-weight: 800; font-stretch: 85%; font-variant-numeric: tabular-nums; font-size: clamp(4.4rem, 11vw, 8.6rem); line-height: 1; color: #3ddc84; transition: color .6s; }
.monitor-bar { height: 8px; border-radius: 4px; background: #1c1f26; overflow: hidden; }
.monitor-bar i { display: block; height: 100%; width: 60%; background: currentColor; color: #3ddc84; transition: width 1s linear, color .6s; }
.monitor-msg { position: absolute; left: 22px; right: 22px; bottom: 40px; background: var(--amber); color: #000; font-weight: 800; font-stretch: 80%; text-align: center; font-size: clamp(1.2rem, 2.6vw, 1.9rem); padding: 10px; border-radius: 8px;
  transform: translateY(12px); opacity: 0; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.monitor.warn .monitor-time, .monitor.warn .monitor-bar i { color: var(--amber); }
.monitor.warn .monitor-time { padding-bottom: 14%; transition: color .6s, padding .5s; }
.monitor.warn .monitor-msg { transform: none; opacity: 1; }
.monitor-stand { width: 34%; height: 18px; margin: 10px auto 0; background: linear-gradient(#2b3240, #1b2029); border-radius: 0 0 10px 10px; }
.monitor-caption { margin-top: 10px; text-align: center; font-size: .88rem; color: var(--slate); min-height: 2.8em; }
@media (prefers-reduced-motion: reduce) { .monitor-msg, .monitor-time, .monitor-bar i, .scene, .hd-slide { transition: none !important; } }

/* hero screen cycles: holding slide → timer → Room Display */
.monitor-screen { padding: 0; }
.scene { position: absolute; inset: 0; padding: 18px 22px 22px; display: flex; flex-direction: column; opacity: 0; transition: opacity .7s ease; }
.scene.on { opacity: 1; }
.scene-hold { justify-content: center; padding: 0 9%; background: radial-gradient(120% 90% at 0% 0%, #1d3a73 0%, #05070b 68%); }
.hs-top { position: absolute; top: 7%; left: 9%; right: 9%; display: flex; justify-content: space-between; color: #9fb3d6; font-weight: 600; font-size: clamp(.62rem, 1.1vw, .82rem); letter-spacing: .04em; }
.hs-bar { width: 12%; height: 6px; border-radius: 3px; background: var(--amber); margin-bottom: 5%; }
.hs-name { font-weight: 800; font-stretch: 80%; font-size: clamp(2rem, 4.8vw, 3.7rem); line-height: 1; }
.hs-co { color: #9fb3d6; font-weight: 600; margin-top: 2%; font-size: clamp(.8rem, 1.5vw, 1.1rem); }
.hs-title { font-weight: 600; font-size: clamp(1.05rem, 2.3vw, 1.7rem); margin-top: 5%; line-height: 1.15; }
.hs-when { position: absolute; bottom: 8%; left: 9%; font-weight: 700; color: #cfe0ff; font-variant-numeric: tabular-nums; font-size: clamp(.8rem, 1.4vw, 1rem); }
.scene-door { background: linear-gradient(160deg, #0f1a33, #05070b); gap: 2.2%; padding: 4.5% 6%; }
.ds-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #ffffff22; padding-bottom: 2%; }
.ds-head b { font-weight: 800; font-stretch: 78%; font-size: clamp(1.4rem, 3vw, 2.3rem); }
.ds-head span { color: #9fb3d6; font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(.9rem, 1.8vw, 1.3rem); }
.ds-label { display: inline-block; font-size: clamp(.55rem, 1vw, .72rem); font-weight: 800; letter-spacing: .12em; padding: 2px 8px; border-radius: 4px; background: var(--go); color: #fff; }
.ds-next .ds-label { background: #ffffff22; }
.ds-time { color: #9fb3d6; font-weight: 700; margin-top: 2%; font-size: clamp(.7rem, 1.3vw, .95rem); }
.ds-who { font-weight: 800; font-stretch: 82%; font-size: clamp(1.2rem, 2.5vw, 1.9rem); line-height: 1.05; }
.ds-what { color: #d7e2f5; font-size: clamp(.8rem, 1.5vw, 1.1rem); }
.ds-prog { height: 5px; background: #ffffff1c; border-radius: 3px; margin-top: 2%; overflow: hidden; }
.ds-prog i { display: block; height: 100%; width: 12%; background: var(--go); }
.ds-row { display: flex; gap: 12px; padding: 1% 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #ffffff14; font-size: clamp(.72rem, 1.35vw, 1rem); color: #d7e2f5; }
.ds-row b { font-variant-numeric: tabular-nums; color: #fff; }
.scene-tabs { display: flex; justify-content: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.scene-tabs button { font: inherit; font-weight: 700; font-size: .86rem; border: 1.5px solid var(--line); background: var(--white); color: var(--slate); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.scene-tabs button[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

/* features */
.kicker { display: inline-block; font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); background: #fff1cc; padding: 4px 10px; border-radius: 999px; }
.feature-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; margin-top: 44px; padding: 36px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); }
@media (max-width: 960px) { .feature-hero { grid-template-columns: 1fr; padding: 24px; gap: 28px; } }
.feature-title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 14px 0 12px; max-width: 20ch; }
.feature-hero p { color: var(--slate); margin: 0 0 14px; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding: 6px 0 6px 26px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 12px; height: 7px; border-left: 3px solid var(--go); border-bottom: 3px solid var(--go); transform: rotate(-45deg); }

.hold-demo { display: grid; gap: 14px; }
.hd-rundown { background: #15181e; border-radius: 12px; padding: 8px; color: #e9ecf2; box-shadow: 0 18px 40px -26px rgba(20, 33, 61, .6); }
.hd-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 76px 92px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; transition: background .4s, border-color .4s; }
.hd-row b { font-variant-numeric: tabular-nums; }
.hd-txt { font-weight: 700; font-size: .92rem; line-height: 1.2; min-width: 0; }
.hd-txt span { display: block; font-weight: 500; color: #8a93a4; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-state { justify-self: end; white-space: nowrap; font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; border: 1px solid #353c49; color: #8a93a4; }
.hd-row.on { background: #4f8cff1f; border-color: #4f8cff66; }
.hd-row.on .hd-state { background: var(--go); border-color: var(--go); color: #fff; }
.mini { aspect-ratio: 16 / 9; border-radius: 4px; display: grid; place-items: center; overflow: hidden; }
.mini em { font-style: normal; font-weight: 800; font-size: .58rem; letter-spacing: .02em; color: #fff; white-space: nowrap; }
.m-welcome { background: linear-gradient(135deg, #ffb000, #ff6a3d); }
.m-auto { background: radial-gradient(120% 90% at 0% 0%, #1d3a73 0%, #05070b 70%); }
.m-video { background: linear-gradient(135deg, #1f9d55, #0d5b8c); }
.hd-out { background: #232a36; border-radius: 14px; padding: 10px; }
.hd-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.hd-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 9%; opacity: 0; transition: opacity .8s ease; color: #fff; }
.hd-slide.on { opacity: 1; }
.hd-slide em { font-style: normal; font-weight: 800; font-stretch: 78%; font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1; }
.hd-slide small { margin-top: 8px; font-weight: 600; opacity: .85; font-size: clamp(.75rem, 1.3vw, .95rem); }
.hd-slide.m-welcome { align-items: center; text-align: center; }
.hd-slide .bar { width: 12%; height: 5px; border-radius: 3px; background: var(--amber); margin-bottom: 4%; }
@media (max-width: 560px) {
  .hd-row { grid-template-columns: 42px minmax(0, 1fr) 64px; gap: 8px; padding: 7px 8px; }
  .hd-row .hd-state { display: none; }
  .hd-row.on .mini { outline: 2px solid var(--go); outline-offset: 2px; }
  .hd-txt { font-size: .86rem; }
  .kicker { font-size: .7rem; }
}
.hd-label { text-align: center; color: #c9d1de; font-size: .8rem; font-weight: 600; margin-top: 8px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
@media (max-width: 960px) { .feature-grid { grid-template-columns: 1fr; } }
.feature p { color: var(--slate); margin: 8px 0 0; font-size: .97rem; }
.feature h3 { font-size: 1.25rem; margin-top: 18px; }
.fviz { height: 214px; border-radius: 12px; background: #15181e; color: #e9ecf2; padding: 14px 16px; overflow: hidden; display: flex; flex-direction: column; }
.sched-viz { gap: 6px; }
.sv-room { font-weight: 800; font-size: .82rem; color: #8a93a4; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.sv-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; background: #1c2028; border: 1px solid #2a303b; border-radius: 8px; padding: 6px 10px; font-size: .9rem; }
.sv-row b { font-variant-numeric: tabular-nums; }
.sv-row i { font-style: normal; color: #8a93a4; }
.sv-row.new { border-color: #ffb00099; }
.sv-row.new b { color: var(--amber); }
.sv-note { color: var(--amber); font-size: .78rem; font-weight: 600; padding-left: 4px; }
.door-viz { flex-direction: row; align-items: center; justify-content: center; gap: 14px; background: #e9edf3; }
.dv-land { width: 52%; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #0f1a33, #05070b); border: 5px solid #232a36; border-radius: 8px; padding: 8px 10px; color: #fff; display: flex; flex-direction: column; gap: 4px; }
.dv-land .dv-room { font-size: .8rem; }
.dv-screen { height: 100%; aspect-ratio: 9 / 16; background: linear-gradient(170deg, #0f1a33, #05070b); border: 5px solid #232a36; border-radius: 8px; padding: 9px 8px; display: flex; flex-direction: column; gap: 8px; color: #fff; }
.dv-room { font-weight: 800; font-stretch: 80%; font-size: .95rem; border-bottom: 1px solid #ffffff22; padding-bottom: 5px; }
.dv-now, .dv-next { display: flex; flex-direction: column; gap: 2px; font-size: .58rem; color: #c9d1de; }
.dv-now small, .dv-next small { font-weight: 800; letter-spacing: .1em; font-size: .5rem; color: #fff; background: var(--go); align-self: flex-start; padding: 1px 5px; border-radius: 3px; }
.dv-next small { background: #ffffff22; }
.dv-now b { color: #fff; font-size: .74rem; line-height: 1.1; }
.timer-viz { background: #000; align-items: center; justify-content: center; gap: 10px; }
.tv-time { font-weight: 800; font-stretch: 85%; font-size: 4.2rem; line-height: 1; color: var(--amber); font-variant-numeric: tabular-nums; }
.tv-bar { width: 80%; height: 6px; border-radius: 3px; background: #1c1f26; overflow: hidden; }
.tv-bar i { display: block; width: 20%; height: 100%; background: var(--amber); }
.tv-msg { background: var(--amber); color: #000; font-weight: 800; font-stretch: 80%; padding: 4px 12px; border-radius: 6px; font-size: .95rem; }

/* ---- sections ---- */
section.band { padding: 88px 0; border-top: 1px solid var(--line); }
section.band.white { background: var(--white); }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* rundown — the "how it works" sequence */
.rundown { margin-top: 40px; border-top: 2px solid var(--ink); }
.rundown-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rundown-row .when { font-weight: 800; font-stretch: 75%; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.rundown-row.live .when { color: var(--go); }
.rundown-row p { margin: 0; color: var(--slate); }
@media (max-width: 760px) { .rundown-row { grid-template-columns: 1fr; gap: 6px; } }

/* sample check report */
.report-sample { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 22px; box-shadow: 0 18px 40px -28px rgba(20, 33, 61, .45); }
.report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.report-head b { font-size: 1.05rem; }
.report-head span { color: var(--slate); font-size: .88rem; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 9px 0; font-size: .95rem; }
.check i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .78rem; color: #fff; margin-top: 1px; }
.check.err i { background: var(--stop); } .check.warn i { background: var(--amber); color: #000; } .check.info i { background: #6b7a90; } .check.ok i { background: var(--go); }
.check code { font-family: inherit; font-stretch: 85%; color: var(--slate); word-break: break-all; }

/* roles */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 2px solid var(--ink); }
.role { padding: 22px 24px 26px 0; border-bottom: 1px solid var(--line); }
.role p { margin: 6px 0 0; color: var(--slate); font-size: .96rem; }
@media (max-width: 900px) { .roles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .roles { grid-template-columns: 1fr; } }

/* offline */
.offline-points { list-style: none; padding: 0; margin: 0; }
.offline-points li { padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line); position: relative; }
.offline-points li::before { content: ""; position: absolute; left: 0; top: 21px; width: 14px; height: 14px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 4px rgba(31, 157, 85, .18); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .plans-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan .btn { white-space: normal; text-align: center; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 30px; display: flex; flex-direction: column; }
.plan.featured { border: 2px solid var(--ink); }
.plan .price { font-weight: 800; font-stretch: 72%; font-size: 3.4rem; line-height: 1; margin: 18px 0 4px; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 1.1rem; font-weight: 600; font-stretch: 100%; color: var(--slate); }
.plan .vat { color: var(--slate); font-size: .88rem; }
.plan ul { padding: 0; margin: 22px 0 28px; list-style: none; flex: 1; }
.plan li { padding: 7px 0 7px 26px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 3px solid var(--go); border-bottom: 3px solid var(--go); transform: rotate(-45deg); }
.trial-note { margin-top: 22px; color: var(--slate); }

/* data safety */
.safety { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; margin-top: 30px; }
.safety div { padding: 16px 0; border-top: 1px solid var(--line); }
.safety p { margin: 6px 0 0; color: var(--slate); font-size: .96rem; }
@media (max-width: 760px) { .safety { grid-template-columns: 1fr; } }

/* faq */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--slate); }
.faq details[open] summary::after { content: "–"; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { color: var(--slate); margin: 10px 0 0; }

/* footer */
footer { background: var(--ink); color: #c9d1de; padding: 48px 0; font-size: .92rem; }
footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
footer .logo { color: #fff; }
footer nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
footer a { color: #fff; text-decoration: none; }

/* ---- sign-in pages ---- */
.auth { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.auth main { display: grid; place-items: center; padding: 30px 20px 80px; }
.auth-card { width: min(440px, 100%); background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 34px; }
.auth-card h1 { font-size: 2.3rem; margin-bottom: 8px; }
.auth-card p.lead { color: var(--slate); margin: 0 0 22px; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.field input { width: 100%; font: inherit; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); }
.field input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(255, 176, 0, .45); }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--slate); margin: 4px 0 18px; }
.check-line input { margin-top: 4px; }
.auth-card .btn { width: 100%; }
.form-msg { min-height: 1.2em; margin: 0 0 12px; font-size: .92rem; }
.form-msg.err { color: var(--stop); } .form-msg.ok { color: var(--go); }
.auth-alt { margin-top: 18px; font-size: .94rem; color: var(--slate); text-align: center; }

/* legal pages */
.legal { padding: 30px 0 80px; }
.legal h1 { font-size: 3rem; margin-bottom: 20px; }
.legal h2 { font-size: 1.3rem; margin: 30px 0 8px; }
.legal-date { color: var(--slate); font-size: .92rem; margin-top: -10px; }
.legal p, .legal ul { max-width: var(--measure); }
.legal ul { padding-left: 1.2em; margin: 8px 0 12px; }
.legal li { margin: 6px 0; line-height: 1.55; }
.draft { background: #fff4d6; border: 1px solid #f0d58a; color: var(--amber-ink); padding: 12px 16px; border-radius: 8px; max-width: var(--measure); }

/* language picker (flags) */
.lang-pick { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lang-pick + .links { margin-left: 0; }
.lang-pick a { display: block; width: 26px; height: 18px; border-radius: 3px; overflow: hidden; opacity: .5; box-shadow: 0 0 0 1px rgba(20,33,61,.18); transition: opacity .15s, transform .15s; }
.lang-pick a:hover, .lang-pick a:focus-visible { opacity: 1; transform: translateY(-1px); }
.lang-pick a[aria-current] { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.lang-pick svg { display: block; width: 100%; height: 100%; }
@media (max-width: 560px) { .nav { gap: 12px; } .lang-pick { gap: 5px; } .lang-pick a { width: 22px; height: 15px; } .nav .links .btn.small { display: none; } }
@media (max-width: 420px) { .nav { gap: 10px; } .lang-pick { gap: 4px; } .lang-pick a { width: 20px; height: 14px; } }
@media (max-width: 380px) { .logo-mark { width: 32px; height: 32px; } .logo { font-size: 1.1rem; gap: 7px; } }