@charset "UTF-8";
/* ==========================================================================
   PDF Wallah - pdfwallah.iamtac.com
   Plain CSS. No preprocessor, no framework, no web fonts.

   Contents
   01  Design tokens (brand, neutrals, semantic light/dark)
   02  Reset and base
   03  Layout primitives
   04  Typography and prose
   05  Buttons, badges, pills
   06  Header, nav, drawer, theme toggle
   07  Hero
   08  Cards and feature grid
   09  Phone mockup and screenshot gallery
   10  Lightbox
   11  Accordion (details/summary)
   12  Tables, notes, callouts
   13  Table of contents (privacy)
   14  Footer
   15  Scroll reveal and motion preferences
   16  Print
   ========================================================================== */

/* ==========================================================================
   01  DESIGN TOKENS
   Raw brand values are taken verbatim from the app theme. Semantic tokens
   are what the components actually consume, so light/dark only remaps once.
   ========================================================================== */
:root {
  /* --- brand ------------------------------------------------------------ */
  --red:            #E11D2E;
  --red-dark:       #B4141F;
  --red-light:      #FF5C63;
  --red-container:  #FFE0E2;
  --navy:           #1B2A41;
  --navy-light:     #33455F;
  --amber:          #F97316;

  /* --- neutrals (slate scale) ------------------------------------------ */
  --s50:  #F8FAFC;
  --s100: #F1F5F9;
  --s200: #E2E8F0;
  --s300: #CBD5E1;
  --s400: #94A3B8;
  --s500: #64748B;
  --s600: #475569;
  --s700: #334155;
  --s800: #1E293B;
  --s900: #0F172A;

  /* --- feedback -------------------------------------------------------- */
  --success: #10B981;
  --info:    #0EA5E9;
  --warning: #F59E0B;
  --danger:  #DC2626;

  /* --- tool accents (one per feature, in app order) -------------------- */
  --tool-scan:     #4F46E5;
  --tool-edit:     #10B981;
  --tool-merge:    #0EA5E9;
  --tool-convert:  #F59E0B;
  --tool-export:   #8B5CF6;
  --tool-password: #EF4444;
  --tool-compress: #0EA5E9;

  /* --- signature gradient (matches the app hero) ---------------------- */
  --hero-gradient: linear-gradient(135deg, #1B2A41 0%, #33455F 42%, #E11D2E 100%);

  /* --- semantic: LIGHT ------------------------------------------------- */
  --bg:            #FFFFFF;
  --bg-alt:        var(--s50);
  --surface:       #FFFFFF;
  --surface-2:     var(--s100);
  --surface-sunk:  var(--s100);
  --hairline:      var(--s200);
  --hairline-soft: var(--s100);

  --text:         var(--s800);   /* body,  14.4:1 on white */
  --text-strong:  var(--s900);   /* headings */
  --text-muted:   var(--s600);   /* secondary,  7.5:1 on white */
  --text-faint:   var(--s500);   /* meta,  4.8:1 on white */

  /* Brand red as *text* is darkened to #B4141F (6.9:1). Plain #E11D2E on
     white measures 4.75:1 which only just clears AA, so small text uses the
     dark tone and the bright tone is reserved for large fills and shapes. */
  --brand:        var(--red);
  --brand-text:   var(--red-dark);
  --brand-hover:  var(--red-dark);
  --brand-soft:   var(--red-container);
  --brand-ring:   rgba(225, 29, 46, 0.28);
  --on-brand:     #FFFFFF;

  --focus:        #0B5FA5;       /* deliberately not red, so it never reads as brand */
  --code-bg:      var(--s100);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.05), 0 18px 48px rgba(15, 23, 42, 0.11);
  --shadow-hero: 0 24px 70px rgba(15, 23, 42, 0.24);

  /* --- radii ----------------------------------------------------------- */
  --r-sm:    8px;
  --r-card: 14px;
  --r-hero: 20px;
  --r-pill: 999px;
  --r-phone: 28px;

  /* --- spacing / metrics ---------------------------------------------- */
  --container: 1180px;
  --gutter: 20px;
  --header-h: 68px;
  --section-y: 56px;

  color-scheme: light;
}

