/* Portal Next — the one stylesheet. Tokens first; nothing below types a hex. */
:root {
  --bg: #F4F3F0; --inset: #F0EEE8; --panel: #FFFFFF; --raised: #FBFAF8;
  --line: #E4E1DA; --line2: #CFCBC2;
  --ink: #13203A; --ink2: #44506A; --cap: #66708A;
  --accent: #F0B942; --accent-soft: #FBF1D9; --accent-ink: #7A5200;
  --link: #2F5D8C; --focus: #3D6B9E; --btn: #0F1E3C; --btn-ink: #FFFFFF;
  --cos: #9B4D73; --cos-soft: #F6ECF1; --rp: #2F7D78; --rp-soft: #E6F2F1; --epr: #6B7F3A; --epr-soft: #EEF2E4;
  --s-you: #B8502A; --s-you-soft: #FBEFE8; --s-moving: #3D6B9E; --s-moving-soft: #E9EFF7;
  --s-waiting: #6E4B8E; --s-waiting-soft: #F0EBF5; --s-done: #4F7D4E; --s-done-soft: #E9F1E6;
  --sea: #FFFFFF; --land: #ECEAE3; --land-line: #DAD6CC;
  --font-text: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --r: 10px; --r-lg: 16px; --r-xl: 22px;
  --shadow: 0 1px 2px rgba(28,31,34,.04), 0 12px 32px rgba(28,31,34,.08);
  --shadow-lg: 0 2px 4px rgba(28,31,34,.06), 0 24px 64px rgba(28,31,34,.16);
  --ease: cubic-bezier(.2,.7,.2,1); --t-fast: 160ms; --t: 260ms; --t-slow: 480ms;
  --rail-w: 232px; --gap: 1rem; --pad: 1.25rem;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #15171A; --inset: #1A1D21; --panel: #1D2024; --raised: #24282D;
  --line: #2A2E33; --line2: #3A3F45;
  --ink: #ECEAE5; --ink2: #C2BFB8; --cap: #9C9A94;
  --accent: #F0B942; --accent-soft: #33291A; --accent-ink: #F3CB72;
  --link: #8EC2E6; --focus: #6BAEDB; --btn: #ECEAE5; --btn-ink: #15171A;
  --cos: #D08BAE; --cos-soft: #2E222A; --rp: #6FBDB7; --rp-soft: #1B2E2D; --epr: #A7BD74; --epr-soft: #262D1C;
  --s-you: #E0865A; --s-you-soft: #33241B; --s-moving: #8FB4E0; --s-moving-soft: #1C2838;
  --s-waiting: #B59BD6; --s-waiting-soft: #2A2335; --s-done: #8FC08F; --s-done-soft: #1F2D22;
  --sea: #1D2024; --land: #262A2F; --land-line: #343940;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.6);
  color-scheme: dark;
}
[data-density="compact"] { --pad: .875rem; --gap: .75rem; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font-text); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); }
h1, h2, h3, h4, p { margin: 0; }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em; }
h1.display { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); line-height: 1.05; }
h2.display { font-size: 1.5rem; line-height: 1.2; }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cap); }
.cap { color: var(--cap); font-size: .8125rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; letter-spacing: .02em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -3rem; background: var(--btn); color: var(--btn-ink); padding: .5rem .75rem; border-radius: var(--r); z-index: 100; }
.skip:focus { top: 1rem; }

/* ── shell ── */
.shell { display: flex; min-height: 100vh; }
.rail { width: var(--rail-w); flex: 0 0 var(--rail-w); padding: 1.25rem .875rem; display: flex; flex-direction: column; gap: 1.25rem; border-right: 1px solid var(--line); background: var(--bg); }
.brand { display: flex; align-items: center; gap: .625rem; padding: .25rem .5rem; font-weight: 600; letter-spacing: -.01em; }
.brand .mark { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-family: var(--font-display); font-size: 17px; }
.search { display: flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--cap); width: 100%; text-align: left; }
.search:hover { border-color: var(--line2); }
.search svg { width: 16px; height: 16px; flex: 0 0 16px; }
.kbd { margin-left: auto; font-size: .7rem; padding: .1rem .35rem; border: 1px solid var(--line2); border-radius: 5px; color: var(--cap); background: var(--raised); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; padding: 0 .75rem; border-radius: var(--r); color: var(--ink2); font-weight: 500; }
.nav a:hover { background: var(--inset); text-decoration: none; color: var(--ink); }
.nav a[aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 0 0 1px var(--line); }
.nav svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nav .count { margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.nav .count.quiet { background: transparent; color: var(--cap); font-weight: 500; }
.rail .foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.role { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.role select { border: 0; background: transparent; padding: 0; font-weight: 600; flex: 1; min-width: 0; }
.iconbtn { width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink2); }
.iconbtn:hover { border-color: var(--line2); color: var(--ink); }
.iconbtn svg { width: 18px; height: 18px; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: .875rem 2rem 0; }
.crumbs { display: flex; align-items: center; gap: .5rem; color: var(--cap); font-size: .875rem; }
.crumbs a { color: var(--cap); }
.topbar .spacer { flex: 1; }
.ask { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .875rem 0 .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-weight: 600; }
.ask canvas { width: 28px; height: 28px; }
.ask:hover { border-color: var(--line2); box-shadow: var(--shadow); }
.view { padding: 1rem 2rem 4rem; max-width: 1240px; width: 100%; }
.view.wide { max-width: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 1.5rem; }
.page-head .lede { margin-top: .5rem; color: var(--ink2); max-width: 58ch; }

/* ── components ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font-weight: 600; font-size: .9rem; white-space: nowrap; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast); }
.btn:hover { box-shadow: var(--shadow); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink2); }
.btn.ghost:hover { background: var(--inset); box-shadow: none; }
.btn.sm { min-height: 2.25rem; padding: 0 .75rem; font-size: .85rem; }
.btn svg { width: 16px; height: 16px; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--pad); }
.card.flat { box-shadow: none; }
.card + .card { margin-top: var(--gap); }
.card-title { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; height: 1.5rem; padding: 0 .55rem 0 .45rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--inset); color: var(--ink2); }
.chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }
.chip.you { background: var(--s-you-soft); color: var(--s-you); }
.chip.moving { background: var(--s-moving-soft); color: var(--s-moving); }
.chip.waiting { background: var(--s-waiting-soft); color: var(--s-waiting); }
.chip.done { background: var(--s-done-soft); color: var(--s-done); }
.chip.none { color: var(--cap); }
.chip.none::before { background: transparent; border: 1.5px solid currentColor; }
.chip.plain::before { display: none; }
.tag { display: inline-flex; align-items: center; height: 1.4rem; padding: 0 .5rem; border-radius: 6px; font-size: .75rem; font-weight: 600; background: var(--inset); color: var(--ink2); }
.svc { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.svc.epr { color: var(--epr); } .svc.rp { color: var(--rp); } .svc.cos { color: var(--cos); }
.spine { border-left: 3px solid var(--line2); padding-left: .875rem; }
.spine.epr { border-color: var(--epr); } .spine.rp { border-color: var(--rp); } .spine.cos { border-color: var(--cos); }
.avatar { width: 2rem; height: 2rem; border-radius: 999px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--ink); background: oklch(90% 0.05 var(--hue, 200)); border: 1px solid oklch(80% 0.07 var(--hue, 200)); flex: 0 0 auto; }
[data-theme="dark"] .avatar { background: oklch(32% 0.05 var(--hue, 200)); border-color: oklch(42% 0.07 var(--hue, 200)); color: var(--ink); }
.avatar.sm { width: 1.5rem; height: 1.5rem; font-size: .6rem; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.grid { display: grid; gap: var(--gap); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fact { padding: 1rem 1.25rem; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact .v { font-weight: 600; font-size: 1rem; margin-top: .25rem; line-height: 1.3; }
.fact .s { color: var(--cap); font-size: .8125rem; margin-top: .25rem; }
.fact .v.warn { color: var(--s-you); }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: 1.25rem 0 1rem; }
.tabs a { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem .875rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink2); font-weight: 500; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.tabs a .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--line2); }
.tabs a .dot.epr { background: var(--epr); } .tabs a .dot.rp { background: var(--rp); } .tabs a .dot.cos { background: var(--cos); }
.tabs a.off { color: var(--cap); }
details.fold { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem; padding: .875rem var(--pad); font-weight: 600; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .chev { margin-left: auto; transition: transform var(--t) var(--ease); color: var(--cap); }
details.fold[open] > summary .chev { transform: rotate(180deg); }
details.fold > .body { padding: 0 var(--pad) var(--pad); }
table.t { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.t th { text-align: left; font-weight: 600; color: var(--cap); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
table.t td { padding: .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.clickable { cursor: pointer; transition: background var(--t-fast); }
table.t tr.clickable:hover { background: var(--raised); }
table.t tr[aria-selected="true"] { background: var(--inset); }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.input { width: 100%; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--line2); border-radius: var(--r); background: var(--panel); }
.input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: -1px; }
label.lbl { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .375rem; }
.field + .field { margin-top: .875rem; }
.hr { height: 1px; background: var(--line); margin: 1rem 0; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--cap); }
.empty .display { color: var(--ink); font-size: 1.5rem; margin-bottom: .5rem; }

/* ── action items (Today, partner tasks): sentence and button together, never apart ── */
.items { display: flex; flex-direction: column; gap: .5rem; }
.item { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: .875rem 1rem .875rem 1.125rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); position: relative; transition: box-shadow var(--t-fast) var(--ease), transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.item::before { content: ""; position: absolute; left: 0; top: .875rem; bottom: .875rem; width: 3px; border-radius: 3px; background: var(--line2); }
.item.epr::before { background: var(--epr); } .item.rp::before { background: var(--rp); } .item.cos::before { background: var(--cos); }
.item:hover { box-shadow: var(--shadow); }
.item .text { max-width: 64ch; line-height: 1.45; }
.item .text b { font-weight: 600; }
.item .meta { grid-column: 1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--cap); font-size: .8125rem; }
.item .act { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: .625rem; }
.item .days { font-size: .8125rem; color: var(--cap); white-space: nowrap; }
.item .days.over { color: var(--s-you); font-weight: 600; }
.item.leaving { opacity: 0; transform: translateX(24px) scale(.98); }
.item.done-flash { background: var(--s-done-soft); border-color: transparent; }
.group-head { display: flex; align-items: center; gap: .625rem; margin: 1.5rem 0 .625rem; }
.group-head h2 { font-size: 1rem; font-weight: 600; }
.group-head .n { font-size: .78rem; font-weight: 700; color: var(--ink); background: var(--accent); min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px; display: grid; place-items: center; }
.group-head .n.quiet { background: var(--inset); color: var(--cap); }
.group-head .dot { width: .55rem; height: .55rem; border-radius: 999px; }
.group-head .hint { margin-left: auto; color: var(--cap); font-size: .8125rem; }
.more { align-self: flex-start; }

/* ── toasts ── */
.toasts { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 90; width: min(520px, calc(100vw - 2rem)); }
.toast { display: flex; align-items: center; gap: .75rem; padding: .75rem .75rem .75rem 1rem; background: var(--btn); color: var(--btn-ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: toast-in var(--t) var(--ease); position: relative; overflow: hidden; }
.toast .bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); width: 100%; transform-origin: left; animation: toast-bar linear forwards; }
.toast .btn { min-height: 2.125rem; padding: 0 .75rem; font-size: .85rem; background: transparent; color: inherit; border-color: color-mix(in oklab, var(--btn-ink) 35%, transparent); }
.toast .btn.undo { margin-left: auto; background: var(--accent); color: var(--ink); border-color: var(--accent); }
.toast.leaving { animation: toast-out var(--t-fast) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── command palette ── */
.palette-wrap { position: fixed; inset: 0; z-index: 95; display: grid; place-items: start center; padding-top: 12vh; background: color-mix(in oklab, var(--ink) 28%, transparent); backdrop-filter: blur(6px); animation: fade-in var(--t-fast) var(--ease); }
.palette { width: min(680px, calc(100vw - 2rem)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: rise var(--t) var(--ease); }
.palette input { width: 100%; border: 0; padding: 1.125rem 1.25rem; font-size: 1.05rem; background: transparent; outline: none; border-bottom: 1px solid var(--line); }
.palette ul { list-style: none; margin: 0; padding: .5rem; max-height: 56vh; overflow: auto; }
.palette li { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--r); cursor: pointer; }
.palette li[aria-selected="true"], .palette li:hover { background: var(--inset); }
.palette li .k { font-size: .72rem; color: var(--cap); margin-left: auto; }
.palette li .ico { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 8px; background: var(--inset); color: var(--ink2); }
.palette li .ico svg { width: 16px; height: 16px; }
.palette .hint { padding: .5rem 1rem .75rem; color: var(--cap); font-size: .78rem; display: flex; gap: 1rem; border-top: 1px solid var(--line); }

/* ── assist side panel ── */
.assist { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 80; transform: translateX(100%); transition: transform var(--t-slow) var(--ease); display: flex; flex-direction: column; }
.assist[data-open="true"] { transform: none; }
.assist .head { display: flex; align-items: center; gap: .625rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.assist .head canvas { width: 28px; height: 28px; }
.assist .body { padding: 1.25rem; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.assist .foot { padding: .875rem 1.25rem; border-top: 1px solid var(--line); color: var(--cap); font-size: .78rem; }
.ai-label { display: inline-flex; align-items: center; gap: .375rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); padding: .2rem .5rem; border-radius: 6px; }
.bubble { background: var(--inset); border-radius: var(--r-lg); padding: .875rem 1rem; line-height: 1.5; }
.bubble.q { background: transparent; border: 1px solid var(--line); }
.evidence { display: flex; flex-direction: column; gap: .375rem; }
.evidence a { display: flex; gap: .5rem; align-items: center; font-size: .85rem; }
.evidence a::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

/* ── messages ── */
.msg { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.msg .who { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.msg .who b { font-weight: 600; }
.msg .when { margin-left: auto; color: var(--cap); font-size: .8125rem; }
.msg .how { color: var(--cap); font-size: .8125rem; display: flex; gap: .375rem; align-items: center; margin: .125rem 0 .5rem; }
.msg .how svg { width: 14px; height: 14px; }
.msg p { line-height: 1.55; }
.msg .files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.filechip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .625rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); font-size: .85rem; }
.filechip svg { width: 14px; height: 14px; color: var(--cap); }
.msg.event { grid-template-columns: 2rem 1fr; color: var(--cap); font-size: .875rem; padding: .625rem 0; }
.msg.draft { background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent); border-radius: var(--r-lg); padding: 1rem; margin: .75rem 0; }
.composer { margin-top: 1rem; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--panel); }
.composer .to { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .625rem .875rem; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--cap); }
.composer textarea { width: 100%; border: 0; padding: .875rem; min-height: 5.5rem; resize: vertical; background: transparent; outline: none; }
.composer .bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border-top: 1px solid var(--line); }

