/* ==========================================================================
   Mandate Studio — layouts: homepage, recruiting workspace, report paper,
   process document. Built only from the tokens in ds.css.
   ========================================================================== */

:root {
  interpolate-size: allow-keywords;
  --paper-warn-bg: #fef3c7;
  --paper-warn-fg: #7c3a06;
  --paper-acc-bg: #e0f5fa;
  --paper-acc-fg: #0c4a5e;
  --paper-ok-bg: #dcfce7;
  --paper-ok-fg: #14532d;
  --paper-bad-bg: #ffe4e6;
  --paper-bad-fg: #9f1239;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
}
html:has(body[data-view="home"]) { scroll-behavior: smooth; }
.view { min-height: 100vh; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.m-only { display: none !important; }
.small { font-size: 12.5px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, [tabindex="-1"]:focus { outline: none; }
html:not(.vt-route) .app-main, html:not(.vt-route) .doc-status { view-transition-name: none; }

/* ---------- shared evaluation language ---------- */
.evalbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; min-width: 150px; }
.evalbar i, .legend-mini i { display: block; height: 10px; border-radius: 999px; }
.evalhead { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; min-width: 150px; font: 700 10px/1.2 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.evalhead span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-doc { background: linear-gradient(90deg, var(--btn-a), var(--btn-b)); }
.seg-verify { background: repeating-linear-gradient(-45deg, var(--warn) 0 3px, color-mix(in srgb, var(--warn) 30%, transparent) 3px 6px); }
.seg-none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--stroke-2); }
.seg-ok { background: var(--ok); }
.seg-out { background: var(--bad); }
.evalbar .is-sec { opacity: 0.45; }
.legend-mini { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 600 12px/1.2 var(--font-ui); color: var(--muted); }
.legend-mini span { display: inline-flex; align-items: center; gap: 6px; }
.legend-mini i { width: 18px; height: 8px; }
.lv { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.lv .i { width: 15px; height: 15px; stroke-width: 2.6; }
.lv-doc { background: var(--accent-soft); color: var(--accent-ink); }
.lv-verify { background: var(--warn-soft); color: var(--warn); }
.lv-none { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--stroke-2); }
.lv-ok { background: var(--ok-soft); color: var(--ok); }
.lv-out { background: var(--bad-soft); color: var(--bad); }
.lv-t { font: 700 12px/1.2 var(--font-ui); white-space: nowrap; }
.lv-t-doc { color: var(--accent-ink); }
.lv-t-verify { color: var(--warn); }
.lv-t-none { color: var(--muted); }
.lv-t-ok { color: var(--ok); }
.lv-t-out { color: var(--bad); }
.cand-tile {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px;
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--on-accent);
  font: 400 20px/1 var(--font-display); letter-spacing: 0.02em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.cand-tile--sm { width: 26px; height: 26px; font-size: 16px; border-radius: 8px; }
.cand-tile--xl { width: 64px; height: 64px; font-size: 38px; border-radius: 20px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--stroke); font: 600 12.5px/1.2 var(--font-ui); color: var(--fg-2); white-space: nowrap; }
.tag .i { width: 14px; height: 14px; color: var(--muted); }
.tag--sm { padding: 3px 9px; font-size: 11px; font-weight: 700; color: var(--muted); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent-ink); font: 700 13px/1.3 var(--font-ui); cursor: pointer; text-decoration: none; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.icon-btn--sm { width: 34px; height: 34px; }
.icon-btn--sm .i { width: 16px; height: 16px; }

/* ======================= HOMEPAGE ======================= */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding: 14px var(--gutter-r) 0 var(--gutter); }
.site-nav { max-width: 1200px; margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 999px; transition: padding 0.5s var(--ease), background-color 0.4s; }
.site-head.is-scrolled .site-nav { padding-block: 6px; background: var(--glass-2); }
.site-nav .brand { white-space: nowrap; }
.site-nav .brand svg { width: 32px; height: 32px; }
.nav-links { display: flex; gap: 2px; padding: 4px; margin-inline: auto; border-radius: 999px; }
.nav-links a { padding: 9px 16px; border-radius: 999px; font: 600 14px/1.2 var(--font-ui); color: var(--fg-2); text-decoration: none; transition: color 0.3s; white-space: nowrap; }
.nav-links a:hover { color: var(--fg); }
.nav-links a.is-active { color: var(--on-accent); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.burger { display: none; }
.burger span { position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.45s var(--spring), opacity 0.2s; }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.m-menu { max-width: 1200px; margin: 10px auto 0; padding: 12px; border-radius: 26px; display: grid; gap: 6px; transform-origin: top right; animation: menu-in 0.5s var(--spring) both; }
.m-menu > a:not(.btn) { padding: 14px 16px; border-radius: 16px; font: 700 17px/1.2 var(--font-ui); text-decoration: none; color: var(--fg); animation: item-in 0.5s var(--ease) both; }
.m-menu > a:not(.btn):hover { background: var(--accent-soft); }
.m-menu > *:nth-child(2) { animation-delay: 0.05s; }
.m-menu > *:nth-child(3) { animation-delay: 0.1s; }
.m-menu .btn { margin-top: 4px; animation: item-in 0.5s var(--ease) 0.15s both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } }
@keyframes item-in { from { opacity: 0; transform: translateY(8px); } }

.proto-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border-radius: 999px; border: 1px dashed var(--accent-line); background: transparent; color: var(--accent-ink); font: 700 12.5px/1 var(--font-ui); cursor: pointer; transition: background-color 0.2s, transform 0.4s var(--spring); }
.proto-btn:hover { background: var(--accent-soft); transform: translateY(-1px); }
.proto-btn .i, .proto-icon .i { transition: transform 0.6s var(--spring); }
.proto-btn:hover .i, .proto-icon:hover .i { transform: rotate(-14deg); }
.proto-icon { border-style: dashed; border-color: var(--accent-line); color: var(--accent-ink); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: clamp(40px, 7vw, 92px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero-copy { min-width: 0; }
.hero-title { font-size: clamp(56px, 6.2vw, 96px); margin: 22px 0 20px; }
.hero-title .line { display: block; overflow: hidden; padding-top: 0.16em; margin-top: -0.16em; padding-bottom: 0.03em; }
.hero-title .line > span { display: inline-block; animation: line-up 0.95s var(--ease) both; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.08s; }
.hero-title .line:nth-child(3) > span { animation-delay: 0.16s; }
.hero-title .grad-text { padding-top: 0.16em; margin-top: -0.16em; }
@media (min-width: 1101px) { .hero-title .line { white-space: nowrap; } }
@keyframes line-up { from { transform: translateY(102%); } }
.lede { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--fg-2); max-width: 44ch; }
.cta-row { margin-top: 30px; gap: 12px; }

.hero-stage { position: relative; margin: 0; padding: 40px 0 100px; }
.hm { padding: 20px; border-radius: 28px; animation: drift 10s ease-in-out infinite; }
.hm-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 15px; }
.hm-top b { margin-right: auto; }
.hm-dots { display: flex; gap: 5px; }
.hm-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--stroke-2); }
.hm-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: center; padding: 16px; border-radius: 20px; background: var(--glass-2); border: 1px solid var(--stroke); margin-bottom: 14px; }
.hm-c { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1.2 var(--font-ui); white-space: nowrap; }
.hm-float { position: absolute; border-radius: 20px; }
.hm-q { left: -18px; bottom: 0; max-width: 300px; padding: 14px 18px; animation: drift 8s ease-in-out -3s infinite; }
.hm-q p { font: 600 15px/1.4 var(--font-ui); margin-top: 4px; }
.hm-status { right: 6%; top: 0; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; font-size: 13.5px; animation: drift 9s ease-in-out -5s infinite; }
.hm-status .dot { color: var(--accent-ink); }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.section { padding-top: clamp(64px, 8vw, 120px); }
.sec-head { display: grid; gap: 12px; margin-bottom: 32px; }
.h2 { font-size: clamp(44px, 5.2vw, 76px); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat { padding: 26px; border-radius: 26px; display: grid; gap: 10px; align-content: start; transition: transform 0.5s var(--ease); }
.feat:hover { transform: translateY(-3px); }
.feat h3 { font: 700 20px/1.25 var(--font-ui); margin-top: 8px; }
.feat p { color: var(--fg-2); }
.p-icon { width: 50px; height: 50px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); transition: transform 0.6s var(--spring); }
.feat:hover .p-icon { transform: rotate(-8deg) scale(1.07); }
.steps4 { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.steps4 li { position: relative; padding: 24px; border-radius: 26px; display: grid; gap: 8px; align-content: start; transition: transform 0.5s var(--ease); }
.steps4 li:hover { transform: translateY(-3px); }
.steps4 .sn { font: 400 54px/0.9 var(--font-display); color: var(--faint); transition: color 0.4s; }
.steps4 li:hover .sn { color: var(--accent-ink); }
.steps4 h3 { font: 700 19px/1.3 var(--font-ui); }
.steps4 p { color: var(--fg-2); font-size: 15px; }
.promise { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.promise li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--glass); font: 600 14px/1.2 var(--font-ui); color: var(--fg-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.promise .i { color: var(--accent-ink); }
.plat { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 34px; overflow: hidden; }
.plat-copy { display: grid; gap: 18px; justify-items: start; }
.plat-list { list-style: none; display: grid; gap: 12px; }
.plat-list li { display: flex; align-items: center; gap: 12px; font: 600 15.5px/1.3 var(--font-ui); }
.plat-shot { display: block; border-radius: 20px; overflow: hidden; border: 1px solid var(--stroke-2); box-shadow: var(--shadow); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform 0.8s var(--ease); }
.plat-shot:hover { transform: perspective(1400px) rotateY(0) rotateX(0) translateY(-4px); }
.plat-shot img { display: block; width: 100%; height: auto; }
.for-light { display: none !important; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .for-light { display: block !important; } :root:not([data-theme="dark"]) .for-dark { display: none !important; } }
:root[data-theme="light"] .for-light { display: block !important; }
:root[data-theme="light"] .for-dark { display: none !important; }

.contact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 36px; padding: clamp(24px, 4vw, 44px); border-radius: 34px; }
.contact-copy { display: grid; gap: 14px; align-content: start; }
.contact-copy p { color: var(--fg-2); font-size: 17px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 18px; }
.form-foot .field-hint { display: inline-flex; gap: 6px; align-items: center; }
.contact-done { display: grid; gap: 12px; align-content: center; justify-items: start; }
.contact-done h3 { font: 700 22px/1.3 var(--font-ui); }
.contact-done p { color: var(--fg-2); max-width: 46ch; }
.done-mark { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); box-shadow: 0 14px 30px -12px var(--btn-a); animation: pop 0.7s var(--spring) both; }
.done-mark .i { width: 28px; height: 28px; stroke-width: 2.6; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } }
.site-foot { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; margin-top: clamp(64px, 8vw, 110px); padding-top: 28px; padding-bottom: 48px; border-top: 1px solid var(--stroke); font-size: 13.5px; }
.foot-links { display: flex; gap: 18px; }
.foot-links a { text-decoration: none; font-weight: 600; color: var(--fg-2); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 0.45s var(--ease), color 0.2s; padding-bottom: 2px; }
.foot-links a:hover { background-size: 100% 1.5px; color: var(--fg); }

/* prototype sheet */
.proto-sheet { width: min(560px, calc(100vw - 32px)); }
.proto-list { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.proto-list button { width: 100%; text-align: left; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--stroke-2); background: var(--glass-2); cursor: pointer; transition: border-color 0.2s, transform 0.35s var(--ease); }
.proto-list button:hover { border-color: var(--accent-line); transform: translateX(3px); }
.proto-list b { display: block; font-size: 14px; }
.proto-list small { display: block; color: var(--muted); font-size: 12.5px; }
.proto-list .n { font: 400 22px/1 var(--font-display); color: var(--accent-ink); }

/* ======================= WORKSPACE ======================= */
.view-app {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "rail top" "rail journey" "rail main"; grid-template-rows: auto auto 1fr;
  column-gap: 24px; min-height: 100vh; padding: 16px var(--gutter-r) 40px var(--gutter); font-size: 14.5px; line-height: 1.5;
}
.app-rail { grid-area: rail; position: sticky; top: 16px; height: calc(100vh - 32px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.app-rail .brand svg { width: 40px; height: 40px; }
.rail-nav { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 34px; margin-top: 6px; }
.rail-nav a { position: relative; width: 70px; padding: 12px 0 10px; display: grid; justify-items: center; gap: 5px; border-radius: 28px; text-decoration: none; color: var(--fg-2); font: 700 10.5px/1.1 var(--font-ui); transition: color 0.3s; }
.rail-nav a .i { width: 21px; height: 21px; transition: transform 0.5s var(--spring); }
.rail-nav a:hover .i { transform: translateY(-2px) scale(1.08); }
.rail-nav a:active .i { transform: scale(0.88); }
.rail-nav a.is-active { color: var(--on-accent); }
.rail-spacer { flex: 1; }
.app-top { grid-area: top; display: flex; align-items: center; gap: 12px; padding: 2px 0 18px; min-width: 0; flex-wrap: wrap; }
.app-top .grow { flex: 1; }
.asg { display: flex; align-items: center; gap: 12px; min-width: 0; }
.asg-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.asg b { display: block; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asg small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asg > span:last-child { min-width: 0; }
.status-link { text-decoration: none; color: inherit; border-radius: 999px; }
.doc-status { view-transition-name: doc-status; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; font: 700 12.5px/1.2 var(--font-ui); border: 1px solid var(--stroke-2); background: var(--glass-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); white-space: nowrap; transition: border-color 0.2s, transform 0.35s var(--spring); }
.status-link:hover .doc-status { border-color: var(--accent-line); transform: translateY(-1px); }
.doc-status .v { font: 800 12px/1 var(--font-ui); padding: 4px 7px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); }
.doc-status .sub { font-weight: 500; color: var(--muted); }
.doc-status[data-s="warn"] .dot { color: var(--warn); }
.doc-status[data-s="accent"] .dot { color: var(--accent-ink); }
.doc-status[data-s="ok"] .dot { color: var(--ok); }
.me { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1.2 var(--font-ui); }
.me small { display: block; color: var(--muted); font-weight: 500; font-size: 11.5px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--font-ui); color: #fff; background: linear-gradient(135deg, var(--orb-a), var(--orb-b)); flex: none; }
.avatar--b { background: linear-gradient(135deg, #334155, #64748b); }
.avatar--c { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.app-main { grid-area: main; min-width: 0; view-transition-name: main-view; }
.tabbar { display: none; }

.pg { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.pg-t { font: 800 clamp(24px, 2.2vw, 30px)/1.15 var(--font-ui); letter-spacing: -0.02em; }
.pg-s { color: var(--muted); margin-top: 4px; font-size: 14px; }
.card { padding: 20px; border-radius: 26px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-h h2, .card-h h3 { font: 700 16px/1.3 var(--font-ui); display: flex; align-items: center; gap: 8px; }
.card-h > .i { color: var(--muted); }

/* overview */
.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.ov-mandate { grid-column: span 5; }
.ov-start { grid-column: span 4; }
.ov-next { grid-column: span 3; }
.ov-cands { grid-column: span 8; }
.ov-meet { grid-column: span 4; }
.ov-prio { font: 400 clamp(36px, 3.2vw, 46px)/0.95 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ov-was { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted); margin-top: -6px; }
.ov-was s { text-decoration-color: var(--bad); text-decoration-thickness: 1.5px; }
.ov-was span { font-weight: 700; color: var(--accent-ink); }
.ov-warn { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); font: 700 13px/1.3 var(--font-ui); }
.ov-warn .i { color: var(--warn); flex: none; }
.ov-warn span { flex: 1; }
.kpi { display: flex; align-items: flex-end; gap: 12px; }
.kpi b { font: 400 64px/0.82 var(--font-display); letter-spacing: 0.01em; }
.kpi span { color: var(--muted); font-size: 13px; line-height: 1.3; padding-bottom: 3px; }
.strack { position: relative; height: 74px; margin: 2px 12px 0; }
.strack .bar { position: absolute; left: 0; right: 0; top: 36px; height: 8px; border-radius: 999px; background: var(--ok-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent); }
.strack .late { position: absolute; top: 36px; height: 8px; right: 0; left: 66.666%; border-radius: 0 999px 999px 0; background: repeating-linear-gradient(-45deg, var(--bad-soft) 0 4px, color-mix(in srgb, var(--bad) 35%, transparent) 4px 8px); }
.strack .tick { position: absolute; top: 30px; width: 2px; height: 20px; background: var(--fg); border-radius: 2px; transform: translateX(-1px); }
.strack .lbl { position: absolute; top: 56px; transform: translateX(-50%); font: 700 11px/1.2 var(--font-ui); color: var(--muted); }
.strack .l90 { color: var(--bad); }
.strack .pin { position: absolute; top: 0; transform: translateX(-50%); }
.strack .pin .cand-tile { width: 26px; height: 26px; font-size: 16px; border-radius: 9px; }
.strack .pin.is-out .cand-tile { background: var(--bad); }
.todo { list-style: none; display: grid; gap: 4px; }
.todo li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 12px; font: 600 13.5px/1.3 var(--font-ui); color: var(--fg-2); }
.todo .tick-c { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--stroke-2); display: grid; place-items: center; }
.todo .tick-c .i { width: 13px; height: 13px; stroke-width: 3; }
.todo li.is-done { color: var(--muted); }
.todo li.is-done span:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--stroke-2); }
.todo li.is-done .tick-c { background: var(--ok); color: var(--bg); box-shadow: none; animation: pop 0.5s var(--spring) both; }
.todo li.is-next { background: var(--accent-soft); color: var(--fg); }
.todo li.is-next .tick-c { box-shadow: inset 0 0 0 2px var(--accent); }
.todo small { color: var(--muted); font-weight: 700; }
.tbl-x { overflow-x: auto; margin: 0 -6px; }
.ctable { width: 100%; border-collapse: separate; border-spacing: 0; }
.ctable th { text-align: left; font: 700 10.5px/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 8px 10px; }
.ctable td { padding: 10px 8px; border-top: 1px solid var(--stroke); vertical-align: middle; }
.ctable tbody tr { cursor: pointer; transition: background-color 0.2s; }
.ctable tbody tr:hover { background: var(--glass-2); }
.ctable td:first-child { border-radius: 14px 0 0 14px; }
.ctable td:last-child { border-radius: 0 14px 14px 0; }
.ctable th:nth-child(2), .ctable td:nth-child(2) { width: 40%; }
.crow { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.crow b { display: block; font-size: 14px; }
.crow small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
.qn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--fg-2); }
.qn .i { color: var(--muted); }
.chev { color: var(--muted); transition: transform 0.4s var(--spring); }
.ctable tr:hover .chev { transform: translateX(3px); color: var(--accent-ink); }
.foot-note { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.people { list-style: none; display: grid; gap: 10px; }
.people li { display: flex; align-items: center; gap: 10px; font: 600 13.5px/1.3 var(--font-ui); }
.people small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.ov-report { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--glass-2); border: 1px solid var(--stroke); text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.4s var(--ease); }
.ov-report:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.ov-report .ovr-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.ov-report > span:nth-child(2) { flex: 1; display: grid; gap: 4px; justify-items: start; }
.ov-report b { font-size: 14px; }

/* candidates */
.cd-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.cd-list { position: sticky; top: 16px; display: grid; gap: 4px; padding: 6px; border-radius: 28px; }
.cd-list .liquid-active { background: var(--glass-2); box-shadow: inset 0 0 0 1.5px var(--accent-line), var(--shadow-sm); border-radius: 22px; }
.cd-list .liquid-hover { border-radius: 22px; }
.cd-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border-radius: 22px; text-decoration: none; color: inherit; }
.cd-meta { display: grid; gap: 4px; min-width: 0; }
.cd-meta b { font-size: 14.5px; }
.cd-meta small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-meta .evalbar { min-width: 0; margin-top: 4px; }
.cd-meta .evalbar i { height: 6px; }
.cd-grid .seg--cands { display: none; }
.cd-detail { display: grid; gap: 16px; min-width: 0; }
.cd-head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.cd-id h2 { font: 800 24px/1.2 var(--font-ui); letter-spacing: -0.01em; }
.cd-id p { color: var(--muted); font-size: 14px; }
.ev-list { list-style: none; display: grid; gap: 4px; margin: -4px -6px; }
.ev-btn { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto 18px; gap: 12px; align-items: center; padding: 12px; border: 0; border-radius: 16px; background: transparent; text-align: left; cursor: pointer; transition: background-color 0.2s; }
.ev-btn:hover { background: var(--glass-2); }
.ev-btn .chev { width: 16px; height: 16px; transition: transform 0.45s var(--spring); }
.ev-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ev-main b { display: block; font-size: 14px; }
.ev-main small { display: block; color: var(--muted); font-size: 12.5px; }
.ev-row.is-prio .ev-btn { background: var(--accent-soft); }
.ev-row.is-sec { opacity: 0.7; }
.ev-note { padding: 2px 14px 12px 52px; font-size: 13.5px; color: var(--fg-2); animation: item-in 0.35s var(--ease) both; }
.q-list { list-style: none; display: grid; gap: 4px; }
.q-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--stroke); }
.q-list li:first-child { border-top: 0; }
.q-list .switch { align-items: flex-start; font: 500 14px/1.45 var(--font-ui); color: var(--fg); }
.q-list .switch .track { margin-top: 1px; }
.q-list .switch input:disabled ~ * { opacity: 0.6; }
.ask { display: inline-flex; padding: 3px 9px; border-radius: 999px; font: 700 11px/1.4 var(--font-ui); border: 1px solid var(--stroke-2); color: var(--muted); flex: none; }
.addq { display: flex; gap: 8px; }
.addq .input { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.lock-note { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding: 10px 12px; border-radius: 14px; background: var(--glass-2); }
.cd-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* compare */
.cmp { padding: 8px; overflow-x: auto; }
.cmp-t { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 640px; }
.cmp-t th, .cmp-t td { text-align: left; vertical-align: top; padding: 12px; border-top: 1px solid var(--stroke); }
.cmp-t thead th { border-top: 0; vertical-align: bottom; }
.cmp-t thead th:first-child { width: 26%; }
.cmp-h { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; padding: 6px; margin: -6px; border-radius: 14px; transition: background-color 0.2s; }
.cmp-h:hover { background: var(--glass-2); }
.cmp-h b { display: block; font-size: 14px; }
.cmp-h small { display: block; font-size: 12px; color: var(--muted); }
.cmp-t tbody th { display: table-cell; }
.cmp-t tbody th b { display: block; font-size: 14px; margin-bottom: 6px; }
.cmp-t tr.is-prio > * { background: var(--accent-soft); }
.cmp-t tr.is-prio > th { border-radius: 16px 0 0 16px; }
.cmp-t tr.is-prio > td:last-child { border-radius: 0 16px 16px 0; }
.cmp-t tr.is-sec > * { opacity: 0.6; }
.cell { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: -6px -8px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font: 600 13.5px/1.35 var(--font-ui); color: var(--fg); transition: background-color 0.2s, transform 0.3s var(--ease); }
.cell:hover { background: var(--glass-2); }
.cell:active { transform: scale(0.98); }
.cell-note { margin-top: 10px; font-size: 13px; color: var(--fg-2); animation: item-in 0.35s var(--ease) both; }
.sub-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 26px 0 12px; }
.sub-h h2 { font: 800 18px/1.3 var(--font-ui); }
.trade-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.trade p { color: var(--fg-2); font-size: 14px; }
.trade .btn { justify-self: start; }
.trade.is-on { border-color: var(--accent-line); }

