/*
  Droppy Code marketing site, shared design system
  =================================================

  A dark port of the getdroppy.app design system: the same notch dock,
  pills, reveal motion, highlight rail, FAQ and footer, re-tokened for a
  deep code-editor canvas and the blue of the Droppy Code icon. The
  binary field and the tile system are new and live at the bottom.

  Fonts (loaded in the page head): Inter (body/UI), Instrument Sans and
  Inter Tight (display), exactly as on getdroppy.app. Code inside the
  chips uses the Mac's own SF Mono; nothing else is imported.

  No build step. One stylesheet, one page.
*/

/* ---------------------------------------------------------------------- */
/* Design tokens                                                          */
/* ---------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Canvas: an editor-dark navy, a shade warmer than pure black so the
     blue glow and the glass wells still have somewhere to go. */
  --bg-top: #0b0e14;
  --bg-bottom: #0b0e14;
  --bg-well: #131823;
  --bg-well-raised: #1a2030;

  /* The notch and every solid "deeper than the page" block. */
  --ink: #05070b;
  --notch-ink: var(--ink);
  --surface-dark: var(--ink);
  --text-on-dark: #e6ebf3;
  --text-on-dark-soft: rgba(230, 235, 243, 0.68);

  /* Glass: thin light films on the dark canvas. */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-border: transparent;
  --glass-border-strong: transparent;
  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-soft: blur(14px) saturate(150%);

  /* Accent, sampled from the Droppy Code icon's binary field. */
  --accent: #4f9cff;
  --accent-hover: #74b3ff;
  --accent-active: #2f86f5;
  --accent-soft: rgba(79, 156, 255, 0.16);
  --accent-soft-strong: rgba(79, 156, 255, 0.32);
  --accent-glow: rgba(79, 156, 255, 0.45);
  --accent-text: #8cc4ff;

  /* Text */
  --text-primary: #e8edf5;
  --text-secondary: rgba(232, 237, 245, 0.72);
  --text-tertiary: rgba(232, 237, 245, 0.55);
  --text-quaternary: rgba(232, 237, 245, 0.38);

  /* Status */
  --color-success: #3fd08a;
  --color-error: #ff6b6b;
  --color-warning: #fbbf24;

  /* Kept as tokens, intentionally invisible: flat look, no outlines. */
  --border-subtle: transparent;
  --border-strong: transparent;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;

  /* Disabled: flat look, no shadows, no glow effects. */
  --shadow-card: none;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --container-width: 1120px;
  --container-pad: 24px;
  /* The one distance between a section's heading block and what follows it. */
  --gap-heading: 48px;
  --nav-safe-top: env(safe-area-inset-top, 0px);
  --nav-dock-bar-height: 8px;
  --nav-dock-closed-height: 56px;
  --site-hero-nav-gap: 104px;
  --site-hero-content-start: calc(
    var(--nav-safe-top) + var(--nav-dock-bar-height) +
    var(--nav-dock-closed-height) + var(--site-hero-nav-gap)
  );

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
}

/* ---------------------------------------------------------------------- */
/* Reset and base                                                         */
/* ---------------------------------------------------------------------- */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-top);
  /* The same whisper of grain as the Droppy site, inverted for the dark
     canvas so it lifts rather than dirties. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.75 0 0 0 0 0.82 0 0 0 0 0.95 0 0 0 0.035 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Nothing on the page is for taking: no text selection, no dragging a picture or a
   film off the page, no long-press sheet on a phone. The scripts back this up by
   swallowing copy, cut, drag and the context menu. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img, video {
  -webkit-user-drag: none;
  pointer-events: none;
}
/* The theme picker's names are buttons and the FAQ questions are buttons: those keep
   their pointer events; only the media itself is inert. */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code, kbd, pre { font-family: var(--font-mono); }

