/* ==========================================================================
   Rank9 Labs — design system

   Brand constants come from the asset pack and never change between themes:
   violet #6C3DF4 -> pink #FF4D8D, mint #2EE6A8.

   Everything else is a semantic token. Components read tokens only — never a
   raw hex, and never a colour inside a media query — so light and dark stay in
   sync by construction. Theme resolution order:
     1. :root                        -> dark (the brand's native look)
     2. prefers-color-scheme: light  -> OS preference
     3. :root[data-theme="..."]      -> explicit user choice, always wins
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* -- Brand constants -------------------------------------------------- */
  --violet: #6c3df4;
  --violet-soft: #9a6bff;
  --pink: #ff4d8d;
  --pink-soft: #ff6ba9;
  --mint: #2ee6a8;
  --mint-soft: #34f5b5;
  --ink: #221a3a;

  --grad: linear-gradient(135deg, var(--violet) 0%, var(--pink) 100%);

  /* -- Semantic tokens: DARK (default) ---------------------------------- */
  --page: #0f0b1e;
  --surface: #16112a;
  --surface-2: #1d1636;
  --surface-3: #251d43;

  --text: #f4f1fb;
  --text-muted: #b3a9cf;
  --text-dim: #8579a8;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --wash: rgba(255, 255, 255, 0.04);
  --wash-2: rgba(255, 255, 255, 0.07);

  /* Mint is a fill in dark, and is legible as text on dark grounds */
  --accent-ink: #2ee6a8;
  --accent-fill: #2ee6a8;
  --accent-on-fill: #0d2a20;
  --accent-wash: rgba(46, 230, 168, 0.12);
  --accent-edge: rgba(46, 230, 168, 0.3);

  --pink-wash: rgba(255, 77, 141, 0.13);
  --pink-edge: rgba(255, 77, 141, 0.3);
  --pink-ink: var(--pink-soft);

  /* Gradient used behind text — soft end of the ramp reads on dark */
  --grad-text: linear-gradient(135deg, var(--violet-soft) 0%, var(--pink-soft) 100%);

  --header-bg: rgba(15, 11, 30, 0.82);
  --footer-bg: rgba(0, 0, 0, 0.2);
  --glow-1: rgba(108, 61, 244, 0.3);
  --glow-2: rgba(255, 77, 141, 0.16);
  --glow-3: rgba(46, 230, 168, 0.09);
  --glow-strength: 1;
  --noise: 0.035;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -24px rgba(108, 61, 244, 0.5),
    0 8px 24px -12px rgba(0, 0, 0, 0.7);

  /* -- Non-colour tokens ------------------------------------------------ */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --wrap: 1160px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* -- Semantic tokens: LIGHT --------------------------------------------- */
/* Neutrals carry a violet bias so they belong to the brand rather than
   reading as generic greys. Mint drops to a deep teal for text use, where the
   bright brand mint would fail contrast on a light ground. */