/* report */
.rp-bar { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 14px 16px 14px 20px; border-radius: 999px; margin-bottom: 16px; }
.rp-state { font: 600 13.5px/1.35 var(--font-ui); color: var(--fg-2); }
.stepper { list-style: none; display: flex; align-items: center; }
.stepper li { position: relative; display: flex; align-items: center; gap: 8px; font: 700 12.5px/1.2 var(--font-ui); color: var(--muted); padding-right: 30px; }
.stepper li:last-child { padding-right: 0; }
.stepper li:not(:last-child)::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: var(--stroke-2); }
.stepper .node { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--stroke-2); flex: none; }
.stepper .node .i { width: 14px; height: 14px; }
.stepper li.done { color: var(--fg-2); }
.stepper li.done .node { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--on-accent); box-shadow: none; }
.stepper li.done .node .i { stroke-width: 3; }
.stepper li.done:not(:last-child)::after { background: var(--accent); }
.stepper li.now { color: var(--fg); }
.stepper li.now .node { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-ink); }
.stepper li.now .node::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent-line); animation: ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.stepper li.warn { color: var(--warn); }
.stepper li.warn .node { box-shadow: inset 0 0 0 2px var(--warn); color: var(--warn); }
.err-box, .note-bar { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 20px; margin-bottom: 16px; font-size: 14px; }
.err-box { background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); }
.err-box > .i { color: var(--bad); margin-top: 2px; }
.err-box ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.err-box a { color: var(--fg); font-weight: 700; text-underline-offset: 3px; }
.note-bar { align-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); flex-wrap: wrap; }
.note-bar > .i { color: var(--accent-ink); }
.note-bar span { flex: 1; min-width: 200px; }
.seg { display: flex; gap: 2px; border-radius: 999px; }
.seg button { border: 0; background: transparent; cursor: pointer; padding: 10px 16px; border-radius: 999px; font: 700 13px/1 var(--font-ui); color: var(--fg-2); transition: color 0.3s; display: inline-flex; gap: 7px; align-items: center; justify-content: center; }
.seg button.is-active { color: var(--on-accent); }
.seg button:hover:not(.is-active):not([disabled]) { color: var(--fg); }
.seg button[disabled] { cursor: not-allowed; opacity: 0.6; }
.seg--sm { display: inline-flex; flex-wrap: wrap; padding: 3px; margin-top: 10px; background: var(--glass-2); border: 1px solid var(--stroke); border-radius: 20px; }
.seg--sm button { white-space: nowrap; }
.seg--sm button { padding: 8px 13px; font-size: 12.5px; }
.rp-tabs-hide, .seg.seg--tabs { display: none; }
.rp-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.rp-build { display: grid; gap: 16px; min-width: 0; }
.rp-prev { min-width: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; border-radius: 20px; scrollbar-width: thin; }
.rows { list-style: none; display: grid; }
.row-i { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 8px; border-top: 1px solid var(--stroke); border-radius: 14px; transition: background-color 0.3s; scroll-margin: 120px; }
.row-i:first-child { border-top: 0; }
.row-i.has-err { background: var(--bad-soft); border-top-color: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); }
.row-i.has-err + .row-i { border-top-color: transparent; }
.row-i.shake { animation: shake 0.5s var(--ease); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.rs { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.rs .i { width: 13px; height: 13px; stroke-width: 3; }
.rs-ok { background: var(--ok-soft); color: var(--ok); }
.rs-no { background: var(--bad-soft); color: var(--bad); }
.rt { display: grid; gap: 2px; min-width: 0; }
.rt b { font-size: 14px; }
.rt small { color: var(--muted); font-size: 12.5px; }
.auto { font: 700 10.5px/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pick { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px dashed var(--accent-line); background: transparent; color: var(--accent-ink); font: 700 12.5px/1.2 var(--font-ui); cursor: pointer; text-align: left; transition: background-color 0.2s, transform 0.35s var(--spring), border-color 0.2s; }
.pick:hover:not([disabled]) { background: var(--accent-soft); transform: translateY(-1px); }
.pick.is-on { border-style: solid; background: var(--accent-soft); color: var(--fg); }
.pick.is-on .i { color: var(--accent-ink); }
.pick[disabled] { cursor: not-allowed; opacity: 0.7; }
.textarea--sm { min-height: 42px; margin-top: 10px; padding: 9px 12px; font-size: 13.5px; resize: none; overflow: hidden; }
.vlist { list-style: none; display: grid; }
.vlist li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--stroke); }
.vlist li:first-child { border-top: 0; }
.vb { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 800 13px/1 var(--font-ui); background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.vlist li.is-cur .vb { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--on-accent); box-shadow: none; }
.vh { display: grid; gap: 4px; min-width: 0; }
.vh-t { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vh b { font-size: 13.5px; }
.vh small { color: var(--muted); font-size: 12px; }
.va { display: flex; gap: 6px; }
.proto-ctrl { border: 1.5px dashed var(--accent-line); background: transparent; }

/* dialogs */
.dlg-body { display: grid; gap: 10px; margin-top: 10px; color: var(--fg-2); }
.vs-head { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 14px 0 6px; }
.vs-head span:first-child { grid-column: 2; }
.vs-head > span { display: grid; gap: 6px; justify-items: start; font-size: 13px; }
.vs-head > span { min-width: 0; }
.vs-head .chip { white-space: normal; text-wrap: balance; max-width: 100%; border-radius: 14px; line-height: 1.25; text-align: left; letter-spacing: 0; padding: 3px 9px; gap: 5px; }
.vs-head .chip .dot { flex: none; }
.mdiff { list-style: none; display: grid; }
.mdiff li { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--stroke); font-size: 14px; }
.mdiff .m1 { color: var(--muted); }
.mdiff li.is-ch .m1 { text-decoration: line-through; text-decoration-color: var(--bad); }
.mdiff li.is-ch .m2 { font-weight: 700; color: var(--fg); background: var(--accent-soft); padding: 2px 8px; border-radius: 8px; justify-self: start; }
.mail { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--stroke); font-size: 14px; }
.mail .i { color: var(--muted); margin-top: 2px; }
.mail b { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.clist { list-style: none; display: grid; margin-top: 12px; }
.clist li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--stroke); font-size: 14px; }
.clist ins, .clist del { text-decoration: none; border-radius: 4px; padding: 0 2px; }
.clist ins { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.clist del { background: var(--bad-soft); color: var(--bad); text-decoration: line-through; }

/* ======================= REPORT PAPER ======================= */
.paper { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); color: var(--paper-ink); border-radius: 20px; box-shadow: var(--shadow); font: 400 14px/1.55 var(--font-ui); }
.paper-band { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; justify-content: space-between; padding: 11px clamp(18px, 3.5vw, 36px); font: 800 11.5px/1.4 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; }
.paper-band span:last-child { font-weight: 600; letter-spacing: 0; text-transform: none; }
.paper-band[data-s="draft"] { background: var(--paper-warn-bg); color: var(--paper-warn-fg); }
.paper-band[data-s="review"] { background: var(--paper-acc-bg); color: var(--paper-acc-fg); }
.paper-band[data-s="approved"] { background: var(--paper-ok-bg); color: var(--paper-ok-fg); }
.paper-body { position: relative; padding: clamp(20px, 3.5vw, 36px); display: grid; gap: 22px; }
.watermark { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; pointer-events: none; font: 400 clamp(64px, 11vw, 130px)/1 var(--font-display); letter-spacing: 0.06em; color: var(--paper-accent); opacity: 0.05; transform: rotate(-22deg); white-space: nowrap; }
.paper-head { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 2px solid var(--paper-ink); }
.ph-brand { display: flex; align-items: center; gap: 8px; font: 800 11.5px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-muted); }
.ph-brand svg { width: 22px; height: 22px; }
.paper-head h1 { font: 400 clamp(28px, 3vw, 38px)/0.95 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; margin-top: 6px; }
.ph-meta { font-size: 12.5px; color: var(--paper-muted); }
.psec { display: grid; gap: 8px; }
.psec h2 { font: 800 15px/1.35 var(--font-ui); display: flex; gap: 10px; align-items: baseline; }
.psec h2 i { font-style: normal; font: 400 19px/1 var(--font-display); color: var(--paper-accent); }
.psec ul { padding-left: 18px; display: grid; gap: 4px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 8px 8px; border-bottom: 1px solid var(--paper-line); }
.ptable thead th { font: 800 10.5px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-muted); border-bottom: 1.5px solid var(--paper-ink); }
.ptable s { color: var(--paper-muted); }
.ptable .out { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--paper-bad-bg); color: var(--paper-bad-fg); font: 800 10px/1.7 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; }
.pnote { font-size: 12.5px; color: var(--paper-muted); }
.pmissing { color: var(--paper-warn-fg); background: var(--paper-warn-bg); padding: 4px 10px; border-radius: 8px; justify-self: start; font-size: 13px; }
.pq { display: grid; gap: 10px; }
.pq h3 { font: 800 11.5px/1.3 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-muted); }

