/* ==========================================================================
   Alhora — Design System
   2026 rebrand · Paper & Ink · Newsreader / Instrument Sans / terracotta
   ========================================================================== */

/* NO @import FOR THE FONTS. There used to be one here, duplicating the
   <link> base.html already carries, and it cost a render-blocking round trip
   on every page: an @import is only discovered once this file has downloaded
   AND parsed, so the font request serialised behind it —
   HTML → main.css → fonts — where the <link> starts it in parallel with the
   HTML. base.html is the only template that loads this stylesheet and it has
   the preconnect and the link, so nothing is lost by dropping it. */

/* --------------------------------------------------------------------------
   Custom Properties
   -------------------------------------------------------------------------- */

:root {
  /* Colours */
  --clr-primary:    #211A12;
  --clr-secondary:  #4A4136;
  --clr-accent:     #A63A2B;
  --clr-accent-lt:  #B94434;
  --clr-accent-dk:  #7E2C20;
  --clr-bg:         #F5EFE3;
  --clr-bg-warm:    #EDE5D4;
  --clr-bg-dark:    #0F0C0A;
  --clr-text:       #211A12;
  --clr-text-muted: #6E6353;
  --clr-border:     rgba(33,26,18,0.16);
  --clr-border-dk:  #2A2118;
  --clr-success:    #2F5D50;
  --clr-fail:       #9C2B1D;

  /* Typography */
  --font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui:      'Instrument Sans', system-ui, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, monospace;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Transitions */
  --trans-fast:   150ms ease;
  --trans-normal: 200ms ease;
  --trans-slow:   300ms ease;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(33,26,18,0.08), 0 1px 2px rgba(33,26,18,0.05);
  --shadow:     0 4px 16px rgba(33,26,18,0.10), 0 2px 6px rgba(33,26,18,0.06);
  --shadow-lg:  0 20px 48px rgba(33,26,18,0.14), 0 8px 20px rgba(33,26,18,0.08);
  --shadow-gold: 0 0 0 1px rgba(166,58,43,0.3), 0 8px 32px rgba(166,58,43,0.15);

  /* Layout */
  --max-width: 1200px;
  --nav-h: 72px;
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

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

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; }

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

button { cursor: pointer; font-family: inherit; }

ul { list-style: none; }

/* Screen-reader only */
.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;
}

/* --------------------------------------------------------------------------
   Typography scale
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--clr-primary);
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 300; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 400; }
h4 { font-size: 1.125rem; }

p { margin-bottom: 0; }

em { font-style: italic; }

/* --------------------------------------------------------------------------
   Skip link
   --------------------------------------------------------------------------
   Off-screen until focused, never display:none — a hidden-by-display element
   is removed from the tab order, which is the one thing this must not be.
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--clr-accent);
  color: #F3ECDD;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem 1.375rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--trans-fast),
              color var(--trans-fast),
              border-color var(--trans-fast),
              transform var(--trans-fast),
              box-shadow var(--trans-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 0.9375rem;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* Gold CTA */
.btn-gold {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
  color: #F3ECDD;
}
.btn-gold:hover {
  background-color: var(--clr-accent-lt);
  border-color: var(--clr-accent-lt);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Primary (dark) */
.btn-primary {
  background-color: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-bg);
}
.btn-primary:hover {
  background-color: var(--clr-secondary);
  border-color: var(--clr-secondary);
  transform: translateY(-2px);
}

/* Outline */
.btn-outline {
  background-color: transparent;
  border-color: var(--clr-border);
  color: var(--clr-primary);
}
.btn-outline:hover {
  border-color: var(--clr-primary);
  background-color: var(--clr-bg-warm);
  transform: translateY(-2px);
}

/* Ghost */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--clr-secondary);
}
.btn-ghost:hover {
  color: var(--clr-primary);
  background-color: var(--clr-bg-warm);
}

/* Outline-light (for dark backgrounds) */
.btn-outline-light {
  background-color: transparent;
  border-color: rgba(243,236,221,0.4);
  color: #F3ECDD;
}
.btn-outline-light:hover {
  border-color: rgba(243,236,221,0.8);
  background-color: rgba(243,236,221,0.1);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Layout Utilities
   -------------------------------------------------------------------------- */

.section-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section-inner-narrow {
  max-width: 760px;
}

.section-label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: var(--space-4);
}