/* ── map & hero strips ── */
.map-host { position: relative; width: 100%; min-height: 320px; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.map-host.hero { min-height: 360px; }
.map-host svg { display: block; width: 100%; height: 100%; }
.map-tip { position: absolute; pointer-events: none; background: var(--btn); color: var(--btn-ink); padding: .5rem .75rem; border-radius: var(--r); font-size: .8125rem; box-shadow: var(--shadow-lg); transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap; opacity: 0; transition: opacity var(--t-fast); }
.map-tip[data-show="true"] { opacity: 1; }
.map-legend { position: absolute; left: 1rem; bottom: .875rem; display: flex; gap: 1rem; font-size: .78rem; color: var(--cap); background: color-mix(in oklab, var(--panel) 80%, transparent); padding: .375rem .625rem; border-radius: 8px; backdrop-filter: blur(4px); }
.map-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.map-legend i { width: .55rem; height: .55rem; border-radius: 999px; display: inline-block; }
.stat-strip { display: flex; gap: 2rem; flex-wrap: wrap; padding: 1rem 0 0; color: var(--cap); font-size: .85rem; }
.stat-strip b { color: var(--ink); font-weight: 600; font-size: 1.25rem; font-family: var(--font-display); margin-right: .375rem; }

/* ── motion ── */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { animation: rise var(--t-slow) var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms } .stagger > *:nth-child(2) { animation-delay: 50ms } .stagger > *:nth-child(3) { animation-delay: 100ms }
.stagger > *:nth-child(4) { animation-delay: 150ms } .stagger > *:nth-child(5) { animation-delay: 200ms } .stagger > *:nth-child(6) { animation-delay: 250ms }
.stagger > *:nth-child(n+7) { animation-delay: 300ms }
.pulse { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
::view-transition-old(root) { animation: 180ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 260ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.vt-fade { animation: fade-in var(--t) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── responsive ── */
@media (max-width: 1024px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact:nth-child(2) { border-right: 0; } .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .shell { flex-direction: column; }
  .rail { width: auto; flex: none; border-right: 0; padding: .75rem 1rem 0; gap: .75rem; }
  .rail .nav { flex-direction: row; overflow-x: auto; gap: .25rem; padding-bottom: .5rem; margin: 0 -1rem; padding-left: 1rem; }
  .rail .nav a { white-space: nowrap; }
  .rail .nav .count { margin-left: .375rem; }
  .rail .foot { display: none; }
  .topbar { padding: .75rem 1rem 0; }
  .view { padding: .75rem 1rem 5rem; }
  .facts { grid-template-columns: 1fr; } .fact { border-right: 0; border-bottom: 1px solid var(--line); } .fact:last-child { border-bottom: 0; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .item { grid-template-columns: 1fr; }
  .item .act { grid-column: 1; grid-row: auto; justify-content: space-between; margin-top: .5rem; }
  .item .act .btn { flex: 1; }
  .page-head { margin-bottom: 1rem; }
  table.t.cards thead { display: none; }
  table.t.cards tr { display: block; border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: .625rem; padding: .5rem .75rem; background: var(--panel); }
  table.t.cards td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .375rem 0; }
  table.t.cards td::before { content: attr(data-l); color: var(--cap); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
  .tabs { overflow-x: auto; }
  .assist { width: 100vw; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   V2 — THE ATLAS SYSTEM. A dark navy-and-gold band heads every main screen; the content below stays warm and light.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --band: #0B1730; --band-2: #122648; --band-3: #16305A; --band-ink: #F3F1EA; --band-ink2: #C9D3E6; --band-cap: #8FA3C6;
  --band-line: rgba(255,255,255,.10); --band-glass: rgba(255,255,255,.06); --band-glass-2: rgba(255,255,255,.10);
  --gold: #F0B942; --gold-2: #FFD56A; --gold-ink: #3A2A00;
  --glow-you: rgba(224,134,90,.5); --glow-moving: rgba(143,180,224,.45); --glow-waiting: rgba(181,155,214,.45); --glow-done: rgba(143,192,143,.4);
}
[data-theme="dark"] { --band: #0A1428; --band-2: #0F1F3F; --band-3: #16305C; }

/* the band */
.band { position: relative; color: var(--band-ink); background: radial-gradient(1200px 520px at 18% -10%, var(--band-3) 0%, transparent 60%), radial-gradient(900px 480px at 92% 110%, #183566 0%, transparent 55%), linear-gradient(160deg, var(--band) 0%, var(--band-2) 100%); border-radius: var(--r-xl); overflow: hidden; isolation: isolate; box-shadow: var(--shadow-lg); }
.band::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E"); opacity: .6; pointer-events: none; z-index: 0; }
.band > * { position: relative; z-index: 1; }
.band .eyebrow { color: var(--band-cap); }
.band .cap { color: var(--band-cap); }
.band h1, .band h2 { color: var(--band-ink); }
.band a { color: var(--band-ink2); }
.band .btn { background: var(--band-glass-2); border-color: var(--band-line); color: var(--band-ink); backdrop-filter: blur(8px); }
.band .btn:hover { background: rgba(255,255,255,.16); }
.band .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.band .btn.gold:hover { background: var(--gold-2); }
.band .map-host { --map-fill-opacity: .42; --sea: transparent; --land: rgba(255,255,255,.07); --land-line: rgba(255,255,255,.12); --panel: transparent; --inset: rgba(255,255,255,.07); --line: rgba(255,255,255,.12); --cap: var(--band-cap); --ink: var(--band-ink); background: transparent; border: 0; border-radius: 0; }
.band .map-legend { background: rgba(10,20,40,.55); color: var(--band-ink2); border: 1px solid var(--band-line); }
.band .map-tip { background: var(--band-ink); color: var(--band); }

/* glass tiles */
.glass { background: var(--band-glass); border: 1px solid var(--band-line); border-radius: var(--r-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 1rem 1.125rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform var(--t) var(--ease), background var(--t); }
.glass:hover { background: var(--band-glass-2); transform: translateY(-2px); }
.glass .k { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--band-cap); }
.glass .n { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; margin: .35rem 0 .25rem; color: var(--band-ink); font-variant-numeric: tabular-nums; }
.glass .n.gold { color: var(--gold); }
.glass .s { color: var(--band-ink2); font-size: .85rem; }
.glass.you .n { color: #F3B48E; } .glass.moving .n { color: #A9C6EC; } .glass.waiting .n { color: #CDB9E6; } .glass.done .n { color: #A9D4A8; }

/* ticker */
.ticker { position: relative; overflow: hidden; border-top: 1px solid var(--band-line); padding: .625rem 0; font-size: .85rem; color: var(--band-ink2); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker .track { display: inline-flex; gap: 3rem; white-space: nowrap; animation: ticker 48s linear infinite; padding-left: 100%; }
.ticker:hover .track { animation-play-state: paused; }
.ticker .ev { display: inline-flex; align-items: center; gap: .5rem; }
.ticker .ev i { width: .5rem; height: .5rem; border-radius: 999px; display: inline-block; }
.ticker .ev b { color: var(--band-ink); font-weight: 600; }
.ticker .ev .t { color: var(--band-cap); }
@keyframes ticker { to { transform: translateX(-100%); } }

/* progress rings */
.ring { --p: 0; --c: var(--s-moving); --track: var(--line); width: 56px; height: 56px; display: inline-grid; place-items: center; position: relative; flex: 0 0 auto; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .tr { stroke: var(--track); }
.ring .pr { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset 1.2s var(--ease), stroke var(--t); }
.ring .v { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ring.lg { width: 84px; height: 84px; } .ring.lg .v { font-size: 1.1rem; }
.ring.sm { width: 36px; height: 36px; } .ring.sm .v { font-size: .6rem; }
.band .ring { --track: rgba(255,255,255,.14); color: var(--band-ink); }

/* status ribbons and colour on rows */
.item { grid-template-columns: auto 1fr auto; padding-left: .875rem; }
.item::before { display: none; }
.item .rib { grid-row: 1 / span 2; width: 6px; align-self: stretch; border-radius: 6px; background: var(--line2); }
.item.s-you .rib { background: var(--s-you); box-shadow: 0 0 0 4px var(--s-you-soft); }
.item.s-moving .rib { background: var(--s-moving); box-shadow: 0 0 0 4px var(--s-moving-soft); }
.item.s-waiting .rib { background: var(--s-waiting); box-shadow: 0 0 0 4px var(--s-waiting-soft); }
.item.s-done .rib { background: var(--s-done); box-shadow: 0 0 0 4px var(--s-done-soft); }
.item .text { grid-column: 2; }
.item .meta { grid-column: 2; }
.item .act { grid-column: 3; }
.item .who { display: inline-flex; align-items: center; gap: .375rem; }
.item.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.item.s-you .btn.primary { background: var(--s-you); border-color: var(--s-you); color: #fff; }
.cc { display: inline-flex; align-items: center; gap: .35rem; height: 1.4rem; padding: 0 .5rem 0 .35rem; border-radius: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; background: var(--inset); color: var(--ink2); }
.cc i { width: .5rem; height: .5rem; border-radius: 2px; background: var(--line2); }
.cc.you { background: var(--s-you-soft); color: var(--s-you); } .cc.you i { background: var(--s-you); }
.cc.moving { background: var(--s-moving-soft); color: var(--s-moving); } .cc.moving i { background: var(--s-moving); }
.cc.waiting { background: var(--s-waiting-soft); color: var(--s-waiting); } .cc.waiting i { background: var(--s-waiting); }
.cc.done { background: var(--s-done-soft); color: var(--s-done); } .cc.done i { background: var(--s-done); }
.pill-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--inset); border: 1px solid var(--line); }
.pill-tabs a { display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 1rem; border-radius: 999px; color: var(--ink2); font-weight: 600; font-size: .9rem; transition: background var(--t-fast), color var(--t-fast); }
.pill-tabs a:hover { color: var(--ink); text-decoration: none; }
.pill-tabs a[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.pill-tabs a.off { color: var(--cap); opacity: .7; }
.bar6 { display: flex; gap: 3px; height: 8px; }
.bar6 i { flex: 1; border-radius: 3px; background: var(--line); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; }
.bar6 i.you { background: var(--s-you); } .bar6 i.moving { background: var(--s-moving); } .bar6 i.waiting { background: var(--s-waiting); } .bar6 i.done { background: var(--s-done); }
@keyframes grow { from { transform: scaleX(0); } }
.card.lift { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.card.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card.tint-epr { background: linear-gradient(180deg, var(--epr-soft), var(--panel) 60%); }
.card.tint-rp { background: linear-gradient(180deg, var(--rp-soft), var(--panel) 60%); }
.card.tint-cos { background: linear-gradient(180deg, var(--cos-soft), var(--panel) 60%); }
.glow-you { box-shadow: 0 0 0 1px var(--s-you-soft), 0 8px 30px -8px var(--glow-you); }
.rail .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold), 0 1px 0 var(--line), 0 0 0 1px var(--line); }
.doc { display: inline-grid; place-items: center; width: 40px; height: 48px; border-radius: 8px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: #fff; position: relative; flex: 0 0 auto; }
.doc::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: rgba(255,255,255,.35); border-bottom-left-radius: 6px; }
.doc.pdf { background: #B8502A; } .doc.xlsx { background: #4F7D4E; } .doc.docx { background: #3D6B9E; } .doc.img { background: #6E4B8E; } .doc.num { background: var(--ink); }
.band-wrap { margin: 0 -2rem; padding: 0 2rem; }
@media (max-width: 767px) { .band-wrap { margin: 0 -1rem; padding: 0 1rem; } .glass .n { font-size: 1.8rem; } .item { grid-template-columns: auto 1fr; } .item .act { grid-column: 2; } }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   V3 — ALIVE, NATIVE, CAPABLE (7 Oct 2026). Per-element view transitions, the live cluster, spotlight, scroll.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* chrome stays put between routes; only the content and the clicked thing move */
.rail { view-transition-name: rail; }
.topbar { view-transition-name: topbar; }
.assist { view-transition-name: assist; }
.toasts { view-transition-name: toasts; }
.view .band { view-transition-name: band; }
.band .band, [data-vt-none] { view-transition-name: none !important; }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease); }
::view-transition-group(root) { animation-duration: 240ms; }
::view-transition-old(band), ::view-transition-new(band), ::view-transition-old(panel), ::view-transition-new(panel) { height: 100%; width: 100%; object-fit: cover; object-position: center top; overflow: clip; }
::view-transition-image-pair(band), ::view-transition-image-pair(panel) { isolation: auto; border-radius: var(--r-xl); overflow: clip; }
::view-transition-old(title), ::view-transition-new(title) { height: 100%; width: auto; object-fit: contain; object-position: left center; }
::view-transition-old(title) { animation: 200ms var(--ease) both vt-title-out; }
::view-transition-new(title) { animation: 320ms var(--ease) both vt-title-in; }
@keyframes vt-title-out { to { opacity: 0; } }
@keyframes vt-title-in { from { opacity: 0; } }

/* the rail's language select and the link to the system page */
.rail .lang { display: flex; align-items: center; gap: .5rem; color: var(--cap); }
.rail .lang svg { width: 16px; height: 16px; flex: 0 0 16px; }
.rail .lang select { flex: 1; min-width: 0; min-height: 2.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 0 .5rem; color: var(--ink); font-size: .8125rem; }
.rail .sys { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--cap); padding: .25rem .25rem; }
.rail .sys svg { width: 14px; height: 14px; }
.rail .sys:hover { color: var(--ink); text-decoration: none; }

/* the live cluster in the top bar */
.live { display: flex; align-items: center; gap: .625rem; }
.live:empty { display: none; }
.live .who { display: flex; align-items: center; }
.live .who a { display: inline-flex; position: relative; margin-left: -7px; border-radius: 999px; transition: transform var(--t-fast) var(--ease); }
.live .who a:first-child { margin-left: 0; }
.live .who a:hover { transform: translateY(-2px); z-index: 1; }
.live .who .avatar { box-shadow: 0 0 0 2px var(--bg); }
.live .dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 999px; background: var(--s-done); border: 2px solid var(--bg); animation: breathe 2.6s var(--ease) infinite; }
.live .state { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .75rem 0 .625rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: .78rem; font-weight: 600; color: var(--ink2); }
.live .state:hover { border-color: var(--line2); box-shadow: var(--shadow); }
.live .state i { width: .5rem; height: .5rem; border-radius: 999px; background: var(--s-done); animation: breathe 2.6s var(--ease) infinite; }
.live[data-paused="true"] .state i, .live[data-paused="true"] .dot { background: var(--cap); animation: none; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.65); opacity: .5; } }
.toast .avatar.sm { flex: 0 0 auto; }
.toast > span { display: inline-flex; align-items: center; gap: .625rem; }
.toast a { color: var(--accent); font-weight: 600; }

/* spotlight on glass tiles: a soft light that follows the pointer */
.glass { position: relative; overflow: hidden; }
.glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t) var(--ease); background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 62%); }
.glass:hover::after { opacity: 1; }

/* scroll-driven: the band's map lags the page (parallax) and the top bar turns to glass once you scroll */
.topbar { border-bottom: 1px solid transparent; }
@supports (animation-timeline: scroll()) {
  .view .band .map-host { animation: band-parallax linear both; animation-timeline: scroll(root); animation-range: 0 560px; }
  @keyframes band-parallax { to { transform: translateY(84px); opacity: .3; } }
  .topbar { position: sticky; top: 0; z-index: 30; animation: topbar-solid linear both; animation-timeline: scroll(root); animation-range: 0 72px; padding-bottom: .5rem; }
  @keyframes topbar-solid { to { background: color-mix(in oklab, var(--bg) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); } }
}

/* the keyboard sheet */
.sheet { width: min(560px, calc(100vw - 2rem)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 1.25rem 1.5rem 1.5rem; animation: rise var(--t) var(--ease); }
.sheet h2 { font-size: 1.125rem; margin-bottom: .875rem; display: flex; align-items: center; }
.sheet h2 .iconbtn { margin-left: auto; }
.sheet dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.25rem; margin: 0; align-items: center; }
.sheet dt { display: flex; gap: .25rem; } .sheet dt .kbd { margin: 0; }
.sheet dd { margin: 0; color: var(--ink2); }
@media (max-width: 767px) { .live .state span { display: none; } .live .state { padding: 0 .5rem; } .rail .lang { display: none; } }
/* phone: the top bar must never widen the viewport — crumbs truncate, the Ask key hint goes */
@media (max-width: 767px) {
  .topbar { gap: .5rem; min-width: 0; }
  .crumbs { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ask .kbd { display: none; }
  .ask { padding-right: .75rem; }
}
@media (max-width: 767px) { .crumbs > :not(:last-child) { display: none; } }

/* ═══ V4 — people, permissions, files. Gated pieces hide without the permission; the views also never render the data. ═══ */
:root[data-can-ai="false"] [data-needs="ai"] { display: none !important; }
:root[data-can-economics="false"] [data-needs="economics"] { display: none !important; }
.switch { position: relative; width: 2.5rem; height: 1.5rem; border-radius: 999px; background: var(--line2); border: 0; padding: 0; cursor: pointer; transition: background var(--t-fast) var(--ease); flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t-fast) var(--ease); }
.switch[aria-checked="true"] { background: var(--s-done); }
.switch[aria-checked="true"]::after { transform: translateX(1rem); }
.switch[disabled], .switch[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.note-msg { background: var(--accent-soft); border: 1px dashed color-mix(in oklab, var(--accent) 55%, transparent); border-radius: var(--r-lg); }
.money { font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.aud { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cap); padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 999px; }
.aud.desk { color: var(--s-you); border-color: color-mix(in oklab, var(--s-you) 40%, transparent); }
.aud.partner { color: var(--s-waiting); border-color: color-mix(in oklab, var(--s-waiting) 40%, transparent); }
.comment { display: flex; gap: .625rem; align-items: flex-start; margin-top: .5rem; padding: .625rem .75rem; background: var(--inset); border-radius: var(--r); font-size: .875rem; color: var(--ink2); }
.comment .avatar { flex: 0 0 auto; }
.comment b { color: var(--ink); font-weight: 600; }

/* ═══ V5 — layout: collapsible menu, full width, the assistant docks beside the work, a visible Ask AI ═══ */
.view { max-width: none; }
.rail { transition: width var(--t) var(--ease), flex-basis var(--t) var(--ease); }
.rail .top { display: flex; align-items: center; gap: .25rem; }
.rail .top .brand { flex: 1; min-width: 0; }
.rail .rail-toggle { width: 2.25rem; height: 2.25rem; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--cap); }
.rail .rail-toggle:hover { background: var(--inset); color: var(--ink); }
.rail .rail-toggle svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.rail .nav a, .rail .search, .rail .sys { white-space: nowrap; overflow: hidden; }
@media (min-width: 768px) {
  :root[data-rail="collapsed"] { --rail-w: 72px; }
  :root[data-rail="collapsed"] .rail { padding-left: .625rem; padding-right: .625rem; align-items: stretch; }
  :root[data-rail="collapsed"] .rail .top { flex-direction: column; gap: .5rem; }
  :root[data-rail="collapsed"] .rail .brand > span:not(.mark), :root[data-rail="collapsed"] .rail .search > span, :root[data-rail="collapsed"] .rail .nav a > span:not(.count),
  :root[data-rail="collapsed"] .rail .sys > span, :root[data-rail="collapsed"] .rail .lang, :root[data-rail="collapsed"] .rail .role select { display: none; }
  :root[data-rail="collapsed"] .rail .brand { justify-content: center; padding: .25rem 0; }
  :root[data-rail="collapsed"] .rail .search { justify-content: center; padding: 0; }
  :root[data-rail="collapsed"] .rail .nav a { justify-content: center; padding: 0; position: relative; }
  :root[data-rail="collapsed"] .rail .nav .count { position: absolute; top: .25rem; right: .25rem; margin: 0; min-width: 1rem; height: 1rem; font-size: .62rem; padding: 0 .25rem; }
  :root[data-rail="collapsed"] .rail .nav .count.quiet { display: none; }
  :root[data-rail="collapsed"] .rail .foot .row { flex-direction: column; }
  :root[data-rail="collapsed"] .rail .role { justify-content: center; cursor: pointer; }
  :root[data-rail="collapsed"] .rail .sys { justify-content: center; }
  :root[data-rail="collapsed"] .rail .rail-toggle svg { transform: rotate(180deg); }
}
@media (max-width: 767px) { .rail .rail-toggle { display: none; } }

/* the assistant docks as a column beside the work on wide screens; on phones it still slides over */
@media (min-width: 1025px) {
  .assist { position: sticky; top: 0; right: auto; bottom: auto; height: 100vh; max-height: 100vh; flex: 0 0 0px; width: 0; transform: none; overflow: hidden; border-left: 0; box-shadow: none; transition: flex-basis var(--t-slow) var(--ease), width var(--t-slow) var(--ease), border-color var(--t-slow); }
  .assist[data-open="true"] { flex-basis: 440px; width: 440px; border-left: 1px solid var(--line); }
  .assist > * { width: 440px; flex-shrink: 0; }
  .assist .body { flex: 1 1 auto; min-height: 0; }
}

/* the Ask AI button: gold, breathing, impossible to miss */
.ask { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink); height: 2.75rem; padding: 0 1rem 0 .5rem; font-weight: 700; position: relative; isolation: isolate; }
.ask:hover { background: color-mix(in oklab, var(--accent) 35%, var(--panel)); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ask::before { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid var(--accent); opacity: 0; pointer-events: none; animation: ask-pulse 2.6s var(--ease) infinite; }
@keyframes ask-pulse { 0% { opacity: .9; transform: scale(.96); } 70% { opacity: 0; transform: scale(1.22); } 100% { opacity: 0; transform: scale(1.22); } }
.ask .kbd { background: transparent; border-color: color-mix(in oklab, var(--accent) 60%, transparent); color: var(--accent-ink); }
[data-theme="dark"] .ask { color: var(--ink); }

/* ═══ V5.1 — height-aware first screen. On a short viewport (a 13-inch laptop) the band compresses so the first actions
   sit above the fold; nothing is scaled, only the band's own sizes. html[data-short] is set by the shell from the viewport. ═══ */
html[data-short="true"] { --pad: .875rem; --gap: .75rem; }
html[data-short="true"] .topbar { padding-top: .5rem; }
html[data-short="true"] .view { padding-top: .625rem; }
html[data-short="true"] .view .band { min-height: 0 !important; }
html[data-short="true"] .view .band h1.display { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.9rem) !important; line-height: 1.08; }
html[data-short="true"] .view .band .lede, html[data-short="true"] .view .band p.lede, html[data-short="true"] .view .band > * > p:not(.cap) { font-size: .9rem; }
html[data-short="true"] .view .band .glass { padding: .55rem .8rem; border-radius: 12px; }
html[data-short="true"] .view .band .glass .k { font-size: .62rem; letter-spacing: .06em; }
html[data-short="true"] .view .band .glass .n { font-size: 1.55rem; margin: .15rem 0 .1rem; }
html[data-short="true"] .view .band .glass .s { font-size: .76rem; line-height: 1.3; }
html[data-short="true"] .view .band .ring.lg { --size: 64px; }
html[data-short="true"] .view .band .map-host, html[data-short="true"] .view .band .band-map .map-host { height: clamp(210px, 34vh, 300px) !important; min-height: 0 !important; }
html[data-short="true"] .view .band .ticker { font-size: .72rem; }
html[data-short="true"] .view .band .ticker .ev { padding-top: .35rem; padding-bottom: .35rem; }
/* Today: a wider copy column and the four tiles in one row, so the band ends where the list begins */
html[data-short="true"] .view .band:has(.band-map) { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr) !important; }
html[data-short="true"] .view .band .band-copy { padding-top: 1rem !important; padding-bottom: 1rem !important; gap: .5rem !important; }
html[data-short="true"] .view .band .band-copy .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .5rem !important; }
html[data-short="true"] .view .band .band-copy .tiles .glass:nth-child(5) { grid-column: span 4; display: flex; align-items: baseline; gap: .75rem; }
html[data-short="true"] .view .band .band-copy .tiles .glass:nth-child(5) .n { margin: 0; }
html[data-short="true"] .view .band .band-acts { margin-top: .25rem !important; }
/* client record, tracker, clients: shorter maps and tighter tile grids */
html[data-short="true"] .view .band .tiles { gap: .5rem !important; }
html[data-short="true"] .view .band .facts { gap: .5rem !important; }
@media (max-width: 767px) { html[data-short="true"] .view .band .map-host { height: 220px !important; } html[data-short="true"] .view .band .band-copy .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
html[data-short="true"] .view .band .glass .s { display: none; }
html[data-short="true"] .view .band .band-copy { padding-top: .75rem !important; padding-bottom: .75rem !important; }
html[data-short="true"] .view .band .band-copy .tiles .glass:nth-child(5) .s { display: inline; }
html[data-short="true"] .view .band .band-copy .tiles .glass:nth-child(5) .k { display: none; }

/* ═══ V6 — who is who: every avatar carries a role ring, and a role tag can sit beside any name ═══ */
:root { --role-owner: var(--gold); --role-manager: #2E4A7A; --role-staff: var(--rp); --role-contractor: #5B8F8A; --role-partner: var(--s-waiting); --role-customer: var(--s-done); }
[data-theme="dark"] { --role-manager: #8FB4E0; }
.avatar[data-role] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--role-c, transparent); }
.avatar[data-role="owner"] { --role-c: var(--role-owner); } .avatar[data-role="manager"] { --role-c: var(--role-manager); } .avatar[data-role="staff"] { --role-c: var(--role-staff); }
.avatar[data-role="contractor"] { --role-c: var(--role-contractor); } .avatar[data-role="partner"] { --role-c: var(--role-partner); } .avatar[data-role="customer"] { --role-c: var(--role-customer); }
.avatar.sm[data-role] { box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 3px var(--role-c, transparent); }
.rtag { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .45rem; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--role-c, var(--cap)); vertical-align: middle; white-space: nowrap; }
.rtag.owner { --role-c: var(--role-owner); color: var(--gold-ink); } .rtag.manager { --role-c: var(--role-manager); } .rtag.staff { --role-c: var(--role-staff); }
.rtag.contractor { --role-c: var(--role-contractor); } .rtag.partner { --role-c: var(--role-partner); } .rtag.customer { --role-c: var(--role-customer); }
.who-line { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.who-line .nm { font-weight: 600; }
.legend-roles { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .78rem; color: var(--cap); align-items: center; }

/* ═══ V6 — the shared document sheets and the notification bell ═══ */
dialog.docsheet { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); color: var(--ink); padding: 0; width: min(600px, calc(100vw - 2rem)); max-height: min(88vh, 900px); box-shadow: var(--shadow-lg); }
dialog.docsheet.wide { width: min(720px, calc(100vw - 2rem)); }
dialog.docsheet::backdrop { background: color-mix(in oklab, var(--ink) 30%, transparent); backdrop-filter: blur(4px); }
dialog.docsheet .ds { display: flex; flex-direction: column; max-height: inherit; }
dialog.docsheet header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem .5rem; } dialog.docsheet header h2 { font-size: 1.35rem; flex: 1; }
dialog.docsheet > .ds > .cap { padding: 0 1.25rem .5rem; }
dialog.docsheet .body { padding: .25rem 1.25rem 1rem; overflow: auto; display: flex; flex-direction: column; gap: .5rem; }
dialog.docsheet footer { display: flex; align-items: center; gap: .625rem; padding: .875rem 1.25rem 1.125rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
dialog.docsheet .err { color: var(--s-you); font-size: .85rem; }
dialog.docsheet .lbl { font-size: .8rem; font-weight: 600; margin-top: .5rem; }
dialog.docsheet .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
dialog.docsheet .plist { display: flex; flex-direction: column; gap: .25rem; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); padding: .25rem; }
dialog.docsheet .prow { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: 8px; cursor: pointer; min-height: 44px; }
dialog.docsheet .prow:hover { background: var(--inset); } dialog.docsheet .prow.off { opacity: .5; cursor: not-allowed; }
dialog.docsheet .prow .nm { font-weight: 600; } dialog.docsheet .prow .cap { margin-left: auto; text-align: right; }
dialog.docsheet .aud { display: flex; flex-wrap: wrap; gap: .5rem 1rem; } dialog.docsheet .aud label, dialog.docsheet .chk { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
@media (max-width: 600px) { dialog.docsheet .grid2 { grid-template-columns: 1fr; } }
/* the bell */
.bell { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); display: inline-grid; place-items: center; color: var(--ink2); }
.bell:hover { border-color: var(--line2); box-shadow: var(--shadow); }
.bell svg { width: 20px; height: 20px; }
.bell .n { position: absolute; top: -4px; right: -4px; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: var(--s-you); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.notif-wrap { position: fixed; inset: 0; z-index: 94; }
.notif { position: absolute; top: 4rem; right: 1.5rem; width: min(440px, calc(100vw - 2rem)); max-height: min(70vh, 640px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: rise var(--t) var(--ease); }
.notif header { display: flex; align-items: center; gap: .5rem; padding: .875rem 1rem .5rem; position: sticky; top: 0; background: var(--panel); } .notif header b { flex: 1; }
.notif ul { list-style: none; margin: 0; padding: .25rem .5rem .75rem; display: flex; flex-direction: column; gap: .125rem; }
.notif li a { display: grid; grid-template-columns: auto 1fr; gap: .625rem; padding: .625rem .625rem; border-radius: var(--r); color: var(--ink); text-decoration: none; align-items: start; }
.notif li a:hover { background: var(--inset); }
.notif li.unread a { background: color-mix(in oklab, var(--accent) 10%, var(--panel)); }
.notif li .t { line-height: 1.35; } .notif li .m { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--cap); font-size: .76rem; margin-top: .2rem; align-items: center; }
.notif li .m .rtag { height: 1.05rem; font-size: .58rem; }
.notif .none { padding: 1rem; color: var(--cap); }
@media (max-width: 767px) { .notif { top: 3.5rem; right: .5rem; left: .5rem; width: auto; } }

/* ═══ translation: the simulated call and its label ═══ */
.spinner { display: inline-block; width: 14px; height: 14px; border-radius: 999px; border: 2px solid color-mix(in oklab, currentColor 30%, transparent); border-top-color: currentColor; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.tr-btn svg { width: 14px; height: 14px; }
.tr-note { font-size: .74rem; color: var(--cap); display: inline-flex; align-items: center; gap: .35rem; }
.tr-note::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: var(--accent); }

/* ═══ V10 grow your plan ═══ */
/* the demo's language toggle, above the band on every customer page */
.demo-lang { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .375rem; margin: 0 0 .75rem; font-size: .8125rem; color: var(--cap); }
.demo-lang > span { margin-right: .25rem; }
.demo-lang .btn { border-radius: 999px; padding: 0 .875rem; }
.demo-lang .btn[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
@media (max-width: 767px) { .demo-lang { justify-content: flex-start; } .demo-lang > span { flex-basis: 100%; } .demo-lang .btn { min-height: 2.75rem; flex: 1 1 auto; } }
/* the panel: what you have, and the cards */
.plan { margin-top: var(--gap); }
.plan h2.display { margin: .25rem 0 0; }
.plan .plan-sub { font-size: .875rem; font-weight: 600; color: var(--ink2); margin: 1.25rem 0 .5rem; }
.plan.quiet { margin-top: var(--gap); } .plan.quiet .plan-sub { margin-top: 0; }
.plan .have { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.plan .have li { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .75rem; padding: .625rem .875rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); min-width: 0; }
.plan .have .cap { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.plan .dot { width: .625rem; height: .625rem; border-radius: 999px; background: var(--line2); flex: 0 0 auto; display: inline-block; }
.plan .dot.epr { background: var(--epr); } .plan .dot.rp { background: var(--rp); } .plan .dot.cos { background: var(--cos); }
.plan .offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--gap); }
.plan .plan-foot { margin-top: .875rem; }
.offer { --svc: var(--line2); display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: 1rem 1.125rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.offer.rp { --svc: var(--rp); } .offer.cos { --svc: var(--cos); } .offer.epr { --svc: var(--epr); }
.offer .pill { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); border-left: 3px solid var(--svc); padding: .125rem 0 .125rem .5rem; }
.offer h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.offer .line { color: var(--ink2); }
.offer .note { color: var(--cap); font-size: .8125rem; }
.offer .price { margin-top: auto; padding-top: .625rem; border-top: 1px dashed var(--line); font-size: .8125rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.offer .btn { align-self: flex-start; max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; padding-top: .5rem; padding-bottom: .5rem; }
.plan .btn.gold, .co .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.plan .btn.gold:hover, .co .btn.gold:hover { background: var(--gold-2); }
.plan .btn[disabled], .co .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
/* the checkout */
dialog.docsheet.co { width: min(1000px, calc(100vw - 2rem)); }
.co .co-steps { list-style: none; margin: 0; padding: 0 1.25rem .5rem; display: flex; flex-wrap: wrap; gap: .375rem; }
.co .co-steps li { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .125rem .75rem .125rem .25rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8125rem; color: var(--cap); }
.co .co-steps .n { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: inline-grid; place-items: center; border: 1.5px solid var(--line2); font-weight: 700; font-size: .75rem; }
.co .co-steps .n svg { width: 13px; height: 13px; }
.co .co-steps li[aria-current="step"] { color: var(--ink); border-color: var(--ink2); font-weight: 600; }
.co .co-steps li[aria-current="step"] .n { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.co .co-steps li.done .n { background: var(--s-done); border-color: var(--s-done); color: var(--panel); }
@media (max-width: 600px) { .co .co-steps li:not([aria-current]) .l { display: none; } .co .co-steps li:not([aria-current]) { padding-right: .25rem; } }
.co .co-body { gap: .75rem; }
.co .co-k { margin: 0; }
.co .co-grid { display: grid; gap: 1rem 1.5rem; min-width: 0; }
.co .co-main { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 900px) { .co .co-grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .co .co-sum { position: sticky; top: 0; } }
.co h3 { font-size: 1rem; font-weight: 600; margin-top: .75rem; } .co .co-main > h3:first-of-type, .co .co-main > .cap:first-child + h3 { margin-top: .25rem; }
.co h3:focus { outline: none; } .co h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.co h4 { font-size: .9rem; font-weight: 600; margin: .5rem 0 0; }
.co .chips { display: flex; flex-wrap: wrap; gap: .375rem; margin: .25rem 0; }
.co .ch { position: relative; display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); font-size: .875rem; cursor: pointer; max-width: 100%; }
.co .ch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.co .ch:has(:checked) { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.co .ch:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.co .ch .cap { color: inherit; opacity: .8; font-size: .75rem; }
.co .ch.lock, .co .ch.lock:has(:checked) { background: var(--s-done-soft); border-color: transparent; color: var(--s-done); cursor: default; }
.co .ch.lock input { cursor: default; }
.co .tiers { display: grid; gap: .375rem; margin: .25rem 0; }
.co .tiers label { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .75rem; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.co .tiers label:has(:checked) { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); background: var(--raised); }
.co .tiers label:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.co .tiers .pr { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.co .co-tick { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem; margin-top: .25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); cursor: pointer; }
.co .co-tick input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; flex: 0 0 auto; }
.co .co-tick > span { display: block; min-width: 0; } .co .co-tick > span > .cap { display: block; margin-top: .25rem; }
.co .co-tick.mandate { border-color: var(--line2); }
.co .co-num { max-width: 9rem; }
.co .co-cty { margin: .25rem 0 0; padding: .5rem .75rem .625rem; border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.co .co-cty legend { padding: 0 .25rem; font-weight: 600; }
.co .co-fm { margin: 0; padding-left: 1.25rem; }
.co .co-sum { padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); min-width: 0; }
.co .co-sum h3 { margin: 0 0 .5rem; }
.co .co-sum ul { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .375rem; }
.co .co-sum li { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.co .co-sum li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.co .co-sum .a { white-space: nowrap; font-variant-numeric: tabular-nums; }
.co .co-sum li.disc { color: var(--s-done); }
.co .co-sum .due { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .25rem; padding-top: .625rem; border-top: 1px solid var(--line); font-weight: 700; }
.co .co-sum .due .a { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; }
.co .co-sum .mo { display: flex; justify-content: space-between; gap: 1rem; margin-top: .25rem; font-size: .875rem; color: var(--ink2); }
.co .co-sum .mo span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.co .co-sum .cap { margin-top: .625rem; }
.co .co-dl { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: .375rem 1rem; margin: .25rem 0; }
.co .co-dl dt { color: var(--cap); font-size: .8125rem; } .co .co-dl dd { margin: 0; overflow-wrap: anywhere; }
.co .co-form { display: grid; gap: .25rem; } .co .co-form .lbl, .co .co-bill .lbl, .co .co-card .lbl { margin-top: .375rem; }
.co .co-ta { min-height: 4.5rem; padding: .625rem .875rem; resize: vertical; }
.co .co-bill { display: grid; gap: .25rem; }
.co .co-card { display: grid; gap: .25rem; max-width: 26rem; } .co .co-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.co .co-wait { display: grid; justify-items: center; gap: .625rem; padding: 3rem 1rem; text-align: center; }
.co .co-wait .display { font-size: 1.5rem; }
.co .co-wait .spinner { width: 2.25rem; height: 2.25rem; border-width: 3px; color: var(--ink2); }
.co .tick { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center; background: var(--s-done-soft); color: var(--s-done); }
.co .tick svg { width: 26px; height: 26px; }
.co .co-ok { display: flex; flex-direction: column; gap: .75rem; }
.co .co-ok > h3.display { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); font-weight: 400; margin: 0; }
.co .co-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.co .co-acts .btn { white-space: normal; text-align: left; }
.co .co-mails { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.co .co-mails li { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .875rem; border: 1px solid var(--line); border-radius: var(--r); min-width: 0; overflow-wrap: anywhere; }
.co .co-mails details { margin-top: .25rem; } .co .co-mails details p { margin-top: .375rem; padding: .625rem .75rem; border-radius: 8px; background: var(--inset); color: var(--ink2); }
.co .co-mails summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--link); font-weight: 600; font-size: .8125rem; }
.co .co-nexttext { color: var(--ink2); max-width: 70ch; }
.co .co-next { padding: 1rem; border: 1px dashed var(--line2); border-radius: var(--r-lg); display: grid; gap: .5rem; }
@media (max-width: 600px) { .co .co-dl { grid-template-columns: 1fr; gap: .125rem; } .co .co-dl dd { margin-bottom: .375rem; } .co .co-card .row2 { grid-template-columns: 1fr; } }
/* the certificate, as an HTML page in the portal */
dialog.docsheet.certsheet header { padding-bottom: .25rem; } dialog.docsheet.certsheet header .cap { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cert { padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 1.75rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.cert .cs { text-align: center; color: var(--cap); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cert .ct { text-align: center; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); margin-top: .25rem; }
.cert .rule { width: 6rem; height: 2px; margin: 1rem auto 1.25rem; background: var(--gold); }
.cert dl { display: grid; grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); gap: .5rem 1.25rem; margin: 0; }
.cert dt { color: var(--cap); font-size: .875rem; } .cert dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cert .who { margin-top: 1rem; font-family: var(--font-display); color: var(--ink2); }
.cert .who + .who { margin-top: .375rem; }
@media (max-width: 600px) { .cert dl { grid-template-columns: 1fr; gap: .125rem; } .cert dd { margin-bottom: .5rem; } }

/* ═══ V11 (8 Oct 2026): the arrival page's demo button in bright orange, in both themes ═══ */
:root { --orange: #FF6A13; --orange-ink: #FFFFFF; --orange-hover: #E85C0A; }
:root[data-theme="dark"] { --orange: #FF7A2B; --orange-hover: #FF8C47; }
.btn.orange { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); font-weight: 700; box-shadow: 0 6px 18px color-mix(in oklab, var(--orange) 35%, transparent); }
.btn.orange:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--orange-ink); }
.btn.orange svg { color: var(--orange-ink); }

/* ═══ V13 (8 Oct 2026): feature tips — one short card per screen, the first time it is opened (lib/tips.js) ═══ */
.tip { position: absolute; top: 0; left: 0; z-index: 25; padding: .875rem 1rem 1rem 1.125rem; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: rise var(--t) var(--ease) both; }
.tip .tip-k { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.tip .tip-t { margin-top: .25rem; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.tip .tip-s { margin-top: .375rem; color: var(--ink2); font-size: .875rem; line-height: 1.5; }
.tip .tip-a { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .875rem; }
.tip .tip-off { min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--cap); font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }
.tip .tip-off:hover { color: var(--ink); }
.tip::before { content: ""; position: absolute; width: 12px; height: 12px; background: var(--panel); border: solid var(--line); border-width: 1px 0 0 1px; }
.tip[data-side="below"]::before { top: -7px; left: var(--cx, 24px); transform: translateX(-50%) rotate(45deg); }
.tip[data-side="above"]::before { bottom: -7px; left: var(--cx, 24px); transform: translateX(-50%) rotate(225deg); }
.tip[data-side="left"]::before { right: -7px; top: var(--cy, 22px); transform: translateY(-50%) rotate(135deg); }
.tip[data-side="right"]::before { left: -9px; top: var(--cy, 22px); background: var(--accent); border-color: var(--accent); transform: translateY(-50%) rotate(-45deg); }
.tip[data-side="float"]::before { display: none; }
.tip.leaving { animation: tip-out var(--t-fast) var(--ease) forwards; }
@keyframes tip-out { to { opacity: 0; transform: translateY(4px); } }


.trk .svlist {display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));gap:var(--gap)}
.trk .svlist > .card {margin-top:0}
.trk .sv .top {display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.375rem}
.trk .sv h3 {font-size:1rem;font-weight:600}
.trk .sv .chip {margin-left:auto}
.trk .dot {width:.625rem;height:.625rem;border-radius:999px;background:var(--line2);flex:0 0 auto;display:inline-block}
.trk .dot.epr {background:var(--epr)} .trk .dot.rp {background:var(--rp)} .trk .dot.cos {background:var(--cos)}
.trk .ppl {list-style:none;margin:.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr));gap:.5rem 1.25rem}
.trk .ppl li {display:flex;align-items:center;gap:.75rem;padding:.5rem 0}
.trk .ppl .nm {display:flex;flex-direction:column;min-width:0;flex:1}
.trk .ppl .btn {flex:0 0 auto}
.trk h2.sec {font-size:1rem;font-weight:600;margin:2rem 0 .75rem} .trk .need.glow-you {border-color:color-mix(in oklab, var(--s-you) 30%, var(--line))}
.trk .ok {display:flex;align-items:center;gap:.5rem;color:var(--s-done);font-weight:600} .trk .ok svg {width:18px;height:18px}
.trk .need .items {gap:.625rem} .trk .rq {align-items:start} .trk .rq .rib {grid-row:1 / span 3} .trk .rq .act {grid-row:1}
.trk .rq-who {display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;color:var(--ink2);font-size:.875rem;margin-bottom:.375rem}
.trk .rq-who b {color:var(--ink)} .trk .rq-who svg {width:13px} .trk .rq-t {display:block;font-size:1rem} .trk .rq-note {color:var(--ink2);margin-top:.25rem}
.trk .rq-acts, .trk .rq-form {grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.625rem} .trk .rq-form {display:block}
.trk .rq-q {border:0;border-top:1px solid var(--line);margin:0;padding:.875rem 0;min-width:0} .trk .rq-q legend {font-weight:600;padding:0}
.trk .seg {display:flex;flex-wrap:wrap;gap:.375rem;margin:.5rem 0}
.trk .seg label {position:relative;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1rem;border:1px solid var(--line2);border-radius:999px;font-size:.875rem;cursor:pointer}
.trk .seg input {position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.trk .seg label:has(:checked) {background:var(--btn);border-color:var(--btn);color:var(--btn-ink)} .trk .seg label:has(:focus-visible) {outline:2px solid var(--focus);outline-offset:2px}
.trk .rq-q textarea {min-height:4.25rem;padding:.625rem .875rem;resize:vertical;font:inherit}
.trk .rq-send {display:flex;align-items:center;flex-wrap:wrap;gap:.5rem} .trk .err {color:var(--s-you);font-size:.85rem;font-weight:600}
.trk .rq.back {background:var(--raised);border-style:dashed} .trk .rq.back .rq-t {font-weight:500;color:var(--cap)} .trk .rq.back .days {display:inline-flex;gap:.375rem} .trk .rq.back svg {width:14px;color:var(--s-done)}
.trk .dl-list {list-style:none;margin:0;padding:0} .trk .dl-list li {display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.625rem 0;border-top:1px solid var(--line)}
.trk .dl-list li:first-child {border-top:0} .trk .dl-list .nm {display:flex;flex-direction:column;min-width:0;flex:1 1 12rem} .trk .dl-list b {overflow-wrap:anywhere}
.trk .dl-list .rq-acts {margin:0} .trk .ups .doc {width:32px;height:38px;font-size:.55rem} .trk .ups .more {margin-top:.5rem}
.trk .grid > .card + .card {margin-top:0}
.trk .band {display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);grid-template-areas:"text map" "tiles map";gap:1.25rem 1.5rem;padding:1.75rem 1.25rem 1.5rem 1.75rem;align-items:start}
.trk .band .intro {grid-area:text}
.trk .band .lede {color:var(--band-ink2);margin-top:.625rem;max-width:46ch;font-size:1.05rem}
.trk .band .tiles {grid-area:tiles;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:.75rem;align-self:end}
.trk .band .glass .n {font-size:2.2rem}
.trk .band .map-host {grid-area:map;height:320px;min-height:0;align-self:center}
.trk .band.nomap {grid-template-columns:minmax(0, 1fr);grid-template-areas:"text" "tiles"} .trk .band.nomap .tiles {max-width:46rem}
.trk .band.sm {display:block;padding:1.25rem 1.5rem 1.375rem} .trk .band.sm h1 {font-size:clamp(1.6rem, 3.2vw, 2.2rem);margin:.375rem 0 1rem}
.trk .map-legend {z-index:2;flex-wrap:wrap;right:1rem}
.trk .ctry {scroll-margin-top:1.5rem}
.trk .ctry .top {display:flex;align-items:center;gap:.625rem;flex-wrap:wrap}
.trk .ctry h3 {font-size:1.05rem;font-weight:600;margin-right:.25rem}
.trk .ctry .top .chip {margin-left:auto} .trk .ctry .top .ring {margin-left:.25rem}
.trk .ctry .obl {display:flex;gap:.375rem;flex-wrap:wrap;margin:.625rem 0}
.trk .ctry .next {color:var(--ink2);max-width:66ch}
.trk .ctry .reg {display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.875rem;padding-top:.875rem;border-top:1px solid var(--line)}
.trk .ctry .reg .mono {font-size:1rem;color:var(--ink)}
.trk .ctry:focus {outline:2px solid var(--focus);outline-offset:2px}
.trk .mini .v {font-family:var(--font-display);font-size:1.75rem;line-height:1.1;margin:.25rem 0 .5rem}
.trk .mini a, .trk .mini button {margin-top:.5rem}
.trk .msgs {display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.trk .foot {margin-top:2rem;color:var(--cap);font-size:.875rem} .trk .clede {margin:-.25rem 0 .875rem;max-width:66ch}
.trk .jhead {display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;margin:2rem 0 .875rem} .trk .jhead h2.sec {margin:0}
.trk .jcounts {display:flex;gap:.375rem;flex-wrap:wrap} .trk .jcounts b {font-variant-numeric:tabular-nums}
.trk .jsvcs {display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 32rem), 1fr));gap:1.25rem 1.5rem;align-items:start}
.trk .jsv {display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem} .trk .jlist {list-style:none;margin:0;padding:0}
.trk .jstep {grid-template-columns:6px 2.25rem minmax(0, 1fr) auto;gap:.25rem .875rem}
.trk .jstep .rib {grid-row:1} .trk .jstep .text {grid-column:3} .trk .jstep .act {grid-column:4;grid-row:1}
.trk .jstep .tl {display:flex;align-items:center;gap:.375rem .625rem;flex-wrap:wrap} .trk .jstep .cap {margin-top:.125rem}
.trk .jstep .nx {display:block;color:var(--s-you);margin-bottom:.125rem} .trk .jstep .btn svg {width:15px}
.trk .jstep.glow-you {border-color:color-mix(in oklab, var(--s-you) 35%, var(--line))} .trk .glow-you .lt {animation:trk-pulse 2.4s var(--ease) infinite}
@keyframes trk-pulse {50% {box-shadow:0 0 0 8px color-mix(in oklab, var(--s-you) 6%, transparent)}}
.trk .lt {display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:999px;border:2px solid var(--line2);background:var(--panel);color:var(--cap);font-weight:700;font-size:.875rem;font-variant-numeric:tabular-nums;flex:0 0 auto}
.trk .lt.you {border-color:var(--s-you);background:var(--s-you-soft);color:var(--s-you);box-shadow:0 0 0 4px color-mix(in oklab, var(--s-you) 14%, transparent)}
.trk .lt.moving {border-color:var(--s-moving);background:var(--s-moving-soft);color:var(--s-moving)} .trk .lt.done {border-color:var(--s-done);background:var(--s-done);color:var(--panel)}
.trk .chip.warn::before {display:none} .trk .chip.warn svg {width:13px;height:13px}
.trk .stp {margin-top:var(--gap)} .trk .stp .btn, .trk .fms .btn, .trk .stp-ctry .btn {min-height:2.75rem} .trk .btn[disabled] {opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.trk .stp-h {display:flex;align-items:center;gap:.625rem .75rem;flex-wrap:wrap} .trk .stp-h h2, .trk .stp-h h3 {font-size:1.05rem;font-weight:600} .trk .stp-h .chip {margin-left:auto}
.trk [data-gap] {margin-top:.75rem}
.trk .stp-l {color:var(--ink2);margin-top:.75rem;max-width:66ch} .trk .stp-sub {font-size:.875rem;font-weight:600;margin:1.25rem 0 .375rem}
.trk .stp-act {display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line)}
.trk .g2 {display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr));gap:.875rem 1rem;margin-top:1rem}
.trk .ticks {margin:0;padding-left:1.25rem;color:var(--ink2)} .trk .ticks li + li {margin-top:.25rem}
.trk .chk {list-style:none;margin:0;padding:0} .trk .chk li {display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.25rem 0;border-top:1px solid var(--line)} .trk .chk li:first-child {border-top:0}
.trk .chk a {display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600} .trk .chk .chip {margin-left:auto}
.trk .fms, .trk .stp-ctry {display:grid;gap:var(--gap);margin-top:var(--gap)} .trk .fms {grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr))}
.trk .fms > .card, .trk .stp-ctry > .card {margin:0} .trk .fm .stp-act {border:0;padding-top:0;margin-top:.75rem} .trk .fm .dl-list {margin-top:.5rem}
@media (max-width:900px) {.trk .band {grid-template-columns:1fr;grid-template-areas:"text" "map" "tiles";padding:1.5rem 1.25rem} .trk .band.nomap {grid-template-areas:"text" "tiles"} .trk .band .map-host {height:280px}}
@media (max-width:767px) {
.trk .rq .act {grid-row:auto} .trk .rq .rib {grid-row:1 / span 4}
.trk .band {padding:1.25rem 1rem 1rem} .trk .band.sm {padding:1rem}
.trk .band .map-host {height:230px}
.trk .band .tiles {grid-template-columns:repeat(2, minmax(0, 1fr));gap:.5rem}
.trk .band .tiles > :last-child:nth-child(odd) {grid-column:1 / -1}
.trk .map-legend {gap:.5rem .875rem;font-size:.72rem}
.trk .jstep {grid-template-columns:6px 2.25rem minmax(0, 1fr)} .trk .jstep .rib {grid-row:1 / span 2}
.trk .jstep .act {grid-column:2 / -1;grid-row:2;margin-top:.5rem} .trk .jstep .act .btn {width:100%}
.trk .stp-h .chip, .trk .chk .chip {margin-left:0}
}
@media (prefers-reduced-motion:reduce) {.trk .glow-you .lt {animation:none}}

