:root {
  color-scheme: dark;
  --chrome: #171a1c;
  --sidebar: #1d2022;
  --workspace: #292d30;
  --panel: #3b4145;
  --panel-raised: #3a4248;
  --panel-dark: #202426;
  --line: #535b60;
  --line-soft: rgba(255,255,255,.1);
  --text: #f5f7f8;
  --muted: #aeb7be;
  --subtle: #7f8990;
  --blue: #287fe5;
  --blue-bright: #4ea1ff;
  --blue-soft: #afc8e2;
  --green: #46ca72;
  --danger: #ff625b;
  --sidebar-width: 300px;
  --title-height: 48px;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body {
  margin: 0;
  background: #080a0c;
  color: var(--text);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; border-radius: 7px; background: white; color: #111; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.app-shell {
  width: min(100%, 1920px);
  min-height: 100dvh;
  margin: auto;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0,1fr);
  grid-template-rows: var(--title-height) minmax(0,1fr);
  overflow: hidden;
  background: var(--workspace);
  box-shadow: 0 0 90px rgba(0,0,0,.75);
}

.title-bar {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--chrome);
  border-bottom: 1px solid rgba(255,255,255,.04);
  user-select: none;
}
.title-brand { height: 100%; padding: 0 18px; display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.title-brand img { width: 22px; height: 22px; border-radius: 5px; }
.title-brand strong { font-size: 14px; font-weight: 650; }
.title-brand span { color: #c1c6ca; font-size: 13px; }
.window-controls { height: 100%; display: flex; }
.window-controls i { position: relative; width: 48px; height: 100%; }
.window-controls i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; background: #d2d6d8; transform: translate(-50%,-50%); }
.window-controls i:nth-child(2)::after { height: 8px; border: 1px solid #d2d6d8; background: transparent; }
.window-controls i:nth-child(3)::before, .window-controls i:nth-child(3)::after { width: 11px; transform: translate(-50%,-50%) rotate(45deg); }
.window-controls i:nth-child(3)::before { content: ""; position: absolute; top: 50%; left: 50%; height: 1px; background: #d2d6d8; transform: translate(-50%,-50%) rotate(-45deg); }

.sidebar {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
}
.primary-nav, .secondary-nav, .sidebar-bottom { display: grid; gap: 3px; }
.sidebar nav a {
  min-height: 48px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #eef1f3;
  text-decoration: none;
  font-size: 16px;
  transition: background .15s ease, border-color .15s ease;
}
.sidebar nav a:hover { background: rgba(255,255,255,.055); }
.sidebar nav a[aria-current="page"] { background: #353c41; border-left-color: var(--blue-bright); }
.sidebar nav a[aria-current="page"] .nav-icon { color: var(--blue-bright); }
.nav-icon { width: 22px; color: #d4dade; text-align: center; font-size: 18px; }
.health-dot { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(70,202,114,.5); border-radius: 50%; background: rgba(70,202,114,.14); }
.health-dot::after { content: "✓"; color: var(--green); font-size: 11px; font-weight: 800; }
.nav-label { margin: 23px 8px 9px; color: #aeb6bc; font-size: 13px; }
.sidebar-card { margin: 22px 5px 0; padding: 15px 13px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-dark); }
.sidebar-card-icon { flex: 0 0 39px; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(85,168,255,.32); border-radius: 9px; color: var(--blue-bright); background: rgba(46,136,231,.1); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.sidebar-card strong, .sidebar-card small { display: block; }
.sidebar-card strong { font-size: 12px; }
.sidebar-card small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.sidebar-card > p { grid-column: 1/-1; margin: 1px 0 0; color: var(--subtle); font-size: 9px; }
.sidebar-card-links { grid-column: 1/-1; padding-top: 9px; display: flex; gap: 13px; border-top: 1px solid var(--line); }
.sidebar-card-links a { color: var(--blue-bright); text-decoration: none; font-size: 9px; font-weight: 650; }
.sidebar-card-links a:hover { color: white; }
.sidebar-bottom { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line); }

.workspace {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  height: calc(100dvh - var(--title-height));
  overflow: hidden;
  display: grid;
  background:
    radial-gradient(circle at 92% 0, rgba(38,130,229,.1), transparent 35rem),
    var(--workspace);
}
.workspace-page {
  grid-area: 1 / 1;
  height: 100%;
  overflow-y: auto;
  padding: clamp(26px, 3vw, 48px) clamp(24px, 3.2vw, 56px) 42px;
  scrollbar-color: #687178 transparent;
  scrollbar-width: thin;
}
.workspace-page[hidden] { display: none; }
.workspace-page.is-active { z-index: 1; }

.page-heading { min-height: 86px; margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; }
.section-label { margin: 0 0 7px; color: var(--muted); font-size: 14px; }
h1, h2, p { text-wrap: pretty; }
h1 { margin: 0; font-size: clamp(31px,3.1vw,48px); line-height: 1.08; font-weight: 650; letter-spacing: -.035em; }
h1 strong { color: var(--blue-bright); font-weight: 660; }
.heading-summary { max-width: 430px; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.panel { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }

.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.button { min-height: 43px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 1px solid transparent; border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 650; transition: filter .15s ease, background .15s ease, border-color .15s ease; }
.button-primary { color: white; border-color: #287fe5; background: #287fe5; box-shadow: inset 0 1px rgba(255,255,255,.15); }
.button-primary:hover { filter: brightness(1.1); }
.button-secondary { color: #f0f3f5; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.065); }
.button-secondary:hover { border-color: rgba(85,168,255,.48); background: rgba(46,136,231,.1); }
.desktop-action { flex: 0 0 auto; }

.overview-grid { display: grid; gap: 18px; }
.hero-card { min-height: 415px; display: grid; grid-template-columns: minmax(340px,.78fr) minmax(520px,1.22fr); overflow: hidden; border: 1px solid #4a5359; border-radius: 13px; background: linear-gradient(120deg,#363d42 0,#30363b 44%,#24292d 44%); box-shadow: 0 24px 55px rgba(0,0,0,.2); }
.hero-copy { padding: clamp(30px,3.2vw,52px); display: flex; flex-direction: column; justify-content: center; }
.status-pill { width: fit-content; padding: 7px 10px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(85,168,255,.25); border-radius: 20px; color: var(--blue-soft); background: rgba(46,136,231,.09); font-size: 11px; font-weight: 700; }
.status-pill i, .page-status i, .app-shot figcaption i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(70,202,114,.6); }
.hero-copy h2 { margin: 22px 0 15px; font-size: clamp(31px,3vw,48px); line-height: 1.05; letter-spacing: -.035em; }
.hero-copy > p { max-width: 570px; margin: 0 0 25px; color: #c0c8ce; font-size: 15px; line-height: 1.65; }
.hero-screen { min-width: 0; padding: 0; border: 0; background: #15191d; cursor: zoom-in; overflow: hidden; }
.hero-screen img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: left center; transition: transform .45s ease, filter .2s ease; }
.hero-screen:hover img { transform: scale(1.018); filter: saturate(1.06); }

.quick-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.quick-card { min-height: 105px; padding: 18px; display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.card-icon { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(85,168,255,.3); border-radius: 8px; color: var(--blue-bright); background: rgba(46,136,231,.09); font-size: 18px; }
.quick-card strong { display: block; margin: 1px 0 6px; font-size: 13px; }
.quick-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.trust-strip { margin-top: 18px; display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); }
.trust-strip > div { min-height: 76px; padding: 15px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-content: center; border-right: 1px solid var(--line); }
.trust-strip > div:last-child { border: 0; }
.trust-strip span { grid-row: 1/3; align-self: center; color: var(--blue-bright); font-size: 10px; letter-spacing: .12em; }
.trust-strip strong { font-size: 12px; }
.trust-strip small { margin-top: 3px; color: var(--muted); font-size: 10px; }

.page-status { flex: 0 0 auto; margin-top: 16px; padding: 9px 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(70,202,114,.25); border-radius: 20px; color: #b9e9c9; background: rgba(70,202,114,.07); font-size: 11px; }
.doctor-layout { display: grid; grid-template-columns: minmax(340px,.67fr) minmax(560px,1.33fr); gap: 18px; }
.doctor-intro { padding: clamp(26px,2.7vw,42px); }
.doctor-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.doctor-mark { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(70,202,114,.3); border-radius: 50%; color: var(--green); background: rgba(70,202,114,.09); font-size: 25px; }
.doctor-intro h2 { margin: 0 0 5px; font-size: clamp(25px,2.3vw,36px); line-height: 1.15; letter-spacing: -.03em; }
.doctor-summary p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.doctor-ready { padding: 6px 9px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(70,202,114,.32); border-radius: 18px; color: #b9eac7; background: rgba(70,202,114,.08); font-size: 10px; }
.doctor-ready i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.doctor-score { margin-top: 23px; padding: 17px 18px; border: 1px solid #3e965b; border-radius: 10px; background: #293f34; }
.doctor-score span, .doctor-score strong, .doctor-score small { display: block; }
.doctor-score span { color: #8fd7a7; font-size: 9px; font-weight: 750; letter-spacing: .11em; }
.doctor-score strong { margin: 7px 0 4px; font-size: 15px; }
.doctor-score small { color: #b9d5c2; font-size: 10px; line-height: 1.4; }
.check-list { margin: 29px 0 0; padding: 0; display: grid; gap: 17px; list-style: none; }
.doctor-features { grid-template-columns: 1fr 1fr; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list li > span { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: rgba(70,202,114,.1); font-size: 11px; font-weight: 800; }
.check-list strong, .check-list small { display: block; }
.check-list strong { font-size: 13px; }
.check-list small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.sample-report-button { margin-top: 23px; cursor: pointer; }
.app-shot { min-width: 0; margin: 0; padding: 14px; align-self: start; }
.app-shot button { width: 100%; padding: 0; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #15191c; cursor: zoom-in; }
.app-shot img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.app-shot button:hover img { transform: scale(1.012); }
.app-shot figcaption { padding: 13px 3px 1px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.app-shot figcaption span { display: flex; align-items: center; gap: 7px; color: #a9d7b9; font-size: 10px; }
.app-shot figcaption strong { font-size: 12px; }
.app-shot figcaption small { color: var(--subtle); font-size: 10px; }
.privacy-note { margin-top: 18px; padding: 18px 20px; display: flex; gap: 14px; border: 1px solid rgba(85,168,255,.42); border-radius: 10px; color: var(--blue-soft); background: rgba(30,112,196,.13); }
.privacy-note > span { font-size: 19px; }
.privacy-note strong { font-size: 13px; }
.privacy-note p { margin: 4px 0 0; color: #b7cce0; font-size: 11px; line-height: 1.5; }

.comparison { overflow: hidden; }
.comparison-row { min-height: 59px; padding: 0 26px; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-bottom: 1px solid var(--line); }
.comparison-row:last-child { border-bottom: 0; }
.comparison-row span, .comparison-row strong { padding: 0 20px; display: flex; align-items: center; font-size: 13px; }
.comparison-row span { color: #aab2b8; }
.comparison-row strong { border-left: 1px solid rgba(85,168,255,.25); color: #f0f7ff; background: linear-gradient(90deg,rgba(46,136,231,.1),transparent); font-weight: 620; }
.comparison-head { min-height: 44px; background: var(--panel-dark); }
.comparison-head span, .comparison-head strong { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.comparison-head strong { color: var(--blue-bright); }
.subheading { margin: 30px 0 14px; font-size: 21px; letter-spacing: -.02em; }
.legal-page { padding-bottom: 56px; }
.legal-page > .page-heading,
.legal-summary,
.legal-content,
.support-actions,
.warning-note,
.contact-form,
.form-status {
  width: min(100%, 950px);
  margin-inline: auto;
}
.legal-summary { margin-top: 0; margin-bottom: 18px; }
.legal-content { padding: clamp(25px,3vw,42px); }
.legal-content section + section { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-content h2, .support-card h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.25; letter-spacing: -.015em; }
.legal-content p, .legal-content li, .support-card p { color: #c2c9ce; font-size: 14px; line-height: 1.7; }
.legal-content p { margin: 0; }
.legal-content p + p { margin-top: 12px; }
.legal-content ol { margin: 0; padding-left: 22px; }
.legal-content li + li { margin-top: 9px; }
.legal-content a { color: var(--blue-bright); }
.support-actions { margin-bottom: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.support-card { min-height: 190px; padding: 24px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 16px; }
.support-card p { margin: 0 0 18px; }
.warning-note { margin-bottom: 18px; padding: 18px 20px; display: flex; gap: 14px; border: 1px solid rgba(255,98,91,.45); border-radius: 10px; background: rgba(180,45,40,.13); }
.warning-note > span { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--danger); font-weight: 800; }
.warning-note strong { font-size: 13px; }
.warning-note p { margin: 4px 0 0; color: #d7bec0; font-size: 11px; line-height: 1.5; }

/* Reviewer kit: a self-contained media briefing inside the VaultKind shell. */
.review-page { scroll-behavior: smooth; }
.review-page > .page-heading,
.review-jumpbar,
.review-page > .review-section,
.review-hero,
.review-contact,
.review-footer {
  width: min(100%, 1120px);
  margin-inline: auto;
}
.review-heading-status { width: min(100%, 340px); flex: 0 0 340px; display: flex; align-items: flex-end; flex-direction: column; }
.review-heading-status .page-status { margin-top: 6px; }
.review-heading-status p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; text-align: right; }
.review-jumpbar { margin-bottom: 18px; padding: 10px; display: flex; flex-wrap: wrap; gap: 5px; background: var(--panel-dark); }
.review-jumpbar a { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 650; }
.review-jumpbar a:hover { color: white; background: rgba(255,255,255,.07); }
.review-hero { min-height: 330px; display: grid; grid-template-columns: minmax(330px,.82fr) minmax(470px,1.18fr); overflow: hidden; background: linear-gradient(120deg,#3b4247 0,#32383d 43%,#202528 43%); }
.review-hero-copy { padding: clamp(26px,3vw,42px); align-self: center; }
.review-hero-copy h2 { margin: 18px 0 12px; font-size: clamp(28px,2.7vw,40px); line-height: 1.08; letter-spacing: -.035em; }
.review-hero-copy > p { margin: 0 0 22px; color: #c2c9ce; font-size: 14px; line-height: 1.65; }
.review-hero-image { min-width: 0; display: block; overflow: hidden; background: #131719; }
.review-hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: left center; transition: transform .35s ease; }
.review-hero-image:hover img { transform: scale(1.015); }
.review-section { padding-top: 32px; scroll-margin-top: 20px; }
.review-section-heading { margin-bottom: 13px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.review-section-heading h2 { margin: 0; font-size: 23px; line-height: 1.2; letter-spacing: -.02em; }
.review-section-heading > a { color: var(--blue-bright); text-decoration: none; font-size: 11px; font-weight: 650; }
.review-section-heading > p { max-width: 410px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: right; }
.fact-grid { margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(3,1fr); }
.fact-grid > div { min-height: 80px; padding: 15px 17px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.fact-grid > div:nth-child(3n) { border-right: 0; }
.fact-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
.fact-grid dt { margin-bottom: 7px; color: var(--subtle); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.fact-grid dd { margin: 0; color: #f0f3f5; font-size: 13px; line-height: 1.4; }
.asset-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.asset-card { min-width: 0; overflow: hidden; }
.asset-preview { height: 170px; padding: 22px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: #15191c; }
.asset-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.asset-preview-icon img { width: 110px; height: 110px; }
.asset-card > div:last-child { padding: 18px; }
.asset-card h3, .resource-card h3 { margin: 0 0 7px; font-size: 15px; }
.asset-card p, .resource-card p { margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.review-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.screenshot-card { min-width: 0; margin: 0; padding: 9px; overflow: hidden; }
.screenshot-featured { grid-column: 1/-1; }
.screenshot-card > a:first-child { display: block; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 7px; background: #15191c; }
.screenshot-card img { width: 100%; height: auto; display: block; transition: transform .35s ease; }
.screenshot-card > a:hover img { transform: scale(1.01); }
.screenshot-card figcaption { padding: 11px 5px 3px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.screenshot-card figcaption strong, .screenshot-card figcaption small { display: block; }
.screenshot-card figcaption strong { font-size: 12px; }
.screenshot-card figcaption small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.screenshot-card figcaption > a { color: var(--blue-bright); text-decoration: none; font-size: 10px; font-weight: 650; }
.resource-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.resource-card { min-height: 235px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; }
.resource-card > span { width: 36px; height: 36px; margin-bottom: 18px; display: grid; place-items: center; border: 1px solid rgba(85,168,255,.3); border-radius: 8px; color: var(--blue-bright); background: rgba(46,136,231,.09); font-size: 18px; }
.resource-card p { flex: 1; }
.resource-card .button { width: 100%; padding-inline: 10px; }
.reviewer-status { width: 100%; }
.review-affiliation { margin-top: 12px; }
.review-faq { overflow: hidden; }
.review-faq details { border-bottom: 1px solid var(--line); }
.review-faq details:last-child { border-bottom: 0; }
.review-faq summary { min-height: 58px; padding: 16px 21px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-size: 13px; font-weight: 650; list-style: none; }
.review-faq summary::-webkit-details-marker { display: none; }
.review-faq summary::after { content: "+"; color: var(--blue-bright); font-size: 19px; font-weight: 400; }
.review-faq details[open] summary::after { content: "−"; }
.review-faq details[open] summary { background: rgba(46,136,231,.07); }
.review-faq details p { margin: 0; padding: 0 56px 20px 21px; color: #c2c9ce; font-size: 12px; line-height: 1.65; }
.review-contact { margin-top: 32px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: linear-gradient(105deg,rgba(46,136,231,.13),var(--panel)); }
.review-contact h2 { margin: 0 0 8px; font-size: 22px; }
.review-contact p:not(.section-label) { max-width: 650px; margin: 0; color: #c2c9ce; font-size: 12px; line-height: 1.6; }
.review-contact .button-row { flex: 0 0 auto; }
.contact-form { padding: clamp(24px,3vw,38px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field + .form-field,
.form-grid + .form-field { margin-top: 20px; }
.form-field + .form-grid,
.form-grid + .form-grid { margin-top: 20px; }
.form-grid .form-field + .form-field { margin-top: 0; }
.form-field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 650; }
.optional-label { margin-left: 5px; color: var(--subtle); font-size: 10px; font-weight: 500; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #626b71;
  border-radius: 7px;
  outline: 0;
  color: var(--text);
  background: var(--panel-dark);
  font: inherit;
}
.form-field textarea { min-height: 180px; resize: vertical; line-height: 1.55; }
.form-field select { color-scheme: dark; }
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: #7b858c; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(78,161,255,.24); }
.form-field small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.form-submit { margin-top: 24px; display: flex; align-items: center; gap: 20px; }
.form-submit p { max-width: 570px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.form-warning { width: 100%; margin-top: 24px; margin-bottom: 0; }
.contact-form + .legal-summary { margin-top: 18px; }
.form-status { margin-bottom: 18px; padding: 15px 18px; border: 1px solid rgba(255,98,91,.5); border-radius: 9px; color: #ffd2cf; background: rgba(180,45,40,.16); font-size: 13px; }
.form-status.is-success { border-color: rgba(70,202,114,.48); color: #c7f3d5; background: rgba(34,132,67,.18); }
.form-trap { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.workflow-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; list-style: none; }
.workflow-grid li { min-height: 167px; padding: 18px; display: grid; grid-template-columns: 1fr auto; align-content: start; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.workflow-grid li > span { color: var(--blue-bright); font-size: 10px; }
.workflow-grid i { width: 34px; height: 34px; grid-row: 1/3; grid-column: 2; display: grid; place-items: center; border: 1px solid rgba(85,168,255,.28); border-radius: 8px; color: var(--blue-bright); background: rgba(46,136,231,.08); font-style: normal; }
.workflow-grid strong { margin: 25px 0 7px; grid-column: 1/-1; font-size: 13px; }
.workflow-grid p { margin: 0; grid-column: 1/-1; color: var(--muted); font-size: 11px; line-height: 1.45; }
.affiliation-note { margin: 14px 0 0; color: var(--subtle); font-size: 10px; }

.learning-layout { min-height: 575px; display: grid; grid-template-columns: 285px minmax(0,1fr); gap: 18px; }
.topic-list { max-height: 650px; padding: 14px; align-self: stretch; overflow-y: auto; scrollbar-width: thin; }
.topic-list > p { margin: 5px 8px 13px; color: var(--muted); font-size: 12px; }
.topic-list > button { width: 100%; min-height: 67px; padding: 10px; display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 8px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.topic-list > button:hover { background: rgba(255,255,255,.045); }
.topic-list > button.is-selected { border-color: rgba(85,168,255,.34); background: rgba(46,136,231,.13); }
.topic-list > button > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: var(--blue-bright); background: rgba(46,136,231,.1); }
.topic-list strong, .topic-list small { display: block; }
.topic-list strong { font-size: 12px; }
.topic-list small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.topic-foot { margin-top: 18px; padding: 17px 10px 5px; border-top: 1px solid var(--line); }
.topic-foot span, .topic-foot strong { display: block; }
.topic-foot span { color: var(--blue-bright); font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.topic-foot strong { margin-top: 7px; font-size: 11px; line-height: 1.4; }
.learning-article { min-width: 0; padding: clamp(24px,3vw,40px); align-self: start; }
.learning-article > header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 15px; }
.learning-article-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 25px; color: var(--blue-bright); background: #35444d; font-size: 22px; }
.learning-article header p { margin: 0 0 5px; color: var(--blue-bright); font-size: 9px; font-weight: 750; letter-spacing: .11em; }
.learning-article h2 { margin: 0 0 5px; font-size: 23px; letter-spacing: -.02em; }
.learning-article header div > span { color: var(--blue-soft); font-size: 12px; line-height: 1.45; }
.learning-article-sections { margin-top: 25px; display: grid; gap: 9px; }
.learning-article-sections section { padding: 15px 17px; border: 1px solid var(--line); border-radius: 9px; background: #2d3438; }
.learning-article-sections h3 { margin: 0 0 5px; font-size: 13px; }
.learning-article-sections p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.learning-tip { margin-top: 13px; padding: 13px 15px; display: flex; gap: 11px; border: 1px solid #367dc2; border-radius: 9px; color: var(--blue-soft); background: #293a4a; }
.learning-tip p { margin: 0; font-size: 11px; line-height: 1.45; }
.learning-tip strong { margin-right: 4px; color: #e2f0ff; }
.learning-sample { margin-top: 15px; cursor: pointer; }

.development-grid { display: grid; grid-template-columns: minmax(430px,1.15fr) minmax(330px,.85fr); gap: 18px; }
.release-card { min-height: 465px; padding: clamp(30px,4vw,58px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: radial-gradient(circle at 100% 0,rgba(46,136,231,.2),transparent 27rem),linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),var(--panel); }
.release-card > img { width: 72px; height: 72px; margin-bottom: 22px; border-radius: 15px; box-shadow: 0 14px 35px rgba(0,0,0,.3); }
.release-card h2 { max-width: 600px; margin: 19px 0 12px; font-size: clamp(30px,3.1vw,46px); line-height: 1.08; letter-spacing: -.035em; }
.release-card > p { max-width: 650px; margin: 0 0 26px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.development-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-card { min-height: 210px; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.detail-card span { color: var(--blue-bright); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.detail-card strong { display: block; margin: 25px 0 9px; font-size: 15px; }
.detail-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.workspace-footer { margin-top: 24px; padding: 19px 2px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 24px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 10px; }
.workspace-footer a { color: var(--muted); text-decoration: none; }
.workspace-footer a:hover { color: white; }

.lightbox { width: min(96vw,1650px); max-width: none; padding: 46px 12px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; background: #111518; color: white; box-shadow: 0 45px 120px #000; }
.lightbox::backdrop { background: rgba(0,0,0,.88); backdrop-filter: blur(7px); }
.lightbox img { width: 100%; height: auto; display: block; border-radius: 7px; }
.lightbox-close { position: absolute; top: 12px; right: 14px; border: 0; color: #c2c8cc; background: transparent; cursor: pointer; font-size: 12px; }

a:focus-visible, button:focus-visible { outline: 2px solid #f5d43f; outline-offset: 3px; }

@media (min-width: 1921px) {
  body { padding: 24px; }
  .app-shell { min-height: calc(100dvh - 48px); height: calc(100dvh - 48px); border: 1px solid #343a3f; border-radius: 11px; }
  .workspace { height: calc(100dvh - 48px - var(--title-height)); }
}

/* The desktop workspace uses compact spacing at every desktop resolution.
   Windows' Accessibility Text Size can enlarge text without changing the
   reported viewport, so this cannot depend on a width or height breakpoint. */
@media (min-width: 821px) {
  :root { --sidebar-width: 225px; --title-height: 42px; }
  .title-brand { padding-inline: 14px; }
  .window-controls i { width: 42px; }
  .sidebar { padding: 7px 9px 9px; }
  .sidebar nav a { min-height: 40px; padding-inline: 10px; grid-template-columns: 22px 1fr auto; gap: 6px; font-size: 14px; }
  .nav-icon { width: 19px; font-size: 16px; }
  .health-dot { width: 19px; height: 19px; }
  .nav-label { margin: 15px 6px 6px; font-size: 11px; }
  .sidebar-card { margin-top: 14px; padding: 11px 9px; }
  .sidebar-card-icon { flex-basis: 32px; width: 32px; height: 32px; }
  .sidebar-card strong { font-size: 11px; }
  .sidebar-card small { font-size: 9px; }
  .sidebar-card > p, .sidebar-card-links a { font-size: 8px; }
  .workspace-page { padding: 20px 26px 28px; }
  .page-heading { min-height: 62px; margin-bottom: 15px; }
  .section-label { margin-bottom: 5px; font-size: 12px; }
  h1 { font-size: clamp(28px,2.55vw,38px); }
  .heading-summary { max-width: 380px; margin-top: 10px; font-size: 13px; line-height: 1.45; }
  .desktop-action { min-height: 38px; margin-top: 3px; }
  .hero-card { min-height: 315px; grid-template-columns: minmax(285px,.72fr) minmax(420px,1.28fr); }
  .hero-copy { padding: 25px 28px; }
  .status-pill { padding: 5px 8px; font-size: 9px; }
  .hero-copy h2 { margin: 14px 0 10px; font-size: clamp(28px,2.5vw,37px); }
  .hero-copy > p { margin-bottom: 17px; font-size: 12px; line-height: 1.5; }
  .button { min-height: 37px; padding-inline: 13px; font-size: 11px; }
  .overview-grid { gap: 11px; }
  .quick-grid { gap: 8px; }
  .quick-card { min-height: 78px; padding: 12px; gap: 9px; }
  .card-icon { flex-basis: 30px; width: 30px; height: 30px; font-size: 15px; }
  .quick-card strong { margin-bottom: 3px; font-size: 11px; }
  .quick-card p { font-size: 9px; }
  .trust-strip { margin-top: 11px; }
  .trust-strip > div { min-height: 57px; padding: 9px 13px; }
  .trust-strip strong { font-size: 10px; }
  .trust-strip small { font-size: 9px; }
  .page-status { margin-top: 6px; padding: 7px 10px; }
  .doctor-layout { grid-template-columns: minmax(300px,.62fr) minmax(460px,1.38fr); gap: 11px; }
  .doctor-intro { padding: 24px; }
  .doctor-summary { gap: 11px; }
  .doctor-mark { width: 43px; height: 43px; font-size: 20px; }
  .doctor-intro h2 { font-size: clamp(23px,2vw,31px); }
  .doctor-score { margin-top: 15px; padding: 12px 14px; }
  .check-list { margin-top: 18px; gap: 10px; }
  .check-list li > span { flex-basis: 20px; width: 20px; height: 20px; }
  .check-list strong { font-size: 11px; }
  .check-list small { font-size: 9px; }
  .app-shot { padding: 10px; }
  .app-shot figcaption { padding-top: 9px; }
  .privacy-note { margin-top: 11px; padding: 12px 14px; }
  .comparison-row { min-height: 46px; }
  .comparison-row span, .comparison-row strong { font-size: 11px; }
  .subheading { margin: 20px 0 9px; font-size: 17px; }
  .workflow-grid { gap: 8px; }
  .workflow-grid li { min-height: 127px; padding: 13px; }
  .workflow-grid i { width: 29px; height: 29px; }
  .workflow-grid strong { margin: 15px 0 4px; font-size: 11px; }
  .workflow-grid p { font-size: 9px; }
  .learning-layout { min-height: 430px; grid-template-columns: 235px minmax(0,1fr); gap: 11px; }
  .topic-list { padding: 9px; }
  .topic-list > p { margin-bottom: 7px; }
  .topic-list > button { min-height: 55px; padding: 7px; grid-template-columns: 30px 1fr; gap: 7px; }
  .topic-list > button > span { width: 28px; height: 28px; }
  .topic-list strong { font-size: 10px; }
  .topic-list small { margin-top: 2px; font-size: 8px; }
  .topic-foot { margin-top: 10px; padding-top: 11px; }
  .learning-article { padding: 22px; }
  .learning-article-sections { margin-top: 17px; }
  .release-card { min-height: 360px; padding: 31px; }
  .release-card > img { width: 58px; height: 58px; margin-bottom: 15px; }
  .release-card h2 { margin: 13px 0 8px; font-size: clamp(27px,2.6vw,38px); }
  .release-card > p { margin-bottom: 18px; font-size: 12px; line-height: 1.5; }
  .detail-card { min-height: 162px; padding: 17px; }
  .detail-card strong { margin: 16px 0 6px; font-size: 13px; }
  .detail-card p { font-size: 9px; }
}

@media (max-width: 980px) {
  :root { --sidebar-width: 238px; }
  .hero-card { grid-template-columns: 1fr; }
  .hero-screen { max-height: 470px; }
  .hero-screen img { height: auto; object-fit: contain; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .doctor-layout { grid-template-columns: 1fr; }
  .doctor-intro { display: block; }
  .check-list { grid-template-columns: 1fr 1fr; }
  .development-grid { grid-template-columns: 1fr; }
  .development-details { grid-template-columns: 1fr 1fr; }
  .detail-card { min-height: 165px; }
  .review-hero { grid-template-columns: 1fr; }
  .review-hero-image img { height: auto; object-fit: contain; }
  .resource-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  :root { --title-height: 44px; }
  .app-shell { display: block; overflow: visible; }
  .title-bar { height: var(--title-height); position: sticky; top: 0; z-index: 50; }
  .title-brand span, .window-controls { display: none; }
  .sidebar { position: sticky; z-index: 45; top: var(--title-height); width: 100%; min-height: 0; padding: 7px 10px; display: block; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .primary-nav, .secondary-nav, .sidebar-bottom { display: inline-flex; gap: 4px; }
  .sidebar nav a { min-height: 42px; padding: 0 11px; display: inline-flex; font-size: 13px; }
  .sidebar nav a[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--blue-bright); }
  .sidebar nav a[href^="mailto"], .health-dot, .nav-label, .sidebar-card { display: none; }
  .sidebar-bottom { margin: 0; padding: 0; border: 0; }
  .workspace { height: auto; overflow: visible; }
  .workspace-page { height: auto; min-height: calc(100dvh - 102px); overflow: visible; padding: 26px 18px 36px; }
  .page-heading { min-height: 0; margin-bottom: 22px; }
  .desktop-action, .page-status { display: none; }
  .review-heading-status { width: 100%; flex: 1 1 100%; align-items: flex-start; }
  .review-heading-status p { margin-top: 12px; text-align: left; }
  .hero-card { grid-template-columns: 1fr; }
  .quick-grid, .trust-strip, .workflow-grid, .development-details { grid-template-columns: 1fr 1fr; }
  .trust-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-strip > div:last-child { grid-column: 1/-1; border-bottom: 0; }
  .doctor-intro { display: block; }
  .learning-layout { grid-template-columns: 1fr; }
  .support-actions { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .form-field + .form-field { margin-top: 20px; }
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .fact-grid > div:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .fact-grid > div:nth-child(2n) { border-right: 0; }
  .fact-grid > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .fact-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .asset-grid { grid-template-columns: 1fr; }
  .asset-card { display: grid; grid-template-columns: minmax(210px,.75fr) 1fr; }
  .asset-preview { height: 190px; border-right: 1px solid var(--line); border-bottom: 0; }
  .review-contact { align-items: flex-start; flex-direction: column; }
  .topic-list { display: grid; grid-template-columns: repeat(3,1fr); }
  .topic-list > p, .topic-foot { grid-column: 1/-1; }
  .topic-list > button { min-height: 74px; }
}

@media (max-width: 560px) {
  .title-brand { padding-left: 13px; }
  h1 { font-size: 31px; }
  .page-heading { display: block; }
  .heading-summary { margin-top: 12px; }
  .hero-copy { padding: 26px 21px; }
  .hero-copy h2 { font-size: 30px; }
  .quick-grid, .trust-strip, .check-list, .workflow-grid, .development-details { grid-template-columns: 1fr; }
  .doctor-summary { grid-template-columns: auto 1fr; }
  .doctor-ready { grid-column: 2; justify-self: start; }
  .trust-strip > div:last-child { grid-column: auto; }
  .comparison-row { padding: 0 7px; }
  .comparison-row span, .comparison-row strong { padding: 13px 9px; font-size: 11px; }
  .learning-layout { min-height: 0; }
  .topic-list { grid-template-columns: 1fr; }
  .learning-article { padding: 19px; }
  .app-shot figcaption { display: block; }
  .app-shot figcaption small { display: none; }
  .release-card { min-height: 430px; padding: 30px 23px; }
  .form-submit { align-items: stretch; flex-direction: column; }
  .form-submit .button { width: 100%; }
  .review-jumpbar { flex-wrap: nowrap; overflow-x: auto; }
  .review-section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .review-section-heading > p { text-align: left; }
  .fact-grid, .review-gallery, .resource-grid { grid-template-columns: 1fr; }
  .fact-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--line-soft) !important; }
  .fact-grid > div:last-child { border-bottom: 0 !important; }
  .asset-card { display: block; }
  .asset-preview { height: 175px; border-right: 0; border-bottom: 1px solid var(--line); }
  .screenshot-featured { grid-column: auto; }
  .review-contact .button-row, .review-contact .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}