/* ==========================================================================
   Technosavvy — Design tokens
   Palette:  Ink #12213A · Paper #F7F8FA · Signal Blue #2B6CFF ·
             Circuit Teal #0FB8A6 · Amber Fix #F2A93B · Slate #3B4658
   Type:     Space Grotesk (display) · Inter (body) · IBM Plex Mono (status/data)
   ========================================================================== */

/* Stand-in fonts shown for the moment before the web fonts arrive, sized to
   match them so text doesn't jump when they swap in. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Arimo'), local('Liberation Sans'), local('Helvetica Neue'), local('Roboto');
  ascent-override: 90.4%; descent-override: 22.5%; line-gap-override: 0%; size-adjust: 107%; }
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial'), local('Arimo'), local('Liberation Sans'), local('Helvetica Neue'), local('Roboto');
  ascent-override: 89%; descent-override: 26.4%; line-gap-override: 0%; size-adjust: 106%; }
@font-face { font-family: 'IBM Plex Mono Fallback'; src: local('Courier New'), local('Cousine'), local('Liberation Mono'), local('Menlo');
  ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; size-adjust: 100%; }

:root {
  --ink: #12213A;
  --ink-soft: #1B2C4A;
  --paper: #F7F8FA;
  --paper-dim: #ECEFF3;
  --signal: #2B6CFF;
  --signal-dim: #E7EEFF;
  --teal: #0FB8A6;
  --amber: #F2A93B;
  --slate: #3B4658;
  --slate-soft: #6B7686;
  --line: #DBDFE6;
  --line-dark: #2B3D5E;
  --white: #FFFFFF;

  --font-display: 'Space Grotesk', 'Space Grotesk Fallback', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Inter Fallback', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', 'Courier New', monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(18, 33, 58, 0.06), 0 8px 24px rgba(18, 33, 58, 0.06);
  --max-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem); }
h2 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.5rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.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;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--white);
  padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- Eyebrow / mono labels ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 0.9em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(15,184,166,0.18);
  flex: none;
}
.eyebrow.on-dark { color: #7FE3D6; }

.mono-tag { font-family: var(--font-mono); font-size: 0.78rem; color: var(--slate-soft); }
.status-ok { color: var(--teal); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none !important;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--amber); color: var(--ink); }
.btn-primary:hover { background: #e39b25; }

.btn-secondary { background: var(--ink); color: var(--white); }
.btn-secondary:hover { background: var(--ink-soft); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }

.btn-ghost-invert { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.35); }
.btn-ghost-invert:hover { border-color: var(--white); }

.btn-small { padding: 10px 18px; font-size: 0.88rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,248,250,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; padding-bottom: 12px;
  gap: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.brand-mark .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(15,184,166,0.25);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.brand-text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink);
}
.brand-text em { font-style: normal; color: var(--signal); }

.main-nav ul {
  list-style: none; display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0;
}
.main-nav a {
  display: block;
  color: var(--slate);
  font-weight: 500; font-size: 0.92rem;
  padding: 8px 11px; border-radius: 8px;
  /* Without this, a two-word label like "All Services" breaks across two
     lines as soon as the bar gets tight, which is what made the header
     look ragged rather than simply crowded. */
  white-space: nowrap;
}
.main-nav a:hover { background: var(--paper-dim); text-decoration: none; }
.main-nav a.is-active { color: var(--ink); background: var(--signal-dim); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 34px; background: none; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--ink); margin: 0 auto; }

.header-cta { flex: none; }
.header-right-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.nav-mobile-only { display: none; }
.account-link {
  font-size: 0.9rem; font-weight: 600; color: var(--slate);
  white-space: nowrap;
}
.account-link:hover { color: var(--signal); }

/* ==========================================================================
   Hero — diagnostic console
   ========================================================================== */
.hero {
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 76px 0 90px;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 340px at 85% -10%, rgba(43,108,255,0.35), transparent 60%),
    radial-gradient(500px 300px at 5% 110%, rgba(15,184,166,0.22), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { color: var(--white); margin-bottom: 0.4em; }
.hero h1 .accent { color: var(--teal); }
.hero-lead {
  font-size: 1.15rem;
  color: #C9D3E4;
  max-width: 46ch;
  margin-bottom: 1.6em;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 1.8em; }
.hero-audiences {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.82rem; color: #97A5C0;
}
.hero-audiences strong { color: var(--white); font-weight: 600; }

/* Console card (signature element) */
.console {
  background: var(--ink-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  overflow: hidden;
}
.console-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono); font-size: 0.75rem; color: #8CA0C4;
}
.console-bar .lights { display: flex; gap: 6px; }
.console-bar .lights span {
  width: 8px; height: 8px; border-radius: 50%; background: #46577A;
}
.console-body { padding: 20px; }
.console-line {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.09);
  font-family: var(--font-mono); font-size: 0.86rem;
  color: #C9D3E4;
}
.console-line:last-child { border-bottom: none; }
.console-line .problem { flex: 1; color: #E6ECF7; }
.console-line .state {
  font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; flex: none;
}
.state-fixed { background: rgba(15,184,166,0.16); color: #4FE0CE; }
.state-diagnosing { background: rgba(242,169,59,0.16); color: var(--amber); }
.console-footer {
  border-top: 1px solid var(--line-dark);
  padding: 14px 20px;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: #7C8CB0;
  display: flex; justify-content: space-between;
}

/* ==========================================================================
   Section basics
   ========================================================================== */
section { padding: 84px 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

.section-alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-dark { background: var(--ink); color: #C9D3E4; }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: #AEBBD4; }

/* ==========================================================================
   Audience split (Individuals vs Business)
   ========================================================================== */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.audience-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.audience-card .eyebrow { color: var(--signal); }
.audience-card.for-business .eyebrow { color: var(--teal); }
.audience-card ul { margin: 18px 0 24px; padding-left: 0; list-style: none; }
.audience-card li {
  padding: 7px 0 7px 22px; position: relative; font-size: 0.96rem; color: var(--slate);
  border-bottom: 1px solid var(--paper-dim);
}
.audience-card li:last-child { border-bottom: none; }
.audience-card li::before {
  content: '›'; position: absolute; left: 0; color: var(--signal); font-weight: 700;
}
.audience-card.for-business li::before { color: var(--teal); }

/* ==========================================================================
   Featured IT Support block (homepage)
   ========================================================================== */
.featured-support {
  background: linear-gradient(180deg, var(--white), var(--paper-dim));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}
.featured-support .code-badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
  background: var(--signal-dim);
  border-radius: 100px;
  padding: 5px 12px;
  display: inline-block;
  margin-bottom: 14px;
}
.featured-support .lede { font-size: 1.08rem; color: var(--slate); max-width: 52ch; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; }
.tag-list span {
  font-family: var(--font-mono); font-size: 0.78rem;
  background: var(--white); border: 1px solid var(--line);
  color: var(--slate); padding: 6px 11px; border-radius: 7px;
}
.featured-support-list { list-style: none; margin: 0; padding: 0; }
.featured-support-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 0.94rem; color: var(--slate);
}
.featured-support-list li:last-child { border: none; }
.featured-support-list li::before {
  content: '✓'; color: var(--teal); font-weight: 700; flex: none; margin-top: 1px;
}

/* ==========================================================================
   Process strip
   ========================================================================== */
.process-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  counter-reset: step;
  position: relative;
}
.process-step {
  padding: 0 18px 0 0;
  position: relative;
}
.process-step .num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--teal);
  display: block;
  margin-bottom: 10px;
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.process-step p { font-size: 0.9rem; color: var(--slate-soft); margin-bottom: 0; }
.process-step:not(:last-child)::after {
  content: '';
  position: absolute; top: 6px; right: 0;
  width: 100%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px);
}
.section-dark .process-step .num { color: #7FE3D6; }
.section-dark .process-step p { color: #97A5C0; }
.section-dark .process-step::after { background: repeating-linear-gradient(90deg, var(--line-dark) 0 6px, transparent 6px 11px); }

/* ==========================================================================
   Category grid (7 services)
   ========================================================================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.category-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: border-color .15s ease, transform .15s ease;
  display: flex; flex-direction: column;
}
.category-card:hover { border-color: var(--signal); transform: translateY(-2px); }
.category-card .code {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--signal-dim);
  background: var(--ink); color: var(--teal);
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; flex: none;
}
.category-card.featured .code { background: var(--amber); color: var(--ink); }
.category-card h3 { margin-bottom: 8px; }
.category-card p { font-size: 0.92rem; color: var(--slate-soft); margin-bottom: 14px; flex: 1; }
.category-card .badge {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 3px 9px; border-radius: 100px;
  background: var(--paper-dim); color: var(--slate-soft); margin-bottom: 14px;
}
.category-card.audience-individuals .badge { background: var(--signal-dim); color: var(--signal); }
.category-card.audience-business .badge { background: rgba(15,184,166,0.12); color: #0A8F81; }
.category-card a.card-link { font-weight: 600; font-size: 0.9rem; }

/* ==========================================================================
   Services page — detailed category sections
   ========================================================================== */
.service-detail {
  border-top: 1px solid var(--line);
  padding: 64px 0;
  scroll-margin-top: 90px;
}
.service-detail:nth-child(even) { background: var(--white); }
.service-detail-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.service-detail .code-badge {
  font-family: var(--font-mono); font-size: 2.2rem; color: var(--line);
  font-weight: 600; display: block; margin-bottom: 6px;
}
.service-detail-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.service-detail-list li {
  padding: 10px 0; border-bottom: 1px solid var(--paper-dim); font-size: 0.95rem;
  display: flex; gap: 9px; align-items: flex-start;
}
.service-detail-list li::before { content: '→'; color: var(--signal); flex: none; }

/* ==========================================================================
   IT Support page specifics
   ========================================================================== */
.support-hero {
  background: var(--ink); color: var(--white); padding: 64px 0 56px;
}
/* The global `h1 { color: var(--ink) }` rule beats inheritance from
   .support-hero, so without this the heading renders dark navy on a dark
   navy band — present, taking up space, and completely unreadable. */
.support-hero h1,
.support-hero h2,
.support-hero h3 { color: var(--white); }
.support-hero .lede { font-size: 1.15rem; color: #C9D3E4; max-width: 60ch; }
/* Shorter band for signed-in pages, where the hero is a label rather than
   a pitch and a full-height one just pushes the real content off screen. */
.support-hero.is-compact { padding: 40px 0 34px; }
.support-hero.is-compact h1 { font-size: clamp(1.8rem, 2.6vw + 1rem, 2.6rem); margin-bottom: 0.25em; }
.reassurance-banner {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 34px; box-shadow: var(--shadow-card);
  margin-top: -40px; position: relative; z-index: 5;
  display: flex; gap: 20px; align-items: flex-start;
}
.reassurance-banner .icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--signal-dim);
  color: var(--signal); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; flex: none;
}
.reassurance-banner p { margin: 0; color: var(--slate); }
.reassurance-banner strong { color: var(--ink); }

.support-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.support-item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start;
}
.support-item .glyph {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--teal);
  background: rgba(15,184,166,0.1); border-radius: 6px; padding: 5px 7px; flex: none;
}
.support-item h3 { font-size: 1rem; margin-bottom: 4px; }
.support-item p { font-size: 0.88rem; color: var(--slate-soft); margin: 0; }

