/* widget/style.css
 * Solar Surveys Pre-Check Widget styles.
 * Inherits live-site tokens from the host stylesheet load order:
 *   --color-primary, --color-secondary, --color-card, --color-gold,
 *   --color-gold-light, --color-white, --color-white-pure, --color-muted,
 *   --color-border, --font-display, --font-heading, --font-body, --font-mono,
 *   --spacing-section, --transition-smooth.
 *
 * The widget is embedded into solarsurveys.co.uk and therefore must not
 * redefine these tokens. The verdict-* tokens below are widget-local and
 * scoped to the .ss-widget root so they never leak into the host page.
 *
 * Form pattern lifted verbatim from contact-us.html lines 39-71.
 * Card pattern follows .svc-card. Disclaimer follows .nda-disclosure.
 * Footer follows .modern-footer.
 *
 * Copyright (c) 2026 Solar Surveys Ltd.
 */

/* ============================================================
   ROOT SCOPE AND WIDGET-LOCAL TOKENS
   ============================================================ */

/* Body bg + reset for standalone (iframe) view. Iframe is isolated; host
   stylesheet does not reach. Tokens are owned by the widget. */
html, body {
  margin: 0;
  padding: 0;
  background: #0a1628;
  min-height: 100vh;
}

.ss-widget {
  /* Widget tokens, literal values. The widget is iframe-embedded so the
     host's CSS custom properties don't reach this scope, and the
     recursive var(--name, fallback) pattern creates a cycle that
     invalidates the variable. Declare straight. */
  --color-primary: #0a1628;
  --color-secondary: #111e36;
  --color-card: #0f1a2e;
  --color-gold: #c9a84c;
  --color-gold-light: #d4b86a;
  --color-white: #f8f8f8;
  --color-white-pure: #ffffff;
  --color-muted: #8892a4;
  --color-electric: #4a90d9;
  --color-border: rgba(201,168,76,0.2);
  --font-display: 'Playfair Display', serif;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Widget-local verdict tokens: functional, scoped, never global */
  --verdict-green: #27ae60;
  --verdict-amber: #f39c12;
  --verdict-red: #e74c3c;

  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  min-height: 100vh;
}

.ss-widget *, .ss-widget *::before, .ss-widget *::after { box-sizing: border-box; }

.ss-widget .ss-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ============================================================
   HERO / FRAME SHELL (mirrors .svc-hero with blueprint grid + ambient)
   ============================================================ */

.ss-widget .ss-hero {
  padding: 6rem 0 4rem;
  background: var(--color-primary);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

/* Layered ambient: radial gold on right, radial blue on lower-left */
.ss-widget .ss-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 75% 25%, rgba(201,168,76,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 85%, rgba(74,144,217,0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Blueprint engineering grid (gold lines + gold dots, exact live site pattern) */
.ss-widget .ss-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.05) 1px, transparent 1px),
    radial-gradient(circle, rgba(201,168,76,0.10) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 60px 60px;
  background-position: 0 0, 0 0, 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Snow-zone motif: five horizontal bands across the hero, zone 1 (lightest)
   top to zone 5 (darkest) bottom, 1px gold hairlines at band boundaries.
   CSS-only, static. Reads as "this tool knows your geography" without
   competing with the H1 / lede / form. Brief 001 Item 12, Option C. */
.ss-widget .ss-hero-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Hairlines at 20%, 40%, 60%, 80% of hero height */
    linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(20% - 1px),
      rgba(201,168,76,0.18) calc(20% - 1px),
      rgba(201,168,76,0.18) 20%,
      transparent 20%,
      transparent calc(40% - 1px),
      rgba(201,168,76,0.16) calc(40% - 1px),
      rgba(201,168,76,0.16) 40%,
      transparent 40%,
      transparent calc(60% - 1px),
      rgba(201,168,76,0.14) calc(60% - 1px),
      rgba(201,168,76,0.14) 60%,
      transparent 60%,
      transparent calc(80% - 1px),
      rgba(201,168,76,0.12) calc(80% - 1px),
      rgba(201,168,76,0.12) 80%,
      transparent 80%
    ),
    /* Band fills, zone 1 lightest top to zone 5 darkest bottom */
    linear-gradient(
      to bottom,
      rgba(248,248,248,0.018) 0%,
      rgba(248,248,248,0.018) 20%,
      rgba(248,248,248,0.014) 20%,
      rgba(248,248,248,0.014) 40%,
      rgba(248,248,248,0.010) 40%,
      rgba(248,248,248,0.010) 60%,
      rgba(248,248,248,0.006) 60%,
      rgba(248,248,248,0.006) 80%,
      rgba(248,248,248,0.003) 80%,
      rgba(248,248,248,0.003) 100%
    );
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 30%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, transparent 95%);
  mask-image: radial-gradient(ellipse 75% 80% at 50% 30%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, transparent 95%);
}