@media (prefers-color-scheme: light) {
  :root {
    --page: #fcfbff;
    --surface: #ffffff;
    --surface-2: #f8f5fe;
    --surface-3: #f0ebfc;

    --text: #1b1433;
    --text-muted: #55496f;
    --text-dim: #7a6d96;

    --line: rgba(34, 26, 58, 0.11);
    --line-strong: rgba(34, 26, 58, 0.2);
    --wash: rgba(34, 26, 58, 0.035);
    --wash-2: rgba(34, 26, 58, 0.06);

    --accent-ink: #067a57;
    --accent-fill: #2ee6a8;
    --accent-on-fill: #0d2a20;
    --accent-wash: rgba(6, 122, 87, 0.09);
    --accent-edge: rgba(6, 122, 87, 0.24);

    --pink-wash: rgba(214, 26, 106, 0.08);
    --pink-edge: rgba(214, 26, 106, 0.22);
    --pink-ink: #c81f68;

    --grad-text: linear-gradient(135deg, #5b2fe0 0%, #d61a6a 100%);

    --header-bg: rgba(252, 251, 255, 0.85);
    --footer-bg: rgba(34, 26, 58, 0.025);
    --glow-1: rgba(108, 61, 244, 0.13);
    --glow-2: rgba(255, 77, 141, 0.1);
    --glow-3: rgba(46, 230, 168, 0.08);
    --noise: 0.02;

    --shadow: 0 1px 2px rgba(34, 26, 58, 0.06), 0 8px 24px -12px rgba(34, 26, 58, 0.18);
    --shadow-lg: 0 24px 60px -28px rgba(108, 61, 244, 0.28),
      0 8px 24px -14px rgba(34, 26, 58, 0.16);

    color-scheme: light;
  }
}

/* Explicit choice beats the OS in both directions. Higher specificity than
   :root alone, so source order between these two blocks does not matter. */
:root[data-theme='dark'] {
  --page: #0f0b1e;
  --surface: #16112a;
  --surface-2: #1d1636;
  --surface-3: #251d43;

  --text: #f4f1fb;
  --text-muted: #b3a9cf;
  --text-dim: #8579a8;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --wash: rgba(255, 255, 255, 0.04);
  --wash-2: rgba(255, 255, 255, 0.07);

  --accent-ink: #2ee6a8;
  --accent-fill: #2ee6a8;
  --accent-on-fill: #0d2a20;
  --accent-wash: rgba(46, 230, 168, 0.12);
  --accent-edge: rgba(46, 230, 168, 0.3);

  --pink-wash: rgba(255, 77, 141, 0.13);
  --pink-edge: rgba(255, 77, 141, 0.3);
  --pink-ink: var(--pink-soft);

  --grad-text: linear-gradient(135deg, var(--violet-soft) 0%, var(--pink-soft) 100%);

  --header-bg: rgba(15, 11, 30, 0.82);
  --footer-bg: rgba(0, 0, 0, 0.2);
  --glow-1: rgba(108, 61, 244, 0.3);
  --glow-2: rgba(255, 77, 141, 0.16);
  --glow-3: rgba(46, 230, 168, 0.09);
  --noise: 0.035;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -24px rgba(108, 61, 244, 0.5),
    0 8px 24px -12px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

:root[data-theme='light'] {
  --page: #fcfbff;
  --surface: #ffffff;
  --surface-2: #f8f5fe;
  --surface-3: #f0ebfc;

  --text: #1b1433;
  --text-muted: #55496f;
  --text-dim: #7a6d96;

  --line: rgba(34, 26, 58, 0.11);
  --line-strong: rgba(34, 26, 58, 0.2);
  --wash: rgba(34, 26, 58, 0.035);
  --wash-2: rgba(34, 26, 58, 0.06);

  --accent-ink: #067a57;
  --accent-fill: #2ee6a8;
  --accent-on-fill: #0d2a20;
  --accent-wash: rgba(6, 122, 87, 0.09);
  --accent-edge: rgba(6, 122, 87, 0.24);

  --pink-wash: rgba(214, 26, 106, 0.08);
  --pink-edge: rgba(214, 26, 106, 0.22);
  --pink-ink: #c81f68;

  --grad-text: linear-gradient(135deg, #5b2fe0 0%, #d61a6a 100%);

  --header-bg: rgba(252, 251, 255, 0.85);
  --footer-bg: rgba(34, 26, 58, 0.025);
  --glow-1: rgba(108, 61, 244, 0.13);
  --glow-2: rgba(255, 77, 141, 0.1);
  --glow-3: rgba(46, 230, 168, 0.08);
  --noise: 0.02;

  --shadow: 0 1px 2px rgba(34, 26, 58, 0.06), 0 8px 24px -12px rgba(34, 26, 58, 0.18);
  --shadow-lg: 0 24px 60px -28px rgba(108, 61, 244, 0.28),
    0 8px 24px -14px rgba(34, 26, 58, 0.16);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--page);
  color: var(--text);
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

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

/* <picture> is a wrapper with no layout meaning. Without this it becomes the
   flex child in icon rows and shrinks, squashing the image inside it. */
picture {
  display: contents;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--violet);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Ambient background
   -------------------------------------------------------------------------- */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60rem 40rem at 78% -8%, var(--glow-1), transparent 65%),
    radial-gradient(46rem 34rem at 8% 6%, var(--glow-2), transparent 62%),
    radial-gradient(40rem 30rem at 50% 108%, var(--glow-3), transparent 60%);
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--noise);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: 760px;
}