/* ======================= PROCESS DOCUMENT ======================= */
.proc { max-width: 1080px; margin-inline: auto; padding: 20px var(--gutter-r) 100px var(--gutter); }
.proc-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; padding: 10px 0; }
.proc-actions { border-radius: 999px; padding: 6px; display: flex; gap: 6px; align-items: center; }
.proc-hero { padding: clamp(36px, 5vw, 70px) 0 16px; display: grid; gap: 16px; }
.proc-hero h1 { font-size: clamp(52px, 7vw, 100px); }
.proc-hero p { font-size: 18px; color: var(--fg-2); max-width: 60ch; }
.proc-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.proc-toc a { text-decoration: none; }
.psection { padding-top: clamp(52px, 6vw, 84px); display: grid; gap: 18px; scroll-margin-top: 70px; }
.psection > header { display: grid; gap: 8px; }
.psection h2 { font-size: clamp(38px, 4.4vw, 60px); }
.psection h3 { font: 700 16px/1.3 var(--font-ui); }
.psection p, .psection li { color: var(--fg-2); }
.pgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pcard { padding: 20px; border-radius: 22px; display: grid; gap: 8px; align-content: start; }
.pcard ul, .pcard ol, .pbul { padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; }
.flow { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.flow li { padding: 14px; border-radius: 18px; display: grid; gap: 4px; align-content: start; font-size: 13px; }
.flow li b { color: var(--fg); font-size: 14px; }
.flow .n { font: 400 28px/1 var(--font-display); color: var(--accent-ink); }
.shot { margin: 0; display: grid; gap: 8px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.shot figcaption { font-size: 13px; color: var(--muted); }
.shots-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
.shots-2.shots-even { grid-template-columns: 1fr 1fr; }
.shots-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tbl-wrap { overflow-x: auto; padding: 6px 14px; border-radius: 22px; }
.ptable-dark { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable-dark th, .ptable-dark td { text-align: left; vertical-align: top; padding: 11px 10px; border-top: 1px solid var(--stroke); color: var(--fg-2); }
.ptable-dark thead th { border-top: 0; font: 800 10.5px/1.3 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ptable-dark td b { color: var(--fg); }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
.kind { display: inline-flex; padding: 2px 9px; border-radius: 999px; font: 800 10.5px/1.6 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; margin-right: 4px; }
.kind--done { background: var(--ok-soft); color: var(--ok); }
.kind--assume { background: var(--warn-soft); color: var(--warn); }
.kind--future { background: var(--accent-soft); color: var(--accent-ink); }
.score { font: 400 30px/1 var(--font-display); color: var(--accent-ink); }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1279px) {
  .ov-mandate, .ov-start { grid-column: span 6; }
  .ov-next { grid-column: span 12; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ov-next .card-h { grid-column: 1 / -1; }
  .ov-next .todo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ov-cands, .ov-meet { grid-column: span 12; }
  .ov-meet { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 16px 28px; }
  .ov-meet .card-h { grid-column: 1 / -1; }
  .ov-meet .people { grid-template-columns: auto auto; gap: 16px; }
}
@media (max-width: 1180px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-grid[data-view="build"] .rp-prev, .rp-grid[data-view="preview"] .rp-build { display: none; }
  .rp-prev { position: static; max-height: none; }
  .seg.seg--tabs { display: inline-flex; padding: 4px; margin-bottom: 16px; }
  .rp-bar { grid-template-columns: minmax(0, 1fr) auto; border-radius: 26px; }
  .rp-bar .stepper { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { max-width: 600px; width: 100%; }
  .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plat, .contact { grid-template-columns: minmax(0, 1fr); }
  .plat-shot { transform: none; }
  .shots-3 { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .burger { display: inline-grid; }
  .nav-actions { margin-left: auto; }
  .three { grid-template-columns: minmax(0, 1fr); }
  .cd-grid { grid-template-columns: minmax(0, 1fr); }
  .cd-list { display: none; }
  .cd-grid .seg--cands { display: flex; padding: 4px; }
  .seg--cands button { flex: 1; padding: 8px 10px; }
  .shots-2, .shots-2.shots-even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .view-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "journey" "main"; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .app-rail { display: none; }
  .app-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; margin: -16px calc(-1 * var(--gutter-r)) 16px calc(-1 * var(--gutter)); padding: 12px var(--gutter-r) 12px var(--gutter); background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--stroke); gap: 10px; }
  .app-top .me, .app-top .grow, .asg-ic { display: none; }
  .app-top .m-only { display: inline-flex !important; align-items: center; justify-content: center; }
  .app-top .asg { flex: 1; }
  .app-top .top-break { order: 4; flex-basis: 100%; height: 0; }
  .app-top #status-slot { order: 5; flex: 1; min-width: 0; }
  .app-top #status-slot .doc-status { max-width: 100%; overflow: hidden; }
  .app-top .lang-toggle { order: 6; }
  .app-top .doc-status .sub { display: none; }
  .app-top .theme-toggle { order: 7; }
  .tabbar { display: flex; position: fixed; z-index: 40; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 6px; border-radius: 30px; }
  .tabbar a { flex: 1; display: grid; justify-items: center; gap: 3px; padding: 9px 4px 8px; border-radius: 24px; text-decoration: none; color: var(--fg-2); font: 700 11px/1.1 var(--font-ui); transition: color 0.3s; }
  .tabbar a .i { width: 21px; height: 21px; transition: transform 0.5s var(--spring); }
  .tabbar a:active .i { transform: scale(0.85); }
  .tabbar a.is-active { color: var(--on-accent); }
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-grid > * { grid-column: auto !important; }
  .ov-next { grid-template-columns: minmax(0, 1fr); }
  .ov-next .todo { grid-template-columns: minmax(0, 1fr); }
  .ov-meet { grid-template-columns: minmax(0, 1fr); }
  .ov-meet .people { grid-template-columns: minmax(0, 1fr); }
  .hide-s { display: none; }
  .ctable th:nth-child(2), .ctable td:nth-child(2) { width: auto; }
  .evalbar, .evalhead { min-width: 110px; }
  .cd-head { grid-template-columns: auto minmax(0, 1fr); }
  .cd-head .tags { grid-column: 1 / -1; }
  .ev-btn { grid-template-columns: 28px minmax(0, 1fr) auto 18px; }
  .ev-note { padding-left: 14px; }
  .trade-grid { grid-template-columns: minmax(0, 1fr); }
  .stepper li { padding-right: 18px; }
  .stepper li:not(:last-child)::after { right: 3px; width: 10px; }
  .stepper li > span:last-child { display: none; }
  .stepper li.now > span:last-child, .stepper li.warn > span:last-child { display: inline; }
  .rp-bar { gap: 12px; padding: 14px; }
  .rp-act .btn { width: 100%; }
  .rp-bar { grid-template-columns: minmax(0, 1fr); }
  .vs-head { display: none; }
  .mdiff li, .clist li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* compare: one card per criterion, candidates inside */
  .cmp { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
  .cmp::after { display: none; }
  .cmp-t, .cmp-t tbody, .cmp-t tr, .cmp-t th, .cmp-t td { display: block; width: 100%; min-width: 0; }
  .cmp-t thead { display: none; }
  .cmp-t tr { margin-bottom: 12px; padding: 6px 14px 8px; border-radius: 22px; background: var(--glass); border: 1px solid var(--stroke); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  .cmp-t tr.is-prio { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--glass); border-color: var(--accent-line); }
  .cmp-t tr.is-prio > * { background: none; border-radius: 0 !important; }
  .cmp-t tr.is-sec > * { opacity: 1; }
  .cmp-t tr.is-sec { opacity: 0.7; }
  .cmp-t th, .cmp-t td { border-top: 0; padding: 10px 0; }
  .cmp-t td { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; border-top: 1px solid var(--stroke); }
  .cmp-t td::before { content: attr(data-cand); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--on-accent); font: 400 17px/1 var(--font-display); }
  .cmp-t td .cell-note { grid-column: 2; }
  .cell { margin: 0; padding: 2px 0; }
  .flow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .site-nav .brand span, .nav-cta { display: none; }
  .proto-btn span { display: none; }
  .proto-btn { width: 40px; padding: 0; justify-content: center; }
  .hero-title { font-size: clamp(52px, 15vw, 78px); }
  .hero-stage { padding: 0; display: grid; gap: 12px; }
  .hm-float { position: relative; inset: auto; animation: none; }
  .hm-status { order: -1; justify-self: start; }
  .hm-q { max-width: none; }
  .hm { animation: none; }
  .seg--cands button > span:not(.cand-tile) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hm-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hm-grid > .micro, .hm-grid > .evalhead { display: none; }
  .hm-grid .evalbar { margin-bottom: 8px; }
  .cta-row .btn { width: 100%; }
  .steps4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .h2 { font-size: clamp(40px, 11.5vw, 56px); }
  .addq { flex-wrap: wrap; }
  .addq .input { flex: 1 1 180px; }
}
@media (max-width: 1320px) { .proto-btn span { display: none; } .proto-btn { width: 40px; padding: 0; justify-content: center; } }

/* ======================= WORKSPACE v3: journey, shortlist cards, seal ======================= */
:root { --paper-void: #aab8be; }
.journey { grid-area: journey; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 10px; border-radius: 24px; margin-bottom: 18px; min-width: 0; }
.jsteps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: 1; min-width: 0; padding-bottom: 6px; }
.jsteps::before, .jsteps::after { content: ""; position: absolute; left: 10px; bottom: 0; height: 3px; border-radius: 3px; }
.jsteps::before { right: 10px; background: var(--stroke); }
.jsteps::after { width: calc((100% - 20px) * var(--p, 0)); background: linear-gradient(90deg, var(--btn-a), var(--btn-b)); transition: width 0.8s var(--ease); }
.jstep { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 16px; background: transparent; color: inherit; text-align: left; text-decoration: none; cursor: pointer; font: inherit; transition: background-color 0.2s; min-width: 0; }
.jstep:hover { background: var(--glass-2); }
.jn { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--font-ui); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--stroke-2); position: relative; }
.jn .i { width: 14px; height: 14px; stroke-width: 3; }
.jsteps li.done .jn { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--on-accent); box-shadow: none; animation: pop 0.5s var(--spring) both; }
.jsteps li.now .jn { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-ink); }
.jsteps li.now .jn::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent-line); animation: ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.jt { min-width: 0; }
.jt b { display: block; font-size: 13px; line-height: 1.2; }
.jt small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jnext { flex: none; }
.meet { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--glass); }
.meet-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.meet small { display: block; font-size: 11px; color: var(--muted); }
.meet b { display: block; font-size: 13px; }
.pav { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 800 12.5px/1 var(--font-ui); letter-spacing: 0.02em; color: #fff; }
.pav-A { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.pav-B { background: linear-gradient(135deg, #ec4899, #be185d); }
.pav-C { background: linear-gradient(135deg, #f97316, #c2410c); }
.pav-lg { width: 54px; height: 54px; font-size: 17px; }
.pav-xs, .avatar--xs { width: 24px; height: 24px; font-size: 9.5px; }
.lv-xs { width: 18px; height: 18px; }
.lv-xs .i { width: 11px; height: 11px; }
.cc { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 4px; border-radius: 999px; font: 700 12px/1.2 var(--font-ui); white-space: nowrap; border: 1px solid transparent; }
.cc .i { width: 17px; height: 17px; padding: 2.5px; border-radius: 50%; stroke-width: 3; }
.cc-doc { background: var(--accent-soft); color: var(--accent-ink); }
.cc-doc .i { background: var(--accent); color: var(--on-accent); }
.cc-verify { background: var(--warn-soft); color: var(--warn); }
.cc-verify .i { background: var(--warn); color: var(--bg); }
.cc-none { color: var(--muted); border-color: var(--stroke-2); }
.cc-none .i { box-shadow: inset 0 0 0 1.5px var(--stroke-2); }
.cc-ok { background: var(--ok-soft); color: var(--ok); }
.cc-ok .i { background: var(--ok); color: var(--bg); }
.cc-out { background: var(--bad-soft); color: var(--bad); }
.cc-out .i { background: var(--bad); color: #fff; }
.ccs { display: flex; flex-wrap: wrap; gap: 6px; }
/* overview */
.ov2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "mandate act" "cands act"; gap: 16px; align-items: start; }
.ov2 .ov-mandate { grid-area: mandate; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; }
.ovm-main, .ovm-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ovm-side { padding-left: 24px; border-left: 1px solid var(--stroke); }
.ov2 .ov-was span:first-child { font-weight: 700; color: var(--accent-ink); }
.was-l { font: 800 10.5px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }
.confirm ul { list-style: none; display: grid; gap: 6px; margin-top: 6px; }
.confirm li { position: relative; padding-left: 14px; font-size: 13px; color: var(--fg-2); }
.confirm li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ov2 .ov-cands { grid-area: cands; }
.ovc-list { list-style: none; display: grid; }
.ovc { border-top: 1px solid var(--stroke); padding: 4px 0; }
.ovc:first-child { border-top: 0; }
.ovc-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; text-decoration: none; color: inherit; transition: background-color 0.2s; }
.ovc-main:hover { background: var(--glass-2); }
.ovc-main:hover .chev { transform: translateX(3px); color: var(--accent-ink); }
.ovc-main .chip { display: none; }
.nm { min-width: 0; }
.nm b { display: block; font-size: 14.5px; }
.nm small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovc-gap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 10px 8px 58px; font-size: 13px; color: var(--fg-2); }
.gl { display: inline-flex; align-items: center; gap: 5px; font: 800 10.5px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); }
.gl .i, .ga .i { width: 13px; height: 13px; }
.gt { font-weight: 700; color: var(--fg); }
.ga { color: var(--muted); }
.gqt { font-style: italic; color: var(--fg-2); }
.gqt::before { content: "“"; } .gqt::after { content: "”"; }
.ov2 .ov-act { grid-area: act; }
.act { list-style: none; display: grid; gap: 2px; }
.act-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 8px; border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; text-align: left; }
button.act-row { cursor: pointer; }
button.act-row:hover { background: var(--glass-2); }
.act-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--glass-2); color: var(--muted); border: 1px solid var(--stroke); }
.act-ic .i { width: 15px; height: 15px; }
.act li:first-child .act-ic { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.act-t b { display: block; font-size: 13px; line-height: 1.35; font-weight: 600; }
.act-t small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ov-people { padding-top: 12px; border-top: 1px solid var(--stroke); display: grid; gap: 10px; }
/* candidates */
.cand-bar { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cand-bar .foot-note { margin: 0; }
.seg.seg--brief { padding: 4px; }
.note-bar--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.note-bar--warn > .i { color: var(--warn); }
.cswitch { display: none; }
.cgrid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 16px; align-items: start; }
.ccard { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 16px; padding: 20px; border-radius: 26px; min-width: 0; }
.ccard.is-flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 100% { box-shadow: var(--shadow), inset 0 1px 0 var(--hi); } 25%, 60% { box-shadow: var(--shadow), 0 0 0 3px var(--accent-line); } }
.cc-head { display: flex; gap: 14px; align-items: center; }
.cc-id { min-width: 0; }
.cc-id h2 { font: 800 18px/1.2 var(--font-ui); letter-spacing: -0.01em; }
.cc-id p { font-size: 13.5px; color: var(--fg-2); }
.cc-id small { font-size: 12.5px; color: var(--muted); }
.cc-meta { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.cc-ev { list-style: none; display: grid; gap: 4px; margin: 0 -8px; align-content: start; }
.cc-ev .ev-btn { grid-template-columns: 28px minmax(0, 1fr) auto 16px; padding: 10px 8px; }
.cc-ev .ev-btn:not(:has(.tag)) { grid-template-columns: 28px minmax(0, 1fr) 16px; }
.cc-ev li.is-prio .ev-btn { background: var(--accent-soft); }
.cc-ev .ev-note { padding: 2px 10px 10px 48px; }
.cc-gaps, .cc-more { display: grid; gap: 10px; align-content: start; }
.cc-gaps ul, .cc-more ul { list-style: none; display: grid; gap: 10px; }
.gq { padding: 12px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--stroke); display: grid; gap: 10px; }
.gq-gap { display: flex; gap: 8px; align-items: flex-start; font: 700 13px/1.35 var(--font-ui); }
.gq-gap .i { flex: none; margin-top: 1px; color: var(--warn); }
.q-sw { align-items: flex-start; font: 500 13.5px/1.45 var(--font-ui); color: var(--fg-2); }
.q-sw .track { margin-top: 1px; }
.more-q { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.cc-more .addq .input { min-height: 38px; }
/* report */
.qchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--stroke); font: 600 12.5px/1 var(--font-ui); }
.qchip b { font-weight: 800; color: var(--accent-ink); }
.qchip.is-zero { border-color: var(--bad); }
.qchip.is-zero b { color: var(--bad); }
.auto-line { display: flex; gap: 8px; align-items: center; margin-top: 4px; padding: 12px 8px 0; border-top: 1px solid var(--stroke); font-size: 12.5px; color: var(--muted); }
.auto-line .i { color: var(--ok); }
.vlist li { grid-template-columns: 40px minmax(0, 1fr) 26px auto; }
.mini-seal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ok) 40%, transparent); }
.mini-seal .i { width: 14px; height: 14px; }
.mini-seal.is-new { animation: seal-pop 0.9s var(--spring) both; }
@keyframes seal-pop { 0% { transform: scale(0.2) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.35) rotate(8deg); opacity: 1; } 100% { transform: none; } }
.paper-head { padding-right: 130px; }
.seal { position: absolute; top: 16px; right: 20px; z-index: 2; width: 116px; height: 116px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; transform: rotate(-12deg); pointer-events: none; }
.seal span { font: 800 9.5px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.seal b { font: 400 32px/1 var(--font-display); }
.seal small { font: 600 9.5px/1.2 var(--font-ui); }
.seal--ok { color: var(--paper-ok-fg); border: 4px double var(--paper-ok-fg); background: color-mix(in srgb, var(--paper-ok-bg) 60%, transparent); }
.seal--void { color: var(--paper-muted); border: 2px dashed var(--paper-void); }
.seal.is-new.seal--ok { animation: stamp 0.7s var(--spring) both; }
@keyframes stamp { 0% { transform: rotate(-12deg) scale(1.8); opacity: 0; } 60% { transform: rotate(-12deg) scale(0.92); opacity: 1; } 100% { transform: rotate(-12deg) scale(1); } }
@media (max-width: 1240px) {
  .ov2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mandate" "cands" "act"; }
  .meet { display: none; }
  .jt small { display: none; }
}
@media (max-width: 980px) {
  .ov2 .ov-mandate { grid-template-columns: minmax(0, 1fr); }
  .ovm-side { padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--stroke); }
  .cswitch { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
  .cswitch button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--stroke-2); background: var(--glass-2); font: 700 13px/1 var(--font-ui); color: var(--fg-2); cursor: pointer; }
  .cswitch button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
  .cgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter-r) 16px var(--gutter); scrollbar-width: none; }
  .ccard { flex: 0 0 min(86%, 420px); scroll-snap-align: center; grid-template-rows: none; }
}
@media (max-width: 860px) {
  .journey { padding: 6px; margin-bottom: 14px; flex-wrap: wrap; }
  .jt { display: none; }
  .jsteps { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .jnext { flex: 1 1 100%; }
  .jnext .btn { width: 100%; }
  .ovc-gap { margin-left: 10px; }
  .ovc-main { grid-template-columns: auto minmax(0, 1fr) 18px; }
  .ovc-main .ccs { grid-column: 1 / -1; grid-row: 2; }
  .paper-head { padding-right: 90px; }
  .seal { width: 84px; height: 84px; top: 12px; right: 12px; }
  .seal b { font-size: 24px; }
}

/* homepage mock (v3) */
.hm-list { list-style: none; display: grid; gap: 4px; padding: 10px; border-radius: 20px; background: var(--glass-2); border: 1px solid var(--stroke); margin-bottom: 14px; }
.hm-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; }
.hm-list li + li { border-top: 1px solid var(--stroke); border-radius: 0; }
.hm-list .nm small { white-space: nowrap; }
@media (max-width: 640px) {
  .hm-list li { grid-template-columns: auto minmax(0, 1fr); }
  .hm-list .ccs { grid-column: 1 / -1; }
}

/* ======================= HOMEPAGE v4: big icons, timeline, open platform, footer ======================= */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.split-copy, .split-visual { min-width: 0; }
.split-visual { display: grid; gap: 24px; justify-items: center; }