.ss-widget .ss-hero-inner {
  position: relative;
  z-index: 1;
}

/* Institutional wordmark, top-left of hero, above the eyebrow.
   Text-rendered, selectable, no link (iframe context). */
.ss-widget .ss-wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0 0 2rem;
}

.ss-widget .ss-wordmark-text {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  line-height: 1;
}

.ss-widget .ss-wordmark-rule {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.6;
}

.ss-widget .ss-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Eyebrow leading dash, gives the institutional / report-deliverable feel */
.ss-widget .ss-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.6;
}

.ss-widget h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  color: var(--color-white-pure);
  line-height: 1.1;
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}

.ss-widget h1 em { font-style: italic; color: var(--color-gold); }

/* Apple-style cinematic text mask (live site pattern) */
.ss-widget .ss-apple-text-mask {
  background: linear-gradient(135deg, #ffffff 10%, var(--color-gold) 60%, #ffffff 90%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ss-apple-shine 7s linear infinite;
}

@keyframes ss-apple-shine {
  to { background-position: 200% center; }
}

.ss-widget .ss-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-white-pure);
  margin: 0 0 1.25rem;
}

.ss-widget .ss-display-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-white-pure);
  margin: 0 0 1rem;
  line-height: 1.25;
}

.ss-widget .ss-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ss-widget .ss-lede {
  font-size: 1.05rem;
  color: rgba(248,248,248,0.78);
  line-height: 1.8;
  max-width: 640px;
  margin: 0 0 2.5rem;
}

/* ============================================================
   PROGRESS INDICATOR (Inputs -> Gate -> Result)
   ============================================================ */

.ss-widget .ss-progress {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,248,248,0.45);
  margin-bottom: 2.5rem;
}

.ss-widget .ss-progress-step { display: flex; align-items: center; gap: 0.55rem; }

.ss-widget .ss-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(248,248,248,0.2);
  border: 1px solid rgba(248,248,248,0.25);
  position: relative;
}

.ss-widget .ss-progress-step[data-state="active"] { color: var(--color-gold); }
.ss-widget .ss-progress-step[data-state="active"] .ss-progress-dot {
  background: var(--color-gold);
  border-color: var(--color-gold);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.45), 0 0 16px rgba(201,168,76,0.45);
}

/* Pulsing ping ring on the active step */
.ss-widget .ss-progress-step[data-state="active"] .ss-progress-dot::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.5);
  animation: ss-ping 2.4s ease-out infinite;
}

@keyframes ss-ping {
  0%   { transform: scale(0.85); opacity: 0.7; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

.ss-widget .ss-progress-step[data-state="done"] { color: rgba(201,168,76,0.7); }
.ss-widget .ss-progress-step[data-state="done"] .ss-progress-dot {
  background: rgba(201,168,76,0.55);
  border-color: rgba(201,168,76,0.55);
}

.ss-widget .ss-progress-divider {
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: rgba(248,248,248,0.1);
}

/* ============================================================
   FORM PATTERN (lifted from contact-us.html lines 39-71)
   ============================================================ */

.ss-widget .ss-card {
  background: linear-gradient(180deg, var(--color-card) 0%, rgba(15,26,46,0.85) 100%);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  padding: 2.5rem;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(201,168,76,0.08),
    0 24px 48px rgba(0,0,0,0.35);
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Top hairline gold gradient (live site .svc-card pattern) */
.ss-widget .ss-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.45), transparent);
  z-index: 0;
  pointer-events: none;
}

