/* ============================================
   PersonalCloudComputing.com
   Digital Sovereignty — Light Editorial
   White surfaces · royal-blue accent · Inter
   Zero CDN, Zero Tracking, Pure CSS
   ============================================

   COLOUR OWNERSHIP (Constitution Article 5, FEAT-PccTheme-02)
   ------------------------------------------------------------
   --brand-primary / --brand-secondary / --brand-accent are NOT
   declared here. They are injected into :root by _Host.cshtml,
   resolved from site-profile.yaml -> SiteSettings -> constant and
   validated as hex literals (BRULE-BrandToken-01).

   Everything blue below is DERIVED from those three with
   color-mix(), so changing the site's brand colour re-tints the
   whole page coherently without touching this file. The fallbacks
   in the var() calls exist only so the stylesheet is still legible
   if opened standalone — at runtime the injected values always win.

   Neutrals (white, greys, ink, hairlines) are deliberately static:
   they are not brand, and making them settable would let an
   operator render the site unreadable.
   ============================================ */

/* ===== SELF-HOSTED TYPE (Article 6 — zero CDN) ===== */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/inter/inter-latin-800-normal.woff2') format('woff2')}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ---- Brand ramp, derived from the injected --brand-* tokens ---- */
  --blue:        var(--brand-primary, #1d4ed8);
  --blue-bright: var(--brand-accent, #2563eb);
  --blue-deep:   var(--brand-secondary, #1e40af);
  --blue-050: color-mix(in srgb, var(--brand-primary, #1d4ed8)  7%, #ffffff);
  --blue-100: color-mix(in srgb, var(--brand-primary, #1d4ed8) 16%, #ffffff);
  --blue-200: color-mix(in srgb, var(--brand-primary, #1d4ed8) 30%, #ffffff);
  --blue-700: color-mix(in srgb, var(--brand-primary, #1d4ed8) 82%, #0b1220);
  --blue-ring:  color-mix(in srgb, var(--brand-accent, #2563eb) 22%, transparent);
  --blue-shadow: color-mix(in srgb, var(--brand-primary, #1d4ed8) 42%, transparent);

  /* ---- Neutral surfaces (static — not brand) ---- */
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --surface-band: #f1f5f9;
  --line: #e5e7eb;
  --line-soft: #eef1f5;
  --line-strong: #d7dee8;

  /* ---- Ink ---- */
  --text-bright: #0f172a;
  --text-primary: #334155;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;

  /* ---- Signals ---- */
  --amber: #b45309;
  --amber-bg: #fffbeb;
  --amber-border: #fde68a;
  --emerald: #047857;
  --emerald-bg: #ecfdf5;
  --emerald-border: #a7f3d0;
  --red: #b91c1c;
  --red-bg: #fef2f2;
  --red-border: #fecaca;

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --max-w: 1120px;
  --max-w-narrow: 760px;
  /* PLAT-272: HD/4K first — a page carrying a wide table (the downloads grid) takes this instead of
     --max-w, so the table uses the screen before it ever scrolls. 1760px fits a 1920 screen with the
     gutters to spare. */
  --max-w-wide: 110rem;
  --radius: 14px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .10);
  --shadow-lg: 0 2px 6px rgba(15, 23, 42, .05), 0 24px 48px -20px rgba(15, 23, 42, .16);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text-primary);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.pcc-page { position: relative; }

/* Display type is bound to the CLASS, not the tag: several of these headings are
   rendered as <div> (Contact and Privacy both do), so relying on an h1/h2/h3
   selector alone would silently drop them to body weight. */
h1, h2, h3,
.hero-headline,
.section-heading,
.lead-headline,
.product-title,
.pillar-title,
.step-title,
.blog-title,
.article-title,
.blog-article-title,
.contact-success-heading {
  font-family: var(--font-display);
  color: var(--text-bright);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
}

/* ===== ANIMATIONS ===== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== LINKS ===== */

a { color: var(--blue); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--blue-deep); }

/* Visible keyboard focus everywhere (spec S1.5) */
:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== SHARED LAYOUT ===== */

.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.75rem;
}
.section-narrow { max-width: var(--max-w-narrow); }

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.75rem;
}

/* Centred heading block: eyebrow + heading + subheading */
.section-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 3rem;
}
.section-head .section-subheading { margin-bottom: 0; }

.section-heading {
  font-size: 2.5rem;
  color: var(--text-bright);
  text-align: center;
  letter-spacing: -0.028em;
  margin-bottom: 0.85rem;
}
.section-subheading {
  color: var(--text-secondary);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 3rem;
  line-height: 1.7;
  font-size: 1.02rem;
}

/* ===== SITE HEADER (FEAT-PccBrand-01) ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.85rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  text-decoration: none;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  /* Both stops derive from --brand-primary. Keying the gradient to accent +
     secondary left the mark stranded on the old colour when an operator changed
     only the primary — verified by restarting with theme.primary flipped. */
  background: linear-gradient(160deg, var(--blue), var(--blue-700));
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #ffffff;
  box-shadow: 0 4px 12px -3px var(--blue-shadow);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.015em;
}
.brand-tagline {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.header-nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
}
.header-nav a {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;   /* "The Four Pillars" wraps to three lines without this */
}
.header-nav a:hover { color: var(--blue); }
.header-cta { flex-shrink: 0; }

/* PLAT-258 W6: the signed-in account beside its Sign out chip. The email is hidden on a phone
   bar, where the wordmark and the chip already fill the width. */
.header-account { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.header-who { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 640px) { .header-who { display: none; } }

/* PLAT-258 W6: the admin pages' signed-in bar takes the site's colours. */
.signedin-bar { --signedin-accent: var(--blue); --signedin-muted: var(--text-secondary); }

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

.btn-primary,
.btn-ghost,
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.72rem 1.4rem;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary,
.btn-submit {
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.btn-primary:hover,
.btn-submit:hover {
  background: var(--blue-deep);
  color: #ffffff;
  box-shadow: 0 6px 16px -6px var(--blue-shadow);
}
.btn-primary:disabled,
.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-ghost {
  background: var(--surface);
  color: var(--text-bright);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--line-strong);
  background: var(--surface-alt);
  color: var(--text-bright);
}

.btn-lg { padding: 0.85rem 1.7rem; font-size: 0.95rem; }
.btn-full { width: 100%; }

/* ===== FORM ELEMENTS ===== */

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.82rem 1rem;
  background: var(--surface);
  color: var(--text-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}
.form-textarea { resize: vertical; }
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px var(--blue-ring);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); }
select.form-input { cursor: pointer; }
select.form-input option { background: var(--surface); color: var(--text-bright); }

.form-error {
  color: var(--red);
  font-size: 0.8rem;
  margin-top: 0.3rem;
}
.form-error-banner {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

/* ═════════════════════════════════════════════
   SECTION 1 — HERO
   ═════════════════════════════════════════════ */

.hero {
  position: relative;
  padding: 5rem 0 4rem;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 18% 0%, var(--blue-050) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 88% 20%, var(--blue-050) 0%, transparent 65%);
  opacity: 0.85;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
  animation: fadeUp 0.7s ease-out both;
}
.hero-headline {
  font-size: 3.4rem;
  color: var(--text-bright);
  letter-spacing: -0.032em;
  margin-bottom: 1.15rem;
}
.hero-sub {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 34rem;
  margin-bottom: 1.9rem;
}
.hero-ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.hero-trust {
  display: flex;
  gap: 1.9rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2.4rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: var(--text-primary);
  font-weight: 500;
}
.trust-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-050);
  color: var(--blue);
  font-size: 0.78rem;
  flex-shrink: 0;
}
.trust-dot.em { background: var(--emerald-bg); color: var(--emerald); }
.trust-dot.am { background: var(--amber-bg); color: var(--amber); }

/* ===== TRUST BAND ===== */

.trust-band {
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-band-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.band-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ═════════════════════════════════════════════
   SECTION 2 — PROBLEM STATEMENT
   ═════════════════════════════════════════════ */

.problem { padding: 5rem 0; }
.problem-text {
  font-size: 1.2rem;
  color: var(--text-primary);
  line-height: 1.75;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 1.3rem;
}
.problem-kicker {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue);
  text-align: center;
}

/* ═════════════════════════════════════════════
   SECTION 3 — FOUR PILLARS
   ═════════════════════════════════════════════ */

.pillars {
  padding: 5.5rem 0;
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1.15rem;
}
.pillar-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.pillar-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-050);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  flex-shrink: 0;
}
.pillar-icon.em { background: var(--emerald-bg); color: var(--emerald); }
.pillar-icon.am { background: var(--amber-bg); color: var(--amber); }
.pillar-icon svg { width: 22px; height: 22px; }
.pillar-title {
  font-size: 1.08rem;
  color: var(--text-bright);
  margin-bottom: 0.6rem;
  letter-spacing: -0.015em;
}
.pillar-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.68;
  flex: 1;
}
.pillar-link {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ═════════════════════════════════════════════
   SECTION 4 / 9 — LEAD CAPTURE
   ═════════════════════════════════════════════ */

.lead-capture-primary,
.lead-capture-secondary { padding: 5rem 0; }

.lead-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2.75rem 2.5rem;
  box-shadow: var(--shadow-lg);
}
.lead-card-compact { padding: 2.25rem 2rem; }
.lead-headline {
  font-size: 1.85rem;
  color: var(--text-bright);
  text-align: center;
  letter-spacing: -0.025em;
  margin-bottom: 0.6rem;
}
.lead-sub {
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 2rem;
  font-size: 0.98rem;
}
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.lead-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.lead-field { position: relative; }
.lead-form-inline {
  flex-direction: row;
  gap: 0.7rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.lead-field-grow { flex: 1; min-width: 220px; }
.lead-trust {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
  margin-top: 0.9rem;
}
.lead-success { text-align: center; padding: 1rem 0; }
.lead-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-border);
  color: var(--emerald);
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  font-size: 1.4rem;
}
.lead-success-text {
  color: var(--text-primary);
  font-size: 0.95rem;
}

/* ═════════════════════════════════════════════
   SECTION 5 — HOW IT WORKS
   ═════════════════════════════════════════════ */

.how-it-works {
  padding: 5.5rem 0;
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.15rem;
}
.step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.step-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.step-number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.step-title {
  font-size: 1.06rem;
  color: var(--text-bright);
  margin-bottom: 0.55rem;
}
.step-desc {
  color: var(--text-secondary);
  font-size: 0.89rem;
  line-height: 1.68;
}

/* ═════════════════════════════════════════════
   SECTION 6 — PRODUCT SPOTLIGHT
   ═════════════════════════════════════════════ */

.product-spotlight { padding: 5.5rem 0; }
.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.product-badge {
  display: inline-block;
  background: var(--blue-050);
  color: var(--blue-700);
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.product-title {
  font-size: 2.35rem;
  color: var(--text-bright);
  letter-spacing: -0.03em;
  margin-bottom: 0.35rem;
}
.product-tagline {
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.product-desc {
  color: var(--text-secondary);
  line-height: 1.72;
  margin-bottom: 1rem;
  font-size: 0.97rem;
}

/* Product mockup — the app panel */
.product-mockup {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 0.95rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
}
.mockup-bar-title {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
}
.mockup-body { padding: 1.35rem; }
.mockup-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.mockup-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.mockup-status-dot.active { animation: pulse 2s ease-in-out infinite; }
.mockup-items {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mockup-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.85rem;
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--text-bright);
  font-weight: 500;
}
.mockup-item-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--blue-050);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.mockup-item-status {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mockup-item-status.ok { color: var(--emerald); }

/* ═════════════════════════════════════════════
   SECTION 7 — BLOCKCHAIN TEASER
   ═════════════════════════════════════════════ */

.blockchain-teaser {
  padding: 5rem 0;
  text-align: center;
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.blockchain-text {
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 620px;
  margin: 0 auto 1rem;
  font-size: 1rem;
}

/* ═════════════════════════════════════════════
   SECTION 8 — BLOG (preview grid + index + article)
   ═════════════════════════════════════════════ */

.blog-preview { padding: 5.5rem 0; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 1.15rem;
  margin-bottom: 2rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.blog-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.blog-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.24rem 0.62rem;
  border-radius: 5px;
  margin-bottom: 0.9rem;
  width: fit-content;
  background: var(--blue-050);
  color: var(--blue-700);
  border: 1px solid var(--blue-100);
}
.sovereignty-tag { background: var(--blue-050); color: var(--blue-700); border-color: var(--blue-100); }
.cloud-tag { background: var(--emerald-bg); color: var(--emerald); border-color: var(--emerald-border); }
.blockchain-tag { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }

.blog-date {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}
.blog-title {
  font-size: 1.04rem;
  color: var(--text-bright);
  margin-bottom: 0.55rem;
  line-height: 1.35;
}
.blog-excerpt {
  color: var(--text-secondary);
  font-size: 0.87rem;
  line-height: 1.65;
  flex: 1;
}
.blog-read {
  margin-top: 1rem;
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.blog-more { text-align: center; }

/* Blog index page */
.blog-header { margin-bottom: 2.5rem; text-align: center; }
.blog-empty {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--surface-alt);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-secondary);
}
.blog-loading {
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--text-muted);
}

/* Blog article page */
.blog-article-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.blog-article-title {
  font-size: 2.2rem;
  color: var(--text-bright);
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}
.blog-article-excerpt {
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.7;
}
.blog-article-body {
  color: var(--text-primary);
  line-height: 1.8;
}
.blog-article-body h2 {
  font-size: 1.4rem;
  margin: 2.25rem 0 1rem;
}
.blog-article-body h3 {
  font-size: 1.15rem;
  margin: 1.75rem 0 0.75rem;
}
.blog-article-body p { margin-bottom: 1.1rem; }
.blog-article-body ul,
.blog-article-body ol { margin: 0 0 1.1rem 1.5rem; }
.blog-article-body li { margin-bottom: 0.4rem; }
.blog-article-body strong { color: var(--text-bright); }
.blog-article-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.blog-article-body blockquote {
  border-left: 3px solid var(--blue);
  background: var(--surface-alt);
  padding: 1rem 1.35rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.75rem 0;
  color: var(--text-secondary);
}
.blog-article-body code {
  background: var(--surface-band);
  padding: 0.12em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}
.blog-article-body pre {
  background: var(--surface-band);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin-bottom: 1.1rem;
}
.blog-article-cta {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.blog-article-cta h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
.blog-article-cta p { color: var(--text-secondary); margin-bottom: 1.25rem; font-size: 0.95rem; }

/* ═════════════════════════════════════════════
   SECTION 10 — FOOTER
   ═════════════════════════════════════════════ */

.site-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.75rem;
}
.footer-brand { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.footer-tagline {
  color: var(--text-secondary);
  font-size: 0.89rem;
  max-width: 17rem;
}
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin-bottom: 0.35rem;
}
.footer-col a {
  color: var(--text-secondary);
  font-size: 0.88rem;
}
.footer-col a:hover { color: var(--blue); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.footer-dot { opacity: 0.5; }

/* ═════════════════════════════════════════════
   ARTICLE PAGES (Contact, Privacy, Blog)
   ═════════════════════════════════════════════ */

.page-wrapper {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 0 1.75rem 6rem;
  position: relative;
}

.article-back,
.back-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 2.5rem 0 2rem;
  text-decoration: none;
}
.article-back:hover,
.back-link:hover { color: var(--blue); }

.article-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.article-title {
  font-size: 2.2rem;
  color: var(--text-bright);
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}
.article-subtitle {
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.7;
}

.article-body {
  color: var(--text-primary);
  line-height: 1.8;
}
.article-body h2 {
  font-size: 1.35rem;
  margin: 2.25rem 0 1rem;
}
.article-body p { margin-bottom: 1.1rem; }
.article-body strong { color: var(--text-bright); }
.article-callout {
  background: var(--blue-050);
  border-left: 3px solid var(--blue);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 2rem 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-primary);
}