/* big liquid-glass icon */
.bigic { position: relative; width: min(100%, 440px); aspect-ratio: 1; display: grid; place-items: center; }
.bi-glow { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); filter: blur(46px); opacity: 0.5; }
.bi-ring { position: absolute; border-radius: 50%; border: 1px solid var(--accent-line); pointer-events: none; }
.bi-r1 { inset: 3%; border-style: dashed; opacity: 0.7; animation: bi-spin 60s linear infinite; }
.bi-r2 { inset: 13%; opacity: 0.55; }
.bi-r3 { inset: 23%; opacity: 0.35; }
.bi-orb {
  position: relative; width: 46%; aspect-ratio: 1; border-radius: 34%; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 24% 14%, rgba(255, 255, 255, 0.5) 0%, transparent 34%), linear-gradient(145deg, var(--orb-a) 0%, var(--orb-b) 60%, var(--orb-c) 100%);
  box-shadow: 0 46px 90px -34px var(--orb-a), inset 0 2px 1px rgba(255, 255, 255, 0.55), inset 0 -12px 28px rgba(0, 26, 38, 0.45);
  transform: rotate(-6deg); animation: bi-float 7s ease-in-out infinite;
}
.bi-orb::after { content: ""; position: absolute; inset: 7% 12% auto; height: 26%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent); filter: blur(2px); }
.bi-orb svg { position: relative; z-index: 1; width: 64%; height: 64%; filter: drop-shadow(0 8px 14px rgba(0, 26, 38, 0.45)); }
.bi-dash { animation: bi-march 1.4s linear infinite; }
.bi-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 9px; border-radius: 999px; font: 700 13px/1 var(--font-ui); white-space: nowrap; animation: drift 8s ease-in-out infinite; }
.bi-chip > .i { width: 18px; height: 18px; color: var(--accent-ink); margin-left: 4px; }
.bi-c1 { top: 10%; right: -2%; }
.bi-c2 { bottom: 22%; left: -4%; animation-delay: -3s; }
.bi-c3 { bottom: 4%; right: 6%; animation-delay: -5s; }
.bigic--route .bi-orb { transform: rotate(6deg); animation-name: bi-float-r; }
@keyframes bi-spin { to { transform: rotate(360deg); } }
@keyframes bi-float { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-12px); } }
@keyframes bi-float-r { 0%, 100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-12px); } }
@keyframes bi-march { to { stroke-dashoffset: -28; } }

/* services */
.svc-list { display: grid; gap: 14px; }
.svc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 24px; border-radius: 26px; transition: transform 0.5s var(--ease); }
.svc:hover { transform: translateX(6px); }
.svc-ic { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(145deg, var(--btn-a), var(--btn-b)); box-shadow: 0 14px 30px -14px var(--btn-a), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform 0.6s var(--spring); }
.svc-ic .i { width: 26px; height: 26px; }
.svc:hover .svc-ic { transform: rotate(-8deg) scale(1.06); }
.svc h3 { font: 700 20px/1.25 var(--font-ui); }
.svc p { color: var(--fg-2); margin-top: 4px; }
.svc-go { width: 22px; height: 22px; color: var(--muted); transition: transform 0.45s var(--spring), color 0.2s; }
.svc:hover .svc-go { transform: translateX(4px); color: var(--accent-ink); }

/* timeline */
.tl { list-style: none; position: relative; display: grid; gap: 14px; margin-top: 8px; view-timeline-name: --tl; }
.tl::before, .tl::after { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 3px; border-radius: 3px; }
.tl::before { background: var(--stroke-2); }
.tl::after { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); transform-origin: top; }
@supports (animation-timeline: view()) {
  .tl::after { animation: tl-fill linear both; animation-timeline: --tl; animation-range: entry 20% cover 60%; }
}
@keyframes tl-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.tl li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
.tl-node { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font: 400 30px/1 var(--font-display); color: var(--on-accent); background: linear-gradient(145deg, var(--btn-a), var(--btn-b)); box-shadow: 0 12px 26px -12px var(--btn-a), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 6px var(--bg); transition: transform 0.5s var(--spring); }
.tl li:hover .tl-node { transform: scale(1.08) rotate(-6deg); }
.tl-body { padding: 18px 22px; border-radius: 22px; border: 1px solid var(--stroke); background: var(--glass); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 1px 0 var(--hi); display: grid; gap: 6px; justify-items: start; transition: border-color 0.3s, transform 0.5s var(--ease); }
.tl li:hover .tl-body { border-color: var(--accent-line); transform: translateX(4px); }
.tl-body h3 { font: 700 19px/1.25 var(--font-ui); }
.tl-body p { color: var(--fg-2); font-size: 15px; }
.tl-out { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font: 700 12px/1.2 var(--font-ui); }
.tl-out .i { width: 14px; height: 14px; }
.split-visual .promise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 460px; margin: 0; }
.split-visual .promise li { border-radius: 16px; padding: 12px 14px; }

/* platform, open layout */
.plat2 { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.plat2 .plat-copy { display: grid; gap: 22px; justify-items: start; }
.h2xl { font-size: clamp(52px, 5.6vw, 92px); }
.plat2 .plat-list { gap: 14px; }
.plat2 .plat-list li { font-size: 17px; gap: 14px; }
.plat2 .plat-list .lv { width: 38px; height: 38px; }
.plat2 .plat-list .lv .i { width: 18px; height: 18px; }
.plat-visual { position: relative; min-width: 0; padding: 40px 0; }
.pv-glow { position: absolute; inset: 0 5%; border-radius: 50%; background: radial-gradient(closest-side, var(--accent) 0%, transparent 100%); filter: blur(70px); opacity: 0.45; }
.plat2 .plat-shot { position: relative; z-index: 1; transform: perspective(1600px) rotateY(-10deg) rotateX(3deg); border-radius: 22px; }
.plat2 .plat-shot:hover { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg) translateY(-6px); }
.pv-chip { position: absolute; z-index: 2; left: -6%; bottom: 6%; display: grid; gap: 4px; padding: 14px 18px; border-radius: 20px; max-width: 290px; animation: drift 9s ease-in-out infinite; }
.pv-chip .micro { color: var(--warn); }
.pv-chip b { font-size: 15px; line-height: 1.35; }
.pv-seal { position: absolute; z-index: 2; right: -2%; top: 0; width: 120px; height: 120px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; transform: rotate(-12deg); color: var(--ok); border: 4px double var(--ok); background: color-mix(in srgb, var(--ok-soft) 70%, var(--bg)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); animation: bi-float 8s ease-in-out -2s infinite; }
.pv-seal span { font: 800 10px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.pv-seal b { font: 400 34px/1 var(--font-display); }
.pv-seal small { font: 600 10px/1.2 var(--font-ui); }

/* footer */
.site-foot { display: block; margin-top: clamp(72px, 8vw, 120px); padding: 0; border-top: 1px solid var(--stroke); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 7%, transparent)); font-size: 14.5px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-top: clamp(56px, 7vw, 96px); padding-bottom: 48px; }
.foot-brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
.brand--lg { font-size: 22px; }
.brand--lg svg { width: 44px; height: 44px; }
.foot-brand p { color: var(--fg-2); max-width: 34ch; font-size: 15.5px; }
.foot-mail { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--stroke-2); background: var(--glass); font: 600 13.5px/1 var(--font-ui); color: var(--fg); user-select: all; }
.foot-mail .i { color: var(--accent-ink); }
.foot-col { display: grid; gap: 14px; align-content: start; }
.foot-col h3 { font: 800 11px/1.3 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; }
.foot-col a { justify-self: start; text-decoration: none; color: var(--fg-2); font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size 0.45s var(--ease), color 0.2s; }
.foot-col a:hover { color: var(--fg); background-size: 100% 1.5px; }
.foot-word { overflow: hidden; padding-top: 8px; }
.foot-word span { display: block; font: 400 clamp(56px, 14.6vw, 214px)/0.8 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 24%, transparent) 10%, transparent 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--stroke); font-size: 13px; color: var(--muted); }
.to-top { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); font-weight: 700; text-decoration: none; }
.to-top .i { transform: rotate(-90deg); transition: transform 0.45s var(--spring); }
.to-top:hover { color: var(--fg); }
.to-top:hover .i { transform: rotate(-90deg) translateX(3px); }

@media (max-width: 1100px) {
  .split, .split--rev, .plat2 { grid-template-columns: minmax(0, 1fr); }
  .split .split-visual { order: -1; }
  .split--rev .split-visual { order: 0; }
  .bigic { width: min(100%, 360px); }
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bigic { width: min(100%, 300px); }
  .bi-chip { font-size: 12px; padding: 7px 12px 7px 7px; }
  .bi-c2 { left: 0; }
  .bi-c1 { right: 0; }
  .svc { grid-template-columns: auto minmax(0, 1fr); padding: 18px; gap: 14px; }
  .svc-go { display: none; }
  .svc-ic { width: 50px; height: 50px; border-radius: 16px; }
  .tl li { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .tl-node { width: 46px; height: 46px; border-radius: 15px; font-size: 25px; }
  .tl::before, .tl::after { left: 22px; }
  .split-visual .promise { grid-template-columns: minmax(0, 1fr); }
  .pv-chip { position: relative; left: auto; bottom: auto; margin-top: 16px; max-width: none; animation: none; }
  .pv-seal { width: 88px; height: 88px; right: 0; top: 4px; }
  .pv-seal b { font-size: 24px; }
  .plat-visual { padding: 24px 0 0; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
}

/* ======================= HOMEPAGE v5: contact, scroll-scrubbed footer wordmark ======================= */
/* --p (0..1) comes from the scroll scrub in app.js; without JS it stays 1 (final state). */
.contact2 { position: relative; overflow-x: clip; padding-top: clamp(110px, 13vw, 200px); }
.c2-glow { position: absolute; z-index: -1; right: -10%; top: 30%; width: min(900px, 80vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--btn-a) 30%, transparent), color-mix(in srgb, var(--btn-b) 16%, transparent) 55%, transparent); filter: blur(30px); }
.c2-head { position: relative; display: grid; gap: 18px; }
.c2-title { display: grid; font-size: clamp(64px, 10.6vw, 172px); line-height: 0.84; }
.c2-l1, .c2-l2 { display: block; will-change: transform; }
.c2-l1 { transform: translateX(calc((1 - var(--p, 1)) * -16vw)); }
.c2-l2 { justify-self: end; display: inline-flex; align-items: center; gap: 0.12em; transform: translateX(calc((1 - var(--p, 1)) * 16vw)); padding-top: 0.08em; }
.c2-l2 .grad-text { padding-top: 0.16em; margin-top: -0.16em; }
.c2-arrow { width: 0.7em; height: 0.7em; stroke-width: 2.4; color: var(--accent); transform: rotate(calc((1 - var(--p, 1)) * -135deg)); }

.c2-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; margin-top: clamp(56px, 7vw, 104px); }
.c2-side { display: grid; }
.c2-lede { font-size: clamp(20px, 1.75vw, 27px); line-height: 1.4; font-weight: 600; color: var(--fg); max-width: 22ch; text-wrap: balance; }
@media (min-width: 1101px) {
  .c2-head .c2-lede { position: absolute; left: 0; bottom: 0.3em; transform: translateY(calc((1 - var(--p, 1)) * 60px)); opacity: calc(var(--p, 1) * 1.4 - 0.4); }
}
.c2-steps { list-style: none; position: relative; display: grid; gap: 44px; }
.c2-steps::before, .c2-steps::after { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; }
.c2-steps::before { background: var(--stroke-2); }
.c2-steps::after { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); transform-origin: top; transform: scaleY(var(--p, 1)); }
.c2-steps li { --q: clamp(0, calc((var(--p, 1) - var(--i) * 0.22) * 2.6), 1); position: relative; z-index: 1; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: center;
  transform: translateX(calc((1 - var(--q)) * -48px)); opacity: calc(0.25 + 0.75 * var(--q)); }
.c2-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(145deg, var(--btn-a), var(--btn-b));
  box-shadow: 0 14px 30px -14px var(--btn-a), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.c2-ic .i { width: 24px; height: 24px; }
.c2-steps h3 { font: 700 21px/1.25 var(--font-ui); }
.c2-steps p { color: var(--fg-2); margin-top: 4px; font-size: 16px; }

.c2-card { padding: clamp(24px, 3.4vw, 44px); border-radius: 36px; transform: translateY(calc((1 - var(--p, 1)) * 140px)) rotate(calc((1 - var(--p, 1)) * 2.5deg)); transform-origin: 0 100%; }
.c2-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--stroke); }
.c2-card-head h3 { font: 400 clamp(30px, 2.6vw, 40px)/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.c2-proto { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font: 700 12px/1.2 var(--font-ui); }
.c2-proto .i { width: 14px; height: 14px; }
.c2-card .form-grid { gap: 18px; }
.c2-span { grid-column: 1 / -1; }
.c2-card .input { min-height: 56px; border-radius: 16px; font-size: 16px; padding-inline: 18px; }
.c2-card .field { gap: 8px; }
.c2-when { border: 0; margin: 0; padding: 0; min-width: 0; }
.c2-when legend { padding: 0; margin-bottom: 10px; }
.c2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.c2-chip { position: relative; display: inline-flex; }
.c2-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.c2-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--stroke-2); background: var(--glass-2); font: 700 14px/1 var(--font-ui); color: var(--fg-2);
  transition: background-color 0.25s, border-color 0.2s, color 0.2s, transform 0.4s var(--spring), box-shadow 0.3s var(--ease); }
.c2-chip:hover span { border-color: var(--accent-line); color: var(--fg); }
.c2-chip input:checked + span { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); border-color: transparent; color: var(--on-accent); box-shadow: 0 10px 24px -12px var(--btn-a); transform: scale(1.04); }
.c2-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.c2-submit { margin-top: 30px; --h: 62px; font-size: 16px; }
.c2-card .contact-done { min-height: 420px; justify-items: center; text-align: center; }
.c2-card .done-mark { width: 84px; height: 84px; }
.c2-card .done-mark .i { width: 38px; height: 38px; }
.c2-card .contact-done h3 { font: 400 44px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }

/* footer wordmark grows as the page reaches the end */
.foot-word { overflow: hidden; padding-top: clamp(40px, 5vw, 72px); padding-bottom: 8px; border-bottom: 1px solid var(--stroke); }
.site-foot .foot-top { padding-top: clamp(48px, 5vw, 72px); }
.foot-word span { font-size: clamp(56px, 15.3vw, 222px); }
.foot-word span {
  background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 50%, var(--grad-a) 100%) 0 0 / 200% 100%;
  background-position: calc(var(--p, 1) * 100%) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 112%); mask-image: linear-gradient(180deg, #000 45%, transparent 112%);
  transform-origin: 50% 100%;
  transform: translateY(calc((1 - var(--p, 1)) * 12%)) scale(calc(0.34 + 0.66 * var(--p, 1)));
  opacity: calc(0.3 + 0.7 * var(--p, 1));
  will-change: transform;
}

@media (max-width: 1100px) {
  .c2-grid { grid-template-columns: minmax(0, 1fr); }
  .c2-lede { max-width: 32ch; margin-top: 8px; }
}
@media (max-width: 640px) {
  .c2-title { font-size: clamp(50px, 15.4vw, 84px); }
  .c2-l1 { transform: translateX(calc((1 - var(--p, 1)) * -24vw)); }
  .c2-l2 { transform: translateX(calc((1 - var(--p, 1)) * 24vw)); }
  .c2-steps { gap: 22px; }
  .c2-steps li { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .c2-ic { width: 48px; height: 48px; border-radius: 15px; }
  .c2-steps::before, .c2-steps::after { left: 23px; }
  .c2-card { border-radius: 28px; }
  .c2-card .form-grid { grid-template-columns: minmax(0, 1fr); }
  .c2-chip span { padding: 0 15px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .c2-l1, .c2-l2, .c2-card, .c2-steps li, .foot-word span { transform: none; opacity: 1; }
}

/* ======================= HOMEPAGE v6: references pass (marquee, spinning badge, arrow circles, numbers band) ======================= */
/* hero: announce pill + outline tags + spinning badge */
.announce { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--stroke-2);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 1px 0 var(--hi); font: 600 14px/1.25 var(--font-ui); color: var(--fg-2); text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.announce:hover { border-color: var(--accent-line); color: var(--fg); }
.announce-tag { flex: none; padding: 7px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--on-accent); font: 800 11px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.announce .i { width: 16px; height: 16px; flex: none; transition: transform 0.45s var(--spring); }
.announce:hover .i { transform: translateX(3px); }
.hero-tags { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; }
.hero-tags li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--stroke-2); font: 600 13px/1 var(--font-ui); color: var(--fg-2); }
.hero-tags .i { width: 15px; height: 15px; color: var(--accent-ink); }

.spin-badge { position: absolute; z-index: 3; right: -30px; bottom: 34px; width: 138px; height: 138px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: var(--fg);
  background: var(--glass-2); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); border: 1px solid var(--stroke-2); box-shadow: var(--shadow-sm), inset 0 1.5px 1px var(--hi), inset 0 -8px 20px rgba(0, 0, 0, 0.12); }
.sb-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: bi-spin 24s linear infinite; }
.sb-ring text { font: 700 10.5px var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; fill: currentColor; }
.sb-ring tspan { fill: var(--accent); }
.sb-core { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--on-accent);
  box-shadow: 0 12px 26px -10px var(--btn-a), inset 0 1.5px 1px rgba(255, 255, 255, 0.5); transition: transform 0.5s var(--spring); }
.sb-core .i { width: 24px; height: 24px; stroke-width: 2.2; transform: rotate(-45deg); transition: transform 0.5s var(--spring); }
.spin-badge:hover .sb-core { transform: scale(1.08); }
.spin-badge:hover .sb-core .i { transform: rotate(0deg); }