.symptom-bar {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: #DDE4F0;
  background: var(--ink-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  line-height: 1.9;
}
.symptom-bar .sep { color: #5A6C90; margin: 0 8px; }

/* ==========================================================================
   Contact / "Describe Your Problem" page
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.contact-form {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px; box-shadow: var(--shadow-card);
}
.form-row { margin-bottom: 20px; }
.form-row label {
  display: block; font-weight: 600; font-size: 0.9rem; color: var(--ink); margin-bottom: 7px;
}
.form-row .hint { font-size: 0.8rem; color: var(--slate-soft); font-weight: 400; }
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.96rem;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none; border-color: var(--signal); background: var(--white);
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Honeypot: positioned off-screen rather than display:none, since some
   bots skip fields hidden that way but still fill fields moved off-canvas. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 26px;
  font-size: 0.95rem;
  display: flex; gap: 12px; align-items: flex-start;
}
.alert-success { background: rgba(15,184,166,0.1); border: 1px solid rgba(15,184,166,0.35); color: #0A6E63; }
.alert-error { background: rgba(217,90,90,0.1); border: 1px solid rgba(217,90,90,0.35); color: #9E3B3B; }
.alert-info { background: var(--signal-dim); border: 1px solid rgba(43,108,255,0.3); color: #1B4FCC; }

.side-note {
  background: var(--ink); color: #C9D3E4; border-radius: var(--radius-lg);
  padding: 32px;
}
.side-note h3 { color: var(--white); }
.side-note ul { padding-left: 20px; margin: 16px 0; }
.side-note li { margin-bottom: 8px; font-size: 0.92rem; }

/* ==========================================================================
   Footer / final CTA
   ========================================================================== */
.final-cta { background: var(--signal); color: var(--white); padding: 60px 0; }
.final-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.final-cta h2 { color: var(--white); margin-bottom: 8px; }
.final-cta p { color: rgba(255,255,255,0.85); margin: 0; max-width: 48ch; }
.final-cta .eyebrow { color: rgba(255,255,255,0.8); }
.final-cta .eyebrow::before { background: var(--white); box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }
.final-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.final-cta .btn-primary { background: var(--ink); color: var(--white); }
.final-cta .btn-primary:hover { background: #0B1730; }

.site-footer { background: var(--ink); color: #97A5C0; padding: 56px 0 0; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand .brand-text { color: var(--white); }
.footer-brand p { font-size: 0.88rem; margin-top: 12px; max-width: 32ch; }
.footer-col h3 {
  color: var(--white); font-family: var(--font-mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #97A5C0; font-size: 0.9rem; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; font-size: 0.82rem;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Only hidden when the script that reveals them is running — without it
   (script blocked, slow connection) the content just shows. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats-band {
  background: var(--ink);
  padding: 56px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item .stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.8rem);
  color: var(--white);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.stat-item .stat-value .teal { color: #4FE0CE; }
.stat-item .stat-label {
  font-size: 0.88rem;
  color: #97A5C0;
}

/* ==========================================================================
   Testimonial carousel
   ========================================================================== */
.testimonial-carousel {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.testimonial-track {
  position: relative;
  min-height: 200px;
}
.testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.testimonial-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
.testimonial-slide blockquote {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 20px;
  font-weight: 500;
}
.testimonial-slide .author { font-family: var(--font-mono); font-size: 0.85rem; color: var(--slate-soft); }
.testimonial-slide .author strong { color: var(--ink); font-family: var(--font-body); }
.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}
.testimonial-controls button {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, background .15s ease;
}
.testimonial-controls button:hover { border-color: var(--signal); }
.testimonial-dots { display: flex; gap: 8px; }
.testimonial-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: var(--line); padding: 0; cursor: pointer;
}
.testimonial-dots button.is-active { background: var(--signal); width: 22px; border-radius: 4px; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-question .plus {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--signal-dim);
  color: var(--signal);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: transform .25s ease;
}
.faq-item.is-open .faq-question .plus { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-answer p {
  padding: 0 4px 22px;
  color: var(--slate);
  font-size: 0.96rem;
  max-width: 65ch;
}

/* ==========================================================================
   Self-diagnosis tool
   ========================================================================== */
.diagnosis-tool {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
}
.diagnosis-step { display: none; }
.diagnosis-step.is-active { display: block; }

.diagnosis-symptom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.symptom-btn {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.symptom-btn:hover { border-color: var(--signal); background: var(--signal-dim); }
.symptom-btn:active { transform: scale(0.98); }
.symptom-btn .glyph {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--teal);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.diagnosis-back {
  background: none; border: none; color: var(--signal); font-weight: 600;
  cursor: pointer; padding: 0; margin-bottom: 18px; font-size: 0.9rem;
  display: inline-flex; align-items: center; gap: 6px;
}

.diagnosis-choice-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.diagnosis-choice {
  text-align: left;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.diagnosis-choice:hover { border-color: var(--signal); background: var(--signal-dim); }

.diagnosis-result {
  background: var(--paper);
  border: 1.5px solid var(--teal);
  border-radius: var(--radius-md);
  padding: 26px;
  margin-top: 20px;
}
.diagnosis-result .result-label {
  font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--teal); margin-bottom: 10px; display: block;
}
.diagnosis-result p { color: var(--slate); margin-bottom: 20px; }
.diagnosis-result p:last-of-type { margin-bottom: 0; }

/* ==========================================================================
   Floating quick-help widget
   ========================================================================== */
.quick-help {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 150;
}
.quick-help-toggle {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  border: none;
  box-shadow: 0 10px 30px rgba(18,33,58,0.25);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  transition: transform .15s ease;
}
.quick-help-toggle:hover { transform: scale(1.06); }
.quick-help-panel {
  position: absolute;
  bottom: 72px; right: 0;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(18,33,58,0.2);
  padding: 20px;
  display: none;
}
.quick-help.is-open .quick-help-panel { display: block; }
.quick-help.is-open .quick-help-toggle { transform: rotate(45deg); }
.quick-help-panel h4 { font-size: 0.95rem; margin-bottom: 4px; }
.quick-help-panel p { font-size: 0.85rem; color: var(--slate-soft); margin-bottom: 16px; }
.quick-help-panel .btn { width: 100%; margin-bottom: 8px; }
.quick-help-panel .btn:last-child { margin-bottom: 0; }

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-filter-row {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px;
}
.blog-filter-pill {
  font-family: var(--font-mono); font-size: 0.8rem;
  padding: 8px 16px; border-radius: 100px;
  border: 1.5px solid var(--line); color: var(--slate);
  text-decoration: none !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.blog-filter-pill:hover { border-color: var(--signal); color: var(--ink); }
.blog-filter-pill.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
}
.blog-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover { border-color: var(--signal); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.blog-card-image {
  aspect-ratio: 16 / 9;
  background: var(--paper-dim);
  overflow: hidden;
}
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card-category {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--teal); margin-bottom: 10px;
}
.blog-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.blog-card h3 a { color: var(--ink); }
.blog-card h3 a:hover { color: var(--signal); text-decoration: none; }
.blog-card p { font-size: 0.92rem; color: var(--slate-soft); flex: 1; margin-bottom: 14px; }
.blog-card-meta {
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--slate-soft);
  display: flex; gap: 8px; margin-bottom: 14px;
}
.blog-card-link { font-weight: 600; font-size: 0.9rem; }

.blog-tags-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.blog-tag-pill {
  font-family: var(--font-mono); font-size: 0.7rem;
  background: var(--paper-dim); color: var(--slate-soft);
  padding: 3px 10px; border-radius: 100px;
}
.blog-card .blog-tags-row { margin-bottom: 10px; }

/* ---------- Featured post spotlight ---------- */
.blog-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 36px;
  box-shadow: var(--shadow-card);
}
.blog-featured-image { background: var(--paper-dim); min-height: 260px; }
.blog-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-featured-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink); background: var(--amber);
  padding: 4px 12px; border-radius: 100px; margin-bottom: 16px;
}
.blog-featured-body h2 { font-size: 1.7rem; margin-bottom: 12px; }
.blog-featured-body h2 a { color: var(--ink); }
.blog-featured-body h2 a:hover { color: var(--signal); text-decoration: none; }
.blog-featured-body p { color: var(--slate); margin-bottom: 20px; }

/* ---------- Single post ---------- */
.blog-post-hero-image {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--paper-dim);
}
.blog-post-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-post-byline {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
}
.blog-post-byline .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--teal); color: var(--ink);
  font-family: var(--font-display); font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.blog-post-byline .who { font-size: 0.9rem; color: var(--white); font-weight: 600; }
.blog-post-byline .meta { font-family: var(--font-mono); font-size: 0.78rem; color: #97A5C0; }

.blog-post-meta {
  font-family: var(--font-mono); font-size: 0.85rem; color: #97A5C0;
}
.blog-post-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 48px;
  align-items: start;
}
.blog-post-content { max-width: 680px; }
.blog-post-content h3 { font-size: 1.4rem; margin-top: 1.6em; scroll-margin-top: 90px; }
.blog-post-content h4 { font-size: 1.15rem; margin-top: 1.4em; }
.blog-post-content p { color: var(--slate); font-size: 1.02rem; margin-bottom: 1.2em; }
.blog-post-content ul { padding-left: 22px; margin-bottom: 1.2em; }
.blog-post-content li { color: var(--slate); font-size: 1.02rem; margin-bottom: 0.5em; }
.blog-post-content a { text-decoration: underline; }
.blog-post-content strong { color: var(--ink); }

.blog-toc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom: 24px;
  position: sticky;
  top: 90px;
}
.blog-toc-title {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--slate-soft); margin-bottom: 12px;
}
.blog-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.blog-toc li { counter-increment: toc; margin-bottom: 10px; }
.blog-toc li a {
  font-size: 0.88rem; color: var(--slate); line-height: 1.4;
  display: flex; gap: 8px;
}
.blog-toc li a::before {
  content: counter(toc);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--teal); flex: none;
}
.blog-toc li a:hover { color: var(--signal); text-decoration: none; }

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-post-layout { grid-template-columns: 1fr; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-image { min-height: 200px; }
  .blog-toc { position: static; }
}
@media (max-width: 680px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-support { grid-template-columns: 1fr; padding: 32px; }
  .process-strip { grid-template-columns: repeat(3, 1fr); gap: 28px 18px; }
  .process-step:not(:last-child)::after { display: none; }
  .service-detail-inner { grid-template-columns: 1fr; }
  .service-detail-list { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .support-category-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ---------- Collapsed navigation (tablet and phone) ---------- */
@media (max-width: 1040px) {
  .main-nav ul {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 2px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(18,33,58,0.10);
    padding: 12px 24px 20px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .main-nav.open ul { display: flex; }
  .main-nav a {
    font-size: 1rem;
    padding: 12px 14px;   /* a comfortable tap target, not a pointer target */
  }
  .nav-toggle { display: flex; }
  /* Hiding only the two children left .header-right-actions as an empty
     flex item, and space-between still gave it a share of the row — which
     is what parked the hamburger short of the corner. Hide the container
     itself and let the nav take the right-hand end. */
  .header-right-actions { display: none; }
  .header-cta { display: none; }
  .account-link { display: none; }
  .main-nav { margin-left: auto; }

  .nav-mobile-only { display: block; }
  .nav-mobile-divider { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
  .nav-mobile-cta { width: 100%; justify-content: center; margin-top: 6px; }
  .main-nav a.nav-mobile-cta:hover { background: #e39b25; }
}

@media (max-width: 680px) {
  .process-strip { grid-template-columns: 1fr 1fr; }
  .category-grid { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .final-cta-inner { flex-direction: column; align-items: flex-start; }
  .footer-inner { grid-template-columns: 1fr; }
  .reassurance-banner { flex-direction: column; margin-top: -24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .diagnosis-symptom-grid { grid-template-columns: 1fr 1fr; }
  .diagnosis-tool { padding: 26px; }
  .testimonial-slide blockquote { font-size: 1.1rem; }
  .quick-help { right: 14px; bottom: 14px; }
  .quick-help-panel { width: calc(100vw - 48px); right: -6px; }
}

/* ==========================================================================
   Pricing / subscription plans
   ========================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
  margin-top: 36px;
  align-items: stretch;
}

.pricing-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pricing-card::before {
  /* Thin accent rail along the top edge — gives every card a defined
     starting line so a row of them reads as a set rather than as three
     loose blocks of text. */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--line);
  transition: background .18s ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--slate-soft);
  box-shadow: 0 4px 10px rgba(18,33,58,0.06), 0 18px 40px rgba(18,33,58,0.10);
}
.pricing-card:hover::before { background: var(--teal); }

.pricing-card.is-highlighted {
  border-color: var(--signal);
  box-shadow: 0 4px 12px rgba(43,108,255,0.10), 0 20px 44px rgba(43,108,255,0.16);
}
.pricing-card.is-highlighted::before { background: var(--signal); height: 4px; }

/* Badge sits inside the card's own padding rather than hanging off the top
   edge — the old overhang clipped on small screens and collided with the
   heading. */
.pricing-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--signal-dim);
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.pricing-card h3 {
  font-size: 1.15rem;
  margin: 0 0 4px;
  color: var(--ink);
}
.pricing-audience {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-soft);
  margin: 0 0 16px;
}

.pricing-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--ink);
  line-height: 1;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.pricing-price span {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate-soft);
}