/* ═══ Onboarding widget proposal — additions on top of the demo's stylesheet and the tracker's. No brand hex here. ═══ */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #15171A; --inset: #1A1D21; --panel: #1D2024; --raised: #24282D; --line: #2A2E33; --line2: #3A3F45;
  --ink: #ECEAE5; --ink2: #C2BFB8; --cap: #9C9A94; --accent: #F0B942; --accent-soft: #33291A; --accent-ink: #F3CB72;
  --link: #8EC2E6; --focus: #6BAEDB; --btn: #ECEAE5; --btn-ink: #15171A;
  --cos: #D08BAE; --cos-soft: #2E222A; --rp: #6FBDB7; --rp-soft: #1B2E2D; --epr: #A7BD74; --epr-soft: #262D1C;
  --s-you: #E0865A; --s-you-soft: #33241B; --s-moving: #8FB4E0; --s-moving-soft: #1C2838; --s-waiting: #B59BD6; --s-waiting-soft: #2A2335; --s-done: #8FC08F; --s-done-soft: #1F2D22;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45); --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.6);
  --band: #0A1428; --band-2: #0F1F3F; --band-3: #16305C; color-scheme: dark; } }
body { min-height: 0; padding-inline: 16px; padding-block: 0 56px; }
.page { max-width: 1180px; margin: 0 auto; }
.phead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: end; padding: 44px 0 20px; }
.phead h1 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem); line-height: 1.04; margin-top: 12px; text-wrap: balance; }
.phead .lede { margin-top: 14px; color: var(--ink2); font-size: 1.05rem; max-width: 58ch; }
.phead .side { display: grid; gap: 10px; font-size: .9rem; color: var(--ink2); padding-top: 14px; border-top: 1px solid var(--line2); }
.phead .side b { color: var(--ink); font-weight: 600; }
.ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.ctl .l, .ctl .r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ctl .pill-tabs a { cursor: pointer; }
/* the stage: a blank page, or a plain website with a fold-out */
.stage { border: 1px solid var(--line2); border-radius: var(--r-xl); overflow: auto; height: min(880px, 90vh); min-height: 640px; background: var(--bg); position: relative; scroll-behavior: smooth; }
.stage[data-mode="site"] { background: var(--panel); }
.blank { padding: 2.5rem 1.25rem 3rem; display: grid; justify-items: center; align-content: start; gap: 1.25rem; min-height: 100%; }
.blank .demo-note { max-width: 760px; width: 100%; }
.demo-note { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; color: var(--cap); font-size: .8125rem; margin: 0; }
.demo-note b { color: var(--ink2); font-weight: 600; }
/* the mock website */
.site { display: none; }
.stage[data-mode="site"] .site { display: block; }
.stage[data-mode="site"] .blank { display: none; }
.site .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 2.5rem; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--ink2); }
.site .nav b { color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: -.01em; }
.site .nav span { margin-left: 1.25rem; }
.site .hero { padding: 3.5rem 2.5rem 2.5rem; max-width: 56rem; }
.site .hero h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.05; }
.site .hero p { margin-top: 1rem; color: var(--ink2); font-size: 1.05rem; max-width: 46ch; }
.site .hero .row { margin-top: 1.5rem; }
.site .fold { padding: 0 2.5rem 3rem; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
.site .fold.open { grid-template-rows: 1fr; }
.site .fold > div { min-height: 0; overflow: hidden; }
.site .fold .ob { margin: 0 auto; }
.site .foot { padding: 1.25rem 2.5rem; border-top: 1px solid var(--line); color: var(--cap); font-size: .8125rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.btn.gold:hover { background: var(--gold-2); }
/* ═══ the widget ═══ */
.ob { width: 100%; max-width: 760px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; display: grid; grid-template-rows: auto auto auto; }
.ob-head { position: relative; color: var(--band-ink); background: radial-gradient(900px 420px at 18% -10%, var(--band-3) 0%, transparent 60%), linear-gradient(160deg, var(--band) 0%, var(--band-2) 100%); padding: 1.125rem 1.5rem 1rem; display: grid; gap: .75rem; }
.ob-head::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E"); opacity: .6; pointer-events: none; }
.ob-head > * { position: relative; }
.ob-head .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ob-head .firm { display: flex; align-items: center; gap: .625rem; font-weight: 600; min-width: 0; }
.ob-head .firm .mark { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--gold); display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; flex: 0 0 auto; }
.ob-head .firm small { display: block; font-weight: 400; color: var(--band-cap); font-size: .75rem; }
.ob-head .lang { display: inline-flex; gap: .25rem; padding: .2rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--band-line); }
.ob-head .lang button { height: 1.9rem; padding: 0 .75rem; border-radius: 999px; border: 0; background: transparent; color: var(--band-ink2); font-size: .8rem; font-weight: 600; }
.ob-head .lang button[aria-pressed="true"] { background: var(--band-ink); color: var(--band); }
.ob-head .prog { display: grid; gap: .5rem; }
.ob-head .prog .txt { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--band-cap); font-variant-numeric: tabular-nums; }
.ob-head .prog .txt b { color: var(--band-ink); font-weight: 600; }
.ob-head .bar6 { height: 6px; }
.ob-head .bar6 i { background: rgba(255,255,255,.14); }
.ob-head .bar6 i.done { background: var(--s-done); } .ob-head .bar6 i.cur { background: var(--gold); }
.ob-head .welcome { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1rem; align-items: center; padding-top: .25rem; }
.ob-head .welcome h1 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.05; }
.ob-head .welcome p { margin-top: .5rem; color: var(--band-ink2); font-size: .95rem; max-width: 44ch; }
.ob-head .map-host { height: 150px; min-height: 0; background: transparent; border: 0; border-radius: var(--r-lg); overflow: hidden; --map-fill-opacity: .42; --inset: rgba(255,255,255,.07); --line: rgba(255,255,255,.12); --cap: var(--band-cap); --ink: var(--band-ink); }
.ob-head .map-host .eumap { display: block; width: 100%; height: 100%; }
.eumap .c { fill: var(--inset); stroke: var(--line); stroke-width: .6; stroke-linejoin: round; }
.eumap .c.you { fill: var(--s-you); fill-opacity: var(--map-fill-opacity, .42); stroke: var(--s-you); stroke-width: 2; }
.eumap .c.moving { fill: var(--s-moving); fill-opacity: var(--map-fill-opacity, .42); stroke: var(--s-moving); stroke-width: 2; }
.eumap .c.done { fill: var(--s-done); fill-opacity: var(--map-fill-opacity, .42); stroke: var(--s-done); stroke-width: 2; }
.eumap .arcs path { fill: none; stroke: var(--s-moving); stroke-width: 1.4; stroke-opacity: .75; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: arc 1.6s var(--ease) .4s forwards; }
.eumap .arcs path:nth-child(2) { animation-delay: .5s; } .eumap .arcs path:nth-child(3) { animation-delay: .6s; }
@keyframes arc { to { stroke-dashoffset: 0; } }
.eumap .pin circle { fill: var(--ink); } .eumap .pin.home circle { fill: var(--s-you); stroke: var(--ink); stroke-width: 1.5; }
.eumap .pin text { font: 600 11px/1 var(--font-text); fill: var(--cap); letter-spacing: .04em; paint-order: stroke; stroke: var(--band); stroke-width: 3px; }
.ob-body { padding: 1.5rem; display: grid; gap: 1rem; }
.ob-body .lead { color: var(--ink2); max-width: 66ch; }
.ob-body .stp-h { display: flex; align-items: center; gap: .625rem .75rem; flex-wrap: wrap; }
.ob-body .stp-h h2 { font-size: 1.25rem; font-weight: 400; font-family: var(--font-display); letter-spacing: -.01em; }
.ob-body .stp-h .chip { margin-left: auto; }
.ob-body .stp-sub { font-size: .875rem; font-weight: 600; margin: .5rem 0 -.25rem; }
.ob-body .g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .875rem 1rem; }
.ob-body .g2.one { grid-template-columns: 1fr; }
.ob-body .why { margin-left: .5rem; font-size: .78rem; font-weight: 600; color: var(--link); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.ob-body .input.filled { background: var(--accent-soft); transition: background var(--t-slow); }
.ob-body textarea.input { min-height: 4.5rem; padding: .625rem .875rem; resize: vertical; }
.ob-body .dl-list { list-style: none; margin: 0; padding: 0; }
.ob-body .dl-list li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .75rem 0; border-top: 1px solid var(--line); }
.ob-body .dl-list li:first-child { border-top: 0; }
.ob-body .dl-list .nm { display: flex; flex-direction: column; min-width: 0; flex: 1 1 14rem; }
.ob-body .dl-list .nm .cap b { color: var(--ink2); font-weight: 600; }
.ob-body .dl-list .rq-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
.ob-body .pad { display: block; width: 100%; max-width: 480px; height: 130px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--panel); touch-action: none; }
.ob-body .seg { display: flex; flex-wrap: wrap; gap: .375rem; }
.ob-body .seg label { position: relative; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--line2); border-radius: 999px; font-size: .875rem; cursor: pointer; }
.ob-body .seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ob-body .seg label.on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.ob-body .slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem; }
.ob-body .slot { text-align: left; display: grid; gap: .25rem; padding: 1rem 1.125rem; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--panel); cursor: pointer; transition: box-shadow var(--t-fast); }
.ob-body .slot:hover { box-shadow: var(--shadow); }
.ob-body .slot b { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: -.01em; line-height: 1.1; }
.ob-body .slot[aria-pressed="true"] { border-color: var(--s-done); background: var(--s-done-soft); }
.ob-body .sum { list-style: none; margin: 0; padding: 0; }
.ob-body .sum li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--line); }
.ob-body .sum li:first-child { border-top: 0; } .ob-body .sum .nm { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; } .ob-body .sum .chip { margin-left: auto; }
.ob-body .lt { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 2px solid var(--line2); background: var(--panel); color: var(--cap); font-weight: 700; font-size: .875rem; flex: 0 0 auto; }
.ob-body .lt.you { border-color: var(--s-you); background: var(--s-you-soft); color: var(--s-you); box-shadow: 0 0 0 4px color-mix(in oklab, var(--s-you) 14%, transparent); }
.ob-body .lt.done { border-color: var(--s-done); background: var(--s-done); color: var(--panel); }
.ob-body .twenty { list-style: none; margin: 0; padding: 0; }
.ob-body .twenty li { display: flex; align-items: center; gap: .875rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.ob-body .twenty li:first-child { border-top: 0; }
.ob-body .twenty .mins { margin-left: auto; color: var(--cap); font-size: .8125rem; white-space: nowrap; }
.ob-body .act { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ob-body .act .cap { margin-left: auto; }
.ob-body .hand { display: grid; gap: .5rem; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.ob-body .hand .jl { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.ob-body .hand .jl li { display: flex; align-items: center; gap: .625rem; font-size: .9rem; }
.ob-body .hand .jl .chip { margin-left: auto; }
.ob-body .desk { display: grid; gap: .5rem; }
.ob-body .desk .item { display: grid; grid-template-columns: auto 1fr auto; gap: .25rem 1rem; align-items: center; }
.ob-body .desk .item .s { display: block; color: var(--cap); font-size: .8125rem; }
/* ═══ the assistant footer: part of the widget; the answer extends DOWNWARDS beneath the bar ═══ */
.ob-foot { border-top: 1px solid var(--line); background: var(--panel); display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
.ob-foot.open { grid-template-rows: auto 1fr; }
.vbar { display: flex; align-items: center; gap: .75rem; padding: .625rem 1.5rem; min-height: 3.75rem; cursor: pointer; }
.vbar .orb { width: 36px; height: 36px; flex: 0 0 36px; display: block; }
.vbar .who { display: grid; gap: .1rem; min-width: 0; }
.vbar .who b { font-weight: 600; white-space: nowrap; font-size: .9rem; }
.vbar .mid { flex: 1; min-width: 0; color: var(--ink2); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbar .btn.gold { position: relative; isolation: isolate; }
.vbar .btn.gold::before { content: ""; position: absolute; inset: -3px; border-radius: 13px; border: 2px solid var(--gold); opacity: 0; pointer-events: none; animation: ask-pulse 2.6s var(--ease) infinite; }
.ob-foot.open .vbar .btn.gold::before { animation: none; }
.vbar .btn.gold.live { box-shadow: 0 0 0 6px var(--accent-soft); }
.vbar .close { display: none; }
.ob-foot.open .vbar .close { display: inline-grid; }
.vpanel { min-height: 0; overflow: hidden; }
.vpanel .in { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.25rem; padding: .25rem 1.5rem 1.25rem; border-top: 1px solid var(--line); }
.vsph { display: grid; justify-items: center; align-content: start; gap: .5rem; padding-top: 1rem; }
.vsph canvas { width: 110px; height: 110px; display: block; }
.vsph .vnote { text-align: center; color: var(--ink2); font-size: .8rem; }
.vsph .vnote b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--ink); letter-spacing: -.01em; }
.vconv { display: grid; gap: .75rem; align-content: start; padding-top: 1rem; min-width: 0; }
.vconv .bubble.q { display: grid; gap: .125rem; } .vconv .bubble.q .cap { font-size: .72rem; }
.vconv .arow { display: flex; flex-wrap: wrap; gap: .5rem; }
.vconv .tries { display: flex; flex-wrap: wrap; gap: .375rem; }
.vconv .tq { min-height: 2.25rem; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: .82rem; font-weight: 500; }
.vconv .tq:hover { border-color: var(--line2); background: var(--raised); }
.askbar .r1 { display: flex; gap: .5rem; align-items: center; }
.askbar .vbtn { width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); }
.askbar .vbtn.live { background: var(--s-you-soft); border-color: var(--s-you); color: var(--s-you); }
.askbar .vbtn svg, .askbar .iconbtn svg { width: 18px; height: 18px; }
.askbar .input { flex: 1; min-width: 0; }
.askbar .r2 { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-top: .375rem; color: var(--cap); font-size: .78rem; }
.ob-foot .foot-line { grid-column: 1 / -1; color: var(--cap); font-size: .78rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.ai-label { white-space: nowrap; }
/* notes */
.notes { display: grid; gap: 40px; margin-top: 44px; }
.nsec h2 { font-size: 1.8rem; margin-bottom: 6px; }
.nsec .lead { color: var(--ink2); max-width: 66ch; margin-bottom: 14px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cols3 .card { display: grid; gap: 6px; align-content: start; }
.cols3 .card h3 { font-size: 1rem; font-weight: 600; }
.cols3 .card p { color: var(--ink2); font-size: .9rem; }
.cols3 .card + .card { margin-top: 0; }
.decs .d { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.decs .d:first-child { border-top: 0; }
.decs .d i { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; line-height: 1; color: var(--cap); }
.decs .d b { display: block; font-weight: 600; } .decs .d p { color: var(--ink2); font-size: .9rem; margin-top: .125rem; }
.endline { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--cap); font-size: .8125rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .phead { grid-template-columns: 1fr; } .cols3 { grid-template-columns: 1fr; } .ob-head .welcome { grid-template-columns: 1fr; } .ob-head .map-host { height: 130px; } }
@media (max-width: 767px) { .stage { height: min(920px, 92vh); } .blank { padding: 1rem .5rem 2rem; } .site .nav, .site .hero, .site .fold, .site .foot { padding-left: 1rem; padding-right: 1rem; } .ob-body { padding: 1.125rem; } .vbar { padding: .625rem 1rem; } .vbar .mid { display: none; } .vpanel .in { grid-template-columns: 1fr; padding: .25rem 1rem 1rem; } .vsph { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: .75rem; } .vsph canvas { width: 72px; height: 72px; } }

/* ═══ v5: the column, the guide, the modals, the service picker; and the clipping fix ═══ */
.blank { justify-items: stretch; }
.blank .col, .site .fold .col { width: 100%; max-width: 760px; margin: 0 auto; display: grid; gap: .875rem; }
.ob, .ob > *, .ob-body > *, .ob-head > * { min-width: 0; }
.ob { max-width: none; }
.ob-head .prog .txt span:last-child { white-space: nowrap; }
.gstrip { position: relative; padding: .7rem .9rem .7rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-lg); background: var(--panel); display: grid; gap: .25rem; }
.gstrip .gk { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.gstrip .gt { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.gstrip .gs { color: var(--ink2); font-size: .875rem; line-height: 1.45; }
.gstrip .gn { color: var(--cap); font-size: .8125rem; margin-top: .125rem; }
.gstrip .gn b { color: var(--ink2); font-weight: 600; }
.modal { position: absolute; inset: 0; z-index: 40; background: rgba(11,23,48,.55); display: grid; place-items: center; padding: 1rem; backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.mcard { width: 100%; max-width: 520px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.5rem 1.625rem; box-shadow: var(--shadow-lg); animation: rise var(--t) var(--ease); }
.mcard.guide { border-left: 4px solid var(--accent); }
.mcard h2.display { font-size: 1.6rem; line-height: 1.15; margin-top: .25rem; }
.mcard p { color: var(--ink2); margin-top: .625rem; line-height: 1.55; }
.mcard .gnote { margin-top: .875rem; padding-top: .75rem; border-top: 1px dashed var(--line); color: var(--accent-ink); font-size: .8125rem; }
.mcard .g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ob-body .svcs { display: grid; gap: .625rem; }
.ob-body .svc-c { text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .875rem; align-items: start; padding: .875rem 1rem; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--panel); cursor: pointer; transition: box-shadow var(--t-fast); font: inherit; color: inherit; }
.ob-body .svc-c:hover { box-shadow: var(--shadow); }
.ob-body .svc-c[aria-pressed="true"] { border-color: var(--btn); background: var(--raised); box-shadow: inset 0 0 0 1px var(--btn); }
.ob-body .svc-c .rad { width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 2px solid var(--line2); margin-top: .125rem; display: grid; place-items: center; }
.ob-body .svc-c[aria-pressed="true"] .rad { border-color: var(--btn); } .ob-body .svc-c[aria-pressed="true"] .rad::after { content: ""; width: .6rem; height: .6rem; border-radius: 999px; background: var(--btn); }
.ob-body .svc-c b { font-weight: 600; } .ob-body .svc-c span.cap { grid-column: 2; }
.ob-body .cc-pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.ob-body .cc-pick label { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .875rem 0 .625rem; border: 1px solid var(--line2); border-radius: 999px; cursor: pointer; font-size: .9rem; font-weight: 500; }
.ob-body .cc-pick label .cc { pointer-events: none; }
.ob-body .cc-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ob-body .cc-pick label.on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.ob-body .cc-pick label.on .cc { background: rgba(255,255,255,.15); color: var(--btn-ink); }
.ob-body .price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .875rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.ob-body .price .n { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -.01em; }
.ob-body .price .n small { font-family: var(--font-text); font-size: .85rem; color: var(--cap); margin-left: .375rem; }
.ob-body .lbl .cap { display: block; font-weight: 400; margin-top: .125rem; }
.ob-body .paid { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .875rem 1.125rem; border: 1px solid var(--s-done); border-radius: var(--r-lg); background: var(--s-done-soft); color: var(--s-done); font-weight: 600; }
.ob-body .hand .jl .lt { width: 1.75rem; height: 1.75rem; font-size: .75rem; }
.ob-body .lt.prog { border-color: var(--s-moving); background: var(--s-moving-soft); color: var(--s-moving); }
@media (max-width: 767px) { .mcard { padding: 1.125rem; } .mcard .g2 { grid-template-columns: 1fr; } }

.gstrip { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: 'k k' 't t' 's n'; gap: .125rem .75rem; align-items: end; }
.gstrip .gk { grid-area: k; } .gstrip .gt { grid-area: t; } .gstrip .gs { grid-area: s; } .gstrip .gn { grid-area: n; white-space: nowrap; margin: 0; }
@media (max-width: 767px) { .gstrip { grid-template-areas: 'k k' 't t' 's s' 'n n'; } .gstrip .gn { white-space: normal; } }

.site .svcrow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; padding: 0 2.5rem 2.5rem; max-width: 72rem; }
.site .svcrow .card { margin: 0; display: grid; gap: .375rem; align-content: start; }
.site .svcrow h3 { font-size: 1rem; font-weight: 600; }
@media (max-width: 767px) { .site .svcrow { grid-template-columns: 1fr; padding: 0 1rem 1.5rem; } }

/* the assistant foot must never be wider than the widget (grid track was sizing to the bar's min-content) */
.ob-foot { grid-template-columns: minmax(0, 1fr); }
.ob-foot > *, .vpanel .in > *, .vbar > * { min-width: 0; }
.vbar .who { overflow: hidden; }
@media (max-width: 640px) { .vbar .who b { white-space: normal; line-height: 1.15; } .vbar .who .ai-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } }
@media (max-width: 640px) { .vbar .who .ai-label { font-size: .58rem; letter-spacing: .05em; padding-left: .4rem; padding-right: .4rem; } }

/* ═══ v6: the brand on the widget — map in the band, status words on the rail, the quotation ═══ */
.ob-head .band2 { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 1rem; align-items: end; }
.ob-head .map-host { height: 132px; position: relative; }
.ob-head .map-host .eumap { width: 100%; height: 100%; display: block; }
.ob-head .map-host .c { fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.14); stroke-width: .6; transition: fill var(--t-fast); }
.ob-head .map-host .c.on { fill: var(--gold); stroke: var(--gold-2); }
.ob-head .map-host .c.paid { fill: var(--s-done); stroke: #7FB07D; }
.ob-head .map-host .mcap { position: absolute; left: .5rem; top: .35rem; font-size: .68rem; color: var(--band-cap); letter-spacing: .06em; text-transform: uppercase; }
.ob-head .st { display: inline-flex; align-items: center; gap: .35rem; height: 1.5rem; padding: 0 .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ob-head .st i { width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }
.ob-head .st.you { background: var(--s-you-soft); color: var(--s-you); } .ob-head .st.moving { background: var(--s-moving-soft); color: var(--s-moving); }
.ob-head .st.waiting { background: var(--s-waiting-soft); color: var(--s-waiting); } .ob-head .st.done { background: var(--s-done-soft); color: var(--s-done); }
.ob-head .steprail { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .375rem; }
.ob-head .steprail li { list-style: none; display: grid; gap: .3rem; font-size: .72rem; color: var(--band-cap); min-width: 0; }
.ob-head .steprail li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-head .steprail li i { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); }
.ob-head .steprail li.done i { background: var(--s-done); } .ob-head .steprail li.done span { color: var(--band-ink2); }
.ob-head .steprail li.cur i { background: var(--s-you); } .ob-head .steprail li.cur span { color: var(--band-ink); font-weight: 600; }
.ob-head .lang .more { display: inline-flex; white-space: nowrap; align-items: center; gap: .3rem; height: 1.9rem; padding: 0 .7rem; border-radius: 999px; border: 1px dashed var(--band-line); background: transparent; color: var(--band-ink2); font: inherit; font-size: .78rem; cursor: pointer; }
.ob-head .lang .more:hover { color: var(--band-ink); border-style: solid; }
.ob-head .langwrap { position: relative; }
.ob-head .langpop { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; width: min(340px, 86vw); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: .875rem 1rem; display: grid; gap: .625rem; }
.ob-head .langpop[hidden] { display: none; }
.ob-head .langpop .ll { display: flex; flex-wrap: wrap; gap: .375rem; }
.ob-head .langpop .ll span { padding: .25rem .6rem; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); font-size: .8rem; color: var(--ink2); }
.ob-head .langpop .ll span.live { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ob-head .langpop p { font-size: .8125rem; color: var(--ink2); line-height: 1.45; }
.ob-head .langpop .eyebrow { color: var(--accent-ink); }
/* step 1: several services at once, every country */
.ob-body .svc-c .rad.box { border-radius: 6px; }
.ob-body .svc-c[aria-pressed="true"] .rad.box::after { border-radius: 2px; width: .65rem; height: .65rem; }
.ob-body .svc-c .pr { grid-column: 2; font-size: .8rem; color: var(--cap); }
.ob-body .svc-c .pr b { color: var(--ink); font-weight: 600; }
.ob-body .cc-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.ob-body .cc-head h3 { margin: 0; }
.ob-body .cc-tools { display: flex; gap: .375rem; flex-wrap: wrap; }
.ob-body .cc-tools button { height: 2rem; padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink2); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.ob-body .cc-tools button:hover { background: var(--raised); color: var(--ink); }
.ob-body .cc-grp { margin-top: .75rem; }
.ob-body .cc-grp .gl { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cap); margin-bottom: .4rem; display: flex; justify-content: space-between; }
.ob-body .cc-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .375rem; }
.ob-body .cc-pick label { min-height: 2.4rem; padding: 0 .6rem 0 .5rem; gap: .4rem; font-size: .84rem; justify-content: flex-start; border-radius: var(--r); }
.ob-body .cc-pick label .cc { font-size: .68rem; min-width: 1.6rem; text-align: center; padding: .1rem .3rem; border-radius: 4px; background: var(--inset); color: var(--cap); font-weight: 700; }
.ob-body .cc-pick label .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-body .cc-pick label.on .cc { background: rgba(255,255,255,.18); color: var(--btn-ink); }
.ob-body .price .n small { display: block; margin: .15rem 0 0; }
.ob-body .price .brk { font-size: .8rem; color: var(--ink2); display: grid; gap: .15rem; }
/* step 3: the quotation */
.ob-body .quote { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.ob-body .quote .qh { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .875rem 1.125rem; background: var(--raised); border-bottom: 1px solid var(--line); }
.ob-body .quote .qh b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.ob-body .quote .qh .cap { display: block; }
.ob-body .quote .qmeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: .5rem 1rem; padding: .75rem 1.125rem; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.ob-body .quote .qmeta span { color: var(--cap); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.ob-body .quote table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ob-body .quote th { text-align: left; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cap); font-weight: 700; padding: .6rem 1.125rem .4rem; border-bottom: 1px solid var(--line); }
.ob-body .quote td { padding: .5rem 1.125rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ob-body .quote td.n, .ob-body .quote th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ob-body .quote tr.grp td { background: var(--raised); font-weight: 600; padding-top: .55rem; padding-bottom: .45rem; }
.ob-body .quote tr.grp td .cc { font-size: .68rem; padding: .1rem .35rem; border-radius: 4px; background: var(--inset); color: var(--cap); margin-right: .4rem; }
.ob-body .quote td .cap { display: block; }
.ob-body .quote tr.sub td { background: var(--raised); }
.ob-body .quote tr.disc td { color: var(--s-done); }
.ob-body .quote tr.tot td { font-size: 1rem; font-weight: 600; background: var(--accent-soft); border-bottom: 0; }
.ob-body .quote tr.tot td.n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.ob-body .quote .qfoot { padding: .75rem 1.125rem; font-size: .78rem; color: var(--cap); display: grid; gap: .25rem; border-top: 1px solid var(--line); }
.ob-body .qacts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.ob-body .qacts .btn { gap: .4rem; }
.ob-body .payrow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: center; margin-top: 1rem; padding: .875rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.ob-body .payrow .how { display: flex; gap: .375rem; flex-wrap: wrap; }
.ob-body .payrow .how label { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border: 1px solid var(--line2); border-radius: 999px; font-size: .82rem; cursor: pointer; }
.ob-body .payrow .how label.on { border-color: var(--btn); background: var(--btn); color: var(--btn-ink); }
.ob-body .payrow .how input { position: absolute; opacity: 0; width: 0; height: 0; }
@media (max-width: 767px) { .ob-head .band2 { grid-template-columns: 1fr; } .ob-head .map-host { height: 110px; } .ob-head .steprail li span { display: none; } .ob-body .quote th:nth-child(2), .ob-body .quote td:nth-child(2):not(.n) { display: none; } .ob-body .payrow { grid-template-columns: 1fr; } }

/* ═══ v7: the Eldris flow in the EU27 brand — band, stepper, numbers, every step's controls, the quote, the payment sheet ═══ */
.ob-head { background: linear-gradient(160deg, var(--band) 0%, var(--band-2) 100%); }
.ob-head .map-host { height: 150px; }
.ob-head .map-host .c.home { fill: rgba(240,185,66,.18); stroke: var(--gold); stroke-dasharray: 2 2; }
.ob-head .map-host .arcs path { fill: none; stroke: var(--gold); stroke-width: 1; stroke-opacity: .55; }
.ob-head .map-host .arcs circle { fill: var(--gold); }
.ob-head .stepper { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 0; margin: 0; padding: 0; list-style: none; position: relative; }
.ob-head .stepper li { display: grid; justify-items: center; gap: .3rem; position: relative; min-width: 0; }
.ob-head .stepper li::before { content: ""; position: absolute; top: 10px; left: 50%; right: -50%; height: 1px; background: rgba(255,255,255,.18); }
.ob-head .stepper li:last-child::before { display: none; }
.ob-head .stepper li.done::before { background: var(--s-done); }
.ob-head .stepper li i { position: relative; z-index: 1; width: 21px; height: 21px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: .68rem; font-weight: 700; background: rgba(255,255,255,.10); color: var(--band-cap); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.ob-head .stepper li i svg { width: 12px; height: 12px; }
.ob-head .stepper li.done i { background: var(--s-done); color: #fff; box-shadow: none; }
.ob-head .stepper li.cur i { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 4px rgba(240,185,66,.22); }
.ob-head .stepper li span { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--band-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ob-head .stepper li.cur span { color: var(--band-ink); font-weight: 600; } .ob-head .stepper li.done span { color: var(--band-ink2); }
.ob-head .nums { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .25rem; }
.ob-head .nums b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; color: var(--band-ink); }
.ob-head .nums span { font-size: .72rem; color: var(--band-cap); letter-spacing: .06em; text-transform: uppercase; }
.ob-head .nums .gold b { color: var(--gold); }
.ob-head .prog { gap: .75rem; }
/* the door */
.ob-body .doors { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.ob-body .door { text-align: left; display: grid; gap: .35rem; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); font: inherit; color: inherit; cursor: pointer; transition: box-shadow var(--t-fast); }
.ob-body .door:hover { box-shadow: var(--shadow); }
.ob-body .door b { font-size: 1.05rem; font-weight: 600; } .ob-body .door span { color: var(--ink2); font-size: .875rem; line-height: 1.45; }
.ob-body .door.dark { background: var(--band); border-color: var(--band); color: var(--band-ink); } .ob-body .door.dark span { color: var(--band-ink2); }
.ob-body .door.find { margin-top: .75rem; cursor: default; }
.ob-body .findf { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; } .ob-body .findf .input { flex: 1; min-width: 12rem; }
.ob-body .err { color: var(--s-you); font-size: .78rem; display: block; margin-top: .25rem; }
/* the details */
.ob-body .fld { display: grid; gap: .3rem; min-width: 0; } .ob-body .fld.wide { margin-top: .875rem; }
.ob-body .fld .lbl { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cap); font-weight: 700; }
.ob-body .fld.bad .input { border-color: var(--s-you); }
.ob-body .abox { margin-top: 1rem; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); display: grid; gap: .75rem; }
.ob-body .abox > .lbl { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cap); font-weight: 700; }
.ob-body .ckcard { display: flex; gap: .75rem; align-items: flex-start; margin-top: .875rem; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); cursor: pointer; }
.ob-body .ckcard input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--band); }
.ob-body .ckcard b { display: block; font-weight: 600; } .ob-body .ckcard .cap { display: block; margin-top: .2rem; }
/* the markets */
.ob-body .input.search { margin-bottom: .75rem; }
.ob-body .mgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .5rem; }
.ob-body .mcard { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-areas: 'f n' 'f c'; gap: 0 .5rem; align-items: center; padding: .6rem .7rem; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--panel); cursor: pointer; min-height: 3.1rem; }
.ob-body .mcard input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ob-body .mcard .fl { grid-area: f; font-size: 1.2rem; } .ob-body .mcard .mn { grid-area: n; font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ob-body .mcard .cap { grid-area: c; font-size: .7rem; }
.ob-body .mcard.on { border-color: var(--gold); background: var(--accent-soft); }
.ob-body .mcard.on::after { content: ""; position: absolute; top: .35rem; right: .35rem; width: 14px; height: 14px; border-radius: 999px; background: var(--gold); box-shadow: inset 0 0 0 3px var(--accent-soft); }
.ob-body .dblock { margin-top: 1rem; display: grid; gap: .5rem; justify-items: start; }
.ob-body .dpill { display: inline-flex; align-items: center; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); font-size: .8rem; font-weight: 600; color: var(--ink2); }
.ob-body .dpill.on { background: var(--s-done); border-color: var(--s-done); color: #fff; }
.ob-body .ladder { display: flex; gap: .375rem; flex-wrap: wrap; }
.ob-body .lchip { padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line); font-size: .75rem; color: var(--ink2); background: var(--raised); }
.ob-body .lchip.cur { border-color: var(--gold); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.ob-body .nudge { padding: .5rem .75rem; border: 1px dashed var(--line2); border-radius: var(--r); font-size: .8rem; color: var(--ink2); }
/* the products */
.ob-body .plist { display: grid; gap: .375rem; }
.ob-body .prow { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .75rem; align-items: center; padding: .7rem .875rem; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r); background: var(--panel); cursor: pointer; }
.ob-body .prow input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ob-body .prow .bx { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line2); display: grid; place-items: center; color: transparent; background: var(--panel); }
.ob-body .prow .bx svg { width: 13px; height: 13px; }
.ob-body .prow.on { border-left-color: var(--gold); background: var(--accent-soft); } .ob-body .prow.on .bx { background: var(--band); border-color: var(--band); color: #fff; }
.ob-body .prow .pt b { display: block; font-weight: 600; font-size: .9rem; } .ob-body .prow .pt .cap { display: block; }
.ob-body .prow .pc { display: flex; gap: .25rem; } .ob-body .prow .pc i { font-style: normal; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .4rem; border-radius: 4px; background: var(--inset); color: var(--cap); font-weight: 700; }
/* the services */
.ob-body .svgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.ob-body .svcard { padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); display: grid; gap: .5rem; align-content: start; }
.ob-body .svcard .sh { display: flex; gap: .5rem; align-items: center; font-weight: 600; } .ob-body .svcard .sh .fl { font-size: 1.15rem; }
.ob-body .svcard .sl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .5rem; align-items: start; font-size: .85rem; }
.ob-body .svcard .tk { width: 18px; height: 18px; border-radius: 999px; background: var(--s-done-soft); color: var(--s-done); display: grid; place-items: center; margin-top: .1rem; } .ob-body .svcard .tk svg { width: 11px; height: 11px; }
.ob-body .svcard .tk.grey { background: var(--inset); color: var(--cap); }
.ob-body .svcard .ln { display: block; font-weight: 500; }
.ob-body .svcard .np { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .2rem; } .ob-body .np em, .ob-body .pills.ro em { font-style: normal; font-size: .68rem; padding: .12rem .45rem; border-radius: 999px; }
.ob-body .np em.green, .ob-body .pills.ro.green em { background: var(--s-done-soft); color: var(--s-done); } .ob-body .np em.amber { background: var(--s-you-soft); color: var(--s-you); }
.ob-body .pills.ro em { background: var(--inset); color: var(--ink2); }
.ob-body .catbox { margin-top: .25rem; padding: .5rem .625rem; border: 1px dashed var(--line2); border-radius: var(--r); display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; } .ob-body .catbox .cap { width: 100%; }
.ob-body .catbox em { font-style: normal; font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; background: var(--inset); }
.ob-body .inclbox, .ob-body .notebox { margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--r-lg); display: grid; gap: .5rem; }
.ob-body .inclbox { background: var(--raised); border: 1px solid var(--line); } .ob-body .inclbox b { font-weight: 600; }
.ob-body .inclbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .ob-body .inclbox li { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; } .ob-body .inclbox li svg { width: 16px; height: 16px; color: var(--s-done); flex: 0 0 16px; margin-top: .1rem; }
.ob-body .notebox { background: var(--s-you-soft); border: 1px solid #F0D9C9; } .ob-body .notebox b { font-weight: 600; color: var(--s-you); }
.ob-body .notebox ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .85rem; color: var(--ink2); }
.ob-body .pcard { margin-top: 1rem; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); display: grid; gap: .5rem; }
.ob-body .pcard .ph { display: flex; gap: .5rem; align-items: center; } .ob-body .pcard .ph b { font-weight: 600; }
.ob-body .tag { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 4px; background: var(--inset); color: var(--cap); font-weight: 700; }
.ob-body .pills { display: flex; gap: .375rem; flex-wrap: wrap; }
.ob-body .pill { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem .35rem .5rem; border: 1.5px solid var(--line2); border-radius: 999px; font-size: .8rem; cursor: pointer; background: var(--panel); }
.ob-body .pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ob-body .pill i { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--line2); background: var(--panel); }
.ob-body .pill.on { border-color: var(--gold); background: var(--accent-soft); } .ob-body .pill.on i { background: var(--band); border-color: var(--band); }
.ob-body .pfoot { font-size: .8rem; color: var(--ink2); padding-top: .5rem; border-top: 1px solid var(--line); } .ob-body .pfoot b { color: var(--ink); }
.ob-body .runtot { margin-top: 1rem; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); display: grid; gap: .35rem; }
.ob-body .runtot .r { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; } .ob-body .runtot .r.disc { color: var(--s-done); }
.ob-body .runtot .r.tot { padding-top: .5rem; border-top: 1px solid var(--line); font-weight: 600; } .ob-body .runtot .r.tot b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
/* the questions */
.ob-body .qcard { margin-top: .75rem; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); display: grid; gap: .5rem; } .ob-body .qcard > b { font-weight: 600; }
.ob-body .yn { display: flex; gap: .375rem; flex-wrap: wrap; } .ob-body .yn button { padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid var(--line2); background: var(--panel); font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink2); cursor: pointer; }
.ob-body .yn button.on { background: var(--band); border-color: var(--band); color: var(--band-ink); }
/* the quote */
.ob-body .qhero { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: .75rem; margin-bottom: .75rem; }
.ob-body .qcost { padding: 1rem 1.125rem; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); display: grid; gap: .4rem; align-content: start; }
.ob-body .qcost .big { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; letter-spacing: -.01em; } .ob-body .qcost .big small { font-family: var(--font-text); font-size: .8rem; color: var(--cap); margin-left: .4rem; }
.ob-body .qcost .was { display: flex; gap: .5rem; align-items: center; } .ob-body .qcost .was s { color: var(--cap); }
.ob-body .qcost p { font-size: .85rem; color: var(--ink2); } .ob-body .qcost p b { color: var(--ink); }
.ob-body .qref { padding: 1rem 1.125rem; border-radius: var(--r-lg); border: 1.5px solid var(--gold); background: var(--panel); display: grid; gap: .4rem; align-content: start; }
.ob-body .qref .rr { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .ob-body .qref .rr b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: .02em; }
.ob-body .qcols { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: .75rem; align-items: start; }
.ob-body .qpanel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: .875rem 1rem; }
.ob-body .qt { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; } .ob-body .qt td { padding: .45rem .25rem; border-bottom: 1px solid var(--line); }
.ob-body .qt td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ob-body .qt tr.grp td { font-weight: 600; padding-top: .7rem; border-bottom: 0; } .ob-body .qt .fl { margin-right: .4rem; }
.ob-body .qt tr.once td { color: var(--ink2); } .ob-body .qt tr.sub td { color: var(--ink2); font-size: .8rem; }
.ob-body .qt tr.sub2 td { padding-top: .7rem; font-weight: 600; } .ob-body .qt tr.disc td { color: var(--s-done); }
.ob-body .qt tr.tot td { font-weight: 600; font-size: 1rem; background: var(--accent-soft); border-bottom: 0; } .ob-body .qt tr.tot td.n { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; }
.ob-body .qside { display: grid; gap: .75rem; } .ob-body .qside .inclbox, .ob-body .qside .notebox { margin-top: 0; }
.ob-body .ctas { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; margin-top: 1rem; }
.ob-body .cta { text-align: left; display: grid; gap: .35rem; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); font: inherit; color: inherit; cursor: pointer; }
.ob-body .cta b { font-size: 1.05rem; font-weight: 600; } .ob-body .cta span { font-size: .82rem; color: var(--ink2); line-height: 1.45; }
.ob-body .cta.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); } .ob-body .cta.gold span { color: var(--gold-ink); opacity: .85; }
.ob-body .cta:disabled { cursor: default; opacity: .9; }
.ob-body .qlinks { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .875rem; }
.ob-body .lnk, .mcard .lnk { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--cap); text-decoration: underline; cursor: pointer; }
.ob-body .banner { margin-top: 1rem; padding: .7rem .9rem; border-radius: var(--r); background: var(--s-done-soft); color: var(--s-done); font-size: .85rem; font-weight: 500; }
/* the payment sheet */
.mcard.pay { max-width: 560px; padding: 0; overflow: hidden; }
.mcard.pay .payh { display: flex; justify-content: space-between; align-items: center; padding: .875rem 1.125rem; border-bottom: 1px solid var(--line); }
.mcard.pay .firm { display: flex; align-items: center; gap: .6rem; font-weight: 600; } .mcard.pay .firm .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--band); color: var(--gold); display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; }
.mcard.pay .firm small { display: block; font-weight: 700; font-size: .62rem; letter-spacing: .1em; color: var(--accent-ink); }
.mcard.pay .paysum { background: linear-gradient(160deg, var(--band), var(--band-2)); color: var(--band-ink); padding: 1rem 1.125rem; display: grid; gap: .25rem; }
.mcard.pay .paysum .cap { color: var(--band-cap); } .mcard.pay .paysum .amt { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--gold); }
.mcard.pay .paysum dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .25rem .75rem; margin: .5rem 0 0; font-size: .82rem; } .mcard.pay .paysum dt { color: var(--band-cap); } .mcard.pay .paysum dd { margin: 0; } .mcard.pay .paysum .disc { color: #9BD39A; }
.mcard.pay .payb { padding: 1rem 1.125rem 1.25rem; display: grid; gap: .625rem; }
.mcard.pay .payb .lbl { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cap); font-weight: 700; display: grid; gap: .15rem; } .mcard.pay .payb .lbl .cap { text-transform: none; letter-spacing: 0; font-weight: 400; }
.mcard.pay .addr { padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); font-size: .85rem; line-height: 1.45; }
.mcard.pay .tabs { display: flex; gap: .25rem; padding: .2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); } .mcard.pay .tabs span { flex: 1; text-align: center; padding: .4rem; border-radius: 6px; font-size: .82rem; color: var(--ink2); } .mcard.pay .tabs span.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.mcard.pay .btn.wide { width: 100%; justify-content: center; margin-top: .25rem; } .mcard.pay .center { text-align: center; justify-self: center; }
.mcard.pay .cap.center svg { width: 12px; height: 12px; vertical-align: -2px; }
.mcard.pay .gnote { margin: 0; padding-top: .5rem; border-top: 1px dashed var(--line); color: var(--accent-ink); font-size: .78rem; }
@media (max-width: 767px) { .ob-head .stepper li span { display: none; } .ob-head .nums b { font-size: 1.4rem; } .ob-body .doors, .ob-body .mgrid, .ob-body .svgrid, .ob-body .qhero, .ob-body .qcols, .ob-body .ctas { grid-template-columns: 1fr; } .ob-body .mgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } .ob-body .prow .pc { display: none; } .ob-body .g2 { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1023px) { .ob-body .mgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* ═══ landscape: a wider widget, the summary beside the step on desktop, the band's map larger ═══ */
:root { --svc-epr: #6B7F3A; --svc-rp: #2F7D78; --svc-cos: #9B4D73; }
.ob-body .sidecard { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 1rem 1.125rem; display: grid; gap: .5rem; }
.ob-body .sidecard .svc { display: flex; align-items: center; gap: .5rem; font-weight: 600; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.ob-body .sidecard .dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--svc-epr); } .ob-body .sidecard .dot.rp { background: var(--svc-rp); } .ob-body .sidecard .dot.cos { background: var(--svc-cos); }
.ob-body .sidecard .row { display: flex; justify-content: space-between; gap: .75rem; font-size: .875rem; } .ob-body .sidecard .row span { color: var(--ink2); } .ob-body .sidecard .row.disc { color: var(--s-done); } .ob-body .sidecard .row.disc span { color: var(--s-done); }
.ob-body .sidecard .flags { display: flex; flex-wrap: wrap; gap: .15rem; font-size: 1.1rem; line-height: 1; }
.ob-body .sidecard .list { line-height: 1.4; }
.ob-body .sidecard .due { margin-top: .25rem; padding-top: .625rem; border-top: 1px solid var(--line); display: grid; gap: .15rem; } .ob-body .sidecard .due b { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1; letter-spacing: -.01em; }
.ob-body .sidecard .later { padding: .5rem .625rem; border: 1px dashed var(--line2); border-radius: var(--r); }
.ob-body > .main { min-width: 0; }
@media (max-width: 1023px) { .ob-body > .side { margin-top: 1.25rem; } }
@media (min-width: 1024px) {
  .blank .col, .site .fold .col { max-width: 1180px; }
  .ob-body { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 1.75rem; align-items: start; }
  .ob-body.noside { grid-template-columns: 1fr; }
  .ob-body > .side { position: sticky; top: 1rem; }
  .ob-head .band2 { grid-template-columns: minmax(0,1fr) 440px; }
  .ob-head .map-host { height: 170px; }
  .ob-body .mgrid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .ob-body .doors { max-width: 760px; }
  .ob-body .door.find { max-width: 760px; }
}

/* ═══ v8: the service cards, the cosmetics and Responsible Person screens ═══ */
.ob-body .svcpicks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .625rem; margin-bottom: 1rem; }
.ob-body .svcpick { text-align: left; display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-areas: 'd t' 'd s'; gap: .2rem .6rem; align-items: start; padding: .875rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--panel); font: inherit; color: inherit; cursor: pointer; transition: box-shadow var(--t-fast); }
.ob-body .svcpick:hover { box-shadow: var(--shadow); }
.ob-body .svcpick .dot { grid-area: d; width: .7rem; height: .7rem; border-radius: 999px; margin-top: .3rem; background: var(--svc-epr); } .ob-body .svcpick.rp .dot { background: var(--svc-rp); } .ob-body .svcpick.cos .dot { background: var(--svc-cos); }
.ob-body .svcpick b { grid-area: t; font-weight: 600; } .ob-body .svcpick span { grid-area: s; color: var(--ink2); font-size: .82rem; line-height: 1.4; }
.ob-body .svcpick.on { border-color: var(--gold); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.ob-body .tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; margin-bottom: .875rem; }
.ob-body .tile { padding: .625rem .75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); display: grid; gap: .15rem; } .ob-body .tile b { color: var(--svc-cos); font-weight: 600; font-size: .9rem; }
.ob-body .prow .pc i.cos { background: #F3E6EE; color: var(--svc-cos); }
.ob-body .pricecard { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; margin-bottom: .25rem; }
.ob-body .pricecard div { padding: .75rem .875rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); display: grid; gap: .15rem; } .ob-body .pricecard b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; } .ob-body .pricecard span { font-size: .8rem; color: var(--ink2); }
.ob-body .qn { display: flex; gap: .6rem; align-items: baseline; } .ob-body .qn i { font-style: normal; font-family: var(--font-display); color: var(--cap); font-size: 1rem; } .ob-body .qn b { font-weight: 600; }
.ob-body .notebox.blue { background: var(--s-moving-soft); border-color: #CBD8EA; color: var(--ink); display: grid; gap: .5rem; } .ob-body .notebox.blue p { margin: 0; font-size: .875rem; }
.ob-body .notebox.cos { background: #F7EEF3; border-color: #E4CBD8; } .ob-body .notebox.cos b { color: var(--svc-cos); font-weight: 600; font-size: .85rem; }
.ob-body .tickrow { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; cursor: pointer; } .ob-body .tickrow input { width: 1.1rem; height: 1.1rem; margin-top: .1rem; accent-color: var(--band); flex: 0 0 auto; }
.ob-body .tickrow.big { padding: .875rem 1rem; border: 1.5px solid var(--line2); border-radius: var(--r-lg); background: var(--panel); margin-top: .875rem; font-weight: 500; }
.ob-body .tickrow .cap { display: block; margin-top: .15rem; }
.ob-body .refchip { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .5rem .35rem .75rem; border: 1.5px solid var(--gold); border-radius: var(--r); background: var(--panel); } .ob-body .refchip b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .02em; }
.ob-body .qcost.cos, .ob-body .qcost.rp { margin-top: .75rem; } .ob-body .qcost .pips { list-style: none; margin: .5rem 0 0; padding: .5rem 0 0; border-top: 1px dashed var(--line); display: grid; gap: .3rem; font-size: .82rem; color: var(--ink2); }
.ob-body .qcost .pips li { padding-left: 1rem; position: relative; } .ob-body .qcost .pips li::before { content: ""; position: absolute; left: 0; top: .45em; width: .45rem; height: .45rem; border-radius: 999px; border: 1.5px solid var(--line2); } .ob-body .qcost .pips li.on::before { background: var(--gold); border-color: var(--gold); } .ob-body .qcost .pips li.mute { color: var(--cap); }
.ob-body .banner.green { margin-top: .75rem; }
.ob-body .planbox { margin-top: 1rem; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); display: grid; gap: .625rem; } .ob-body .planbox .pt { font-size: 1.05rem; font-weight: 600; }
.ob-body .planbox .segs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .375rem; } .ob-body .planbox .seg { padding: .5rem .625rem; border-radius: var(--r); border: 1.5px dashed var(--line2); display: grid; gap: .1rem; font-size: .78rem; } .ob-body .planbox .seg b { font-weight: 600; } .ob-body .planbox .seg span { color: var(--cap); }
.ob-body .planbox .seg.order { border-style: solid; background: var(--band); border-color: var(--band); color: var(--band-ink); } .ob-body .planbox .seg.order span { color: var(--band-cap); } .ob-body .planbox .seg.plan { border-style: solid; border-color: var(--gold); background: var(--accent-soft); } .ob-body .planbox .seg.plan span { color: var(--accent-ink); }
.ob-body .plancards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .625rem; }
.ob-body .plancard { padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); display: grid; gap: .4rem; align-content: start; } .ob-body .plancard > b { font-weight: 600; font-size: 1rem; }
.ob-body .pillreq { justify-self: start; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: var(--s-you-soft); color: var(--s-you); }
.ob-body .plancard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; } .ob-body .plancard li { display: flex; gap: .4rem; font-size: .82rem; align-items: flex-start; } .ob-body .plancard li svg { width: 14px; height: 14px; color: var(--s-done); flex: 0 0 14px; margin-top: .15rem; }
.ob-body .plancard .pr b { font-weight: 600; }
.ob-body .chipx { font-style: normal; font-size: .7rem; padding: .1rem .4rem; border-radius: 4px; background: var(--inset); color: var(--ink2); margin-right: .2rem; }
.ob-body .plansw { text-align: left; display: grid; gap: .1rem; padding: .5rem .75rem; border: 1.5px solid var(--line2); border-radius: var(--r); background: var(--panel); font: inherit; color: inherit; cursor: pointer; } .ob-body .plansw b { font-weight: 600; font-size: .85rem; } .ob-body .plansw span { font-size: .72rem; color: var(--cap); }
.ob-body .plansw.on { border-color: var(--gold); background: var(--accent-soft); } .ob-body .plansw.on b { color: var(--accent-ink); }
.ob-body .acc { margin-top: .875rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: .75rem 1rem; } .ob-body .acc summary { cursor: pointer; font-weight: 600; } .ob-body .acc ul { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .4rem; } .ob-body .acc li b { display: block; font-weight: 600; font-size: .875rem; } .ob-body .acc li .cap { display: block; }
.ob-body .acc .kv { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: .4rem .75rem; margin: .625rem 0 0; font-size: .875rem; } .ob-body .kv dt { color: var(--cap); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding-top: .15rem; } .ob-body .kv dd { margin: 0; }
.ob-body .kv.card { padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); display: grid; grid-template-columns: 140px minmax(0,1fr); gap: .4rem .75rem; margin: .75rem 0; }
.ob-body .namebox { margin-bottom: .75rem; padding: .625rem .875rem; border: 1px solid var(--line); border-left: 3px solid var(--svc-rp); border-radius: var(--r); background: var(--raised); font-size: .85rem; } .ob-body .namebox ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .25rem; } .ob-body .namebox li b { font-weight: 600; } .ob-body .namebox li .cap { display: block; }
.ob-body .pill.mk { padding: .4rem .75rem .4rem .5rem; } .ob-body .cc-grp.uk { border-top: 1px dashed var(--line2); padding-top: .75rem; }
.ob-body .dblock.rp { margin-top: 1rem; padding: .875rem 1rem; border: 1px solid #F0D9C9; border-radius: var(--r-lg); background: var(--s-you-soft); }
.ob-body .tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .625rem; margin-top: .75rem; }
.ob-body .tier { text-align: left; display: grid; gap: .2rem; padding: .875rem 1rem; border: 1.5px solid var(--line2); border-radius: var(--r-lg); background: var(--panel); font: inherit; color: inherit; cursor: pointer; } .ob-body .tier b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; } .ob-body .tier b small { font-family: var(--font-text); font-size: .8rem; color: var(--cap); } .ob-body .tier span { font-weight: 600; font-size: .9rem; } .ob-body .tier .cap { font-weight: 400; }
.ob-body .tier.on { background: var(--band); border-color: var(--band); color: var(--band-ink); } .ob-body .tier.on b { color: var(--gold); } .ob-body .tier.on .cap, .ob-body .tier.on b small { color: var(--band-cap); }
.ob-body .cert { display: grid; gap: .75rem; justify-items: start; padding: .5rem 0; } .ob-body .cert .lt.big { width: 3rem; height: 3rem; font-size: 1.5rem; } .ob-body .cert .lt.big svg { width: 1.5rem; height: 1.5rem; }
.ob-body .spin { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 3px solid var(--line); border-top-color: var(--gold); animation: sp8 .9s linear infinite; } @keyframes sp8 { to { transform: rotate(360deg); } }
.ob-body .ctacol { display: grid; gap: .5rem; margin-top: 1rem; } .ob-body .btn.wide { width: 100%; justify-content: center; } .ob-body .center { text-align: center; }
.ob-body .inclbox.white { background: var(--panel); }
.ob-body .qt .flags { font-size: 1rem; }
@media (max-width: 767px) { .ob-body .svcpicks, .ob-body .tiles, .ob-body .tiers, .ob-body .pricecard, .ob-body .planbox .segs { grid-template-columns: 1fr; } .ob-body .tiles { grid-template-columns: repeat(3, minmax(0,1fr)); } .ob-body .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } .ob-body .kv, .ob-body .kv.card, .ob-body .acc .kv { grid-template-columns: 1fr; } }