/* Mouse-tracking radial glow (set --mouse-x/--mouse-y in script.js) */
.ss-widget .ss-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--mouse-x, -200px) var(--mouse-y, -200px),
    rgba(201,168,76,0.10),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.ss-widget .ss-card:hover::after { opacity: 1; }
.ss-widget .ss-card:hover {
  border-color: rgba(201,168,76,0.45);
}

.ss-widget .ss-card > * { position: relative; z-index: 1; }

.ss-widget .ss-form { display: flex; flex-direction: column; gap: 1.25rem; }
.ss-widget .ss-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.ss-widget .ss-form-group { display: flex; flex-direction: column; gap: 0.4rem; }

.ss-widget .ss-form-group label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ss-widget .ss-form-group input,
.ss-widget .ss-form-group select,
.ss-widget .ss-form-group textarea {
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-white-pure);
  font-family: var(--font-body);
  font-size: 0.93rem;
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.ss-widget .ss-form-group input:focus,
.ss-widget .ss-form-group select:focus,
.ss-widget .ss-form-group textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}

.ss-widget .ss-form-group select { appearance: none; cursor: pointer; }

/* ============================================================
   CUSTOM SEARCHABLE COMBOBOX (Brief 001 Item 01)
   Replaces the native <select> for the roof_material field with
   a fully accessible, keyboard-navigable, type-to-filter UI.
   Hidden input carries the selected value for form submission.
   ============================================================ */

.ss-widget .ss-combobox {
  position: relative;
  width: 100%;
}

.ss-widget .ss-combobox-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-white-pure);
  font-family: var(--font-body);
  font-size: 0.93rem;
  padding: 0.85rem 1rem;
  outline: none;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 44px;
}

.ss-widget .ss-combobox-field:focus,
.ss-widget .ss-combobox-field:hover {
  border-color: var(--color-gold);
}

.ss-widget .ss-combobox-field:focus {
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}

.ss-widget .ss-combobox-field[aria-expanded="true"] {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}

.ss-widget .ss-combobox-value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-widget .ss-combobox-value:not([data-selected="true"])::before {
  content: attr(data-placeholder);
  color: var(--color-muted);
}

.ss-widget .ss-combobox-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  transition: transform 0.2s ease;
}

.ss-widget .ss-combobox-field[aria-expanded="true"] .ss-combobox-chevron {
  transform: rotate(180deg);
}

.ss-widget .ss-combobox-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-secondary);
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  z-index: 10;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}

/* Author display:flex above overrides the UA [hidden] { display: none } default,
   so panel.hidden = true would visually do nothing. Re-assert the hide rule
   at higher specificity. */
.ss-widget .ss-combobox-panel[hidden] {
  display: none;
}

.ss-widget .ss-combobox-search {
  background: var(--color-primary);
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-white-pure);
  font-family: var(--font-body);
  font-size: 0.93rem;
  padding: 0.75rem 1rem;
  outline: none;
  width: 100%;
}

.ss-widget .ss-combobox-search::placeholder {
  color: var(--color-muted);
}

.ss-widget .ss-combobox-options {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  overflow-y: auto;
  flex: 1;
}

.ss-widget .ss-combobox-group-header {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding: 0.85rem 1rem 0.4rem;
  border-top: 1px solid rgba(201,168,76,0.15);
  margin-top: 0.25rem;
}

.ss-widget .ss-combobox-options li.ss-combobox-group-header:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0.4rem;
}

.ss-widget .ss-combobox-option {
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--color-white);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background 0.12s ease, color 0.12s ease;
}