.pricing-desc {
  font-size: 0.92rem;
  color: var(--slate-soft);
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--paper-dim);
  min-height: 1px;
}

.pricing-features { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.pricing-features li {
  padding: 7px 0 7px 26px;
  position: relative;
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.45;
}
.pricing-features li::before {
  content: '';
  position: absolute; left: 0; top: 11px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(15,184,166,0.14);
}
.pricing-features li::after {
  content: '';
  position: absolute; left: 5px; top: 15px;
  width: 4px; height: 7px;
  border: solid var(--teal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pricing-card .btn { width: 100%; justify-content: center; }

/* ---------- Plans shown on a dark section (homepage teaser) ----------
   The cards stay light so they read as objects sitting on the dark band,
   but the global `.section-dark h3 { color: white }` rule would otherwise
   make the plan names invisible against them. */
.section-dark .pricing-card,
.section-dark .pricing-card h3 { color: var(--ink); }
.section-dark .pricing-card p { color: var(--slate-soft); }
.section-dark .pricing-card .pricing-price { color: var(--ink); }
.section-dark .pricing-card .pricing-features li { color: var(--slate); }
.section-dark .pricing-card .btn-outline { color: var(--ink); border-color: var(--line); }
.section-dark .pricing-card .btn-outline:hover { border-color: var(--ink); background: var(--paper); }

@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
  .pricing-card { padding: 26px 22px 22px; }
  .pricing-price { font-size: 2.2rem; }
}

/* ---------- Checkout: payment method choice ---------- */
.payment-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}
.payment-method-card {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: border-color .15s ease, transform .15s ease;
}
.payment-method-card:hover { border-color: var(--signal); transform: translateY(-2px); }
.payment-method-card h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--ink); }
.payment-method-card p { font-size: 0.9rem; color: var(--slate-soft); margin-bottom: 16px; }
.payment-method-card .card-link { font-weight: 600; font-size: 0.9rem; color: var(--signal); }

