/* ==========================================================================
   BroadcastLabs public theme
   Deliberately a plain, hand-written stylesheet (no build step): it ships
   in one small request, needs no JS to render correctly, and never fights
   a user's own font-size or forced-colors settings — all of which matter
   while respecting user font-size and colour preferences.
   ========================================================================== */

:root {
  --paper: #faf9f5;
  --panel: #ffffff;
  --ink: #001c3b;
  --ink-soft: #464c56;
  --line: #ddd6c7;
  --brand-orange: #ff5c06;
  --brand-orange-dark: #d64e00;
  --amber-bg: #ff5c06;
  --amber-ink: #001c3b;
  --focus: #0b5fff;
  --radius: 8px;
  --max: 1220px;

  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

p { max-width: 68ch; }

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; text-decoration-color: var(--brand-orange); }
a:hover { text-decoration-color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.85rem 1.5rem;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Reading-first pages (default CMS pages, blog posts, single forum topics).
   The shell itself narrows so body text fills its container instead of
   leaving a wide empty margin on one side. */
.container-reading {
  max-width: 58rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---- Header ---- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  /* A dropdown has to be able to extend past the header's own box. */
  overflow: visible;
  position: relative;
  z-index: 50;
}
.site-header .bar {
  /* Structural properties are set once, in HEADER LAYOUT further down. */
  padding: 1.1rem 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
 

.main-nav > ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.main-nav ul { list-style: none; }
.main-nav a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { border-bottom-color: var(--amber-bg); }

.nav-actions { display: flex; gap: 0.75rem; align-items: center; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
}
.btn-primary { background: var(--amber-bg); color: var(--amber-ink); }
.btn-primary:hover { background: var(--brand-orange-dark); color: var(--amber-ink); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

/* ---- Waveform divider (signature element) ---- */
.waveform {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  margin: 0.5rem 0 2rem;
}
.waveform span {
  display: block;
  width: 4px;
  background: currentColor;
  color: var(--amber-bg);
  border-radius: 2px;
}

/* ---- Sections ---- */
main { padding: 3rem 0 5rem; }
.hero { padding: 3rem 0 1rem; }
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.site-footer nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  padding: 0;
  flex-wrap: wrap;
}
.site-footer a { color: var(--ink-soft); }

/* ---- Utility ---- */
.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;
}

/* Respect a user's forced-colors / high-contrast mode instead of fighting it */
@media (forced-colors: active) {
  .btn, .card { border: 1px solid CanvasText; }
}

/* ---- Forms (auth, account) -------------------------------------------
   Inputs deliberately inherit font-size rather than shrinking: 16px+ also
   stops iOS Safari zooming on focus, and keeps text legible for users who
   have bumped their OS font size. */
.auth-form { max-width: 27rem; }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.field .hint {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}
.field-error {
  color: #8a1f16;
  font-size: 0.9rem;
  margin-top: 0.3rem;
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--panel);
  color: var(--ink);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
input[aria-invalid="true"] { border-color: #8a1f16; border-width: 2px; }

/* --------------------------------------------------------------------------
   CHECKBOXES & RADIOS
   --------------------------------------------------------------------------
   Custom-drawn to match the site, but built on real <input> elements so
   keyboard operation and form submission are the
   browser's own — nothing is reimplemented in JavaScript.

   Constraints this has to satisfy, given who uses this site:
     - Checked state is a SHAPE (tick / dot), not just a colour change.
     - 1.25rem control with a 44px-tall row, so it's a comfortable target for
       imprecise pointing or a tremor.
     - Visible focus ring that doesn't rely on the browser default, which is
       often invisible against a custom control.
     - Survives Windows High Contrast Mode, where custom backgrounds are
       discarded — see the forced-colors block below.
   -------------------------------------------------------------------------- */
.checkbox-field {
  display: flex;
  /* flex-start, not center: with a two-line label, centring floats the
     control against the middle of the text block instead of its first line. */
  align-items: flex-start;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 0.15rem 0;
}

.checkbox-field label {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  /* Fill the row so text wraps at the container edge, not early. */
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.1rem;
  line-height: 1.5;
}

.checkbox-field input[type="checkbox"],
.checkbox-field input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  /* Nudge down so the box optically aligns with the first line's cap height. */
  margin-top: 0.2rem;
  border: 2px solid var(--ink-soft);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.checkbox-field input[type="checkbox"] { border-radius: 4px; }
.checkbox-field input[type="radio"]    { border-radius: 50%; }

.checkbox-field input[type="checkbox"]:hover,
.checkbox-field input[type="radio"]:hover { border-color: var(--brand-orange); }

/* The tick: drawn with a rotated rectangle so it scales with the control and
   needs no image request. */
.checkbox-field input[type="checkbox"]::before {
  content: "";
  width: 0.68rem;
  height: 0.38rem;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}

.checkbox-field input[type="radio"]::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
}

.checkbox-field input[type="checkbox"]:checked,
.checkbox-field input[type="radio"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}

.checkbox-field input[type="checkbox"]:checked::before,
.checkbox-field input[type="radio"]:checked::before { opacity: 1; }

.checkbox-field input[type="checkbox"]:focus-visible,
.checkbox-field input[type="radio"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.checkbox-field input:disabled {
  border-color: var(--line);
  background: var(--panel);
  cursor: not-allowed;
}
.checkbox-field input:disabled + label { color: var(--ink-soft); cursor: not-allowed; }

/* A hint belonging to a checkbox row should line up under the label, not
   under the control. */
.checkbox-field + .hint { margin-left: 1.95rem; margin-top: -0.35rem; }

/* Windows High Contrast Mode discards custom colours. Hand the control back
   to the system so it stays visible — the audience for this product includes
   people who rely on that mode. */
@media (forced-colors: active) {
  .checkbox-field input[type="checkbox"],
  .checkbox-field input[type="radio"] {
    appearance: auto;
    -webkit-appearance: auto;
    width: auto;
    height: auto;
  }
  .checkbox-field input[type="checkbox"]::before,
  .checkbox-field input[type="radio"]::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .checkbox-field input[type="checkbox"],
  .checkbox-field input[type="radio"] { transition: none; }
}

/* ---- Alerts ---- */
.alert {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid transparent;
}
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert-error { background: #fbe9e7; border-color: #8a1f16; color: #8a1f16; }
.alert-ok    { background: #e8f3ea; border-color: #1e5b34; color: #1e5b34; }

/* Cards used on the account page */
.card + .card { margin-top: 1rem; }

/* ---- Meta lines, prose, tag nav ---- */
.meta { color: var(--ink-soft); font-size: 0.92rem; }
.prose { max-width: 68ch; }
.prose img { border-radius: var(--radius); }
.prose h2, .prose h3 { margin-top: 2rem; }

.tag-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1.5rem 0;
}
.tag-nav a {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  text-decoration: none;
  font-size: 0.9rem;
}
.tag-nav a:hover { border-color: var(--brand-orange); }

.status-pill {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #efece3;
  border: 1px solid var(--line);
  vertical-align: middle;
}

/* ---- Pagination ---- */
.pagination { margin: 2rem 0; }
.pagination ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.pagination [aria-disabled="true"] { color: #8b8b8b; }
.pagination-status { color: var(--ink-soft); font-size: 0.92rem; }

/* ---- Downloads ---- */
.download-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.download-card h3 { margin-top: 0; }

/* ---- Forum ---- */
.forum-intro {
  background: var(--panel);
  border-left: 4px solid var(--brand-orange);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 2rem;
}
.forum-category, .forum-thread-row {
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0;
}
.forum-category h2, .forum-thread-row h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.forum-category p, .forum-thread-row p { margin: 0.25rem 0 0; }

.forum-post {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.forum-post-hidden { opacity: 0.75; border-style: dashed; border-color: #8a1f16; }
.hidden-notice {
  background: #fbe9e7;
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  color: #8a1f16;
}
.forum-post-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.9rem;
}
.forum-post-header time { color: var(--ink-soft); font-size: 0.9rem; margin-left: auto; }
.forum-post-body { line-height: 1.7; }
.forum-post-actions {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.report-form summary { cursor: pointer; color: var(--ink-soft); }
.report-form form { margin-top: 0.6rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: end; }
.report-form input { max-width: 22rem; }

.mod-bar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  background: #fff6ed;
  border: 1px dashed var(--brand-orange);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.5rem;
}
.mod-bar-label { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.inline-form { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0; }
.inline-input { width: auto !important; padding: 0.35rem 0.5rem !important; font-size: 0.9rem !important; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.9rem; }
.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brand-orange);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}
.reported-content {
  background: var(--paper);
  border-left: 3px solid var(--line);
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  font-style: italic;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---- Pricing ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  align-items: start;
}
.pricing-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}
/* Featured plan is marked with a border AND a text flag — never colour alone. */
.pricing-card-featured { border: 2px solid var(--brand-orange); }
.pricing-flag {
  display: inline-block;
  background: var(--brand-orange);
  color: #001c3b;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  margin: 0 0 0.75rem;
}
.pricing-card h2 { margin-top: 0; }
.pricing-desc { font-size: 0.95rem; }

.price-row {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
  margin-top: 1rem;
}
.price-amount { margin: 0 0 0.6rem; font-size: 1.1rem; }
.price-amount strong { font-size: 1.85rem; }
.price-interval { color: var(--ink-soft); }

.feature-list { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.feature-list li {
  padding: 0.35rem 0 0.35rem 1.6rem;
  position: relative;
}
.feature-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--brand-orange);
  font-weight: 700;
}

/* ---- Hero & marketing sections ---- */
.hero { padding: 1rem 0 2.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }
.hero .lead, .lead {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 62ch;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.75rem 0 0.75rem;
}
.hero-note { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.5rem; }

.product-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
}
.product-summary {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-orange);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.product-summary h3 { margin-top: 0; }
.product-summary ul { padding-left: 1.15rem; }
.product-summary li { margin-bottom: 0.3rem; }

.feature-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #efece3;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  vertical-align: middle;
  margin-left: 0.4rem;
  font-family: var(--font-body);
}