.ss-widget .ss-combobox-option:hover,
.ss-widget .ss-combobox-option--active {
  background: rgba(201,168,76,0.12);
  color: var(--color-gold);
}

.ss-widget .ss-combobox-option[aria-selected="true"] {
  color: var(--color-gold);
}

.ss-widget .ss-combobox-empty {
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
  text-align: center;
  margin: 0;
}

.ss-widget .ss-form-group textarea { resize: vertical; min-height: 120px; }

/* Input wrap for inputs that surface an in-field state indicator (postcode tick).
   Tighter selector wins over the form-group input padding at every viewport. */
.ss-widget .ss-form-group .ss-input-wrap {
  position: relative;
  width: 100%;
}

.ss-widget .ss-form-group .ss-input-wrap input {
  padding-right: 2.75rem;
}

.ss-widget .ss-input-tick {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.ss-widget .ss-input-wrap[data-valid="true"] .ss-input-tick {
  opacity: 1;
}

/* Inline field validation message. Reserves space so the message
   does not push later fields when it appears or hides. */
.ss-widget .ss-form-error {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--verdict-red);
  margin: 0.35rem 0 0;
  min-height: 1rem;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ss-widget .ss-form-error[data-visible="true"] {
  opacity: 1;
}

.ss-widget .ss-form-help {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0.2rem 0 0;
}

.ss-widget .ss-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  font-size: 0.88rem;
  color: var(--color-white);
}

.ss-widget .ss-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-gold);
}

/* Honeypot, invisible but kept in DOM */
.ss-widget .ss-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.ss-widget .ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), background 0.25s, border-color 0.25s, color 0.25s;
  min-height: 44px;
}

.ss-widget .ss-btn-primary {
  background: var(--color-gold);
  color: var(--color-primary);
}

.ss-widget .ss-btn-primary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.25);
}

.ss-widget .ss-btn-outline {
  background: transparent;
  color: var(--color-white-pure);
  border-color: rgba(255,255,255,0.4);
}

.ss-widget .ss-btn-outline:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--color-white-pure);
}

.ss-widget .ss-btn-block { width: 100%; }

.ss-widget .ss-btn-subline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin: 0.6rem 0 0;
  text-align: center;
}

/* ============================================================
   VERDICT BLOCK
   ============================================================ */

.ss-widget .ss-verdict-block {
  position: relative;
  background: linear-gradient(180deg, var(--color-card) 0%, rgba(11,22,40,0.95) 100%);
  border: 1px solid rgba(201,168,76,0.3);
  border-left: 3px solid var(--color-gold);
  padding: 3rem 2.75rem;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(201,168,76,0.10),
    0 30px 80px rgba(0,0,0,0.5);
}

/* Corner brackets (live site .hubs-map-frame pattern) */
.ss-widget .ss-verdict-block .ss-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 3;
  pointer-events: none;
}
.ss-widget .ss-verdict-block .ss-corner-tl { top: 10px; left: 10px; border-top: 1.5px solid var(--color-gold); border-left: 1.5px solid var(--color-gold); }
.ss-widget .ss-verdict-block .ss-corner-tr { top: 10px; right: 10px; border-top: 1.5px solid var(--color-gold); border-right: 1.5px solid var(--color-gold); }
.ss-widget .ss-verdict-block .ss-corner-bl { bottom: 10px; left: 10px; border-bottom: 1.5px solid var(--color-gold); border-left: 1.5px solid var(--color-gold); }
.ss-widget .ss-verdict-block .ss-corner-br { bottom: 10px; right: 10px; border-bottom: 1.5px solid var(--color-gold); border-right: 1.5px solid var(--color-gold); }

.ss-widget .ss-verdict-block[data-band="green"] { border-left-color: var(--verdict-green); }
.ss-widget .ss-verdict-block[data-band="green"] .ss-corner { border-color: var(--verdict-green) !important; }
.ss-widget .ss-verdict-block[data-band="amber"] { border-left-color: var(--verdict-amber); }
.ss-widget .ss-verdict-block[data-band="amber"] .ss-corner { border-color: var(--verdict-amber) !important; }
.ss-widget .ss-verdict-block[data-band="red"]   { border-left-color: var(--verdict-red); }
.ss-widget .ss-verdict-block[data-band="red"]   .ss-corner { border-color: var(--verdict-red) !important; }