/* ═══ v9: the type hierarchy, the services list, flag tiles for languages, the three doors, the guided-demo button ═══ */
/* hierarchy: display titles in Newsreader, leads quieter, section titles bold sans, captions never under 13px */
.ob-body .stp-h h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.01em; }
.ob-body .lead { font-size: 1rem; line-height: 1.55; color: var(--ink2); max-width: 66ch; margin-bottom: 1.25rem; }
.ob-body .cap, .ob-body .fld .lbl, .ob-body .abox > .lbl, .ob-body .gl, .ob-body .np em, .ob-body .pills.ro em, .ob-body .catbox em, .ob-body .lchip, .ob-body .chipx, .ob-body .plancard li, .ob-body .plansw span, .ob-body .qcost .pips, .ob-body .inclbox li, .ob-body .notebox ul, .ob-body .planbox .seg, .ob-body .svcpick span, .ob-body .door span { font-size: .8125rem; }
.ob-body .fld .lbl, .ob-body .abox > .lbl, .ob-body .gl, .ob-body .eyebrow { letter-spacing: .12em; font-size: .78rem; }
.ob-body .stp-sub, .ob-body .cc-head h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ob-body .cc-head { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); } .ob-body .cc-head h3 { margin-top: 0; padding-top: 0; border-top: 0; }
.ob-body .qcard { border-left: 3px solid var(--gold); gap: .625rem; padding: 1rem 1.125rem; }
.ob-body .qcard > b, .ob-body .qn b { font-size: 1.0625rem; font-weight: 600; }
.ob-body .qcard > .cap, .ob-body .plancard > .cap, .ob-body .pcard > .cap { line-height: 1.5; }
.ob-body .inclbox > b, .ob-body .notebox > b, .ob-body .planbox .pt, .ob-body .pcard .ph b, .ob-body .door b { font-size: 1.0625rem; font-weight: 600; }
.ob-body .notebox.blue p, .ob-body .notebox ul, .ob-body .tickrow { font-size: .9rem; }
.ob-body .prow .pt b, .ob-body .mcard .mn, .ob-body .svc-c b { font-size: .95rem; }
.ob-body .runtot .r, .ob-body .qt { font-size: .9rem; }
.ob-body .g2 { gap: .875rem 1rem; }
/* the services step: a tidy list per market */
.ob-body .svcard { display: grid; gap: .625rem; align-content: start; padding: .875rem 1rem 1rem; grid-template-columns: 1fr; }
.ob-body .svcard .svh { display: flex; align-items: center; gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); } .ob-body .svcard .svh b { font-weight: 600; font-size: 1rem; flex: 1; } .ob-body .svcard .svh .fl { font-size: 1.15rem; }
.ob-body .svcard .svsub { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.ob-body .svcard .svlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ob-body .svcard .svl { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: .25rem .6rem; align-items: start; }
.ob-body .svcard .svl .svn { font-weight: 600; font-size: .9rem; line-height: 1.3; } .ob-body .svcard .svl .svn small { font-weight: 400; color: var(--cap); font-size: .8125rem; }
.ob-body .svcard .svl .np { grid-column: 2; display: flex; flex-wrap: wrap; gap: .25rem; }
.ob-body .svcard .tk { width: 18px; height: 18px; margin-top: .05rem; }
.ob-body .svcard .catbox { margin-top: .125rem; }
/* languages as flag tiles, the name in its own language beneath */
.ob-head .lang { align-items: stretch; padding: .25rem; }
.ob-head .lang button { height: auto; display: grid; justify-items: center; gap: .1rem; padding: .35rem .75rem .3rem; line-height: 1; }
.ob-head .lang button i { font-style: normal; font-size: 1.15rem; line-height: 1; } .ob-head .lang button span { font-size: .72rem; }
.ob-head .lang .more { align-self: center; height: 2rem; }
/* the three doors */
.ob-body .doors3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
.ob-body .door.svcdoor { position: relative; padding-left: 1.5rem; } .ob-body .door.svcdoor .wdot { position: absolute; left: .75rem; top: 1.35rem; width: .55rem; height: .55rem; border-radius: 999px; background: var(--svc-epr); }
.ob-body .door.svcdoor.rp .wdot { background: var(--svc-rp); } .ob-body .door.svcdoor.cos .wdot { background: var(--svc-cos); }
.ob-body .door.svcdoor:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.ob-body .door.svcdoor b { color: var(--ink); }
/* the guided demo's button lives in the strip */
.gstrip.guided { grid-template-areas: 'k k' 't t' 's n'; align-items: center; }
.gstrip .gact { grid-area: n; display: flex; align-items: center; gap: .75rem; justify-self: end; white-space: nowrap; }
@media (max-width: 767px) { .ob-body .doors3 { grid-template-columns: 1fr; } .gstrip.guided { grid-template-areas: 'k k' 't t' 's s' 'n n'; } .gstrip .gact { justify-self: stretch; white-space: normal; justify-content: space-between; } .ob-head .lang button span { display: none; } .ob-head .lang button { padding: .35rem .6rem; } }

/* ═══ v10: the audit's fixes ═══ */
.ob-body .paid svg, .ob-body .paid > svg { width: 20px; height: 20px; flex: none; }
.ob { overflow: clip; }
body.modal-open { overflow: hidden; }
.land .modal { overflow-y: auto; align-items: start; padding: 1rem; }
.mcard.pay { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.mcard.pay .payb { position: relative; }
.ob-body .mcard:hover, .ob-body .prow:hover, .ob-body .pill:hover, .ob-body .tier:hover, .ob-body .yn button:hover, .ob-body .cta:hover, .ob-body .svc-c:hover, .ob-body .plansw:hover { border-color: var(--line2); box-shadow: var(--shadow); }
.ob-body .lnk:hover { color: var(--ink); }
/* one gold button per view: the page chrome and the assistant step back, the strip's demo button goes navy */
.sitebar .btn.gold, .sitefoot .btn.gold { background: var(--panel); border-color: var(--line2); color: var(--ink); }
.vbar .btn.gold { background: transparent; border: 1.5px solid var(--gold); color: var(--ink); box-shadow: none; } .vbar .btn.gold::before { display: none; }
.ob-foot.open #askbtn { display: none; }
.gstrip .btn.gold { background: var(--band); border-color: var(--band); color: var(--band-ink); }
/* text floors */
.ob-head .stepper li span { font-size: .7rem; letter-spacing: .04em; white-space: normal; line-height: 1.15; text-align: center; }
.ob-head .stepper li i { font-size: .72rem; }
.ob-body .prow .pc i, .ob-body .tag, .ob-body .pillreq, .gstrip .gk, .ob-head .lang button span, .ob-head .nums span, .ob-head .st, .ob-body .sidecard .svc b, .ob-body .kv dt, .mcard.pay .lbl, .mcard .cap, .ai-label { font-size: .75rem; }
.ob-body .doc.pdf { font-size: .72rem; }
.ob-body .fld .lbl { font-size: .8125rem; letter-spacing: .08em; column-gap: .5rem; }
.ob-body .sidecard .svc b { font-size: .95rem; }
/* band */
.ob-head .lang .more { align-self: stretch; height: auto; }
@media (max-width: 640px) { .ob-head .map-host { height: 84px; } .ob-head .langpop { left: 0; right: auto; max-width: calc(100vw - 2rem); } }
/* door */
.ob-body .door.find { max-width: none; }
/* details */
.ob-body .fld { align-content: start; } .ob-body .g2 { align-items: end; } .ob-body .input { height: 2.75rem; }
/* markets */
.ob-body .mcard { min-height: 61px; } .ob-body .mcard .mn { white-space: normal; line-height: 1.2; }
.ob-body .mcard.on::after { content: "✓"; width: 16px; height: 16px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--gold-ink); box-shadow: none; }
/* services pills, yes/no, tiers: a real tick, gold in both modes */
.ob-body .pill.on i { background: var(--gold); border-color: var(--gold); position: relative; } .ob-body .pill.on i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--gold-ink); }
.ob-body .yn button.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.ob-body .tier.on { box-shadow: 0 0 0 2px var(--gold); }
.ob-body .prow.on .bx { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
/* quotes */
.ob-body .qpanel td .cap { display: block; margin-top: 2px; } .ob-body .qt .flags { display: inline; }
.ob-body .qleft { display: grid; gap: .75rem; align-content: start; min-width: 0; }
.ob-body .ctacol { grid-template-columns: minmax(0,1fr); } .ob-body .btn.wide { max-width: 100%; }
.ob-body .planbox { margin-top: 1rem; }
/* buttons */
.ob .btn:disabled, .mcard .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* certificate, authorise, documents */
.ob-body .cert { padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ob-body .cert h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.15; }
.ob-body .cert .act { border-top: 0; padding-top: 0; margin-top: .25rem; }
.ob-body .acc summary { list-style: none; display: flex; align-items: center; gap: .5rem; } .ob-body .acc summary::-webkit-details-marker { display: none; }
.ob-body .acc summary::before { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid var(--cap); border-bottom: 1.5px solid var(--cap); transform: rotate(-45deg); transition: transform var(--t-fast); } .ob-body .acc[open] summary::before { transform: rotate(45deg); }
.ob-body .main h3, .ob-body .stp-sub { margin-bottom: .375rem; }
/* dark mode: fields and cards must be visible */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ob { --line: #3A4049; --line2: #4C535C; } }
:root[data-theme="dark"] .ob { --line: #3A4049; --line2: #4C535C; }
.ob .input::placeholder { color: var(--cap); opacity: 1; }
/* tap targets on phones */
@media (max-width: 640px) {
  .ob-head .lang button, .ob-head .lang .more, .ob-body .cc-tools button, .ob-body .pill, .ob-body .yn button, .ob-body .btn.sm, .ob-body .lchip { min-height: 44px; }
  .ob-body .lnk, .ob-body .why { min-height: 44px; display: inline-flex; align-items: center; }
  .ob-body .tickrow, .ob-body .ckcard { min-height: 44px; align-items: center; }
  .ob-body .tickrow input, .ob-body .ckcard input { width: 1.35rem; height: 1.35rem; }
}


/* ═══ the landing page: the widget as the client sees it after the CTA ═══ */
body { padding: 0; }
.land { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.sitebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.brandline { display: flex; align-items: center; gap: .625rem; color: var(--ink); text-decoration: none; }
.brandline .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-family: var(--font-display); font-size: 17px; }
.brandline b { display: block; font-weight: 600; line-height: 1.1; } .brandline small { display: block; color: var(--cap); font-size: .75rem; }
.land .stage { border: 0; border-radius: 0; height: auto; min-height: 0; overflow: visible; flex: 1; background: var(--bg); }
.land .blank { padding: 1.75rem 1rem 3rem; }
.land .modal { position: fixed; }
.sitefoot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--line); color: var(--cap); font-size: .8125rem; background: var(--panel); }
.brandline .mark.eu { background: var(--band); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.sitefoot .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.sitebar .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.brandline b, .brandline small { white-space: nowrap; }
.sitebar .row, .sitefoot .row { flex-wrap: nowrap; }
@media (max-width: 640px) {
  .sitebar { padding: .625rem 1rem; }
  .sitebar .row .btn.ghost { display: none; }
  .land .blank { padding: 1rem .75rem 2rem; }
  .sitefoot { padding: .875rem 1rem; }
}
@media (max-width: 480px) { .brandline small { display: none; } .sitebar .btn.sm { padding-left: .75rem; padding-right: .75rem; } }
/* the brand board: orange is reserved for "Open the demo" — navy text on it (5.65:1), never white */
.sitebar .btn.ghost { background: var(--orange); border-color: var(--orange); color: var(--band); font-weight: 600; }
.sitebar .btn.ghost:hover { background: var(--orange-hover); color: var(--band); }

/* ═══ v13: the guide's "Show me the next screen" is the brightest thing on the strip: gold, with the Ask button's halo ═══ */
.gstrip .btn.gold[data-demo-next] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); position: relative; isolation: isolate; box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 22%, transparent), 0 6px 18px color-mix(in oklab, var(--gold) 30%, transparent); }
.gstrip .btn.gold[data-demo-next]:hover { background: var(--gold-2); }
.gstrip .btn.gold[data-demo-next]::before { content: ""; position: absolute; inset: -3px; border-radius: 13px; border: 2px solid var(--gold); opacity: 0; pointer-events: none; animation: ask-pulse 2.6s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .gstrip .btn.gold[data-demo-next]::before { animation: none; } }