/* Manual override -> dark. Kept in sync with the media-query block below. */
:root[data-theme="dark"] {
  --bg:            #0F172A;
  --bg-alt:        #0B1220;
  --surface:       #1E293B;
  --surface-2:     #243349;
  --surface-sunk:  #16233C;
  --hairline:      #33455F;
  --hairline-soft: #22314C;

  --text:         #E2E8F0;
  --text-strong:  #F8FAFC;
  --text-muted:   #AEBBCC;
  --text-faint:   #94A3B8;

  --brand:        var(--red);
  --brand-text:   var(--red-light);   /* 5.9:1 on #0F172A */
  --brand-hover:  #FF7A80;
  --brand-soft:   rgba(225, 29, 46, 0.18);
  --brand-ring:   rgba(255, 92, 99, 0.34);

  --focus:        #7DD3FC;
  --code-bg:      #16233C;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 18px 48px rgba(0, 0, 0, 0.5);
  --shadow-hero: 0 24px 70px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* System preference, unless the visitor explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0F172A;
    --bg-alt:        #0B1220;
    --surface:       #1E293B;
    --surface-2:     #243349;
    --surface-sunk:  #16233C;
    --hairline:      #33455F;
    --hairline-soft: #22314C;

    --text:         #E2E8F0;
    --text-strong:  #F8FAFC;
    --text-muted:   #AEBBCC;
    --text-faint:   #94A3B8;

    --brand:        var(--red);
    --brand-text:   var(--red-light);
    --brand-hover:  #FF7A80;
    --brand-soft:   rgba(225, 29, 46, 0.18);
    --brand-ring:   rgba(255, 92, 99, 0.34);

    --focus:        #7DD3FC;
    --code-bg:      #16233C;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 18px 48px rgba(0, 0, 0, 0.5);
    --shadow-hero: 0 24px 70px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }
}

/* ==========================================================================
   02  RESET AND BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* sticky header offset for in-page anchors */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

@media (min-width: 640px) { body { font-size: 17px; } }

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

button, input, select, textarea { font: inherit; color: inherit; }

/* --- focus: always visible, never removed -------------------------------- */
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Older engines without :focus-visible still get a ring. */
@supports not selector(:focus-visible) {
  :where(a, button, summary, [tabindex], input, select, textarea):focus {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
}
summary:focus-visible { outline-offset: 0; }

/* --- skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--text-strong);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.16s ease;
}
.skip-link:focus { transform: translateY(0); }

/* --- screen-reader only -------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection { background: var(--brand-soft); color: var(--text-strong); }

/* ==========================================================================
   03  LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

@media (min-width: 640px) { :root { --gutter: 24px; --section-y: 68px; } }
@media (min-width: 900px) { :root { --gutter: 32px; --section-y: 88px; --header-h: 76px; } }
@media (min-width: 1200px) { :root { --section-y: 104px; } }

.stack > * + * { margin-top: 1rem; }
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.grid { display: grid; gap: 18px; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid { gap: 22px; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.section-head { max-width: 62ch; margin-bottom: 28px; }
.section-head p { color: var(--text-muted); margin: 10px 0 0; }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-text);
}

/* ==========================================================================
   04  TYPOGRAPHY AND PROSE
   ========================================================================== */
h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--text-strong);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.125rem); }
h3 { font-size: clamp(1.1875rem, 2.2vw, 1.375rem); line-height: 1.3; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

strong, b { font-weight: 650; color: var(--text-strong); }

.lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--text-muted);
  line-height: 1.6;
}

small, .small { font-size: 0.875rem; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  border-radius: 6px;
  padding: 0.15em 0.4em;
}

hr {
  height: 1px;
  border: 0;
  background: var(--hairline);
  margin: 32px 0;
}

/* Long-form content (privacy policy, feature detail) */
.prose { max-width: 74ch; }
.prose h2 {
  margin-top: 2.25em;
  padding-top: 0.2em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.35em; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--brand-text); }
.prose > section + section { margin-top: 8px; }

/* ==========================================================================
   05  BUTTONS, BADGES, PILLS
   ========================================================================== */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
              transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
.btn:hover { background: var(--brand-hover); color: var(--btn-fg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-strong);
  border-color: var(--hairline);
}
.btn--ghost:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--s300);
}