/* ---- Newsletter CTA ---- */
.newsletter-cta {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand-orange);
  border-radius: var(--radius);
  padding: 2rem;
  margin: 3rem 0 1rem;
}
.newsletter-cta h2 { margin-top: 0; }
.newsletter-cta p { max-width: 60ch; }
.newsletter-form { max-width: 30rem; margin-top: 1.25rem; }
.newsletter-form .field { margin-bottom: 1rem; }
.optional { font-weight: 400; color: var(--ink-soft); font-size: 0.9em; }

/* Honeypot: hidden from people and never focusable.
   Not display:none — some bots skip those. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   TYPOGRAPHY & CONTENT LAYOUT
   --------------------------------------------------------------------------
   Everything below governs how admin-authored WYSIWYG content renders. The
   editor produces plain h2/p/ul/blockquote/table with no classes, so all the
   structure has to come from here — an editor shouldn't need to know CSS to
   get a well-set page.
   ========================================================================== */

:root {
  /* Modular scale (~1.25). Fluid so headings shrink sensibly on phones
     without a pile of breakpoints. */
  --step--1: clamp(0.89rem, 0.86rem + 0.14vw, 0.96rem);
  --step-0:  clamp(1.05rem, 1.01rem + 0.20vw, 1.15rem);
  --step-1:  clamp(1.31rem, 1.24rem + 0.35vw, 1.50rem);
  --step-2:  clamp(1.64rem, 1.51rem + 0.62vw, 1.95rem);
  --step-3:  clamp(2.05rem, 1.84rem + 1.04vw, 2.54rem);
  --step-4:  clamp(2.56rem, 2.22rem + 1.68vw, 3.30rem);

  /* Vertical rhythm */
  --flow: 1.15em;
  --section-gap: clamp(2.5rem, 6vw, 4.5rem);

  --measure: 68ch;
}

body { font-size: var(--step-0); }

/* Consistent flow spacing: every element gets top margin from its
   predecessor, so authored content spaces itself without the editor
   having to add empty paragraphs. */
.page-content > * + *,
.prose > * + * { margin-top: var(--flow); }

/*
  The WRAPPER fills its container; individual text elements get the reading
  measure. Capping the wrapper itself produced a narrow column floating in the
  middle of a wide shell — the container is what should control page width,
  not the article element.
*/
.page-content, .prose { max-width: none; }

/* Text elements get a comfortable line length. Headings, heroes, tables and
   multi-column blocks are excluded — they have their own sizing. */
.page-content > p,
.page-content > ul,
.page-content > ol,
.page-content > blockquote,
.page-content > dl,
.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > dl {
  max-width: var(--measure);
}

/* Inside the narrow reading container the shell already sets the width, so
   let text fill it rather than narrowing twice. */
.container-reading .page-content > *,
.container-reading .prose > * {
  max-width: none;
}

/* Full-bleed elements that shouldn't be constrained to the text measure */
.page-content > .hero,
.page-content > .product-split,
.page-content > table,
.prose > .product-split,
.prose > table { max-width: none; }

h1 { font-size: var(--step-4); letter-spacing: -0.02em; }
h2 { font-size: var(--step-2); letter-spacing: -0.01em; }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.06em; }

.page-content h2,
.prose h2 {
  margin-top: 2.4em;
  padding-top: 0.6em;
  border-top: 1px solid var(--line);
}
.page-content h3,
.prose h3 { margin-top: 1.9em; }

/* Don't leave a heading stranded at the foot of a column/page */
h1, h2, h3, h4 { text-wrap: balance; break-after: avoid-page; }
p, li { text-wrap: pretty; }

.page-content .lead,
.prose .lead,
.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}

/* Lists: authored content gets readable indents and spacing */
.page-content ul, .page-content ol,
.prose ul, .prose ol { padding-left: 1.35em; }
.page-content li + li,
.prose li + li { margin-top: 0.4em; }
.page-content li::marker,
.prose li::marker { color: var(--brand-orange); }

/* Blockquote */
.page-content blockquote,
.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 0.2em 0 0.2em 1.25em;
  border-left: 3px solid var(--brand-orange);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}
.page-content blockquote p,
.prose blockquote p { margin: 0; }

/* Tables in authored content */
.page-content table,
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.page-content th, .page-content td,
.prose th, .prose td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.page-content thead th,
.prose thead th {
  background: var(--panel);
  border-bottom: 2px solid var(--ink);
  font-weight: 700;
}

/* Code */
.page-content code, .prose code {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
.page-content pre, .prose pre {
  background: var(--ink);
  color: #f2f0ea;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  overflow-x: auto;
}
.page-content pre code, .prose pre code {
  background: none; border: none; padding: 0; color: inherit;
}

/* Images in authored content get room to breathe */
.page-content img, .prose img {
  border-radius: var(--radius);
  display: block;
  margin-top: 1.6em;
  margin-bottom: 1.6em;
}

/* Horizontal rule as a section break */
.page-content hr, .prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--section-gap) 0;
}

/* Editor's notes seeded into starter content — visually distinct so they
   can't be mistaken for real copy, and obvious enough to prompt removal. */
