/* ==========================================================================
   MULTITOOL ADS — SHARED SWISS OLED DESIGN SYSTEM (STANDALONE CSS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS — self-hosted, preloaded, and metric-matched so nothing moves.

   What was here before: `@import url(fonts.googleapis.com/...)`. That is the
   slowest possible way to load a font and the direct cause of the text
   jumping on first paint. The browser cannot see an @import until it has
   downloaded and PARSED this file, so the chain was four hops long and fully
   serial: html -> style.css -> googleapis css (new origin: dns+tcp+tls) ->
   gstatic woff2 (another new origin). The page painted in the fallback long
   before the font arrived, then swapped -- and the body face is 2.8% wider
   than Arial, so every paragraph rewrapped and everything below it moved.
   It also asked for 50 faces to use 6.

   What is here now:
     * one VARIABLE file per family (measured: Google serves the same bytes
       for every weight of Outfit and Plus Jakarta Sans -- 16 files were 6),
       served from our own origin on the connection that is already open;
     * `<link rel=preload>` in the base template for the two files the first
       paint needs, so they start downloading beside the stylesheet instead of
       after it;
     * a FALLBACK face per family whose box is the same size as the real one:
       `size-adjust` matches the width (measured against Arial on a 66-char
       corpus) and `ascent/descent-override` match the line box (taken from
       the font's own hhea table). The swap then changes the shape of the
       letters and NOTHING about their geometry, so there is no reflow to see.
   Change a family or a weight -> re-measure both numbers; they are data.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/Outfit-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/Outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  /* 🔴 Calibrate against THIS FACE, never against the bare fallback family. Measuring
     `font-family: Arial` at weight 900 uses the installed Arial BOLD; this face binds Arial
     REGULAR and lets the browser thicken it, which is a different width. Calibrating on the
     first gave 84.4% and left headings 19.6% too narrow -- worse than no adjustment at all.
     Measured from the face itself on the real h1/h2 strings: 104.93% and 103.28%. */
  size-adjust: 104.1%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  /* body copy at weight 400 is the only text that rewraps a page, and it needs 104.73%.
     Weight 500 wants 105.96% and 700 wants 100.8%; both are short labels. */
  size-adjust: 104.7%;
  ascent-override: 103.8%;
  descent-override: 22.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Courier New'), local('Liberation Mono');
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  /* The Fallback face sits directly after the real one: it is what paints while the
     woff2 is in flight, and it occupies exactly the same box. */
  --font-sans: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Outfit Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;

  --bg-main: #000000;
  --text-primary: #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-muted: #94A3B8;
  --text-dim: #64748B;

  --card-bg: rgba(12, 12, 12, 0.78);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-hover-border: rgba(255, 255, 255, 0.55);

  --accent-white: #FFFFFF;
  --accent-glow: rgba(255, 255, 255, 0.35);
}

/* Base Reset & Smooth Scrolling */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--text-secondary);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* 🔴 THE SCROLLBAR IS HIDDEN ON PURPOSE, and that is what removes the jump.

     A classic Windows scrollbar EATS 15px of page width -- it is not drawn over the content, it
     takes the space. Measured on this stand at 1280x900: the two long pages scroll and laid out in
     1265px while the landing page and the deletion page end at exactly 900px and laid out in 1280.
     Everything is centred, so moving between them slid the WHOLE page sideways by 7px -- header,
     heading, body and footer together. Worse, the two short pages sit EXACTLY on the viewport
     height, so on a slightly shorter window they flip too and the jump becomes unpredictable.

     Reserving the gutter (`scrollbar-gutter: stable`) fixed the movement and was rejected on
     sight: on a page that does not scroll the reserved strip is a black band down the side, and
     on a page that does, the browser painted its LIGHT scrollbar there because nothing had told
     it the page is dark -- so the right edge flipped between a bright grey bar and black nothing.
     Hiding the scrollbar removes both at once: nothing is reserved, every page lays out in the
     full window width, and the content sits in the true centre everywhere.

     🔴 The owner made this call knowing the cost, and it is worth writing down rather than
     rediscovering: a scrollbar is mostly a RULER, not a handle -- it says how long the document
     is, where you are and how much is left, and a five-screen legal text now scrolls blind. It
     also overrides "always show scrollbars" for anyone who set it. Scrolling itself is untouched:
     wheel, trackpad, keyboard and touch all work, and `scrollbar-width` hides the bar without
     making anything unscrollable. Measured before agreeing: NO element on any of the four pages
     scrolls inside itself at 1280/900/600/375/320, so nothing loses its only affordance. That
     stops being true the moment a table stops fitting -- then this decision needs revisiting.

     🔴 `overflow-x: hidden` lives here, not on `body`, and moving it up is what made the earlier
     gutter work at all: the viewport takes its scrolling from the root element only while the
     root's own overflow is `visible`. It was, so the viewport took it from `body` instead, and
     the gutter was then ignored on BOTH -- on `html` because it is not the source, on `body`
     because an element whose overflow has propagated away is treated as `visible`. The same rule
     governs the line below: whoever owns the viewport's scrolling owns its scrollbar. */
  overflow-x: hidden;
  scrollbar-width: none;
}