.ss-widget .ss-verdict-content {
  position: relative;
  z-index: 2;
}

.ss-widget .ss-verdict-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(248,248,248,0.08);
}

.ss-widget .ss-verdict-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  text-transform: uppercase;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ss-widget .ss-verdict-meta strong { color: var(--color-white); font-weight: 500; }

.ss-widget .ss-verdict-result {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.ss-widget .ss-verdict-result-label {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.5rem);
  color: var(--color-white-pure);
  margin: 0;
  line-height: 1.2;
}

.ss-widget .ss-verdict-result-label[data-band="green"] { color: var(--verdict-green); }
.ss-widget .ss-verdict-result-label[data-band="amber"] { color: var(--verdict-amber); }
.ss-widget .ss-verdict-result-label[data-band="red"]   { color: var(--verdict-red); }

/* Capacity bar visualisation (Brief 001 Item 02). Large band-coloured
   utilisation number paired with a horizontal bar that animates from 0
   to the utilisation value over 800ms. 80% safety-margin marker is
   static. The 4-cell summary stays beneath as supporting detail. */
.ss-widget .ss-capacity {
  margin: 0 0 2rem;
}

.ss-widget .ss-capacity-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.ss-widget .ss-capacity-util-group {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.ss-widget .ss-capacity-util {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ss-widget .ss-capacity-util[data-band="green"] { color: var(--verdict-green); }
.ss-widget .ss-capacity-util[data-band="amber"] { color: var(--verdict-amber); }
.ss-widget .ss-capacity-util[data-band="red"]   { color: var(--verdict-red); }

.ss-widget .ss-capacity-util-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ss-widget .ss-capacity-headroom {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.ss-widget .ss-capacity-bar {
  position: relative;
  width: 100%;
  height: 32px;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.ss-widget .ss-capacity-fill {
  height: 100%;
  width: 0;
  border-radius: 7px 0 0 7px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}

.ss-widget .ss-capacity-fill[data-band="green"] { background: var(--verdict-green); }
.ss-widget .ss-capacity-fill[data-band="amber"] { background: var(--verdict-amber); }
.ss-widget .ss-capacity-fill[data-band="red"]   { background: var(--verdict-red); }

/* 80% safety-margin marker. 1px dashed gold line, full-bar height,
   sitting above the fill so the boundary remains visible at any band. */
.ss-widget .ss-capacity-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 80%;
  width: 0;
  border-left: 1px dashed rgba(201,168,76,0.6);
  z-index: 2;
  pointer-events: none;
}

.ss-widget .ss-capacity-marker-label {
  position: absolute;
  top: -1.35rem;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  white-space: nowrap;
}

.ss-widget .ss-verdict-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  margin: 1.5rem 0;
}

.ss-widget .ss-summary-cell {
  padding: 1.25rem 1rem;
  text-align: center;
  border-right: 1px solid var(--color-border);
}

.ss-widget .ss-summary-cell:last-child { border-right: none; }

.ss-widget .ss-summary-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-gold);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}

/* Animated gold shimmer on utilisation value (live site .hubs-stat-value pattern) */
.ss-widget .ss-summary-cell:last-child .ss-summary-val {
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 40%, #f5e09a 70%, #c9a84c 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: ss-stat-shimmer 5s linear infinite;
}

@keyframes ss-stat-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

.ss-widget .ss-summary-unit {
  font-size: 0.55em;
  color: var(--color-muted);
  margin-left: 0.25em;
  letter-spacing: 0;
}

.ss-widget .ss-summary-lbl {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  text-transform: uppercase;
  line-height: 1.35;
}

.ss-widget .ss-reasoning {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--color-white);
  margin: 1.5rem 0;
}