.section-heading {
  margin-bottom: var(--space-5);
  text-wrap: balance;
}

.section-sub {
  font-size: 1.0625rem;
  color: var(--clr-secondary);
  max-width: 640px;
  margin-bottom: var(--space-12);
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background-color: rgba(245,239,227,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--clr-border);
  transition: box-shadow var(--trans-normal);
}

.site-nav.scrolled {
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-wordmark {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--clr-primary);
  flex-shrink: 0;
  transition: color var(--trans-fast);
}
.nav-wordmark:hover { color: var(--clr-accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  font-weight: 400;
  color: var(--clr-secondary);
  transition: color var(--trans-fast);
}
.nav-link:hover { color: var(--clr-primary); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav-burger {
  display: none;
  background: none;
  border: none;
  color: var(--clr-primary);
  padding: var(--space-2);
  margin-left: auto;
}

/* Mobile menu */
.mobile-menu {
  display: none;
  position: absolute;
  top: var(--nav-h);
  left: 0; right: 0;
  background-color: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-nav-link {
  font-size: 1rem;
  color: var(--clr-secondary);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--clr-border);
  transition: color var(--trans-fast);
  cursor: pointer;
}
.mobile-nav-link:hover { color: var(--clr-primary); }

.mobile-cta { margin-top: var(--space-4); }

.mobile-menu.open { display: block; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #F5EFE3 0%,
    #F1EADA 20%,
    #FBF7EE 50%,
    #EFE7D3 80%,
    #F5EFE3 100%
  );
  background-size: 400% 400%;
  animation: gradientMorph 18s ease infinite;
  z-index: 0;
}

@keyframes gradientMorph {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  text-align: center;
  padding-block: var(--space-24);
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(166,58,43,0.25);
  border-radius: 100px;
  background-color: rgba(166,58,43,0.06);
}

.hero-heading {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--clr-primary);
  margin-bottom: var(--space-6);
}

.hero-heading em {
  font-style: italic;
  color: var(--clr-accent);
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--clr-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-10);
  max-width: 580px;
  margin-inline: auto;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}

.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
}
.hero-meta-item svg { color: var(--clr-accent); flex-shrink: 0; }

.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  color: var(--clr-text-muted);
  animation: scrollBounce 2.4s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* --------------------------------------------------------------------------
   Features Section
   -------------------------------------------------------------------------- */

.features {
  padding-block: var(--space-24);
  background-color: var(--clr-bg);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.feature-card {
  padding: var(--space-8);
  background-color: #FBF7EE;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  transition: transform var(--trans-normal), box-shadow var(--trans-normal), border-color var(--trans-normal);
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(166,58,43,0.2);
}

.feature-icon {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(166,58,43,0.08);
  border-radius: var(--radius);
  color: var(--clr-accent);
  margin-bottom: var(--space-5);
}

.feature-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--clr-primary);
  margin-bottom: var(--space-3);
}

.feature-desc {
  font-size: 0.9375rem;
  color: var(--clr-secondary);
  line-height: 1.7;
}

.features-cta {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Demo / Mockup Section
   -------------------------------------------------------------------------- */

.demo {
  padding-block: var(--space-24);
  background-color: var(--clr-bg-warm);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

.demo .section-sub { margin-bottom: var(--space-16); }

.demo-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-8);
  align-items: center;
}

.demo-pane-label {
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: var(--space-4);
}

.demo-device {
  background-color: #FBF7EE;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow);
}

.demo-device-doc .demo-doc-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--clr-bg-warm);
  border-bottom: 1px solid var(--clr-border);
}

.demo-doc-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background-color: var(--clr-border);
}

.demo-doc-filename {
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  margin-left: var(--space-2);
  font-family: monospace;
}

.demo-doc-content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.demo-text-line { font-size: 0.875rem; color: var(--clr-text); }
.demo-text-title { font-weight: 700; font-size: 1rem; }
.demo-text-short { max-width: 80%; }
.demo-text-shorter { max-width: 40%; }
.demo-text-break { height: var(--space-2); }