::selection {
  background: var(--accent-soft-strong);
  color: #fff;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.nav :focus-visible { outline-color: #7ab8ff; }

.skip-link {
  position: fixed;
  top: calc(var(--nav-safe-top) + 12px);
  left: 50%;
  z-index: 101;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  transform: translate(-50%, -160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

section {
  position: relative;
  padding-block: clamp(40px, 6vw, 80px);
}
.section-tight { padding-block: clamp(40px, 6vw, 80px); }


.section-heading {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  color: var(--text-primary);
  text-align: center;
  margin-inline: auto;
  margin-bottom: 18px;
  text-wrap: balance;
}

.section-subtitle {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--text-tertiary);
  line-height: 1.45;
  max-width: 720px;
  text-align: center;
  margin-inline: auto;
  text-wrap: pretty;
}

.text-center { text-align: center; }
.stack-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Glass surfaces                                                         */
/* ---------------------------------------------------------------------- */

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.surface-well {
  background: var(--bg-well);
  border-radius: var(--radius-3xl);
}

/* ---------------------------------------------------------------------- */
/* Reveal-on-load / reveal-on-scroll                                      */
/* ---------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.is-settled { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: 1ms; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Fixed notch navigation, identical geometry to getdroppy.app            */
/* ---------------------------------------------------------------------- */

.nav {
  --notch-bar: var(--nav-dock-bar-height);
  position: fixed;
  top: var(--nav-safe-top);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--nav-safe-top) - 1px);
  left: 0;
  right: 0;
  height: calc(var(--nav-safe-top) + var(--notch-bar) + 2px);
  background: var(--notch-ink);
}

.nav__pill {
  --notch-fillet: 24px;
  --notch-fillet-inset: 0px;
  --pill-pad-right: 7px;
  --pill-pad-left: 12px;
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 2 * var(--notch-fillet) + 2 * var(--notch-fillet-inset));
  height: 56px;
  margin-top: var(--notch-bar);
  padding: 6px calc(var(--pill-pad-right) + var(--notch-fillet-inset)) 6px calc(var(--pill-pad-left) + var(--notch-fillet-inset));
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: var(--notch-ink);
}

.nav__pill::before,
.nav__pill::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--notch-bar));
  width: var(--notch-fillet);
  height: calc(var(--notch-fillet) + var(--notch-bar));
  pointer-events: none;
}
.nav__pill::before {
  left: calc(-1 * var(--notch-fillet) + 1px);
  background: radial-gradient(circle var(--notch-fillet) at 0 100%, transparent calc(var(--notch-fillet) - 1px), var(--notch-ink) var(--notch-fillet));
}
.nav__pill::after {
  right: calc(-1 * var(--notch-fillet) + 1px);
  background: radial-gradient(circle var(--notch-fillet) at 100% 100%, transparent calc(var(--notch-fillet) - 1px), var(--notch-ink) var(--notch-fillet));
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-on-dark);
  margin-right: 10px;
}
.nav__logo img { height: 24px; width: auto; display: block; border-radius: 6px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-right: 8px;
}
.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-on-dark-soft);
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.nav__link:hover,
.nav__link.is-active { color: var(--text-on-dark); }