.ss-widget .ss-reasoning p { margin: 0; }

.ss-widget .ss-regulatory-anchor {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  padding: 1rem 0;
  border-top: 1px dashed rgba(201,168,76,0.2);
  border-bottom: 1px dashed rgba(201,168,76,0.2);
  margin: 1.5rem 0;
}

/* ============================================================
   CONVERSION STACK BLOCKS (Layers 2-5)
   ============================================================ */

.ss-widget .ss-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.ss-widget .ss-check-col h4 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 0.85rem;
}

.ss-widget .ss-check-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ss-widget .ss-check-col li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.55;
}

.ss-widget .ss-check-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 1px;
  background: rgba(201,168,76,0.5);
}

.ss-widget .ss-evidence-block {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.ss-widget .ss-evidence-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 0.75rem;
}

.ss-widget .ss-evidence-block p {
  margin: 0 0 0.85rem;
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--color-white);
}

.ss-widget .ss-evidence-block p:last-child { margin-bottom: 0; }

.ss-widget .ss-time-lifetime {
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--color-white);
  padding: 1.25rem;
  background: rgba(201,168,76,0.05);
  border-left: 2px solid var(--color-gold);
  margin: 1.5rem 0;
}

.ss-widget .ss-condensed-block {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-white);
  padding: 1.25rem;
  background: rgba(201,168,76,0.05);
  border-left: 2px solid var(--color-gold);
  margin: 1.5rem 0;
}

/* Three-cell stat strip on Green verdict (Brief 001 Item 08).
   Lives ABOVE the conversion CTA section. Cells separated by 1px gold
   borders. Numbers carry the same shimmer animation as the utilisation
   cell on the verdict summary. Punchline below the strip preserves the
   DECISIONS.md conversion anchor. */
.ss-widget .ss-stat-strip {
  margin: 2.5rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201,168,76,0.3);
}

.ss-widget .ss-stat-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
}

.ss-widget .ss-stat-cell {
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ss-widget .ss-stat-cell:last-child { border-right: none; }

.ss-widget .ss-stat-value {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 40%, #f5e09a 70%, #c9a84c 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: ss-stat-shimmer 5s linear infinite;
}

.ss-widget .ss-stat-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  text-transform: uppercase;
  line-height: 1.35;
}

.ss-widget .ss-stat-strip-punchline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 1rem 0 0;
  line-height: 1.6;
}

/* ============================================================
   TWO-STAGE CTA
   ============================================================ */

.ss-widget .ss-cta-section {
  margin: 2.5rem 0;
  background: linear-gradient(135deg, #0A1426 0%, #111e36 100%);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.ss-widget .ss-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(201,168,76,0.06), transparent 70%);
  pointer-events: none;
}

.ss-widget .ss-cta-inner { position: relative; z-index: 1; }

.ss-widget .ss-cta-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 0.85rem;
}

.ss-widget .ss-cta-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--color-white-pure);
  margin: 0 0 1.5rem;
  line-height: 1.3;
  font-weight: 700;
}

.ss-widget .ss-pricing-panel {
  margin: 1.5rem 0 0;
  padding: 1.75rem;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  display: none;
}

.ss-widget .ss-pricing-panel[data-open="true"] { display: block; }

.ss-widget .ss-pricing-panel h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 1rem;
}

.ss-widget .ss-pricing-panel p {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-white);
}

.ss-widget .ss-pricing-panel p:last-of-type { margin-bottom: 1.25rem; }

/* ============================================================
   DISCLAIMER PANEL (.nda-disclosure pattern)
   ============================================================ */

.ss-widget .ss-disclaimer {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(201,168,76,0.14);
  border-radius: 3px;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
}

.ss-widget .ss-disclaimer-warning {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--color-white-pure);
  margin: 0 0 0.85rem;
  line-height: 1.55;
}