/* Older WebKit has no `scrollbar-width`. Guarded so the two never apply together: Chrome warns
   that sizing the bar through the pseudo-element forces a classic scrollbar back on. */
@supports not (scrollbar-width: none) {
  html::-webkit-scrollbar {
    display: none;
  }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-main);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

::selection {
  background: #FFFFFF;
  color: #000000;
}

/* Volumetric Stage Spotlight Cone Background */
.bg-stage-cone {
  background-color: #000000;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -15%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 50%, transparent 80%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Razor 1px Laser Horizon Top Edge */
.laser-horizon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  pointer-events: none;
  z-index: 100;
}

/* Glass Panels */
.glass-panel {
  background: var(--card-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.65);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover {
  border-color: var(--card-hover-border);
  box-shadow: 0 14px 45px rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Typography Gradient Hero */
.gradient-text-hero {
  background: linear-gradient(135deg, #FFFFFF 30%, #F1F5F9 60%, #94A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Action Button */
.theme-start-btn {
  background: #FFFFFF;
  color: #000000;
  box-shadow: 0 10px 35px rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  font-weight: 900;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-start-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 50px rgba(255, 255, 255, 0.55);
}

.theme-start-btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* Subtle Shimmer */
.shimmer-track {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  overflow: hidden;
  pointer-events: none;
}

.shimmer-track::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 0.12) 40%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(0, 0, 0, 0.12) 60%,
      rgba(255, 255, 255, 0) 100%);
  animation: ambientShimmer 3.5s infinite ease-in-out;
  content: '';
}

@keyframes ambientShimmer {
  0%, 20% { transform: translateX(-100%); }
  80%, 100% { transform: translateX(100%); }
}

/* ==========================================================================
   LEGAL PAGES TYPOGRAPHY & LAYOUT (.prose-legal)
   ========================================================================== */

.legal-container {
  width: 100%;
  max-width: 52rem; /* ~832px optimal reading width */
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem 1.25rem;
}

@media (min-width: 640px) {
  .legal-container {
    padding: 3.5rem 2rem 5rem 2rem;
  }
}

/* Legal Header Nav Bar */
.legal-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 1.25rem;
  margin-bottom: 2.5rem;
  gap: 1rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.back-link:hover {
  opacity: 0.8;
}

.legal-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* 🔴 The current item is BOLDER, and a bolder weight is WIDER -- so switching pages nudged its
   neighbours sideways. Measured across the three legal pages: the footer links moved up to 3px
   and the tab row 1px. Every item therefore carries a hidden copy of its own label at the bold
   weight, in the same grid cell, so the box is always as wide as its widest state and the weight
   change moves nothing. The copy is `content: attr(data-label)` -- it is generated, so it never
   reaches the accessibility tree or the page's text, and the text guard does not see it either.
   Add an item -> give it `data-label`, or it will start jumping again. */
.legal-tab-item,
.footer-legal-links a {
  display: inline-grid;
  grid-template-columns: max-content;
}

.legal-tab-item::after,
.footer-legal-links a::after {
  content: attr(data-label);
  grid-area: 1 / 1;
  font-weight: 700;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.legal-tab-item {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.legal-tab-item:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.15);
}

.legal-tab-item.active {
  color: #000000;
  background: #FFFFFF;
  font-weight: 700;
}

/* Prose Typography Content */
.prose-legal h1 {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .prose-legal h1 {
    font-size: 3rem;
  }
}

.prose-legal .effective-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}

.prose-legal h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.75rem;
}

.prose-legal h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.prose-legal p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .prose-legal p {
    font-size: 1rem;
  }
}

.prose-legal strong {
  color: #FFFFFF;
  font-weight: 600;
}

.prose-legal a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  transition: text-decoration-color 0.2s ease;
}

.prose-legal a:hover {
  text-decoration-color: #FFFFFF;
}

.prose-legal ul, .prose-legal ol {
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
}

.prose-legal li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.prose-legal code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.15rem 0.35rem;
  border-radius: 0.3rem;
  color: #FFFFFF;
}

/* Legal Tables */
.table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0 2rem 0;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 12, 12, 0.5);
}

.prose-legal table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
  /* 🔴 `auto` sizes the columns from their CONTENT, which makes the whole table a knife edge under
     any font substitution: measured here, the first column went 118.8px -> 115.9px on the fallback
     face and that alone pushed several cells onto an extra line, moving 224px of page. The
     metric-matched fallback closes two thirds of that gap and still crosses the threshold. Fixed
     columns take the font out of the decision entirely, and the proportion is a better one than
     "as wide as the longest label" anyway. */
  table-layout: fixed;
}