.btn.nav__cta {
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--text-primary);
  color: var(--ink);
}
.btn.nav__cta:hover { background: #fff; }
.btn.nav__cta:active { background: #cdd5e1; }

.nav__menu {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav__menu span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #e8eaed;
  transition: transform 320ms cubic-bezier(0.32, 1.22, 0.36, 1), opacity 180ms ease;
}
.nav__pill.is-open .nav__menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__pill.is-open .nav__menu span:nth-child(2) { opacity: 0; }
.nav__pill.is-open .nav__menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 720px) {
  :root {
    --nav-dock-closed-height: 54px;
    --site-hero-nav-gap: 58px;
  }
  .nav__pill {
    --pill-pad-right: 10px;
    --pill-pad-left: 14px;
    width: calc(100vw - 2 * var(--notch-fillet) + 2 * var(--notch-fillet-inset) - 8px);
    max-width: calc(100vw - 2 * var(--notch-fillet) + 2 * var(--notch-fillet-inset) - 8px);
    height: auto;
    min-height: var(--nav-dock-closed-height);
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 0;
    padding-right: calc(var(--pill-pad-right) + var(--notch-fillet-inset));
    padding-left: calc(var(--pill-pad-left) + var(--notch-fillet-inset));
  }
  .nav__logo { margin-right: auto; }
  .nav__menu { display: inline-flex; }
  .nav__links {
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-right: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 4px;
    transition:
      max-height 560ms cubic-bezier(0.32, 1.22, 0.36, 1),
      opacity 240ms ease,
      padding 560ms cubic-bezier(0.32, 1.22, 0.36, 1);
  }
  .nav__pill.is-open .nav__links {
    max-height: 360px;
    opacity: 1;
    padding: 10px 4px 8px;
  }
  .nav__link {
    padding: 13px 12px;
    border-radius: 12px;
    font-size: 15px;
  }
  .nav__link:active { background: rgba(255, 255, 255, 0.08); }
}
.nav__links[inert] { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .nav__links, .nav__menu span, .skip-link { transition: none; }
}
@media (max-width: 380px) {
  .nav__pill { --pill-pad-left: 12px; }
  .nav__logo span { display: none; }
}

/* Menu-bar nav dock: on the first page load of a visit the pill springs
   open like the Droppy shelf (shelf curve + blur snapping into focus). A
   head-inline gate adds html.nav-intro-done on later loads so it never
   replays when navigating between pages. Tokens and keyframes are the
   getdroppy.app ones, unchanged. */
:root {
  --nav-dock-duration: 640ms;
  --nav-dock-curve: cubic-bezier(0.32, 1.22, 0.36, 1);
  --nav-dock-intro-delay: 120ms;
  --nav-dock-collapsed-transform: translateY(-6px) scaleX(0.78);
  --nav-dock-collapsed-blur: blur(8px);
  --nav-dock-fade-duration: calc(var(--nav-dock-duration) * 0.55);
  --nav-dock-exit-curve: cubic-bezier(0.32, 1, 0.36, 1);
}
@keyframes navDockExpand {
  0%   { opacity: 0; transform: var(--nav-dock-collapsed-transform); filter: var(--nav-dock-collapsed-blur); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scaleX(1); filter: blur(0); }
}
.nav__pill {
  transform-origin: 50% 0;
  animation: navDockExpand var(--nav-dock-duration) var(--nav-dock-curve)
             var(--nav-dock-intro-delay) both;
}
html.nav-intro-done .nav__pill { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .nav__pill { animation: none; }
}

@supports (border-shape: shape(from 0 0, line to 100% 100%)) {
  .nav__pill {
    --notch-fillet-inset: var(--notch-fillet);
    border-shape: shape(
      from 0 0,
      arc to var(--notch-fillet) var(--notch-fillet) of var(--notch-fillet) cw,
      vline to calc(100% - var(--radius-xl)),
      arc to calc(var(--notch-fillet) + var(--radius-xl)) 100% of var(--radius-xl) ccw,
      hline to calc(100% - var(--notch-fillet) - var(--radius-xl)),
      arc to calc(100% - var(--notch-fillet)) calc(100% - var(--radius-xl)) of var(--radius-xl) ccw,
      vline to var(--notch-fillet),
      arc to 100% 0 of var(--notch-fillet) cw,
      close
    );
  }
  .nav__pill::before,
  .nav__pill::after { content: none; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 20px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--sm { height: 38px; padding-inline: 16px; }

/* Hero CTA pills. The light pill is the canonical download button on
   this dark site (the inverse of Droppy's dark pill on paper); the glass
   pill is its secondary twin with identical geometry. */
.btn--applepill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--text-primary);
  color: var(--ink);
  border-radius: 20px;
  padding: 17px 28px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--applepill:hover { background: #fff; }
.btn--applepill:active { transform: scale(0.98); }
.btn--applepill-logo {
  width: 16px;
  height: 20px;
  flex-shrink: 0;
  margin-top: -2px;
}

.btn--darkpill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--glass-bg-strong);
  color: var(--text-primary);
  border-radius: 20px;
  padding: 16px 27px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--darkpill:hover { background: rgba(255, 255, 255, 0.12); }
.btn--darkpill:active { transform: scale(0.98); }
.btn--darkpill svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------- */
/* Morph hover — the one hover every button on the site shares.            */
/* ---------------------------------------------------------------------- */
/* Ported from getdroppy.app. On hover a button's content dissolves and
   reforms through a thick, real gaussian blur: the label blurs out where
   it stands and a fitting glyph blurs in, centred. Two content layers sit
   stacked in the same place inside the button, the REST face and the
   HOVER face, built at runtime by site.js so button markup stays plain.
   NOTHING SLIDES AND NOTHING RESIZES: the silhouette is identical at rest
   and hovered, only the content changes. */

.btn-morph {
  position: relative;
  --morph-dur: 340ms;
  --morph-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --morph-blur: 16px;
  --morph-tap-dur: 620ms;
}

.btn-morph__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  transition: opacity var(--morph-dur) linear, filter var(--morph-dur) var(--morph-ease);
}

.btn-morph__face--rest {
  opacity: 1;
  filter: blur(0);
}

.btn-morph__face--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(var(--morph-blur));
  pointer-events: none;
}

/* Hover is for pointers only: on iOS Safari a synthesised hover would
   swallow the first tap. Touch gets the same morph from .is-tapmorph. */
