/* ===== v2 additions on top of styles.css ===== */
body { background: var(--bg); }

/* Landing */
.logo-icon .geoa-mark, .loading-logo .geoa-mark { display: block; }
a.logo-area { text-decoration: none; color: inherit; cursor: pointer; border-radius: 12px; gap: 11px; margin-bottom: 20px; }
#screen-landing .product-name { font-size: 34px; letter-spacing: -0.6px; }
a.logo-area:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 4px; }
.api-key-input.input-error { border-color: #EF4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.key-modal .api-key-input { transition: border-color .2s ease, box-shadow .2s ease; }
/* The copy keeps its own layer through the fade, so the text is rasterised once instead of
   being re-hinted frame by frame, and it holds a fixed wrap so nothing reflows on the way. */
.product-tagline { width: min(680px, calc(100vw - 48px)); max-width: none; text-wrap: balance; transform: translateZ(0); }
.api-key-hint { font-size: 12px; color: var(--gray-400); margin-top: 8px; max-width: 580px; line-height: 1.5; text-align: center; word-break: keep-all; text-wrap: balance; }
.landing-footer a, .landing-footer a:hover { color: inherit; text-decoration: none; }
.landing-footer { flex-direction: column; gap: 4px; max-width: calc(100vw - 32px); text-align: center; }
.landing-copyright { margin: 0; font-size: 11px; line-height: 1.5; color: var(--gray-400); text-wrap: balance; }

/* Gemini key dialog: a glass-blur layer over the landing. Nothing else can run until a
   key is connected, so the dialog is the only sharp thing on screen. */
.key-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; }
.key-modal[hidden] { display: none; }
.key-modal-backdrop { position: absolute; inset: 0; background: rgba(241, 245, 249, 0.55); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); }
.key-modal-card { position: relative; width: 100%; max-width: 380px; box-sizing: border-box; padding: 30px 26px 22px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.06); text-align: center; word-break: keep-all; }
.kp-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--gray-400); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.kp-close:hover { background: var(--gray-100); color: var(--gray-600); }
.kp-badge { width: 44px; height: 44px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--blue-50); color: var(--blue-600); }
.kp-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--gray-900); }
.kp-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--gray-500); }
.key-modal .kp-row { width: 100%; box-sizing: border-box; margin-top: 18px; padding: 0; }
.kp-continue { flex: none; min-width: 128px; justify-content: center; gap: 6px; padding: 8px 16px; transition: background-color .2s ease, color .2s ease; }
.kp-continue:disabled { background: var(--gray-200); color: var(--gray-500); cursor: default; }
#key-panel[data-state="checking"] .kp-continue { background: var(--blue-600); color: #FFFFFF; }
#key-panel[data-state="ok"] .kp-continue { background: #16A34A; color: #FFFFFF; }
#key-panel[data-state="error"] .kp-continue { background: #FEE2E2; color: #B91C1C; }
.kp-btn-label { display: inline-block; }
.kp-spin, .kp-btn-ok { display: none; }
.kp-spin { width: 12px; height: 12px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #FFFFFF; border-radius: 999px; animation: kp-spin .7s linear infinite; }
#key-panel[data-state="checking"] .kp-spin { display: inline-block; animation: kp-spin .7s linear infinite, kp-pop .24s cubic-bezier(0.22, 1, 0.36, 1); }
#key-panel[data-state="ok"] .kp-btn-ok { display: inline-block; animation: kp-pop .28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes kp-spin { to { transform: rotate(360deg); } }
@keyframes kp-pop { from { opacity: 0; scale: .4; } }
/* Success mark: the circle eases in with a soft glow behind it, then the check strokes in (about 0.5s, no overshoot). */
.kp-badge { position: relative; isolation: isolate; transition: background-color .2s ease; }
.kp-ico-ok { display: none; overflow: visible; }
#key-panel[data-state="ok"]:not([data-changing="1"]) .kp-badge { background: transparent; }
#key-panel[data-state="ok"]:not([data-changing="1"]) .kp-ico-key { display: none; }
#key-panel[data-state="ok"]:not([data-changing="1"]) .kp-ico-ok { display: block; }
#key-panel[data-state="ok"]:not([data-changing="1"]) .kp-badge::before {
  content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 999px;
  background: radial-gradient(circle, rgba(22, 163, 74, 0.26) 0%, rgba(22, 163, 74, 0.10) 45%, rgba(22, 163, 74, 0) 70%);
  opacity: 0; animation: kp-glow .9s .05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.kp-ok-fill { opacity: 0; transform: scale(.72); transform-origin: 22px 22px; }
.kp-ok-check { stroke-dasharray: 26; stroke-dashoffset: 26; }
#key-panel[data-state="ok"]:not([data-changing="1"]) .kp-ok-fill { animation: kp-fill .42s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
#key-panel[data-state="ok"]:not([data-changing="1"]) .kp-ok-check { animation: kp-draw .34s .16s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
@keyframes kp-fill { to { opacity: 1; transform: scale(1); } }
@keyframes kp-draw { to { stroke-dashoffset: 0; } }
@keyframes kp-glow { 0% { opacity: 0; transform: scale(.7); } 55% { opacity: 1; } 100% { opacity: .7; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  #key-panel[data-state="checking"] .kp-spin { animation: kp-spin 1.6s linear infinite; }
  #key-panel .kp-btn-ok, .key-connected { animation: none; }
  #key-panel .kp-ok-fill, #key-panel .kp-ok-check, #key-panel .kp-badge::before { animation: none; opacity: 1; stroke-dashoffset: 0; transform: none; }
  #key-panel .kp-badge::before { opacity: .7; }
}
.kp-msg { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--gray-500); transition: color .2s ease; }
.kp-msg:empty { display: none; }
#key-panel[data-state="ok"] .kp-msg { color: #15803D; }
#key-panel[data-state="error"] .kp-msg { color: #B91C1C; }
.kp-help-btn { margin-top: 14px; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; border-radius: 4px; }
.kp-help-btn:focus-visible, .kp-cta:focus-visible, .kp-close:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.kp-steps { margin: 12px 0 0; padding: 12px 14px 12px 32px; background: var(--gray-50); border-radius: 12px; text-align: left; }
.kp-steps ol { margin: 0; padding: 0; font-size: 13px; line-height: 1.75; color: var(--gray-700); }
.kp-steps b { font-weight: 600; }
.kp-cta { font-weight: 600; color: var(--blue-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 2px; }
.kp-cta svg { display: inline-block; margin-left: 3px; vertical-align: -1px; }
/* Changing a key is a trip to the console, so the foot of the dialog offers that rather than a
   way to back out; the close button and the backdrop already do that. */
.kp-cancel { display: none; width: fit-content; align-items: center; justify-content: center; gap: 4px; margin: 12px auto 0; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--gray-500); text-decoration: none; cursor: pointer; }
.kp-cancel:hover { color: var(--gray-700); }
.kp-cancel svg { flex: none; }
#key-panel[data-changing="1"] .kp-cancel { display: flex; }
#key-panel[data-changing="1"] .kp-help-btn { display: none; }
#key-panel[data-state="ok"] .kp-help-btn, #key-panel[data-state="ok"] .kp-steps { display: none; }
/* The connected line sits under the URL bar out of flow, so showing or hiding it never moves the centered landing. */
.mode-slide > .input-area { position: relative; }
/* Sits 50px above true center: the extra bottom margin shifts the centered block up by half its size. */
.landing-content { margin-bottom: 100px; }

/* Audit types. Platform is live; Social and YouTube are announced. Each type keys the whole
   landing (mark, name, tabs, background) to its own colors, and the colors crossfade. */
@property --key-a { syntax: '<color>'; inherits: true; initial-value: #3B82F6; }
@property --key-b { syntax: '<color>'; inherits: true; initial-value: #2563EB; }
@property --key-c { syntax: '<color>'; inherits: true; initial-value: #1D4ED8; }
@property --key-bg { syntax: '<color>'; inherits: true; initial-value: #EFF6FF; }
@property --name-a { syntax: '<color>'; inherits: true; initial-value: #1E3A5F; }
@property --name-b { syntax: '<color>'; inherits: true; initial-value: #2563EB; }
@property --name-c { syntax: '<color>'; inherits: true; initial-value: #60A5FA; }
body { --key-a: #3B82F6; --key-b: #2563EB; --key-c: #1D4ED8; --key-bg: #EFF6FF; --name-a: #1E3A5F; --name-b: #2563EB; --name-c: #60A5FA; /* Key colors land before the tab pill finishes moving; only the background keeps a slow fade. */
  transition: --key-a .18s ease-out, --key-b .18s ease-out, --key-c .18s ease-out, --key-bg .45s ease, --name-a .3s ease, --name-b .3s ease, --name-c .3s ease; }
body[data-mode="social"] { --key-a: #F58529; --key-b: #DD2A7B; --key-c: #8134AF; --key-bg: #FFF0F4; --name-a: #8134AF; --name-b: #DD2A7B; --name-c: #F58529; }
body[data-mode="youtube"] { --key-a: #E32227; --key-b: #D8213F; --key-c: #C22159; --key-bg: #FDF1F2; --name-a: #C22159; --name-b: #D8213F; --name-c: #E32227; }
.landing-container { background: linear-gradient(180deg, var(--white) 0%, var(--key-bg) 100%); }
/* The mark now carries the variables on its own shapes; see the symbol in index.html. */
#screen-landing .product-name { background-image: linear-gradient(135deg, var(--name-a) 0%, var(--name-b) 45%, var(--name-c) 75%, var(--name-b) 100%); }
/* The bar glow and outline take the active type’s key color. */
/* No glow on the bar: hover and focus keep the resting shadow. */
#screen-landing .url-input-wrapper::before { display: none; }
#screen-landing .url-input-wrapper:hover, #screen-landing .url-input-wrapper:focus-within { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
#screen-landing .soon-bar:hover { cursor: pointer; }
/* Sub-branding for a content type. The wordmark sits out of flow under the title, and the
   title lifts just enough to make room, so the tabs and the bar never move. */
/* The wordmark carries more visual weight than the mark beside it, so the lockup sits a few
   pixels left of the geometric centre to read as centred. */
.title-block { position: relative; transform: translate(-4px, 0); transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1); }
body[data-mode="social"] .title-block, body[data-mode="youtube"] .title-block { transform: translate(-4px, -11px); }
/* The title is only a reload link, so it stays still: no gradient sweep, glow or scale on hover. */
#screen-landing .product-name, #screen-landing .product-name:hover { background-position: 0% 50%; filter: none; }
a.logo-area:hover .logo-icon svg { filter: none; transform: none; }
/* The row bottom-aligns. Flex baseline alignment does not do what it looks like it should here,
   because the box holding the mark has no in-flow content to take a baseline from; measured,
   flex-end puts the mark's floor exactly on the word's baseline. */
.sub-brand { position: absolute; top: 100%; left: 0; right: 0; display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: -22px 0 0; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; }
.sub-brand.on { opacity: 1; }
.sub-for { color: var(--gray-900); font-weight: 500; }
/* Both wordmarks sit in the same box: the outgoing one fades out where it stands while the box
   glides to the new width, so switching types is one movement rather than a swap. */
/* The box resizes while the old mark is still fading, on that fade's timing, so "for" has
   finished stepping across before the new mark starts: it then rises straight up. */
/* The box is exactly as tall as the mark it holds and the mark sits on its floor, so the box's
   own bottom edge is what the row lines up on. Its height is set with its width when the mark
   changes, since the two marks are not the same height. */
.sub-mark { display: inline-block; font-size: 0; line-height: 0; }
.sub-logo { display: inline-block; vertical-align: baseline; position: relative; }
/* Stand-in until the official wordmark file is dropped in. */
.sub-word { display: inline-block; font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: -0.2px; }
.sub-word.social { background: linear-gradient(120deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #8134AF; }
.sub-word.youtube { color: #CD2730; }
.mode-tabs { position: relative; display: inline-flex; gap: 2px; margin: 0 0 20px; padding: 2px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
/* The tint is one pill that glides between tabs, so nothing blinks on or off. */
.mode-ind { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 6px; background: color-mix(in srgb, var(--key-b) 10%, #FFFFFF); transition: transform .34s cubic-bezier(0.22, 1, 0.36, 1), width .34s cubic-bezier(0.22, 1, 0.36, 1), background-color .18s ease-out; }
.mode-tab { position: relative; z-index: 1; padding: 4px 12px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--gray-500); cursor: pointer; transition: color .2s ease; }
.mode-tab:hover { color: var(--gray-700); }
/* The active tab is the key color dimmed right down: a faint tint behind the deep end of the gradient. */
/* The active tab only changes its text; the gliding pill carries the tint. */
.mode-tab.active { color: var(--key-c); }
.mode-tab:focus-visible { outline: 2px solid var(--gray-400); outline-offset: 2px; }
/* The panels share one cell, and one fixed track keeps the wider tagline from stretching it.
   Every type shows the same pill in the same place, so the pill is painted once - by Platform's
   copy - instead of being handed over: two stacked copies would double the shadow, and fading
   between them would let the page show through mid-way. Only the line of copy, the placeholder
   and the button differ, so only those three change. */
.mode-stage { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.mode-slide { grid-area: 1 / 1; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.mode-slide[inert] { pointer-events: none; }
.mode-slide:not([data-mode="platform"]) .url-input-wrapper { background: none; box-shadow: none; }
.mode-slide:not([data-mode="platform"]) .url-input-wrapper::after { display: none; }
/* The icon and the key line are the same in every type, so the one showing is simply the
   active copy: an instant handover between identical pixels, and Connect stays clickable. */
.mode-slide[inert] .input-icon, .mode-slide[inert] .key-connected { visibility: hidden; }
.mode-slide[inert] .product-tagline, .mode-slide[inert] .url-input-wrapper input, .mode-slide[inert] .btn-primary { opacity: 0; }
/* Both labels are given an explicit width while the pill changes, so neither one rewraps. */
#screen-landing .url-input-wrapper .btn-primary { justify-content: center; overflow: hidden; white-space: nowrap; }
#screen-landing .url-input-wrapper .btn-primary > * { flex: none; }
/* Coming-soon types show the same bar as Platform, with the button in the Analyze position. */
.soon-bar input { flex: 1; min-width: 0; border: none; outline: none; padding: 10px 4px; font: inherit; font-size: 15px; line-height: normal; background: transparent; }
.soon-bar input { color: var(--gray-400); cursor: pointer; caret-color: transparent; }
.soon-bar input::placeholder { color: var(--gray-400); }
/* The button was the last thing on the landing still painted blue on every type. It takes the
   type's own colours like the tab, the mark and the background do, so choosing a type carries
   all the way through to the act. The Coming soon button already worked this way. */
#screen-landing .url-input-wrapper .btn-primary { color: #FFFFFF; background: linear-gradient(135deg, var(--key-a), var(--key-c)); }
#screen-landing .url-input-wrapper .btn-primary:hover { background: linear-gradient(135deg, var(--key-a), var(--key-c)); filter: brightness(1.06); }
#screen-landing .url-input-wrapper .btn-primary:active { filter: brightness(0.94); }
#screen-landing .url-input-wrapper .btn-primary:focus-visible { outline: 2px solid var(--key-b); outline-offset: 2px; }
.soon-bar .btn-soon { display: inline-flex; align-items: center; gap: 6px; color: #FFFFFF; background: linear-gradient(135deg, var(--key-a), var(--key-c)); }
.soon-lock { flex: none; opacity: .9; }
/* ===== LOADING SCREEN MOTION =====
   The screen is calm and continuous rather than busy: the bar carries a slow sheen so a long
   model step never looks stalled, the step being worked on breathes instead of blinking, and the
   list settles in one item at a time. */
/* The width is driven frame by frame, so no CSS transition here: it would lag behind and blur
   the pacing the script is setting. The closing glide to 100% sets its own. */
#screen-loading .progress-fill { position: relative; overflow: hidden; }
#screen-loading .progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, 0.55) 50%, transparent 82%);
  transform: translateX(-100%);
  animation: sheen 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Once the report is ready the bar stops working and simply rests. */
#screen-loading .progress-fill.done::after { animation: none; opacity: 0; }
@keyframes sheen { to { transform: translateX(100%); } }

#screen-loading .step-item.active .step-indicator::after { animation: breathe 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.68); opacity: 0.5; } }
#screen-loading .step-item.active .step-indicator::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--blue-500); opacity: 0;
  animation: halo 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes halo { 0% { transform: scale(1); opacity: .4; } 70%, 100% { transform: scale(1.75); opacity: 0; } }

/* A finished step settles into its tick instead of popping past it. */
#screen-loading .step-item.done .step-indicator::after { animation: checkSettle .34s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes checkSettle { from { transform: scale(0.45); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#screen-loading.active .steps-list .step-item { animation: riseIn .45s cubic-bezier(0.22, 1, 0.36, 1) both; }
#screen-loading.active .steps-list .step-item:nth-child(1) { animation-delay: .02s; }
#screen-loading.active .steps-list .step-item:nth-child(2) { animation-delay: .06s; }
#screen-loading.active .steps-list .step-item:nth-child(3) { animation-delay: .10s; }
#screen-loading.active .steps-list .step-item:nth-child(4) { animation-delay: .14s; }
#screen-loading.active .steps-list .step-item:nth-child(5) { animation-delay: .18s; }
#screen-loading.active .steps-list .step-item:nth-child(6) { animation-delay: .22s; }
#screen-loading.active .steps-list .step-item:nth-child(7) { animation-delay: .26s; }
#screen-loading.active .steps-list .step-item:nth-child(8) { animation-delay: .30s; }
#screen-loading.active .steps-list .step-item:nth-child(9) { animation-delay: .34s; }
#screen-loading.active .steps-list .step-item:nth-child(10) { animation-delay: .38s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* The video field is the same field as the page one, so it gets the same look rather than the
   browser's default inside the pill. */
#video-input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 15px; line-height: normal; color: var(--gray-800); padding: 10px 4px; background: transparent; }
#video-input::placeholder { color: var(--gray-400); }
/* Out of flow, like the key line, so showing it never moves the bar. It sits below the key line
   rather than on top of it: both say something the reader needs at the same moment. */
.bar-msg { position: absolute; top: 100%; left: 0; right: 0; margin: 32px 0 0; font-size: 12.5px; color: var(--red-600); text-align: center; }
.bar-msg:not([hidden]) { animation: kp-rise .3s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

/* Coming-soon dialog, keyed to the audit type. */
.sp-badge { background: color-mix(in srgb, var(--key-b) 12%, #FFFFFF); color: var(--key-b); }
.sp-cta { margin: 18px auto 0; padding: 9px 18px; background: linear-gradient(135deg, var(--key-a), var(--key-c)); }
.sp-cta:hover { background: linear-gradient(135deg, var(--key-a), var(--key-c)); filter: brightness(1.05); }

/* Elapsed seconds on the step that is waiting for the model. */
.step-time { margin-left: auto; padding-left: 12px; font-size: 12px; font-weight: 500; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.step-item { display: flex; align-items: center; }

/* Brand bar on the loading and results screens: mark, name, then the copyright. */
.app-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-brand .geoa-mark { display: block; flex: none; }
.app-brand .app-brand-name {
  font-size: 16px; font-weight: 800; letter-spacing: -0.3px; white-space: nowrap;
  background: linear-gradient(135deg, #1E3A5F 0%, #2563EB 60%, #3B82F6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.app-brand-copy { min-width: 0; margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--gray-200); font-size: 11.5px; line-height: 16px; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .dash-nav .app-brand-copy { display: none; } }
@media (max-width: 600px) {
  .loading-header .app-brand { flex-wrap: wrap; row-gap: 4px; }
  .loading-header .app-brand-copy { flex-basis: 100%; margin: 0; padding: 0; border: 0; white-space: normal; }
}
.key-connected { position: absolute; top: 100%; left: 0; right: 0; margin: 10px 0 0; font-size: 12.5px; color: var(--gray-400); text-align: center; }
.key-connected:not([hidden]) { animation: kp-rise .36s .06s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes kp-rise { from { opacity: 0; transform: translateY(-3px); } }
.key-connected svg { vertical-align: -2px; margin-right: 2px; }
.key-connected .kc-ok { display: none; }
.key-connected[data-state="ok"] .kc-ok { display: inline; }
.key-connected[data-state="ok"] .key-connected-label { color: #16A34A; }
.key-change { padding: 0; border: 0; background: none; font: inherit; color: var(--gray-400); cursor: pointer; }
@media (max-width: 480px) { .key-modal-card { padding: 28px 20px 20px; } }

/* Dashboard layout */
.dash-content { max-width: 1200px; margin: 0 auto; padding: 24px 32px 64px; box-sizing: border-box; }
/* The arc already rotates itself to start at 12 o'clock; the older whole-SVG rotation pushed it to 9. */
.hero-score-ring svg { transform: none; }
.scores-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 980px) { .scores-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .dash-content { padding: 16px 16px 48px; }
  .dash-nav { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .dash-nav-brand, .dash-nav-right button { white-space: nowrap; }
  .dash-nav-right { gap: 6px; }
  .dash-nav-right button { padding: 6px 10px; font-size: 13px; }
}
.score-card { display: flex; flex-direction: column; min-width: 0; }

/* Hero */
.hero-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: center; margin-bottom: 24px; }
.hero-top .hero-score-area { justify-self: start; width: fit-content; margin: 0; }
.hero-meta-right { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 8px; min-width: 0; }
.hero-score-label, .hero-url-label, .sw-column h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--gray-400); text-transform: uppercase; }
a.hero-url-link {
  display: block; max-width: 100%; box-sizing: border-box;
  font-size: 13px; font-weight: 500; color: var(--blue-600); text-decoration: none; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 999px; padding: 8px 14px;
}
a.hero-url-link:hover { border-color: var(--blue-400); background: var(--blue-100); }
.hero-badge-row { margin: 32px 0 12px; line-height: 1; }
.hero-badge-row .hero-badge { margin-bottom: 0; }
.hero-badge-row + .hero-headline {
  margin-top: 0 !important; margin-bottom: 12px;
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; max-width: 62ch;
}
@media (max-width: 720px) {
  .hero-top { grid-template-columns: 1fr; }
  .hero-badge-row + .hero-headline { font-size: 19px; }
}

/* Error screen */
.err-card { max-width: 560px; margin: 48px auto; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 36px 32px; text-align: left; word-break: keep-all; overflow-wrap: break-word; }
.err-icon { width: 44px; height: 44px; border-radius: 999px; background: #FEF3C7; color: #B45309; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.err-title { font-size: 21px; font-weight: 700; color: var(--gray-900); line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 8px; }
.err-body { font-size: 15px; color: var(--gray-600); line-height: 1.6; margin: 0; }
.err-tips { margin: 14px 0 0; padding-left: 18px; }
.err-tips li { font-size: 14px; color: var(--gray-700); line-height: 1.6; margin-bottom: 4px; }
.err-geo { margin-top: 18px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-sm); padding: 12px 14px; }
.err-geo b { display: block; font-size: 12px; color: var(--blue-700); margin-bottom: 4px; }
.err-geo p { margin: 0; font-size: 13px; color: var(--gray-700); line-height: 1.55; }
.err-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.err-btn { padding: 10px 20px; font-size: 14px; }
.err-url { margin: 18px 0 0; font-size: 12px; color: var(--gray-400); word-break: break-all; }
.err-tech { margin-top: 10px; }
.err-tech summary { cursor: pointer; font-size: 12px; color: var(--gray-400); list-style: none; }
.err-tech summary::-webkit-details-marker { display: none; }
.err-tech pre { margin: 8px 0 0; padding: 10px 12px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font: 11.5px/1.6 "SF Mono", Menlo, Consolas, monospace; color: var(--gray-600); white-space: pre-wrap; word-break: break-all; }
@media (max-width: 600px) { .err-card { margin: 24px auto; padding: 28px 20px; } }

/* Notices */
.notice { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px; line-height: 1.55; margin-bottom: 16px; word-break: keep-all; }
.notice.warn { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.notice.info { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-700); }

/* Score card */
.score-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.weight-chip {
  font-size: 10px; font-weight: 700; color: var(--gray-500); background: var(--gray-100);
  border-radius: 999px; padding: 2px 8px; letter-spacing: 0.04em; white-space: nowrap;
}
.score-card-score .score-card-badge { margin-left: 10px; margin-bottom: 0; vertical-align: middle; position: relative; top: -4px; }
.cap-note { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.diag-list { margin: 10px 0 0; padding-left: 16px; }
.diag-list li { font-size: 12.5px; color: var(--gray-600); line-height: 1.55; margin-bottom: 4px; }
.diag-list li::marker { color: var(--gray-400); }

/* Check groups */
.check-group { margin-bottom: 14px; }
.check-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.check-group-name { font-size: 12px; font-weight: 700; color: var(--gray-700); }
.check-group-pts { font-size: 12px; font-weight: 800; color: var(--gray-800); white-space: nowrap; }
.check-group-pts .mx { color: var(--gray-400); font-weight: 600; }
.group-gauge { height: 6px; border-radius: 3px; background: var(--gray-200); overflow: hidden; margin: 2px 0 8px; }
.group-gauge-fill { height: 100%; border-radius: 3px; }
.judged-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--gray-400); border: 1px solid var(--gray-200); border-radius: 999px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.check-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: baseline; padding: 3px 0; }
.check-ic { font-size: 11px; font-weight: 800; }
.check-ic.p { color: var(--green-600); } .check-ic.f { color: var(--red-500); }
/* Strength and weakness marks match the checklist marks: same size, weight and colors. */
.sw-icon { font-size: 11px; font-weight: 800; line-height: 18px; margin-top: 0; }
.sw-icon.green { color: var(--green-600); }
.sw-icon.red { color: var(--red-500); }
/* Each heading takes the colour of the mark under it, so the column reads as one thing. */
.sw-column h4.sw-good { color: var(--green-600); }
.sw-column h4.sw-bad { color: var(--red-500); }
.check-txt { font-size: 11.5px; color: var(--gray-600); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.check-txt .meas { color: var(--gray-400); }
.check-pts { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.check-pts.p { color: var(--green-600); } .check-pts.f { color: var(--red-400); }
.band-note { font-size: 11px; color: var(--gray-500); padding: 3px 0 0; line-height: 1.5; }
.band-note b { color: var(--gray-700); }

/* Evidence */
details.evi { margin-top: 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--gray-50); }
details.evi > summary {
  cursor: pointer; list-style: none; padding: 8px 12px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.05em; color: var(--gray-500); display: flex; align-items: center; gap: 8px;
  transition: color .2s ease; user-select: none;
}
details.evi > summary:hover { color: var(--gray-700); }
details.evi > summary::-webkit-details-marker { display: none; }
details.evi > summary::before {
  content: "▸"; display: inline-block; transform-origin: 45% 50%;
  transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1);
}
details.evi[open]:not(.closing) > summary::before { transform: rotate(90deg); }
.evi-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 12px; }
@media (prefers-reduced-motion: reduce) { details.evi > summary::before { transition: none; } }
.cap { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; background: var(--white); }
.cap.cap-good { border-left: 3px solid var(--green-500); }
.cap.cap-bad { border-left: 3px solid var(--red-500); }
.cap-head { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; }
.cap-badge { flex: none; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; border-radius: 999px; padding: 3px 9px; margin-top: 1px; }
.cap-badge.good { background: var(--green-100); color: var(--green-700); }
.cap-badge.bad { background: var(--red-100); color: var(--red-700); }
.cap-caption { font-size: 12px; color: var(--gray-600); line-height: 1.55; }
.cap pre {
  margin: 0; padding: 12px 14px; background: var(--gray-900); color: #E2E8F0; font-size: 11px; line-height: 1.6;
  overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: "SF Mono", Menlo, Consolas, monospace; border-top: 1px solid var(--gray-100);
}
.cap pre .hl { color: #FCA5A5; } .cap pre .ok { color: #86EFAC; }

/* What to do */
.todo-box { margin-top: auto; border: 1px solid var(--blue-100); background: var(--blue-50); border-radius: var(--radius-sm); padding: 12px 14px; }
.score-breakdown { margin-bottom: 16px; }
.todo-label { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--blue-600); margin-bottom: 8px; }
.todo-box ol { margin: 0; padding-left: 18px; }
.todo-box li { font-size: 12px; color: var(--gray-700); line-height: 1.55; margin-bottom: 5px; }
.todo-box li:last-child { margin-bottom: 0; }
.todo-box li::marker { font-weight: 700; color: var(--blue-600); }

/* Method footer */
.method-box { margin-top: 28px; border-top: 1px solid var(--gray-200); padding-top: 16px; font-size: 12px; color: var(--gray-500); line-height: 1.65; word-break: keep-all; }
.method-box b { color: var(--gray-700); }

.hero-section, .score-card, .cap-caption, .band-note, .check-txt, .todo-box, .diag-list { word-break: keep-all; overflow-wrap: break-word; }
@media print { .dash-nav { display: none; } details.evi { break-inside: avoid; } }

/* AI suggested fixes: sits in each dimension card where "What to do" was. Generated text is
   marked with the spark and the GEO Bench blue gradient so it never reads as measured evidence. */
.ai-box { margin-top: 16px; padding: 14px 14px 14px; border: 1px solid transparent; border-radius: 12px;
  background: linear-gradient(180deg, #F8FAFF, #FFFFFF) padding-box, linear-gradient(135deg, #BFDBFE 0%, #93C5FD 45%, #DBEAFE 100%) border-box; }
.ai-box:empty { display: none; }
.ai-box-top { display: flex; align-items: center; gap: 12px; }
.ai-box-text { flex: 1; min-width: 0; }
.ai-box-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-spark { display: block; flex: none; }
.ai-spark-sm { flex: none; }
.ai-box-title { font-size: 16px; font-weight: 700; color: #1D4ED8; background: linear-gradient(135deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ai-gen { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; color: var(--blue-600); background: #FFFFFF; border: 1px solid var(--blue-200); border-radius: 999px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ai-gen:hover { background: var(--blue-50); }
.ai-gen.primary { color: #FFFFFF; background: var(--blue-600); border-color: var(--blue-600); }
.ai-gen.primary:hover { background: var(--blue-700); border-color: var(--blue-700); }
.ai-gen:disabled { color: var(--gray-500); background: var(--white); border-color: var(--gray-200); cursor: default; }
.ai-gen:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.ai-gen svg { display: block; flex: none; }
.ai-gen-spin { width: 10px; height: 10px; flex: none; box-sizing: border-box; border: 2px solid rgba(37, 99, 235, 0.25); border-top-color: var(--blue-600); border-radius: 999px; animation: kp-spin .7s linear infinite; }
.ai-box-sub { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--gray-500); }
.ai-steps { margin: 10px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--gray-700); }
.ai-steps li { margin-bottom: 2px; }
.ai-drafts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ai-draft { container-type: inline-size; position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; }
.ai-draft-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; padding-right: 70px; }
.ai-draft-name { font-size: 13px; font-weight: 700; color: var(--gray-900); }
.ai-fixes-tag { max-width: 100%; overflow: hidden; padding: 1px 7px; font-size: 10.5px; color: var(--gray-500); white-space: nowrap; text-overflow: ellipsis; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 999px; }
.ai-more { color: var(--gray-400); }
.ai-count { font-size: 10.5px; color: var(--gray-400); }
.ai-lbl { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-400); }
.ai-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.ai-cmp-wide { grid-template-columns: 1fr; }
/* A narrow card puts AS-IS above TO-BE instead. */
@container (max-width: 430px) { .ai-cmp { grid-template-columns: 1fr; } }
.ai-asis, .ai-tobe { min-width: 0; padding: 8px 11px; border-radius: 8px; }
.ai-asis { background: var(--gray-50); border: 1px solid var(--gray-200); }
.ai-tobe { background: var(--blue-50); border: 1px solid var(--blue-100); }
.ai-tobe .ai-lbl { color: var(--blue-600); }
.ai-val { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.ai-asis .ai-val { color: var(--gray-500); }
.ai-tobe .ai-val { color: var(--gray-900); }
.ai-tobe .ai-note { margin-bottom: 8px; }
.ai-empty { font-style: italic; color: var(--gray-400); }
.ai-ph { padding: 0 3px; color: #92400E; background: #FEF3C7; border-radius: 4px; }
.ai-copy { position: absolute; top: 9px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--gray-600); background: var(--white); border: 1px solid var(--gray-200); border-radius: 7px; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.ai-copy:hover { color: var(--gray-900); background: var(--gray-50); }
.ai-copy:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.ai-copy.done { color: #15803D; background: #F0FDF4; border-color: #BBF7D0; }
.ai-table { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--gray-200); border-radius: 8px; }
.ai-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ai-tr > * { margin: 0; padding: 7px 10px; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; border-top: 1px solid var(--gray-200); }
.ai-tr > :first-child { color: var(--gray-500); background: var(--gray-50); border-right: 1px solid var(--gray-200); }
.ai-tr > :last-child { color: var(--gray-900); background: var(--blue-50); }
.ai-th > * { padding-top: 6px; padding-bottom: 4px; border-top: 0; }
.ai-th > .ai-lbl { font-size: 10px; letter-spacing: 0.06em; color: var(--gray-400); }
.ai-th > .ai-lbl:last-child { color: var(--blue-600); }
@media (max-width: 480px) {
  .ai-tr { grid-template-columns: 1fr; }
  .ai-th { display: none; }
  .ai-tr > :first-child { border-right: 0; }
  .ai-tr:nth-child(2) > :first-child { border-top: 0; }
  .ai-tr > :last-child { border-top: 0; }
  .ai-tr > :first-child::before, .ai-tr > :last-child::before { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; }
  .ai-tr > :first-child::before { content: "AS-IS"; color: var(--gray-400); }
  .ai-tr > :last-child::before { content: "TO-BE"; color: var(--blue-600); }
}
.ai-faq { margin: 0; padding: 0; list-style: none; }
.ai-faq li { padding: 8px 0; border-top: 1px solid var(--gray-100); }
.ai-faq li:first-child { padding-top: 0; border-top: 0; }
.ai-faq b { display: block; margin-bottom: 2px; font-size: 13px; color: var(--gray-900); }
.ai-faq p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--gray-700); }
.ai-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--gray-500); }
.ai-code { max-height: 280px; margin: 0; overflow: auto; padding: 10px 12px; font: 11px/1.6 "SF Mono", Menlo, Consolas, monospace; color: #E2E8F0; white-space: pre; background: #0F172A; border-radius: 8px; }
.ai-code .ai-ph { color: #FDE68A; background: rgba(251, 191, 36, 0.18); }
.ai-status { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--gray-600); }
.ai-dot { width: 7px; height: 7px; flex: none; border-radius: 999px; background: linear-gradient(135deg, #3B82F6, #1D4ED8); animation: ai-pulse 1.2s ease-in-out infinite; }
@keyframes ai-pulse { 50% { opacity: .35; transform: scale(.8); } }
.ai-skel { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; }
.ai-skel i { display: block; height: 9px; border-radius: 6px; background: linear-gradient(90deg, var(--gray-100) 0%, var(--blue-50) 50%, var(--gray-100) 100%); background-size: 200% 100%; animation: ai-shimmer 1.4s ease-in-out infinite; }
.ai-skel i:nth-child(1) { width: 38%; }
.ai-skel i:nth-child(2) { width: 94%; height: 30px; }
.ai-skel i:nth-child(3) { width: 68%; }
@keyframes ai-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ai-shimmer { background: linear-gradient(100deg, var(--gray-500) 0 38%, var(--blue-500) 50%, var(--gray-500) 62% 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ai-sweep 1.5s linear infinite; }
.ai-stream { background: linear-gradient(100deg, currentColor 0 36%, rgba(37, 99, 235, 0.3) 50%, currentColor 64% 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ai-write .85s ease-out both; }
@keyframes ai-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes ai-write { from { background-position: 130% 0; opacity: .5; } to { background-position: -30% 0; opacity: 1; } }
.ai-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; }
.ai-error b { display: block; font-size: 13px; color: var(--gray-900); }
.ai-error span { font-size: 12.5px; color: var(--gray-500); }
@media (prefers-reduced-motion: reduce) {
  .mode-ind { transition: none; }
  #screen-loading .progress-fill::after, #screen-loading .step-item.active .step-indicator::before,
  #screen-loading .step-item.active .step-indicator::after, #screen-loading .step-item.done .step-indicator::after,
  #screen-loading.active .steps-list .step-item { animation: none; }
  .ai-dot, .ai-skel i { animation: none; }
  .ai-shimmer, .ai-stream { background: none; -webkit-text-fill-color: currentColor; animation: none; }
}
@media print { .ai-copy, .ai-retry, .ai-gen { display: none; } .ai-code { max-height: none; white-space: pre-wrap; } }

/* PDF export: the report re-laid out for A4 (190 mm = 718 px of content) and rendered offscreen. */
.pdf-stage { position: fixed; top: 0; left: -10000px; width: 718px; pointer-events: none; }
.pdf-export { width: 100%; background: #FFFFFF; }
.pdf-export .pdf-head { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.pdf-export .app-brand-name { background: none; color: #1E40AF; -webkit-text-fill-color: #1E40AF; }
.pdf-export .ai-box-title { background: none; color: #1D4ED8; -webkit-text-fill-color: #1D4ED8; }
.pdf-export .dash-content { max-width: none; margin: 0; padding: 0; }
.pdf-export .section-title { margin-top: 0; }
.pdf-export .scores-grid { display: block; }
.pdf-export .score-card { margin-bottom: 20px; }
.pdf-export .ai-box { background: #F8FAFF; border: 1px solid var(--blue-200); }
.pdf-export .ai-code { max-height: none; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
.pdf-export .pdf-line { display: block; }
.pdf-export *, .pdf-export *::before, .pdf-export *::after { animation: none !important; transition: none !important; }
.pdf-spin { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; box-sizing: border-box; border: 2px solid rgba(37, 99, 235, 0.25); border-top-color: #2563EB; border-radius: 999px; animation: kp-spin .7s linear infinite; }

/* ===== THE TYPE'S COLOURS, ALL THE WAY THROUGH =====
   data-mode stays on <body> after the landing, so the progress screen and the report can read the
   same variables. Only chrome moves: the wordmark, the bar, the active step, the frame around the
   report, the buttons that are ours. Anything that carries a meaning keeps its own colour, because
   a green tick that turned red on the Video tab would be telling the reader something false. So the
   score ring, the score gauges, the pass and fail marks and the green, amber and red feed dots are
   deliberately left alone. */

/* The wordmark, wherever it appears. */
.app-brand .app-brand-name { background-image: linear-gradient(135deg, var(--name-a) 0%, var(--name-b) 60%, var(--name-c) 100%); }

/* Progress screen. */
#screen-loading .progress-fill { background: linear-gradient(90deg, var(--key-a), var(--key-c)); }
#screen-loading .progress-pct { color: var(--key-c); }
#screen-loading .step-item.active { color: var(--key-c); background: color-mix(in srgb, var(--key-b) 8%, #FFFFFF); }
#screen-loading .step-item.active .step-indicator { border-color: var(--key-b); background: var(--key-b); }
#screen-loading .step-item.active .step-indicator::before { border-color: var(--key-b); }
/* The neutral feed dot follows; the green, amber and red ones mean something and do not. */
#screen-loading .insight-dot.blue { background: var(--key-b); }

/* Report. */
/* Export is a plain utility, not a statement of type, so it stays neutral. */
#screen-dashboard .btn-outline { color: var(--gray-700); background: var(--white); border-color: var(--gray-200); }
#screen-dashboard .btn-outline:hover { background: var(--gray-50); border-color: var(--gray-300); }
/* The report itself is white. Tinting the sheet the score sits on made the reading feel coloured
   before it was read. */
#screen-dashboard .hero-section { background: var(--white); border-color: var(--gray-200); }
#screen-dashboard a.hero-url-link { color: var(--key-c); background: color-mix(in srgb, var(--key-b) 7%, #FFFFFF); border-color: color-mix(in srgb, var(--key-b) 16%, #FFFFFF); }
#screen-dashboard a.hero-url-link:hover { background: color-mix(in srgb, var(--key-b) 12%, #FFFFFF); border-color: color-mix(in srgb, var(--key-b) 34%, #FFFFFF); }

/* "for Instagram" beside the name on the progress screen and the report, matching the landing. */
/* The name, the word "for" and the wordmark sit on one line. Two things are needed for that.
   The name and the group have to share a baseline, which means asking for it on both: the row
   around them centres everything else, and a lone baseline item has nothing to align to. And the
   wrapper around the image has to take the image's own bottom edge as its baseline, which an
   inline-flex box does not do, so it is an inline-block with no line box of its own. */
/* The row aligns on the baseline so the name and the mark beside it sit on one line. Asking for
   it item by item is not enough: a lone baseline item has nothing to align against. The mark and
   the copyright are not on that line and stay centred. */
.app-brand { align-items: baseline; }
.app-brand .geoa-mark { align-self: center; }
.app-brand .app-brand-copy { align-self: center; }
.app-for { display: inline-flex; align-items: baseline; gap: 5px; margin-left: 3px; flex: none; }
.app-for[hidden] { display: none; }
.app-for-word { font-size: 12px; font-weight: 500; color: var(--gray-900); }
.app-for-mark { display: inline-block; font-size: 0; line-height: 0; color: var(--gray-900); }
.app-for-mark:empty { font-size: 12px; font-weight: 700; }
.app-for-logo { display: inline-block; vertical-align: baseline; }

/* Where a check's standard comes from, so official lines and our own are told apart. */
.src-tag { margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--gray-500); background: var(--gray-100); white-space: nowrap; }
.src-tag.src-official { color: #1D4ED8; background: #EFF6FF; }
.src-tag.src-unseen { color: #92400E; background: #FEF3C7; }

/* What the model actually reported, so a wrong reading can be caught rather than believed. */
.vid-tech { margin: 24px 0 0; }
.vid-tech .tech-note { margin: 8px 0 0; font-size: 12px; color: var(--gray-500); }
.num-unscored { font-size: 20px; font-weight: 600; color: var(--gray-400); letter-spacing: -0.2px; }

/* ===== THE PAGE AS A MODEL RECEIVES IT =====
   Three questions in the order someone asks them. What came out of the head. How does the page
   split from the top heading down. Are the things the rubric looks for actually there. Found is
   the green this app already uses for a passing check and not found is its red, so the drawing
   and the score speak one language. */
.dash-split { display: block; }
.dash-split.has-rail { display: grid; grid-template-columns: 540px minmax(0, 1fr); gap: 32px; align-items: start; max-width: none; padding: 0 32px; }
.dash-split.has-rail .dash-content { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.dash-split.has-rail { --nav-h: 60px; --rail-gap: 24px; }
.dash-rail { position: sticky; top: calc(var(--nav-h) + var(--rail-gap)); height: calc(100vh - var(--nav-h) - var(--rail-gap) * 2); min-width: 0; }
.dash-rail[hidden] { display: none; }

/* Dark, like the evidence blocks, and for the same reason: this is the machine's reading of the
   page, not the page. Found keeps the evidence green and missing keeps its red. */
.skel { display: flex; flex-direction: column; height: 100%; background: var(--gray-900); border-radius: 16px; overflow: hidden; }
.skel-head { padding: 16px 20px 13px; border-bottom: 1px solid rgba(255,255,255,.08); }
.skel-title { font-size: 13.5px; font-weight: 700; color: #F1F5F9; letter-spacing: -0.1px; }
.skel-key { display: flex; gap: 16px; margin-top: 9px; }
.skel-key-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #94A3B8; }
.kb { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.kb-has { background: rgba(134,239,172,.16); border: 1px solid rgba(134,239,172,.40); }
.kb-none { background: rgba(252,165,165,.12); border: 1px dashed rgba(252,165,165,.50); }

.skel-stage { flex: 1; min-height: 0; padding: 14px 18px; overflow: hidden; }
.skel-fit { transform-origin: top left; visibility: hidden; }

.sk-sec { margin-bottom: 12px; padding: 12px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.sk-sec:last-child { margin-bottom: 0; }
.sk-sec-t { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.sk-host { margin-left: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #64748B; }
.sk-sec.is-lit { box-shadow: 0 0 0 2px var(--lit-ring); }

/* Everything in the drawing leads somewhere, so everything in it answers the pointer. */
.sk-chip, .sk-card, .sk-head { cursor: pointer; }
.sk-chip:hover, .sk-card:hover { filter: brightness(1.35); }
.sk-head:hover { background: rgba(255,255,255,.07); }
.sk-chip:focus-visible, .sk-card:focus-visible, .sk-head:focus-visible, .sk-fold:focus-visible {
  outline: 2px solid var(--lit-ring); outline-offset: 1px;
}
.sk-fold {
  margin-left: 2px; padding: 0 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px;
  background: rgba(255,255,255,.05); color: #94A3B8; font-size: 11px; line-height: 17px; cursor: pointer;
  transition: transform .18s ease, color .18s ease;
}
.sk-fold:hover { color: #E2E8F0; }
.sk-fold.open { transform: rotate(180deg); color: #E2E8F0; }
.sk-fold[hidden] { display: none; }
.sk-depth { margin-left: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #64748B; }
.skel-hint { margin-top: 5px; font-size: 11px; color: #64748B; }
.sk-aside { margin-left: auto; color: #64748B; }
.skel-key { flex-wrap: wrap; align-items: center; }
.skel-note { margin-top: 8px; padding: 6px 9px; border-radius: 6px; background: rgba(255,255,255,.06); color: #CBD5E1; font-size: 11px; }
.skel-note[hidden] { display: none; }

/* The check the drawing just sent you to, so the jump lands somewhere visible. */
.check-group.is-called { animation: called 1.4s ease; }
@keyframes called {
  0%, 70% { box-shadow: 0 0 0 2px var(--key-b); background: color-mix(in srgb, var(--key-b) 8%, transparent); }
  100% { box-shadow: 0 0 0 2px transparent; background: transparent; }
}

.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; max-width: 100%; }
.sk-chip b { flex: none; font-size: 11px; }
.sk-chip em { font-style: normal; opacity: .65; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-chip.has { color: #86EFAC; background: rgba(134,239,172,.10); border: 1px solid rgba(134,239,172,.28); }
.sk-chip.none { color: #FCA5A5; background: rgba(252,165,165,.08); border: 1px dashed rgba(252,165,165,.40); }

.sk-node { margin-bottom: 4px; }
.sk-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
.sk-node.lvl2 { margin-left: 14px; padding-left: 13px; border-left: 2px solid rgba(255,255,255,.14); }
.sk-node.lvl3 { margin-left: 30px; padding-left: 13px; border-left: 2px solid rgba(255,255,255,.09); }
.sk-node.lvl4 { margin-left: 44px; padding-left: 13px; border-left: 2px solid rgba(255,255,255,.09); }
.sk-head { display: flex; align-items: baseline; gap: 8px; padding: 3px 6px; border-radius: 5px; transition: background-color .2s ease, box-shadow .2s ease; }
.sk-tag { flex: none; font-size: 10px; font-weight: 700; color: #64748B; font-family: "SF Mono", Menlo, Consolas, monospace; }
.sk-htext { font-size: 16px; font-weight: 700; color: #F1F5F9; line-height: 1.35; letter-spacing: -0.2px; }
.sk-node.lvl2 .sk-htext { font-size: 14px; font-weight: 600; color: #E2E8F0; }
.sk-node.lvl3 .sk-htext, .sk-node.lvl4 .sk-htext { font-size: 12.5px; font-weight: 600; color: #94A3B8; }

.sk-blocks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 0; }
.sk-blk { padding: 3px 8px; border-radius: 4px; font-size: 11.5px; transition: box-shadow .2s ease, background-color .2s ease; }
.sk-blk i { font-style: normal; opacity: .7; }
.sk-blk.has { color: #86EFAC; background: rgba(134,239,172,.10); }
.sk-blk.none { color: #FCA5A5; background: rgba(252,165,165,.08); border: 1px dashed rgba(252,165,165,.40); }

.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sk-card { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; min-width: 0; }
.sk-card b { flex: none; font-size: 11px; }
.sk-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-card em { font-style: normal; font-size: 10.5px; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-card.has { color: #86EFAC; background: rgba(134,239,172,.10); border: 1px solid rgba(134,239,172,.28); }
.sk-card.none { color: #FCA5A5; background: rgba(252,165,165,.08); border: 1px dashed rgba(252,165,165,.40); }

.sk-blank { padding: 18px 14px; text-align: center; font-size: 12px; line-height: 1.6; color: #FCA5A5; border: 1px dashed rgba(252,165,165,.40); border-radius: 8px; background: rgba(252,165,165,.06); }

.skel-foot-note { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px 20px 13px; border-top: 1px solid rgba(255,255,255,.08); }
.fn { padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.fn.has { color: #86EFAC; background: rgba(134,239,172,.10); }
.fn.none { color: #FCA5A5; background: rgba(252,165,165,.08); }

.skel { --lit-ring: color-mix(in srgb, var(--key-b) 55%, #FFFFFF); }
.sk-head.is-lit, .sk-blk.is-lit { box-shadow: 0 0 0 2px var(--lit-ring); background: color-mix(in srgb, var(--key-b) 62%, transparent); }
.sk-head.is-lit .sk-htext, .sk-head.is-lit .sk-tag, .sk-blk.is-lit { color: #FFFFFF; }

@media (max-width: 1180px) {
  .dash-split.has-rail { grid-template-columns: minmax(0, 1fr); padding: 24px 24px 0; }
  .dash-rail { position: static; height: 700px; margin: 0 auto 24px; width: 100%; max-width: 980px; }
  .skel-fit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 14px; align-items: start; }
  .skel-fit [data-anchor="structure"] { grid-column: 1; grid-row: 1 / span 2; }
  .skel-fit [data-anchor="head"] { grid-column: 2; grid-row: 1; }
  .skel-fit [data-anchor="wanted"] { grid-column: 2; grid-row: 2; margin-bottom: 0; }
  .sk-grid { grid-template-columns: 1fr; }
}