/*
  FlashDesk — site-v2.css   (upgraded · round 6 · 2026-09-21)

  Full design-system upgrade incorporating:
    — All required CSS custom properties (--color-*, --sp-1…5, --radius, --font-body)
    — Backward-compatible aliases (--paper, --ink, --border, --sp-* extended to 9)
    — Light / dark / system three-state theme coverage
    — WCAG skip-link (.skip-link) and screen-reader utility (.sr-only)
    — Global :focus-visible with ≥3:1 contrast
    — Complete button states: hover (translateY -1px) / active / disabled / focus-visible
    — prefers-reduced-motion hard stop
    — 44px touch targets on coarse-pointer devices
    — 16px minimum body font-size, clamp() headings
    — Mobile breakpoints at 480px and 720px / 768px
    — Amber LIVE-state token pair (--color-amber / --color-amber-text)
    — All existing component class names preserved

  ROUND 6 ADDITIONS:
    — Differentiated radius tokens (--radius-sm: 6px / --radius: 12px / --radius-lg: 20px)
    — Mobile hamburger drawer (.nav-toggle, .site-nav.is-open, .nav-backdrop)
    — Trust bar + trust pill components (.trust-bar, .trust-pill)
    — Version badge (.version-badge)
    — Download card / file-choice (.download-options, .download-card, .download-card__*)
    — Warning band (.warning-band, .warning-band__icon) — distinct from .band-amber
    — FAQ anchor nav (.faq-nav)
    — Comparison table (.comparison-table)
    — Hero kicker (.hero-kicker) — above h1, brand-coloured
    — CTA label standardisation comment (.btn-blue, .header-cta white-space: nowrap)
    — Changelog / version timeline (.release-list, .release-item, .release-item__*)
    — Feature card enhancements (.feature-card, .feature-grid)
    — Stats / social-proof bar (.stats-bar, .stat-item)
    — Improved step indicators (.steps-visual, .step-dot)
    — Badge and tag styles (.badge, .tag, .tag-*)

  COLOUR ARGUMENT (unchanged from round 4): six real competitor sites — TeamViewer, Splashtop,
  1Password, Proton, Bitwarden, Mullvad — were fetched directly on 2026-09-04. All six are
  light-dominant. Dark + acid-green is the visual language of the hacking/crypto genre: exactly
  what the frightened, non-technical visitor FlashDesk exists for is already afraid of.
  Mullvad is the right model: light because the audience needs it, trusted through plain
  specificity and restraint rather than third-party authority signals FlashDesk does not yet have.
*/

/* =============================================================================
   FONT LOADING
   ============================================================================= */

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

/*
  Metric-matched fallback — minimises cumulative layout shift (CLS) while Inter loads.
  Segoe UI at size-adjust 108.6% closely matches Inter's cap-height and x-height.
  ascent-override / descent-override derived from Inter's own OS/2 table metrics.
*/
@font-face {
  font-family: 'Inter Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 108.6%;
  ascent-override: 96.9%;
  descent-override: 24.1%;
  line-gap-override: 0%;
}

/* =============================================================================
   DESIGN TOKENS — CSS custom properties
   ============================================================================= */

:root {
  color-scheme: light;

  /* ── COLOUR — neutral surfaces ─────────────────────────────────────────── */
  --color-bg:            #F5F6F8;   /* window / alternate-band background   */
  --color-card:          #FFFFFF;   /* card / primary surface               */
  --color-border:        #C6CCD4;   /* default hairline                     */
  --color-border-strong: #A9B1BC;   /* stronger hairline (icon tiles, etc.) */

  /* ── COLOUR — text ──────────────────────────────────────────────────────── */
  --color-text:  #1B1F24;   /* primary  — 15.35:1 on --color-card ✓       */
  --color-muted: #606266;   /* secondary —  5.05:1 on --color-card ✓ AA   */

  /* ── COLOUR — brand ─────────────────────────────────────────────────────── */
  --color-brand:        #2BD16B;   /* ONE clickable green — one filled use per screen  */
  --color-brand-hover:  #23B860;
  --color-brand-active: #1CA352;
  --color-brand-tile:   #17191E;   /* mark's own tile; footer only                     */
  --color-tile-text:    #ECEFF3;
  --color-tile-muted:   #9AA3AE;
  --color-tile-border:  #2E3440;

  /* ── COLOUR — semantic ──────────────────────────────────────────────────── */
  /*
    Amber: LIVE-session safety band — never recoloured, never calmed.
    --color-amber-text is the spec value (#B26A00). Contrast on the amber fill
    is 2.30:1 (fails AA). --color-amber-text-aa (#3D2200, 6.5:1) is provided
    for any non-brand copy placed on amber surfaces.
  */
  --color-amber:         #F4B400;
  --color-amber-text:    #B26A00;
  --color-amber-text-aa: #3D2200;

  --color-blue:    #1A73E8;   /* design-system CTA token (spec value)              */
  --color-blue-aa: #1558B0;   /* WCAG AA: 5.2:1 on --color-bg; use for text/focus  */
  --color-red:     #C5221F;   /* destructive actions                               */

  --color-operator-bg:   #242931;
  --color-operator-text: #ECEFF3;

  /* ── BACKWARD-COMPATIBLE ALIASES ───────────────────────────────────────── */
  /*
    Every existing component rule uses these names. Defining them as aliases of
    the new canonical tokens means a single token change propagates everywhere
    without touching a single component rule.
  */
  --paper:         var(--color-card);
  --paper-alt:     var(--color-bg);
  --ink:           var(--color-text);
  --ink-muted:     var(--color-muted);
  --border:        var(--color-border);
  --border-strong: var(--color-border-strong);
  --green:         var(--color-brand);
  --green-hover:   var(--color-brand-hover);
  --green-active:  var(--color-brand-active);
  --tile:          var(--color-brand-tile);
  --tile-text:     var(--color-tile-text);
  --tile-muted:    var(--color-tile-muted);
  --tile-border:   var(--color-tile-border);

  /* ── SPACING — 4/8/16/24/32 px primary scale ───────────────────────────── */
  --sp-1:  4px;    /*   4px */
  --sp-2:  8px;    /*   8px */
  --sp-3: 16px;    /*  16px */
  --sp-4: 24px;    /*  24px */
  --sp-5: 32px;    /*  32px */
  /* Extended steps for layout padding, section rhythm, hero vertical space: */
  --sp-6: 48px;    /*  48px */
  --sp-7: 64px;    /*  64px */
  --sp-8: 96px;    /*  96px */
  --sp-9: 128px;   /* 128px */

  /* ── RADIUS — differentiated per element scale ─────────────────────────── */
  /*
    Round 6: three distinct radii replace the previous flat 12px.
    --radius-sm: pill labels, badges, inline code, hash blocks, small chips
    --radius:    cards, inputs, callout labels, most containers
    --radius-lg: hero frame, modal sheets, CTA bands, large featured blocks
  */
  --radius-sm: 6px;    /* pill labels, badges, hash blocks       */
  --radius:    12px;   /* cards, inputs, callout labels          */
  --radius-lg: 20px;   /* hero frame, modal sheets, CTA bands    */

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
  --font-body: 'Inter', 'Inter Fallback', 'Segoe UI', sans-serif;

  --fs-kicker:    0.8125rem;   /* 13px — kicker / eyebrow labels             */
  --fs-small:     0.9375rem;   /* 15px — meta, captions, nav                 */
  /* body: 16px floor, never smaller */
  --fs-body:      clamp(1rem, 0.975rem + 0.13vw, 1.0625rem);     /* 16–17px  */
  --fs-lead:      clamp(1.125rem, 0.975rem + 0.75vw, 1.375rem);  /* 18–22px  */
  --fs-h3:        1.25rem;     /* 20px — card headings                       */
  /* h2 ≈ 1.75rem at 768px */
  --fs-h2:        clamp(1.375rem, 0.875rem + 2.5vw, 1.875rem);   /* 22–30px  */
  /* h1 ≈ 2.25rem at 768px */
  --fs-h1:        clamp(1.75rem, 0.875rem + 4.375vw, 2.875rem);  /* 28–46px  */
  --fs-statement: clamp(1.375rem, 0.875rem + 2.5vw, 2rem);       /* 22–32px  */

  /* ── LAYOUT ─────────────────────────────────────────────────────────────── */
  --contained-max: 75rem;   /* 1200px */
  --reading-max:   38rem;   /* ~608px — ~65 chars at --fs-body              */
}

/* =============================================================================
   DARK MODE — system preference
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg:            #15171B;
    --color-card:          #1D2027;
    --color-border:        #2C3240;
    --color-border-strong: #414B5A;
    --color-text:          #E2E8F0;
    --color-muted:         #8896A7;
    --color-blue:          #5B9CF6;
    --color-blue-aa:       #5B9CF6;

    /* re-point aliases */
    --paper:         var(--color-card);
    --paper-alt:     var(--color-bg);
    --ink:           var(--color-text);
    --ink-muted:     var(--color-muted);
    --border:        var(--color-border);
    --border-strong: var(--color-border-strong);
  }
}

/* =============================================================================
   DARK MODE — explicit [data-theme="dark"] attribute toggle
   ============================================================================= */

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:            #15171B;
  --color-card:          #1D2027;
  --color-border:        #2C3240;
  --color-border-strong: #414B5A;
  --color-text:          #E2E8F0;
  --color-muted:         #8896A7;
  --color-blue:          #5B9CF6;
  --color-blue-aa:       #5B9CF6;

  --paper:         var(--color-card);
  --paper-alt:     var(--color-bg);
  --ink:           var(--color-text);
  --ink-muted:     var(--color-muted);
  --border:        var(--color-border);
  --border-strong: var(--color-border-strong);
}