/* marquee: two crossed bands, moving on their own and with the scroll */
.mq { position: relative; overflow: clip; padding: clamp(44px, 6vw, 80px) 0; margin-top: clamp(8px, 2vw, 24px); }
.mq-band { position: relative; width: 116%; margin-left: -8%; overflow: hidden; }
.mq-a { z-index: 2; transform: rotate(-2.2deg); padding: 16px 0 12px; color: var(--on-accent);
  background: radial-gradient(60% 140% at 30% 0%, rgba(255, 255, 255, 0.28), transparent 60%), linear-gradient(90deg, var(--btn-a), var(--btn-b));
  box-shadow: 0 30px 60px -28px var(--btn-a), inset 0 2px 1px rgba(255, 255, 255, 0.45), inset 0 -10px 24px rgba(0, 26, 38, 0.22); }
.mq-b { z-index: 1; transform: rotate(1.2deg); margin-top: 40px; padding: 16px 0 12px; color: var(--fg); background: var(--glass-2);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border-block: 1px solid var(--stroke-2); box-shadow: inset 0 1px 0 var(--hi); }
.mq-move { transform: translateX(calc((var(--p, 0.5) - 0.5) * -18vw)); will-change: transform; }
.mq-b .mq-move { transform: translateX(calc((var(--p, 0.5) - 0.5) * 18vw)); }
.mq-track { display: flex; width: max-content; align-items: center; animation: mq 70s linear infinite; }
.mq-b .mq-track { animation-direction: reverse; animation-duration: 90s; }
.mq-track > * { flex: none; margin-right: 30px; }
.mq-track span { font: 400 clamp(44px, 5.4vw, 80px)/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.mq-b .mq-track span { font-size: clamp(28px, 3vw, 44px); }
.mq-star { width: clamp(26px, 2.6vw, 38px); height: clamp(26px, 2.6vw, 38px); }
.mq-b .mq-star { width: 22px; height: 22px; color: var(--accent); }
@keyframes mq { to { transform: translateX(-50%); } }

/* services: cards are links, arrow circles, the sample's situation highlighted */
a.svc { color: inherit; text-decoration: none; }
.arw { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--stroke-2); background: var(--glass-2); color: var(--fg);
  box-shadow: inset 0 1px 0 var(--hi); transition: background-color 0.3s, color 0.2s, border-color 0.2s, transform 0.5s var(--spring); }
.arw .i { width: 20px; height: 20px; transform: rotate(45deg); transition: transform 0.5s var(--spring); }
.svc:hover .arw, .svc:focus-visible .arw { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--on-accent); border-color: transparent; }
.svc:hover .arw .i, .svc:focus-visible .arw .i { transform: rotate(0deg); }
.svc--hi { color: var(--on-accent); border-color: transparent;
  background: radial-gradient(90% 160% at 0% 0%, rgba(255, 255, 255, 0.34), transparent 52%), linear-gradient(125deg, var(--btn-a), var(--btn-b));
  box-shadow: 0 34px 60px -30px var(--btn-a), inset 0 1.5px 1px rgba(255, 255, 255, 0.55), inset 0 -10px 26px rgba(0, 26, 38, 0.2); }
.svc--hi p { color: inherit; }
.svc--hi .svc-ic { background: rgba(255, 255, 255, 0.24); color: var(--on-accent); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.55); }
.svc--hi .arw, .svc--hi:hover .arw { background: var(--on-accent); color: var(--btn-b); border-color: transparent; }
.svc-tag { display: inline-flex; margin-bottom: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); font: 800 10.5px/1.2 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }

/* numbers band: an inverse liquid slab (light on the dark theme, ink on the light theme) */
.band-sec { padding-top: clamp(80px, 9vw, 140px); }
.band { --q: 1; position: relative; isolation: isolate; overflow: hidden; width: min(100% - 32px, 1400px); margin-inline: auto; padding: clamp(28px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  border-radius: clamp(28px, 4vw, 52px); background: var(--inv-bg); color: var(--inv-fg); box-shadow: var(--shadow), inset 0 2px 1px rgba(255, 255, 255, 0.5);
  transform: scale(calc(0.9 + 0.1 * var(--p, 1))); }
.band::before, .band::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(50px); pointer-events: none; }
.band::before { width: 60%; aspect-ratio: 1; right: -12%; bottom: -55%; background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-grad-b) 40%, transparent), transparent); }
.band::after { width: 50%; aspect-ratio: 1; left: -15%; top: -50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-grad-a) 34%, transparent), transparent); }
.band .eyebrow { color: var(--inv-grad-a); }
.band-copy { display: grid; gap: 18px; }
.band-title { font-size: clamp(40px, 4.4vw, 72px); line-height: 0.92; }
.band-hl, .band-stats b { background: linear-gradient(90deg, var(--inv-grad-a), var(--inv-grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band-hl { padding-top: 0.12em; margin-top: -0.12em; }
.band-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.band-stats > div { --q: clamp(0, calc((var(--p, 1) - var(--i) * 0.12) * 2.4), 1); display: grid; gap: 10px; align-content: start; padding: 22px 24px 24px; border-radius: 28px;
  background: color-mix(in srgb, var(--inv-fg) 5%, transparent); border: 1px solid color-mix(in srgb, var(--inv-fg) 11%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(calc((1 - var(--q)) * 48px)); }
.band-stats dt { display: flex; align-items: baseline; gap: 8px; }
.band-stats b { font: 400 clamp(64px, 6.4vw, 104px)/0.82 var(--font-display); padding-top: 0.1em; }
.band-stats small { font: 800 12.5px/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-fg) 72%, transparent); }
.band-stats dd { margin: 0; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--inv-fg) 80%, transparent); }

/* platform: big arrow circle notched into the screenshot */
.arw-xl { position: absolute; z-index: 3; right: 3%; bottom: 4%; width: clamp(76px, 7.4vw, 108px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent);
  background: radial-gradient(100% 100% at 30% 20%, rgba(255, 255, 255, 0.42), transparent 50%), linear-gradient(135deg, var(--btn-a), var(--btn-b));
  box-shadow: 0 0 0 10px var(--bg), 0 24px 50px -20px var(--btn-a), inset 0 2px 1px rgba(255, 255, 255, 0.5); transition: transform 0.5s var(--spring); }
.arw-xl .i { width: 40%; height: 40%; stroke-width: 2; transform: rotate(-45deg); transition: transform 0.5s var(--spring); }
.arw-xl:hover { transform: scale(1.06); }
.arw-xl:hover .i { transform: rotate(0deg); }

.plat2 .h2xl .grad-text { display: block; }
@media (max-width: 1100px) {
  .band { grid-template-columns: minmax(0, 1fr); }
  .spin-badge { right: 0; }
}
@media (max-width: 640px) {
  .announce { font-size: 13px; padding-right: 12px; }
  .hero-tags li { font-size: 12.5px; padding: 8px 12px; }
  .spin-badge { display: none; }
  .mq-band { width: 130%; margin-left: -15%; }
  .svc { grid-template-columns: auto minmax(0, 1fr) auto; }
  .arw { width: 40px; height: 40px; }
  .band { width: calc(100% - 24px); }
  .band-stats { grid-template-columns: minmax(0, 1fr); }
  .band-stats > div { grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px 18px; }
  .band-stats dt { flex-direction: column; align-items: flex-start; gap: 4px; }
  .band-stats b { font-size: 60px; }
  .arw-xl { box-shadow: 0 0 0 6px var(--bg), 0 18px 40px -18px var(--btn-a); }
}
@media (prefers-reduced-motion: reduce) {
  .mq-track, .sb-ring { animation: none; }
  .mq-move, .band, .band-stats > div { transform: none; }
}
a.svc.svc--hi { color: var(--on-accent); }

/* ======================= TYPE v9: Archivo Expanded Black (reference: Das Grüne), sizes recalibrated ======================= */
/* every element that used the display face: heavier, wider, tighter */
.cand-tile, .steps4 .sn, .proto-list .n, .ov-prio, .kpi b, .watermark, .paper-head h1, .psec h2 i, .flow .n, .score, .cmp-t td::before, .seal b,
.tl-node, .pv-seal b, .foot-word span, .c2-card-head h3, .c2-card .contact-done h3, .mq-track span, .band-stats b {
  font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em;
}
.hero-title { font-size: clamp(38px, 5.8vw, 84px); line-height: 0.95; margin: 26px 0 0; }
.h2 { font-size: clamp(30px, 3.3vw, 50px); }
.h2xl { font-size: clamp(32px, 3.6vw, 54px); }
.c2-title { font-size: clamp(40px, 7vw, 104px); line-height: 0.92; }
.band-title { font-size: clamp(26px, 2.6vw, 40px); line-height: 1; }
.proc-hero h1 { font-size: clamp(34px, 4.4vw, 62px); }
.psection h2 { font-size: clamp(26px, 2.6vw, 38px); }
.mq-track span { font-size: clamp(30px, 3.4vw, 52px); }
.mq-b .mq-track span { font-size: clamp(18px, 1.9vw, 28px); }
.foot-word span { font-size: clamp(26px, 7.1vw, 102px); line-height: 0.86; }
.band-stats b { font-size: clamp(44px, 4.2vw, 64px); }
.c2-card-head h3 { font-size: clamp(19px, 1.6vw, 24px); }
.c2-card .contact-done h3 { font-size: 28px; }
.tl-node { font-size: 22px; }
.pv-seal b { font-size: 24px; }
.seal b { font-size: 22px; }
.cand-tile { font-size: 15px; }
.cand-tile--sm { font-size: 12px; }
.cand-tile--xl { font-size: 28px; }
.ov-prio { font-size: clamp(22px, 2vw, 30px); line-height: 1; }
.kpi b { font-size: 46px; }
.paper-head h1 { font-size: clamp(19px, 1.8vw, 25px); line-height: 1.05; }
.psec h2 i { font-size: 14px; }
.watermark { font-size: clamp(34px, 5.4vw, 64px); letter-spacing: 0.02em; }
.steps4 .sn { font-size: 38px; }
.proto-list .n { font-size: 16px; }
.flow .n { font-size: 20px; }
.score { font-size: 22px; }
.cmp-t td::before { font-size: 13px; }
.stg h3 { font-size: clamp(30px, 2.6vw, 40px); }

/* hero: the headline runs the full width, like the reference; copy and the card sit underneath */
.hero-head { grid-column: 1 / -1; min-width: 0; }
.hero { row-gap: 8px; }
.hero .hero-stage { padding-top: 24px; }
@media (min-width: 1101px) { .hero-title .line { white-space: nowrap; } }

/* section titles: solid, with a coloured full stop (reference: "OUR SERVICES.") */
.h2 .grad-text, .h2xl .grad-text { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; padding-top: 0; margin-top: 0; }
.h2::after, .h2xl::after, .psection h2::after { content: "."; color: var(--grad-b); }

/* outline tags end in a thin line and three rings (reference) */
.hero-tags::after { content: ""; flex: 1 1 90px; min-width: 90px; height: 26px;
  background:
    radial-gradient(circle, transparent 11px, var(--stroke-2) 11.5px 12.5px, transparent 13px) right 0 center / 26px 26px no-repeat,
    radial-gradient(circle, transparent 11px, var(--stroke-2) 11.5px 12.5px, transparent 13px) right 16px center / 26px 26px no-repeat,
    radial-gradient(circle, transparent 11px, var(--stroke-2) 11.5px 12.5px, transparent 13px) right 32px center / 26px 26px no-repeat,
    linear-gradient(var(--stroke-2), var(--stroke-2)) left center / calc(100% - 66px) 1px no-repeat; }

@media (max-width: 640px) {
  .hero-title { font-size: clamp(30px, 9.4vw, 44px); }
  .h2 { font-size: clamp(26px, 7.6vw, 34px); }
  .h2xl { font-size: clamp(28px, 8vw, 36px); }
  .c2-title { font-size: clamp(32px, 10vw, 48px); }
  .hero-tags::after { display: none; }
}
.plat2 .h2xl .grad-text { display: inline; }
@media (max-width: 420px) { .proc-actions { gap: 3px; padding: 4px; max-width: 100%; } .proc-actions .btn-sm { padding-inline: 0.8rem; } }

/* ======================= MEDIA v10: hero video + editorial photos (AI-generated, labelled as illustrative) ======================= */
:root { --page-bg: #050b0f; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --page-bg: #edf3f5; } }
:root[data-theme="light"] { --page-bg: #edf3f5; }

/* surfaces that sit on a photo or the video use the dark tokens in both themes */
.theme-dark {
  color-scheme: dark; color: var(--fg);
  --bg: #050b0f; --bg-raise: #0b161c; --glass: rgba(15, 32, 42, 0.56); --glass-2: rgba(21, 42, 55, 0.74); --glass-solid: #0f1b22;
  --stroke: rgba(255, 255, 255, 0.1); --stroke-2: rgba(255, 255, 255, 0.2); --hi: rgba(255, 255, 255, 0.13); --edge-glow: rgba(255, 255, 255, 0.07);
  --fg: #f1f7f9; --fg-2: #cddbe1; --muted: #94a9b3; --faint: #5f7480;
  --accent: #1fc0db; --accent-2: #34d399; --accent-ink: #7adcf0; --accent-soft: rgba(31, 192, 219, 0.15); --accent-line: rgba(100, 214, 236, 0.42);
  --btn-a: #3b82f6; --btn-b: #10b981; --grad-a: #6aa8ff; --grad-b: #3ee0a1; --on-accent: #03141b; --lit: rgba(31, 160, 219, 0.3);
  --inv-bg: #f1f7f9; --inv-fg: #06131a; --inv-grad-a: #1d5fd6; --inv-grad-b: #067a52;
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.12); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.12); --bad: #fb7185; --bad-soft: rgba(251, 113, 133, 0.12);
  --shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.9); --shadow-sm: 0 12px 30px -14px rgba(0, 0, 0, 0.7);
}

/* hero: the loop fills the screen behind the sticky nav; a veil keeps the headline readable */
.hero-v { --head-h: 75px; position: relative; isolation: isolate; margin-top: calc(-1 * var(--head-h)); padding-top: var(--head-h); min-height: max(760px, 100svh);
  display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero-v .hero { padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 96px); }
.hero-media { position: absolute; inset: 0; z-index: -1; background: #050b0f url(media/hero-poster.jpg) 78% 50% / cover no-repeat; }
.hero-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 10, 14, 0.5) 0%, rgba(4, 10, 14, 0) 22%, rgba(4, 10, 14, 0) 60%, var(--page-bg) 98%),
    linear-gradient(90deg, rgba(4, 10, 14, 0.9) 0%, rgba(4, 10, 14, 0.66) 40%, rgba(4, 10, 14, 0.18) 70%, rgba(4, 10, 14, 0.06) 100%); }
.hero-v .lede { color: var(--fg-2); }

/* services: photo + icon badge */
.svc { padding: 14px 20px 14px 14px; }
.svc-ph { position: relative; flex: none; width: 136px; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6); }
.svc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.svc:hover .svc-ph img { transform: scale(1.07); }
.svc .svc-ph .svc-ic { position: absolute; left: 8px; bottom: 8px; width: 38px; height: 38px; border-radius: 12px; color: var(--on-accent);
  background: linear-gradient(145deg, var(--btn-a), var(--btn-b)); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.svc .svc-ph .svc-ic .i { width: 18px; height: 18px; }

/* numbers band: duotone photo, numbers on glass */
.band.band--photo { --inv-fg: #f1f7f9; --inv-grad-a: #6aa8ff; --inv-grad-b: #3ee0a1; background: #06121a; color: var(--inv-fg); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.band--photo::before, .band--photo::after { display: none; }
.band-ph { position: absolute; inset: 0; z-index: -1; isolation: isolate; }
.band-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.band-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 12, 18, 0.84) 0%, rgba(3, 12, 18, 0.74) 38%, rgba(3, 12, 18, 0.22) 55%, rgba(3, 12, 18, 0.05) 100%); }
.band--photo .band-stats > div { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }

/* contact: photo above the steps */
.c2-photo { position: relative; margin: 0 0 34px; aspect-ratio: 16 / 10; background: #0b161c; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.c2-photo img, .c2-photo video { display: block; width: 100%; height: 100%; object-fit: cover; }
.c2-photo-tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: #ffffff;
  background: rgba(6, 18, 26, 0.55); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.18); font: 700 13px/1 var(--font-ui); }