/* ===== CONTACT FORM ===== */

.contact-form-area { margin-top: 2rem; }
.contact-success { text-align: center; padding: 2.5rem 0; }
.contact-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-border);
  color: var(--emerald);
  display: grid;
  place-items: center;
  margin: 0 auto 1.1rem;
  font-size: 1.6rem;
}
.contact-success-heading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 0.5rem;
}
.contact-success-text {
  color: var(--text-secondary);
  line-height: 1.7;
}

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

/* Header degrades in two steps rather than one. Five nav items plus the lockup
   plus the CTA need ~1100px; at 966px the nav was wrapping to three lines.
   Dropping straight to a hidden nav would leave a 1024px laptop with no
   navigation at all, so the tagline and the gaps go first. */
@media (max-width: 1100px) {
  .brand-tagline { display: none; }
  .header-inner { gap: 1.25rem; }
  .header-nav { gap: 1.05rem; }
  .header-nav a { font-size: 0.85rem; }
}

@media (max-width: 900px) {
  .header-nav { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-headline { font-size: 2.5rem; }
  .product-layout { grid-template-columns: 1fr; gap: 2rem; }
  .product-visual { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .section-heading { font-size: 2rem; }
  .lead-row { grid-template-columns: 1fr; }
  .lead-card { padding: 2rem 1.5rem; }
  .hero, .problem, .pillars, .how-it-works,
  .product-spotlight, .blockchain-teaser, .blog-preview,
  .lead-capture-primary, .lead-capture-secondary { padding: 4rem 0; }
}

@media (max-width: 620px) {
  /* Measured at 467px: brand (256) + CTA (163) + gaps + padding overflowed the
     bar and clipped the CTA. Shrink both rather than dropping either — the
     title has to stay visible on every page (spec S1.1) and the CTA is the
     only conversion path in the header once the nav is gone. */
  .header-inner { padding: 0.7rem 1rem; gap: 0.6rem; }
  .brand { min-width: 0; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .brand-name { font-size: 0.85rem; }
  .header-cta { font-size: 0.8rem; padding: 0.58rem 0.85rem; }
}

@media (max-width: 560px) {
  .hero-headline { font-size: 2.05rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost { width: 100%; }
  .section-heading { font-size: 1.7rem; }
  .lead-headline { font-size: 1.45rem; }
  .article-title, .blog-article-title { font-size: 1.7rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .trust-band-inner { gap: 0.9rem; }
  .lead-form-inline { flex-direction: column; }
  .lead-field-grow { min-width: 0; width: 100%; }
  .brand-tagline { display: none; }
}

/* ===== DOWNLOADS (/apps) — PLAT-201 ===== */

/* PLAT-272 (FEAT-AppCatalog-13): HD/4K first. The grid is ten channels wide behind a pinned
   application column — measured in a browser, it needs 1323px today and about 1650px once every
   direct column has a live build — so the page takes --max-w-wide, not --max-w (1120px, where the
   grid scrolled on a 1920 screen). The wrapper's own 1.75rem padding is the gutter, and a block never
   outgrows its container, so below 1760px the page is the viewport less the gutters and a narrower
   screen still scrolls the grid inside its own frame. */
.page-wrapper.downloads-page {
  max-width: var(--max-w-wide);
}

/* The prose keeps the site's reading measure while the grid goes wide. */
.downloads-page .article-subtitle,
.downloads-page .downloads-note {
  max-width: var(--max-w-narrow);
}

/* PLAT-306 (FEAT-AppCatalog-18): the three tabs — Beta Downloads, Diagnostics, Connected Devices. Plain links the
   server renders; the current one sits on the line, the others under it. Palette tokens only (ARCHCON-MultiTenant-01). */
.downloads-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.downloads-tab {
  display: inline-block;
  padding: 0.6rem 1.15rem;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.downloads-tab:hover,
.downloads-tab:focus-visible {
  color: var(--text-bright);
  text-decoration: none;
}

.downloads-tab.is-current {
  color: var(--text-bright);
  background: var(--surface);
  border-color: var(--line);
  border-bottom-color: var(--surface);
}

/* The Kiosk-ready sentence a screen reader hears before the grid (FEAT-AppCatalog-10, PLAT-306): clipped away, not
   display:none, so it is still read. */
.downloads-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The platform's app-catalog region colours itself from these (it ships no colour of its own).
   --kiosk-strip is where the second header row starts (the group row's fixed height) and --kiosk-band the
   Kiosk-ready strip's height: the label and the bands below both read them, so they share one line. */
.downloads-grid {
  --appcat-bg: var(--surface);
  --appcat-accent: var(--blue);
  --appcat-muted: var(--text-secondary);
  --kiosk: var(--emerald);
  --kiosk-strip: 2.25rem;
  --kiosk-band: 1.2rem;
  color: var(--text-primary);
  margin-top: 1rem;
}

/* PLAT-263 (FEAT-AppCatalog-10), amended by PLAT-306 and PLAT-310: the Kiosk-ready mark. PCC's own: the platforms
   that run the suite in kiosk mode are the ones we need tested first. The header row reads as one line: the words
   KIOSK READY once, at its front over the App heading, then a solid band in the kiosk colour over each such
   column (no words in it; adjacent columns' bands join). The bands are drawn on the data-channel key the shared
   grid puts on every column, never by position; the list below is held equal to KioskReadiness.Keys by a test.
   The label and the bands are drawn content only: the hidden .downloads-sr sentence is what a screen reader hears. */

/* The group row ("Download" / "App stores") is fixed at the strip's offset (its text needs about 2.17rem), so the
   label, which hangs from the top of the App heading spanning both header rows, lands where the bands start. */
.downloads-grid .appcat-groups {
  height: var(--kiosk-strip);
}

/* The label, once: on the region's own first heading (sticky, so already a positioned box; the label scrolls with
   it), starting where the heading's text starts, the band's size and lettering in the kiosk colour. */
.downloads-grid .appcat-app-h::before {
  content: "Kiosk ready";
  position: absolute;
  top: var(--kiosk-strip);
  left: 0.45rem;
  height: var(--kiosk-band);
  color: var(--kiosk);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: var(--kiosk-band);
  text-transform: uppercase;
  white-space: nowrap;
}

/* PLAT-312: the heading's text starts below the band, however many lines it wraps to. The padding-top reserves the
   band from its own token plus a gap. The rule names the channel row so it out-ranks the shared grid's cell padding:
   that stylesheet is scoped (.appcat-grid th[b-...], the same weight as a two-class selector here) and loads after
   site.css, so an equal-weight rule here loses and the padding falls back to 0.7rem; a heading that wraps is then the
   row's tallest cell, has no spare height above its text, and its first line sits under the band. */
.downloads-grid .appcat-channels th[data-channel="windows"],
.downloads-grid .appcat-channels th[data-channel="windowsArm"],
.downloads-grid .appcat-channels th[data-channel="chromebook"],
.downloads-grid .appcat-channels th[data-channel="androidTablet"],
.downloads-grid .appcat-channels th[data-channel="testFlight"],
.downloads-grid .appcat-channels th[data-channel="appStore"],
.downloads-grid .appcat-channels th[data-channel="googlePlay"],
.downloads-grid .appcat-channels th[data-channel="microsoftStore"] {
  position: relative;
  padding-top: calc(var(--kiosk-band) + 0.5rem);
  color: var(--kiosk);
}

.downloads-grid th[data-channel="windows"]::before,
.downloads-grid th[data-channel="windowsArm"]::before,
.downloads-grid th[data-channel="chromebook"]::before,
.downloads-grid th[data-channel="androidTablet"]::before,
.downloads-grid th[data-channel="testFlight"]::before,
.downloads-grid th[data-channel="appStore"]::before,
.downloads-grid th[data-channel="googlePlay"]::before,
.downloads-grid th[data-channel="microsoftStore"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--kiosk-band);
  background: var(--kiosk);
}

.downloads-grid td[data-channel="windows"],
.downloads-grid td[data-channel="windowsArm"],
.downloads-grid td[data-channel="chromebook"],
.downloads-grid td[data-channel="androidTablet"],
.downloads-grid td[data-channel="testFlight"],
.downloads-grid td[data-channel="appStore"],
.downloads-grid td[data-channel="googlePlay"],
.downloads-grid td[data-channel="microsoftStore"] {
  background: color-mix(in srgb, var(--kiosk) 7%, transparent);
}

/* PLAT-313 (FEAT-AppCatalog-22, UC-AppCatalog-16): the platform tabs. Where the eleven columns cannot fit, a strip of
   five tabs (Windows, Mac, Linux, App Stores, Other) heads the grid and only the chosen tab's columns show; the App
   column always does. CSS only: the page renders a radio input and its label per tab (PlatformTabs); the inputs are
   clipped, not removed, so the keyboard still reaches them (arrow keys move between them); the labels are the tabs.
   Hidden unless the media block below shows it. Palette tokens only (ARCHCON-MultiTenant-01). */
.downloads-platforms {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.downloads-platform-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.downloads-platform {
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.downloads-platform:hover {
  color: var(--text-bright);
  border-color: var(--line-strong);
}

.downloads-platform-input:checked + .downloads-platform {
  color: var(--surface);
  background: var(--blue);
  border-color: var(--blue);
}

.downloads-platform-input:focus-visible + .downloads-platform {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
}

/* The breakpoint is measured, not guessed (PLAT-313 design.md section 3). In headless Edge against this stylesheet and
   the scoped grid bundle, with the live catalogue's content, the full grid's min-content width is 1650.6px; with its
   2px frame, the page's 56px of gutters and a 15px scroll bar it fits from a 1724px viewport. So the tabs show at
   1723px and narrower: portrait HD (1080) is tabbed, landscape HD (1920) and 4K keep the full grid. The hosted cells'
   detail lines do not wrap, so the fit grows when more direct columns go live: measure again and raise this then. */
@media (max-width: 1723px) {
  /* The strip shows over a rendered grid only. */
  .downloads-grid:has(.appcat) .downloads-platforms {
    display: flex;
  }

  /* With its two group headings gone the group row holds only the App heading, which spans both rows, so it collapses.
     --kiosk-strip is that row's height and the Kiosk ready label's offset, so the label stays on the bands' line. */
  .downloads-grid {
    --kiosk-strip: 0rem;
  }

  .downloads-grid .appcat-groups th[scope="colgroup"] {
    display: none;
  }

  /* One group, so no divider before a second; and the eleven-column floor no longer applies. Written with the page's
     class so they out-rank the scoped grid's rules, which load after site.css. */
  .downloads-page .downloads-grid .appcat-store-start {
    border-left: 0;
  }

  .downloads-page .downloads-grid .appcat-grid {
    min-width: 0;
  }

  /* Mac and Linux hold no kiosk-ready column: no label naming a band that is not on screen. */
  .downloads-grid:has(#platform-mac:checked) .appcat-app-h::before,
  .downloads-grid:has(#platform-linux:checked) .appcat-app-h::before {
    content: none;
  }

  /* BRULE-AppCatalog-18: each tab hides every column outside it, by the data-channel key the shared grid puts on each
     column's heading and cells. The App column carries no key, so it shows under every tab. Held equal to
     PlatformTabs by PlatformTabsTests. */
  .downloads-grid:has(#platform-windows:checked) [data-channel="macOS"],
  .downloads-grid:has(#platform-windows:checked) [data-channel="macOSIntel"],
  .downloads-grid:has(#platform-windows:checked) [data-channel="linux"],
  .downloads-grid:has(#platform-windows:checked) [data-channel="chromebook"],
  .downloads-grid:has(#platform-windows:checked) [data-channel="androidTablet"],
  .downloads-grid:has(#platform-windows:checked) [data-channel="testFlight"],
  .downloads-grid:has(#platform-windows:checked) [data-channel="appStore"],
  .downloads-grid:has(#platform-windows:checked) [data-channel="googlePlay"],
  .downloads-grid:has(#platform-windows:checked) [data-channel="microsoftStore"],
  .downloads-grid:has(#platform-mac:checked) [data-channel="windows"],
  .downloads-grid:has(#platform-mac:checked) [data-channel="windowsArm"],
  .downloads-grid:has(#platform-mac:checked) [data-channel="linux"],
  .downloads-grid:has(#platform-mac:checked) [data-channel="chromebook"],
  .downloads-grid:has(#platform-mac:checked) [data-channel="androidTablet"],
  .downloads-grid:has(#platform-mac:checked) [data-channel="testFlight"],
  .downloads-grid:has(#platform-mac:checked) [data-channel="appStore"],
  .downloads-grid:has(#platform-mac:checked) [data-channel="googlePlay"],
  .downloads-grid:has(#platform-mac:checked) [data-channel="microsoftStore"],
  .downloads-grid:has(#platform-linux:checked) [data-channel="windows"],
  .downloads-grid:has(#platform-linux:checked) [data-channel="windowsArm"],
  .downloads-grid:has(#platform-linux:checked) [data-channel="macOS"],
  .downloads-grid:has(#platform-linux:checked) [data-channel="macOSIntel"],
  .downloads-grid:has(#platform-linux:checked) [data-channel="chromebook"],
  .downloads-grid:has(#platform-linux:checked) [data-channel="androidTablet"],
  .downloads-grid:has(#platform-linux:checked) [data-channel="testFlight"],
  .downloads-grid:has(#platform-linux:checked) [data-channel="appStore"],
  .downloads-grid:has(#platform-linux:checked) [data-channel="googlePlay"],
  .downloads-grid:has(#platform-linux:checked) [data-channel="microsoftStore"],
  .downloads-grid:has(#platform-stores:checked) [data-channel="windows"],
  .downloads-grid:has(#platform-stores:checked) [data-channel="windowsArm"],
  .downloads-grid:has(#platform-stores:checked) [data-channel="macOS"],
  .downloads-grid:has(#platform-stores:checked) [data-channel="macOSIntel"],
  .downloads-grid:has(#platform-stores:checked) [data-channel="linux"],
  .downloads-grid:has(#platform-stores:checked) [data-channel="chromebook"],
  .downloads-grid:has(#platform-stores:checked) [data-channel="androidTablet"],
  .downloads-grid:has(#platform-other:checked) [data-channel="windows"],
  .downloads-grid:has(#platform-other:checked) [data-channel="windowsArm"],
  .downloads-grid:has(#platform-other:checked) [data-channel="macOS"],
  .downloads-grid:has(#platform-other:checked) [data-channel="macOSIntel"],
  .downloads-grid:has(#platform-other:checked) [data-channel="linux"],
  .downloads-grid:has(#platform-other:checked) [data-channel="testFlight"],
  .downloads-grid:has(#platform-other:checked) [data-channel="appStore"],
  .downloads-grid:has(#platform-other:checked) [data-channel="googlePlay"],
  .downloads-grid:has(#platform-other:checked) [data-channel="microsoftStore"] {
    display: none;
  }
}

.downloads-note {
  margin-top: 1.25rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ----- SovHub lead panel (PLAT-287 W5) ----- */

/* FEAT-BetaDownload-09: HD/4K first — the panel spans the wide page like the grid under it: what SovHub does
   beside the download button, then the three steps side by side; its sentences keep the reading measure.
   A phone stacks everything in one column. Palette tokens only (ARCHCON-MultiTenant-01). */
.beta-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2rem;
  padding: 1.75rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.beta-start-title {
  margin: 0;
  font-size: 1.4rem;
  color: var(--text-bright);
}

.beta-start-summary, .beta-start-mac, .beta-start-devices {
  max-width: var(--max-w-narrow);
}

.beta-start-summary {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

.beta-start-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.beta-start-detail {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.beta-start-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: beta-step;
}

.beta-start-steps li {
  counter-increment: beta-step;
  padding: 0.9rem 1rem;
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.5;
}

.beta-start-steps li::before {
  content: counter(beta-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--blue);
  color: var(--surface);
  font-weight: 700;
  font-size: 0.85rem;
}

.beta-start-devices, .beta-start-mac {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}

.downloads-direct-title {
  margin-top: 2.5rem;
  font-size: 1.15rem;
  color: var(--text-bright);
}

@media (max-width: 760px) {
  .beta-start {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.25rem;
  }

  .beta-start-action {
    align-items: flex-start;
  }

  .beta-start-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----- Verify your download (PLAT-291 W2) ----- */

/* FEAT-AppCatalog-16: HD/4K first — the three platforms' commands sit side by side across the wide page; the
   sentences keep the reading measure (.downloads-note); a phone stacks the commands. Palette tokens only. */
.downloads-verify {
  margin-top: 2.5rem;
  color: var(--text-primary);
}

.downloads-verify-title {
  font-size: 1.15rem;
  color: var(--text-bright);
}

.downloads-verify-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.downloads-verify-steps li {
  padding: 0.9rem 1rem;
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.downloads-verify-os {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--text-bright);
}

.downloads-verify code,
.downloads-verify-key {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
}

.downloads-verify-sums {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.7;
}

.downloads-verify-key {
  margin: 0.5rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-all;
}

@media (max-width: 760px) {
  .downloads-verify-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== BETA CONNECT (/apps/connect) and connected devices (/apps) — PLAT-287 W4 ===== */

/* FEAT-BetaDownload-07: HD/4K first, like the downloads page — the page takes the wide token; the
   question, the code and the notes keep the site's reading measure. Palette tokens only. */
.page-wrapper.connect-page {
  max-width: var(--max-w-wide);
  color: var(--text-primary);
}

.connect-page .article-subtitle, .connect-page .connect-note {
  max-width: var(--max-w-narrow);
}

.connect-card {
  margin-top: 2rem;
  padding: 1.75rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.connect-question {
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--text-bright);
}

.connect-note {
  margin-top: 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.connect-warning {
  color: var(--text-bright);
  border-left: 3px solid var(--red);
  padding-left: 0.85rem;
}

.connect-code {
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.08em;
  color: var(--text-bright);
}

.connect-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.connect-code-input {
  max-width: 14rem;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* FEAT-BetaDownload-08: "Your connected devices" on /apps — a full-width table on the wide page. */
.downloads-devices {
  margin-top: 2.5rem;
}

.downloads-devices-title {
  font-size: 1.15rem;
  color: var(--text-bright);
}

.downloads-devices-table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.downloads-devices-table th,
.downloads-devices-table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.downloads-devices-table th {
  color: var(--text-secondary);
  font-weight: 600;
}

.downloads-devices-table .btn-ghost {
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
}

.downloads-devices-table form {
  margin: 0;
}

/* ===== SHARED DIAGNOSTICS (/apps) — PLAT-292 ===== */

/* FEAT-SupportInbox-05: "Shared diagnostics" follows the connected devices and borrows their table; the window
   column states a span, so it may wrap on a narrower screen. */
.downloads-diagnostics {
  margin-top: 2.5rem;
}

.downloads-diagnostics-table td:nth-child(3) {
  white-space: normal;
}

/* ===== FEEDBACK YOU SENT (/apps) — PLAT-314 ===== */

/* FEAT-SupportInbox-11: "Feedback you sent" follows "Shared diagnostics" on the Diagnostics tab and borrows the devices
   table; the message's first line and the screenshots' names may wrap. Metadata only — no image is drawn here. */
.downloads-feedback {
  margin-top: 2.5rem;
}

.downloads-feedback-table td:nth-child(3),
.downloads-feedback-table td:nth-child(4) {
  white-space: normal;
}

.downloads-feedback-table td:nth-child(3) {
  min-width: 18rem;
}

/* ===== BETA AGREEMENT (/apps/agreement) — PLAT-254 ===== */

/* The platform's agreement form colours itself from these (it ships no colour of its own). */
.agreement-page {
  --agreement-accent: var(--blue);
  --agreement-on-accent: var(--surface);
  --agreement-muted: var(--text-secondary);
  --agreement-bg: var(--surface);
  --agreement-error: var(--red);
  color: var(--text-primary);
  padding-top: 2.5rem;
}

/* ===== BLAZOR ERROR UI ===== */

#blazor-error-ui {
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  color: var(--red);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: none;
  font-size: 0.85rem;
}
#blazor-error-ui .reload { color: var(--blue); margin-left: 0.5rem; }
#blazor-error-ui .dismiss {
  color: var(--text-muted);
  cursor: pointer;
  margin-left: 0.5rem;
  text-decoration: none;
}