.demo-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--clr-accent);
}

.demo-arrow-label {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-style: italic;
  color: var(--clr-accent);
}

.demo-device-book {
  min-height: 260px;
}

.demo-book-page {
  padding: var(--space-8) var(--space-6);
  font-family: var(--font-heading);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.demo-book-ornament {
  text-align: center;
  font-size: 1.25rem;
  color: var(--clr-accent);
  line-height: 1;
}

.demo-book-chapter {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--clr-primary);
  margin-top: var(--space-2);
}

.demo-book-dropcap-line {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.demo-book-dropcap {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 0.85;
  float: left;
  margin-right: 0.1em;
  color: var(--clr-primary);
}

.demo-book-text-inline,
.demo-book-body {
  font-size: 0.875rem;
  color: var(--clr-text);
  line-height: 1.75;
}

.demo-book-separator {
  text-align: center;
  color: var(--clr-text-muted);
  letter-spacing: 0.25em;
  font-size: 0.75rem;
  padding-block: var(--space-2);
}

.demo-book-folio {
  text-align: center;
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Comparison Table
   -------------------------------------------------------------------------- */

.comparison {
  padding-block: var(--space-24);
  background-color: var(--clr-bg);
}

.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.comparison-table thead tr {
  background-color: var(--clr-primary);
}

.comparison-table th {
  padding: var(--space-5) var(--space-6);
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 600;
  color: rgba(243,236,221,0.6);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.col-feature {
  text-align: left !important;
  width: 35%;
}

.col-alhora { width: 25%; }
.col-competitor { width: 20%; }

.col-alhora-badge {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--clr-accent);
  letter-spacing: 0;
  text-transform: none;
}

.comparison-table tbody tr {
  border-bottom: 1px solid var(--clr-border);
}

.comparison-table tbody tr:last-child {
  border-bottom: none;
}

.comparison-table tbody tr:nth-child(even) {
  background-color: var(--clr-bg-warm);
}

.comparison-table td {
  padding: var(--space-4) var(--space-6);
  text-align: center;
  vertical-align: middle;
  color: var(--clr-secondary);
}

.feature-name {
  text-align: left !important;
  font-weight: 700;
  color: var(--clr-primary) !important;
  font-size: 0.9rem;
}

.alhora-val {
  font-weight: 700;
  color: var(--clr-primary) !important;
}

.alhora-win {
  color: var(--clr-success) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.comp-val svg { color: var(--clr-fail); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Pricing Section
   -------------------------------------------------------------------------- */

.pricing {
  padding-block: var(--space-24);
  background-color: var(--clr-bg-warm);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

.pricing-page {
  background-color: var(--clr-bg);
  border-top: none;
  border-bottom: none;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  align-items: start;
}

.pricing-card {
  background-color: #FBF7EE;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition: transform var(--trans-normal), box-shadow var(--trans-normal);
}

.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.pricing-card-featured {
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-gold);
  position: relative;
}

.pricing-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pricing-plan {
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

.pricing-card-featured .pricing-plan {
  color: var(--clr-accent);
}

.pricing-badge {
  display: inline-block;
  font-family: var(--font-ui);
  background-color: var(--clr-bg-warm);
  border: 1px solid var(--clr-border);
  padding: var(--space-1) var(--space-3);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--clr-secondary);
  align-self: flex-start;
}

.pricing-badge-gold {
  background-color: rgba(166,58,43,0.1);
  border-color: rgba(166,58,43,0.3);
  color: var(--clr-accent-dk);
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.pricing-currency {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-muted);
}

.pricing-price {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--clr-primary);
}

.pricing-period {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  font-weight: 400;
}

.pricing-desc {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9rem;
  color: var(--clr-secondary);
  line-height: 1.5;
}

.pricing-features li svg {
  color: var(--clr-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.pricing-note {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
}

/* The pound figure under a localised price. Small and quiet on purpose: it has
   to be readable before anyone reaches Stripe, but the price above it is what
   the card is for. Pulled up tight under .pricing-amount, which is a baseline
   flex row and cannot hold a second line itself. */
.pricing-billed {
  margin-top: calc(var(--space-1) * -1);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--clr-text-muted);
}

/* The switcher carries its own inline styles so it also works on index.html,
   which loads no stylesheet. These only add what inline styles cannot: hover,
   focus and the reduced weight of the options not chosen. */
.currency-switch-opt {
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.currency-switch-opt:hover:not(.is-active) {
  border-color: rgba(166,58,43,0.45) !important;
  color: var(--clr-accent-dk) !important;
}

.currency-switch-opt:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonials {
  padding-block: var(--space-24);
  background-color: var(--clr-bg);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.testimonial-card {
  background-color: #FBF7EE;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition: transform var(--trans-normal), box-shadow var(--trans-normal);
}
.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.testimonial-quote {
  color: var(--clr-accent);
  opacity: 0.4;
  flex-shrink: 0;
}

.testimonial-text {
  font-style: italic;
  font-size: 1rem;
  color: var(--clr-secondary);
  line-height: 1.75;
  flex: 1;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background-color: var(--clr-primary);
  color: var(--clr-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  flex-shrink: 0;
}

.testimonial-name {
  font-style: normal;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--clr-primary);
  display: block;
}

.testimonial-role {
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
  display: block;
}

/* --------------------------------------------------------------------------
   FAQ Accordion
   -------------------------------------------------------------------------- */

.faq {
  padding-block: var(--space-24);
  background-color: var(--clr-bg-warm);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

.faq .section-heading,
.faq .section-sub {
  margin-inline: auto;
}

.faq-pricing {
  background-color: var(--clr-bg);
  border-top: none;
}

.faq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #FBF7EE;
}

.faq-item {
  border-bottom: 1px solid var(--clr-border);
}
.faq-item:last-child { border-bottom: none; }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--clr-primary);
  transition: background-color var(--trans-fast), color var(--trans-fast);
}

.faq-question:hover {
  background-color: var(--clr-bg-warm);
}

.faq-question[aria-expanded="true"] {
  color: var(--clr-accent);
}

.faq-question[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  flex-shrink: 0;
  transition: transform var(--trans-normal);
  color: var(--clr-text-muted);
}

.faq-answer {
  padding: 0 var(--space-6) var(--space-5);
}

.faq-answer p {
  font-size: 0.9375rem;
  color: var(--clr-secondary);
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */

.final-cta {
  padding-block: var(--space-24);
  background-color: var(--clr-primary);
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(166,58,43,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.final-cta-inner {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  text-align: center;
  position: relative;
}

.final-cta-ornament {
  font-size: 1.5rem;
  color: var(--clr-accent);
  margin-bottom: var(--space-6);
  display: block;
  opacity: 0.7;
}

.final-cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  color: #F3ECDD;
  margin-bottom: var(--space-5);
}

.final-cta-sub {
  font-size: 1.0625rem;
  color: rgba(243,236,221,0.65);
  margin-bottom: var(--space-10);
  line-height: 1.7;
}

.final-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.final-cta-note {
  font-size: 0.8125rem;
  color: rgba(243,236,221,0.4);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--clr-bg-dark);
  color: rgba(243,236,221,0.5);
  padding-top: var(--space-16);
}

.footer-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(243,236,221,0.08);
}

.footer-wordmark {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: #F3ECDD;
  display: block;
  margin-bottom: var(--space-3);
}

.footer-tagline {
  font-size: 0.875rem;
  color: rgba(243,236,221,0.45);
  font-style: italic;
}

.footer-nav {
  display: flex;
  gap: var(--space-12);
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-nav-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243,236,221,0.35);
  margin-bottom: var(--space-1);
}

.footer-link {
  font-size: 0.875rem;
  color: rgba(243,236,221,0.5);
  transition: color var(--trans-fast);
  cursor: pointer;
}
.footer-link:hover { color: #F3ECDD; }

.footer-bottom {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
  padding-block: var(--space-6);
  font-size: 0.8125rem;
  color: rgba(243,236,221,0.25);
}

/* The statutory trading disclosure — registered name, place of registration,
   company number and registered office. Quieter than the line above it, and
   deliberately still legible: it is a legal requirement under the Companies
   Act 2006, so it may recede and it may NOT be hidden. Do not set
   display:none, visibility:hidden, or an opacity that makes it unreadable.

   Legibility is part of the requirement, which is why this is a LIGHTER TOUCH
   than the 0.25 used by the copyright line above it: that notice may fade into
   the background, a statutory disclosure may not.

   0.55 IS A MEASURED VALUE, NOT A TASTE ONE. At 12px on this footer ground it
   gives 5.38:1, clear of the 4.5:1 WCAG AA needs for text under 18pt. 0.42
   looked right and measured 3.66:1, which fails. If you restyle the footer
   ground, re-measure rather than re-eyeball. */
.footer-legal {
  margin-top: 0.5rem;
  max-width: 62ch;
  font-size: 0.75rem;
  line-height: 1.55;
  color: rgba(243,236,221,0.55);
}
.footer-legal strong { font-weight: 500; color: rgba(243,236,221,0.72); }

/* --------------------------------------------------------------------------
   Page Hero (inner pages)
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: var(--space-24);
  margin-top: var(--nav-h);
  background: linear-gradient(180deg, var(--clr-bg-warm) 0%, var(--clr-bg) 100%);
  border-bottom: 1px solid var(--clr-border);
  text-align: center;
}

.page-hero .section-heading {
  margin-bottom: var(--space-5);
}

.page-hero .section-sub {
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 0;
}

/* Editorial ornament — ties the standalone pages to the homepage motif */
.page-hero .section-inner::before {
  content: "❧";
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--clr-accent);
  margin-bottom: var(--space-5);
  opacity: 0.9;
}

.page-hero-sm {
  padding-block: var(--space-16);
}

/* --------------------------------------------------------------------------
   Feature Detail Sections
   -------------------------------------------------------------------------- */

.feature-detail {
  padding-block: var(--space-24);
  background-color: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
}

.feature-detail-alt {
  background-color: var(--clr-bg-warm);
}

.feature-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.feature-detail-alt .feature-detail-inner {
  direction: rtl;
}
.feature-detail-alt .feature-detail-inner > * {
  direction: ltr;
}

.feature-detail-heading {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  margin-bottom: var(--space-5);
}

.feature-detail-text p {
  font-size: 1rem;
  color: var(--clr-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-6);
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  color: var(--clr-secondary);
  line-height: 1.6;
}

.feature-list li svg {
  color: var(--clr-success);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Feature visual cards */
.feature-detail-visual {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.feature-visual-card {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background-color: #FBF7EE;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.feature-visual-icon { color: var(--clr-accent); }

.feature-visual-label {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clr-primary);
}

.feature-visual-sublabel {
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
}

/* Typography preview */
.feature-type-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.ftp-style-a,
.ftp-style-b {
  padding: var(--space-6);
  background-color: #FBF7EE;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}

.ftp-chapter {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--clr-primary);
  margin-bottom: var(--space-4);
}

.ftp-dropcap-row {
  display: flex;
  align-items: flex-start;
}

.ftp-dropcap {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 500;
  line-height: 0.8;
  float: left;
  margin-right: 0.08em;
  color: var(--clr-accent);
}

.ftp-body {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--clr-text);
}

/* Content type pills */
.feature-content-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  width: 100%;
}

.fct-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: #FBF7EE;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--clr-secondary);
}

.fct-item svg { color: var(--clr-accent); flex-shrink: 0; }

/* Import visual */
.feature-import-visual {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-content: center;
}

.fiv-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  background-color: #FBF7EE;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--clr-secondary);
  min-width: 80px;
}

.fiv-file svg { color: var(--clr-secondary); }
.fiv-file-alhora { border-color: var(--clr-accent); }
.fiv-file-alhora svg { color: var(--clr-accent); }

.fiv-arrow { color: var(--clr-text-muted); }

/* Platforms */
.feature-platforms {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

.fp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: #FBF7EE;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  min-width: 100px;
  font-size: 0.875rem;
  color: var(--clr-secondary);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
}

.fp-item svg { color: var(--clr-primary); }

.fp-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Responsive — 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .feature-detail-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .feature-detail-alt .feature-detail-inner {
    direction: ltr;
  }

  .demo-comparison {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .demo-arrow {
    flex-direction: row;
    justify-content: center;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* --------------------------------------------------------------------------
   Responsive — 768px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root { --nav-h: 60px; }

  .nav-links,
  .nav-actions { display: none; }

  .nav-burger { display: flex; }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .footer-nav {
    flex-direction: column;
    gap: var(--space-6);
  }

  .comparison-table th,
  .comparison-table td {
    padding: var(--space-3) var(--space-4);
    font-size: 0.8125rem;
  }

  .feature-detail-visual {
    flex-direction: column;
  }

  .feature-import-visual {
    flex-direction: column;
  }

  .fiv-arrow svg { transform: rotate(90deg); }
}

/* --------------------------------------------------------------------------
   Responsive — 375px
   -------------------------------------------------------------------------- */

@media (max-width: 375px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    justify-content: center;
  }

  .final-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .final-cta-actions .btn {
    justify-content: center;
  }

  .pricing-card {
    padding: var(--space-6);
  }

  .feature-content-types {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Main content offset for nav
   -------------------------------------------------------------------------- */

#main-content > *:first-child:not(.hero):not(.page-hero) {
  margin-top: var(--nav-h);
}

/* --------------------------------------------------------------------------
   Scroll-reveal utility (added via JS)
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* --------------------------------------------------------------------------
   bp-md line break helper
   -------------------------------------------------------------------------- */

.bp-md { display: none; }

@media (min-width: 768px) {
  .bp-md { display: inline; }
}

/* --------------------------------------------------------------------------
   Legal pages (Privacy, Terms)
   -------------------------------------------------------------------------- */

.legal-content {
  padding: 3rem 0 5rem;
}

.legal-inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-family: var(--font-body);
  color: var(--clr-text);
  line-height: 1.85;
  font-size: 0.938rem;
}

.legal-inner h2 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--clr-text);
}