/* On top of the hero gradient */
.btn--on-hero {
  --btn-bg: #FFFFFF;
  --btn-fg: #1B2A41;
}
.btn--on-hero:hover { background: var(--s100); color: #1B2A41; }

.btn--outline-hero {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--outline-hero:hover { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }

.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 0.9375rem; }
.btn--block { width: 100%; }

.btn svg { flex: none; }

/* --- Google Play badge ---------------------------------------------------
   The app is not published yet, so the default state is an inert,
   clearly-labelled placeholder. main.js promotes it to a real link the
   moment CONFIG.playStoreUrl is filled in.
   ------------------------------------------------------------------------ */
.badge-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 16px;
  min-height: 56px;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text-strong);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.badge-play__label {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.badge-play__top {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.badge-play__main { font-size: 1.0625rem; font-weight: 650; }
.badge-play__icon { width: 26px; height: 28px; flex: none; }

.badge-play[aria-disabled="true"],
.badge-play:disabled {
  cursor: not-allowed;
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--s300);
  color: var(--text-muted);
  box-shadow: none;
}
.badge-play[aria-disabled="true"] .badge-play__main,
.badge-play:disabled .badge-play__main { color: var(--text); }
.badge-play[aria-disabled="true"] .badge-play__icon,
.badge-play:disabled .badge-play__icon { opacity: 0.55; }

.badge-play--live {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}
.badge-play--live .badge-play__top { color: rgba(255, 255, 255, 0.75); }
.badge-play--live:hover { background: #142134; }

/* On the hero, the badge sits on the gradient */
.hero .badge-play[aria-disabled="true"] {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.88);
}
.hero .badge-play[aria-disabled="true"] .badge-play__top { color: rgba(255, 255, 255, 0.72); }
.hero .badge-play[aria-disabled="true"] .badge-play__main { color: #FFFFFF; }

/* --- pills --------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.pill--brand {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand-text);
}
.pill--on-hero {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}
.pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ==========================================================================
   06  HEADER, NAV, DRAWER, THEME TOGGLE
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, padding 0.2s ease;
}
/* Fallback for engines without color-mix() */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: var(--bg); }
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .site-header {
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
  }
}

.site-header.is-condensed {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom-color: var(--hairline);
  box-shadow: var(--shadow-sm);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header.is-condensed { background: var(--bg); }
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  transition: height 0.2s ease;
}
.site-header.is-condensed .header-bar { height: calc(var(--header-h) - 10px); }

/* --- logo ---------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  color: var(--text-strong);
  border-radius: var(--r-sm);
}
.brand:hover { color: var(--text-strong); }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__text {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.brand__text .is-red { color: var(--brand-text); }
.site-header.is-condensed .brand__mark { width: 30px; height: 30px; }

/* --- primary nav (>=900px inline) ---------------------------------------
   Deliberately not `display: contents`, which is known to drop the <nav>
   landmark from the accessibility tree in older WebKit and Blink. */
.nav { display: block; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { background: var(--surface-2); color: var(--text-strong); }
.nav__link[aria-current="page"] {
  color: var(--brand-text);
  background: var(--brand-soft);
}

.header-actions { display: flex; align-items: center; gap: 8px; }

/* --- icon buttons -------------------------------------------------------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-strong);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 20px; height: 20px; }

/* theme toggle: show only the icon for the mode you would switch *to* */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
}

/* --- hamburger + drawer -------------------------------------------------- */
.nav-toggle { display: inline-flex; }

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

@media (max-width: 899px) {
  .nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 80;
    width: min(320px, 86vw);
    height: 100%;
    height: 100dvh;
    padding: 18px 18px 32px;
    background: var(--surface);
    border-left: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
    transform: translateX(101%);
    /* visibility, not just transform: a closed off-canvas drawer must not be
       reachable by keyboard tabbing. */
    visibility: hidden;
    transition: transform 0.26s ease, visibility 0.26s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  .nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin-bottom: 14px;
  }
  .nav__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .nav__link {
    padding: 13px 14px;
    font-size: 1.0625rem;
    border: 1px solid transparent;
  }
  .nav__link[aria-current="page"] { border-color: var(--brand-soft); }

  .nav__footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--hairline);
  }
}