.section {
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  position: relative;
}

.section--tight {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--accent-fill);
  color: var(--accent-on-fill);
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}

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

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
}

h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

p {
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 60ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.65;
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem);
}

.section-head p {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(108, 61, 244, 0.9);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(255, 77, 141, 0.75);
}

.btn--mint {
  background: var(--accent-fill);
  color: var(--accent-on-fill);
  box-shadow: 0 10px 30px -14px rgba(46, 230, 168, 0.9);
}

.btn--mint:hover {
  transform: translateY(-2px);
  background: var(--mint-soft);
}

.btn--ghost {
  border: 1px solid var(--line-strong);
  background: var(--wash);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--violet-soft);
  background: var(--wash-2);
  transform: translateY(-2px);
}

.btn--sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.87rem;
}

.btn--block {
  width: 100%;
}

.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.6rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-header.is-stuck {
  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.035em;
  flex: none;
}

.brand__mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.62rem;
  flex: none;
}

.brand__labs {
  display: inline-block;
  padding: 0.1rem 0.5rem 0.15rem;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--accent-on-fill);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 0.22em;
}

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

.nav a {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s, background-color 0.2s;
}

.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--text);
  background: var(--wash-2);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Theme toggle ----------------------------------------------------------- */

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--wash);
  color: var(--text-muted);
  flex: none;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--violet-soft);
  background: var(--wash-2);
}

.theme-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* Show the icon for the theme you would switch TO */
.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .theme-toggle .icon-sun {
    display: block;
  }
  .theme-toggle .icon-moon {
    display: none;
  }
}

:root[data-theme='light'] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme='light'] .theme-toggle .icon-moon {
  display: block;
}

:root[data-theme='dark'] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme='dark'] .theme-toggle .icon-moon {
  display: none;
}

/* Mobile nav ------------------------------------------------------------- */

.nav-toggle {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
}

.nav-toggle span {
  position: relative;
  display: block;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: background-color 0.2s;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s var(--ease);
}

.nav-toggle span::before {
  top: -6px;
}

.nav-toggle span::after {
  top: 6px;
}

.nav-toggle[aria-expanded='true'] span {
  background: transparent;
}

.nav-toggle[aria-expanded='true'] span::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle {
    display: grid;
  }

  .nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1rem var(--gutter) 1.75rem;
    background: var(--page);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%);
    transition: transform 0.35s var(--ease);
  }

  .nav[data-open='true'] {
    transform: translateY(0);
  }

  .nav a {
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
  }

  .header-cta .btn {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.25rem);
}

/* Single column since the phone mock was removed — the copy carries the hero
   on its own, so it gets a comfortable measure rather than the full width. */
.hero__body {
  max-width: 46rem;
}

.hero h1 {
  margin-bottom: 1.5rem;
}

.hero .lede {
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--wash);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}

.pill b {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--accent-on-fill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.stats div strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stats div span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}


/* --------------------------------------------------------------------------
   Cards / app grid
   -------------------------------------------------------------------------- */

.category {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.category__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.category__title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.category__title h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.count {
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: var(--wash-2);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.category__head p {
  color: var(--text-dim);
  font-size: 0.94rem;
  max-width: 46ch;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}

.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.35s;
}

.app-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.3s;
}

.app-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.app-card:hover::before {
  opacity: 1;
}

.app-card__top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.app-icon {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1.1rem;
  flex: none;
  border: 1px solid var(--line);
  object-fit: cover;   /* store icons are square; never distort one */
  aspect-ratio: 1;
}

.app-icon--lg {
  width: 6rem;
  height: 6rem;
  border-radius: 1.6rem;
}

.app-card__name {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.app-card__name a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.app-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.app-card p {
  color: var(--text-muted);
  font-size: 0.93rem;
  flex: 1;
}

.app-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.badge--live {
  background: var(--accent-wash);
  color: var(--accent-ink);
  border-color: var(--accent-edge);
}

.badge--soon {
  background: var(--pink-wash);
  color: var(--pink-ink);
  border-color: var(--pink-edge);
}

.badge--plat {
  background: var(--wash-2);
  color: var(--text-muted);
  border-color: var(--line);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* "soon" marker inside a platform badge — present but clearly secondary. */
.badge--plat em {
  font-style: normal;
  opacity: 0.62;
  margin-left: 0.28rem;
}

.dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rating svg {
  color: #f5b544;
}

.store-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-ink);
  transition: gap 0.25s var(--ease), color 0.2s;
}