.legal-inner h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--clr-text);
}

.legal-inner p {
  margin-bottom: 1rem;
}

.legal-inner ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.legal-inner li {
  margin-bottom: 0.4rem;
}

.legal-inner a {
  color: var(--clr-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-inner a:hover {
  color: var(--clr-primary-dark, #1a1a1a);
}

/* --------------------------------------------------------------------------
   Release notes page
   -------------------------------------------------------------------------- */

.release-notes {
  padding-block: var(--space-16) var(--space-24);
}

.release {
  padding-block: var(--space-16);
}

.release + .release {
  border-top: 1px solid var(--clr-border);
}

.release-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.release-version {
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.release-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--clr-text-muted);
}

.release-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.release-summary {
  font-size: 1.0625rem;
  color: var(--clr-secondary);
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.release-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.release-highlights li {
  position: relative;
  padding-left: var(--space-6);
  line-height: 1.7;
}

.release-highlights li::before {
  content: "❧";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--clr-accent);
  opacity: 0.85;
}

.release-highlight-title {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 2px;
}

.release-highlight-body {
  display: block;
  font-size: 0.9375rem;
  color: var(--clr-secondary);
}

.release-cta {
  padding-top: var(--space-16);
  border-top: 1px solid var(--clr-border);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Install help modal (download page)
   ---------------------------------------------------------------------------
   Opens AFTER a download starts, never in place of it. The reader is told what
   their OS is about to say while the file is already arriving — the failure
   this exists to prevent is a warning appearing with no context once they have
   left the site.
--------------------------------------------------------------------------- */

.ihelp[hidden] { display: none; }

.ihelp {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ihelp__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 10, 0.6);
  backdrop-filter: blur(2px);
}

.ihelp__panel {
  position: relative;
  width: min(600px, 100%);
  /* The panel scrolls, not the page behind it — ChromeOS is the longest panel
     and must stay usable on a short laptop screen. */
  max-height: min(86vh, 780px);
  overflow-y: auto;
  background: var(--clr-bg);
  color: var(--clr-text);
  border-radius: 16px;
  padding: 34px 34px 26px;
  box-shadow: 0 30px 70px rgba(15, 12, 10, 0.4);
}

.ihelp__x {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--clr-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.ihelp__x:hover { background: rgba(33, 26, 18, 0.06); }

.ihelp__eyebrow {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.ihelp__title {
  margin: 0 0 16px;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ihelp__lede {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--clr-secondary);
}

.ihelp__steps {
  margin: 0 0 16px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.6;
}

.ihelp__note {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--clr-text-muted);
}

/* A command the reader is meant to copy, not retype. */
.ihelp__cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 12px;
  background: var(--clr-bg-dark);
  border-radius: 10px;
}
/* The CODE scrolls, not the row. Scrolling the row carried the Copy button
   off the right-hand edge on a narrow screen — the one control the block
   exists for, unreachable exactly where retyping a command is hardest. */
.ihelp__cmd code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  font-size: 13.5px;
  color: #F3ECDD;
  white-space: nowrap;
}
.ihelp__copy {
  flex: 0 0 auto;
  border: 1px solid rgba(243, 236, 221, 0.28);
  background: none;
  color: #F3ECDD;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.ihelp__copy:hover { background: rgba(243, 236, 221, 0.12); }

.ihelp__more { margin: 4px 0 0; }
.ihelp__more summary {
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--clr-accent);
  padding: 6px 0;
}
.ihelp__more[open] summary { margin-bottom: 10px; }

.ihelp kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--clr-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #fff;
  font-size: 12.5px;
  font-family: inherit;
}