@media (hover: hover) and (pointer: fine) {
  .btn-morph--icon:hover .btn-morph__face--rest {
    opacity: 0;
    filter: blur(var(--morph-blur));
  }
  .btn-morph--icon:hover .btn-morph__face--hover {
    opacity: 1;
    filter: blur(0);
  }
  .btn-morph--label:hover .btn-morph__face--rest {
    animation: btn-morph-dissolve var(--morph-dur) var(--morph-ease);
  }
}

.btn-morph--icon.is-tapmorph .btn-morph__face--rest {
  animation: btn-morph-tap-out var(--morph-tap-dur) var(--morph-ease);
}
.btn-morph--icon.is-tapmorph .btn-morph__face--hover {
  animation: btn-morph-tap-in var(--morph-tap-dur) var(--morph-ease);
}
.btn-morph--label.is-tapmorph .btn-morph__face--rest {
  animation: btn-morph-dissolve var(--morph-dur) var(--morph-ease);
}

@keyframes btn-morph-tap-out {
  0% { opacity: 1; filter: blur(0); }
  32% { opacity: 0; filter: blur(var(--morph-blur)); }
  68% { opacity: 0; filter: blur(var(--morph-blur)); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes btn-morph-tap-in {
  0% { opacity: 0; filter: blur(var(--morph-blur)); }
  32% { opacity: 1; filter: blur(0); }
  68% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(var(--morph-blur)); }
}
@keyframes btn-morph-dissolve {
  0% { filter: blur(0); opacity: 1; }
  45% { filter: blur(var(--morph-blur)); opacity: 0.3; }
  100% { filter: blur(0); opacity: 1; }
}

.btn-morph > .btn-morph__face--hover > .btn-morph__mark {
  width: var(--morph-mark-size, 20px);
  height: var(--morph-mark-size, 20px);
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: contain;
  flex: none;
  align-self: center;
  margin: 0;
  position: static;
  inset: auto;
  opacity: 1;
  transform: none;
  transition: none;
}

.btn--applepill.btn-morph,
.btn--darkpill.btn-morph {
  --morph-mark-size: 26px;
}
.footer__cta.btn-morph,
.btn--sm.btn-morph,
.nav__cta.btn-morph {
  --morph-blur: 11px;
  --morph-mark-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-morph,
  .btn-morph__face { transition: none; }
  .btn-morph__face--hover { display: none; }
  .btn-morph--label:hover .btn-morph__face--rest { animation: none; }
  .btn-morph:hover { opacity: 0.85; }
  .btn-morph--icon:hover .btn-morph__face--rest { opacity: 1; filter: none; }
  .btn-morph.is-tapmorph .btn-morph__face--rest,
  .btn-morph.is-tapmorph .btn-morph__face--hover { animation: none; }
}

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

.hero {
  padding-top: var(--site-hero-content-start);
  padding-bottom: clamp(40px, 6vw, 80px);
  overflow: visible;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter Tight", var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
  margin-bottom: 30px;
  transition: color var(--dur-fast) var(--ease-out);
}
.hero__kicker:hover { color: var(--accent-text); }
.hero__kicker-mark {
  width: auto;
  height: 22px;
  border-radius: 6px;
}
.hero__kicker-arrow { width: 14px; height: 14px; opacity: 0.55; }

.hero__title {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 6.4vw, 3.9rem);
  letter-spacing: -0.045em;
  line-height: 1.02em;
  color: var(--text-primary);
  margin-bottom: 26px;
  text-wrap: balance;
}
.hero__apple {
  display: inline-block;
  width: 0.72em;
  height: 0.88em;
  vertical-align: -0.06em;
  margin-right: 0.08em;
  fill: currentColor;
}

/* Hold a compositing hint only while the shared reveal runs. */
.hero__title.reveal:not(.is-settled) { will-change: opacity, transform; }
.hero__mac { white-space: nowrap; }

/* The charged word. Same choreography as "Supercharged" on getdroppy.app:
   once the headline's reveal settles, a strike drops into the word from
   the top of the viewport (850ms), an arrival bloom pulses once (900ms)
   and a sheen keeps sweeping through the letters (3.2s, linear, forever).
   Droppy's strike is a lightning bolt; here it is a stream of ones and
   zeros, and the sheen carries a row of digits instead of a bolt. */