/* =============================================================================
   RESET
   ============================================================================= */

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

html {
  font-size: 100%;          /* 16px base — never smaller                          */
  scroll-behavior: smooth;
}

body {
  background:  var(--color-bg);
  color:       var(--color-text);
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: 1.6;
  min-height:  100vh;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img, video {
  display:   block;
  max-width: 100%;
  height:    auto;
}

/*
  Quoted Windows/Chrome dialog text: system font so the words match what users
  actually see on their screen — drawn in Segoe UI by Windows itself.
*/
.quote, .btn-dark, .btn-pale {
  font-family: system-ui, 'Segoe UI', Arial, sans-serif;
}

/* =============================================================================
   ACCESSIBILITY — skip link and screen-reader text
   ============================================================================= */

/*
  Skip link: invisible until focused, then drops into view.
  Must be the first focusable element in <body>.
  F1 fix (WCAG 2.4.1 Bypass Blocks).
*/
.skip-link {
  position:   absolute;
  top:        var(--sp-2);
  left:       var(--sp-2);
  z-index:    200;
  padding:    var(--sp-2) var(--sp-4);
  background: var(--color-card);
  color:      var(--color-text);
  font-weight: 600;
  font-size:   var(--fs-small);
  border:          2px solid var(--color-text);
  border-radius:   var(--radius);
  text-decoration: none;
  transform:  translateY(-200%);
  transition: transform 150ms ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline:   none;
}

/* Screen-reader-only text: announced by AT, invisible on screen */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* =============================================================================
   FOCUS — visible ring for keyboard users
   F5 / F3 fix: outline uses --color-blue-aa (5.2:1 on --color-bg).
   ============================================================================= */

:focus-visible {
  outline:        2px solid var(--color-blue-aa);
  outline-offset: 3px;
  border-radius:  var(--radius);
}

/* Suppress default ring for pointer users who trigger :focus but not :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* =============================================================================
   MOTION — interaction feedback only; hard stop for reduced-motion preference
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  a, .btn, .site-nav a, .header-cta, .card, .footer-col a {
    transition:
      color            150ms ease,
      background-color 150ms ease,
      border-color     150ms ease,
      transform        150ms ease,
      box-shadow       150ms ease,
      opacity          150ms ease;
  }
}

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

/* =============================================================================
   PAGE WRAPPER
   ============================================================================= */

.page {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}

.page > main {
  flex: 1;
}

/* =============================================================================
   BANDS — full-bleed background, contained content
   ============================================================================= */

.band { width: 100%; }

.band-paper { background: var(--color-card); }
.band-alt   { background: var(--color-bg);   }
.band-tile  { background: var(--color-brand-tile); color: var(--color-tile-text); }

/*
  Amber band: LIVE-session safety signal and scam warnings only.
  Colour is locked by design-system spec; never changed, never calmed.
*/
.band-amber {
  background:    var(--color-amber);
  color:         var(--color-amber-text);
  border-bottom: 3px solid #C49000;
}

.contained {
  max-width:      var(--contained-max);
  margin-inline:  auto;
  padding-inline: var(--sp-4);   /* 24px */
  padding-block:  var(--sp-7);   /* 64px */
}

@media (min-width: 640px) {
  .contained {
    padding-inline: var(--sp-5);   /* 32px */
  }
}

@media (max-width: 480px) {
  .contained {
    padding-inline: var(--sp-3);   /* 16px */
    padding-block:  var(--sp-6);   /* 48px */
  }
}

/* Reading column — ~65 chars; centred within its band by default */
.prose { max-width: var(--reading-max); }
.prose.center { margin-inline: auto; text-align: left; }

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

.kicker {
  display:        block;
  font-size:      var(--fs-kicker);
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-muted);
  margin-bottom:  var(--sp-3);   /* 16px */
}

h1 {
  font-size:      var(--fs-h1);
  font-weight:    700;
  line-height:    1.05;
  letter-spacing: -0.02em;
  margin-bottom:  var(--sp-4);   /* 24px */
}

h2 {
  font-size:      var(--fs-h2);
  font-weight:    700;
  line-height:    1.1;
  letter-spacing: -0.015em;
  margin-bottom:  var(--sp-4);   /* 24px */
}

h3 {
  font-size:     var(--fs-h3);
  font-weight:   600;
  line-height:   1.25;
  margin-bottom: var(--sp-2);   /* 8px */
}

.lead {
  font-size:   var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
  color:       var(--color-muted);
}

.statement {
  font-size:      var(--fs-statement);
  font-weight:    600;
  line-height:    1.3;
  letter-spacing: -0.01em;
  color:          var(--color-text);
}

small, .meta {
  font-size: var(--fs-small);
  color:     var(--color-muted);
}

p + p, p + ul, p + ol,
ul + p, ol + p {
  margin-top: var(--sp-4);   /* 24px */
}

ul.plain { list-style: none; }

ul.plain li {
  position:      relative;
  padding-left:  var(--sp-5);   /* 32px */
  margin-bottom: var(--sp-3);   /* 16px */
}

ul.plain li::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        0.65em;
  width:      8px;
  height:     2px;
  background: var(--color-text);
}

/* Monospace rendering for the 9-digit FlashDesk ID — the Hero element */
.id-number {
  font-family:          ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  letter-spacing:       0.08em;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   ICONS
   ============================================================================= */

.icon {
  width:          1.5rem;
  height:         1.5rem;
  flex:           none;
  display:        inline-block;
  vertical-align: -0.3em;
}

.icon-lg { width: 2rem; height: 2rem; }

.icon-tile {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           3rem;
  height:          3rem;
  background:      var(--color-bg);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius);
  color:           var(--color-text);
  margin-bottom:   var(--sp-4);   /* 24px */
  flex-shrink:     0;
  transition:      transform 0.18s ease, box-shadow 0.18s ease;
}

/* Icon inside a tile: scale icon-lg down to fit the 3rem chip */
.icon-tile .icon-lg { width: 1.5rem; height: 1.5rem; }

/* =============================================================================
   CARDS & GRIDS
   ============================================================================= */

.card {
  background:    var(--color-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       var(--sp-5);   /* 32px */
}

/* Card lifts one tonal step off an alt band */
.band-alt .card { background: var(--color-card); }

.card h3          { margin-bottom: var(--sp-2); }   /* 8px */
.card p           { color: var(--color-muted); }
.card p:last-child { margin-bottom: 0; }

.grid {
  display:               grid;
  gap:                   var(--sp-5);   /* 32px */
  grid-template-columns: 1fr;
}

/*
  .cols-3 gets a 2-column step at 640px (tablet portrait) as well as its
  final 3-column step at 900px, so an 8-card grid is never single-column
  all the way to tablet-landscape.
*/
@media (min-width: 640px) {
  .grid.cols-2,
  .grid.cols-3 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* =============================================================================
   FEATURE GRID / FEATURE CARDS — round 6 addition
   Enhanced card variant for feature sections with icon, heading and body copy.
   ============================================================================= */

.feature-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--sp-4);   /* 24px */
}

@media (min-width: 640px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .feature-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.feature-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);   /* 16px */
  background:     var(--color-card);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius);
  padding:        var(--sp-5);   /* 32px */
  transition:     border-color 0.15s, box-shadow 0.15s;
}

.feature-card:hover {
  border-color: var(--color-border-strong);
  box-shadow:   0 2px 12px rgba(27, 31, 36, 0.06);
}

.feature-card__icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           3rem;        /* 48px — up from 2.75rem for optical balance */
  height:          3rem;
  background:      var(--color-bg);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius);
  color:           var(--color-brand);
  flex-shrink:     0;
  transition:      transform 0.18s ease, box-shadow 0.18s ease;
}

.feature-card__icon svg {
  width:  1.375rem;   /* 22px — up from 1.25rem */
  height: 1.375rem;
}

.feature-card__heading {
  font-size:   var(--fs-h3);
  font-weight: 650;
  color:       var(--color-text);
  line-height: 1.25;
}

.feature-card__body {
  font-size:   var(--fs-body);
  color:       var(--color-muted);
  line-height: 1.6;
  flex:        1;
}

/* =============================================================================
   BUTTONS — complete state coverage
   ============================================================================= */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);          /* 8px  */
  font-family:     var(--font-body);
  font-weight:     650;
  font-size:       1rem;
  line-height:     1.25;
  padding:         var(--sp-3) var(--sp-5);  /* 16px 32px */
  min-height:      44px;
  border-radius:   var(--radius);
  border:          1px solid transparent;
  text-decoration: none;
  cursor:          pointer;
  white-space:     nowrap;
  user-select:     none;
  -webkit-user-select: none;
}