.store-link:hover {
  gap: 0.7rem;
}

.store-link--muted {
  color: var(--text-muted);
}

.store-link--muted:hover {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}

.card {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}

.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
}

.card p {
  color: var(--text-muted);
  font-size: 0.94rem;
}

.card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.1rem;
  border-radius: 0.85rem;
  background: var(--grad);
  color: #fff;
}

.card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.card__hint {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* Whole-card link: the anchor covers the card so the entire surface is
   clickable, while the accessible name stays the heading text alone. */
.card--link {
  position: relative;
  display: flex;
  flex-direction: column;
}

.card--link h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.card--link p {
  flex: 1;
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-ink);
  transition: gap 0.25s var(--ease);
}

.card--link:hover .card__more {
  gap: 0.7rem;
}

/* "We also do" — cross-links at the foot of a service page */
.also {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.also strong {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1rem;
}

.also ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.7rem;
}

.also a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: var(--wash);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.2s, background-color 0.2s, transform 0.25s var(--ease);
}

.also a:hover {
  border-color: var(--line-strong);
  background: var(--wash-2);
  transform: translateY(-2px);
}

.also svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.page-404 {
  text-align: center;
  padding-block: 4rem;
}

.page-404 h1 {
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
}

.page-404 h2 {
  margin: 1rem 0 1.25rem;
}

.page-404 .lede {
  margin-inline: auto;
}

.page-404 .btn-row {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   App detail page
   -------------------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  padding-top: 1.75rem;
}

.breadcrumb a:hover {
  color: var(--text);
}

.breadcrumb span[aria-hidden] {
  opacity: 0.4;
}

.app-hero {
  padding-block: 1.75rem clamp(2rem, 4vw, 3rem);
}

.app-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.app-hero__head {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-bottom: 1.75rem;
}

.app-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-bottom: 0.6rem;
}

.app-hero__tagline {
  color: var(--accent-ink);
  font-size: 1.02rem;
  font-weight: 500;
}

.spec {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  padding: 1.5rem;
  position: sticky;
  top: 6rem;
}

.spec dl {
  display: grid;
  gap: 0.1rem;
  margin: 0 0 1.35rem;
}

.spec dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}

.spec dl > div:last-child {
  border-bottom: 0;
}

.spec dt {
  color: var(--text-dim);
}

.spec dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.spec__foot {
  margin-top: 1.1rem;
  text-align: center;
}

.spec__foot .store-link {
  color: var(--text-dim);
  font-size: 0.82rem;
  justify-content: center;
}

.feature-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text-muted);
}

.feature-list svg {
  flex: none;
  margin-top: 0.28rem;
  color: var(--accent-ink);
}

.prose-block {
  margin-top: 1.9rem;
}

.prose-block h2 {
  font-size: clamp(1.3rem, 2.3vw, 1.6rem);
  margin-bottom: 1rem;
}

.prose-block p {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Legal / prose pages
   -------------------------------------------------------------------------- */

.legal {
  padding-block: 2rem clamp(2.75rem, 5vw, 4rem);
}

.legal__head {
  padding-bottom: 2rem;
  margin-bottom: 1.9rem;
  border-bottom: 1px solid var(--line);
}

.legal__head h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 0.9rem;
}

.legal__icon {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.legal__icon .app-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
}

.legal__icon .eyebrow {
  margin: 0;
}

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.87rem;
  color: var(--text-dim);
}

/* Affiliate disclosure. Deliberately not small grey print — the FTC's standard
   is "clear and conspicuous", and the failure mode publishers get penalised for
   is a disclosure technically present but visually designed to be skipped. This
   sits at normal body weight, above the article, inside a visible frame. */