.c2-photo-tag .dot { color: #3ee0a1; }

@media (max-width: 640px) {
  .hero-v { min-height: auto; }
  .hero-video, .hero-media { object-position: 82% 50%; background-position: 82% 50%; }
  .hero-media::after { background: linear-gradient(180deg, rgba(4, 10, 14, 0.7) 0%, rgba(4, 10, 14, 0.55) 40%, rgba(4, 10, 14, 0.75) 80%, var(--page-bg) 100%); }
  .svc { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px; gap: 12px; }
  .svc-ph { width: 92px; border-radius: 14px; }
  .svc .svc-ph .svc-ic { width: 30px; height: 30px; left: 6px; bottom: 6px; border-radius: 10px; }
  .c2-photo { border-radius: 22px; margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) { .svc:hover .svc-ph img { transform: none; } }

/* marquee lifted onto the bottom edge of the hero video (comment from the owner) */
:root { --mq-lift: clamp(176px, 15vw, 232px); }
.hero-v .hero { padding-bottom: calc(clamp(40px, 5vw, 80px) + var(--mq-lift)); }
.hero-media::after {
  background:
    linear-gradient(180deg, rgba(4, 10, 14, 0.5) 0%, rgba(4, 10, 14, 0) 22%, rgba(4, 10, 14, 0) 78%, var(--page-bg) 100%),
    linear-gradient(90deg, rgba(4, 10, 14, 0.9) 0%, rgba(4, 10, 14, 0.66) 40%, rgba(4, 10, 14, 0.18) 70%, rgba(4, 10, 14, 0.06) 100%);
}
.mq { z-index: 2; margin-top: calc(-1 * var(--mq-lift)); padding-top: 0; padding-bottom: clamp(32px, 4vw, 60px); }
@media (max-width: 640px) {
  :root { --mq-lift: 168px; }
  .hero-media::after { background: linear-gradient(180deg, rgba(4, 10, 14, 0.7) 0%, rgba(4, 10, 14, 0.55) 40%, rgba(4, 10, 14, 0.7) 82%, var(--page-bg) 100%); }
}

/* ======================= v16: cleaner hero, didactic "How it works" ======================= */
.hero-v .hero { position: relative; }
.hero > .spin-badge { right: 0; bottom: calc(var(--mq-lift) - 10px); top: auto; }
.hero-v .hero-copy .cta-row { margin-top: 34px; }

.how { align-items: stretch; }
.how .sec-head .sec-lede { margin-top: 2px; }
.how-vis { display: block; }
.how-stage { position: sticky; top: 112px; display: grid; }
.hs-panel { grid-area: 1 / 1; margin: 0; padding: 24px; border-radius: 30px; display: grid; gap: 18px; align-content: start;
  opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); pointer-events: none; }
.hs-panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hs-cap { display: grid; gap: 4px; }
.hs-cap b { font: 900 22px/1.1 var(--font-display); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; }
.hs-note { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-2); font-size: 14.5px; }
.hs-note .i { flex: none; width: 18px; height: 18px; color: var(--accent-ink); margin-top: 1px; }
/* 1 · brief */
.hs-doc { padding: 16px 18px; border-radius: 20px; background: var(--glass-2); border: 1px solid var(--stroke); display: grid; gap: 12px; }
.hs-doc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hs-stamp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--ok); color: var(--ok); font: 800 11px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-4deg); }
.hs-stamp .i { width: 13px; height: 13px; }
.hs-rows { margin: 0; display: grid; }
.hs-rows > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--stroke); }
.hs-rows dt { font: 700 12px/1.4 var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.hs-rows dd { margin: 0; font: 600 14px/1.4 var(--font-ui); }
/* 2 · search */
.hs-funnel { display: grid; justify-items: center; gap: 8px; }
.hs-funnel span { width: var(--w); display: block; text-align: center; padding: 13px 12px; border-radius: 14px; font: 700 13.5px/1.2 var(--font-ui);
  background: color-mix(in srgb, var(--accent) 12%, var(--glass-2)); border: 1px solid var(--stroke-2); }
.hs-funnel span:last-child { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--on-accent); border-color: transparent; }
.hs-mail { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--glass-2); border: 1px solid var(--stroke); }
.hs-mail > .i { width: 22px; height: 22px; color: var(--accent-ink); flex: none; }
.hs-mail b { display: block; font-size: 14px; }
.hs-mail small { color: var(--muted); font-size: 13px; }
/* 3 · assess */
.hs-mx { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.hs-mx th, .hs-mx td { text-align: center; padding: 6px 4px; }
.hs-mx thead th { font: 700 11.5px/1.3 var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.hs-mx tbody th, .hs-mx tbody td { background: var(--glass-2); }
.hs-mx tbody th { border-radius: 14px 0 0 14px; }
.hs-mx tbody td:last-child { border-radius: 0 14px 14px 0; }
.hs-mx .lv { margin: 0 auto; }
.hs-mx .pav { width: 32px; height: 32px; font-size: 11px; }
/* 4 · decide */
.hs-report { position: relative; padding: 18px 20px 22px; border-radius: 18px; background: var(--paper); color: var(--paper-ink); display: grid; gap: 10px; box-shadow: var(--shadow-sm); }
.hs-rep-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.hs-rep-head b { font: 900 16px/1.1 var(--font-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; }
.hs-line { display: block; height: 8px; width: var(--w); border-radius: 6px; background: var(--paper-line); }
.hs-seal { position: absolute; right: 16px; bottom: 12px; width: 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 1px;
  color: #047857; border: 3px double #047857; background: rgba(255, 255, 255, 0.86); transform: rotate(-12deg); }
.hs-seal span { font: 800 8.5px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.hs-seal b { font: 900 22px/1 var(--font-display); font-stretch: 125%; }
.hs-seal small { font: 600 8px/1.2 var(--font-ui); }
/* the timeline item in view lights up */
.tl li.is-on .tl-body { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 8%, var(--glass)); }
.tl li.is-on .tl-node { transform: scale(1.1); box-shadow: 0 0 0 6px var(--accent-soft), 0 14px 30px -12px var(--btn-a); }

@media (max-width: 1100px) {
  .how-stage { position: static; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .how-stage::-webkit-scrollbar { display: none; }
  .hs-panel { flex: 0 0 min(86%, 440px); scroll-snap-align: start; opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .hs-panel { transition: none; } }
.hs-mx .lv { width: 30px; height: 30px; }
.hs-mx .lv .i { width: 15px; height: 15px; }
.how-vis { justify-items: stretch; }
.how-stage { width: 100%; min-width: 0; }
@media (max-width: 640px) { .hs-rows > div { grid-template-columns: 92px minmax(0, 1fr); } .hs-panel { padding: 20px; } }

/* ======================= v17: marquee straddles hero/services, full-width platform ======================= */
/* marquee sits on the seam between the hero and the next section; the video fades out under it */
:root { --mq-lift: clamp(96px, 8vw, 124px); }
.hero-media::after {
  background:
    linear-gradient(180deg, rgba(4, 10, 14, 0.5) 0%, rgba(4, 10, 14, 0) 22%, rgba(4, 10, 14, 0) 50%, color-mix(in srgb, var(--page-bg) 55%, transparent) 78%, var(--page-bg) 100%),
    linear-gradient(90deg, rgba(4, 10, 14, 0.9) 0%, rgba(4, 10, 14, 0.66) 40%, rgba(4, 10, 14, 0.18) 70%, rgba(4, 10, 14, 0.06) 100%);
}
.mq { padding-bottom: clamp(28px, 4vw, 56px); }

/* platform: centred title, the screen full width, differentiators and the button underneath */
.plat2 { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; text-align: center; }
.plat2 .plat-copy { display: contents; }
.plat2 .eyebrow { order: 1; }
.plat2 .h2xl { order: 2; margin-top: 14px; max-width: 18ch; }
.plat2 .h2xl .grad-text { display: inline; }
.plat2 .lede { order: 3; margin-top: 18px; max-width: 52ch; }
.plat2 .plat-visual { order: 4; width: 100vw; max-width: 100vw; justify-self: center; margin-top: clamp(32px, 4vw, 56px); padding: clamp(24px, 3vw, 40px) clamp(16px, 4vw, 72px) clamp(40px, 5vw, 64px); }
.plat2 .plat-shot { max-width: 1380px; margin-inline: auto; border-radius: clamp(16px, 2vw, 28px);
  transform: perspective(2200px) rotateX(calc((1 - var(--p, 1)) * 16deg)) scale(calc(0.92 + 0.08 * var(--p, 1))); transform-origin: 50% 100%; }
.plat2 .plat-shot:hover { transform: perspective(2200px) rotateX(0deg) translateY(-4px); }
.plat2 .pv-glow { inset: 6% 8%; }
.plat2 .pv-chip { left: max(24px, calc(50% - 650px)); bottom: 4%; text-align: left; }
.plat2 .pv-seal { right: max(24px, calc(50% - 660px)); top: 0; }
.plat2 .arw-xl { right: max(40px, calc(50% - 620px)); bottom: 7%; }
.plat2 .plat-list { order: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; margin-top: 8px; }
.plat2 .plat-list li { flex-direction: column; justify-content: flex-start; text-align: center; gap: 12px; padding: 22px 18px; border-radius: 24px; border: 1px solid var(--stroke); background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--hi); }
.plat2 .plat-list .lv { width: 46px; height: 46px; }
.plat2 .plat-list .lv .i { width: 20px; height: 20px; }
.plat2 > .plat-copy > .btn, .plat2 .btn-lg { order: 6; margin-top: 28px; }
@media (max-width: 760px) {
  .plat2 .plat-list { grid-template-columns: minmax(0, 1fr); }
  .plat2 .plat-list li { flex-direction: row; text-align: left; padding: 14px 16px; }
  .plat2 .plat-list .lv { width: 38px; height: 38px; }
  .plat2 .pv-chip { position: relative; left: auto; bottom: auto; margin: 14px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .plat2 .plat-shot { transform: none; } }
@media (max-width: 760px) { .plat2 .arw-xl { display: none; } .plat2 .pv-seal { right: 12px; top: -8px; } }

/* ======================= v18: owner comments (wordmark, seam, stage panel, contact) ======================= */
/* footer wordmark: edge to edge */
.foot-word { max-width: none; width: 100%; padding-inline: clamp(8px, 1.4vw, 24px); text-align: center; }
.foot-word span { font-size: 8.15vw; line-height: 0.86; transform-origin: 50% 100%; }

/* no dark gap: the video stays visible down to the marquee, and Services starts right after it */
.hero-media::after {
  background:
    linear-gradient(180deg, rgba(4, 10, 14, 0.5) 0%, rgba(4, 10, 14, 0) 22%, rgba(4, 10, 14, 0) 70%, color-mix(in srgb, var(--page-bg) 70%, transparent) 90%, var(--page-bg) 100%),
    linear-gradient(90deg, rgba(4, 10, 14, 0.9) 0%, rgba(4, 10, 14, 0.66) 40%, rgba(4, 10, 14, 0.18) 70%, rgba(4, 10, 14, 0.06) 100%);
}
.hero-v .hero { padding-bottom: calc(clamp(24px, 3vw, 48px) + var(--mq-lift)); }
.mq { padding-bottom: 0; }
#services.section { padding-top: clamp(28px, 3.5vw, 56px); }

/* how it works: the panel sits level with the stage in view or under the pointer */
.how-stage { position: relative; top: auto; transform: translateY(var(--hs-y, 0px)); transition: transform 0.6s var(--ease); }
@media (max-width: 1100px) { .how-stage { transform: none; } }

/* contact: steps and form on one bold liquid slab */
.c2-slab { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(40px, 5vw, 72px); padding: clamp(24px, 4vw, 60px); border-radius: clamp(28px, 3.4vw, 48px);
  color: var(--on-accent);
  background: radial-gradient(70% 90% at 0% 0%, rgba(255, 255, 255, 0.32), transparent 60%), linear-gradient(125deg, var(--btn-a), var(--btn-b), var(--btn-a)) 0 0 / 200% 100%;
  background-position: 0 0, calc(var(--p, 1) * 100%) 0;
  box-shadow: 0 50px 100px -50px var(--btn-a), inset 0 2px 1px rgba(255, 255, 255, 0.5), inset 0 -24px 60px rgba(0, 26, 38, 0.18);
  transform: scale(calc(0.94 + 0.06 * var(--p, 1))); }
.c2-streak { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02));
  clip-path: polygon(34% 0, 46% 0, 30% 100%, 18% 100%); }
.c2-side { color: var(--on-accent); }
.c2-kicker { display: inline-block; margin-bottom: 26px; font: 800 12px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.c2-slab .c2-steps h3 { color: var(--on-accent); font-size: 22px; }
.c2-slab .c2-steps p { color: var(--on-accent); font-weight: 500; }
.c2-slab .c2-steps::before { background: color-mix(in srgb, var(--on-accent) 22%, transparent); }
.c2-slab .c2-steps::after { background: var(--on-accent); }
.c2-slab .c2-ic { color: var(--on-accent); background: color-mix(in srgb, var(--on-accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-accent) 32%, transparent); }
.c2-slab .c2-card { box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.75), inset 0 1px 0 var(--hi); }
.c2-slab .c2-card .input { background: rgba(255, 255, 255, 0.06); }
@media (max-width: 640px) { .c2-slab { padding: 20px; } .c2-kicker { margin-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .c2-slab { transform: none; } }
.c2-slab .c2-ic { background: var(--on-accent); color: var(--grad-b); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.55); }
/* the stage box takes the height of the panel on show, so it can sit level with its stage */
.hs-panel { position: absolute; inset: 0 0 auto 0; }
.hs-panel.is-on { position: relative; }
@media (max-width: 1100px) { .hs-panel, .hs-panel.is-on { position: relative; inset: auto; } }

/* ======================= v19: platform second, button under the lede, hero floats ======================= */
/* spacing: the section right after the marquee starts close to it */
#services.section { padding-top: clamp(64px, 8vw, 120px); }
#platform.section { padding-top: clamp(28px, 3.5vw, 56px); }
/* platform: button right under the lede, then the screen, then the differentiators */
.plat2 .btn-lg, .plat2 > .plat-copy > .btn { order: 4; margin-top: 24px; }
.plat2 .plat-visual { order: 5; }
.plat2 .plat-list { order: 6; margin-top: 4px; }

/* hero: a bit smaller headline, loose platform cards floating on the right */
.hero-title { font-size: clamp(34px, 4.8vw, 70px); }
.hero-floats { position: relative; grid-column: 2; grid-row: 2 / span 3; min-height: 360px; align-self: stretch; }
.hf { position: absolute; display: grid; gap: 6px; padding: 14px 16px; border-radius: 20px; max-width: 300px; animation: drift 9s ease-in-out infinite; }
.hf b { font: 700 15px/1.3 var(--font-ui); }
.hf-brief { left: 6%; top: 0; animation-delay: -2s; }
.hf-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.hf-note { font: 700 12px/1 var(--font-ui); color: var(--warn); }
.hf-cand { right: 0; top: 34%; max-width: none; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; animation-delay: -5s; }
.hf-cand .ccs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hf-nm { display: grid; }
.hf-nm small { color: var(--muted); font-size: 12px; }
.hf-q { left: 0; bottom: 0; animation-delay: -7s; }
.hf-q p { font: 600 14.5px/1.4 var(--font-ui); }
.hf-seal { position: absolute; right: 26%; top: -4%; width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 1px;
  color: var(--ok); border: 3px double var(--ok); background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: rotate(-12deg); animation: none; }
.hf-seal span { font: 800 8.5px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.hf-seal b { font: 900 24px/1 var(--font-display); font-stretch: 125%; }
.hf-seal small { font: 600 8px/1.2 var(--font-ui); }
.hero > .spin-badge { right: 2%; bottom: calc(var(--mq-lift) + 4px); }
@media (max-width: 1100px) { .hero-floats { display: none; } }
@media (prefers-reduced-motion: reduce) { .hf { animation: none; } }

/* ======================= v20: marquee not clipped, cleaner light-effect contact slab ======================= */
/* room above and below the tilted bands so their ends are never cut */
.mq { padding-top: 56px; padding-bottom: 28px; margin-top: calc(-1 * var(--mq-lift) - 56px); }

/* contact slab: clean glass with soft light, no strong colour fill */
.c2-slab { color: var(--fg); background: var(--glass); border: 1px solid var(--stroke); -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hi); }
.c2-slab::before, .c2-slab::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(60px); }
.c2-slab::before { width: 55%; aspect-ratio: 1; left: -14%; top: -40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--btn-a) 42%, transparent), transparent);
  transform: translateX(calc((1 - var(--p, 1)) * -12%)); }
.c2-slab::after { width: 50%; aspect-ratio: 1; right: -12%; bottom: -45%; background: radial-gradient(closest-side, color-mix(in srgb, var(--btn-b) 36%, transparent), transparent);
  transform: translateX(calc((1 - var(--p, 1)) * 12%)); }
.c2-streak { background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 7%, transparent), transparent); }
.c2-side, .c2-slab .c2-steps h3 { color: var(--fg); }
.c2-slab .c2-steps p { color: var(--fg-2); font-weight: 400; }
.c2-kicker { color: var(--accent-ink); }
.c2-slab .c2-steps::before { background: var(--stroke-2); }
.c2-slab .c2-steps::after { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); }
.c2-slab .c2-ic { color: var(--on-accent); background: linear-gradient(145deg, var(--btn-a), var(--btn-b)); box-shadow: 0 14px 30px -14px var(--btn-a), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.c2-slab .c2-card { box-shadow: var(--shadow-sm), inset 0 1px 0 var(--hi); }
.c2-slab .c2-card .input { background: var(--glass-2); }
.hero-v .hero { padding-bottom: calc(clamp(24px, 3vw, 48px) + var(--mq-lift) + 56px); }
.hero > .spin-badge { bottom: calc(var(--mq-lift) + 60px); }

/* ======================= v21: hero cards as one organised cluster (seal removed) ======================= */
.hero-floats { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 14px; align-content: center; min-height: 0;
  padding: 8px 0 8px 6%; animation: drift 10s ease-in-out infinite; }
.hf { position: relative; inset: auto; max-width: none; animation: none; padding: 16px 18px; border-radius: 22px; }
.hf-brief { grid-column: 1 / -1; padding: 22px 24px; gap: 10px; border-radius: 26px;
  background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--glass); }