.prose-legal table th:first-child,
.prose-legal table td:first-child {
  width: 30%;
}

/* The companion `fixed` needs: a column can no longer widen for a long unbreakable token, so
   `business_management` and friends overflowed their cell and were CLIPPED on a narrow screen
   (measured: 4 cells at a 360px container). Breaking inside a word is the only remedy that keeps
   the column fixed, and it only ever fires on tokens that have nowhere else to break. */
.prose-legal th,
.prose-legal td {
  overflow-wrap: break-word;
}

.prose-legal th {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  font-weight: 700;
  font-family: var(--font-display);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.prose-legal td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  line-height: 1.6;
}

.prose-legal tr:last-child td {
  border-bottom: none;
}

/* Shared Footer */
.site-footer {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 1rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  position: relative;
  z-index: 10;
}

.site-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 640px) {
  .site-footer-inner {
    flex-direction: row;
  }
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-weight: 500;
}

.footer-legal-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-links a:hover {
  color: #FFFFFF;
}

/* Was an inline style on the anchor; a class so the ghost above can reserve its width. */
.footer-legal-links a.is-current {
  color: #FFFFFF;
  font-weight: 700;
}

/* ==========================================================================
   LANDING PAGE LAYOUT
   Hand-written to replace the Tailwind CDN build. The CDN is a browser-side
   compiler Tailwind itself marks as not for production: it flashes unstyled
   content and takes the whole layout down with it when the CDN is blocked.
   Nothing on this site loads a third-party script any more.
   ========================================================================== */

.landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.landing-main {
  width: 100%;
  max-width: 72rem;
  /* `auto` on the block axis centres the hero in whatever space the footer
     leaves, which is what keeps the composition optically centred on tall and
     short viewports alike. */
  margin: auto;
  padding: 1rem 1rem 1.5rem;
  text-align: center;
  position: relative;
  z-index: 10;
}

@media (min-width: 640px) {
  .landing-main {
    padding: 3rem 2rem;
  }
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72dvh;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .hero {
    min-height: 0;
    margin-bottom: 0;
  }
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 11vw, 8rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  user-select: none;
}

@media (min-width: 640px) {
  .hero h1 {
    margin-bottom: 1.5rem;
  }
}

.hero-subtitle {
  max-width: 42rem;
  margin: 0 auto 2rem;
  font-size: clamp(0.875rem, 2.2vw, 1.5rem);
  line-height: 1.6;
  color: var(--text-secondary);
  padding: 0 0.5rem;
}

@media (min-width: 640px) {
  .hero-subtitle {
    max-width: 48rem;
    margin-bottom: 3rem;
  }
}

/* START button — sizing lives here so the pill's geometry has one source. */
.theme-start-btn {
  width: 100%;
  max-width: 260px;
  padding: 0.875rem 2.5rem;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .theme-start-btn {
    width: auto;
    padding: 1.25rem 4rem;
    font-size: 1.25rem;
  }
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (min-width: 640px) {
  .hero-cta {
    margin-bottom: 5rem;
  }
}

/* Feature cards */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  max-width: 64rem;
  margin: 0 auto;
  text-align: left;
  padding-top: 1rem;
}

@media (min-width: 640px) {
  .feature-grid {
    gap: 1rem;
    padding-top: 0;
  }
}

@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.feature-card {
  padding: 0.875rem;
  border-radius: 0.75rem;
}

@media (min-width: 640px) {
  .feature-card {
    padding: 1.25rem;
    border-radius: 1rem;
  }
}

/* 🔴 The card titles are real <h2> so the page has an outline a crawler and a screen reader can
   follow -- but a heading brings the browser's own 1.5em and its own weight with it. Measured the
   moment the tag changed: the title went 30px -> 45px, the head 48px -> 72px and the whole card
   130px -> 154px. The size belongs to the CARD, not to the tag, so the heading inherits it. */
.feature-card-head h2 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.feature-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.125rem;
  color: #FFFFFF;
  margin-bottom: 0.25rem;
}

@media (min-width: 640px) {
  .feature-card-head {
    font-size: 1.875rem;
  }
}

.feature-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  flex-shrink: 0;
}

.feature-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

@media (min-width: 640px) {
  .feature-icon {
    width: 2rem;
    height: 2rem;
  }

  .feature-icon svg {
    width: 1rem;
    height: 1rem;
  }
}

.feature-card p {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted);
  margin: 0;
}

@media (min-width: 640px) {
  .feature-card p {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

/* The "not affiliated with Meta" line, on every page. */
.footer-disclaimer {
  color: var(--text-dim);
  text-align: center;
}

/* Icons drawn inline rather than fetched from a CDN. */
.icon {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}