.hero__charged {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: var(--accent-text);
}
.hero__charged-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' viewBox='0 0 240 64'%3E%3Ctext x='0' y='40' font-family='SF Mono,Menlo,monospace' font-size='22' font-weight='600' fill='%23ffffff' fill-opacity='.55' letter-spacing='6'%3E0110100101%3C/text%3E%3C/svg%3E"),
    linear-gradient(105deg, rgb(79 156 255 / 12%) 0%, rgb(140 196 255 / 55%) 35%, rgb(255 255 255 / 85%) 50%, rgb(140 196 255 / 55%) 65%, rgb(79 156 255 / 12%) 100%);
  background-size: 240px 100%;
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
}
.hero__charge-entry {
  position: absolute;
  left: calc(50% - 90px);
  bottom: 45%;
  width: 180px;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  fill: #cfe3ff;
  opacity: 0;
}
.hero__charge-entry .dim { fill: #8cc4ff; fill-opacity: 0.55; }
.hero__charged::after {
  content: "";
  position: absolute;
  inset: -0.08em -0.12em;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, rgb(79 156 255 / 28%), transparent 68%);
  opacity: 0;
}
.hero__title:not(.is-settled) .hero__charged-sheen,
.hero__title:not(.is-settled) .hero__charge-entry,
.hero__title:not(.is-settled) .hero__charged::after { display: none; }
.hero__title.is-settled .hero__charged-sheen {
  opacity: 0.74;
  animation: hero-charge-sheen 3.2s linear infinite;
}
.hero__title.is-settled .hero__charge-entry {
  animation: hero-charge-entry 850ms linear 340ms both;
}
.hero__title.is-settled .hero__charged::after {
  animation: hero-charge-arrival 900ms ease-out 420ms both;
}
@keyframes hero-charge-entry {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  5% { opacity: 0.9; }
  12% { opacity: 1; clip-path: inset(0 0 0 0); }
  26% { opacity: 0.65; }
  55% { opacity: 0.18; }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes hero-charge-arrival {
  0% { opacity: 0; transform: scale(0.65); }
  32% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes hero-charge-sheen {
  from { background-position: 0 0; }
  to { background-position: 240px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title.reveal:not(.is-settled) { will-change: auto; }
  .hero__title.is-settled .hero__charged-sheen,
  .hero__title.is-settled .hero__charge-entry,
  .hero__title.is-settled .hero__charged::after { display: none; animation: none; opacity: 0; }
}

.hero__subtitle {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--text-primary);
  opacity: 0.62;
  max-width: 760px;
  margin-bottom: 34px;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__droppy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out);
}
.hero__droppy-link img { width: 18px; height: 18px; border-radius: 5px; }
.hero__droppy-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero__droppy-link:hover { color: var(--text-primary); }


/* The binary field behind the hero. One canvas, fixed to the hero's box,
   masked so it melts into the page before the promo block. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero__field canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hero film: the real app, captured from its own capture mode, in the same block
   geometry as the Droppy promo film. */
.hero__film { aspect-ratio: 2400 / 1646; }
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero media block, same container geometry as the Droppy promo film. */
.media-block {
  position: relative;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: var(--bg-well);
}
.hero__media {
  position: relative;
  z-index: 1;
  margin-top: clamp(48px, 7vw, 84px);
}

/* ---------------------------------------------------------------------- */
/* Feature cards + Apple-style highlight rail (ported from the home page) */
/* ---------------------------------------------------------------------- */

.fcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--bg-well);
  overflow: hidden;
}
.fcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 32px 24px;
  flex: 1 0 auto;
}
.fcard__title {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  color: var(--text-primary);
  margin: 0 0 6px;
}
.fcard__sub {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
  max-width: 46ch;
}
.fcard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.fcard__media--window { aspect-ratio: 2080 / 1426; }
.fcard__media-video,
.fcard__media-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-highlights {
  --highlight-card-width: min(820px, calc(100vw - 48px));
  --highlight-page-gutter: max(24px, calc((100vw - 1240px) / 2 + 24px));
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
}
.showcase-highlights__head,
.showcase-highlights__controls {
  width: min(100%, 1240px);
  margin-inline: auto;
  padding-inline: 24px;
}
.showcase-highlights__head { text-align: center; }
.showcase-highlights__title {
  margin: 0;
  font-family: "Inter Tight", var(--font-display);
  font-size: clamp(2.3rem, 4.8vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.98;
  color: var(--text-primary);
}
.showcase-highlights__sub {
  max-width: none;
  margin: 18px 0 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.5;
  white-space: nowrap;
}
.showcase-highlights__rail {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--highlight-card-width);
  gap: 20px;
  width: 100%;
  margin-top: var(--gap-heading);
  padding: 0 var(--highlight-page-gutter) 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: var(--highlight-page-gutter);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.showcase-highlights__rail::-webkit-scrollbar { display: none; }
.showcase-highlights__rail.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
.highlight-card {
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-radius: 32px;
}
.highlight-card .fcard__head {
  flex: 1 0 auto;
  min-height: 150px;
  padding: 32px 36px 28px;
}
.highlight-card .fcard__title { font-size: clamp(1.65rem, 2.7vw, 2.25rem); }
.highlight-card .fcard__sub {
  max-width: 52ch;
  font-size: clamp(0.98rem, 1.45vw, 1.08rem);
}
.highlight-card .fcard__media { flex: 0 0 auto; aspect-ratio: 16 / 9; }
.showcase-highlights__controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}
.showcase-highlights__arrow {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out), opacity 180ms ease;
}
.showcase-highlights__arrow:hover:not(:disabled) {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.14);
}
.showcase-highlights__arrow:active:not(:disabled) { transform: scale(0.96); }
.showcase-highlights__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.showcase-highlights__arrow:disabled { opacity: 0.28; cursor: default; }
.showcase-highlights__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}
@media (max-width: 720px) {
  .fcard__head { padding: 24px 24px 18px; }
  .showcase-highlights__head,
  .showcase-highlights__controls { padding-inline: 18px; }
  .showcase-highlights__sub { white-space: normal; }
  .showcase-highlights__rail { gap: 14px; }
  .highlight-card { border-radius: 26px; }
  .highlight-card .fcard__head { min-height: 0; padding: 24px 24px 20px; }
  .showcase-highlights__arrow { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-highlights__rail { scroll-behavior: auto; }
  .showcase-highlights__arrow { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Tiles: the one card system                                              */
/* ---------------------------------------------------------------------- */
/* Every card on the page is a tile: a big-radius well with generous
   padding, one bold label, and either a large illustration or a visual
   that is allowed to bleed off the edge. Nothing else lives in a tile: no
   small icon chips, no key caps, no paragraphs under paragraphs. */

.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(260px, auto);
  gap: 20px;
  margin-top: var(--gap-heading);
}
.tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 40px;
  background: var(--bg-well);
  padding: 48px;
}
.tile--wide { grid-column: span 4; }
.tile--half { grid-column: span 3; }
.tile--tall { grid-column: span 2; grid-row: span 2; }
.tile--full { grid-column: span 6; }

/* A centred illustration with a plain caption under it. */
.tile--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}
.tile__caption {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 44ch;
  text-wrap: balance;
}