/* ---------- Bank transfer details ---------- */
.bank-details-list { margin: 18px 0; padding: 0; }
.bank-details-list > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--paper-dim);
}
.bank-details-list dt { font-size: 0.85rem; color: var(--slate-soft); margin: 0; }
.bank-details-list dd { font-weight: 600; color: var(--ink); margin: 0; font-family: var(--font-mono); font-size: 0.92rem; text-align: right; }

@media (max-width: 640px) {
  .payment-method-grid { grid-template-columns: 1fr; }
  .bank-details-list > div { flex-direction: column; gap: 2px; }
  .bank-details-list dd { text-align: left; }
}

/* ==========================================================================
   Account dashboard cards
   (Same visual language as the admin panel's cards, restyled here for the
   public site's light theme so the customer dashboard doesn't need to load
   the internal admin stylesheet.)
   ========================================================================== */
.admin-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px 26px;
}
.admin-card.status-handled { border-left-color: var(--teal); }
.admin-card.status-new { border-left-color: var(--signal); }
.admin-card.status-spam { border-left-color: var(--slate-soft); }

.admin-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.admin-status-pill {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 4px 11px; border-radius: 100px;
}
.admin-status-pill.status-handled { background: rgba(15,184,166,0.12); color: #0A8F81; }
.admin-status-pill.status-new { background: var(--signal-dim); color: var(--signal); }
.admin-status-pill.status-spam { background: var(--paper-dim); color: var(--slate-soft); }

.admin-card-name { font-size: 1.2rem; margin-bottom: 4px; }
.admin-card-meta { font-size: 0.92rem; color: var(--slate-soft); margin-bottom: 6px; }
.admin-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.admin-settings-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 26px;
}
.admin-settings-card h2 { font-size: 1.1rem; margin-bottom: 10px; }
.admin-panel-note { font-size: 0.88rem; color: var(--slate-soft); margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Manual payment flow — bank transfer & pay to email
   ========================================================================== */

/* ---------- Numbered steps ---------- */
.pay-step { display: flex; gap: 16px; align-items: flex-start; margin: 36px 0 18px; }
.pay-step:first-of-type { margin-top: 8px; }
.pay-step-num {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink); color: var(--white);
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.pay-step h2 { font-size: 1.2rem; margin: 0 0 4px; }
.pay-step p { font-size: 0.9rem; color: var(--slate-soft); margin: 0; }

/* ---------- Choosing which account to pay ---------- */
.pay-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.pay-choice {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pay-choice:hover { border-color: var(--slate-soft); text-decoration: none; }
.pay-choice.is-active {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-dim);
}
.pay-choice-bank { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.pay-choice-detail { font-family: var(--font-mono); font-size: 0.8rem; color: var(--slate-soft); word-break: break-all; }
.pay-choice-label { font-size: 0.8rem; color: var(--slate-soft); }

/* ---------- The payment details themselves ---------- */
.pay-details-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-card);
}
.pay-amount-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem; color: var(--slate-soft);
  margin: 0 0 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--paper-dim);
}
.pay-amount-line strong { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); }

.pay-details { margin: 0; padding: 0; }
.pay-details > div {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 11px 0;
  border-bottom: 1px solid var(--paper-dim);
}
.pay-details > div:last-child { border-bottom: none; }
.pay-details dt { margin: 0; font-size: 0.85rem; color: var(--slate-soft); flex: none; }
.pay-details dd { margin: 0; display: flex; align-items: center; gap: 10px; text-align: right; }
.pay-value {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.92rem;
  color: var(--ink); word-break: break-all;
}
/* The reference is the one field that actually has to be right, so it gets
   visual weight the account number doesn't. */
.pay-value.is-key {
  background: var(--signal-dim); color: var(--signal);
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 1rem; letter-spacing: 0.04em;
}
.pay-details-divider { border-top: 2px solid var(--paper-dim); margin-top: 6px; padding-top: 15px !important; }