.ihelp__foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--clr-border);
}
.ihelp__reassure {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--clr-text-muted);
}
.ihelp__done {
  width: 100%;
  border: 0;
  background: var(--clr-accent);
  color: #FBF7EE;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 0;
  border-radius: 999px;
  cursor: pointer;
}
.ihelp__done:hover { background: var(--clr-accent-lt); }

@media (max-width: 520px) {
  .ihelp { padding: 12px; }
  .ihelp__panel { padding: 28px 20px 20px; max-height: 92vh; }
  .ihelp__title { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Discount code entry — /pricing/ only
   --------------------------------------------------------------------------
   A quiet disclosure under the plan grid; checkout.js does the rest. The line
   under each paid price is server-rendered and hidden until a code applies,
   so the only thing a code moves is that line itself. Anything here that
   toggles uses the hidden attribute, which the last rule keeps winning over
   the display values set above it.
   -------------------------------------------------------------------------- */

.discount-entry {
  max-width: 26rem;
  margin: 0 auto var(--space-8);
  font-family: var(--font-ui);
  text-align: center;
}

.discount-entry-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-accent);
  list-style: none;
  cursor: pointer;
}
.discount-entry-toggle::-webkit-details-marker { display: none; }
.discount-entry-toggle::after {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform var(--trans-fast);
}
.discount-entry[open] > .discount-entry-toggle::after {
  transform: translateY(0.125rem) rotate(-135deg);
}
.discount-entry-toggle:hover { color: var(--clr-accent-dk); }
.discount-entry-toggle:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