@media (min-width: 900px) {
  .nav-toggle, .nav__head, .nav__footer { display: none; }
  .nav-backdrop { display: none; }
  .nav { display: flex; align-items: center; }
}

/* body scroll lock while the drawer is open */
body.is-locked { overflow: hidden; }

/* ==========================================================================
   07  HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-gradient);
  color: #FFFFFF;
  border-radius: 0 0 var(--r-hero) var(--r-hero);
}
.hero::after {
  /* soft light bloom, keeps the flat gradient from looking dead */
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 66%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 52px 60px;
  display: grid;
  gap: 40px;
}
.hero h1 { color: #FFFFFF; margin-bottom: 16px; }
.hero__lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
  max-width: 34ch;
  margin-bottom: 26px;
}
.hero__cta { gap: 14px; margin-bottom: 20px; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__note {
  margin-top: 18px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 42ch;
}
.hero__art { justify-self: center; width: min(280px, 74vw); }

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    padding-block: 84px 96px;
    gap: 48px;
  }
  .hero__art { width: min(320px, 100%); justify-self: end; }
}
@media (min-width: 1200px) {
  .hero__inner { padding-block: 104px 116px; }
  .hero__art { width: 340px; }
}

/* page banner for sub-pages */
.page-hero {
  background: var(--hero-gradient);
  color: #FFFFFF;
  border-radius: 0 0 var(--r-hero) var(--r-hero);
  padding-block: 44px 52px;
}
.page-hero h1 { color: #FFFFFF; margin-bottom: 12px; }
.page-hero p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 60ch;
  font-size: clamp(1rem, 2vw, 1.125rem);
  margin: 0;
}
.page-hero .container > * + * { margin-top: 14px; }
@media (min-width: 900px) { .page-hero { padding-block: 64px 72px; } }

/* breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}
.crumbs a { color: rgba(255, 255, 255, 0.86); }
.crumbs a:hover { color: #FFFFFF; }
.crumbs li[aria-current] { color: rgba(255, 255, 255, 0.7); }
.crumbs__sep { color: rgba(255, 255, 255, 0.45); }

/* ==========================================================================
   08  CARDS AND FEATURE GRID
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card h3 { margin-bottom: 6px; }
.card p { color: var(--text-muted); margin: 0; }

.card--link { text-decoration: none; color: inherit; }
.card--link:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--s300);
  color: inherit;
}

/* feature card: one accent colour each, set inline via --accent */
.feature {
  --accent: var(--brand);
  padding-top: 24px;
}
.feature::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .feature__icon { background: var(--surface-2); }
}
:root[data-theme="dark"] .feature__icon {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.feature__icon svg { width: 24px; height: 24px; }

/* Accent used as text needs care in light mode; these accents are all
   >=4.5:1 on the card surface except the ambers, which get darkened. */
.feature__step {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

/* detailed feature section (features.html) */
.feature-block {
  --accent: var(--brand);
  padding: 26px 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xs);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.feature-block + .feature-block { margin-top: 20px; }
.feature-block__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.feature-block__head h2 { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.625rem); }
.feature-block__tag {
  display: block;
  margin-top: 2px;
  font-size: 0.9375rem;
  color: var(--text-muted);
  font-weight: 500;
}
.feature-block ul { margin: 0; padding-left: 1.25em; }
.feature-block li { margin-bottom: 0.45rem; color: var(--text-muted); }
.feature-block li:last-child { margin-bottom: 0; }

@media (min-width: 640px) { .feature-block { padding: 30px 28px; } }

/* stat / spec list */
.spec-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}
.spec-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  padding: 14px 18px;
}
.spec-list > div + div { border-top: 1px solid var(--hairline-soft); }
.spec-list dt { color: var(--text-muted); font-size: 0.9375rem; margin: 0; }
.spec-list dd {
  margin: 0;
  font-weight: 650;
  color: var(--text-strong);
  text-align: right;
}

/* ==========================================================================
   09  PHONE MOCKUP AND SCREENSHOT GALLERY
   ========================================================================== */
/* `display: block` matters: the mockup is often marked up with <span> so it
   can sit inside a <button>, and aspect-ratio does nothing on inline boxes. */