.ss-widget .ss-disclaimer-body {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(248,248,248,0.55);
  font-style: italic;
  margin: 0;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* ============================================================
   EMAIL GATE
   ============================================================ */

.ss-widget .ss-gate-card {
  max-width: 540px;
  margin: 0 auto;
}

.ss-widget .ss-gate-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-white-pure);
  margin: 0 0 1rem;
  line-height: 1.25;
}

.ss-widget .ss-gate-body {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(248,248,248,0.78);
  margin: 0 0 1.5rem;
}

.ss-widget .ss-privacy-notice {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  line-height: 1.65;
  margin: 1rem 0 0;
}

/* ============================================================
   THANK YOU SCREEN
   ============================================================ */

.ss-widget .ss-thankyou {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.ss-widget .ss-thankyou-conf {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--color-white);
  line-height: 1.7;
}

.ss-widget .ss-thankyou-conf div { padding: 0.25rem 0; }

.ss-widget .ss-thankyou-conf strong {
  color: var(--color-gold);
  font-weight: 500;
}

.ss-widget .ss-time-line {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-white-pure);
  margin: 0;
  line-height: 1.5;
}

.ss-widget .ss-asset-offer {
  padding: 1.5rem 1.75rem;
  background: rgba(201,168,76,0.05);
  border-left: 2px solid var(--color-gold);
  border-radius: 4px;
}

.ss-widget .ss-asset-offer p {
  margin: 0 0 1rem;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--color-white);
}

/* ============================================================
   IP NOTICE (always-visible muted block, Brief 001 Item 06)
   Bloomberg / Refinitiv / Reuters surface IP and disclaimers with
   visible weight. The notice reads as institutional disclosure,
   not as a hideable footnote.
   ============================================================ */

.ss-widget .ss-ip-notice {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.ss-widget .ss-ip-notice-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.85rem;
}

.ss-widget .ss-ip-notice pre {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: rgba(248,248,248,0.55);
  white-space: pre-wrap;
  margin: 0;
  padding: 1.25rem;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(201,168,76,0.2);
  font-style: italic;
}

/* ============================================================
   FOOTER
   ============================================================ */

.ss-widget .ss-footer {
  background: #050b14;
  padding: 4rem 0 2.5rem;
  margin-top: 6rem;
  border-top: 1px solid rgba(251, 233, 179, 0.05);
  color: var(--color-muted);
  position: relative;
}

/* Thin gold hairline above the footer (matches card top pattern) */
.ss-widget .ss-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
  pointer-events: none;
}

.ss-widget .ss-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.ss-widget .ss-footer-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 0.85rem;
}

.ss-widget .ss-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  line-height: 1.55;
}

.ss-widget .ss-footer-copyright {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
}

/* ============================================================
   ERROR / WARNING STATES
   ============================================================ */

.ss-widget .ss-alert {
  padding: 1rem 1.25rem;
  background: rgba(231, 76, 60, 0.08);
  border-left: 3px solid var(--verdict-red);
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-white-pure);
  margin: 1rem 0;
}

.ss-widget .ss-alert--info {
  background: rgba(201,168,76,0.06);
  border-left-color: var(--color-gold);
  color: var(--color-white);
}

/* ============================================================
   STEP CONTAINER VISIBILITY (fade-in for non-verdict steps)
   ============================================================ */

.ss-widget .ss-step { display: none; }
.ss-widget .ss-step[data-active="true"] {
  display: block;
  animation: ss-step-fade 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Spec rule: no entrance animation on the verdict block specifically. */
.ss-widget .ss-step[data-step="verdict"][data-active="true"] { animation: none; }

@keyframes ss-step-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FOUR-STEP LOADING TICKER (Brief 001 Item 03)
   Reuses the ping keyframe from the progress dot block above.
   1.5s minimum animation (375ms per step). If API returns first,
   ticker runs to completion. If API takes longer, the final step
   stays in 'active' state until API resolves.
   ============================================================ */

.ss-widget .ss-ticker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 0;
}