.page-content em:only-child,
.prose em:only-child { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   PAGE SHELL
   -------------------------------------------------------------------------- */
main { padding: clamp(2rem, 5vw, 3.5rem) 0 var(--section-gap); }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Article header block used by pages, posts, product pages */
.entry-header { margin-bottom: 2rem; }
.entry-header h1 { margin-bottom: 0.4rem; }
.entry-header .meta { margin: 0; }

nav[aria-label="Breadcrumb"] {
  font-size: var(--step--1);
  margin-bottom: 1.25rem;
}

/* Sections inside authored pages */
.section { padding: var(--section-gap) 0; }
.section-tint {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Header layout lives in the consolidated HEADER LAYOUT block below. */

/* Mark the current page in the nav */
.main-nav a[aria-current="page"] {
  border-bottom-color: var(--brand-orange);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer { padding: var(--section-gap) 0 2.5rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.footer-grid h2 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li + li { margin-top: 0.35rem; }
.site-footer nav ul { display: block; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   CARDS & GRIDS
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.card > :first-child { margin-top: 0; }
.card h2, .card h3 { margin: 0; font-size: var(--step-1); }
.card img {
  margin: -1.5rem -1.5rem 0.5rem;
  width: calc(100% + 3rem);
  max-width: none;
  border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.card .meta { margin: 0; font-size: var(--step--1); }

/* Whole-card click target without nesting interactive elements */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card { position: relative; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.grid-3 { gap: 1.75rem; }

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.testimonial {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.testimonial blockquote {
  margin: 0;
  padding: 0;
  border: none;
  font-size: var(--step-0);
  color: var(--ink);
}
.testimonial blockquote::before { content: "\201C"; color: var(--brand-orange); font-size: 1.5em; line-height: 0; vertical-align: -0.25em; margin-right: 0.1em; }
.testimonial-author { margin-top: auto; font-size: var(--step--1); }
.testimonial-author strong { display: block; }
.testimonial-rating { color: var(--brand-orange); letter-spacing: 0.1em; }

/* --------------------------------------------------------------------------
   EMAIL PREVIEW (admin)
   -------------------------------------------------------------------------- */
.email-preview {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 640px;
  margin-bottom: 2rem;
}
.email-preview img { max-width: 100%; }

/* --------------------------------------------------------------------------
   PRINT — people do print documentation and invoices
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .newsletter-cta, .skip-link, .hero-actions, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .container { max-width: none; padding: 0; }
  .page-content, .prose { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}

/* Wide template: content spans the container rather than the reading measure */
.page-content-wide { max-width: none; }
.page-content-wide > * { max-width: var(--measure); }
.page-content-wide > .hero,
.page-content-wide > .product-split,
.page-content-wide > table,
.page-content-wide > hr { max-width: none; }

/* Forum signature — visually subordinate to the post itself, so it reads as
   a footer rather than part of the argument. */
.forum-signature {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.watch-form { margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   NESTED NAV / DROPDOWNS
   --------------------------------------------------------------------------
   Opens on hover AND on keyboard focus (:focus-within), so it's operable
   without a mouse. No JavaScript, so it still works if a script fails —
   which keeps the interaction dependable.
   -------------------------------------------------------------------------- */
.main-nav li { position: relative; }

.main-nav .has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 0.35em;
  border: 0.3em solid transparent;
  border-top-color: currentColor;
  transform: translateY(0.15em);
}

.main-nav .submenu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: -0.75rem;
  z-index: 120;
  min-width: 13rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-orange);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 20px rgba(0, 28, 59, 0.12);

  /* Hidden by default but kept in the page structure until needed —
     visibility (not display) so focus can move into it predictably. */
  visibility: hidden;
  opacity: 0;
}

.main-nav .has-children:hover > .submenu,
.main-nav .has-children:focus-within > .submenu {
  visibility: visible;
  opacity: 1;
}

.main-nav .submenu {
  display: block;      /* never flex — dropdown items stack */
}
.main-nav .submenu li {
  display: block;
  width: 100%;
}
.main-nav .submenu a {
  display: block;
  padding: 0.5rem 1rem;
  border-bottom: none;
  white-space: nowrap;
}
.main-nav .submenu a:hover,
.main-nav .submenu a:focus-visible { background: var(--paper); }

/* On narrow screens the nav is a horizontal scroller, so a floating dropdown
   would be unreachable. Flatten children inline instead. */
@media (max-width: 980px) {
  .main-nav .submenu {
    position: static;
    visibility: visible;
    opacity: 1;
    display: inline-flex;
    gap: 1.15rem;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
    min-width: 0;
  }
  .main-nav .submenu a { padding: 0.35rem 0; font-size: 0.95rem; opacity: 0.85; }
  .main-nav .has-children > a::after { display: none; }
}

/* ---- Donations ---- */
.donate-form { max-width: 34rem; }
.donate-form fieldset { border: none; padding: 0; margin: 0 0 2rem; }
.donate-form legend { padding: 0; width: 100%; }
.donate-form legend h2 { margin: 0 0 0.75rem; font-size: var(--step-1); }

.amount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.amount-option { position: relative; }
.amount-option input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.amount-option label {
  display: block;
  text-align: center;
  padding: 0.85rem 0.5rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font-weight: 700;
  cursor: pointer;
}
/* Selection is shown by border AND background, never colour alone. */
.amount-option input:checked + label {
  border-color: var(--brand-orange);
  background: #fff6ed;
}
.amount-option input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   HERO SIZING
   --------------------------------------------------------------------------
   A hero headline shouldn't be held to the 68ch body measure — at large sizes
   that forces a three-word-per-line stack. Give the heading room and keep only
   the supporting paragraph at a comfortable reading width.
   -------------------------------------------------------------------------- */
.hero { max-width: none; }

.hero h1 {
  /* ~2 balanced lines for a typical 40-50 character headline. Narrower and it
     stacks 3-4 words per line; wider and it becomes one very long line. */
  max-width: 24ch;
  margin-bottom: 0.5rem;
}

.hero .lead,
.hero > p {
  max-width: 54ch;
}

/* On wide screens let the hero breathe rather than hugging the left edge. */
@media (min-width: 1100px) {
  .hero h1 { font-size: clamp(2.8rem, 3.6vw, 3.9rem); }
}


/* --------------------------------------------------------------------------
   HEADER LAYOUT
   --------------------------------------------------------------------------
   The nav and action buttons were wrapping mid-label ("My / account",
   "Get software"), which reads as broken rather than responsive.
   -------------------------------------------------------------------------- */
.site-header .bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
}

.main-nav { flex: 1 1 auto; min-width: 0; }

/*
  Top-level list only — the child combinator matters. Without it these rules
  also hit .submenu (also a <ul> inside .main-nav), which laid dropdown items
  out horizontally instead of stacking them.

  No overflow here either: `overflow-x: auto` turns this into a scroll
  container, and a scroll container CLIPS absolutely-positioned descendants,
  which is what was cutting the dropdowns off inside the header.
*/
.main-nav > ul {
  flex-wrap: nowrap;
  gap: 1.4rem;
}

.main-nav a { white-space: nowrap; }

.nav-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Buttons must never break a label across lines. */
.nav-actions .btn {
  white-space: nowrap;
  padding: 0.6rem 1.05rem;
  font-size: 0.95rem;
  line-height: 1.2;
}

.brand { flex: 0 0 auto; }
.brand img { height: 34px; width: auto; max-width: none; }

/* Below the point where everything fits on one row, move the nav to its own
   line rather than squeezing the buttons. */
@media (max-width: 1180px) {
  .site-header .bar {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }
  .main-nav {
    order: 3;
    flex-basis: 100%;
    padding-bottom: 0.3rem;
  }
  .nav-actions { margin-left: auto; }
}

/* Below 980px submenus render inline (see the rule further down), so the row
   can safely scroll — there is no longer anything absolutely positioned to
   clip. */
@media (max-width: 980px) {
  .main-nav > ul {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 560px) {
  .nav-actions .btn { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
  .brand img { height: 28px; }
}

/* ==========================================================================
   SUPPORT TICKETS
   ========================================================================== */
.ticket-row {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
}
.ticket-row h2 { margin: 0 0 0.3rem; font-size: var(--step-0); }
.ticket-row .meta { margin: 0; }

.ticket-message {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  margin-bottom: 1rem;
}
/* Staff replies are visually distinct so a long thread is scannable. */
.ticket-message-staff {
  background: #fff;
  border-left: 4px solid var(--brand-orange);
}
.ticket-message-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 0.55rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.ticket-message-header time { margin-left: auto; color: var(--ink-soft); font-size: 0.9rem; }
.ticket-message-body { line-height: 1.7; }
.ticket-attachments {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}
.ticket-env { margin: 1rem 0 1.5rem; }
.ticket-env summary { cursor: pointer; color: var(--ink-soft); }

/* Status pills carry a word as well as a colour — never colour alone. */
.status-awaiting_support { background: #fff0e6; border-color: var(--brand-orange); }
.status-awaiting_customer { background: #eef4fb; border-color: #2c5f9e; }
.status-resolved,
.status-closed { background: #eef1ee; color: var(--ink-soft); }

/* ==========================================================================
   DOCUMENTATION PORTAL
   ========================================================================== */
.docs-search {
  display: flex;
  gap: 0.6rem;
  margin: 1.5rem 0 2.5rem;
  max-width: 34rem;
}
.docs-search input { flex: 1 1 auto; }

.docs-space-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.docs-space-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-orange);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.docs-space-card h2 { margin-top: 0; font-size: var(--step-1); }
.docs-space-card ul { padding-left: 1.1rem; margin: 0.75rem 0 0; }
.docs-space-card li { margin-bottom: 0.3rem; }

.docs-popular { list-style: none; padding: 0; }
.docs-popular li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Two-column reading layout with a persistent contents sidebar. */
.docs-layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .docs-sidebar { position: static; max-height: none; border-right: none;
                  border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
}

.docs-sidebar {
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding-right: 1rem;
  border-right: 1px solid var(--line);
  font-size: 0.95rem;
}
.docs-sidebar-title {
  font-weight: 700;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand-orange);
}
.docs-sidebar-search { margin-top: 1.25rem; }

.docs-tree { list-style: none; padding: 0; margin: 0; }
.docs-tree .docs-tree { padding-left: 0.9rem; border-left: 1px solid var(--line); margin-top: 0.15rem; }
.docs-tree li { margin: 0.1rem 0; }
.docs-tree a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  border-bottom: none;
}
.docs-tree a:hover { background: var(--panel); }
.docs-tree a[aria-current="page"] {
  background: var(--panel);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--brand-orange);
}

.docs-article { min-width: 0; }
.docs-breadcrumb { font-size: 0.92rem; margin-bottom: 1rem; color: var(--ink-soft); }
.docs-breadcrumb span { margin: 0 0.35rem; }

.docs-feedback {
  margin-top: 3rem;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.docs-feedback h2 { margin-top: 0; font-size: var(--step-0); }
.docs-feedback form { display: flex; gap: 0.6rem; margin-bottom: 0.75rem; }

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.docs-pager a {
  flex: 1 1 45%;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--panel);
}
.docs-pager-next { text-align: right; }
.docs-pager a:hover { border-color: var(--brand-orange); }

.docs-result {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.docs-result h2 { margin: 0 0 0.2rem; font-size: var(--step-0); }
.docs-result p { margin: 0.3rem 0 0; }

.docs-contents { max-width: 40rem; }

/* ==========================================================================
   ACCOUNT TABS
   --------------------------------------------------------------------------
   Radio inputs + CSS, no JavaScript — same reasoning as the admin settings
   screen. Survives a script failure, arrow keys move between tabs by default,
   every panel stays in the DOM so find-in-page still works, and printing
   shows all of them.
   ========================================================================== */
.account-tabs { position: relative; margin-top: 1.5rem; }

.account-tabs .tab-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.account-tabs .tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 2px solid var(--line);
  margin-bottom: 2rem;
}

.account-tabs .tab-label {
  padding: 0.7rem 1.15rem;
  cursor: pointer;
  font-weight: 600;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -2px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.account-tabs .tab-label:hover { background: var(--panel); color: var(--ink); }

.account-tabs .tab-panel { display: none; }
.account-tabs .tab-panel > h2:first-child { margin-top: 0; }

/* Selected state uses weight, border and background — never colour alone. */
#acc_profile:checked  ~ .tab-list .tab-label:nth-of-type(1),
#acc_forum:checked    ~ .tab-list .tab-label:nth-of-type(2),
#acc_support:checked  ~ .tab-list .tab-label:nth-of-type(3),
#acc_billing:checked  ~ .tab-list .tab-label:nth-of-type(4),
#acc_security:checked ~ .tab-list .tab-label:nth-of-type(5) {
  background: var(--panel);
  border-color: var(--line);
  border-bottom: 2px solid var(--panel);
  color: var(--ink);
}

#acc_profile:checked  ~ .tab-panel-profile,
#acc_forum:checked    ~ .tab-panel-forum,
#acc_support:checked  ~ .tab-panel-support,
#acc_billing:checked  ~ .tab-panel-billing,
#acc_security:checked ~ .tab-panel-security {
  display: block;
}

/* The real input is visually hidden, so focus must be obvious on the label. */
#acc_profile:focus-visible  ~ .tab-list .tab-label:nth-of-type(1),
#acc_forum:focus-visible    ~ .tab-list .tab-label:nth-of-type(2),
#acc_support:focus-visible  ~ .tab-list .tab-label:nth-of-type(3),
#acc_billing:focus-visible  ~ .tab-list .tab-label:nth-of-type(4),
#acc_security:focus-visible ~ .tab-list .tab-label:nth-of-type(5) {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.account-tabs .badge {
  display: inline-block;
  background: var(--brand-orange);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.35rem;
}

/* Fieldsets group related controls without drawing a box — the surrounding
   card already provides the container, and nesting two borders reads as
   clutter. The legend is styled as a subordinate heading. */
.account-tabs fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;   /* fieldsets refuse to shrink in a grid without this */
}
.account-tabs fieldset legend {
  padding: 0;
  width: 100%;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}
.account-tabs fieldset legend h3 { margin: 0 0 0.75rem; }

/* A grid nested inside a card shouldn't add the outer grid's bottom margin. */
.acct-grid-flush { margin-bottom: 0; }

/* Cards are flex columns so their action button can be pushed to the bottom.
   Two cards side by side then have their buttons on the same line even when
   the cards contain different amounts of content. */
.acct-card {
  display: flex;
  flex-direction: column;
}
.acct-card-action,
.panel-card-action {
  margin-top: auto;        /* takes up any spare height above the button */
  align-self: flex-start;  /* button keeps its natural width */
}
/* `margin-top: auto` collapses to nothing when the content already fills the
   card, so the gap comes from the element above rather than the button. */
.acct-card > .acct-grid-flush,
.acct-card > .field:last-of-type,
.panel-card > .field:last-of-type { margin-bottom: 1.25rem; }

@media (max-width: 620px) {
  .account-tabs .tab-list { overflow-x: auto; flex-wrap: nowrap; }
  .account-tabs .tab-label { padding: 0.6rem 0.85rem; font-size: 0.95rem; }
}

@media print {
  .account-tabs .tab-panel { display: block !important; }
  .account-tabs .tab-list { display: none; }
}

/* --------------------------------------------------------------------------
   ACCOUNT PANEL COLUMNS
   --------------------------------------------------------------------------
   auto-fit with a minimum track width, so columns collapse on their own
   rather than needing a breakpoint per layout. Below the minimum they stack,
   which is also what happens at 200% zoom — the same code path serves both.
   -------------------------------------------------------------------------- */
.card-grid-2,
.card-grid-3,
.acct-grid-2,
.acct-grid-3 {
  display: grid;
  gap: 1.5rem 2rem;
  align-items: start;
  margin-bottom: 2rem;
}
.card-grid-2,
.acct-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.card-grid-3,
.acct-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* The profile form is a workspace of cards, not a narrow authentication
   form. Let it use the page width and keep its major sections full-width. */
.account-profile-form { max-width: none; }
.account-profile-form > .card-grid-2 { align-items: stretch; }
.tab-panel-profile .card-span-2 { grid-column: 1 / -1; }
.account-tabs .field { min-width: 0; }

/* Flush grids are nested inside a card. This rule follows the general grid
   declaration so the outer-grid margin cannot override it. */
.card-grid-2.acct-grid-flush,
.card-grid-3.acct-grid-flush,
.acct-grid-2.acct-grid-flush,
.acct-grid-3.acct-grid-flush { margin-bottom: 0; }

/* A cell that should take two tracks when the grid is wide enough. */
@media (min-width: 62rem) {
  .acct-span-2,
  .card-span-2 { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   PANEL CARDS
   --------------------------------------------------------------------------
   One grouping pattern used everywhere a form or block of related settings
   needs a container: account tabs, admin settings, ticket detail, dashboards.
   `.acct-card` is kept as an alias so existing markup keeps working.
   -------------------------------------------------------------------------- */
.panel-card,
.acct-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
}
.account-tabs .panel-card,
.account-tabs .acct-card {
  box-shadow: 0 12px 32px rgba(0, 28, 59, 0.055);
}
.panel-card > h3:first-child,
.panel-card > h2:first-child,
.acct-card > h3:first-child,
.acct-card > legend + *,
.acct-card fieldset:first-child { margin-top: 0; }

.panel-card > h2,
.panel-card > h3,
.acct-card > h2,
.acct-card > h3 {
  margin-top: 0;
  font-size: var(--step-0);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand-orange);
}

.panel-card .field:last-of-type,
.acct-card .field:last-of-type { margin-bottom: 0.75rem; }

.panel-card { display: flex; flex-direction: column; }
.panel-card textarea,
.panel-card input:not([type="checkbox"]):not([type="radio"]),
.panel-card select { width: 100%; max-width: none; }

/* A card that should run the full width of its grid. */
.card-full { grid-column: 1 / -1; }

/* Fields inside a narrow column shouldn't keep the wide form's max-width.
   Checkboxes and radios are excluded: stretching one to 100% pushes its
   label into a thin column beside a wide empty gutter. */
.acct-grid-2 .field input:not([type="checkbox"]):not([type="radio"]),
.acct-grid-2 .field select,
.acct-grid-2 .field textarea,
.acct-grid-3 .field input:not([type="checkbox"]):not([type="radio"]),
.acct-grid-3 .field select,
.acct-grid-3 .field textarea { width: 100%; max-width: none; }

/* The account forms are otherwise constrained; inside a grid they fill. */
.account-tabs .acct-grid-2 .auth-form,
.account-tabs .acct-grid-3 .auth-form { max-width: none; }

.acct-full { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   PAY WHAT YOU CAN
   --------------------------------------------------------------------------
   A single row on wide screens, stacking naturally when there isn't space.
   The "no thanks" link deliberately sits in normal reading order and normal
   link styling — not hidden, not greyed out.
   -------------------------------------------------------------------------- */
.pwyc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-orange);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin: 0 0 2.5rem;
}
.pwyc-intro h2 { margin: 0 0 0.4rem; font-size: var(--step-1); }
.pwyc-intro p { margin: 0 0 1.25rem; max-width: 62ch; }

.pwyc-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pwyc-amounts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

/* Preset amounts: the radio is the whole button, so the hit area matches the
   visible control rather than a small dot beside it. */
.pwyc-preset { position: relative; }
.pwyc-preset input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pwyc-preset label {
  display: block;
  min-width: 4.25rem;
  text-align: center;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
/* Selection shown by border AND background, never colour alone. */
.pwyc-preset input:checked + label {
  border-color: var(--brand-orange);
  background: #fff6ed;
}
.pwyc-preset input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.pwyc-preset label:hover { border-color: var(--ink-soft); }

.pwyc-custom {
  display: flex;
  align-items: center;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding-left: 0.75rem;
  min-width: 9rem;
}
.pwyc-custom .pwyc-currency { font-weight: 700; color: var(--ink-soft); }
.pwyc-custom input {
  border: none;
  background: none;
  width: 6.5rem;
  padding: 0.65rem 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.pwyc-custom input:focus { outline: none; }
.pwyc-custom:focus-within {
  border-color: var(--brand-orange);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.pwyc-submit { white-space: nowrap; }
.pwyc-form .hint { flex-basis: 100%; margin: 0.35rem 0 0; }
.pwyc-linkrow { margin: 0; }

.pwyc-skip {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
  .pwyc { padding: 1.25rem; }
  .pwyc-form { align-items: stretch; }
  .pwyc-amounts { width: 100%; }
  .pwyc-custom { flex: 1 1 auto; }
  .pwyc-submit { width: 100%; }
}

/* Signature box fills the width of its card rather than inheriting the
   narrower form default. */
.acct-card textarea { width: 100%; max-width: none; }
.card-grid-2 > .panel-card,
.card-grid-3 > .panel-card { margin: 0; }

/* --------------------------------------------------------------------------
   DONATE PAGE
   -------------------------------------------------------------------------- */
.donate-form { max-width: none; }
.donate-form fieldset.panel-card { margin: 0; }
.donate-form legend { padding: 0; width: 100%; }
.donate-form legend h3 {
  margin: 0 0 1rem;
  font-size: var(--step-0);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand-orange);
}
/*
  An even split, not auto-fit. auto-fit sizes tracks by content, so the amount
  buttons would claim more width than the three short interval options and the
  two halves would drift out of alignment. `1fr 1fr` keeps them equal, and the
  media query handles the point where two columns stop fitting.
*/
.donate-split { grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 46rem) {
  .donate-split { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Legends inside the shared card are subordinate headings, matching the
   notification card in the account area. */
.donate-split legend {
  padding: 0;
  width: 100%;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}
.donate-split fieldset { border: none; padding: 0; margin: 0; min-width: 0; }

.donate-form .amount-grid { margin-bottom: 1.25rem; }
.donate-form > .panel-card { margin-bottom: 1.5rem; }

/* The optional details sit beneath the two columns in three rows:
   name + email, then message across both, then the anonymity choice and the
   submit inline. The Stripe note is centred at the very bottom. */
.donate-footer {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.donate-about { border: none; padding: 0; margin: 0; min-width: 0; }

/* Row 1 — name and email, evenly split. */
.donate-about-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}

/* Row 2 — message spans the full width of row 1 combined. Both use the same
   container, so they line up without needing matched percentages. */
.donate-message { width: 100%; }

.donate-about-row .field,
.donate-message { margin-bottom: 1rem; }
.donate-about-row .field input,
.donate-message input { width: 100%; max-width: none; }

/* Row 3 — anonymity choice and submit on one line. */
.donate-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.donate-actions .checkbox-field { margin: 0; min-height: 0; flex: 0 1 auto; }
.donate-actions .btn { white-space: nowrap; flex: 0 0 auto; }

.donate-disclaimer {
  margin: 1.25rem 0 0;
  text-align: center;
  max-width: none;
}

@media (max-width: 46rem) {
  .donate-about-row { grid-template-columns: 1fr; }
  .donate-actions { align-items: stretch; }
  .donate-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   NEWSLETTER CTA
   --------------------------------------------------------------------------
   One row on wide screens. Previously each field was full width and stacked,
   which made a two-field form take up as much height as a page section.
   -------------------------------------------------------------------------- */
.newsletter-cta {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: 1rem 2.5rem;
  align-items: start;
}
.newsletter-intro { grid-column: 1; }
.newsletter-intro h2 { margin: 0 0 0.4rem; }
.newsletter-intro p { margin: 0; max-width: none; font-size: 0.95rem; }

.newsletter-form {
  grid-column: 2;
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  max-width: none;
  margin: 0;
}
.newsletter-form .field {
  flex: 1 1 12rem;
  margin: 0;
  min-width: 0;
}
.newsletter-form .field input { width: 100%; max-width: none; }
.newsletter-form .btn { flex: 0 0 auto; }

.newsletter-message { grid-column: 1 / -1; margin: 0; }

.newsletter-privacy {
  grid-column: 2;
  margin: 0;
  font-size: 0.85rem;
}

@media (max-width: 860px) {
  .newsletter-cta { grid-template-columns: 1fr; gap: 1rem; }
  .newsletter-intro,
  .newsletter-form,
  .newsletter-privacy { grid-column: 1; }
  .newsletter-form .btn { width: 100%; }
}

/* ==========================================================================
   BroadcastLabs brand system
   ========================================================================== */
:root {
  --paper: #f4f7fb;
  --panel: #ffffff;
  --ink: #071b3a;
  --ink-soft: #526078;
  --line: #dce3ed;
  --brand-navy: #001b44;
  --brand-blue: #073e82;
  --brand-orange: #ff5b08;
  --brand-orange-dark: #da4300;
  --brand-orange-soft: #fff0e8;
  --amber-bg: #ff5b08;
  --amber-ink: #071b3a;
  --radius: 14px;
  --radius-lg: 28px;
  --max: 1240px;
  --measure: 70ch;
  --shadow-sm: 0 12px 34px rgba(7, 27, 58, 0.08);
  --shadow-lg: 0 30px 80px rgba(0, 27, 68, 0.2);
  --font-display: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", sans-serif;
  --font-body: "Segoe UI Variable Text", "Aptos", "Segoe UI", sans-serif;
}

body {
  background:
    radial-gradient(circle at 4% 8%, rgba(255, 91, 8, 0.055), transparent 24rem),
    var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.65rem, 5.5vw, 5.4rem); line-height: 0.98; }
h2 { font-size: clamp(1.85rem, 3.5vw, 3.25rem); line-height: 1.08; }
h3 { font-size: 1.3rem; }

.container { padding-inline: clamp(1.1rem, 3vw, 2rem); }

.announcement-bar {
  background: var(--brand-orange);
  color: var(--brand-navy);
  font-size: 0.83rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  padding: 0.42rem 0;
  text-align: center;
}

.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(7, 27, 58, 0.09);
  backdrop-filter: blur(18px);
}
.site-header .bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  align-items: center;
  min-height: 82px;
  padding: 0;
}
.brand { gap: 0.72rem; min-width: max-content; }
.brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.brand-wordmark {
  color: var(--brand-navy);
  font-family: var(--font-display);
  font-size: 1.48rem;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1;
}
.brand-wordmark span { color: var(--brand-orange); }

.main-nav { justify-self: end; }
.main-nav > ul { gap: clamp(1rem, 2vw, 2rem); }
.main-nav a {
  color: #243650;
  font-size: 0.9rem;
  font-weight: 680;
  padding: 1.8rem 0;
  border-bottom-width: 3px;
}
.main-nav a[aria-current="page"] { color: var(--brand-navy); border-bottom-color: var(--brand-orange); }

.nav-actions { gap: 0.9rem; margin: 0; }
.account-link {
  color: var(--brand-navy);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.header-cta { white-space: nowrap; padding: 0.72rem 1.05rem; }
.nav-toggle { display: none; }

.btn {
  border-radius: 999px;
  padding: 0.82rem 1.35rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--brand-orange);
  color: var(--brand-navy);
  box-shadow: 0 10px 24px rgba(255, 91, 8, 0.22);
}
.btn-primary:hover { background: #ff7430; color: var(--brand-navy); }
.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn-hero-secondary:hover { background: #fff; color: var(--brand-navy); }

main { padding: clamp(1rem, 2vw, 1.75rem) 0 clamp(4rem, 8vw, 8rem); }

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: 620px;
  padding: clamp(3.5rem, 8vw, 7rem);
  border-radius: clamp(22px, 4vw, 40px);
  box-shadow: var(--shadow-lg);
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 34rem;
  aspect-ratio: 1;
  right: -10rem;
  top: -15rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgba(255, 255, 255, 0.025),
    0 0 0 10rem rgba(255, 255, 255, 0.02);
}
.page-hero-brand {
  background:
    radial-gradient(circle at 90% 15%, rgba(255, 91, 8, 0.26), transparent 30rem),
    linear-gradient(135deg, #073e82 0%, #001b44 66%);
  color: #fff;
}
.page-hero-midnight {
  background:
    linear-gradient(110deg, rgba(255, 91, 8, 0.12), transparent 45%),
    var(--brand-navy);
  color: #fff;
}
.page-hero-light {
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 91, 8, 0.13), transparent 24rem),
    #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.page-hero h1 { margin: 0; max-width: 13ch; color: inherit; }
.page-hero-centered h1 { margin-inline: auto; }
.hero-kicker,
.section-label {
  color: var(--brand-orange);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
}
.page-hero-light .hero-kicker { color: var(--brand-orange-dark); }
.hero-summary {
  max-width: 60ch;
  margin: 1.7rem 0 0;
  color: inherit;
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  line-height: 1.55;
  opacity: 0.83;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.page-hero-light .btn-hero-secondary { color: var(--brand-navy); border-color: var(--brand-navy); background: transparent; }
.page-hero-light .btn-hero-secondary:hover { color: #fff; background: var(--brand-navy); }
.page-hero-visual {
  min-height: 320px;
  display: grid;
  place-items: center;
  position: relative;
}
.page-hero-visual::after {
  content: "";
  position: absolute;
  inset: 12% 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 91, 8, 0.28), transparent 68%);
  filter: blur(14px);
  z-index: -1;
}
.page-hero-visual img {
  width: min(100%, 390px);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 28px 50px rgba(0, 0, 0, 0.28));
}
.page-hero-centered {
  grid-template-columns: 1fr;
  min-height: 500px;
  text-align: center;
}
.page-hero-centered .page-hero-copy { max-width: 880px; margin: auto; }
.page-hero-centered .hero-summary { margin-inline: auto; }
.page-hero-centered .hero-actions { justify-content: center; }
.page-hero-centered .page-hero-visual { display: none; }
.page-hero-compact {
  grid-template-columns: 1fr;
  min-height: 0;
  padding-block: clamp(3.25rem, 7vw, 6rem);
}
.page-hero-compact h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); }

.signal-orbit {
  width: 16rem;
  height: 16rem;
  position: relative;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
}
.signal-orbit::before,
.signal-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
}
.signal-orbit::before { inset: 2rem; }
.signal-orbit::after { inset: 4rem; }
.signal-orbit span {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 0.65rem;
  height: var(--bar-height, 3rem);
  transform: translateX(-50%) translateY(50%);
  border-radius: 999px;
  background: var(--brand-orange);
}
.signal-orbit span:nth-child(1) { --bar-height: 3.5rem; margin-left: -3.2rem; }
.signal-orbit span:nth-child(2) { --bar-height: 6.5rem; margin-left: -1.6rem; background: #fff; }
.signal-orbit span:nth-child(3) { --bar-height: 9.5rem; }
.signal-orbit span:nth-child(4) { --bar-height: 6.5rem; margin-left: 1.6rem; background: #fff; }
.signal-orbit span:nth-child(5) { --bar-height: 3.5rem; margin-left: 3.2rem; }

.page-content-wide { padding-top: clamp(4rem, 8vw, 7.5rem); }
.page-content-wide > *,
.page-content > * { max-width: none; }
.home-section { margin: 0 0 clamp(5rem, 10vw, 9rem); }
.home-intro { max-width: 950px; }
.public-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.public-section-heading h2 { margin: 0; }
.public-section-heading p { margin: 0; color: var(--ink-soft); font-size: 1.1rem; }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 clamp(5rem, 8vw, 7rem);
  border-block: 1px solid var(--line);
}
.trust-strip span {
  padding: 1.25rem 1rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-align: center;
}
.trust-strip span + span { border-left: 1px solid var(--line); }

.product-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.product-showcase-card {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.7rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.product-card-featured {
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 91, 8, 0.25), transparent 20rem),
    var(--brand-navy);
  border-color: var(--brand-navy);
}
.product-card-top,
.catalog-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.product-index {
  color: var(--brand-orange);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.product-badge {
  display: inline-flex;
  width: fit-content;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.25rem 0.62rem;
  color: var(--brand-orange-dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-card-featured .product-badge { color: #ffb28a; }
.product-showcase-card h2 {
  margin: 2.5rem 0 1rem;
  color: inherit;
  font-size: clamp(2rem, 3vw, 2.7rem);
}
.product-showcase-card > p { color: var(--ink-soft); }
.product-card-featured > p { color: rgba(255,255,255,0.76); }
.feature-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.feature-list li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.4rem;
  border-bottom: 1px solid rgba(82, 96, 120, 0.17);
}
.feature-list li::before {
  content: "";
  position: absolute;
  width: 0.43rem;
  height: 0.43rem;
  left: 0.1rem;
  top: 1.18rem;
  border-radius: 50%;
  background: var(--brand-orange);
}
.product-card-featured .feature-list li { border-bottom-color: rgba(255,255,255,0.13); }
.card-link {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
  color: inherit;
  border-top: 1px solid rgba(82, 96, 120, 0.17);
  font-weight: 750;
  text-decoration: none;
}
.product-card-featured .card-link { border-color: rgba(255,255,255,0.16); color: #fff; }
.card-link span { color: var(--brand-orange); }

.operating-system {
  display: grid;
  grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(3rem, 8vw, 8rem);
  padding: clamp(2.5rem, 6vw, 5.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.operating-system h2 { margin: 0; }
.workflow-list { display: grid; }
.workflow-list article {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1.2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
.workflow-list article:first-child { padding-top: 0; }
.workflow-list article:last-child { border-bottom: 0; padding-bottom: 0; }
.workflow-list article > span { color: var(--brand-orange); font-size: 0.75rem; font-weight: 800; }
.workflow-list h3 { margin: 0 0 0.3rem; }
.workflow-list p { margin: 0; color: var(--ink-soft); }

.capability-band {
  display: grid;
  grid-template-columns: minmax(20rem, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.capability-band h2 { margin: 0 0 1.3rem; }
.capability-band > div:first-child > p:last-child { color: var(--ink-soft); }
.capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.capability-grid article {
  min-height: 170px;
  padding: 1.5rem;
  border-top: 1px solid var(--line);
}
.capability-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
.capability-grid strong { display: block; margin-bottom: 0.55rem; font-size: 1.12rem; }
.capability-grid span { color: var(--ink-soft); }

.home-cta-band {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem);
  color: #fff;
  background:
    radial-gradient(circle at 92% 20%, rgba(255, 91, 8, 0.34), transparent 23rem),
    var(--brand-navy);
  border-radius: var(--radius-lg);
}
.home-cta-band h2 { color: #fff; margin: 0; }
.home-cta-band .hero-actions { margin: 0; flex-shrink: 0; }

.content-feature-grid,
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.content-feature-grid article,
.comparison-grid article,
.prose-panel {
  padding: clamp(1.6rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.content-feature-grid article > span {
  color: var(--brand-orange-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.content-feature-grid h2,
.comparison-grid h2 { margin: 1.4rem 0 0.7rem; font-size: 1.65rem; }
.content-feature-grid p,
.comparison-grid p { color: var(--ink-soft); }
.prose-panel { max-width: 980px; margin-inline: auto; }
.feature-list.columns { columns: 2; column-gap: 3rem; }

.content-header { margin: clamp(2rem, 5vw, 5rem) 0; }
.content-header h1 { max-width: 16ch; }
.content-header .lead { color: var(--ink-soft); }
.container-reading .page-hero { margin-inline: calc((min(58rem, 100vw) - min(var(--max), 100vw)) / 2); }

.newsletter-wrap { margin-bottom: clamp(3rem, 7vw, 6rem); }
.newsletter-cta {
  padding: clamp(1.8rem, 4vw, 3.25rem);
  background: var(--brand-orange-soft);
  border: 1px solid rgba(255, 91, 8, 0.25);
  border-radius: var(--radius-lg);
}

.site-footer {
  padding: clamp(3.5rem, 8vw, 7rem) 0 2rem;
  background: #03142f;
  border: 0;
  color: rgba(255,255,255,0.68);
}
.footer-brand-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  padding-bottom: 2.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-brand img { width: 58px; height: 58px; object-fit: contain; }
.footer-brand .brand-wordmark { color: #fff; font-size: 1.65rem; }
.footer-brand p { margin: 0.3rem 0 0; }
.footer-tagline {
  color: var(--brand-orange);
  font-weight: 750;
  letter-spacing: 0.02em;
  text-align: right;
}
.footer-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.footer-grid h2 { color: #fff; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-grid a { color: rgba(255,255,255,0.72); text-decoration: none; }
.footer-grid a:hover { color: #fff; }
.footer-bottom {
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.48);
}
.footer-bottom a { color: rgba(255,255,255,0.66); }

@media (max-width: 1100px) {
  .site-header .bar { grid-template-columns: auto auto 1fr; }
  .nav-toggle {
    grid-column: 3;
    justify-self: end;
    display: grid;
    gap: 4px;
    width: 42px;
    height: 42px;
    place-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
  }
  .nav-toggle span:not(.sr-only) { display: block; width: 18px; height: 2px; background: var(--brand-navy); }
  .main-nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-self: stretch;
    padding: 0 0 1rem;
  }
  .main-nav.is-open { display: block; }
  .main-nav > ul { display: grid; gap: 0; }
  .main-nav a { display: block; padding: 0.8rem 0; }
  .nav-actions { grid-column: 2; grid-row: 1; justify-self: end; }
}

@media (max-width: 900px) {
  .page-hero { grid-template-columns: 1fr; min-height: 0; }
  .page-hero-visual { min-height: 240px; }
  .page-hero-visual img { width: min(75vw, 310px); }
  .product-showcase,
  .content-feature-grid,
  .comparison-grid { grid-template-columns: 1fr; }
  .product-showcase-card { min-height: 0; }
  .public-section-heading,
  .operating-system,
  .capability-band { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-strip span:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .trust-strip span:nth-child(4) { border-top: 1px solid var(--line); }
  .home-cta-band { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .site-header .bar { grid-template-columns: auto 1fr auto; min-height: 70px; gap: 0.75rem; }
  .brand img { width: 38px; height: 38px; }
  .brand-wordmark { font-size: 1.25rem; }
  .nav-actions { grid-column: 2; }
  .nav-actions .account-link { display: none; }
  .header-cta { padding: 0.58rem 0.8rem; font-size: 0.8rem; }
  .nav-toggle { grid-column: 3; }
  .page-hero { padding: 2.25rem 1.4rem; border-radius: 22px; }
  .page-hero h1 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
  .page-hero-visual { min-height: 190px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip span + span,
  .trust-strip span:nth-child(3),
  .trust-strip span:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article:nth-child(odd) { border-right: 0; }
  .feature-list.columns { columns: 1; }
  .footer-brand-row { align-items: flex-start; flex-direction: column; }
  .footer-tagline { text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Contact */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.55fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
  margin: clamp(2.5rem, 6vw, 5rem) 0;
}
.contact-form-card {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.contact-form-heading { margin-bottom: 2rem; }
.contact-form-heading .section-label { margin-bottom: 0.7rem; }
.contact-form-heading h2 { margin: 0; }
.contact-form-heading > p:last-child { color: var(--ink-soft); }
.contact-form { max-width: none; }
.contact-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea { max-width: none; }
.contact-form textarea { resize: vertical; }
.contact-submit-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.contact-submit-row p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.contact-submit-row .btn { flex: 0 0 auto; }
.contact-aside {
  overflow: hidden;
  color: rgba(255,255,255,0.76);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 91, 8, 0.3), transparent 18rem),
    var(--brand-navy);
  border-radius: var(--radius-lg);
}
.contact-aside section { padding: 1.7rem; }
.contact-aside section + section { border-top: 1px solid rgba(255,255,255,0.14); }
.contact-aside h2 { margin: 0.65rem 0; color: #fff; font-size: 1.25rem; }
.contact-aside p { margin: 0; font-size: 0.94rem; }
.contact-aside-number {
  color: var(--brand-orange);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.contact-aside .card-link {
  margin-top: 1.2rem;
  color: #fff;
  border-color: rgba(255,255,255,0.16);
}

/* Account profile workspace */
.account-heading { max-width: 860px; }
.account-heading .section-label { margin-bottom: 0.65rem; }
.account-heading h1 { margin: 0; }
.account-heading > p:last-child { color: var(--ink-soft); font-size: 1.08rem; }
.account-profile-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(15rem, 0.52fr);
  gap: 1.35rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  color: #fff;
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 91, 8, 0.32), transparent 20rem),
    var(--brand-navy);
  border-radius: var(--radius-lg);
}
.account-profile-avatar {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  color: var(--brand-navy);
  background: #fff;
  border: 4px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 850;
}
.account-profile-intro .section-label { margin: 0 0 0.3rem; color: #ffb18a; }
.account-profile-intro h2 { margin: 0; color: #fff; font-size: 1.65rem; }
.account-profile-intro > p { margin: 0.35rem 0 0; color: rgba(255,255,255,0.72); font-size: 0.9rem; }
.profile-overview-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.9rem; font-size: 0.8rem; }
.profile-overview-meta .status-pill { color: #fff; background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.22); }
.profile-completion { display: grid; gap: 0.55rem; }
.profile-completion > span:first-child { display: flex; justify-content: space-between; gap: 0.8rem; color: rgba(255,255,255,0.75); font-size: 0.78rem; }
.profile-completion strong { color: #fff; font-size: 1rem; }
.profile-completion small { color: rgba(255,255,255,0.62); line-height: 1.45; }
.profile-progress { overflow: hidden; height: 8px; background: rgba(255,255,255,0.15); border-radius: 999px; }
.profile-progress i { display: block; height: 100%; background: var(--brand-orange); border-radius: inherit; }
.tab-panel-profile .account-profile-overview { margin-bottom: 0; }
.profile-section-tabs {
  position: relative;
  z-index: 2;
  margin: -1rem 1rem 0;
}
.profile-section-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.profile-section-tab-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.45rem;
  background: #082951;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  box-shadow: 0 16px 38px rgba(0,28,59,0.18);
}
.profile-section-tab-list label {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.05rem 0.65rem;
  align-content: center;
  min-width: 0;
  min-height: 72px;
  padding: 0.75rem 0.85rem;
  color: rgba(255,255,255,0.7);
  border-radius: 12px;
  cursor: pointer;
}
.profile-section-tab-list label:hover { color: #fff; background: rgba(255,255,255,0.08); }
.profile-section-tab-list label > span {
  grid-row: 1 / 3;
  align-self: center;
  color: #ff9b68;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.profile-section-tab-list strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.86rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-section-tab-list small {
  overflow: hidden;
  color: inherit;
  font-size: 0.67rem;
  line-height: 1.3;
  opacity: 0.72;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#profile_section_identity:checked ~ .profile-section-tab-list label:nth-child(1),
#profile_section_social:checked ~ .profile-section-tab-list label:nth-child(2),
#profile_section_privacy:checked ~ .profile-section-tab-list label:nth-child(3),
#profile_section_contact:checked ~ .profile-section-tab-list label:nth-child(4),
#profile_section_stations:checked ~ .profile-section-tab-list label:nth-child(5) {
  color: var(--brand-navy);
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,19,50,0.18);
}
#profile_section_identity:checked ~ .profile-section-tab-list label:nth-child(1)::after,
#profile_section_social:checked ~ .profile-section-tab-list label:nth-child(2)::after,
#profile_section_privacy:checked ~ .profile-section-tab-list label:nth-child(3)::after,
#profile_section_contact:checked ~ .profile-section-tab-list label:nth-child(4)::after,
#profile_section_stations:checked ~ .profile-section-tab-list label:nth-child(5)::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.35rem;
  height: 3px;
  background: var(--brand-orange);
  border-radius: 999px;
}
#profile_section_identity:focus-visible ~ .profile-section-tab-list label:nth-child(1),
#profile_section_social:focus-visible ~ .profile-section-tab-list label:nth-child(2),
#profile_section_privacy:focus-visible ~ .profile-section-tab-list label:nth-child(3),
#profile_section_contact:focus-visible ~ .profile-section-tab-list label:nth-child(4),
#profile_section_stations:focus-visible ~ .profile-section-tab-list label:nth-child(5) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.profile-tab-panels { margin-top: 1rem; }
.profile-section-panel { display: none; }
#profile_section_identity:checked ~ .account-profile-form .profile-panel-identity,
#profile_section_social:checked ~ .account-profile-form .profile-panel-social,
#profile_section_privacy:checked ~ .account-profile-form .profile-panel-privacy,
#profile_section_contact:checked ~ .account-profile-form .profile-panel-contact,
#profile_section_stations:checked ~ .profile-panel-stations {
  display: block;
}
#profile_section_stations:checked ~ .account-profile-form { display: none; }
.profile-tab-surface {
  min-height: 430px;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.profile-tab-surface input:not([type="checkbox"]):not([type="radio"]),
.profile-tab-surface select,
.profile-tab-surface textarea {
  width: 100%;
  max-width: none;
}
.profile-card-heading {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.profile-card-heading > span {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--brand-orange-dark);
  background: var(--brand-orange-soft);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.profile-card-heading h3 { margin: 0; font-size: 1.35rem; }
.profile-card-heading p { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.86rem; }
.profile-social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1.25rem;
}
.profile-panel-footnote {
  margin: 0;
  padding-top: 1rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}
.profile-privacy-promise {
  max-width: 680px;
  margin-top: 1.5rem;
  padding: 1.35rem 1.5rem;
  color: rgba(255,255,255,0.75);
  background:
    radial-gradient(circle at 100% 0, rgba(255,91,8,0.28), transparent 16rem),
    var(--brand-navy);
  border-radius: 16px;
}
.profile-privacy-promise > span {
  display: block;
  margin-bottom: 0.45rem;
  color: #ffad84;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.profile-privacy-promise strong { display: block; color: #fff; font-size: 1.05rem; }
.profile-privacy-promise p { margin: 0.55rem 0 0; font-size: 0.86rem; }
.profile-station-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
  gap: 1.5rem;
  align-items: start;
}
.profile-panel-stations { margin-top: 1rem; }
.profile-station-list,
.profile-station-form {
  padding: 1.25rem;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.profile-station-list > h3,
.profile-station-form > h3 { margin: 0 0 1rem; font-size: 1.05rem; }
.profile-station-list .card {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: #fff;
  box-shadow: none;
}
.profile-station-list .card p { margin: 0; }
.profile-station-list .card form { flex: 0 0 auto; }
.profile-station-form { max-width: none; }
.profile-private-note {
  display: flex;
  gap: 0.3rem 1rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  color: var(--ink-soft);
  background: var(--brand-orange-soft);
  border-left: 3px solid var(--brand-orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.88rem;
}
.profile-private-note strong { color: var(--ink); }
.profile-save-bar {
  position: sticky;
  z-index: 15;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  margin: 1rem 0 3rem;
  padding: 0.85rem 1rem 0.85rem 1.25rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 44px rgba(0,28,59,0.15);
  backdrop-filter: blur(12px);
}
.profile-save-bar p { display: grid; margin: 0; }
.profile-save-bar p span { color: var(--ink-soft); font-size: 0.78rem; }
.account-subsection-heading { margin: 3.5rem 0 1.25rem; }
.account-subsection-heading .section-label { margin-bottom: 0.55rem; }
.account-subsection-heading h2 { margin: 0; }
.account-subsection-heading > p:last-child { margin: 0.4rem 0 0; color: var(--ink-soft); }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-aside { display: grid; grid-template-columns: repeat(3, 1fr); }
  .contact-aside section + section { border-top: 0; border-left: 1px solid rgba(255,255,255,0.14); }
  .account-profile-overview { grid-template-columns: auto 1fr; }
  .profile-completion { grid-column: 1 / -1; }
  .profile-social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-station-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .contact-field-grid { grid-template-columns: 1fr; }
  .contact-submit-row,
  .profile-save-bar { align-items: flex-start; flex-direction: column; }
  .contact-submit-row .btn,
  .profile-save-bar .btn { width: 100%; text-align: center; }
  .contact-aside { grid-template-columns: 1fr; }
  .contact-aside section + section { border-left: 0; border-top: 1px solid rgba(255,255,255,0.14); }
  .account-profile-overview { grid-template-columns: 1fr; }
  .account-profile-avatar { width: 62px; height: 62px; }
  .profile-completion { grid-column: auto; }
  .profile-section-tabs { margin: -0.75rem 0 0; }
  .profile-section-tab-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .profile-section-tab-list label {
    flex: 0 0 175px;
    scroll-snap-align: start;
  }
  .profile-tab-surface { min-height: 0; padding: 1.25rem; border-radius: 18px; }
  .profile-social-grid { grid-template-columns: 1fr; }
  .profile-card-heading { grid-template-columns: 2.25rem 1fr; gap: 0.75rem; }
  .profile-card-heading > span { width: 2.25rem; height: 2.25rem; }
}

@media print {
  .profile-section-tab-list { display: none; }
  .profile-section-panel { display: block !important; margin-bottom: 1rem; }
  .profile-save-bar { position: static; box-shadow: none; }
}