/* Three (or more) items: a large glyph over a bold two-line label. */
.tile--trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 24px;
  text-align: center;
}
.trio__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.trio__item svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trio__item svg .fill { fill: var(--text-primary); stroke: none; }
.trio__label {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* A visual filling the tile with the label sitting on it, bottom-left. */
.tile--visual { padding: 0; }
.tile__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tile__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 120px 32px 32px;
  background: linear-gradient(180deg, rgba(19, 24, 35, 0) 0%, rgba(19, 24, 35, 0.92) 55%, #131823 100%);
}
.tile__overlay h3,
.tile__label {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.tile__overlay p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 30ch;
}

/* A heading with a paragraph, and stacked rows bleeding off the right. */
.tile--split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: center;
  min-height: 300px;
}
.tile__heading {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: 30px;
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}
.tile__text {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-tertiary);
  max-width: 30ch;
  text-wrap: pretty;
}

/* Captures inside tiles: a label, a line, the capture at the tile's full width. */
.tile--film {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 0;
}
.tile--film .tile__caption { margin-bottom: 22px; max-width: 60ch; }
.tile__film {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px 24px 0 0;
  margin-top: auto;
}
.tile--full.tile--film .tile__film { border-radius: 28px 28px 0 0; }

/* Captures inside tiles. */
.tile__shot {
  display: block;
  width: min(520px, 100%);
  height: auto;
  border-radius: 20px;
}
.tile__art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.tile--plain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.tile--plain .tile__caption { max-width: 34ch; text-wrap: pretty; }

/* Agents: eight marks in one tile. */
.tile--agents {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 20px;
  margin-top: var(--gap-heading);
  padding: 56px 48px;
}
.agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.agent__mark { display: grid; place-items: center; width: 56px; height: 56px; color: var(--text-primary); }
.agent__mark svg { width: 48px; height: 48px; }
.agent__name {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.agents__note {
  margin-top: 26px;
  text-align: center;
  font-size: 15px;
  color: var(--text-tertiary);
}
.agents__note code {
  font-size: 13px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.07);
  padding: 2px 7px;
  border-radius: 6px;
}