.affiliate-note {
  margin: 0 0 1.6rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Language switcher. Only ever rendered on a guide that genuinely exists in
   more than one language, so there is no single-option state to style. Each
   link is set in its own language's default face rather than the site's display
   font, which has no Devanagari coverage and would otherwise fall back to
   something arbitrary mid-word. */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.lang-switch a {
  font-family: system-ui, sans-serif;
  font-size: 0.87rem;
  line-height: 1;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.prose {
  font-size: 1.02rem;
  color: var(--text-muted);
}

.prose h2 {
  font-size: 1.35rem;
  color: var(--text);
  margin: 2.1rem 0 0.8rem;
  letter-spacing: -0.02em;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: 1.08rem;
  color: var(--text);
  margin: 1.75rem 0 0.6rem;
}

.prose p,
.prose li {
  margin-bottom: 0.9rem;
}

.prose ul {
  list-style: none;
  margin-bottom: 1.5rem;
}

.prose ul li {
  position: relative;
  padding-left: 1.4rem;
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent-ink);
}

.prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose strong {
  color: var(--text);
}

.prose code {
  padding: 0.15em 0.45em;
  border-radius: 5px;
  background: var(--wash-2);
  border: 1px solid var(--line);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.86em;
  color: var(--text);
}

.prose__note {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.callout {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  margin: 1.75rem 0;
  border-radius: var(--radius);
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
  border-left-width: 3px;
}

.callout svg {
  flex: none;
  margin-top: 0.2rem;
  color: var(--accent-ink);
}

.callout p {
  margin: 0;
  font-size: 0.95rem;
}

.callout--warn {
  background: var(--pink-wash);
  border-color: var(--pink-edge);
}

.callout--warn svg {
  color: var(--pink-ink);
}

.perm-table {
  margin: 1.5rem 0;
  display: grid;
  gap: 0.75rem;
}

.perm {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--wash);
  border: 1px solid var(--line);
}

.perm strong {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

.perm span {
  font-size: 0.92rem;
}

.toc {
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.9rem;
  border-radius: var(--radius);
  background: var(--wash);
  border: 1px solid var(--line);
}

.toc strong {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.8rem;
}

.toc ol {
  display: grid;
  gap: 0.45rem;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
  font-size: 0.93rem;
}

.toc li::before {
  content: counter(toc) '. ';
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.toc a {
  color: var(--text-muted);
}

.toc a:hover {
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   Guides
   -------------------------------------------------------------------------- */

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1.25rem;
}

.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.35s;
}

.guide-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.guide-card__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.guide-card__title {
  font-size: 1.15rem;
  line-height: 1.25;
}

.guide-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.guide-card p {
  color: var(--text-muted);
  font-size: 0.93rem;
  flex: 1;
}

.guide-card__app {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.guide-card__app img {
  border-radius: 0.4rem;
  flex: none;
}

/* Answer-first block: the passage search engines and LLMs lift verbatim, so it
   is deliberately the first substantive thing on the page. */
.answer-box {
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.9rem;
  border-radius: var(--radius);
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
  border-left-width: 3px;
}

.answer-box__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.65rem;
}

.answer-box p {
  margin: 0;
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.6;
}

.guide-body h2 {
  scroll-margin-top: 6rem;
}

.guide-body h3 {
  scroll-margin-top: 6rem;
}

.guide-body pre {
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  border-radius: var(--radius);
  background: var(--wash-2);
  border: 1px solid var(--line);
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.6;
}

.guide-body pre code {
  padding: 0;
  background: none;
  border: 0;
  font-size: inherit;
}

.guide-body blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.35rem;
  border-left: 3px solid var(--violet-soft);
  background: var(--wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted);
}

.guide-body blockquote p {
  margin: 0;
}

.guide-body ol {
  list-style: decimal;
  padding-left: 1.3rem;
  margin-bottom: 1.5rem;
}

.guide-body ol li {
  padding-left: 0.3rem;
  margin-bottom: 0.7rem;
}

.guide-body ol li::marker {
  color: var(--text-dim);
  font-weight: 700;
}

.guide-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

/* Tables inside prose scroll on their own so the page body never does */
.table-scroll {
  overflow-x: auto;
  margin: 1.75rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.table-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
}

.table-scroll th,
.table-scroll td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.table-scroll th {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--wash);
  font-weight: 700;
}

.table-scroll tr:last-child td {
  border-bottom: 0;
}