.btn:hover {
  transform:  translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.btn:active {
  transform:  translateY(0);
  box-shadow: none;
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity:        0.5;
  cursor:         not-allowed;
  pointer-events: none;
  transform:      none;
  box-shadow:     none;
}

.btn:focus-visible {
  outline:        2px solid var(--color-blue-aa);
  outline-offset: 3px;
}

/* Primary — green download CTA */
.btn-primary {
  background: var(--color-brand);
  color:      var(--color-text);
}
.btn-primary:hover  { background: var(--color-brand-hover);  }
.btn-primary:active { background: var(--color-brand-active); }

/* Secondary — bordered, transparent fill */
.btn-secondary {
  background:   transparent;
  color:        var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover {
  border-color: var(--color-text);
  background:   transparent;
}

/* Blue — decision actions requiring accessible blue */
/*
  CTA label standardisation — round 6. All pages: "Download FlashDesk — free".
  No file size in button. No capital F on "free". No period.
  See CLAUDE.md for the three-page audit that found three label variants.
*/
.btn-blue {
  background:  var(--color-blue-aa);
  color:       #FFFFFF;
  white-space: nowrap;
}
.btn-blue:hover { background: #0F4A99; }

/* Destructive */
.btn-destructive {
  background: var(--color-red);
  color:      #FFFFFF;
}
.btn-destructive:hover { background: #A31A17; }

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

.inline-link {
  color:                    var(--color-muted);
  text-decoration:          underline;
  text-underline-offset:    2px;
  text-decoration-thickness: 1px;
}

.inline-link:hover,
.inline-link:focus-visible {
  color:                    var(--color-text);
  text-decoration-thickness: 2px;
}

/* =============================================================================
   HEADER — sticky, light, download on every page
   ============================================================================= */

.site-header {
  position:      sticky;
  top:           0;
  z-index:       10;
  background:    var(--color-card);
  border-bottom: 1px solid var(--color-border);
}

.site-header .contained {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-4);   /* 24px */
  padding-block:   var(--sp-3);   /* 16px */
}

.brand {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);   /* 8px */
  font-weight: 650;
  font-size:   1.05rem;
  color:       var(--color-text);
  flex-shrink: 0;
}

/* ── Brand mark visual upgrade ────────────────────────────────────────────── */
/* Polished glow on every logo instance (header, drawer, footer) */
.brand svg {
  filter:        drop-shadow(0 0 6px rgba(43,209,107,.22)) drop-shadow(0 1px 3px rgba(0,0,0,.18));
  border-radius: 5px;   /* softens the shadow edge */
}

.site-nav {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-2) var(--sp-4);   /* 8px 24px */
}

.site-nav a {
  font-size:       var(--fs-small);
  font-weight:     600;
  color:           var(--color-muted);
  padding:         var(--sp-2) 0;   /* 8px */
  border-bottom:   2px solid transparent;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--color-text);
}

.site-nav a[aria-current="page"] {
  color:              var(--color-text);
  border-bottom-color: var(--color-border-strong);
}

.header-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-2);   /* 8px */
  background:      var(--color-brand);
  color:           var(--color-text);
  font-weight:     650;
  font-size:       var(--fs-small);
  padding:         var(--sp-2) var(--sp-4);   /* 8px 24px */
  border-radius:   var(--radius);
  border:          1px solid transparent;
  flex-shrink:     0;
  min-height:      36px;
  white-space:     nowrap;
  text-decoration: none;
}

.header-cta:hover  { background: var(--color-brand-hover); transform: translateY(-1px); }
.header-cta:active { transform: translateY(0); }

.header-cta:focus-visible {
  outline:        2px solid var(--color-blue-aa);
  outline-offset: 3px;
}

.header-cta .icon { width: 1.1rem; height: 1.1rem; }

/* =============================================================================
   MOBILE NAV DRAWER — round 6 addition
   Replaces the previous "display: none at 720px with zero fallback" approach.
   Requires a <button class="nav-toggle"> in the header and ~15 lines of vanilla
   JS adding/removing .is-open on .site-nav and .nav-backdrop.
   ============================================================================= */

/* Toggle button: hidden on desktop, shown on mobile */
.nav-toggle {
  display:    none;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    var(--sp-2);
  color:      var(--color-text);
  min-height: 44px;
  min-width:  44px;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   var(--fs-small);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.nav-toggle:hover {
  background: var(--color-bg);
}

.nav-toggle:focus-visible {
  outline:        2px solid var(--color-blue-aa);
  outline-offset: 2px;
}

/* Backdrop: dims the page content behind the open drawer */
.nav-backdrop {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(27, 31, 36, 0.4);
  z-index:    199;
  /* No animation — respects prefers-reduced-motion via the global rule above */
}

.nav-backdrop.is-open {
  display: block;
}

@media (max-width: 719px) {
  /* Show the hamburger button */
  .nav-toggle {
    display: flex;
  }

  /* Slide-in drawer: covers the right 70% of the screen */
  .site-nav {
    display:        none;
    position:       fixed;
    inset:          0 0 0 30%;          /* drawer anchored to right edge        */
    background:     var(--color-card);
    flex-direction: column;
    padding:        var(--sp-7) var(--sp-5);   /* 64px 32px — room for close button */
    border-left:    1px solid var(--color-border);
    z-index:        200;
    gap:            var(--sp-4);        /* 24px between nav links               */
    font-size:      1.125rem;
    overflow-y:     auto;
    /* Prevent momentum scrolling from bleeding to body on iOS */
    -webkit-overflow-scrolling: touch;
  }

  .site-nav.is-open {
    display: flex;
  }

  /* Restore full-width tap targets in the drawer */
  .site-nav a {
    font-size:   1rem;
    min-height:  44px;
    display:     flex;
    align-items: center;
    padding:     var(--sp-2) 0;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
  }

  .site-nav a:last-child {
    border-bottom: none;
  }
}

/* =============================================================================
   FOOTER — dark tile; deliberate, not a leftover
   The mark's own tile colour (#17191E) belongs here, bookending the page the way
   it bookends the brand everywhere else (the app icon, the favicon). See the
   palette comment at the top for why the REST of the page went light.
   ============================================================================= */

.site-footer {
  background: var(--color-brand-tile);
  color:      var(--color-tile-text);
}

.site-footer .footer-top {
  max-width:             var(--contained-max);
  margin-inline:         auto;
  padding:               var(--sp-7) var(--sp-4) var(--sp-6);   /* 64 24 48 */
  display:               grid;
  gap:                   var(--sp-5);   /* 32px */
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .site-footer .footer-top {
    padding-inline:        var(--sp-5);   /* 32px */
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer-brand .brand {
  color:         var(--color-tile-text);
  margin-bottom: var(--sp-3);   /* 16px */
}

.footer-brand p {
  color:     var(--color-tile-muted);
  max-width: 22rem;
}

.footer-col {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);   /* 8px */
}

.footer-col h3 {
  font-size:     var(--fs-small);
  font-weight:   650;
  color:         var(--color-tile-text);
  margin-bottom: var(--sp-3);   /* 16px */
}

.footer-col a {
  color:     var(--color-tile-muted);
  font-size: var(--fs-small);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--color-tile-text);
}

.footer-bottom {
  border-top:    1px solid var(--color-tile-border);
  max-width:     var(--contained-max);
  margin-inline: auto;
  padding:       var(--sp-4);   /* 24px */
}

@media (min-width: 640px) {
  .footer-bottom { padding-inline: var(--sp-5); }
}

.footer-meta {
  color:     var(--color-tile-muted);
  font-size: var(--fs-small);
}

.footer-warning {
  color:       var(--color-tile-text);
  font-weight: 650;
  margin-top:  var(--sp-3);   /* 16px */
}

/* =============================================================================
   DEVICE-AWARE PRIMARY ACTION — CSS media feature, never a UA sniff
   ============================================================================= */

.send-link, .touch-note, .send-link-fallback { display: none; }

@media (pointer: coarse) {
  .touch-note, .send-link-fallback { display: block; }
  .send-link                       { display: inline-flex; }

  .download-btn {
    background:   transparent;
    color:        var(--color-text);
    border-color: var(--color-border-strong);
  }
  .download-btn:hover {
    border-color: var(--color-text);
    background:   transparent;
  }
}

.touch-note         { margin-bottom: var(--sp-3); }   /* 16px */
.send-link-fallback {
  color:      var(--color-muted);
  font-size:  var(--fs-small);
  margin-top: var(--sp-2);   /* 8px */
}

/* =============================================================================
   TOUCH TARGETS — 44px minimum (WCAG 2.5.5)
   ============================================================================= */

@media (pointer: coarse) {
  .btn, .header-cta { min-height: 44px; }

  .site-nav a {
    min-height:  44px;
    display:     inline-flex;
    align-items: center;
  }

  .inline-link {
    display: inline-block;
    padding: 0.3em 0.15em;
    margin:  -0.3em -0.15em;
  }
}

/* =============================================================================
   HERO
   ============================================================================= */

.hero-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--sp-6);   /* 48px */
  align-items:           center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap:                   var(--sp-7);   /* 64px */
  }
}

.hero-copy .btn  { margin-bottom: var(--sp-3); }   /* 16px */
.hero-copy .meta { margin-bottom: var(--sp-4); }   /* 24px */

.hero-shot {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

.shot-frame {
  position:  relative;
  width:     100%;
  max-width: 22rem;
}

@media (min-width: 900px) {
  .shot-frame { width: 22rem; }
}

.shot-frame img {
  display:       block;
  width:         100%;
  height:        auto;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);   /* round 6: hero frame gets --radius-lg */
}

.shot-frame .callouts {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  pointer-events: none;
}

.callout-label {
  position:      absolute;
  max-width:     9rem;
  font-size:     var(--fs-small);
  color:         var(--color-text);
  background:    var(--color-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       var(--sp-2) var(--sp-3);   /* 8px 16px */
  line-height:   1.3;
}

.hero-shot figcaption {
  margin-top: var(--sp-3);   /* 16px */
  color:      var(--color-muted);
  font-size:  var(--fs-small);
  text-align: center;
}

/* ── HERO KICKER — round 6 addition ─────────────────────────────────────── */
/*
  The hero is the one section that was missing a kicker. This goes above h1.
  Brand colour (#2BD16B) at kicker scale — one accent per view, rules intact.
*/
.hero-kicker {
  display:        inline-block;
  font-size:      var(--fs-kicker);
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-brand);
  margin-bottom:  var(--sp-3);   /* 16px */
}