@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; }
  .tile { padding: 36px; border-radius: 32px; }
  .tile--wide, .tile--half, .tile--full { grid-column: span 2; }
  .tile--tall { grid-column: span 2; grid-row: auto; min-height: 460px; }
  .tile--agents { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 12px; }
}
@media (max-width: 620px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { padding: 28px; border-radius: 28px; }
  .tile--wide, .tile--half, .tile--full, .tile--tall { grid-column: auto; }
  .tile--trio { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tile--split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tile__rows { margin: 8px -28px 0 0; }
  .tile--agents { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 36px 24px; }
  .agent__name { font-size: 18px; }
}

/* ---------------------------------------------------------------------- */
/* Built for the Mac: stat strip + "left out" list                        */
/* ---------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: var(--gap-heading);
}
.stat {
  min-width: 0;
  padding: 22px 12px 20px;
  text-align: center;
}
.stat__value {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1;
}
.stat__label {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-tertiary);
}
@media (max-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child:nth-child(odd) { grid-column: span 2; }
}

.leftout {
  /* A second heading block inside the section: the same distance as between sections. */
  margin-top: clamp(40px, 6vw, 80px);
}
.leftout .section-heading { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.leftout__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-top: var(--gap-heading);
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-quaternary);
}

/* ---------------------------------------------------------------------- */
/* Free & open source (takes the pricing slot)                             */
/* ---------------------------------------------------------------------- */

.free {
  max-width: 560px;
  margin: var(--gap-heading) auto 0;
  padding: 48px;
  border-radius: 40px;
  background: var(--bg-well);
  position: relative;
  overflow: hidden;
  /* Centred, as the pricing card on getdroppy.app is. */
  text-align: center;
}
.free__app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 22px;
}
.free__app img { width: 34px; height: 34px; border-radius: 9px; }
.free__app small {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--text-tertiary);
}
.free__app span { text-align: left; }
.free__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 4.25rem);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text-primary);
}
.free__price small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text-tertiary);
}
.free__lines {
  margin: 24px auto 26px;
  display: inline-grid;
  gap: 10px;
  text-align: left;
}
.free__lines li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-secondary);
}
.free__lines svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: var(--color-success);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.free .btn--applepill { width: 100%; justify-content: center; }
.free__foot {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-quaternary);
}
.free__foot a { color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 3px; }
.free__foot a:hover { color: var(--text-primary); }

/* ---------------------------------------------------------------------- */
/* FAQ accordion                                                          */
/* ---------------------------------------------------------------------- */

.faq__title {
  text-align: center;
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  color: var(--text-primary);
  margin: 0 auto;
}
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin-top: var(--gap-heading);
}
.faq__item {
  min-width: 0;
  border-radius: 22px;
  background: var(--bg-well);
  display: flex;
  flex-direction: column;
}
.faq__question {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 26px 28px;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
}
.faq__question-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__question-icon > svg { display: block; }
.faq__item.is-open .faq__question-icon { transform: rotate(45deg); color: var(--accent-text); }
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { overflow: hidden; }
.faq__answer-content {
  padding: 0 28px 26px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.65;
}
.faq__answer-content a { color: var(--accent-text); }
.faq__answer-content code {
  font-size: 12.5px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 5px;
}
@media (max-width: 760px) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------- */
/* Outro                                                                   */
/* ---------------------------------------------------------------------- */

.outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(72px, 10vw, 140px) clamp(64px, 10vw, 120px);
  overflow: hidden;
}
.outro__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 100%);
}
.outro__field canvas { width: 100%; height: 100%; display: block; }
.outro__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.outro__icon-wrap { position: relative; margin-bottom: 32px; }
.outro__icon {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  display: block;
}
.outro__icon-wrap::before { content: none; }
.outro__title {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  font-size: clamp(2.1rem, 5vw, 3rem);
  color: var(--text-primary);
  margin-bottom: 18px;
  text-wrap: balance;
}
.outro__subtitle {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--text-primary);
  opacity: 0.6;
  max-width: 640px;
  margin-bottom: 34px;
  text-wrap: pretty;
}

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