.ss-widget .ss-ticker-step {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: 0.5;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.ss-widget .ss-ticker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(248,248,248,0.15);
  border: 1px solid rgba(248,248,248,0.25);
  position: relative;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ss-widget .ss-ticker-step[data-state="active"] {
  opacity: 1;
  color: var(--color-gold);
}

.ss-widget .ss-ticker-step[data-state="active"] .ss-ticker-dot {
  background: var(--color-gold);
  border-color: var(--color-gold);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.45), 0 0 16px rgba(201,168,76,0.45);
}

.ss-widget .ss-ticker-step[data-state="active"] .ss-ticker-dot::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.5);
  animation: ss-ping 2.4s ease-out infinite;
}

.ss-widget .ss-ticker-step[data-state="done"] {
  opacity: 0.85;
  color: var(--color-gold);
}

.ss-widget .ss-ticker-step[data-state="done"] .ss-ticker-dot {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

/* ============================================================
   LOADING STATE
   ============================================================ */

.ss-widget .ss-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.ss-widget .ss-loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(201,168,76,0.25);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: ss-spin 0.7s linear infinite;
}

@keyframes ss-spin { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .ss-widget .ss-hero { padding: 5rem 0 3rem; }
  .ss-widget .ss-verdict-summary { grid-template-columns: repeat(2, 1fr); }
  .ss-widget .ss-summary-cell:nth-child(2) { border-right: none; }
  .ss-widget .ss-summary-cell:nth-child(1),
  .ss-widget .ss-summary-cell:nth-child(2) { border-bottom: 1px solid var(--color-border); }
  .ss-widget .ss-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .ss-widget .ss-footer-col-copyright { grid-column: span 2; }
}

@media (max-width: 768px) {
  .ss-widget .ss-container { padding: 0 1.25rem; }
  .ss-widget .ss-hero { padding: 4rem 0 2.5rem; }
  .ss-widget .ss-form-row { grid-template-columns: 1fr; }
  .ss-widget .ss-card { padding: 1.75rem 1.5rem; }
  .ss-widget .ss-verdict-block { padding: 2rem 1.5rem; }
  .ss-widget .ss-cta-section { padding: 1.75rem 1.5rem; }
  .ss-widget .ss-check-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ss-widget .ss-progress { font-size: 0.55rem; gap: 0.5rem; }
  .ss-widget .ss-progress-divider { max-width: 24px; }
  .ss-widget .ss-form-group input,
  .ss-widget .ss-form-group select,
  .ss-widget .ss-form-group textarea { font-size: 16px; padding: 0.75rem 0.85rem; }
  .ss-widget .ss-form-group .ss-input-wrap input { padding-right: 2.4rem; }
  .ss-widget .ss-input-tick { right: 0.7rem; width: 16px; height: 16px; }
  .ss-widget .ss-summary-val { font-size: 1.4rem; }
  .ss-widget .ss-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ss-widget .ss-footer-col-copyright { grid-column: span 1; }
  .ss-widget .ss-stat-strip-grid { grid-template-columns: 1fr; }
  .ss-widget .ss-stat-cell { border-right: none; border-bottom: 1px solid var(--color-border); }
  .ss-widget .ss-stat-cell:last-child { border-bottom: none; }
  .ss-widget .ss-capacity-util { font-size: 2rem; }
  .ss-widget .ss-capacity-bar { height: 28px; }
  .ss-widget .ss-capacity-stats { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .ss-widget .ss-ticker-step { font-size: 0.7rem; }
  .ss-widget .ss-combobox-field { font-size: 16px; padding: 0.75rem 0.85rem; }
  .ss-widget .ss-combobox-search { font-size: 16px; padding: 0.75rem 0.85rem; }
  .ss-widget .ss-combobox-option { font-size: 16px; padding: 0.85rem 0.85rem; }
}

@media (max-width: 375px) {
  .ss-widget .ss-container { padding: 0 1rem; }
  .ss-widget .ss-card { padding: 1.5rem 1.25rem; }
  .ss-widget .ss-verdict-block { padding: 1.75rem 1.25rem; }
}