.hf-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hf-title { font: 900 clamp(22px, 2vw, 30px)/1.02 var(--font-display); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; }
.hf-was { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hf-was s { color: var(--muted); font-size: 14px; }
.hf-was .hf-note { margin-left: auto; }
.hf-cand { grid-column: 1; align-self: start; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.hf-q { grid-column: 2; align-self: stretch; margin-top: 26px; display: grid; align-content: center;
  background: radial-gradient(100% 120% at 100% 100%, color-mix(in srgb, var(--btn-b) 18%, transparent), transparent 60%), var(--glass); }
.hf-q p { font: 600 15.5px/1.4 var(--font-ui); }
@media (prefers-reduced-motion: reduce) { .hero-floats { animation: none; } }
.hf .hf-title { font: 900 clamp(22px, 2vw, 30px)/1.02 var(--font-display); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; }
/* the spinning badge moves to the open space beside the headline, away from the cards */
.hero > .spin-badge { top: 8px; bottom: auto; right: 1%; }

/* ======================= v22: full-width header, pinned "How it works" ======================= */
.site-nav { max-width: none; }

/* how it works: on tall desktop screens the section pins under the nav and the scroll walks through the stages */
.how-spacer { display: none; }
@media (min-width: 1101px) and (min-height: 820px) and (prefers-reduced-motion: no-preference) {
  .how-track { --pin: 1; position: relative; }
  .how-track > .how { position: sticky; top: 76px; min-height: calc(100vh - 76px); align-content: center; padding-top: 16px; padding-bottom: 16px; }
  .how-spacer { display: block; height: 210vh; }
  .how .tl-body { transition: opacity 0.4s var(--ease); }
  .how .tl li:not(.is-on) .tl-body { opacity: 0.55; }
}

/* status dots inside legends keep their own centring (the legend item rule was turning them into left-aligned flex boxes) */
.legend-mini .lv { display: grid; place-items: center; gap: 0; }

/* how it works: flowing micro-dot wave behind the stages (canvas), over the existing ambient glow */
.how { position: relative; isolation: isolate; }
.how-flow { position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }

/* ======================= v23: light-mode hero video + band image, theme-aware veils ======================= */
:root { --veil-rgb: 4, 10, 14; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --veil-rgb: 237, 243, 245; } }
:root[data-theme="light"] { --veil-rgb: 237, 243, 245; }
.hero-media { background: var(--page-bg) url(media/hero-poster.jpg) 78% 50% / cover no-repeat; }
.hero-media::after {
  background:
    linear-gradient(180deg, rgba(var(--veil-rgb), 0.5) 0%, rgba(var(--veil-rgb), 0) 22%, rgba(var(--veil-rgb), 0) 70%, color-mix(in srgb, var(--page-bg) 70%, transparent) 90%, var(--page-bg) 100%),
    linear-gradient(90deg, rgba(var(--veil-rgb), 0.9) 0%, rgba(var(--veil-rgb), 0.66) 40%, rgba(var(--veil-rgb), 0.18) 70%, rgba(var(--veil-rgb), 0.06) 100%);
}
.band-ph::after { background: linear-gradient(90deg, rgba(var(--veil-rgb), 0.84) 0%, rgba(var(--veil-rgb), 0.74) 38%, rgba(var(--veil-rgb), 0.22) 55%, rgba(var(--veil-rgb), 0.05) 100%); }
@media (max-width: 640px) {
  .hero-media::after { background: linear-gradient(180deg, rgba(var(--veil-rgb), 0.7) 0%, rgba(var(--veil-rgb), 0.55) 40%, rgba(var(--veil-rgb), 0.7) 82%, var(--page-bg) 100%); }
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero-media { background-image: url(media/hero-poster-light.jpg); } }
:root[data-theme="light"] .hero-media { background-image: url(media/hero-poster-light.jpg); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .band.band--photo { --inv-fg: #0a161b; --inv-grad-a: #1d5fd6; --inv-grad-b: #067a52; background: #eef4f6; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.8); } }
:root[data-theme="light"] .band.band--photo { --inv-fg: #0a161b; --inv-grad-a: #1d5fd6; --inv-grad-b: #067a52; background: #eef4f6; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .band--photo .band-stats > div { background: rgba(255, 255, 255, 0.5); border-color: rgba(6, 48, 66, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } }
:root[data-theme="light"] .band--photo .band-stats > div { background: rgba(255, 255, 255, 0.5); border-color: rgba(6, 48, 66, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }

/* ======================= v24: orbiting light around the platform screen ======================= */
/* two comets of light run around the screen's edge: a sharp ring plus a wide blurred halo over a soft constant glow, in the brand blue → green */
@property --orb { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.plat2 .plat-shot { --orb-core: #ffffff; --orb-halo: 1; --orb-base: 30%; --orb-ring: 3px;
  --orb-comets: conic-gradient(from var(--orb), transparent 0deg, var(--btn-a) 22deg, var(--orb-core) 60deg, var(--btn-b) 100deg, transparent 150deg,
    transparent 180deg, var(--btn-b) 202deg, var(--orb-core) 240deg, var(--btn-a) 280deg, transparent 330deg);
  overflow: visible; isolation: isolate; border-color: transparent; animation: orb 10s linear infinite; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7); }
.plat2 .plat-shot img { position: relative; z-index: 1; border-radius: inherit; }
.plat2 .plat-shot::before, .plat2 .plat-shot::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; }
/* sharp ring on the screen's edge, over a faint brand rim */
.plat2 .plat-shot::before { z-index: 2; inset: calc(var(--orb-ring) * -1); padding: var(--orb-ring);
  background: var(--orb-comets), linear-gradient(90deg, color-mix(in srgb, var(--btn-a) 45%, transparent), color-mix(in srgb, var(--btn-b) 45%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* the light spilling out around it: comets at full strength, the whole edge glowing softly underneath */
.plat2 .plat-shot::after { z-index: -1; inset: clamp(-44px, -3vw, -14px); filter: blur(clamp(20px, 3vw, 48px)); opacity: var(--orb-halo);
  background: var(--orb-comets), linear-gradient(90deg, color-mix(in srgb, var(--btn-a) var(--orb-base), transparent), color-mix(in srgb, var(--btn-b) var(--orb-base), transparent)); }
@keyframes orb { to { --orb: 360deg; } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .plat2 .plat-shot { --orb-core: #38bdf8; --orb-halo: 0.9; --orb-base: 26%; box-shadow: 0 40px 90px -46px rgba(6, 48, 66, 0.45); } }
:root[data-theme="light"] .plat2 .plat-shot { --orb-core: #38bdf8; --orb-halo: 0.9; --orb-base: 26%; box-shadow: 0 40px 90px -46px rgba(6, 48, 66, 0.45); }
@media (max-width: 640px) { .plat2 .plat-shot { --orb-ring: 2px; } }
/* still light, no orbit, for people who turn motion off */
@media (prefers-reduced-motion: reduce) { .plat2 .plat-shot { animation: none; --orb: 300deg; } }

/* ======================= v27: brand identity v1 (ribbon M; blue and green only: Ink / Electric Blue / Aqua / Seafoam / Mint) ======================= */
:root, .theme-dark {
  --page-bg: #0b1117;
  --ink: #0b1117; --eblue: #2f6bff; --aqua: #00c6bb; --seafoam: #7ff2cb; --mint: #d9fbe6;
  --bg: #0b1117; --bg-raise: #121b25; --glass: rgba(20, 30, 42, 0.56); --glass-2: rgba(27, 39, 54, 0.76); --glass-solid: #121b25;
  --stroke: rgba(255, 255, 255, 0.085); --stroke-2: rgba(255, 255, 255, 0.16); --hi: rgba(255, 255, 255, 0.13); --edge-glow: rgba(255, 255, 255, 0.07);
  --fg: #f2f5fa; --fg-2: #cfd6e2; --muted: #96a1b3; --faint: #5f6a7c;
  --accent: #00c6bb; --accent-2: #7ff2cb; --accent-ink: #2fd8cc; --accent-soft: rgba(0, 198, 187, 0.15); --accent-line: rgba(0, 198, 187, 0.42);
  --btn-a: #4d82ff; --btn-b: #00c6bb; --grad-a: #58a6ff; --grad-b: #7ff2cb;
  --orb-a: #2f6bff; --orb-b: #00a89f; --orb-c: #0b3a52; --on-accent: #06101a;
  --inv-grad-a: #2a5ff0; --inv-grad-b: #00857e; --lit: rgba(47, 107, 255, 0.3);
  --inv-bg: #f2f5fa; --inv-fg: #0b1117; --paper-accent: #2457e6;
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.12); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.12); --bad: #fb7185; --bad-soft: rgba(251, 113, 133, 0.12);
  --shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.9); --shadow-sm: 0 12px 30px -14px rgba(0, 0, 0, 0.7);
  --blob-1: rgba(47, 107, 255, 0.34); --blob-2: rgba(0, 198, 187, 0.2); --blob-3: rgba(6, 82, 110, 0.42);
  --veil-rgb: 11, 17, 23; --ai-dark: 1; --ai-light: 0; --ai-rim: rgba(255, 255, 255, 0.16);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --page-bg: #edf3f6;
  --bg: #edf3f6; --bg-raise: #ffffff; --glass: rgba(255, 255, 255, 0.6); --glass-2: rgba(255, 255, 255, 0.84); --glass-solid: #ffffff;
  --stroke: rgba(11, 17, 23, 0.09); --stroke-2: rgba(11, 17, 23, 0.16); --hi: rgba(255, 255, 255, 0.95); --edge-glow: rgba(255, 255, 255, 0.7);
  --fg: #0b1117; --fg-2: #2a3342; --muted: #576173; --faint: #8a93a3;
  --accent: #00a99f; --accent-2: #2f6bff; --accent-ink: #007a73; --accent-soft: rgba(0, 169, 159, 0.1); --accent-line: rgba(0, 150, 142, 0.34);
  --btn-a: #2a5ff0; --btn-b: #00857e; --grad-a: #2a5ff0; --grad-b: #00857e; --on-accent: #ffffff;
  --inv-grad-a: #58a6ff; --inv-grad-b: #7ff2cb; --lit: rgba(47, 107, 255, 0.14);
  --inv-bg: #0b1117; --inv-fg: #ffffff;
  --ok: #047857; --ok-soft: rgba(4, 120, 87, 0.09); --warn: #a3520a; --warn-soft: rgba(180, 83, 9, 0.09); --bad: #be123c; --bad-soft: rgba(190, 18, 60, 0.07);
  --shadow: 0 26px 60px -30px rgba(8, 52, 72, 0.3); --shadow-sm: 0 10px 26px -14px rgba(8, 52, 72, 0.24);
  --blob-1: rgba(47, 107, 255, 0.15); --blob-2: rgba(127, 242, 203, 0.34); --blob-3: rgba(0, 198, 187, 0.14);
  --veil-rgb: 237, 243, 246; --ai-dark: 0; --ai-light: 1; --ai-rim: rgba(11, 17, 23, 0.07);
} }
:root[data-theme="light"], .theme-light {
  --page-bg: #edf3f6;
  --bg: #edf3f6; --bg-raise: #ffffff; --glass: rgba(255, 255, 255, 0.6); --glass-2: rgba(255, 255, 255, 0.84); --glass-solid: #ffffff;
  --stroke: rgba(11, 17, 23, 0.09); --stroke-2: rgba(11, 17, 23, 0.16); --hi: rgba(255, 255, 255, 0.95); --edge-glow: rgba(255, 255, 255, 0.7);
  --fg: #0b1117; --fg-2: #2a3342; --muted: #576173; --faint: #8a93a3;
  --accent: #00a99f; --accent-2: #2f6bff; --accent-ink: #007a73; --accent-soft: rgba(0, 169, 159, 0.1); --accent-line: rgba(0, 150, 142, 0.34);
  --btn-a: #2a5ff0; --btn-b: #00857e; --grad-a: #2a5ff0; --grad-b: #00857e; --on-accent: #ffffff;
  --inv-grad-a: #58a6ff; --inv-grad-b: #7ff2cb; --lit: rgba(47, 107, 255, 0.14);
  --inv-bg: #0b1117; --inv-fg: #ffffff;
  --ok: #047857; --ok-soft: rgba(4, 120, 87, 0.09); --warn: #a3520a; --warn-soft: rgba(180, 83, 9, 0.09); --bad: #be123c; --bad-soft: rgba(190, 18, 60, 0.07);
  --shadow: 0 26px 60px -30px rgba(8, 52, 72, 0.3); --shadow-sm: 0 10px 26px -14px rgba(8, 52, 72, 0.24);
  --blob-1: rgba(47, 107, 255, 0.15); --blob-2: rgba(127, 242, 203, 0.34); --blob-3: rgba(0, 198, 187, 0.14);
  --veil-rgb: 237, 243, 246; --ai-dark: 0; --ai-light: 1; --ai-rim: rgba(11, 17, 23, 0.07);
}
.theme-dark { color-scheme: dark; color: var(--fg); }
.theme-light { color-scheme: light; color: var(--fg); }
.band.band--photo { --inv-grad-a: #58a6ff; --inv-grad-b: #7ff2cb; background: #0b1117; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .band.band--photo { --inv-fg: #0b1117; --inv-grad-a: #2a5ff0; --inv-grad-b: #00857e; background: #edf3f6; } }
:root[data-theme="light"] .band.band--photo { --inv-fg: #0b1117; --inv-grad-a: #2a5ff0; --inv-grad-b: #00857e; background: #edf3f6; }

/* wordmark: MANDATE in ExtraBold, STUDIO in Regular with wide tracking, both Archivo Expanded */
.wm { display: inline-flex; align-items: baseline; gap: 0.42em; font-family: var(--font-display); font-stretch: 125%; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--fg); }
.wm b { font-weight: 800; letter-spacing: 0.005em; }
.wm i { font-style: normal; font-weight: 400; letter-spacing: 0.3em; margin-right: -0.3em; }
.wm--stack { flex-direction: column; align-items: center; gap: 0.32em; }
.wm--stack i { font-size: 0.5em; letter-spacing: 0.62em; margin-right: -0.62em; }
.brand .brand-mark, .brand svg.brand-mark { width: 46px; height: 23px; }
.brand:hover svg.brand-mark { transform: translateY(-1px) scale(1.05); }
.brand .wm { font-size: 15px; }
.site-nav .brand svg.brand-mark { width: 46px; height: 23px; }
.brand--lg svg.brand-mark { width: 66px; height: 32px; }
.brand--lg .wm { font-size: 21px; }
.brand small { margin-top: 5px; }
.ph-brand .ph-mark { width: 34px; height: 17px; }
.foot-word i { font-style: normal; font-weight: 400; }

/* ======================= brand guidelines page ======================= */
.guide { max-width: 1240px; margin-inline: auto; padding: 20px var(--gutter-r) 100px var(--gutter); }
.gl-cover { position: relative; isolation: isolate; margin-top: 18px; padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 72px) clamp(28px, 4vw, 48px); border-radius: clamp(28px, 3.4vw, 44px); overflow: hidden;
  border: 1px solid var(--stroke); background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--eblue) 18%, transparent), transparent 60%), radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--seafoam) 18%, transparent), transparent 60%), var(--glass);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); }
.gl-pane { position: absolute; z-index: -1; pointer-events: none; border-radius: 44px; border: 1.5px solid color-mix(in srgb, #ffffff 55%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--eblue) 28%, transparent), color-mix(in srgb, var(--aqua) 22%, transparent) 55%, color-mix(in srgb, var(--seafoam) 30%, transparent));
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.55), 0 30px 80px -40px var(--eblue); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gl-pane--a { width: 46%; aspect-ratio: 1; right: -8%; top: -16%; transform: rotate(18deg); }
.gl-pane--b { width: 30%; aspect-ratio: 1; right: 22%; top: 18%; transform: rotate(18deg); opacity: 0.6; }
.gl-cover-copy { display: grid; justify-items: start; gap: 22px; max-width: 640px; }
.gl-cover-lock { display: grid; justify-items: center; gap: 18px; margin: 10px 0 0; }
.gl-mark-xl { width: clamp(180px, 26vw, 330px); aspect-ratio: 1200 / 591; height: auto; filter: drop-shadow(0 24px 40px color-mix(in srgb, var(--eblue) 35%, transparent)); }
.gl-cover-lock .wm { font-size: clamp(40px, 6.4vw, 92px); }
.gl-tag { font: 500 clamp(18px, 1.9vw, 24px)/1.35 var(--font-ui); color: var(--fg); }
.gl-intro { color: var(--muted); max-width: 52ch; }
.gl-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(28px, 4vw, 48px); padding: 6px; border-radius: 999px; width: fit-content; max-width: 100%; }
.gl-toc a { display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 14px; border-radius: 999px; text-decoration: none; font: 700 13.5px/1 var(--font-ui); color: var(--fg-2); }
.gl-toc a:hover { background: var(--accent-soft); color: var(--fg); }
.gl-toc i { font-style: normal; font: 800 10.5px/1 var(--font-display); font-stretch: 125%; color: var(--accent-ink); }

.gl-sec { padding-top: clamp(64px, 8vw, 112px); scroll-margin-top: 90px; display: grid; gap: clamp(16px, 2vw, 24px); }
.gl-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(16px, 2vw, 28px); align-items: end; margin-bottom: 8px; }
.gl-n { grid-row: 1 / span 2; font: 900 clamp(54px, 7vw, 104px)/0.8 var(--font-display); font-stretch: 125%;
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b) 70%, var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gl-head h2 { font-size: clamp(30px, 4.2vw, 56px); line-height: 1; }
.gl-head h2:focus { outline: none; }
.gl-head p { grid-column: 2; margin-top: 10px; color: var(--fg-2); max-width: 62ch; font-size: 17px; }
.gl-head h2, .gl-head p { grid-column: 2; }

.gl-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.gl-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.gl-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.gl-tile { position: relative; isolation: isolate; overflow: hidden; min-height: 240px; display: grid; place-items: center; align-content: center; gap: 22px; padding: 44px 24px 28px;
  border-radius: 28px; border: 1px solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi); }