/* =============================================================================
   TRUST BAR & TRUST PILLS — round 6 addition
   A horizontal strip of trust signals (FREE · NO INSTALL · NO ACCOUNT · etc.)
   placed in the hero section below the main CTA buttons.
   ============================================================================= */

.trust-bar {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--sp-2);   /* 8px */
  margin-top: var(--sp-4);   /* 24px */
}

.trust-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-size:      var(--fs-kicker);
  font-weight:    600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color:          var(--color-muted);
  background:     var(--color-bg);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-sm);   /* pill uses small radius */
  padding:        4px 10px;
  white-space:    nowrap;
}

.trust-pill svg {
  width:  12px;
  height: 12px;
  flex-shrink: 0;
}

/* =============================================================================
   STATS / SOCIAL-PROOF BAR — round 6 addition
   A row of key metrics (sessions, rating, countries, etc.) for the homepage.
   ============================================================================= */

.stats-bar {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--sp-3) var(--sp-5);   /* 16px 32px */
  padding:               var(--sp-5) 0;             /* 32px */
  border-top:            1px solid var(--color-border);
  border-bottom:         1px solid var(--color-border);
  margin-block:          var(--sp-6);               /* 48px */
}

@media (min-width: 640px) {
  .stats-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-1);   /* 4px */
}

.stat-item__value {
  font-size:      var(--fs-h2);
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--color-text);
  line-height:    1.1;
}

.stat-item__label {
  font-size:  var(--fs-kicker);
  color:      var(--color-muted);
  font-weight: 500;
}

/* =============================================================================
   VERSION BADGE — round 6 addition
   Inline version chip linked to the changelog; shown near the hero CTA.
   ============================================================================= */

.version-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-2);       /* 8px */
  font-size:       var(--fs-kicker);
  font-weight:     600;
  color:           var(--color-blue-aa);
  background:      #E8F0FD;
  border-radius:   var(--radius-sm);  /* small radius */
  padding:         3px 10px;
  text-decoration: none;
  white-space:     nowrap;
}

.version-badge:hover {
  background: #D2E3FC;
}

.version-badge:focus-visible {
  outline:        2px solid var(--color-blue-aa);
  outline-offset: 2px;
}

/* =============================================================================
   BADGE & TAG — round 6 addition
   Generic pill-shaped labelling components for status, categories, file types.
   ============================================================================= */

.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  font-size:      var(--fs-kicker);
  font-weight:    600;
  letter-spacing: 0.03em;
  border-radius:  var(--radius-sm);
  padding:        2px 8px;
  white-space:    nowrap;
  vertical-align: middle;
}

/* Badge colour variants */
.badge-green  { background: #E6F9EE; color: #1A7040; }
.badge-blue   { background: #E8F0FD; color: var(--color-blue-aa); }
.badge-amber  { background: #FFF3CD; color: #805E00; }
.badge-red    { background: #FDE8E8; color: #9B1C1C; }
.badge-neutral { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }

/* Tag: slightly larger than badge, used for categories / file types */
.tag {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-size:      var(--fs-small);
  font-weight:    500;
  border-radius:  var(--radius-sm);
  padding:        4px 12px;
  white-space:    nowrap;
  background:     var(--color-bg);
  color:          var(--color-muted);
  border:         1px solid var(--color-border);
}

.tag:hover {
  border-color:   var(--color-border-strong);
  color:          var(--color-text);
}

/* =============================================================================
   DOWNLOAD CARD / FILE-CHOICE COMPONENT — round 6 addition
   Replaces the old plain button + two meta lines. Supports EXE vs MSI
   side-by-side on the Download page with primary/secondary visual weighting.
   ============================================================================= */

.download-options {
  display:        grid;
  grid-template-columns: 1fr;
  gap:            var(--sp-3);   /* 16px */
  margin-top:     var(--sp-4);   /* 24px */
}

@media (min-width: 640px) {
  .download-options {
    grid-template-columns: 1fr 1fr;
  }
}

/* Base card */
.download-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);          /* 8px */
  background:     var(--color-card);
  border:         1.5px solid var(--color-border);
  border-radius:  var(--radius);
  padding:        var(--sp-4);          /* 24px */
  text-decoration: none;
  transition:     border-color 0.15s, box-shadow 0.15s;
  cursor:         pointer;
}

.download-card:hover {
  border-color: var(--color-blue);
  box-shadow:   0 0 0 3px rgba(26, 115, 232, 0.12);
}

.download-card:focus-visible {
  outline:        2px solid var(--color-blue-aa);
  outline-offset: 2px;
  border-radius:  var(--radius);
}

/* Primary variant — the recommended / direct EXE download */
.download-card.is-primary {
  border-color: var(--color-blue);
  background:   #F0F6FF;
}

.download-card.is-primary:hover {
  border-color: var(--color-blue-aa);
  box-shadow:   0 0 0 3px rgba(26, 115, 232, 0.18);
}

/* Card sub-elements */
.download-card__label {
  font-size:      var(--fs-kicker);
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-blue-aa);
}

.download-card__name {
  font-size:   1.125rem;
  font-weight: 650;
  color:       var(--color-text);
  line-height: 1.3;
}

.download-card__meta {
  font-size:   var(--fs-small);
  color:       var(--color-muted);
  line-height: 1.5;
}

/*
  Hash block — monospace rendering of the SHA-256 / SHA-1 checksum.
  Intentionally reads as a technical trust signal, not decorative.
*/
.download-card__hash {
  font-family:  'Courier New', monospace;
  font-size:    0.75rem;
  color:        var(--color-muted);
  background:   var(--color-bg);
  padding:      3px 6px;
  border-radius: 4px;
  word-break:   break-all;
  margin-top:   var(--sp-1);   /* 4px */
  line-height:  1.5;
  user-select:  all;           /* one click selects the whole hash */
}

/* Recommended badge inside a primary download card */
.download-card__recommended {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  font-size:      var(--fs-kicker);
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          #1A7040;
  background:     #E6F9EE;
  border-radius:  var(--radius-sm);
  padding:        2px 8px;
  margin-bottom:  var(--sp-1);
  width:          fit-content;
}

/* =============================================================================
   WARNING BAND — round 6 addition
   Red left-border callout for scam warnings, security notices, and cautions.
   DISTINCT from .band-amber (which is reserved for LIVE-session state).
   ============================================================================= */

.warning-band {
  display:       flex;
  gap:           var(--sp-4);      /* 24px */
  align-items:   flex-start;
  border-left:   4px solid #C5221F;
  background:    #FFF5F5;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding:       var(--sp-4) var(--sp-5);   /* 24px 32px */
}

.warning-band__icon {
  color:       #C5221F;
  flex-shrink: 0;
  margin-top:  0.15em;   /* optical alignment with first line of text */
}

.warning-band__icon svg {
  width:  1.25rem;
  height: 1.25rem;
}

.warning-band__body {
  flex:        1;
  font-size:   var(--fs-body);
  line-height: 1.6;
  color:       var(--color-text);
}

.warning-band__body strong {
  color: #9B1C1C;
}

/* =============================================================================
   STEPS — numbered process sequence
   ============================================================================= */

ol.steps { list-style: none; }

ol.steps li {
  display:               grid;
  grid-template-columns: 2.5rem 1fr;
  gap:                   var(--sp-4);   /* 24px */
  padding:               var(--sp-4) 0;
  border-bottom:         1px solid var(--color-border);
}

ol.steps li:last-child { border-bottom: none; }

/*
  Step numerals use --color-muted: --color-border-strong (#A9B1BC on white)
  was 2.16:1 — fails even the 3:1 large-text floor.
  --color-muted (#606266) is 5.05:1 — the palette's existing "secondary but
  legible" token.
*/
ol.steps .num {
  font-size:   var(--fs-h3);
  font-weight: 700;
  color:       var(--color-muted);
  line-height: 1.4;
}

/* =============================================================================
   IMPROVED STEP INDICATORS (VISUAL) — round 6 addition
   Visual timeline-style steps with connecting line, used on "How it works".
   ============================================================================= */

.steps-visual {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.steps-visual__item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap:     var(--sp-4);   /* 24px */
  position: relative;
}

/* Connecting vertical line between dots */
.steps-visual__item:not(:last-child)::before {
  content:    '';
  position:   absolute;
  left:       calc(1rem - 1px);   /* centre under the dot */
  top:        2rem;
  bottom:     0;
  width:      2px;
  background: var(--color-border);
}

.step-dot {
  position:    relative;
  z-index:     1;
  width:       2rem;
  height:      2rem;
  border:      2px solid var(--color-border);
  border-radius: 50%;
  background:  var(--color-card);
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   var(--fs-kicker);
  font-weight: 700;
  color:       var(--color-muted);
  flex-shrink: 0;
}

/* Active step: brand fill, white numeral */
.step-dot.is-active {
  background:   var(--color-brand);
  border-color: var(--color-brand);
  color:        #FFFFFF;
}

/* Completed step: check mark, muted fill */
.step-dot.is-done {
  background:   var(--color-bg);
  border-color: var(--color-border-strong);
  color:        var(--color-muted);
}

.steps-visual__content {
  padding-bottom: var(--sp-5);   /* 32px spacing between steps */
}

.steps-visual__content h3 {
  font-size:   var(--fs-h3);
  font-weight: 650;
  margin-bottom: var(--sp-2);
}

.steps-visual__content p {
  font-size: var(--fs-body);
  color:     var(--color-muted);
}

/* =============================================================================
   WARNING & QUOTE BLOCKS
   ============================================================================= */

/* Anti-scam callout — wording locked in CLAUDE.md; do not rewrite */
.scam {
  background:    var(--color-bg);
  border-left:   4px solid var(--color-text);
  border-radius: var(--radius);
  padding:       var(--sp-4);   /* 24px */
  line-height:   1.5;
}

.scam-inline {
  background:    var(--color-bg);
  border-left:   4px solid var(--color-text);
  border-radius: var(--radius);
  padding:       var(--sp-4);   /* 24px */
}

/* Depicted Windows/browser dialog boxes */
.quote {
  background:    var(--color-bg);
  border-left:   4px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding:       var(--sp-3) var(--sp-4);   /* 16px 24px */
  line-height:   1.5;
}

/* Simulated Windows buttons rendered inside .quote blocks */
.btn-dark,
.btn-pale {
  display:       inline-block;
  padding:       0.15rem 0.7rem;
  font-size:     0.95rem;
  margin-top:    var(--sp-2);   /* 8px */
  white-space:   nowrap;
  border-radius: var(--radius-sm);   /* round 6: small radius on these pill buttons */
}
.btn-dark { background: #1A73E8; color: #FFFFFF; }
.btn-pale {
  background:   transparent;
  color:        var(--color-text);
  border:       1px solid var(--color-border-strong);
}

/* Link-styled text inside quoted dialogs */
.link-look {
  color:           var(--color-muted);
  text-decoration: underline;
}

/* =============================================================================
   FAQ ANCHOR NAV — round 6 addition
   Jump-to-section links at the top of the FAQ / Help page.
   ============================================================================= */

.faq-nav {
  display:       flex;
  gap:           var(--sp-3);    /* 16px */
  flex-wrap:     wrap;
  margin-bottom: var(--sp-6);   /* 48px */
}

.faq-nav a {
  font-size:       var(--fs-small);
  font-weight:     600;
  color:           var(--color-blue-aa);
  text-decoration: none;
  border-bottom:   2px solid transparent;
  padding-bottom:  2px;
  transition:      border-color 0.12s;
}

.faq-nav a:hover,
.faq-nav a:focus-visible {
  border-bottom-color: var(--color-blue-aa);
}

.faq-nav a:focus-visible {
  outline:        2px solid var(--color-blue-aa);
  outline-offset: 2px;
}

/* =============================================================================
   COMPARISON TABLE — round 6 addition
   Used on the homepage or Download page for FlashDesk vs alternatives.
   ============================================================================= */

.comparison-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--fs-small);
}