.phone {
  display: block;
  position: relative;
  padding: 8px;
  border-radius: var(--r-phone);
  background: linear-gradient(160deg, #33455F, #1B2A41 55%, #0F172A);
  box-shadow: var(--shadow-lg);
}
.phone::before {
  /* speaker slit */
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 26%;
  max-width: 68px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 2;
  pointer-events: none;
}
.phone__screen {
  display: block;
  position: relative;
  /* Matches the supplied screenshots: 1080 x 2400 (20:9). If you ever swap in
     shots at a different ratio, change this and the fallback below together. */
  aspect-ratio: 1080 / 2400;
  border-radius: calc(var(--r-phone) - 9px);
  overflow: hidden;
  background: var(--surface-2);
}
@supports not (aspect-ratio: 1 / 1) {
  .phone__screen { height: 0; padding-bottom: 222.22%; } /* 2400 / 1080 */
}
.phone__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.phone--hero { width: 100%; }

/* --- gallery: snap carousel on small screens, grid from 900px ----------- */
.gallery {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 4px 4px 18px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gallery > li {
  flex: 0 0 min(240px, 68vw);
  scroll-snap-align: center;
}
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb {
  background: var(--s300);
  border-radius: var(--r-pill);
}
.gallery::-webkit-scrollbar-track { background: transparent; }

@media (min-width: 900px) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 26px;
    overflow: visible;
    padding: 0;
  }
  .gallery > li { flex: none; }
}

.shot { display: block; }
.shot__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--r-phone);
  transition: transform 0.2s ease;
}
.shot__btn:hover { transform: translateY(-3px); }
.shot__btn:focus-visible { outline-offset: 4px; }
.shot__caption {
  margin: 12px 2px 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.shot__caption b {
  display: block;
  color: var(--text-strong);
  font-weight: 650;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.gallery-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 0.875rem;
  color: var(--text-faint);
}
@media (min-width: 900px) { .gallery-hint { display: none; } }

/* ==========================================================================
   10  LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  padding: 14px;
  background: rgba(11, 18, 32, 0.94);
}
@supports (backdrop-filter: blur(4px)) {
  .lightbox { background: rgba(11, 18, 32, 0.86); backdrop-filter: blur(6px); }
}
.lightbox.is-open {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
}
.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-height: 100%;
}
.lightbox__frame {
  width: min(300px, 62vw);
  max-height: 100%;
}
.lightbox__figure img { max-height: 100%; }
.lightbox__caption {
  margin: 0;
  max-width: 46ch;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.lightbox__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.22); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-btn:focus-visible { outline-color: #FFFFFF; }

@media (min-width: 900px) {
  .lightbox { padding: 26px 32px; }
  .lightbox__frame { width: min(330px, 34vh); }
  .lightbox__figure { flex-direction: row; align-items: center; gap: 34px; }
  .lightbox__caption { text-align: left; }
}

/* ==========================================================================
   11  ACCORDION  (native details/summary, works with JS disabled)
   ========================================================================== */
.accordion {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.acc {
  border-bottom: 1px solid var(--hairline-soft);
}
.acc:last-child { border-bottom: 0; }

.acc > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--text-strong);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: var(--surface-2); }

.acc__chevron {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  color: var(--brand-text);
  transition: transform 0.22s ease;
}
.acc[open] > summary .acc__chevron { transform: rotate(180deg); }
.acc[open] > summary { color: var(--brand-text); }

.acc__body {
  padding: 0 20px 20px;
  color: var(--text-muted);
  animation: acc-in 0.24s ease;
}
.acc__body > :first-child { margin-top: 0; }
@keyframes acc-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 640px) {
  .acc > summary { padding: 20px 24px; }
  .acc__body { padding: 0 24px 22px; }
}

/* ==========================================================================
   12  NOTES AND CALLOUTS
   ========================================================================== */