.footer {
  padding-block: clamp(56px, 7vw, 88px) 0;
  position: relative;
}
.footer > * { position: relative; z-index: 1; }
.footer__wordmark {
  overflow: hidden;
  height: clamp(90px, 13vw, 190px);
  margin-top: clamp(40px, 6vw, 72px);
}
.footer__wordmark span {
  display: block;
  text-align: center;
  font-family: "Inter Tight", var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 15.5vw, 16rem);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: rgba(232, 237, 245, 0.05);
  user-select: none;
  white-space: nowrap;
  will-change: transform;
  transform: translateY(0.06em);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
  justify-items: center;
  text-align: center;
}
.footer__brand { display: flex; flex-direction: column; align-items: center; }
.footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin-bottom: 20px;
}
.footer__logo img { width: auto; height: 48px; border-radius: 12px; }
.footer__tagline {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin: 0 0 14px;
}
.footer__desc {
  color: var(--text-tertiary);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 auto 24px;
}
.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--text-primary);
  color: var(--ink);
  border-radius: 20px;
  padding: 13px 22px;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out);
}
.footer__cta:hover { background: #fff; }
.footer__cta svg { width: 14px; height: 17px; flex-shrink: 0; margin-top: -2px; }
.footer__copyright { margin: 28px 0 16px; color: var(--text-quaternary); font-size: var(--text-sm); }
.footer__byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  margin: 0;
}
.footer__face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.footer__madeby {
  margin: 12px 0 0;
  font-size: var(--text-sm);
  color: var(--text-quaternary);
}
.footer__madeby a {
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__madeby a:hover { color: var(--text-primary); }
.footer__head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin: 0 0 6px;
}
.footer__col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer__col a {
  color: var(--text-tertiary);
  font-size: var(--text-base);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--text-primary); }
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__wordmark span { font-size: 17vw; }
}
@media (max-width: 480px) {
  :root { --container-pad: 18px; }
  .nav__pill { min-height: var(--nav-dock-closed-height); }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions > * { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------- */
/* Code elements                                                           */
/* ---------------------------------------------------------------------- */

/* The demo films are whole windows in their own proportions, never cropped to 16:9. */
.wordscroll__demo-video { aspect-ratio: 2400 / 1646; object-fit: contain; }

/* Theme picker: one big window in the chosen theme, and the names to pick from. Lives
   inside the second wordscroll's demo slot. */
.themes {
  position: relative;
  /* The window, its 26 names and the caption all fit the pinned stage together. */
  width: min(1040px, 86vw, calc(60vh * 2080 / 1426));
  background: transparent;
  overflow: visible;
}
.themes__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2080 / 1426;
  border-radius: clamp(14px, 1.8vw, 24px);
  overflow: hidden;
  background: var(--ink);
}
.themes__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms var(--ease-out-soft);
}
.themes__stage img.is-current { opacity: 1; }
.themes__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin-top: 18px;
}
.themes__name {
  appearance: none;
  border: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.themes__name:hover { color: var(--text-primary); }
.themes__name.is-current { background: var(--text-primary); color: var(--ink); }
.themes__caption {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-quaternary);
}
@media (max-width: 720px) {
  .themes { width: 92vw; }
  .themes__name { padding: 6px 10px; font-size: 12px; }
}

/* Binary twinkles for the wordscroll stages (replaces Droppy's sparks). */
.wordscroll__bits {
  position: absolute;
  inset: 0 0 45% 0;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-text);
}
.wordscroll__bits span {
  position: absolute;
  opacity: 0;
  animation: bit-twinkle 4.5s ease-in-out infinite;
}
.wordscroll__bits span:nth-child(1) { top: 12%; left: 20%; animation-delay: 0.1s; }
.wordscroll__bits span:nth-child(2) { top: 30%; left: 70%; animation-delay: 0.7s; font-size: 16px; }
.wordscroll__bits span:nth-child(3) { top: 8%; left: 50%; animation-delay: 1.3s; }
.wordscroll__bits span:nth-child(4) { top: 36%; left: 38%; animation-delay: 1.9s; }
.wordscroll__bits span:nth-child(5) { top: 18%; left: 80%; animation-delay: 2.4s; font-size: 16px; }
.wordscroll__bits span:nth-child(6) { top: 42%; left: 14%; animation-delay: 3s; }
.wordscroll__bits span:nth-child(7) { top: 6%; left: 32%; animation-delay: 3.5s; }
.wordscroll__bits span:nth-child(8) { top: 24%; left: 90%; animation-delay: 4.1s; }
.wordscroll__bits span:nth-child(9) { top: 46%; left: 60%; animation-delay: 4.6s; font-size: 16px; }
.wordscroll__bits span:nth-child(10) { top: 15%; left: 6%; animation-delay: 1s; }
.wordscroll__bits span:nth-child(11) { top: 52%; left: 84%; animation-delay: 2.8s; }
.wordscroll__bits span:nth-child(12) { top: 58%; left: 26%; animation-delay: 3.9s; font-size: 16px; }
@keyframes bit-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.5; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .wordscroll__bits span { animation: none; opacity: 0.25; } }