.comparison-table th,
.comparison-table td {
  padding:      var(--sp-3) var(--sp-4);   /* 16px 24px */
  border-bottom: 1px solid var(--color-border);
  text-align:   left;
  vertical-align: middle;
}

.comparison-table th {
  font-weight: 650;
  color:       var(--color-text);
  font-size:   var(--fs-kicker);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background:  var(--color-bg);
}

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

/* FlashDesk column receives a tinted highlight */
.comparison-table .col-flashdesk {
  background:  #F0F6FF;
  font-weight: 600;
}

/* Check mark cells */
.comparison-table .check {
  color:       var(--color-brand);
  font-weight: 700;
  font-size:   1.1rem;
}

/* Cross / not-available cells */
.comparison-table .cross {
  color:       var(--color-muted);
  font-size:   1.1rem;
}

/* Responsive: allow horizontal scroll on narrow screens */
.comparison-table-wrap {
  overflow-x:          auto;
  -webkit-overflow-scrolling: touch;
  border:              1px solid var(--color-border);
  border-radius:       var(--radius);
  margin-block:        var(--sp-4);
}

.comparison-table-wrap .comparison-table th:first-child,
.comparison-table-wrap .comparison-table td:first-child {
  min-width: 12rem;
}

/* =============================================================================
   CHANGELOG / VERSION TIMELINE — round 6 addition
   Used on the Changelog page. A left-bordered timeline with version dots.
   ============================================================================= */

.release-list {
  list-style: none;
  padding:    0;
}

.release-item {
  display:    grid;
  grid-template-columns: 7rem 1fr;
  gap:        var(--sp-4);        /* 24px */
  border-left: 2px solid var(--color-border);
  padding:    0 0 var(--sp-6) var(--sp-5);   /* bottom 48px, left 32px */
  position:   relative;
}

/* Timeline dot */
.release-item::before {
  content:    '';
  position:   absolute;
  left:       -5px;
  top:        6px;
  width:      8px;
  height:     8px;
  background: var(--color-blue);
  border:     2px solid var(--color-card);
  border-radius: 50%;
}

/* Latest release: brand-coloured dot */
.release-item.is-latest::before {
  background: var(--color-brand);
  width:      10px;
  height:     10px;
  left:       -6px;
  top:        5px;
}

.release-item:last-child {
  border-left-color: transparent;
  padding-bottom:    0;
}

.release-item__date {
  font-size:   var(--fs-small);
  color:       var(--color-muted);
  font-weight: 600;
  padding-top: 2px;
  line-height: 1.4;
}

.release-item__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);   /* 8px */
}

.release-item__version {
  display:        inline-flex;
  align-items:    center;
  font-size:      var(--fs-kicker);
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-blue-aa);
  margin-bottom:  var(--sp-2);   /* 8px */
}

.release-item__title {
  font-size:   var(--fs-h3);
  font-weight: 650;
  color:       var(--color-text);
  line-height: 1.3;
}

.release-item__notes {
  font-size:   var(--fs-body);
  color:       var(--color-muted);
  line-height: 1.6;
}

/* Changelog change-type tags: NEW / FIX / IMPROVED / SECURITY */
.release-item__tag {
  display:        inline-flex;
  align-items:    center;
  font-size:      0.6875rem;   /* 11px */
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius:  var(--radius-sm);
  padding:        1px 6px;
  white-space:    nowrap;
  vertical-align: middle;
  margin-right:   4px;
}