.table-scroll td {
  color: var(--text-muted);
}

/* Inline CTA under the answer box. Shares the accent wash with .answer-box so
   the two read as a pair — answer, then the tool that checks it — rather than
   as an advert dropped into the article. */
.guide-cta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.9rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
}

.guide-cta__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8rem;
  flex: none;
  border: 1px solid var(--line);
  object-fit: cover;
  aspect-ratio: 1;
}

.guide-cta__copy {
  flex: 1;
  min-width: 11rem;
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.guide-cta__copy strong {
  color: var(--text);
}

.guide-cta .btn {
  flex: none;
}

/* Stack on narrow screens so the button never gets squeezed against the copy. */
@media (max-width: 520px) {
  .guide-cta {
    align-items: flex-start;
  }

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

.guide-app__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--accent-ink);
  transition: gap 0.25s var(--ease);
}

.guide-app__more:hover {
  gap: 0.6rem;
}

/* Related-app card at the foot of a guide */
.guide-app {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
}

.guide-app .app-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
}

.guide-app__body {
  flex: 1;
  min-width: 12rem;
}

.guide-app__body strong {
  display: block;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.guide-app__body p {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  background: linear-gradient(160deg, var(--surface-3), var(--surface));
  border: 1px solid var(--line-strong);
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: -50% 20% auto;
  height: 20rem;
  background: var(--grad);
  filter: blur(80px);
  opacity: 0.32;
}

:root[data-theme='light'] .cta::before {
  opacity: 0.16;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .cta::before {
    opacity: 0.16;
  }
}

.cta > * {
  position: relative;
}

.cta h2 {
  margin-bottom: 1rem;
}

.cta p {
  color: var(--text-muted);
  max-width: 48ch;
  margin-inline: auto;
}

.cta .btn-row {
  justify-content: center;
}

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

.site-footer {
  margin-top: auto;
  padding-block: clamp(2.25rem, 5vw, 3.5rem) 1.75rem;
  border-top: 1px solid var(--line);
  background: var(--footer-bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.footer-grid p {
  margin-top: 1rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  max-width: 34ch;
}

.footer-col h4 {
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.1rem;
}

.footer-col ul {
  display: grid;
  gap: 0.6rem;
}

.footer-col a {
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.footer-col a:hover {
  color: var(--accent-ink);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
}

.footer-bottom a:hover {
  color: var(--accent-ink);
}

@media (max-width: 780px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   App detail responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .app-hero__grid {
    grid-template-columns: 1fr;
  }

  .spec {
    position: static;
  }
}

@media (max-width: 520px) {
  .app-hero__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .stats {
    gap: 1.5rem 2rem;
  }
}

/* --------------------------------------------------------------------------
   Reveal on scroll — only when JS is present
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Guide cluster on app pages

   Every guide written for this app. Deliberately a plain list of real links
   rather than cards: this block exists to pass authority to the cluster and to
   give a visitor a reason to stay, and it sits below the fold on the page that
   already made its pitch above.
   -------------------------------------------------------------------------- */

.app-guides__intro {
  margin: -0.35rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.app-guides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.app-guides a {
  display: block;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.app-guides a:hover,
.app-guides a:focus-visible {
  border-color: var(--line-strong);
  transform: translateX(2px);
}

.app-guides strong {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.35;
}

.app-guides span {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Ad slot

   Height is reserved up front, filled or not. AdSense arrives asynchronously
   and after a consent click, so without a reserved box it would shove the page
   down mid-read — a Cumulative Layout Shift penalty on exactly the pages we are
   trying to rank. min-height costs a little whitespace when unfilled and is
   worth it.

   Kept visually quiet and clearly labelled: this sits below the article on a
   page whose value is being trustworthy, and an ad dressed up as content trades
   that away for a fraction of a cent.
   -------------------------------------------------------------------------- */

.ad-slot {
  display: block;
  margin: 2.2rem 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.ad-slot__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Reserve the height a responsive auto unit actually takes, not a token
   placeholder. Measured: AdSense resizes this <ins> to 280px on desktop, so
   reserving 148px meant the page still jumped ~180px when the ad resolved —
   the exact CLS this block exists to avoid. Reserving the real figure means a
   short creative leaves harmless slack instead of shifting the layout.

   Mobile units are shorter, so the reservation drops with the viewport. */
.ad-slot .adsbygoogle {
  display: block;
  min-height: 280px;
}

@media (max-width: 520px) {
  .ad-slot .adsbygoogle {
    min-height: 250px;
  }
}

@media print {
  .ad-slot {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Consent bar

   Only ever rendered when a GA4 id is configured. Anchored bottom-left with a
   max-width rather than spanning the viewport: Google treats interstitials that
   cover content as a ranking problem, and these pages only earn traffic by
   being readable. Decline is styled level with Accept on purpose — a greyed-out
   refusal is a dark pattern and, under GDPR, not freely given consent.
   -------------------------------------------------------------------------- */

.consent-bar {
  position: fixed;
  z-index: 60;
  left: 1rem;
  bottom: 1rem;
  width: min(26rem, calc(100vw - 2rem));
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.consent-bar[hidden] {
  display: none;
}

.consent-bar__copy {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Link styling here is not inherited — .prose does not wrap this — and without
   it the link is the same colour as the surrounding text with no underline,
   leaving it unidentifiable as a link at all. */
.consent-bar__copy a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.consent-bar__copy a:hover,
.consent-bar__copy a:focus-visible {
  color: var(--mint);
}

.consent-bar__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* Full width on small screens so neither button becomes a small tap target. */
@media (max-width: 520px) {
  .consent-bar {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
  }

  .consent-bar__actions .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .consent-bar {
    animation: consent-in 0.3s var(--ease) both;
  }

  @keyframes consent-in {
    from {
      opacity: 0;
      transform: translateY(0.6rem);
    }
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .consent-bar {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  body::before,
  body::after,
  .site-header,
  .site-footer,
  .cta {
    display: none !important;
  }

  .prose,
  .prose li,
  .legal__meta {
    color: #000;
  }

  a {
    text-decoration: underline;
  }
}

/* --------------------------------------------------------------------------
   Data deletion steps

   Play requires the deletion steps be "prominently featured" on this page, so
   they get a card rather than sitting as ordinary prose. This is the one thing
   a user arriving here actually wants.
   -------------------------------------------------------------------------- */

.delete-steps {
  margin: 1.1rem 0 1.4rem;
  padding: 1.1rem 1.1rem 1.1rem 2.4rem;
  border: 1px solid var(--accent-edge);
  border-radius: var(--radius);
  background: var(--accent-wash);
}

.delete-steps li {
  margin: 0.35rem 0;
  font-size: 1rem;
  color: var(--text);
}

.delete-steps li::marker {
  color: var(--accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Guide figures

   Diagrams inside guide prose. Deliberately not screenshots: manufacturer
   skins differ so much that a screenshot of one phone misleads users of
   another, whereas a settings-path diagram stays true across all of them.

   The SVGs read the theme tokens directly, so they follow light/dark without
   a second asset. width/height on the img reserve the box and prevent the
   layout shifting as they load.
   -------------------------------------------------------------------------- */

.prose figure {
  margin: 1.8rem 0;
  padding: 1.1rem 1.1rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.prose figure img,
.prose figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.prose figcaption {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* A lone image in a paragraph gets the same treatment without needing figure
   markup, since the markdown engine emits <p><img></p>. */
.prose p > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.8rem 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* The guide diagrams are drawn on a 400-unit grid, sized so the type inside
   survives being scaled down to a phone. Left to fill a 680px article column
   they render at 1.6x, where their labels are larger than the prose around them
   and the figure dominates the page it is meant to support. Cap them near their
   natural size and centre; the column is theirs only on narrow screens. */
.prose p > img[src^="/assets/guides/"] {
  max-width: 28rem;
  margin-inline: auto;
}

/* These diagrams are drawn on a 400-unit grid, so every pixel the frame takes
   is a pixel of type the reader loses. On a 375px phone the padding above costs
   about 12% of the drawing width — give it back. */
@media (max-width: 30rem) {
  .prose figure img,
  .prose figure svg,
  .prose p > img {
    padding: 0.5rem;
  }
}

@media print {
  .prose figure { break-inside: avoid; }
}