.gl-tile--light { background: radial-gradient(80% 90% at 0% 0%, rgba(47, 107, 255, 0.16), transparent 60%), radial-gradient(70% 80% at 100% 100%, rgba(127, 242, 203, 0.4), transparent 60%), #f0f5f7; }
.gl-tile--dark { background: radial-gradient(80% 90% at 0% 0%, rgba(47, 107, 255, 0.32), transparent 60%), radial-gradient(70% 80% at 100% 100%, rgba(0, 198, 187, 0.22), transparent 60%), #0b1117; }
.gl-chip { position: absolute; left: 18px; top: 16px; padding: 5px 10px; border-radius: 999px; font: 700 11px/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-2); background: var(--glass); border: 1px solid var(--stroke); }
.gl-cap { font: 600 13px/1.3 var(--font-ui); color: var(--muted); }
.gl-lock-h { display: inline-flex; align-items: center; gap: 14px; }
.gl-lock-h .brand-mark { width: 92px; height: 45px; }
.gl-lock-h .wm { font-size: clamp(22px, 2.6vw, 34px); }
.gl-lock-h--sm .brand-mark { width: 50px; height: 24px; }
.gl-lock-h--sm .wm { font-size: 14px; }
.gl-lock-v { display: grid; justify-items: center; gap: 12px; }
.gl-lock-v .brand-mark { width: 110px; height: 54px; }
.gl-lock-v .wm { font-size: clamp(24px, 2.6vw, 32px); }

.gl-card { display: grid; align-content: start; gap: 16px; padding: 22px; border-radius: 26px; }
.gl-card h3, .gl-grad-card h3, .gl-status h3 { font: 800 17px/1.25 var(--font-ui); }
.gl-card p, .gl-grad-card p, .gl-status p { color: var(--muted); font-size: 14.5px; }
.gl-space { display: grid; place-items: center; min-height: 140px; border-radius: 18px; background: var(--accent-soft); }
.gl-space-box { display: inline-flex; align-items: center; gap: 10px; padding: 12px; outline: 1.5px dashed var(--accent-line); outline-offset: 0; border-radius: 6px;
  background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--accent) 10%, transparent) 6px 7px); }
.gl-space-box .brand-mark { width: 50px; height: 24px; }
.gl-space-box .wm { font-size: 14px; }
.gl-min { display: flex; align-items: flex-end; justify-content: center; gap: 34px; min-height: 140px; border-radius: 18px; background: var(--accent-soft); padding: 20px; }
.gl-min-item { display: grid; justify-items: center; gap: 10px; }
.gl-min-item small { font: 700 11.5px/1 var(--font-ui); color: var(--muted); }
.gl-min-mark { width: 41px; height: 20px; }
.gl-min-lock { display: inline-flex; align-items: center; gap: 5px; width: 120px; }
.gl-min-lock .brand-mark { width: 27px; height: 13px; flex: none; }
.gl-min-lock .wm { font-size: 8.6px; gap: 0.4em; }
.gl-dont { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gl-dont li { display: grid; justify-items: center; gap: 8px; font: 600 12.5px/1.25 var(--font-ui); color: var(--fg-2); text-align: center; }
.gl-dont-art { position: relative; display: grid; place-items: center; width: 100%; height: 66px; border-radius: 14px; background: var(--accent-soft); overflow: hidden; }
.gl-dont-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--bad) calc(50% - 1px), var(--bad) calc(50% + 1px), transparent calc(50% + 1px)); opacity: 0.8; }
.gl-dont-art svg { width: 62px; height: 30px; }
.gl-d-stretch { transform: scale(1.5, 0.62); }
.gl-d-flat { filter: grayscale(1) brightness(0.62) contrast(3); }
.gl-d-rotate { transform: rotate(-22deg); }
.gl-d-outline { filter: drop-shadow(1.5px 0 0 var(--fg)) drop-shadow(-1.5px 0 0 var(--fg)) drop-shadow(0 1.5px 0 var(--fg)) drop-shadow(0 -1.5px 0 var(--fg)); }

.gl-swatches { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sw { display: grid; align-content: end; gap: 3px; min-height: 210px; padding: 16px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--shadow-sm); color: #0b1117; }
.sw b { font: 800 15px/1.2 var(--font-ui); }
.sw code { font: 700 13px/1.2 ui-monospace, "SF Mono", Menlo, monospace; }
.sw small { font: 500 11.5px/1.2 var(--font-ui); opacity: 0.75; }
.sw span { margin-top: 8px; font: 500 12.5px/1.35 var(--font-ui); opacity: 0.85; }
.sw-ink { background: #0b1117; color: #f2f5fa; border-color: rgba(255, 255, 255, 0.12); }
.sw-blue { background: #2f6bff; color: #ffffff; }
.sw-aqua { background: #00c6bb; }
.sw-sea { background: #7ff2cb; }
.sw-mint { background: #d9fbe6; }
.gl-grad-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px; border-radius: 26px; }
.gl-grad { display: block; height: 96px; border-radius: 18px; background: linear-gradient(90deg, #2f6bff 0%, #00c6bb 55%, #7ff2cb 100%); box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.45); }
.gl-tokens { place-items: stretch; padding-top: 56px; }
.gl-tokens ul { list-style: none; display: grid; gap: 4px; }
.gl-tokens li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--stroke); font: 600 14px/1.2 var(--font-ui); }
.gl-tokens li i { width: 30px; height: 30px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--stroke-2); }
.gl-tokens code { font: 600 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); }
.gl-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 22px; border-radius: 26px; }
.gl-status-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-st { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font: 700 13px/1 var(--font-ui); }
.gl-st .i { width: 15px; height: 15px; }
.gl-st--ok { color: var(--ok); background: var(--ok-soft); }
.gl-st--warn { color: var(--warn); background: var(--warn-soft); }
.gl-st--bad { color: var(--bad); background: var(--bad-soft); }

.gl-face { position: relative; padding: 26px; min-height: 300px; }
.gl-face .gl-chip { position: static; justify-self: start; }
.gl-aa { font-size: clamp(80px, 10vw, 140px); line-height: 0.9; letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b) 70%, var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gl-face--display .gl-aa, .gl-face--display h3, .gl-face--display .gl-weights { font-family: var(--font-display); font-stretch: 125%; }
.gl-face--display .gl-aa { font-weight: 900; }
.gl-face--ui .gl-aa, .gl-face--ui h3, .gl-face--ui .gl-weights { font-family: var(--font-ui); }
.gl-face--ui .gl-aa { font-weight: 800; }
.gl-face h3 { font-size: 22px; font-weight: 800; }
.gl-face--display h3 { font-size: 18px; text-transform: uppercase; }
.gl-weights { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; color: var(--fg-2); }
.gl-scale { list-style: none; display: grid; padding: 8px 22px; border-radius: 26px; }
.gl-scale li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--stroke); }
.gl-scale li:first-child { border-top: 0; }
.gl-scale-k { display: grid; gap: 4px; font: 700 13px/1.2 var(--font-ui); color: var(--fg-2); }
.gl-scale-k small { font: 500 12px/1.2 var(--font-ui); color: var(--muted); }
.gl-s { min-width: 0; overflow-wrap: anywhere; }
.gl-s--xl { font: 900 clamp(38px, 5vw, 70px)/0.95 var(--font-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em; }
.gl-s--h2 { font: 900 clamp(28px, 3.4vw, 48px)/1 var(--font-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em; }
.gl-s--h3 { font: 700 22px/1.3 var(--font-ui); }
.gl-s--body { font: 400 16px/1.6 var(--font-ui); color: var(--fg-2); }
.gl-s--label { font: 700 12px/1.3 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }

.gl-icons { min-height: 280px; }
.gl-icon-row { display: flex; align-items: flex-end; gap: clamp(16px, 2.4vw, 32px); }
.gl-ai { display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28)); }
.gl-ai--l { width: clamp(96px, 11vw, 140px); height: clamp(96px, 11vw, 140px); }
.gl-ai--m { width: 72px; height: 72px; }
.gl-ai--s { width: 40px; height: 40px; }
.gl-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gl-tab { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; min-width: 220px; border-radius: 14px 14px 6px 6px; background: var(--bg-raise); border: 1px solid var(--stroke); font: 600 13px/1 var(--font-ui); }
.gl-tab .i { width: 13px; height: 13px; margin-left: auto; color: var(--muted); }
.gl-fav { width: 16px; height: 16px; }

.gl-tile--stage { min-height: 360px; padding: 48px clamp(18px, 3vw, 40px); }
.gl-pane--s { width: 64%; aspect-ratio: 1; right: -18%; top: -30%; transform: rotate(22deg); }
.gl-sample { width: min(100%, 430px); display: grid; gap: 18px; padding: 22px; border-radius: 28px; }
.gl-sample-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gl-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--glass); border: 1px solid var(--stroke); color: var(--fg); }
.gl-ic .i { width: 17px; height: 17px; }
.gl-sample h3 { font: 800 clamp(22px, 2.4vw, 28px)/1.15 var(--font-ui); letter-spacing: -0.015em; }
.gl-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; background: var(--glass); border: 1px solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi); font: 600 13.5px/1 var(--font-ui); }
.gl-pill .i { width: 15px; height: 15px; }
.gl-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-btns .btn { pointer-events: none; }
.gl-specs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gl-specs li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--stroke); background: var(--glass); }
.gl-specs b { font: 800 18px/1.1 var(--font-display); font-stretch: 125%; }
.gl-specs span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }

.gl-attrs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gl-attrs li { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 24px; }
.gl-attrs .gl-ic { color: var(--accent-ink); margin-bottom: 6px; }
.gl-attrs b { font: 800 16px/1.2 var(--font-ui); }
.gl-attrs span:not(.gl-ic) { color: var(--muted); font-size: 14px; line-height: 1.45; }
.gl-say { display: grid; align-content: start; gap: 12px; padding: 22px; border-radius: 26px; }
.gl-say p { font: 600 17px/1.45 var(--font-ui); }
.gl-say-k { display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.gl-say-k .i { width: 16px; height: 16px; }
.gl-say-k--yes { color: var(--ok); }
.gl-say-k--no { color: var(--bad); }
.gl-say:has(.gl-say-k--no) p { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 60%, transparent); }

.gl-shot { margin: 0; display: grid; gap: 10px; }
.gl-shot img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--stroke-2); box-shadow: var(--shadow); }
.gl-shot figcaption { font: 600 13px/1.3 var(--font-ui); color: var(--muted); }
.gl-end { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.gl-foot { margin-top: 28px; color: var(--faint); font-size: 13px; }

@media (max-width: 1100px) {
  .gl-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gl-row3 { grid-template-columns: minmax(0, 1fr); }
  .gl-specs, .gl-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gl-duo, .gl-row2, .gl-grad-card, .gl-status { grid-template-columns: minmax(0, 1fr); }
  .gl-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw { min-height: 150px; }
  .gl-scale li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gl-pane--a { width: 80%; right: -40%; top: -10%; } .gl-pane--b { display: none; }
  .gl-toc { border-radius: 22px; }
  .gl-head { grid-template-columns: minmax(0, 1fr); } .gl-n { grid-row: auto; } .gl-head h2, .gl-head p { grid-column: 1; }
  .gl-lock-h .brand-mark { width: 64px; height: 31px; }
}
@media (max-width: 480px) { .gl-specs, .gl-attrs { grid-template-columns: minmax(0, 1fr); } }

/* v28: avatars in the brand family (blue, aqua, ocean) instead of purple / pink / orange */
.pav-A { background: linear-gradient(135deg, #4d82ff, #2a5ff0); }
.pav-B { background: linear-gradient(135deg, #14b8a6, #00857e); }
.pav-C { background: linear-gradient(135deg, #1e8fc2, #0b4f6c); }

/* ======================= v29: workspace sidebar: one quiet glass panel with text rows instead of a column of bubbles ======================= */
@media (min-width: 861px) {
  .view-app { grid-template-columns: 248px minmax(0, 1fr); column-gap: 26px; }
  .side { align-items: stretch; gap: 14px; padding: 18px 12px 12px; border-radius: 26px; height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  .side-brand { padding: 2px 8px 2px; gap: 10px; }
  .side-brand svg.brand-mark { width: 40px; height: 20px; }
  .side-brand .wm { font-size: 11.5px; gap: 0.36em; }
  .side-brand .wm i { letter-spacing: 0.24em; margin-right: -0.24em; }
  .side-search { display: grid; gap: 3px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--bg) 38%, transparent); }
  .side-search small { font: 700 10.5px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
  .side-search b { font: 700 15px/1.25 var(--font-ui); }
  .side-search span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  .side .rail-nav { display: grid; gap: 2px; padding: 0; margin: 0; border: 0; border-radius: 14px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .side .rail-nav a { width: auto; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 12px; padding: 11px 12px; border-radius: 14px; font: 650 14.5px/1.2 var(--font-ui); color: var(--fg-2); }
  .side .rail-nav a .i { width: 20px; height: 20px; color: var(--muted); transition: color 0.3s, transform 0.5s var(--spring); }
  .side .rail-nav a:hover .i { transform: none; color: var(--fg-2); }
  .side .rail-nav a.is-active { color: var(--fg); }
  .side .rail-nav a.is-active .i { color: var(--accent-ink); }
  .side-c { font: 600 11.5px/1 var(--font-ui); color: var(--muted); white-space: nowrap; }
  .side .liquid-active, .side .liquid-hover { border-radius: 14px; }
  .side .liquid-active { background: linear-gradient(90deg, color-mix(in srgb, var(--btn-a) 24%, transparent), color-mix(in srgb, var(--btn-b) 12%, transparent)); box-shadow: inset 0 0 0 1px var(--accent-line), inset 0 1px 0 var(--hi); }
  .side .liquid-active::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); }
  .side .liquid[data-liquid="y"] .liquid-active.is-moving { transform: scale(0.97, 0.9); }
  .side-meet { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 12px 2px; border-top: 1px solid var(--stroke); color: var(--muted); }
  .side-meet .i { width: 19px; height: 19px; }
  .side-meet small { display: block; font-size: 11.5px; line-height: 1.3; }
  .side-meet b { display: block; font-size: 13.5px; line-height: 1.3; color: var(--fg); }
  .side-foot { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--stroke); }
  .side-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px; border: 0; border-radius: 12px; background: none; color: var(--fg-2); font: 600 13.5px/1.25 var(--font-ui); text-align: left; text-decoration: none; cursor: pointer; transition: background 0.25s, color 0.25s; }
  .side-row .i { width: 18px; height: 18px; color: var(--muted); }
  .side-row:hover { background: var(--accent-soft); color: var(--fg); }
  .side-me { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 8px; padding: 10px; border-radius: 16px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--bg) 38%, transparent); }
  .side-me .avatar { width: 32px; height: 32px; font-size: 11px; }
  .side-me-n { min-width: 0; font: 700 13px/1.2 var(--font-ui); }
  .side-me-n small { display: block; margin-top: 2px; font: 500 11.5px/1.2 var(--font-ui); color: var(--muted); }
  .side-prefs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  /* compact rectangular toggles: same sliding knob, no circles */
  .side-prefs .lang-toggle, .side-prefs .theme-toggle { display: flex; width: 100%; padding: 3px; gap: 2px; border-radius: 11px; box-shadow: none; }
  .side-prefs .lang-toggle button, .side-prefs .theme-toggle span { flex: 1; width: auto; height: 28px; border-radius: 8px; }
  .side-prefs .lang-toggle::before, .side-prefs .theme-toggle::before { top: 3px; left: 3px; width: calc(50% - 4px); height: 28px; border-radius: 8px; box-shadow: 0 3px 8px -4px rgba(0, 0, 0, 0.5); }
  .side-prefs .lang-toggle[data-now="pt"]::before, .side-prefs .theme-toggle[data-mode="dark"]::before { transform: translateX(calc(100% + 2px)); }
  .side-prefs .theme-toggle span .i { width: 15px; height: 15px; }
}
/* wide screens: the search context lives in the sidebar, so the header keeps only the report status */
@media (min-width: 1281px) {
  .app-top .asg, .app-top .meet, .app-top .me { display: none; }
  .app-top { justify-content: flex-end; min-height: 0; padding-bottom: 14px; }
}
/* tablets: the same sidebar folds to icons (rows, not bubbles); context goes back to the header */
@media (min-width: 861px) and (max-width: 1280px) {
  .view-app { grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; }
  .side { padding: 14px 8px 10px; gap: 10px; border-radius: 22px; }
  .side-brand { justify-content: center; padding: 4px 0; }
  .side-brand .wm, .side-search, .side-meet, .side-l, .side-c, .side-row span, .side-me-n { display: none; }
  .side .rail-nav a, .side-row { grid-template-columns: 1fr; justify-items: center; padding: 12px 0; }
  .side .liquid-active::before { top: 12px; bottom: 12px; }
  .side-me { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 8px 4px; border-radius: 14px; }
  .side-prefs { grid-template-columns: 1fr; width: 100%; }
  .side-prefs .lang-toggle, .side-prefs .theme-toggle { flex-direction: column; }
  .side-prefs .lang-toggle button, .side-prefs .theme-toggle span { width: 100%; flex: none; height: 26px; }
  .side-prefs .lang-toggle::before, .side-prefs .theme-toggle::before { width: calc(100% - 6px); height: 26px; }
  .side-prefs .lang-toggle[data-now="pt"]::before, .side-prefs .theme-toggle[data-mode="dark"]::before { transform: translateY(28px); }
}

/* ======================= v31: hero on tablets and phones ======================= */
/* the desktop card cluster sits in a second grid column; below 1101px there is one column, so it moves under the copy */
@media (max-width: 1100px) {
  .hero-v .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-floats { grid-column: 1; grid-row: auto; padding: 0; margin-top: 6px; animation: none; max-width: 640px; }
}
@media (max-width: 760px) {
  .hero-v .hero { row-gap: 0; padding-top: 18px; }
  .hero-head { display: grid; justify-items: start; gap: 0; }
  .announce { max-width: 100%; gap: 8px; padding: 4px 14px 4px 4px; }
  .announce span:not(.announce-tag) { min-width: 0; white-space: normal; line-height: 1.25; font-size: 13px; }
  .hero-title { font-size: clamp(34px, 10.4vw, 46px); line-height: 0.98; margin-top: 18px; }
  .hero-title .line { white-space: normal; }
  .hero-v .hero-copy .lede { font-size: 16.5px; margin-top: 14px; }
  .hero-v .hero-copy .cta-row { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero-v .hero-copy .cta-row .btn { width: 100%; justify-content: center; }
  /* one card is enough on a phone: the mandate that changed */
  .hero-floats { grid-template-columns: minmax(0, 1fr); margin-top: 26px; max-width: none; }
  .hf-cand, .hf-q { display: none; }
  .hf-brief { padding: 18px 18px; }
  .hf .hf-title { font-size: 22px; }
}