/* ═══ embed: the demo inside the eu27.ai page (an iframe that grows with it; the page's header and footer are the site's) ═══ */
html.embed, html.embed body { background: transparent; height: auto; min-height: 0; } /* never the iframe's own height, or it could only grow */
html.embed .sitebar, html.embed .sitefoot { display: none; }
html.embed .land { min-height: 0; }
html.embed .land .blank { padding: .25rem 0 1rem; }
html.embed .land .modal { position: absolute; left: 0; right: 0; top: var(--mtop, 0px); bottom: auto; min-height: var(--mh, 100vh); align-items: center; }
html.embed .mcard.pay { max-height: calc(var(--mh, 100vh) - 2rem); }

/* ═══ v12: what the sector packs' generic screens add. Colours come from the pack's own stylesheet; nothing here types a hex. ═══ */
.ob-head .band2.nomap { grid-template-columns: minmax(0,1fr); }
/* more than eight steps: numbers only in the stepper (as on phones); the step's name is in the line above it */
.ob-head .stepper.many li span { display: none; }
.ob-body .door.svcdoor.pk .wdot { background: var(--wdot); }
.ob-body .sidecard .dot.pk { background: var(--wdot); }
.ob-body .sidecard .svc { display: flex; align-items: center; gap: .5rem; }
.ob-body .pill em { font-style: normal; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cap); margin-left: .25rem; }
.ob-body .otab table { width: 100%; } .ob-body .otab th { text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cap); font-weight: 700; padding: 0 .25rem .4rem; }
.ob-body .otab td { padding: .25rem; border-bottom: 0; } .ob-body .otab .input { min-height: 2.5rem; }
.ob-body .inclbox.white ul li { align-items: flex-start; }
.ob-body .qt tr.once td.n { color: var(--cap); }
.ob-body .fld.wide .pills { margin-top: .25rem; }
.ob-body .fld .yn { margin-top: .25rem; }
.ob-body .g2 > .fld.wide { grid-column: 1 / -1; }