.note {
  --note-accent: var(--info);
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--note-accent);
  border-radius: var(--r-card);
  background: var(--surface-sunk);
  color: var(--text);
  font-size: 0.9375rem;
}
.note p:last-child { margin-bottom: 0; }
.note__icon { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--note-accent); }
.note--warning { --note-accent: #B45309; }
.note--limit   { --note-accent: var(--amber); }
.note--good    { --note-accent: #047857; }
.note strong { color: var(--text-strong); }
:root[data-theme="dark"] .note--warning { --note-accent: var(--warning); }
:root[data-theme="dark"] .note--good { --note-accent: var(--success); }

.callout {
  padding: 26px 22px;
  border-radius: var(--r-hero);
  background: var(--hero-gradient);
  color: #FFFFFF;
  box-shadow: var(--shadow-md);
}
.callout h2 { color: #FFFFFF; }
.callout p { color: rgba(255, 255, 255, 0.9); max-width: 54ch; }
@media (min-width: 640px) { .callout { padding: 40px 36px; } }

/* not-supported list */
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--text-muted);
}
.check-list svg { width: 19px; height: 19px; flex: none; margin-top: 4px; }
.check-list .is-yes { color: #047857; }
.check-list .is-no { color: var(--danger); }
:root[data-theme="dark"] .check-list .is-yes { color: var(--success); }

/* ==========================================================================
   13  TABLE OF CONTENTS
   ========================================================================== */
.toc {
  padding: 20px 22px;
  background: var(--surface-sunk);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.toc h2 {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.toc ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 1;
}
.toc li { margin-bottom: 7px; }
.toc li::marker { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.toc a { color: var(--text); text-decoration-color: var(--s300); }
.toc a:hover { color: var(--brand-text); }
@media (min-width: 700px) { .toc ol { columns: 2; column-gap: 32px; } }

.policy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 26px;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--text-faint);
  text-decoration: none;
}
.back-to-top:hover { color: var(--brand-text); }
.back-to-top svg { width: 14px; height: 14px; }

/* ==========================================================================
   14  FOOTER
   ========================================================================== */
.site-footer {
  margin-top: 8px;
  padding-block: 44px 30px;
  background: var(--bg-alt);
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
}
.footer-grid {
  display: grid;
  gap: 30px;
  margin-bottom: 30px;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer-brand p {
  color: var(--text-muted);
  max-width: 34ch;
  margin: 12px 0 0;
  font-size: 0.9375rem;
}
.footer-col h2 {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li + li { margin-top: 8px; }
.footer-col a { color: var(--text-muted); text-decoration: none; }
.footer-col a:hover { color: var(--brand-text); text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  color: var(--text-faint);
  font-size: 0.875rem;
}
.footer-bottom p { margin: 0; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-legal a { color: var(--text-faint); text-decoration: none; }
.footer-legal a:hover { color: var(--brand-text); text-decoration: underline; }

/* visitor IP readout */
.footer-ip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 14px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-faint);
  font-size: 0.8125rem;
  width: fit-content;
  max-width: 100%;
}
.footer-ip svg { width: 15px; height: 15px; flex: none; color: var(--text-faint); }
.footer-ip__value {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text);
  font-size: 0.8125rem;
  word-break: break-all;
}
.footer-ip[hidden] { display: none; }

/* copy-to-clipboard */
.copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-sunk);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.copy-row__value {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  color: var(--text-strong);
  -webkit-user-select: all;
  user-select: all;
  word-break: break-all;
}
.copy-status {
  font-size: 0.8125rem;
  color: #047857;
  font-weight: 600;
}
:root[data-theme="dark"] .copy-status { color: var(--success); }

/* ==========================================================================
   15  SCROLL REVEAL AND MOTION PREFERENCES
   The hidden state is gated behind html.js so that with JavaScript disabled
   every card is simply visible.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card--link:hover, .shot__btn:hover { transform: none; }
}

/* ==========================================================================
   16  PRINT  (the privacy policy gets printed and filed, so make it clean)
   ========================================================================== */
@media print {
  .site-header, .site-footer, .nav-backdrop, .lightbox,
  .theme-toggle, .nav-toggle, .back-to-top, .gallery-hint { display: none !important; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .page-hero, .hero, .callout { background: #FFFFFF !important; color: #000000 !important; }
  .page-hero h1, .page-hero p, .hero h1 { color: #000000 !important; }
  .prose { max-width: none; }
  .acc__body { display: block !important; }
  a { color: #000000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .section { padding-block: 12pt; }
}