.discount-entry-form {
  margin-top: var(--space-3);
  text-align: left;
}

.discount-entry-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-secondary);
}

.discount-entry-row {
  display: flex;
  gap: var(--space-2);
}

/* 1rem on purpose: iOS Safari zooms the page into any smaller field. */
.discount-entry-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5625rem 1.125rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-primary);
  background-color: #FBF7EE;
  border: 1.5px solid var(--clr-border);
  border-radius: 999px;
  transition: border-color var(--trans-fast);
}
.discount-entry-input:hover { border-color: rgba(33,26,18,0.32); }
.discount-entry-input:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
  border-color: var(--clr-accent);
}

.discount-entry-use { flex: none; }
.discount-entry-use[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

.discount-entry-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  margin-top: var(--space-3);
  text-align: left;
}

.discount-entry-status {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--clr-secondary);
}

.discount-entry-remove {
  min-height: 24px;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.discount-entry-remove:hover { color: var(--clr-accent-dk); }
.discount-entry-remove:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* The line under a paid price. Only a code that is actually used gets the
   accent; "doesn't cover" and "the founder price is lower" are information. */
.pricing-discount {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--clr-secondary);
}
.pricing-discount.is-applied {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background-color: rgba(166,58,43,0.07);
  color: var(--clr-accent-dk);
  font-weight: 600;
}

.discount-entry [hidden],
.pricing-discount[hidden] { display: none; }