.release-item__tag--new      { background: #E6F9EE; color: #1A7040; }
.release-item__tag--fix      { background: #FDE8E8; color: #9B1C1C; }
.release-item__tag--improved { background: #E8F0FD; color: var(--color-blue-aa); }
.release-item__tag--security { background: #FFF3CD; color: #805E00; }

/* Mobile: stack date above body on narrow screens */
@media (max-width: 540px) {
  .release-item {
    grid-template-columns: 1fr;
  }

  .release-item__date {
    padding-top: 0;
  }
}

/* =============================================================================
   UTILITIES
   ============================================================================= */

/*
  .mt-4 and .mt-6 retain the same pixel values they had in round 4 so existing
  HTML (e.g. class="grid cols-3 mt-6") renders identically without any markup
  changes.  .mt-4 was var(--sp-4)=32px before; round-5 --sp-4=24px, so we now
  map to --sp-5 (32px).  .mt-6 was 64px; now mapped to --sp-7 (64px).
*/
.mt-1 { margin-top: var(--sp-1); }   /*  4px */
.mt-2 { margin-top: var(--sp-2); }   /*  8px */
.mt-3 { margin-top: var(--sp-3); }   /* 16px */
.mt-4 { margin-top: var(--sp-5); }   /* 32px — backward-compat: was --sp-4 */
.mt-5 { margin-top: var(--sp-6); }   /* 48px */
.mt-6 { margin-top: var(--sp-7); }   /* 64px — backward-compat: was --sp-6 */

.text-center { text-align: center;        }
.text-muted  { color: var(--color-muted); }

/* =============================================================================
   REDESIGN ADDITIONS — round 7 (2026-09-21)
   All new — zero modifications to any existing rule above.
   Inspired by AnyDesk (professional shadows, trust bar) and RustDesk (dark gradient
   hero, coloured icon tiles, feature card elevation).
   ============================================================================= */

/* ── GRADIENT HERO WRAP ──────────────────────────────────────────────────── */
/*
  Applied to a hero <section> that sits on a dark-gradient background.
  The brand-tile-to-green-tinted-dark gradient echoes the app's own BrandTile dark
  and keeps the visual language unified between the exe and the marketing page.
*/
.hero-gradient-wrap {
  background: linear-gradient(155deg, #17191E 0%, #1A231D 55%, #1C2B1E 100%);
  color: #ECEFF3;
  position: relative;
}
.hero-gradient-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 75% 40%, rgba(43,209,107,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-gradient-wrap h1 { color: #FFFFFF; }
.hero-gradient-wrap .hero-kicker { color: #2BD16B; letter-spacing: 0.04em; }
.hero-gradient-wrap .hero-lead { color: rgba(236,239,243,0.80); }
.hero-gradient-wrap p { color: rgba(236,239,243,0.75); }
.hero-gradient-wrap .btn-green {
  background: #2BD16B;
  color: #17191E;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(43,209,107,0.38);
  transition: background 180ms, box-shadow 180ms, transform 150ms;
}
.hero-gradient-wrap .btn-green:hover {
  background: #23B860;
  box-shadow: 0 6px 28px rgba(43,209,107,0.50);
  transform: translateY(-1px);
}
.hero-gradient-wrap .btn-ghost {
  border-color: rgba(236,239,243,0.40);
  color: #ECEFF3;
}
.hero-gradient-wrap .btn-ghost:hover {
  border-color: #ECEFF3;
  background: rgba(236,239,243,0.08);
}

/* ── HERO VISUAL UPGRADE ─────────────────────────────────────────────────────
   Dot-grid texture, stronger dual-radial glow, floating screenshot,
   frosted-glass download cards, always-light callout labels, h1 accent.
   All rules are scoped to .hero-gradient-wrap — zero bleed to other sections.
   ────────────────────────────────────────────────────────────────────────── */

/* Darker, more dramatic base gradient */
.hero-gradient-wrap {
  background: linear-gradient(145deg, #0D0F12 0%, #121A14 45%, #0F1A12 100%);
}

/* Dot-grid texture overlay — 28 px pitch, 5.5 % white dots */
.hero-gradient-wrap::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size:  28px 28px;
  pointer-events:   none;
}

/* Dual-radial glow: green spotlight behind screenshot + faint blue bottom-left */
.hero-gradient-wrap::after {
  background:
    radial-gradient(ellipse 58% 70% at 82% 28%, rgba(43,209,107,0.18) 0%, transparent 62%),
    radial-gradient(ellipse 40% 55% at 10% 90%, rgba(26,115,232,0.07) 0%, transparent 55%);
}

/* Lift hero content above the pseudo-element layers */
.hero-gradient-wrap > .contained { position: relative; z-index: 1; }

/* Circuit-node decorative SVG — positioned behind content on desktop */
.hero-deco-svg {
  position:       absolute;
  top:            0;
  right:          0;
  width:          55%;
  max-width:      560px;
  height:         100%;
  pointer-events: none;
  z-index:        0;
}
@media (max-width: 899px) { .hero-deco-svg { display: none; } }

/* Screenshot: floating elevation + ambient green glow ring */
.hero-gradient-wrap .shot-frame img {
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 8px 32px  rgba(0,0,0,0.45),
    0 32px 80px rgba(0,0,0,0.55),
    0 0 70px    rgba(43,209,107,0.12);
}

/* Callout labels: force light background regardless of OS colour scheme */
.hero-gradient-wrap .callout-label {
  background:   rgba(255,255,255,0.96);
  border-color: rgba(0,0,0,0.07);
  color:        #1B1F24;
  box-shadow:   0 4px 18px rgba(0,0,0,0.28);
}

/* h1 accent word */
.hero-accent { color: #2BD16B; }

/* Download cards: frosted-glass on dark hero */
.hero-gradient-wrap .download-card {
  background:   rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.11);
}
.hero-gradient-wrap .download-card.is-primary {
  background:   rgba(21,88,176,0.22);
  border-color: rgba(74,150,230,0.44);
  box-shadow:   0 0 0 3px rgba(21,88,176,0.08);
}
.hero-gradient-wrap .download-card__filename { color: #FFFFFF; }
.hero-gradient-wrap .download-card__pill {
  background:   rgba(255,255,255,0.10);
  color:        rgba(236,239,243,0.85);
  border-color: rgba(255,255,255,0.14);
}
.hero-gradient-wrap .is-primary .download-card__pill {
  background: rgba(21,88,176,0.55);
  color:      #FFFFFF;
}
.hero-gradient-wrap .download-card__btn {
  background:   rgba(255,255,255,0.09);
  color:        #ECEFF3;
  border-color: rgba(255,255,255,0.18);
}
.hero-gradient-wrap .download-card__btn:hover        { background: rgba(255,255,255,0.15); transform: translateY(-1px); }
.hero-gradient-wrap .is-primary .download-card__btn  { background: #1558B0; color: #FFFFFF; border-color: transparent; }
.hero-gradient-wrap .is-primary .download-card__btn:hover { background: #0F4A99; }
/* Secondary (non-primary) button — beats inline <style> [0,3,0] with [0,4,0] specificity */
.hero-gradient-wrap .download-card:not(.is-primary) .download-card__btn {
  background:   rgba(255,255,255,0.10);
  color:        #ECEFF3;
  border-color: rgba(255,255,255,0.28);
}
.hero-gradient-wrap .download-card:not(.is-primary) .download-card__btn:hover {
  background:   rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.45);
  transform:    translateY(-1px);
}
.hero-gradient-wrap .download-card__meta,
.hero-gradient-wrap .download-card__sub,
.hero-gradient-wrap .download-card__note,
.hero-gradient-wrap .download-card__hash             { color: rgba(236,239,243,0.58); }
.hero-gradient-wrap .download-card__hash a,
.hero-gradient-wrap .download-card__note a           { color: rgba(236,239,243,0.62); }

/* Verify / SHA block on dark hero */
.hero-gradient-wrap .verify-block summary   { color: rgba(236,239,243,0.70); }
.hero-gradient-wrap .verify-block[open]     { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); }
.hero-gradient-wrap .verify-block__code     { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.09); color: #ECEFF3; }
.hero-gradient-wrap .verify-block summary::before { color: rgba(236,239,243,0.60); }

/* ── TRUST STRIP ─────────────────────────────────────────────────────────── */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  background: #F0F2F5;
  border-top: 1px solid #E2E6EC;
  border-bottom: 1px solid #E2E6EC;
  padding: 0 24px;
  list-style: none;
}
.trust-strip__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1B1F24;
  border-right: 1px solid #C6CCD4;
  white-space: nowrap;
}
.trust-strip__item:last-child { border-right: none; }
.trust-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2BD16B;
  flex-shrink: 0;
  display: inline-block;
}
@media (max-width: 600px) {
  .trust-strip { flex-direction: column; align-items: center; padding: 0; }
  .trust-strip__item {
    border-right: none;
    border-bottom: 1px solid #C6CCD4;
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
  }
  .trust-strip__item:last-child { border-bottom: none; }
}

/* ── FEATURE ICON TILE ───────────────────────────────────────────────────── */
/*
  40×40 rounded-square icon tile — the RustDesk pattern: each feature gets a
  small coloured tile before its heading so the grid reads as icons not bullets.
*/
.feature-icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2BD16B 0%, #1CA352 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 1;
  user-select: none;
}
.feature-icon-tile--blue {
  background: linear-gradient(135deg, #1A73E8 0%, #0D5FC4 100%);
}
.feature-icon-tile--amber {
  background: linear-gradient(135deg, #F4B400 0%, #D09900 100%);
}
.feature-icon-tile--red {
  background: linear-gradient(135deg, #C5221F 0%, #8F1815 100%);
}

/* ── ELEVATED CARD ───────────────────────────────────────────────────────── */
/*
  The AnyDesk pattern: white cards that visually sit off the page surface.
  Used by adding class="card--elevated" to any existing .card or feature card.
*/
.card--elevated {
  background: #FFFFFF;
  border: 1px solid #C6CCD4;
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(27,31,36,0.06),
    0 4px 12px rgba(27,31,36,0.07),
    0 12px 32px rgba(27,31,36,0.04);
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.card--elevated:hover {
  box-shadow:
    0 2px 6px rgba(27,31,36,0.08),
    0 8px 24px rgba(27,31,36,0.10),
    0 20px 48px rgba(27,31,36,0.06);
  transform: translateY(-2px);
}

/* ── GRADIENT CTA BAND ───────────────────────────────────────────────────── */
.cta-band--gradient {
  background: linear-gradient(135deg, #17191E 0%, #1C2B24 100%);
  color: #ECEFF3;
  text-align: center;
}
.cta-band--gradient h2 { color: #FFFFFF; }
.cta-band--gradient p { color: rgba(236,239,243,0.75); max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-band--gradient .btn-green {
  background: #2BD16B;
  color: #17191E;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(43,209,107,0.35);
}
.cta-band--gradient .btn-green:hover {
  background: #23B860;
  box-shadow: 0 6px 28px rgba(43,209,107,0.48);
  transform: translateY(-1px);
}

/* ── GRADIENT BLUE BUTTON ────────────────────────────────────────────────── */
.btn-blue-gradient {
  background: linear-gradient(180deg, #2B8EFF 0%, #1A73E8 50%, #1260C4 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(26,115,232,0.30);
  transition: box-shadow 200ms, transform 150ms;
  white-space: nowrap;
}
.btn-blue-gradient:hover {
  box-shadow: 0 4px 18px rgba(26,115,232,0.46);
  transform: translateY(-1px);
}
.btn-blue-gradient:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(26,115,232,0.20);
}
.btn-blue-gradient:focus-visible {
  outline: 3px solid var(--color-blue-aa);
  outline-offset: 3px;
}

/* ── DOWNLOAD CARD VARIANTS ──────────────────────────────────────────────── */
.download-card--primary {
  border: 2px solid #1A73E8;
  border-radius: 16px;
  background: linear-gradient(160deg, #F5F8FF 0%, #FFFFFF 100%);
  box-shadow: 0 4px 20px rgba(26,115,232,0.12);
}
.download-card--secondary {
  border: 1px solid #C6CCD4;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(27,31,36,0.06);
}

/* ── SECTION TINT VARIANTS ───────────────────────────────────────────────── */
.section--tinted        { background: #F0F7F3; } /* soft brand-green tint */
.section--feature-bg    { background: linear-gradient(180deg, #F5F6F8 0%, #EDF7F3 100%); }
.section--dark-tile {
  background: #17191E;
  color: #ECEFF3;
}
.section--dark-tile h2,
.section--dark-tile h3 { color: #FFFFFF; }
.section--dark-tile p { color: rgba(236,239,243,0.75); }

/* =============================================================================
   ICON CHIP COLOUR SYSTEM — Round 7 (2026-09-21)

   Architecture: the chip container (.feature-card__icon / .icon-tile) handles
   ALL appearance — gradient, border, colour, shadow, hover lift.  The SVG
   inside is a pure 24×24 stroke glyph that picks up colour via currentColor.
   Two tokens get a semantic hardcoded colour inside their SVG symbol:
     • i-band  → amber band (#F4B400) — always amber, never theme-relative
     • i-file-check → checkmark (#2BD16B) — always brand-green (confirmed/safe)

   Colour variant classes apply to BOTH .feature-card__icon and .icon-tile so
   the same design language covers every icon instance site-wide.
   ============================================================================= */

/* ── Light mode colour variants ──────────────────────────────────────────── */

.icon-tile--green,
.feature-card__icon--green {
  background:   linear-gradient(145deg, #E6F9EE 0%, #CDEEDA 100%);
  border-color: #A3E6C0;
  color:        #15683A;
  box-shadow:   0 1px 4px rgba(43,209,107,0.15);
}
.icon-tile--blue,
.feature-card__icon--blue {
  background:   linear-gradient(145deg, #EBF3FD 0%, #D5E8FA 100%);
  border-color: #BFDBFE;
  color:        #1558B0;
  box-shadow:   0 1px 4px rgba(26,115,232,0.14);
}
.icon-tile--amber,
.feature-card__icon--amber {
  background:   linear-gradient(145deg, #FFFBEB 0%, #FDE68A 100%);
  border-color: #FCD34D;
  color:        #92400E;
  box-shadow:   0 1px 4px rgba(244,180,0,0.18);
}
.icon-tile--purple,
.feature-card__icon--purple {
  background:   linear-gradient(145deg, #F3E8FF 0%, #E9D5FF 100%);
  border-color: #DDD6FE;
  color:        #6D28D9;
  box-shadow:   0 1px 4px rgba(109,40,217,0.10);
}
.icon-tile--teal,
.feature-card__icon--teal {
  background:   linear-gradient(145deg, #CCFBF1 0%, #99F6E4 100%);
  border-color: #5EEAD4;
  color:        #0F766E;
  box-shadow:   0 1px 4px rgba(15,118,110,0.12);
}
.icon-tile--red,
.feature-card__icon--red {
  background:   linear-gradient(145deg, #FEE2E2 0%, #FECACA 100%);
  border-color: #FCA5A5;
  color:        #991B1B;
  box-shadow:   0 1px 4px rgba(185,28,28,0.10);
}
.icon-tile--neutral,
.feature-card__icon--neutral {
  background:   linear-gradient(145deg, #F5F6F8 0%, #E8EBF0 100%);
  border-color: #C6CCD4;
  color:        #4B5563;
  box-shadow:   0 1px 3px rgba(27,31,36,0.08);
}

/* ── Dark mode colour variants — system preference ───────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-tile--green,
  :root:not([data-theme="light"]) .feature-card__icon--green {
    background: linear-gradient(145deg, rgba(43,209,107,0.15) 0%, rgba(43,209,107,0.07) 100%);
    border-color: rgba(43,209,107,0.22); color: #4FD98A;
    box-shadow: 0 1px 4px rgba(43,209,107,0.18);
  }
  :root:not([data-theme="light"]) .icon-tile--blue,
  :root:not([data-theme="light"]) .feature-card__icon--blue {
    background: linear-gradient(145deg, rgba(26,115,232,0.15) 0%, rgba(26,115,232,0.07) 100%);
    border-color: rgba(91,156,246,0.25); color: #5B9CF6;
    box-shadow: 0 1px 4px rgba(26,115,232,0.18);
  }
  :root:not([data-theme="light"]) .icon-tile--amber,
  :root:not([data-theme="light"]) .feature-card__icon--amber {
    background: linear-gradient(145deg, rgba(244,180,0,0.15) 0%, rgba(244,180,0,0.07) 100%);
    border-color: rgba(244,180,0,0.22); color: #FCD34D;
    box-shadow: 0 1px 4px rgba(244,180,0,0.18);
  }
  :root:not([data-theme="light"]) .icon-tile--purple,
  :root:not([data-theme="light"]) .feature-card__icon--purple {
    background: linear-gradient(145deg, rgba(139,92,246,0.15) 0%, rgba(139,92,246,0.07) 100%);
    border-color: rgba(167,139,250,0.22); color: #A78BFA;
    box-shadow: 0 1px 4px rgba(139,92,246,0.15);
  }
  :root:not([data-theme="light"]) .icon-tile--teal,
  :root:not([data-theme="light"]) .feature-card__icon--teal {
    background: linear-gradient(145deg, rgba(15,118,110,0.15) 0%, rgba(15,118,110,0.07) 100%);
    border-color: rgba(45,212,191,0.22); color: #2DD4BF;
    box-shadow: 0 1px 4px rgba(15,118,110,0.15);
  }
  :root:not([data-theme="light"]) .icon-tile--red,
  :root:not([data-theme="light"]) .feature-card__icon--red {
    background: linear-gradient(145deg, rgba(185,28,28,0.15) 0%, rgba(185,28,28,0.07) 100%);
    border-color: rgba(248,113,113,0.22); color: #F87171;
    box-shadow: 0 1px 4px rgba(185,28,28,0.15);
  }
  :root:not([data-theme="light"]) .icon-tile--neutral,
  :root:not([data-theme="light"]) .feature-card__icon--neutral {
    background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border-color: var(--color-border); color: var(--color-muted); box-shadow: none;
  }
}

/* ── Dark mode colour variants — explicit [data-theme="dark"] ────────────── */

:root[data-theme="dark"] .icon-tile--green,
:root[data-theme="dark"] .feature-card__icon--green {
  background: linear-gradient(145deg, rgba(43,209,107,0.15) 0%, rgba(43,209,107,0.07) 100%);
  border-color: rgba(43,209,107,0.22); color: #4FD98A;
  box-shadow: 0 1px 4px rgba(43,209,107,0.18);
}
:root[data-theme="dark"] .icon-tile--blue,
:root[data-theme="dark"] .feature-card__icon--blue {
  background: linear-gradient(145deg, rgba(26,115,232,0.15) 0%, rgba(26,115,232,0.07) 100%);
  border-color: rgba(91,156,246,0.25); color: #5B9CF6;
  box-shadow: 0 1px 4px rgba(26,115,232,0.18);
}
:root[data-theme="dark"] .icon-tile--amber,
:root[data-theme="dark"] .feature-card__icon--amber {
  background: linear-gradient(145deg, rgba(244,180,0,0.15) 0%, rgba(244,180,0,0.07) 100%);
  border-color: rgba(244,180,0,0.22); color: #FCD34D;
  box-shadow: 0 1px 4px rgba(244,180,0,0.18);
}
:root[data-theme="dark"] .icon-tile--purple,
:root[data-theme="dark"] .feature-card__icon--purple {
  background: linear-gradient(145deg, rgba(139,92,246,0.15) 0%, rgba(139,92,246,0.07) 100%);
  border-color: rgba(167,139,250,0.22); color: #A78BFA;
  box-shadow: 0 1px 4px rgba(139,92,246,0.15);
}
:root[data-theme="dark"] .icon-tile--teal,
:root[data-theme="dark"] .feature-card__icon--teal {
  background: linear-gradient(145deg, rgba(15,118,110,0.15) 0%, rgba(15,118,110,0.07) 100%);
  border-color: rgba(45,212,191,0.22); color: #2DD4BF;
  box-shadow: 0 1px 4px rgba(15,118,110,0.15);
}
:root[data-theme="dark"] .icon-tile--red,
:root[data-theme="dark"] .feature-card__icon--red {
  background: linear-gradient(145deg, rgba(185,28,28,0.15) 0%, rgba(185,28,28,0.07) 100%);
  border-color: rgba(248,113,113,0.22); color: #F87171;
  box-shadow: 0 1px 4px rgba(185,28,28,0.15);
}
:root[data-theme="dark"] .icon-tile--neutral,
:root[data-theme="dark"] .feature-card__icon--neutral {
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border-color: var(--color-border); color: var(--color-muted); box-shadow: none;
}

/* ── Hover lift — triggered by parent card ───────────────────────────────── */

.feature-card:hover .feature-card__icon,
.card:hover .icon-tile {
  transform:  translateY(-2px) scale(1.06);
  box-shadow: 0 6px 22px rgba(0,0,0,0.13);
}

/* Colour-matched hover glow */
.feature-card:hover .feature-card__icon--green,
.card:hover .icon-tile--green  { box-shadow: 0 6px 22px rgba(43,209,107,0.28); }
.feature-card:hover .feature-card__icon--blue,
.card:hover .icon-tile--blue   { box-shadow: 0 6px 22px rgba(26,115,232,0.24); }
.feature-card:hover .feature-card__icon--amber,
.card:hover .icon-tile--amber  { box-shadow: 0 6px 22px rgba(244,180,0,0.30); }
.feature-card:hover .feature-card__icon--purple,
.card:hover .icon-tile--purple { box-shadow: 0 6px 22px rgba(109,40,217,0.22); }
.feature-card:hover .feature-card__icon--teal,
.card:hover .icon-tile--teal   { box-shadow: 0 6px 22px rgba(15,118,110,0.24); }
.feature-card:hover .feature-card__icon--red,
.card:hover .icon-tile--red    { box-shadow: 0 6px 22px rgba(185,28,28,0.22); }

/* Reduced-motion hard stop */
@media (prefers-reduced-motion: reduce) {
  .feature-card__icon,
  .icon-tile                              { transition: none; }
  .feature-card:hover .feature-card__icon,
  .card:hover .icon-tile                  { transform: none; box-shadow: none; }
}

/* =============================================================================
   ICON CHIP SYSTEM — Round 7 (2026-09-21)

   Premium unified treatment for .feature-card__icon and .icon-tile.
   Architecture: CSS owns chip appearance (gradient bg, tinted border, colour,
   shadow, hover lift); SVGs are pure 24×24 glyphs via <use href="#i-*"> that
   inherit currentColor — so every chip automatically drives the icon's hue.

   Colour variants (applied as modifier classes on the chip container):
     --green   : security-positive actions (accept, control, no-install)
     --blue    : technical / encrypted features
     --amber   : warning / visibility (the "can't be hidden" amber band)
     --teal    : session/connectivity concepts
     --purple  : identity / account concepts
     --red     : end / destructive
     --neutral : informational / "read more"
   ============================================================================= */

/* ── .feature-card__icon base upgrade ──────────────────────────────────── */
/* Size stays 3rem; add transition and bump icon SVG to 22 px for better fill */
.feature-card__icon {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.feature-card__icon svg {
  width:  1.375rem;   /* 22 px — overrides earlier 1.25rem in this file */
  height: 1.375rem;
}

/* ── .icon-tile base upgrade ────────────────────────────────────────────── */
/* Give tiles a default background (previously none — relied on SVG chip) */
.icon-tile {
  background:  var(--color-bg);
  transition:  transform 0.18s ease, box-shadow 0.18s ease;
}

/* ── Colour variants — light mode ──────────────────────────────────────── */

.icon-tile--green,
.feature-card__icon--green {
  background:   linear-gradient(145deg, #E6F9EE 0%, #CDEEDA 100%);
  border-color: #B3EDCC;
  color:        #1A7040;
  box-shadow:   0 1px 4px rgba(43,209,107,0.14);
}
.icon-tile--blue,
.feature-card__icon--blue {
  background:   linear-gradient(145deg, #EBF3FD 0%, #D5E8FA 100%);
  border-color: #BBD4F7;
  color:        #1558B0;
  box-shadow:   0 1px 4px rgba(26,115,232,0.14);
}
.icon-tile--purple,
.feature-card__icon--purple {
  background:   linear-gradient(145deg, #F3E8FF 0%, #E9D5FF 100%);
  border-color: #DDD6FE;
  color:        #6D28D9;
  box-shadow:   0 1px 4px rgba(109,40,217,0.10);
}
.icon-tile--amber,
.feature-card__icon--amber {
  background:   linear-gradient(145deg, #FFFBEB 0%, #FEF3C7 100%);
  border-color: #FCD34D;
  color:        #92400E;
  box-shadow:   0 1px 4px rgba(244,180,0,0.18);
}
.icon-tile--teal,
.feature-card__icon--teal {
  background:   linear-gradient(145deg, #CCFBF1 0%, #B2F5EA 100%);
  border-color: #5EEAD4;
  color:        #0F766E;
  box-shadow:   0 1px 4px rgba(15,118,110,0.12);
}
.icon-tile--red,
.feature-card__icon--red {
  background:   linear-gradient(145deg, #FEE2E2 0%, #FECACA 100%);
  border-color: #FCA5A5;
  color:        #991B1B;
  box-shadow:   0 1px 4px rgba(153,27,27,0.10);
}
.icon-tile--neutral,
.feature-card__icon--neutral {
  background:   linear-gradient(145deg, #F5F6F8 0%, #EAEDF1 100%);
  border-color: #C6CCD4;
  color:        #4B5563;
  box-shadow:   0 1px 3px rgba(27,31,36,0.07);
}

/* ── Colour variants — dark mode (system preference) ───────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-tile--green,
  :root:not([data-theme="light"]) .feature-card__icon--green {
    background: linear-gradient(145deg, rgba(43,209,107,0.13) 0%, rgba(43,209,107,0.06) 100%);
    border-color: rgba(43,209,107,0.26); color: #4FD98A;
    box-shadow: 0 1px 4px rgba(43,209,107,0.18);
  }
  :root:not([data-theme="light"]) .icon-tile--blue,
  :root:not([data-theme="light"]) .feature-card__icon--blue {
    background: linear-gradient(145deg, rgba(26,115,232,0.13) 0%, rgba(26,115,232,0.06) 100%);
    border-color: rgba(91,156,246,0.26); color: #5B9CF6;
    box-shadow: 0 1px 4px rgba(26,115,232,0.18);
  }
  :root:not([data-theme="light"]) .icon-tile--purple,
  :root:not([data-theme="light"]) .feature-card__icon--purple {
    background: linear-gradient(145deg, rgba(139,92,246,0.13) 0%, rgba(139,92,246,0.06) 100%);
    border-color: rgba(167,139,250,0.26); color: #A78BFA;
    box-shadow: 0 1px 4px rgba(139,92,246,0.18);
  }
  :root:not([data-theme="light"]) .icon-tile--amber,
  :root:not([data-theme="light"]) .feature-card__icon--amber {
    background: linear-gradient(145deg, rgba(244,180,0,0.13) 0%, rgba(244,180,0,0.06) 100%);
    border-color: rgba(244,180,0,0.26); color: #FCD34D;
    box-shadow: 0 1px 4px rgba(244,180,0,0.18);
  }
  :root:not([data-theme="light"]) .icon-tile--teal,
  :root:not([data-theme="light"]) .feature-card__icon--teal {
    background: linear-gradient(145deg, rgba(15,118,110,0.13) 0%, rgba(15,118,110,0.06) 100%);
    border-color: rgba(45,212,191,0.26); color: #2DD4BF;
    box-shadow: 0 1px 4px rgba(15,118,110,0.18);
  }
  :root:not([data-theme="light"]) .icon-tile--red,
  :root:not([data-theme="light"]) .feature-card__icon--red {
    background: linear-gradient(145deg, rgba(185,28,28,0.13) 0%, rgba(185,28,28,0.06) 100%);
    border-color: rgba(248,113,113,0.26); color: #F87171;
    box-shadow: 0 1px 4px rgba(185,28,28,0.18);
  }
  :root:not([data-theme="light"]) .icon-tile--neutral,
  :root:not([data-theme="light"]) .feature-card__icon--neutral {
    background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border-color: var(--color-border); color: var(--color-muted); box-shadow: none;
  }
}

/* ── Colour variants — dark mode (explicit [data-theme="dark"]) ─────────── */

:root[data-theme="dark"] .icon-tile--green,
:root[data-theme="dark"] .feature-card__icon--green {
  background: linear-gradient(145deg, rgba(43,209,107,0.13) 0%, rgba(43,209,107,0.06) 100%);
  border-color: rgba(43,209,107,0.26); color: #4FD98A;
  box-shadow: 0 1px 4px rgba(43,209,107,0.18);
}
:root[data-theme="dark"] .icon-tile--blue,
:root[data-theme="dark"] .feature-card__icon--blue {
  background: linear-gradient(145deg, rgba(26,115,232,0.13) 0%, rgba(26,115,232,0.06) 100%);
  border-color: rgba(91,156,246,0.26); color: #5B9CF6;
  box-shadow: 0 1px 4px rgba(26,115,232,0.18);
}
:root[data-theme="dark"] .icon-tile--purple,
:root[data-theme="dark"] .feature-card__icon--purple {
  background: linear-gradient(145deg, rgba(139,92,246,0.13) 0%, rgba(139,92,246,0.06) 100%);
  border-color: rgba(167,139,250,0.26); color: #A78BFA;
  box-shadow: 0 1px 4px rgba(139,92,246,0.18);
}
:root[data-theme="dark"] .icon-tile--amber,
:root[data-theme="dark"] .feature-card__icon--amber {
  background: linear-gradient(145deg, rgba(244,180,0,0.13) 0%, rgba(244,180,0,0.06) 100%);
  border-color: rgba(244,180,0,0.26); color: #FCD34D;
  box-shadow: 0 1px 4px rgba(244,180,0,0.18);
}
:root[data-theme="dark"] .icon-tile--teal,
:root[data-theme="dark"] .feature-card__icon--teal {
  background: linear-gradient(145deg, rgba(15,118,110,0.13) 0%, rgba(15,118,110,0.06) 100%);
  border-color: rgba(45,212,191,0.26); color: #2DD4BF;
  box-shadow: 0 1px 4px rgba(15,118,110,0.18);
}
:root[data-theme="dark"] .icon-tile--red,
:root[data-theme="dark"] .feature-card__icon--red {
  background: linear-gradient(145deg, rgba(185,28,28,0.13) 0%, rgba(185,28,28,0.06) 100%);
  border-color: rgba(248,113,113,0.26); color: #F87171;
  box-shadow: 0 1px 4px rgba(185,28,28,0.18);
}
:root[data-theme="dark"] .icon-tile--neutral,
:root[data-theme="dark"] .feature-card__icon--neutral {
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
  border-color: var(--color-border); color: var(--color-muted); box-shadow: none;
}

/* ── Hover lift — icon chip floats when parent card is hovered ──────────── */

.feature-card:hover .feature-card__icon,
.card:hover .icon-tile {
  transform:  translateY(-2px) scale(1.06);
  box-shadow: 0 6px 20px rgba(0,0,0,0.11);
}

/* Honour reduced motion — no transform, no shadow change on hover */
@media (prefers-reduced-motion: reduce) {
  .feature-card__icon,
  .icon-tile { transition: none; }
  .feature-card:hover .feature-card__icon,
  .card:hover .icon-tile { transform: none; box-shadow: inherit; }
}

/* ── FEATURE GRID UPGRADE ────────────────────────────────────────────────── */
.feature-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
@media (max-width: 600px) {
  .feature-grid-v2 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────── */