.pay-copy {
  flex: none;
  border: 1px solid var(--line); background: var(--white);
  color: var(--slate); cursor: pointer;
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 600;
  padding: 5px 10px; border-radius: var(--radius-sm);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pay-copy:hover { border-color: var(--ink); color: var(--ink); }
.pay-copy.is-copied { background: rgba(15,184,166,0.12); border-color: var(--teal); color: #0A8577; }

.pay-fineprint { font-size: 0.84rem; color: var(--slate-soft); margin: 16px 0 0; line-height: 1.5; }
.pay-declare-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

@media (max-width: 620px) {
  .pay-details > div { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pay-details dd { text-align: left; }
  .pay-amount-line { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pay-step { gap: 12px; }
}

/* ---------- Small form helpers used by the admin account forms ---------- */
.field-error { font-size: 0.8rem; color: #9E3B3B; margin: 6px 0 0; font-weight: 500; }
.optional { color: var(--slate-soft); font-weight: 400; font-size: 0.85em; }

/* ==========================================================================
   Customer account dashboard
   ========================================================================== */
.account-hero-inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.account-hero-inner .lede { margin-bottom: 0; }

.account-status {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  padding: 7px 15px 7px 12px;
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid transparent;
}
.account-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.account-status.is-active  { background: rgba(15,184,166,0.16);  color: #6FE0D2; border-color: rgba(15,184,166,0.35); }
.account-status.is-warning { background: rgba(242,169,59,0.16);  color: #F5BE68; border-color: rgba(242,169,59,0.38); }
.account-status.is-muted   { background: rgba(255,255,255,0.08); color: #AEBBD4; border-color: rgba(255,255,255,0.16); }

.account-section { padding: 44px 0 72px; }

.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.account-main, .account-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.account-card,
.account-plan-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-card);
}
.account-plan-card { position: relative; overflow: hidden; }
.account-plan-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--line);
}
.account-plan-card.is-active::before { background: var(--teal); }

.account-card h2, .account-plan-card h2 { font-size: 1.35rem; margin: 0 0 6px; }
.account-card-eyebrow {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--slate-soft); margin: 0 0 6px;
}

.account-plan-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.account-plan-price {
  font-family: var(--font-display); font-weight: 700; font-size: 1.9rem;
  color: var(--ink); margin: 0; line-height: 1; white-space: nowrap;
}
.account-plan-price span { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--slate-soft); }
.account-plan-desc { font-size: 0.95rem; color: var(--slate-soft); margin: 8px 0 0; }

.account-meta-row {
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  margin-top: 20px; padding: 16px 18px;
  background: var(--paper); border-radius: var(--radius-md);
}
.account-meta-row > div { display: flex; flex-direction: column; gap: 2px; }
.account-meta-label { font-size: 0.78rem; color: var(--slate-soft); }
.account-meta-value { font-weight: 600; color: var(--ink); font-size: 0.95rem; }

.account-feature-list { list-style: none; margin: 0; padding: 0; }
.account-feature-list li {
  position: relative; padding: 6px 0 6px 26px;
  font-size: 0.92rem; color: var(--slate);
}
.account-feature-list li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 15px; height: 15px; border-radius: 50%; background: rgba(15,184,166,0.14);
}
.account-feature-list li::after {
  content: ''; position: absolute; left: 5px; top: 14px;
  width: 4px; height: 7px; border: solid var(--teal); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.account-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.account-empty-plan { border-style: dashed; box-shadow: none; }

/* Unpaid orders get a colour the rest of the page doesn't use, so the one
   thing needing action can't be mistaken for another information card. */
.account-callout {
  background: linear-gradient(180deg, #FFF8EC 0%, var(--white) 100%);
  border: 1.5px solid rgba(242,169,59,0.5);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.account-callout h2 { font-size: 1.15rem; margin: 0 0 6px; }
.account-callout p { font-size: 0.93rem; color: var(--slate); margin: 0 0 12px; }
.account-callout-ref { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account-callout-ref span { font-size: 0.8rem; color: var(--slate-soft); }
.account-callout-ref code {
  font-family: var(--font-mono); font-weight: 600; font-size: 1rem;
  background: var(--white); border: 1px solid rgba(242,169,59,0.5);
  color: var(--ink); padding: 5px 12px; border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
}

.account-detail-list { margin: 0; padding: 0; }
.account-detail-list > div { padding: 10px 0; border-bottom: 1px solid var(--paper-dim); }
.account-detail-list > div:last-child { border-bottom: none; padding-bottom: 0; }
.account-detail-list dt { margin: 0 0 2px; font-size: 0.78rem; color: var(--slate-soft); }
.account-detail-list dd { margin: 0; font-weight: 600; color: var(--ink); font-size: 0.92rem; word-break: break-word; }

.account-link-list { list-style: none; margin: 0; padding: 0; }
.account-link-list li { border-bottom: 1px solid var(--paper-dim); }
.account-link-list li:last-child { border-bottom: none; }
.account-link-list a {
  display: block; padding: 11px 0;
  font-size: 0.92rem; font-weight: 500; color: var(--slate);
}
.account-link-list a:hover { color: var(--signal); text-decoration: none; }
.account-logout { margin-top: 18px; }
.account-logout .btn { width: 100%; justify-content: center; }

/* ---------- Tablet ---------- */
@media (max-width: 940px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-side {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    align-items: start;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .account-section { padding: 28px 0 56px; }
  .account-side { grid-template-columns: 1fr; }
  .account-card, .account-plan-card { padding: 22px 20px; }
  .account-callout { padding: 20px; }
  .account-hero-inner { flex-direction: column; gap: 14px; }
  .account-plan-head { flex-direction: column; gap: 6px; }
  .account-plan-price { font-size: 1.7rem; }
  .account-meta-row { flex-direction: column; gap: 12px; }
  /* Full-width buttons stacked, rather than two half-buttons that are
     awkward to hit with a thumb. */
  .account-card-actions { flex-direction: column; align-items: stretch; }
  .account-card-actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Auth forms — password strength, reset flow
   ========================================================================== */
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.label-link { font-size: 0.82rem; font-weight: 500; color: var(--signal); }

.pw-meter { margin: 10px 0 0; }
.pw-meter-bar {
  height: 5px; border-radius: 100px; background: var(--paper-dim); overflow: hidden;
}
.pw-meter-bar span {
  display: block; height: 100%; width: 0;
  border-radius: 100px; background: #D95A5A;
  transition: width .22s ease, background .22s ease;
}
.pw-meter-label { margin: 6px 0 0; font-size: 0.8rem; font-weight: 500; color: var(--slate-soft); }
.pw-meter[data-level="1"] .pw-meter-bar span { width: 25%;  background: #D95A5A; }
.pw-meter[data-level="2"] .pw-meter-bar span { width: 50%;  background: #E0922F; }
.pw-meter[data-level="3"] .pw-meter-bar span { width: 75%;  background: #3FA3C9; }
.pw-meter[data-level="4"] .pw-meter-bar span { width: 100%; background: var(--teal); }

.pw-suggest {
  margin: 10px 0 0; font-size: 0.85rem; color: var(--slate-soft);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pw-suggest code {
  font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600;
  background: var(--paper); border: 1px solid var(--line);
  padding: 4px 9px; border-radius: var(--radius-sm); color: var(--ink);
}
.pw-suggest-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  color: var(--signal); text-decoration: underline;
}
.auth-note { font-size: 0.88rem; color: var(--slate-soft); line-height: 1.6; margin-top: 16px; }

/* ---------- Cancelling an unpaid order ---------- */
.pay-cancel-box {
  margin-top: 34px; padding: 22px 24px;
  border: 1px dashed var(--line); border-radius: var(--radius-md);
  background: var(--paper);
}
.pay-cancel-box h3 { font-size: 1rem; margin: 0 0 6px; }
.pay-cancel-box p { font-size: 0.88rem; color: var(--slate-soft); margin: 0 0 14px; line-height: 1.6; }
.pay-cancel-btn { color: #9E3B3B; border-color: rgba(217,90,90,0.4); }
.pay-cancel-btn:hover { border-color: #9E3B3B; background: rgba(217,90,90,0.06); }

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal-section { padding: 44px 0 80px; }
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; align-items: start; }

.legal-body { max-width: 68ch; }
.legal-updated {
  font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--slate-soft);
  margin: 0 0 26px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.legal-body h2 {
  font-size: 1.3rem; margin: 36px 0 12px;
  padding-top: 4px;
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.legal-body p { font-size: 1rem; line-height: 1.75; color: var(--slate); margin: 0 0 16px; }
.legal-body ul { margin: 0 0 18px; padding: 0; list-style: none; }
.legal-body li {
  position: relative; padding: 5px 0 5px 22px;
  font-size: 1rem; line-height: 1.7; color: var(--slate);
}
.legal-body li::before {
  content: ''; position: absolute; left: 2px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
}
.legal-body strong { color: var(--ink); font-weight: 600; }

.legal-side {
  position: sticky; top: 90px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px;
}
.legal-side .account-link-list a.is-current { color: var(--signal); font-weight: 600; }
.legal-side-note {
  font-size: 0.85rem; color: var(--slate-soft); line-height: 1.6;
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--paper-dim);
}

.footer-legal {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 0; padding: 0;
}
.footer-legal a { font-size: 0.85rem; color: #9FB0CC; }
.footer-legal a:hover { color: var(--white); }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 32px; }
  .legal-side { position: static; order: -1; }
}
@media (max-width: 640px) {
  .legal-section { padding: 28px 0 56px; }
  .legal-body h2 { font-size: 1.15rem; margin-top: 28px; }
  .legal-body p, .legal-body li { font-size: 0.95rem; }
}
.account-callout-alt { font-size: 0.85rem; color: var(--slate-soft); margin: 14px 0 0; }
/* Verification prompt reuses the callout shell but in the blue used for
   information, so it never competes with an amber "money owed" notice. */
.account-callout.is-verify {
  background: linear-gradient(180deg, #EEF3FF 0%, var(--white) 100%);
  border-color: rgba(43,108,255,0.4);
}

/* ==========================================================================
   Social sign-in buttons
   ========================================================================== */
.social-auth { margin-bottom: 26px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-bottom: 10px;
  padding: 12px 18px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.social-btn:hover {
  text-decoration: none;
  border-color: var(--slate-soft);
  box-shadow: 0 2px 8px rgba(18,33,58,0.08);
}
.social-btn svg { flex: none; }
.social-facebook:hover { border-color: #1877F2; }

.social-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 0;
  font-size: 0.82rem; color: var(--slate-soft);
}
.social-divider::before,
.social-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.account-side-note {
  font-size: 0.84rem; color: var(--slate-soft); line-height: 1.6;
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--paper-dim);
}

/* ==========================================================================
   Client logo marquee
   ========================================================================== */
.clients-section {
  padding: 72px 0 68px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.clients-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.clients-head h2 { font-size: clamp(1.5rem, 2.2vw + 0.9rem, 2.1rem); margin: 0 0 12px; }
.clients-note { font-size: 1rem; color: var(--slate-soft); margin: 0; line-height: 1.65; }

/* Fade the logos out at both edges so they drift in and out of view
   instead of being visibly chopped off by the viewport. */
.clients-marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.clients-track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: max-content;
  /* The track holds two identical halves, so translating by exactly -50%
     lands the second half where the first began — the loop point is
     invisible, and no JavaScript is involved. */
  animation: clients-scroll 46s linear infinite;
}
.clients-marquee:hover .clients-track,
.clients-marquee:focus-within .clients-track { animation-play-state: paused; }

@keyframes clients-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.client-tile {
  flex: none;
  width: 196px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 26px 22px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.client-tile img {
  width: auto; max-width: 100%;
  height: 46px; object-fit: contain;
  /* Muted by default so a row of mismatched brand colours reads as one
     calm band; full colour on hover rewards the look. */
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter .25s ease, opacity .25s ease;
}
a.client-tile:hover {
  border-color: var(--slate-soft);
  box-shadow: 0 6px 20px rgba(18,33,58,0.10);
  transform: translateY(-3px);
  text-decoration: none;
}
a.client-tile:hover img { filter: grayscale(0%); opacity: 1; }
a.client-tile:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* Tiles with no logo uploaded yet */
.client-fallback {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 46px; justify-content: center;
}
.client-initials {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  color: var(--slate-soft); line-height: 1;
}
.client-name {
  font-size: 0.82rem; font-weight: 600; color: var(--slate); text-align: center;
}
.client-tile.is-placeholder { border-style: dashed; }

.client-work {
  font-family: var(--font-mono); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--slate-soft); text-align: center; line-height: 1.4;
}

.clients-foot { text-align: center; margin: 40px 0 0; font-size: 0.95rem; }

/* Dark-section variant, if the strip is ever dropped onto a navy band */
.section-dark .clients-section,
.clients-section.on-dark { background: transparent; border-color: rgba(255,255,255,0.10); }
.clients-section.on-dark .client-tile {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.clients-section.on-dark .client-tile img { filter: grayscale(100%) brightness(1.8); }
.clients-section.on-dark .client-name,
.clients-section.on-dark .clients-note { color: #C9D3E4; }

@media (max-width: 720px) {
  .clients-section { padding: 52px 0 48px; }
  .clients-head { margin-bottom: 30px; }
  .clients-track { gap: 12px; animation-duration: 34s; }
  .client-tile { width: 156px; padding: 20px 16px 16px; }
  .client-tile img { height: 38px; }
  .clients-foot { margin-top: 30px; }
}

/* Anyone who has asked their system to reduce motion gets a static,
   wrapped grid instead — the content is identical, it just doesn't move. */
@media (prefers-reduced-motion: reduce) {
  .clients-marquee { -webkit-mask-image: none; mask-image: none; }
  .clients-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
  }
  /* The duplicated half exists only to make the loop seamless. */
  .clients-track > [aria-hidden="true"] { display: none; }
  .client-tile img { filter: none; opacity: 1; }
}

/* Stripe "Back" lands here; the notice sits just under the hero. */
.checkout-cancelled { margin: 28px 0 0; }
.checkout-change-plan { margin: 14px 0 0; font-size: 0.92rem; }
.checkout-change-plan a { color: #7FE3D6; }

/* v14: the plan the customer is already on */
.pricing-card.is-current { border-color: var(--teal, #0FB8A6); box-shadow: 0 0 0 2px rgba(15,184,166,.25); }
.pricing-badge.is-current { background: var(--teal, #0FB8A6); color: #fff; }
.pricing-perk { font-size: .82rem; font-weight: 600; color: #8A5A0B; background: linear-gradient(135deg, #FFF3D1, #FBE6B3); border-radius: 10px; padding: 7px 11px; margin: 0 0 14px; }
.pricing-perk span { color: #C58A1B; }

/* ==========================================================================
   Featured offers — top strip, home page section, pop-up, offer page
   (set up in Admin → Promotions → Featured offers)
   ========================================================================== */
.offer-bar[hidden], .offer-feature[hidden], .offer-pop[hidden], .draw-feature[hidden] { display: none !important; }

.offer-bar {
  position: relative; z-index: 101;
  background: linear-gradient(90deg, #0E1A30 0%, #17346E 100%);
  color: #E6ECF7; font-size: 0.92rem;
}
.offer-bar-inner { display: flex; align-items: center; gap: 14px; min-height: 46px; padding-top: 7px; padding-bottom: 7px; }
.offer-bar-badge {
  flex: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--amber); color: var(--ink); padding: 4px 11px; border-radius: 999px;
}
.offer-bar-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; color: inherit; text-decoration: none !important; }
.offer-bar-text { font-weight: 500; }
.offer-bar-cta { color: #7FE3D6; font-weight: 600; white-space: nowrap; }
.offer-bar-link:hover .offer-bar-cta { text-decoration: underline; }
.offer-bar-close {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: #9FB0CE; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.offer-bar-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
@media (max-width: 680px) {
  .offer-bar-badge { display: none; }
  .offer-bar { font-size: 0.86rem; }
  .offer-bar-inner { gap: 6px; padding-right: 8px; }
}

/* Shared pieces */
.offer-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--amber); color: var(--ink);
  font-family: var(--font-mono); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
}
.offer-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.offer-rule { display: block; width: 120px; height: 3px; border-radius: 2px; background: var(--amber); margin: 26px 0 22px; }
.offer-dark-bg {
  background:
    radial-gradient(110% 80% at 90% 0%, rgba(43,108,255,0.55) 0%, rgba(43,108,255,0) 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(15,184,166,0.32) 0%, rgba(15,184,166,0) 60%),
    #0F1D36;
}
.offer-narrow { max-width: 780px; }
.form-error { color: #9E3B3B !important; }

/* Home page section */
.offer-feature { padding: 44px 0 4px; }
.offer-feature-card {
  position: relative; overflow: hidden;
  display: grid; gap: 32px; align-items: center;
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: 26px; color: #fff;
  background:
    radial-gradient(110% 80% at 90% 0%, rgba(43,108,255,0.55) 0%, rgba(43,108,255,0) 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(15,184,166,0.32) 0%, rgba(15,184,166,0) 60%),
    #0F1D36;
  box-shadow: 0 24px 60px rgba(18,33,58,0.18);
}
.offer-feature-card.has-poster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.offer-feature-headline { font-size: clamp(1.15rem, 0.8vw + 1rem, 1.55rem); color: #C9D3E4; margin: 24px 0 8px; max-width: 26ch; line-height: 1.3; }
.offer-feature-price { font-family: var(--font-display); font-weight: 700; color: #fff; margin: 0; line-height: 0.95; letter-spacing: -0.04em; font-size: clamp(4.2rem, 11vw, 7rem); }
.offer-feature-price s { font-size: 0.28em; font-weight: 500; letter-spacing: 0; color: #8C9BB8; vertical-align: middle; margin-left: 8px; }
.offer-feature .offer-rule { margin: 22px 0 18px; }
.offer-feature-sub { color: #AEBBD4; font-size: 1.05rem; max-width: 46ch; }
.offer-feature-list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.offer-feature-list li {
  position: relative; font-size: 0.86rem; color: #E6ECF7;
  padding: 6px 12px 6px 32px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
}
.offer-feature-list li::before {
  content: ''; position: absolute; left: 9px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.offer-feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.offer-feature-meta { font-family: var(--font-mono); font-size: 0.82rem; color: #97A5C0; }
.offer-feature-meta strong { color: #F7C77A; font-weight: 600; }
.offer-feature-poster { display: block; }
.offer-feature-poster img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 26px 50px rgba(0,0,0,0.38); transform: rotate(2.5deg); transition: transform .3s ease; }
.offer-feature-poster:hover img { transform: rotate(0deg) scale(1.02); }
@media (max-width: 820px) {
  .offer-feature-card.has-poster { grid-template-columns: 1fr; }
  .offer-feature-poster { display: none; }
  .offer-feature { padding-top: 28px; }
}

/* Pop-up */
.offer-pop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.offer-pop-backdrop { position: absolute; inset: 0; background: rgba(8,14,28,0.62); backdrop-filter: blur(3px); }
.offer-pop-dialog {
  position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  background: #0F1D36; color: #fff; border-radius: 22px; outline: none;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: offerPopIn .38s cubic-bezier(.2,.8,.2,1);
}
.offer-pop-img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; background: #0F1D36; }
.offer-pop-body { padding: 22px 24px 20px; }
.offer-pop-title { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.25; color: #fff; margin: 16px 0 6px; }
.offer-pop-title strong { color: var(--amber); }
.offer-pop-sub { color: #AEBBD4; margin: 0 0 10px; font-size: 0.95rem; }
.offer-pop-meta { font-family: var(--font-mono); font-size: 0.8rem; color: #F7C77A; margin: 0 0 16px; }
.offer-pop-cta { width: 100%; }
.offer-pop-later { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 0; background: none; color: #97A5C0; font: inherit; font-size: 0.9rem; cursor: pointer; }
.offer-pop-later:hover { color: #fff; }
.offer-pop-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(8,14,28,0.7); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.offer-pop.has-poster .offer-pop-body { padding-top: 16px; }
@keyframes offerPopIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Offer page */
.offer-hero {
  padding: 64px 0 76px; color: #fff; overflow: hidden;
  background:
    radial-gradient(110% 80% at 90% 0%, rgba(43,108,255,0.55) 0%, rgba(43,108,255,0) 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(15,184,166,0.32) 0%, rgba(15,184,166,0) 60%),
    #0F1D36;
}
.offer-hero-inner { display: grid; gap: 48px; align-items: center; }
.offer-hero-inner.has-poster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.offer-hero-title { margin: 30px 0 0; color: #fff; }
.offer-hero-headline { display: block; font-family: var(--font-body); font-weight: 400; font-size: clamp(1.45rem, 1.3vw + 1.1rem, 2.05rem); line-height: 1.3; color: #C9D3E4; max-width: 22ch; letter-spacing: 0; }
.offer-hero-price { display: block; margin-top: 16px; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(5.6rem, 19vw, 10rem); line-height: 0.92; letter-spacing: -0.045em; }
.offer-hero-was { margin: 10px 0 0; color: #97A5C0; }
.offer-hero-sub { font-size: clamp(1.05rem, 0.5vw + 1rem, 1.25rem); color: #AEBBD4; max-width: 34ch; }
.offer-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 28px; }
.offer-chip { font-family: var(--font-mono); font-size: 0.82rem; color: #C9D3E4; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 8px 14px; }
.offer-chip strong { color: #fff; font-weight: 600; }
.offer-chip.is-amber { border-color: rgba(242,169,59,0.65); color: #F7C77A; background: rgba(242,169,59,0.08); }
.offer-chip.is-amber strong { color: #FFD38A; }
.offer-closed { display: inline-block; margin: 22px 0 0; padding: 14px 18px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-weight: 500; }
.offer-hero-poster img { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,0.4); }
@media (max-width: 880px) {
  .offer-hero-inner.has-poster { grid-template-columns: 1fr; }
  .offer-hero-poster { display: none; }
  .offer-hero { padding: 44px 0 56px; }
}

.offer-included { background: #F3F5F9; }
.offer-included h2, .offer-quote h2 { font-size: clamp(2rem, 2.6vw + 1.1rem, 2.9rem); letter-spacing: -0.02em; }
.offer-checks { list-style: none; padding: 0; margin: 30px 0; display: grid; gap: 18px; }
.offer-checks li { display: flex; align-items: flex-start; gap: 14px; font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem); color: var(--ink); line-height: 1.45; }
.offer-checks li::before {
  content: ''; flex: none; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px no-repeat;
}
.offer-note { margin: 0; padding: 16px 20px; border-radius: 14px; background: #FFF6E5; border: 1.5px solid #F2C46D; color: #7A4F00; font-weight: 600; }

.offer-posters { background: #F3F5F9; padding: 0 0 72px; }
.offer-poster-strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; }
.offer-poster-strip figure { margin: 0; flex: 0 0 min(80%, 340px); scroll-snap-align: start; }
.offer-poster-strip img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-card); }

.offer-why {
  color: #C9D3E4;
  background:
    radial-gradient(110% 80% at 90% 0%, rgba(43,108,255,0.45) 0%, rgba(43,108,255,0) 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(15,184,166,0.25) 0%, rgba(15,184,166,0) 60%),
    #0F1D36;
}
.offer-why h2 { color: #fff; font-size: clamp(2rem, 2.8vw + 1.1rem, 3rem); letter-spacing: -0.02em; }
.offer-why-text { font-size: 1.12rem; color: #AEBBD4; max-width: 46ch; }
.offer-why-box { margin-top: 28px; padding: 24px 26px; border-radius: 16px; border: 1.5px solid rgba(242,169,59,0.75); background: rgba(27,44,74,0.75); }
.offer-why-big { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: #fff; margin: 0 0 14px; }
.offer-spots { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; margin-bottom: 14px; }
.offer-spots span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--amber), #FFD38A); }
.offer-why-small { margin: 0; color: #97A5C0; font-size: 0.95rem; }

.offer-quote { background: var(--white); }
.offer-quote-lede { font-size: 1.12rem; color: var(--slate-soft); }
.offer-form { margin-top: 26px; padding: clamp(20px, 3vw, 30px); border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.offer-submit { width: 100%; padding: 17px 26px; font-size: 1.04rem; letter-spacing: 0.02em; text-transform: uppercase; }
.offer-small { margin: 14px 0 0; font-size: 0.85rem; color: var(--slate-soft); }
.offer-thanks { text-align: center; padding: 24px 0; }
.offer-thanks-tick { display: inline-grid; place-items: center; width: 66px; height: 66px; margin-bottom: 18px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 1.9rem; }

.offer-terms { background: var(--white); padding: 0 0 72px; }
.offer-terms details { border-top: 1px solid var(--line); padding-top: 18px; }
.offer-terms summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.offer-terms-body { margin-top: 14px; font-size: 0.92rem; line-height: 1.7; color: var(--slate-soft); }

@media (max-width: 640px) {
  .offer-included, .offer-why, .offer-quote { padding: 60px 0; }
  .offer-badge { font-size: 0.7rem; padding: 7px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .offer-pop-dialog { animation: none; }
  .offer-feature-poster img { transform: none; transition: none; }
}

/* ==========================================================================
   Prize draws — /draw page, home page card, pricing note
   (set up in Admin → Promotions → Prize draws)
   ========================================================================== */
.draw-hero {
  padding: 60px 0 72px; color: #fff;
  background:
    radial-gradient(100% 80% at 88% 0%, rgba(242,169,59,0.32) 0%, rgba(242,169,59,0) 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(43,108,255,0.38) 0%, rgba(43,108,255,0) 60%),
    #0F1D36;
}
.draw-hero-inner { display: grid; gap: 44px; align-items: center; }
.draw-hero-inner.has-poster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.draw-hero h1 { color: #fff; font-size: clamp(2.3rem, 3.4vw + 1rem, 3.8rem); letter-spacing: -0.025em; margin: 20px 0 10px; }
.draw-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.1); color: #E6ECF7;
}
.draw-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #97A5C0; }
.draw-status.is-open { background: var(--amber); color: var(--ink); }
.draw-status.is-open::before { background: var(--ink); animation: drawPulse 1.6s ease-in-out infinite; }
.draw-status.is-announced::before { background: var(--teal); }
.draw-prize { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1vw + 1.1rem, 1.9rem); line-height: 1.3; color: #FFD38A; margin: 0 0 16px; }
.draw-prize span { color: #C9D3E4; font-weight: 500; }
.draw-lede { font-size: 1.1rem; color: #AEBBD4; max-width: 44ch; }
.draw-hero-poster img { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,0.4); }
.draw-winner-banner { margin-top: 18px; padding: 22px 24px; border-radius: 18px; background: rgba(242,169,59,0.12); border: 1.5px solid rgba(242,169,59,0.7); }
.draw-ticket-label { display: block; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: #F7C77A; }
.draw-winner-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height: 1.1; color: #fff; margin: 6px 0; }
.draw-winner-name span { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; color: #F7C77A; vertical-align: middle; margin-left: 8px; }
.draw-winner-sub { margin: 0; color: #C9D3E4; font-size: 0.95rem; }
@media (max-width: 880px) {
  .draw-hero-inner.has-poster { grid-template-columns: 1fr; }
  .draw-hero-poster { max-width: 440px; }
  .draw-hero { padding: 44px 0 56px; }
}

.draw-mine { padding: 36px 0 0; background: #F3F5F9; }
.draw-ticket-card { padding: 22px 26px; border-radius: 16px; background: #fff; border: 2px dashed #F2C46D; box-shadow: var(--shadow-card); }
.draw-ticket-card .draw-ticket-label { color: #8A5A00; }
.draw-ticket-card.is-empty { border-color: var(--line); }
.draw-ticket-numbers { font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem); letter-spacing: 0.02em; color: var(--ink); margin: 6px 0 4px; word-break: break-word; }
.draw-ticket-sub { margin: 0; color: var(--slate-soft); }
.draw-signin { margin: 0; padding: 14px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.draw-mine + .draw-enter { padding-top: 48px; }
.draw-enter { background: #F3F5F9; }
.draw-enter h2 { font-size: clamp(1.9rem, 2.6vw + 1rem, 2.7rem); letter-spacing: -0.02em; }
.draw-enter-lede { font-size: 1.05rem; color: var(--slate-soft); }
.draw-options { display: grid; gap: 12px; margin-top: 24px; }
.draw-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.draw-option::before { content: ''; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--amber); }
.draw-option h3 { margin: 2px 0; font-size: 1.15rem; }
.draw-option p { margin: 0; color: var(--slate-soft); font-size: 0.92rem; }
.draw-option-kind { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.draw-details { background: #fff; }
.draw-description { font-size: 1.1rem; color: var(--slate); }
.draw-dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 22px; }
.draw-dates div { padding: 14px 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.draw-dates dt { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-soft); }
.draw-dates dd { margin: 4px 0 0; font-weight: 600; color: var(--ink); }
.draw-fair { color: var(--slate-soft); font-size: 0.95rem; }
.draw-terms { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 24px; }
.draw-terms summary { cursor: pointer; font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  .draw-dates { grid-template-columns: 1fr; }
  .draw-option { flex-direction: column; align-items: flex-start; }
  .draw-enter, .draw-details { padding: 56px 0; }
}
@keyframes drawPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.draw-feature { padding: 22px 0 4px; }
.offer-feature + .draw-feature { padding-top: 18px; }
.draw-feature-card {
  display: flex; align-items: center; gap: 22px; padding: 20px 24px;
  border-radius: 20px; background: #fff; border: 2px dashed #F2C46D; box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none !important; transition: transform .2s ease;
}
.draw-feature-card:hover { transform: translateY(-2px); }
.draw-feature-img { flex: 0 0 96px; }
.draw-feature-img img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; }
.draw-feature-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.draw-feature .draw-ticket-label { color: #8A5A00; }
.draw-feature-title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--ink); }
.draw-feature-text { color: var(--slate); }
.draw-feature-meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--signal); }
@media (max-width: 560px) { .draw-feature-img { display: none; } .draw-feature-card { padding: 18px; } }

.pricing-draw { font-size: .82rem; font-weight: 600; color: var(--ink); background: #FFF6E5; border: 1px dashed #F2C46D; border-radius: 10px; padding: 7px 11px; margin: 0 0 14px; }
@media (prefers-reduced-motion: reduce) { .draw-status.is-open::before { animation: none; } .draw-feature-card { transition: none; } }

/* ---------- v18: room for "Pay a Quote" in the top menu ----------
   Between the collapsed menu (1040px and below) and wide screens, the
   seven links are packed slightly closer so the bar never runs off the
   side of the screen. */
@media (min-width: 1041px) and (max-width: 1150px) {
  .main-nav a { padding-left: 5px; padding-right: 5px; font-size: 0.85rem; }
}