/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

:root {
  /* Light-only color tokens. The site no longer ships a dark
     variant - light is the only mode. Values lifted from
     paste.app: rgb(245,245,247) page bg + rgb(16,16,16) warm-
     black text + rgb(171,171,176) muted body. */
  --bg: rgb(245, 245, 247);
  --surface: rgba(0, 0, 0, 0.04);
  --surface-hover: rgba(0, 0, 0, 0.07);
  --border: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.14);
  --text-1: rgb(16, 16, 16);
  --text-2: rgb(171, 171, 176);
  --text-3: rgb(171, 171, 176);
  --accent: #0088FF;
  --accent-dark: #006FCC;
  --accent-glow: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.12);
  --accent-r: 0;
  --accent-g: 136;
  --accent-b: 255;

  /* Paste's actual type system - more interesting than it first looks:
     - Headings: system-ui (SF Pro Display on Mac). Paste renders ALL
       their h1/h2/h3 in the OS native font, NOT in Inter. SF Pro at
       weight 700 with positive letter-spacing reads as more "Apple
       marketing page" than Inter, which is too geometric at display
       sizes.
     - Body: Inter. Cleaner than system-ui at small sizes, supports
       the OpenType features (cv11, ss01, tnum) that Paste uses.
     - Mono: Fragment Mono. UI accents only. */
  --font: 'Inter', -apple-system, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Inter', -apple-system, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-text: 'Inter', -apple-system, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  /* Headings-only stack - lifted straight from Paste's framer presets.
     `system-ui` is the OS UI font (SF Pro Display on Mac, Segoe UI on
     Windows). The full chain mirrors Paste's fallback list. */
  --font-headings: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  /* Paste's shadow tiers - three discrete steps, all very subtle. The site
     uses these in light mode where they actually register; dark mode falls
     back to inset hairlines (defined per-component). */
  --shadow-hairline: 0 0.46px 0.46px rgba(0,0,0,0.10);
  --shadow-soft:     0 2px 8px rgba(0,0,0,0.06), 0 1px 15px rgba(0,0,0,0.10);
  --shadow-glow:     0 0 30px rgba(16,16,16,0.10);

  /* Paste-style "warm black" text. Reserved for use INSIDE the light-mode
     block below; dark mode still uses #fff because rgb(16,16,16) on a dark
     surface is invisible. */
  --paste-text-primary: rgb(16, 16, 16);
  --paste-text-secondary: rgb(171, 171, 176);
  --paste-surface: rgb(245, 245, 247);

  /* Paste's go-to entrance easing - they pair this with a perspective(1200px)
     transform for a subtle 3D depth on every appear-on-scroll. */
  --ease-paste: cubic-bezier(0.22, 1, 0.36, 1);

  /* Apple type-scale letter-spacing curve */
  --ls-96: -0.015em;
  --ls-80: -0.015em;
  --ls-64: -0.009em;
  --ls-56: -0.005em;
  --ls-48: -0.003em;
  --ls-40: 0em;
  --ls-32: 0.004em;
  --ls-28: 0.007em;
  --ls-24: 0.009em;
  --ls-21: 0.011em;
  --ls-19: 0.012em;
  --ls-17: -0.022em;
  --ls-14: -0.016em;
  --ls-12: -0.01em;

  --max-w: 1200px;
  --nav-h: 64px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
}

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-17);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Inter feature settings - direct port from Paste:
     - cv11: "single-storey a" alt for a cleaner look
     - ss01: stylistic set (rounded i, l)
     - "tnum" 1: tabular numbers so $4.99 / v1.0 / dates line up
       in fixed columns without jitter. */
  font-feature-settings: "cv11", "ss01", "tnum" 1;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== TYPOGRAPHY ===== */
.grad-text { color: var(--text-1); }
.accent-text { color: var(--accent); }

/* ===== NAVIGATION ===== */
nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 880px;
  height: var(--nav-h);
  z-index: 1000;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  /* Paste-style sticky nav: lighter, less-saturated translucent
     glass. This is the *base* (dead code from the old dark site);
     the light-mode rule below overrides for the actual page. */
  background: rgba(20,20,22,0.62);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9999px;
  transition:
    background  0.4s var(--ease-paste),
    border-color 0.4s var(--ease-paste),
    box-shadow  0.4s var(--ease-paste);
  box-shadow:
    0 0.46px 0.46px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.08),
    0 1px 15px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.10);
  overflow: hidden;
}
nav::after { display: none; }
nav.scrolled {
  background: rgba(20,20,20,0.62);
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
.nav-inner {
  max-width: 100%;
  margin: 0;
  padding: 0 24px 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-cta { margin-right: -7px; }
.nav-logo {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo img {
  width: auto;
}
.nav-logo .nav-icon {
  height: 28px;
}
/* The icon is the Termi brand mark. Height tuned to sit
   alongside the icon at roughly the old text's visual weight. */
.nav-logo .nav-wordmark {
  height: 20px;
}
.nav-links {
  display: flex;
  gap: 22px;
}
.nav-links a {
  padding: 7px 16px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: #86868B;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: #fff;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  /* Subtle dark-tinted pill visible against the white nav glass.
     Was rgba(255,255,255,0.05) - a near-invisible white tint -
     designed for the old dark-mode nav. */
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-1);
  transition: background 0.2s, border-color 0.2s;
}
.nav-cta:hover {
  background: rgba(0,0,0,0.09);
  border-color: rgba(0,0,0,0.14);
}
.nav-cta svg { width: 18px; height: 18px; display: block; }

/* Mobile nav */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text-2);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ===== CTA BUTTONS ===== */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: #ffffff;
  color: #111111;
  font-size: 16px;
  font-weight: 700;
  border-radius: 9999px;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter    0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-primary:hover {
  /* Slight lift + subtle scale; the blue glow comes from the
     light-mode override below (which uses filter:drop-shadow
     so it survives the universal `* { box-shadow: none !important }`
     reset further down the stylesheet). */
  transform: translateY(-2px) scale(1.03);
  background: #eaeaea;
}
.cta-primary svg {
  width: 22px;
  height: 22px;
  position: relative;
  top: -1px;
  transition: transform 0.45s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.cta-primary:hover svg {
  /* Small overshoot scale on the Apple icon – plays into the
     button "reacting" to your cursor without overdoing it. */
  transform: scale(1.18);
}

/* ===== CARDS ===== */
.card {
  background: #121214;
  border: none;
  border-radius: var(--r-md);
  padding: 36px;
}

/* ===== AMBIENT BLOBS ===== */
.blob { display: none; }

/* ===== HERO ===== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 32px 100px;
  min-height: 100vh;
}
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg::after { display: none; }
/* min-width capped at the viewport so the hero never forces the
   page wider than the device on phones; on desktops it still gets
   the full 720px target for the h1's intended wrap shape. */
.hero-content { position: relative; z-index: 2; max-width: 720px; min-width: min(720px, 100%); }
.hero-icon {
  position: relative;
  /* Apple-style superellipse "squircle" (n=4), shared by the video
     and the glass overlay via clip-path. It's percentage-based so it
     scales to the 108px desktop and 88px mobile icon, and clip-path
     polygons work in Safari + Chrome. */
  --squircle: polygon(100.00% 50.00%, 99.88% 65.65%, 99.52% 72.08%, 98.91% 76.94%, 98.06% 80.93%, 96.96% 84.33%, 95.59% 87.27%, 93.96% 89.82%, 92.04% 92.04%, 89.82% 93.96%, 87.27% 95.59%, 84.33% 96.96%, 80.93% 98.06%, 76.94% 98.91%, 72.08% 99.52%, 65.65% 99.88%, 50.00% 100.00%, 34.35% 99.88%, 27.92% 99.52%, 23.06% 98.91%, 19.07% 98.06%, 15.67% 96.96%, 12.73% 95.59%, 10.18% 93.96%, 7.96% 92.04%, 6.04% 89.82%, 4.41% 87.27%, 3.04% 84.33%, 1.94% 80.93%, 1.09% 76.94%, 0.48% 72.08%, 0.12% 65.65%, 0.00% 50.00%, 0.12% 34.35%, 0.48% 27.92%, 1.09% 23.06%, 1.94% 19.07%, 3.04% 15.67%, 4.41% 12.73%, 6.04% 10.18%, 7.96% 7.96%, 10.18% 6.04%, 12.73% 4.41%, 15.67% 3.04%, 19.07% 1.94%, 23.06% 1.09%, 27.92% 0.48%, 34.35% 0.12%, 50.00% 0.00%, 65.65% 0.12%, 72.08% 0.48%, 76.94% 1.09%, 80.93% 1.94%, 84.33% 3.04%, 87.27% 4.41%, 89.82% 6.04%, 92.04% 7.96%, 93.96% 10.18%, 95.59% 12.73%, 96.96% 15.67%, 98.06% 19.07%, 98.91% 23.06%, 99.52% 27.92%, 99.88% 34.35%);
  width: 108px;
  height: 108px;
  border-radius: 26px;
  margin: 0;
  display: block;
  /* Layered drop shadow: a tight contact shadow + a soft ambient
     halo gives the icon a "floating" 3D quality on the light grey
     hero. Uses filter (not box-shadow) so the shadow follows the
     video's rounded corners even on browsers that composite
     <video> on a separate layer. */
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18))
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.18))
    drop-shadow(0 28px 52px rgba(0, 0, 0, 0.16));
  /* 3D tilt is driven by JS rAF (see hero-icon-tilt block at
     bottom of <script>); set the perspective baseline here so
     initial paint matches what JS will animate. */
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  will-change: transform;
}
/* The actual video inside the .hero-icon wrapper. The wrapper
   owns sizing/shadow/tilt; the video just fills it. */
.hero-icon-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  clip-path: var(--squircle);
}
/* "Liquid Glass" depth pass. macOS 26 renders app icons live with a
   top specular sheen, a bright beveled top rim, and a soft inner
   bottom shadow – none of which is in our flat source art. We
   approximate it with a single non-interactive overlay ABOVE the
   video (last paint, so it survives the icon's preserve-3d tilt),
   kept transparent through the middle so the climbing mascot and
   his eyes still read clearly. */
.hero-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--squircle);
  pointer-events: none;
  z-index: 3;
  background:
    /* crisp specular band hugging the very top edge */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.18) 6%,
      rgba(255, 255, 255, 0) 14%),
    /* broad top-light sheen, gone by mid-icon */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.08) 26%,
      rgba(255, 255, 255, 0) 50%);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.50),  /* faint top inner light */
    inset 0 -12px 22px rgba(0, 0, 0, 0.30),       /* deep bottom inner shadow → 3D depth */
    inset 0 -2px 3px rgba(0, 0, 0, 0.20);         /* crisp bottom contact */
}
/* Edge rim that traces the squircle (an SVG-stroked superellipse, not
   an inset box-shadow – box-shadow gets eaten by the clip-path at the
   corners and never reads as a continuous rim). Gradient stroke is
   bright at the top and fades toward the bottom so the icon reads as a
   lit, rounded, 3D tile rather than a flat sticker. Sits above the
   sheen so the edge light is crisp. */
.hero-icon-rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  /* The rim polygon sits ON the silhouette edge (a=50). Clipping to the
     same squircle keeps only the stroke's inner half, so the rim hugs
     the edge flush — no gap, no outward spill — and follows the corners. */
  clip-path: var(--squircle);
}
/* Static black masks that sit behind the white pupil overlays
   and cover the natural pupils baked into the video, so only
   our cursor-tracking overlays are visible. Sized just larger
   than the natural pupils (~5px) so coverage is complete even
   when the white overlay drifts off-center. */
.hero-eye-mask {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #21201F;
  pointer-events: none;
  transform: translate(-50%, -50%);
  /* Hidden until the mascot has climbed up – the wrapper gets the
     .hero-mascot-visible class via the hero-icon-mascot-reveal JS
     block once the video is in its final ~1.5s. */
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-eye-mask-left  { left: 41.0%; top: 46.8%; }
.hero-eye-mask-right { left: 65.7%; top: 45.6%; }

/* White pupil overlays that sit on top of the eye-masks and
   track the cursor (see hero-icon-pupils JS block). Small on
   purpose – the black mask underneath is what does the hiding;
   the white dot is just the visible "pupil" the user sees move. */
.hero-pupil {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: #ffffff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform;
  /* Same reveal-on-mascot-climb gating as .hero-eye-mask. */
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-pupil-left  { left: 41.0%; top: 46.8%; }
.hero-pupil-right { left: 65.7%; top: 45.6%; }

/* Reveal masks + pupils when the mascot has climbed up. The class
   is toggled on .hero-icon by the JS reveal block. */
.hero-icon.hero-mascot-visible .hero-eye-mask,
.hero-icon.hero-mascot-visible .hero-pupil {
  opacity: 1;
}
/* Touch devices have no hovering cursor to track, so hide both the
   black eye-mask discs and the white pupil overlays entirely – the
   natural pupils baked into the video are what the user sees. */
@media (hover: none) {
  .hero-eye-mask,
  .hero-pupil {
    display: none;
  }
}

/* Hero speech bubble – a one-time intro gag. While the mascot is
   still off-screen / climbing (notch empty), a small bubble pops in
   off the icon's upper-right, then fades out as his face appears.
   The .hero-icon-stage wrapper is an UNtransformed positioning
   context so the bubble anchors to the icon WITHOUT inheriting the
   icon's 3D cursor-tilt. (The masks/pupils live inside .hero-icon
   and DO inherit the tilt on purpose – they're on his face; the
   bubble just floats beside him.) JS toggles .is-visible. */
.hero-icon-stage {
  position: relative;
  /* Shrink-wrap the icon (whatever size it is at the current
     breakpoint – it's smaller on mobile) and center it. This keeps
     the stage's center exactly on the icon's center, so the bubble's
     left:50% always lands dead-centered on the icon. */
  width: fit-content;
  margin: 40px auto 44px;
}
.hero-bubble {
  position: absolute;
  left: 50%; /* centered on the icon */
  /* Anchor to the icon's TOP (100% of the shrink-wrapped stage) plus
     a tiny gap, so the spacing is identical regardless of icon size
     across breakpoints. */
  bottom: calc(100% + 2px);
  transform-origin: center bottom;
  white-space: normal;
  width: max-content;
  max-width: min(420px, 88vw);
  text-align: center;
  padding: 9px 14px;
  border-radius: 15px;
  background: #ffffff;
  color: #1d1d1f;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 8px 24px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.6) translateY(6px);
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 6;
}
.hero-bubble.is-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1) translateY(0);
}
/* Tail: a rotated square sharing the bubble fill, tucked behind the
   body at the lower-left so only a triangle pokes out toward the icon. */
.hero-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -7px;
  bottom: -5px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 0 0 4px 0;
  transform: rotate(45deg);
  z-index: -1;
}
/* Reduced motion: skip the bouncy entrance. The auto-intro is also
   skipped in JS (the climb is paused), but the click-to-talk bubble
   can still appear on demand – it just fades in instead of popping. */
@media (prefers-reduced-motion: reduce) {
  .hero-bubble {
    transition: opacity 0.2s ease;
    transform: translateX(-50%);
  }
  .hero-bubble.is-visible {
    transform: translateX(-50%);
  }
}
.hero h1 {
  /* Paste hero recipe (preset 9jpwi8):
     - system-ui (SF Pro Display on Mac), NOT Inter
     - weight 700 (Paste's h1 is bold, not semibold)
     - +0.6px letter-spacing (positive, unusual on display type)
     - line-height ~1.03 (very tight, almost cap-height) */
  font-family: var(--font-headings);
  font-size: 80px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.03;
  margin-bottom: 24px;
}
@media (max-width: 1068px) {
  .hero h1 { font-size: 64px; letter-spacing: 0.5px; line-height: 1.04; }
}
@media (max-width: 734px) {
  .hero h1 { font-size: 48px; letter-spacing: 0.4px; line-height: 1.06; }
}
.hero-line {
  display: inline-block;
  color: var(--text-1);
  padding-bottom: 4px;
}
.hero h1 .hero-line + .hero-line,
.hero h1 br + .hero-line {
  white-space: nowrap;
  /* Slight left bias so the "Big" → "Biiig" type animation
     lands closer to center as it expands. Without this, the
     resting state "Big attitude problem." sits centered, then
     "Biiig" pushes the whole line ~0.6em to the right, making
     the expanded state look noticeably off-center. Shifting
     the resting state left splits the visual drift across the
     animation, so neither state feels jarring. */
  transform: translateX(-0.22em);
}
.hero p.subtitle {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  color: #fff;
  line-height: 1.38;
  letter-spacing: var(--ls-21);
  max-width: 580px;
  margin: 0 auto 40px;
}
@media (max-width: 734px) {
  .hero p.subtitle { font-size: 19px; letter-spacing: var(--ls-19); line-height: 1.42; }
}
@media (max-width: 480px) {
  /* Subtitle on phones: tuned to the largest size that still
     keeps each sentence ("A notes app that lives in your
     MacBook's notch." / "It does its job and won't shut up about
     it.") on its own line. We pull a few px past the hero's
     20px side padding to give the bigger font enough room. */
  .hero p.subtitle {
    font-size: 17px;
    letter-spacing: var(--ls-17);
    line-height: 1.42;
    max-width: none;
    margin-left: -12px;
    margin-right: -12px;
  }
}
.hero .cta-primary { margin-bottom: 20px; }
.hero-meta {
  /* Mono version chip - same idea as Paste's `v1.0` style labels.
     Small mono text reads as metadata; sans here would make it
     compete with the subtitle above it. */
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: #86868B;
  letter-spacing: 0;
  line-height: 1.33;
  text-transform: uppercase;
}
.hero-meta span {
  display: inline-block;
  margin: 0 8px;
  opacity: 0.4;
}

/* ===== SECTION SHARED ===== */
section { padding: 100px 0; position: relative; }
section .section-label {
  font-family: var(--font-text);
  /* Eyebrow-label style – small, uppercase, wide-tracked.
     Matches the in-card `.trio-label` so all accent-coloured
     section ribbons read with the same typographic voice.
     Previously these were big (24px) sentence-case display
     glyphs that competed with the section h2 below them; the
     smaller all-caps treatment lets the h2 do the heavy
     visual lifting. Weight 700 – at 14px uppercase the lighter
     weights read too thin against the accent blue. */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
section h2 {
  /* Paste section-headline recipe (preset lsblfj) - this is the
     "Find anything you copied" / "Infinite clipboard history" /
     "Share your pinboards" style. The single most-recognizable
     Paste typography move:
       - system-ui (SF Pro Display), NOT Inter
       - weight 700
       - +0.6px letter-spacing - POSITIVE on display type, the
         opposite of what most type designs do. Gives the bold a
         slightly engineered, less "warm-cursive" feel.
       - line-height 0.96 - tighter than the font-size so big
         multi-line headlines like "Uh-oh. Someone left their
         MacBook unlocked." compact vertically. */
  font-family: var(--font-headings);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 0.96;
  margin-bottom: 20px;
}
@media (max-width: 1068px) {
  section h2 { font-size: 48px; letter-spacing: 0.5px; line-height: 0.98; }
}
@media (max-width: 734px) {
  section h2 { font-size: 36px; letter-spacing: 0.4px; line-height: 1.02; }
}
section h3 {
  /* Paste card-title recipe (preset 192mbxf):
     - system-ui
     - weight 700 (Paste bumps h3 from 600 to bold too)
     - +0.4px letter-spacing - slightly less than h2 because h3
       is smaller; positive tracking scales with size.
     - line-height 1.05 - tight but a hair more than h2 to keep
       multi-word card titles readable. */
  font-family: var(--font-headings);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.05;
  margin-bottom: 16px;
}
@media (max-width: 734px) {
  section h3 { font-size: 24px; letter-spacing: 0.3px; line-height: 1.1; }
}
section .section-sub {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: var(--ls-19);
  /* Darker than --text-2 (rgb(171,171,176)) which read as
     near-invisible muted grey on the light page. #6e6e73 is
     Apple's macOS secondary-label tone - enough contrast to
     read clearly while still subordinate to the h2 above. */
  color: #6e6e73;
  line-height: 1.42;
  max-width: 620px;
  /* Avoid lone-word orphans on wrap. Pairs with manual &nbsp;
     bindings in the HTML for guaranteed 3-words-on-last-line. */
  text-wrap: pretty;
}
.hero p.subtitle,
section h2 {
  text-wrap: pretty;
}

/* ===== HOW IT WORKS ===== */
.how-it-works { text-align: center; padding-top: 40px; }
.how-it-works h2 { margin-bottom: 24px; }
.how-intro {
  text-align: center;
  margin: 0 0 40px;
}
.how-intro .section-sub {
  max-width: none;
  /* Center the subtitle line inside the centered intro. */
  margin-left: auto;
  margin-right: auto;
}
.how-h2 {
  /* Same Paste recipe as section h2 - just slightly smaller because
     it's an intro headline, not a primary section beat. */
  font-family: var(--font-headings);
  font-size: 48px !important;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.5px !important;
  margin-bottom: 16px !important;
}
@media (max-width: 1068px) {
  .how-h2 { font-size: 40px !important; letter-spacing: 0.45px !important; line-height: 1.0; }
}
@media (max-width: 734px) {
  .how-h2 { font-size: 32px !important; letter-spacing: 0.4px !important; line-height: 1.05; }
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}
.step-card { position: relative; padding-top: 24px; }
.step-num {
  font-size: 80px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  opacity: 0.15;
  margin-bottom: 20px;
}
.step-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.step-card p {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.65;
}

/* ===== FEATURES INTRO ===== */
.features-intro {
  text-align: center;
  padding-bottom: 40px;
}
.features-intro .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ===== FEATURES GRID ===== */
.features-section { padding-top: 0; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card { overflow: hidden; }
.feature-card.span-2 { grid-column: span 2; }
.feature-card.span-3 { grid-column: span 3; }
.feature-card .feat-tag {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.29;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
/* Headline + body flow as a single inline paragraph */
.feature-card h3,
.feature-card p {
  display: inline;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.47;
  letter-spacing: var(--ls-17);
  margin: 0;
}
.feature-card h3 { color: var(--text-1); }
.feature-card p  { color: #86868B; }
.feature-card,
.feature-card.highlight-card {
  background: #121214;
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Paste hairline + soft for dark cards on dark page. The
     hairline is barely visible but gives the card a defined edge;
     the soft layer keeps the lift subtle. */
  box-shadow:
    0 0.46px 0.46px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.03);
  transition:
    transform   0.55s var(--ease-paste),
    box-shadow  0.55s var(--ease-paste),
    border-color 0.55s var(--ease-paste);
}
/* Paste-style hover: tiny perspective lift + diffuse glow + a
   subtle scale-up. The combination reads as the card stepping
   forward slightly - 2px upward, 1.5% larger. Scale stays small
   so neighbour cards aren't pushed visibly, and `perspective`
   keeps the GPU compositing engaged.

   Selector includes `.anim` to win specificity over the
   `.anim.vis` entrance rule (which forces transform back to
   translateY(0) when the card scrolls into view). Without
   `.anim` in the selector, the rules have equal specificity and
   `.anim.vis` (declared later in the file) wins - hover transform
   silently has no effect. */
.feature-card.anim:hover,
.feature-card.highlight-card.anim:hover {
  transform: translateY(-2px) scale(1.015) perspective(1200px);
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    0 0.46px 0.46px rgba(0,0,0,0.30),
    0 0 30px rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.hashtag-pill {
  /* Filled accent chip with white text - matches the "white on
     accent fills" rule from CLAUDE.md. Background reads from
     `--accent` so the color-swatch picker recolors this pill
     in lockstep with the icons just by updating the variable. */
  display: inline-block;
  padding: 1px 8px;
  background: var(--accent);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-weight: 600;
  transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-native-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2);
  margin-top: 8px;
}

/* ===== SHORTCUTS ===== */
/* ===== TRIO SECTION (shortcuts + privacy + customization) ===== */
.trio-section { text-align: center; }
.trio-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
  text-align: left;
}
.trio-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 36px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.trio-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.trio-icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
  transition: transform 300ms ease;
}
.trio-icon.icon-keys:hover svg { transform: scale(1.15) rotate(-10deg); }
.trio-icon.icon-gear:hover svg { transform: rotate(90deg); }
.trio-col .trio-label {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 12px;
}
.trio-col h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--text-1);
}
.trio-col p {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Shortcuts inside trio - vertical stack */
.trio-col .shortcuts-grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 10px;
}
.trio-col .sc-card {
  padding: 16px 20px;
  gap: 8px;
}
.trio-col .sc-card.sc-hero {
  grid-row: span 1;
  grid-column: auto;
  text-align: left;
  align-items: flex-start;
  padding: 20px;
  gap: 10px;
}
.trio-col .sc-card.sc-hero .sc-desc { display: block; font-size: 12px; }
.trio-col .sc-card.sc-hero kbd {
  font-size: 18px;
  padding: 6px 12px;
  min-width: 36px;
  border-radius: 8px;
}
.trio-col .sc-card.sc-hero .sc-name { font-size: 16px; }


/* ===== SHORTCUTS ===== */
.shortcuts-section { overflow: hidden; }
.shortcuts-section h2 { text-align: center; }
.shortcuts-section .section-sub {
  text-align: center;
  margin: 0 auto 56px;
}
.shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.sc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sc-card:hover {
  background: var(--surface-hover);
  border-color: rgba(255,255,255,0.09);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.3);
}
.sc-card.sc-hero {
  grid-row: span 2;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--surface);
  border-color: var(--border);
}
.sc-card.sc-hero:hover { border-color: var(--border-light); }
.sc-card.sc-hero .sc-keys { margin-bottom: 8px; }
.sc-card.sc-hero kbd {
  font-size: 28px;
  padding: 10px 24px;
  min-width: 52px;
  border-radius: 12px;
}
.sc-card.sc-hero .sc-name {
  font-size: 22px;
  font-weight: 600;
}
.sc-card.sc-hero .sc-desc {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 260px;
}
.sc-keys { display: flex; align-items: center; gap: 6px; }
.sc-card:not(.sc-hero) .sc-keys { margin-bottom: auto; }
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 12px;
  /* Fragment Mono on shortcut keys - the single biggest "Paste polish"
     move. Mono on kbd communicates "this is a keystroke" without needing
     a glyph, and it visually marks shortcut chips as UI chrome instead of
     body copy. */
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  min-width: 36px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--text-1);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
kbd.kbd-active {
  background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.2);
  border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.4);
  box-shadow: 0 0 8px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.3), 0 1px 0 rgba(0,0,0,0.2);
  transform: translateY(1px);
}
.sc-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}
.sc-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}
.shortcuts-note {
  text-align: center;
  margin-top: 28px;
  font-size: 14px;
  color: var(--text-3);
}

/* ===== CUSTOMIZATION ===== */
.customization-section { text-align: center; overflow: hidden; }
.customization-section .section-sub {
  margin: 0 auto 48px;
}
.color-dots {
  display: flex;
  gap: 14px;
}
.color-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.08);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor: pointer;
  position: relative;
}
.color-dot:hover {
  transform: scale(1.15);
  border-color: rgba(255,255,255,0.25);
}
.color-dot.active {
  border-color: rgba(255,255,255,0.9);
  transform: scale(1.1);
}
.color-dot.active::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
}

/* ===== PRIVACY ===== */
.privacy-section {
  text-align: center;
}
.privacy-section h2 {
  margin-bottom: 32px;
}
.privacy-body {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--text-2);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}
.privacy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  margin-bottom: 32px;
}
.privacy-icon svg {
  width: 40px;
  height: 40px;
  color: var(--accent);
}
/* Lock icon - body stays static, the shackle does a single
   half-flip around the vertical Y-axis (rotateY 180°) while
   SLIDING to the right. Visible 3D-feeling motion during the
   transition without a full 360° spin. Ends translated to the
   right with the U-shape opening down (the 180° flip lands on
   the mirrored side, but the shackle is symmetric so visually
   it reads as the same orientation). `perspective` on the SVG
   gives the flip depth instead of a flat scaleX squash. */
.lock-svg {
  transition: transform 300ms ease, color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  perspective: 200px;
}
.lock-svg .lock-shackle {
  transform-origin: 32.4% 21.25%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.trio-icon:hover .lock-shackle,
.privacy-icon:hover .lock-shackle,
.feature-card:hover .lock-shackle {
  transform: translateX(7px) rotateY(180deg);
}
.trio-icon:hover .lock-svg,
.privacy-icon:hover .lock-svg {
  transform: translateX(-2px);
}
.feature-card:hover .lock-svg {
  transform: scale(1.18);
}

/* ===== TESTIMONIALS ===== */
.testimonials-section {
  text-align: center;
  overflow: hidden;
  /* Bg goes white starting from this section. A gradient
     pseudo at the TOP of the section transitions from grey
     (matching the body bg above) down to white over the top
     180px - smoothing the boundary without extending up into
     the previous section's padding (which would overlap the
     feature cards). */
  background: #ffffff;
  position: relative;
}
.testimonials-section::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgb(245, 245, 247) 0%, #ffffff 100%);
  pointer-events: none;
  z-index: 0;
}
/* Lift the section content above the gradient ::before so the
   gradient sits as backdrop behind the label/headline. */
.testimonials-section > .wrap {
  position: relative;
  z-index: 1;
}
.faq-section,
footer {
  background: #ffffff;
}
.testimonials-section h2 { margin-bottom: 16px; }
.testimonials-section .section-sub { margin: 0 auto 24px; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.testimonial-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 8px 32px rgba(0, 0, 0, 0.22);
  transition: background 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.testimonial-card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 18px 48px rgba(0, 0, 0, 0.28);
}
.testimonial-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.testimonial-top img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.testimonial-top {
  position: relative;
}
.testimonial-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.testimonial-info span {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}
.testimonial-desc {
  font-family: var(--font-text);
  font-size: 12px;
  color: #86868B;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: var(--ls-12);
}
.testimonial-card blockquote {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  font-style: normal;
  flex: 1;
  letter-spacing: -0.01em;
}
.testimonial-card blockquote::before, .testimonial-card blockquote::after { content: none; }

/* ============ TESTIMONIALS CAROUSEL ============ */
.testimonials-section { overflow: visible; }
.tst-carousel {
  position: relative;
  max-width: 1200px;
  margin: 48px auto 0;
}
.tst-viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 30px 0 40px;
  position: relative;
  /* Gradient fade-out on the left and right edges so cards
     scrolling out of view soften gradually instead of being
     hard-clipped. Fully visible 10%-90% across; transparent
     at the very edges; smooth transition in between. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.tst-viewport::-webkit-scrollbar { display: none; }
.tst-track {
  display: flex;
  gap: 28px;
  align-items: stretch;
}
.tst-spacer {
  flex: 0 0 24px;
  align-self: stretch;
  pointer-events: none;
}
.tst-card {
  flex: 0 0 min(560px, 86vw);
  scroll-snap-align: center;
  padding: 48px 44px 40px;
  border-radius: 24px;
  background: #121214;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  text-align: left;
  user-select: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.35;
  transform: scale(0.9);
}
.tst-card.is-active {
  opacity: 1;
  transform: scale(1);
}
.tst-card blockquote {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: var(--ls-28);
  color: var(--text-1);
  margin: 0 0 36px;
  flex: 1;
  position: relative;
}
/* Decorative curly quotes around each testimonial – oversized
   smart quotes (U+201C / U+201D) in light grey. Rendered in a
   serif family because Inter / SF Pro draw `"` and `"` as nearly
   vertical bars at heavy weights; serifs (Georgia / Times-style)
   give the proper curled-comma shape the brief asked for. */
.tst-card blockquote::before {
  content: "\201C";
  font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
  color: rgba(0, 0, 0, 0.13);
  font-weight: 700;
  font-size: 1.6em;
  line-height: 1;
  /* Hang the opening quote into the left padding (absolute, out of
     inline flow) so it sits to the LEFT of the text instead of
     indenting the first line. The text now starts flush at the
     blockquote's left edge regardless of the quote. `left` controls
     the gap between the quote and the text – more negative = bigger
     gap (stays inside the 28px mobile padding). */
  position: absolute;
  left: -0.62em;
  top: -0.08em;
}
.tst-card blockquote::after {
  content: "\201D";
  font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
  color: rgba(0, 0, 0, 0.13);
  font-weight: 700;
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.25em;
  margin-left: 0.09em;
}
.tst-author { display: flex; align-items: center; gap: 14px; }
.tst-author img { width: 44px; height: 44px; border-radius: 50%; }
.tst-monogram {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  user-select: none;
}
.tst-info { display: flex; flex-direction: column; gap: 2px; }
.tst-name {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: var(--ls-17);
  /* Use the themable text token so this adapts in light mode -
     previously hard-coded #fff which became invisible on the
     white testimonial card in light. */
  color: var(--text-1);
}
.tst-handle {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: var(--ls-14);
  color: #86868B;
}

/* Nav arrows */
.tst-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.tst-arrow svg { width: 20px; height: 20px; display: block; }
.tst-arrow:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-50%) scale(1.08);
}
.tst-arrow:active { transform: translateY(-50%) scale(0.94); }
.tst-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.tst-arrow-prev { left: 16px; }
.tst-arrow-next { right: 16px; }

/* Dots */
.tst-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.tst-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  cursor: pointer;
  /* All three changing properties on the same ease so the dot
     morphs into the pill (and back) as one continuous shape. */
  transition:
    background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    width      0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0;
}
.tst-dot:hover { background: rgba(255, 255, 255, 0.4); }
.tst-dot.is-active {
  background: #ffffff;
  width: 26px;
  border-radius: 4px;
}

/* Light theme overrides */

@media (max-width: 720px) {
  .tst-arrow { display: none; }
  .tst-card { padding: 36px 28px 28px; min-height: 280px; }
  .tst-card blockquote { font-size: 18px; margin-bottom: 24px; }
  .tst-track { gap: 16px; }
}

/* ===== NOTE MOCKUPS ===== */
.note-img-wrap.note-mock { overflow: visible; border: none; box-shadow: none; background: none; }
.nm {
  width: 320px;
  background: #000;
  /* 20px = Paste's dominant card radius. Already matches. */
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  /* Paste's stacked-tier shadow system - hairline, soft, glow.
     Replaces the previous heavy 30px/80px drop. The mockup still
     lifts off the page but with Paste's restraint: shadow reads as
     "this is a panel" not "this is a poster". */
  box-shadow:
    0 0.46px 0.46px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06),
    0 12px 40px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal;
  line-height: 1.5;
}
.nm-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 6px;
}
.nm-back, .nm-new {
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nm-back svg, .nm-new svg { color: var(--accent); }
.nm-date {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  padding: 8px 16px 12px;
}
.nm-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  padding: 0 16px 8px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: left;
}
.nm-body {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  padding: 0 16px;
  line-height: 1.55;
  text-align: left;
}
.nm-spacer { flex: 1; min-height: 40px; }
.nm-toolbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nm-tool {
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  display: flex;
  align-items: center;
}
.nm-tool svg { color: rgba(255,255,255,0.35); }

/* All notes same height */
.nm { min-height: 380px; }
.nm-checklist {
  padding: 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.nm-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #fff;
  cursor: default;
  text-align: left;
}
.nm-check.checked { color: rgba(255,255,255,0.4); }
.nm-check s { text-decoration: line-through; }
.nm-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nm-checkbox.on {
  background: var(--accent);
  border-color: var(--accent);
}

/* Empty state note */
.nm-list-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}
.nm-list-left {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,0.4);
}
.nm-list-left svg { width: 18px; height: 18px; }
.nm-search {
  margin: 4px 16px 16px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.3);
}
.nm-search svg { width: 14px; height: 14px; flex-shrink: 0; color: rgba(255,255,255,0.3); }
.nm-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  gap: 4px;
}
.nm-empty-state .nm-empty-title {
  font-size: 14px;
  color: rgba(255,255,255,0.3);
}
.nm-empty-state .nm-empty-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.18);
}

.nm-bullets {
  padding: 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.nm-bullet {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.nm-bullet em { font-style: italic; }
.nm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  position: relative;
  top: 1px;
}

/* ===== HERO FLANKING NOTES ===== */
.hero-note-left,
.hero-note-right {
  position: absolute;
  z-index: 1;
  top: 50%;
}
.hero-note-left {
  left: 80px;
  top: auto;
  bottom: -160px;
  transform: rotate(-4deg);
}
.hero-note-right {
  right: 80px;
  top: auto;
  bottom: -180px;
  transform: rotate(4deg);
}
.hero-note-left .nm,
.hero-note-right .nm {
  width: 280px;
  min-height: 360px;
  opacity: 0.55;
  transition: opacity 0.4s, transform 0.4s;
}
.hero-note-left:hover .nm,
.hero-note-right:hover .nm {
  opacity: 0.85;
  transform: scale(1.03);
}

/* ===== HERO SCREENSHOTS ===== */
.hero-screenshots {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 28px;
  align-items: flex-start;
  padding: 40px 32px 0;
}
.note-img-wrap {
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  /* Paste-style stacked tiers: each tier does one job - hairline,
     soft, depth. The previous single 30px/80px shadow was too heavy
     for the surrounding dark surface and read like a poster drop. */
  box-shadow:
    0 0.46px 0.46px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06),
    0 16px 48px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transition:
    transform   0.55s var(--ease-paste),
    box-shadow  0.55s var(--ease-paste);
}
.note-img-wrap img {
  width: 320px;
  height: auto;
}
.hero-screenshots .note-img-wrap:nth-child(1) { transform: rotate(-2deg) translateY(12px); }
.hero-screenshots .note-img-wrap:nth-child(2) { transform: rotate(2deg) translateY(-8px); }
.note-img-wrap:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.03) !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.6),
    0 0 60px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.06);
  z-index: 10;
}

/* ===== FAQ ===== */
.faq-section { text-align: center; padding-top: 140px; }
.faq-section h2 { margin-bottom: 14px; }
.faq-section .section-sub { margin: 0 auto 56px; }
.faq-list {
  max-width: 740px;
  margin: 0 auto;
  text-align: left;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child {
  border-top: 1px solid var(--border);
}
.faq-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
  gap: 16px;
  /* Button reset – the element is a <button> for keyboard a11y, but
     we want it to look like the surrounding plain row. */
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
.faq-header:focus { outline: none; }
.faq-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq-title {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: var(--ls-17);
  color: var(--text-1);
  transition: color 0.2s;
}
.faq-header:hover .faq-title { color: #0088FF; }
.faq-header svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-3);
}
.bar-h, .bar-v { transform-origin: center; transition: transform 200ms ease-out; }
.faq-item.open .bar-h { transform: rotate(180deg); }
.faq-item.open .bar-v { transform: rotate(80deg) scale(0); }
.faq-body-grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease-out;
}
.faq-item.open .faq-body-grid {
  grid-template-rows: 1fr;
}
.faq-body-inner { overflow: hidden; }
.faq-body-text {
  padding-bottom: 24px;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: var(--ls-17);
  color: var(--text-2);
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.faq-item.open .faq-body-text {
  opacity: 1;
  transition: opacity 150ms ease-out 80ms;
}

/* ===== FINAL CTA ===== */
.final-cta-section {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta-blob {
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.06) 0%, rgba(80,120,220,0.03) 50%, transparent 70%);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.final-cta-section h2 { margin-bottom: 20px; }
.final-cta-section .section-sub {
  margin: 0 auto 48px;
}
.final-cta-section .cta-primary { position: relative; z-index: 2; }

/* ===== FOOTER ===== */
footer {
  padding: 60px 0;
  border-top: 1px solid var(--border);
}
/* Vertical stack of credit + tagline, sits as the left
   flex-item of the footer-row. The `gap` is the user-requested
   "bit of a gap" between the two lines. */
.footer-credit-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Tagline sits under the credit, broken into two lines with
   <br>. Lighter weight than the credit so it reads as a
   secondary note, not a primary line. */
.footer-tagline {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: var(--ls-14);
  color: var(--text-3);
  margin: 0;
}
/* "Polish" P/p swap micro-animation in the tagline.
   Cursor is HIDDEN by default (display: none) so no phantom gap
   appears between "p" and "olish" during the long idle periods.
   JS toggles `.is-active` on the wrapper during the brief edit
   window: cursor fades in, letter is erased, opposite case is
   typed, cursor fades out, long idle, repeat. Reads as if
   someone clicked into the word, fixed the case, clicked off. */
.polish-typo {
  display: inline;
  white-space: nowrap;
}
/* Fixed-height wrap so the cursor's vertical anchor stays put
   even when the letter swaps between "P", "", and "p". Without
   this the wrap collapses to zero height during the empty state
   and the descender on "p" shifts the box down vs "P", making
   the cursor bounce up and down. Locked to 1em + line-height 1
   = the wrap is exactly 1em tall regardless of content. */
.polish-letter-wrap {
  position: relative;
  display: inline-block;
  height: 1em;
  line-height: 1;
  vertical-align: baseline;
}
.polish-letter {
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
}
.polish-cursor {
  /* Absolute positioning - zero width in flow, sits flush at
     the right edge of the letter without pushing surrounding
     text apart. Anchored to top: 0 / height: 1em of the
     fixed-height wrap so its vertical position is stable. */
  position: absolute;
  top: 0;
  right: -0.5px;
  width: 1px;
  height: 1em;
  background: currentColor;
  /* Hard on/off only - no transition. The cursor either ticks
     visible/invisible via the blink animation, or sits at the
     static `opacity: 0` when .is-active is removed. JS times
     the removal to happen during the blink's "off" half, so
     there's never a visible jump from on → off. */
  opacity: 0;
  pointer-events: none;
}
.polish-typo.is-active .polish-cursor {
  animation: polishBlink 1.1s steps(2, end) infinite;
}
@keyframes polishBlink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .polish-typo.is-active .polish-cursor { animation: none; opacity: 0; }
}

/* Hero "Big → Biiig" type-anim cursor.
   Same pattern as polish-cursor: fixed-height wrap so the
   cursor's vertical anchor stays put across char count changes,
   absolute positioning so zero width in flow, hard on/off blink
   with no transition - JS times the .is-active removal to a
   blink-off tick so the cursor disappears silently. */
.type-anim { display: inline; }
.type-chars-wrap {
  position: relative;
  display: inline-block;
  height: 1em;
  line-height: 1;
  vertical-align: baseline;
}
.type-chars {
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
}
.type-cursor {
  position: absolute;
  top: 0;
  right: -1px;
  /* 3px on the big hero text reads as a proportionally-correct
     caret. At 80px font this is roughly the same visual weight
     as 1px on the 14px footer text. */
  width: 3px;
  height: 1em;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  /* Subtle rounding so the bar doesn't look mechanical at this size. */
  border-radius: 1px;
}
.type-anim.is-active .type-cursor {
  animation: typeBlink 1.1s steps(2, end) infinite;
}
@keyframes typeBlink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .type-anim.is-active .type-cursor { animation: none; opacity: 0; }
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.footer-top {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.footer-brand-row {
  display: flex;
  align-items: center;
}
.footer-icon {
  width: 60px;
  height: 60px;
  border-radius: 0;
}
.footer-credit {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.43;
  letter-spacing: var(--ls-14);
  color: var(--text-3);
  margin-top: 0;
  white-space: nowrap;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 40px;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: var(--ls-14);
}
.footer-links a {
  color: var(--text-3);
  transition: color 0.2s;
  white-space: nowrap;
}
.footer-links a:hover { color: var(--text-1); }
/* Stack the text links over a row of social logos. */
.footer-links-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* Social logos match the footer text links: grey at rest, darker on hover. */
.footer-social a {
  display: inline-flex;
  color: #6e6e73;
  transition: color 0.2s;
}
.footer-social a:hover { color: #1d1d1f; }
.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
.footer-dot {
  color: var(--text-3);
  opacity: 0.3;
}

/* ===== MACOS NOTIFICATION ===== */
.macos-notif {
  width: 100%;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(-40px) scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.macos-notif.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.4,0.64,1);
  pointer-events: auto;
}
.notif-stack {
  position: absolute;
  top: 52px;
  right: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 320px;
}
.macos-notif-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
  align-self: center;
}
.macos-notif-content {
  flex: 1;
  min-width: 0;
}
.macos-notif-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: -2px;
}
.macos-notif-app {
  font-size: 14px;
  font-weight: 700;
  color: #E2DEE9;
}
.macos-notif-time {
  font-size: 11px;
  font-weight: 500;
  color: #9F9DA0;
}
.macos-notif-body {
  font-size: 13px;
  font-weight: 500;
  color: #E2DEE9;
  line-height: 1.45;
  text-align: left;
}

/* ===== SCREEN MOCKUP ===== */
.macbook {
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  margin: 40px auto 48px;
}
.macbook-screen {
  position: relative;
  width: 100%;
  min-height: 310px;
  aspect-ratio: 2 / 1;
  background: #000;
  /* Bumped to Paste's "feature card" tier (24px stays).
     Stacked shadow tiers replace the single 8px/50px drop:
     hairline + soft + depth, all subtle. */
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 0.46px 0.46px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06),
    0 12px 40px rgba(0,0,0,0.18);
}
.macbook-screen::before { display: none; }
.macbook-screen::after { display: none; }
.macbook-wallpaper {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.macbook-menubar {
  letter-spacing: normal;
  line-height: 1.5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(50px) saturate(150%);
  -webkit-backdrop-filter: blur(50px) saturate(150%);
  border-radius: 24px 24px 0 0;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 2;
}
.macbook-menubar-left {
  display: flex;
  align-items: center;
}
.macbook-menubar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.macbook-menubar-right img {
  display: block;
  height: 16px;
  width: auto;
}

/* ===== DEMO PANEL ANIMATION ===== */
.termi-panel {
  /* Demo-only accent – matches the app's new default blue
     (`#0A84FF`). Scoped to the panel via these CSS variables so
     nothing outside the panel inherits this, and so the swatch
     picker doesn't override the demo's intended look. */
  --accent: #0A84FF;
  --accent-r: 10;
  --accent-g: 132;
  --accent-b: 255;
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, 0);
  will-change: width, height;
  width: 180px;
  height: 50px;
  background: #000;
  border-radius: 0 0 16px 16px;
  z-index: 6;
  overflow: hidden;
  /* easeOutCubic – smooth deceleration WITHOUT the "race-to-95%
     then crawl-to-100%" plateau the previous `(0.22, 1, 0.36, 1)`
     curve produced (both Y1 and Y2 at 1.0 → animation lands
     visually finished in the first 100ms but technically keeps
     animating for the next 280ms, reading as "patchy"). The new
     curve maintains a steady deceleration across the entire
     duration. Same curve on width/height/border-radius keeps
     all three landing together. 0.45s duration (up from 0.38s)
     gives the eye more frames per pixel, helping smoothness on
     anything but a 120Hz display. */
  transition:
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  /* Touch: treat the demo as a UI element, not selectable text — a
     long-press shouldn't select the mockup's note text or pop the
     iOS callout menu. Interaction is tap-only via the JS handler. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.termi-panel.expanded {
  width: 380px;
  height: 395px;
  border-radius: 0 0 24px 24px;
}
/* Hover-to-expand is desktop-only. On touch, iOS emulates :hover — a
   single tap gets swallowed as a "reveal hover" (never fires click, so
   it shadowed the tap handler) and a long-press leaves :hover stuck (so
   the panel wouldn't dismiss). Scoping :hover to hover-capable devices
   makes the JS .expanded toggle the sole expand path on touch. */
@media (hover: hover) {
  .termi-panel:hover {
    width: 380px;
    height: 395px;
    border-radius: 0 0 24px 24px;
  }
}
.termi-panel-inner {
  opacity: 0;
  /* Lock layout to the FINAL expanded dimensions so the flex
     children never re-arrange during the panel's expand. The
     panel itself is `overflow: hidden` and animates its own
     width/height – the inner sits inside that growing window
     at full size the whole time, with `left: 50% + translateX(-50%)`
     centering it so the reveal is symmetric (panel opens
     outward from the centre, inner becomes more visible from
     the centre outward).
     This matches the real app: the content always exists in
     its final layout; the panel is just a clipping window
     that grows to reveal it. */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 395px;

  /* Top padding bumped from 14px → 22px so the topbar
     (hamburger / settings / + New) sits a bit lower beneath
     the camera notch, mirroring how the real app's topbar
     has more clearance from the top of the panel. */
  padding: 22px 0 0;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  text-align: left;
  letter-spacing: normal;
  line-height: 1.5;

  /* Opacity transition for the collapse path – a quick fade
     out so the content doesn't linger past the closing walls. */
  transition: opacity 0.12s ease;
}
.termi-panel.expanded .termi-panel-inner {
  opacity: 1;
  /* Fade IN synced with the panel's expand: 0.24s + 0.07s delay
     = 0.31s, lands just before the panel's 0.35s settles so the
     content reads as "done" right as the walls stop moving. */
  transition: opacity 0.24s ease 0.07s;
}
@media (hover: hover) {
  .termi-panel:hover .termi-panel-inner {
    opacity: 1;
    transition: opacity 0.24s ease 0.07s;
  }
}

/* Respect Reduce Motion – snap to expanded state, no curves. */
@media (prefers-reduced-motion: reduce) {
  .termi-panel,
  .termi-panel-inner {
    transition: none;
  }
}
/* Panel topbar */
.np-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  margin-bottom: 14px;
  height: 22px;
}
.np-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.np-topbar-left img {
  height: 14px;
  width: auto;
  filter: brightness(0) invert(0.58);
}
.np-new {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}
.np-new svg {
  width: 12px;
  height: 12px;
  fill: var(--accent);
  vertical-align: middle;
  margin-right: 2px;
}
/* Search */
.np-search {
  background: #101010;
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #939393;
  margin: 0 24px 15px;
}
.np-search svg { width: 13px; height: 13px; flex-shrink: 0; color: rgba(255,255,255,0.3); }
/* Tag strip */
.np-tags {
  display: flex;
  gap: 6px;
  padding: 0 24px;
  margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.np-tags::-webkit-scrollbar { display: none; }
.np-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #101010;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  cursor: default;
  transition: background 0.15s, color 0.15s;
}
.np-tag .np-tag-count {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}
.np-tag.np-tag-active {
  background: var(--accent);
  /* White text on the demo's blue accent – matches Apple's
     standard treatment for accent-coloured pills (mail labels,
     reminder tags, etc.). */
  color: #fff;
  font-weight: 600;
}
.np-tag.np-tag-active .np-tag-count {
  color: rgba(255,255,255,0.7);
  opacity: 1;
}

/* Note items */
.np-notes { flex: 1; overflow: hidden; }
.np-note {
  padding: 10px 16px 10px 11px;
  margin: 0 24px;
  border-radius: 8px;
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: background 0.15s;
}
.np-note:hover {
  background: #101010;
}
.np-note-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  margin-left: 10px;
}
.np-note-actions .np-note-pin-hover {
  height: 14px;
  width: auto;
  opacity: 0;
  transition: opacity 0.15s;
  filter: brightness(0) invert(0.35);
}
.np-note:hover .np-note-pin-hover {
  opacity: 1;
}
.np-pin-icon svg {
  width: 10px;
  height: 14px;
  fill: var(--accent);
}
.np-note-trash {
  height: 14px;
  width: auto;
  opacity: 0;
  transition: opacity 0.15s;
  filter: brightness(0) invert(0.4);
}
.np-note:hover .np-note-trash {
  opacity: 1;
}
.np-note-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.np-note-preview {
  font-size: 12px;
  color: #939393;
  line-height: 1.4;
}
.np-note-time {
  font-size: 11px;
  color: #4B4B4B;
  margin-top: 2px;
}
.np-footer {
  text-align: center;
  font-size: 11px;
  padding: 8px 24px 14px;
  color: #454545;
  font-weight: 500;
}
/* Notch camera dots */
.termi-panel .notch-cam {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 7;
  transition: opacity 0.15s;
}
.notch-cam-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0a0a1a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.notch-cam-green {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1a3a1a;
  box-shadow: 0 0 3px #0f0;
}

/* ===== LIGHT THEME LATE OVERRIDES (must come after base rules) ===== */

/* ===== SCROLL ANIMATIONS - Paste-inspired ===== */
/* Paste opens every appear-on-scroll element with
   `opacity: 0.001` + `perspective(1200px)` + a slight Y translate.
   The `0.001` (instead of `0`) keeps GPU compositing engaged so the
   transition starts on the right frame rather than after a re-paint.
   The `perspective(1200px)` gives the entrance a subtle 3D depth -
   elements settle into the page rather than just fading up.
   1.1s + cubic-bezier(0.22, 1, 0.36, 1) is the long-tail decelerated
   ease Paste uses everywhere. */
.anim {
  opacity: 0.001;
  transform: translateY(40px) perspective(1200px);
  transition:
    opacity   1.1s var(--ease-paste),
    transform 1.1s var(--ease-paste);
  will-change: opacity, transform;
}
.anim.vis {
  opacity: 1;
  transform: translateY(0) perspective(1200px);
}
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }
.d6 { transition-delay: 0.48s; }
.d7 { transition-delay: 0.56s; }
.d8 { transition-delay: 0.64s; }

/* Reduce Motion: snap directly to the visible state with no transform.
   Paste does the same - they kill the perspective + translate entirely
   so users with vestibular sensitivity don't get parallax. */
@media (prefers-reduced-motion: reduce) {
  .anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .trio-top { grid-template-columns: 1fr; }
  .steps-grid { gap: 20px; }
  .features-grid { gap: 16px; }
  .hero-screenshots { gap: 20px; }
  .note-img-wrap img { width: 200px; }
}

@media (max-width: 768px) {
  section { padding: 72px 0; }
  .wrap { padding: 0 24px; }

  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  nav { width: calc(100% - 32px); top: 12px; border-radius: 20px; }
  /* When the menu is open we need the dropdown (positioned
     absolutely below the nav) to be visible. Without this it
     gets clipped by the nav's base `overflow: hidden` rule.
     Also flatten the nav's bottom corners so the dropdown joins
     flush – otherwise the rounded bottom corners leave a visible
     gap at the seam between nav and dropdown. */
  nav.nav-open { border-radius: 20px 20px 0 0; overflow: visible; }
  nav.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);
    left: -1px;
    right: -1px;
    /* Match the nav's exact background + backdrop-filter recipe
       so nav and dropdown read as one continuous material on
       mobile. (Previously the dropdown lacked saturate(180%),
       so it looked grey/washed-out while the nav picked up
       colour from the wallpaper behind.) */
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: none;
    border-radius: 0 0 20px 20px;
    padding: 12px 24px 20px;
    gap: 4px;
  }
  .nav-links a {
    padding: 12px 16px;
    font-size: 16px;
  }
  .nav-cta { font-size: 12px; padding: 7px 14px; }

  .hero { min-height: auto; padding: 140px 24px 72px; overflow: hidden; }
  .features-intro { padding-bottom: 28px; }
  .hero-note-left, .hero-note-right { display: none; }
  .hero-icon { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 36px; }

  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  .step-num { font-size: 56px; }

  .features-grid {
    grid-template-columns: 1fr;
  }
  .feature-card.span-2,
  .feature-card.span-3 { grid-column: span 1; }

  .trio-col .shortcuts-grid { grid-template-columns: 1fr; }
  .trio-col .sc-card.sc-hero { grid-column: auto; }
  .shortcuts-grid { grid-template-columns: 1fr; }
  .sc-card.sc-hero { grid-row: span 1; }
  .sc-card.sc-hero kbd { font-size: 22px; padding: 8px 16px; }
  kbd { padding: 5px 10px; font-size: 14px; min-width: 32px; }

  .testimonials-grid { grid-template-columns: 1fr; }

  .hero-screenshots {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px 24px 0;
    margin-bottom: -40px;
  }
  .hero-screenshots .note-img-wrap { transform: none !important; }

  .price-tag { font-size: 64px; }

  /* Footer stacks on mobile: top block above links so the links
     row doesn't have to fit on a single line with the brand block.
     Without this, .footer-links runs off the right edge of the
     viewport and creates horizontal page scroll. Mirrors the
     equivalent rule on privacy.html / terms.html. */
  footer { padding: 48px 0; }
  .footer-row { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
  .footer-credit-stack { align-items: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 20px 28px; padding-top: 0; }
  .footer-links-stack { align-items: center; gap: 20px; }
  /* On very narrow phones (≤320px), the copyright line doesn't
     fit one one row at white-space: nowrap. Allow it to wrap. */
  .footer-credit { white-space: normal; }

  /* Footer tagline: drop the inline <br> on mobile so "Made with
     a little spite and a lot of Polish." reads as one line. The
     <br> exists to balance the two halves on desktop. */
  .footer-tagline br { display: none; }
  .footer-tagline {
    /* Keep the line on a single row so the P/p swap animation
       sits in its natural in-line spot. */
    white-space: nowrap;
  }

  /* FAQ help line ("Still confused? ..."): break before
     "Helpfulness" so the second sentence is fully on its own
     line on mobile rather than orphaning "but not guaranteed.". */
  .faq-help-line-break { display: block; }

  /* Hero h1 second line: drop the desktop `translateX(-0.22em)`
     left-bias on mobile. That shift compensates for the
     "Big → Biiig" typing-anim expansion at desktop width, but
     on a narrow phone where the line wraps, the negative
     translate just makes the hero look mis-centered. */
  .hero h1 .hero-line + .hero-line,
  .hero h1 br + .hero-line {
    transform: none;
  }

  /* Nav glass: heavier opacity on mobile so the dropdown reads
     clearly against busy content scrolling underneath. */
  nav { background: rgba(255, 255, 255, 0.94); }
  nav.scrolled { background: rgba(255, 255, 255, 0.96); }
  nav.nav-open { background: rgba(255, 255, 255, 0.96); }
  nav.nav-open .nav-links { background: rgba(255, 255, 255, 0.96); }

  /* Remove the visible seam between nav and the open dropdown.
     The nav has a full 1px border; without this the bottom edge
     of the nav reads as a thin line above the dropdown. */
  nav.nav-open { border-bottom-color: transparent; }
  nav.nav-open .nav-links { top: calc(var(--nav-h) - 1px); }
}

@media (max-width: 480px) {
  section { padding: 60px 0; }
  .hero { padding: 120px 20px 60px; }
  .features-intro { padding-bottom: 24px; }
  .wrap { padding: 0 20px; }
  .card { padding: 28px; }
  .note-img-wrap img { width: 240px; }
  /* Below 480px the 48px h1 "Big attitude problem." stops fitting
     on one line at white-space: nowrap. Shrink the type and allow
     the line to wrap so it never forces horizontal scroll. */
  .hero h1 { font-size: 36px; letter-spacing: 0.3px; line-height: 1.08; }
  .hero h1 .hero-line + .hero-line,
  .hero h1 br + .hero-line { white-space: normal; }
  /* Scale the macbook demo on narrow phones. The demo panel
     uses fixed 380px widths internally; rather than rewriting that
     layout, we scale the whole frame to fit. Origin top-center
     keeps the panel anchored at the notch. */
  .macbook {
    transform: scale(0.85);
    transform-origin: center top;
    margin-bottom: 0;
  }
}
@media (max-width: 420px) {
  .macbook { transform: scale(0.75); }
}

/* ========= POLISH PASS ========= */

/* Feature icons – uniform 28x28 square box, SVG preserves aspect ratio within */
.feat-icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 22px;
  color: var(--accent);
  overflow: visible;
  transform-origin: center;
  /* Smooth color transition so the swatch picker recolors
     all feature icons gradually rather than snapping. */
  transition: color 0.3s ease;
}

/* ======== Per-icon hover animations ======== */

/* 1. Quick Capture – bolt tilts on hover, returns when unhovered.
   Symmetric transition-based animation, no keyframes. */
.feat-bolt { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.feature-card:hover .feat-bolt { transform: scale(1.2) rotate(-15deg); }

/* 2. Paste as New Note – paper + clipboard slide together to form one icon */
/* 2. Paste as New Note – clipboard scales, clip tab lifts up
   like releasing the clamp. Symmetric transition in & out.
   The clipboard SVG is tall-and-narrow (aspect ~0.62 vs the
   ~1.0 of search / settings / lock). At the standard 28×28
   box, it renders ~17px wide which reads visually smaller
   next to chunkier icons. Bump just this one to 34px tall so
   its glyph mass matches its neighbours. */
.feat-clipboard {
  width: auto;
  height: 34px;
  /* Bouncy ease (overshoot) so the clipboard snaps into its
     hover pose with a tiny bounce instead of settling linearly. */
  transition: transform 0.55s cubic-bezier(0.34, 1.6, 0.64, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}
.feature-card:hover .feat-clipboard {
  /* Scale up + slight back-tilt - "loose" casual pose. */
  transform: scale(1.18) rotate(-5deg);
}
.feat-clipboard .clip-tab {
  /* Pivot from the bottom edge of the clip so the top hinges
     upward, mimicking a real clipboard clamp opening. */
  transform-origin: center bottom;
  transform-box: fill-box;
  /* Same bouncy ease - clip snaps open with overshoot. */
  transition: transform 0.55s cubic-bezier(0.34, 1.6, 0.64, 1);
}
.feature-card:hover .feat-clipboard .clip-tab {
  /* Bigger lift + steeper rotation - clip springs open. */
  transform: translateY(-2px) rotate(-28deg);
}

/* 3. Search & Hashtags – single point-and-hold tilt */
.feat-search { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.feature-card:hover .feat-search { transform: scale(1.2) rotate(-20deg); }

/* 4. Rich Text – Each letter performs its namesake formatting
   action on hover: B scales up (becomes more "bold"), I skews
   further right via skewX (more italic), U lifts up while the
   underline drops down (visually emphasizing the underline).
   The icon literally demonstrates what its three glyphs do.
   Wide BIU viewBox (45.24 × 26.18 ≈ 1.73 aspect) - at the
   default 28×28 box it renders ~28×16, much smaller than its
   neighbours. Bump width so the visual mass matches. */
.feat-textformat {
  width: 38px;
  height: auto;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover .feat-textformat { transform: scale(1.1); }
.feat-textformat path {
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover .feat-textformat .tf-b        { transform: scale(1.18) translateX(-3px); }
.feature-card:hover .feat-textformat .tf-i        { transform: skewX(-10deg); }
.feature-card:hover .feat-textformat .tf-u        { transform: translateY(-2px) translateX(3px); }
.feature-card:hover .feat-textformat .tf-underline{ transform: translateY(2px) translateX(3px); }

/* 5. Customization – gear rotates a quarter turn on hover,
   returns when unhovered. Symmetric transition, no keyframes. */
.feat-settings { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.feature-card:hover .feat-settings { transform: scale(1.2) rotate(90deg); }

/* 6. Swipe Navigation – left arrow slides left, right arrow slides right + icon scales.
   Wide horizontal arrows viewBox (50 × 20.24 ≈ 2.47 aspect) -
   at the default 28×28 box it renders ~28×11, very flat. Bump
   width so the icon reads at proper visual mass. */
.feat-swipe {
  width: 42px;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.34, 1.6, 0.64, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover .feat-swipe { transform: scale(1.2); }
.feat-swipe path {
  transition: transform 0.4s cubic-bezier(0.34, 1.6, 0.64, 1);
  transform-origin: center;
  transform-box: fill-box;
}
.feature-card:hover .feat-swipe .arr-left  { transform: translateX(-3px); }
.feature-card:hover .feat-swipe .arr-right { transform: translateX(3px); }

/* 7. macOS Native – a bite gets taken out of the left side.
   The bite animation is driven by JS (see bottom of <script>)
   rather than CSS transitions on rx/ry, because CSS transitions
   on SVG geometry attributes have inconsistent browser support
   (works in Chrome, flaky in older Safari). JS just animates the
   rx/ry attribute values via requestAnimationFrame - universally
   supported. */
.feat-apple { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.feature-card:hover .feat-apple { transform: scale(1.2); }

/* 8. Pin, share, duplicate – pin tilts on hover, returns when
   unhovered. Symmetric transition, no keyframes. */
.feat-pin { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; }
.feature-card:hover .feat-pin { transform: scale(1.2) rotate(-12deg); }
.feat-shortcut {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
}
.feat-shortcut kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 12px;
  font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
    0 4px 14px rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Stagger the lift when the card is hovered – left to right wave */
.feature-card:hover .feat-shortcut kbd {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.22),
    0 8px 22px rgba(0, 0, 0, 0.32),
    0 2px 4px rgba(0, 0, 0, 0.2);
}
.feature-card:hover .feat-shortcut kbd:nth-child(1) { transition-delay: 0s; }
.feature-card:hover .feat-shortcut kbd:nth-child(2) { transition-delay: 0.06s; }
.feature-card:hover .feat-shortcut kbd:nth-child(3) { transition-delay: 0.12s; }
/* Near-black keys - `#1a1a1c` base with `#2a2a2c` on hover.
   High contrast against the white card surface while still
   reading as a physical key (not pure #000). */
.feat-shortcut-yellow kbd,
.feat-shortcut-blue kbd {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.06);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 2px 8px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.12);
}
.feature-card:hover .feat-shortcut-yellow kbd,
.feature-card:hover .feat-shortcut-blue kbd {
  background: #2a2a2c;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.14);
}
/* Light theme – dark-on-light key */
/* Real keyboard press highlights the matching key in accent color.
   White text on accent fills follows the product color system.
   CLAUDE.md ("Stays bright across all accent presets, including
   yellow. Non-negotiable.") */
.feat-shortcut kbd.kbd-active,
.feature-card:hover .feat-shortcut kbd.kbd-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(1px) !important;
  transition-delay: 0s !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 22px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.55),
    0 4px 12px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.25);
}
/* Per-card overrides removed - the base `.feat-shortcut kbd.kbd-active`
   rule above already uses `var(--accent)` for background+border and
   `rgba(var(--accent-r), ...)` for the glow. The swatch picker
   updates these vars on :root, so the pressed-key color follows
   whichever accent is currently selected. */
.feat-colors {
  margin-top: 22px;
  gap: 10px;
}
.feat-colors .color-dot {
  width: 26px;
  height: 26px;
}
.feature-card.highlight-card .feat-icon {
  color: var(--accent);
}

/* Per-card icon colors */
/* All feature icons inherit `color: var(--accent)` from the base
   .feat-icon rule. The swatch picker updates --accent + the
   --accent-r/g/b channel vars on :root, so every accent-driven
   element (icons, hashtag pill, pressed kbd keys, kbd glow) all
   recolor together. */

/* ========= ORIGINAL POLISH PASS ========= */

.card { position: relative; }

/* ===== REDUCED MOTION ===== */
/* Respect the user's OS-level "Reduce Motion" preference. The app itself
   goes to extreme lengths for Reduce Motion; the marketing site should
   match. Disables CSS keyframe loops and slows scroll-snap to nothing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Video pause is handled in JS (we want the poster to remain visible
     rather than hiding the element entirely). */
}

/* ===== LIGHT-MODE OVERRIDES =====
   The site is light-only - dark mode was removed. These rules
   override the hardcoded dark colors that still exist in
   earlier declarations (legacy from when the site was dark-
   first). Source order wins: dark declarations come first,
   these override them.

   The MacBook mockup interior stays dark intentionally - it
   represents the Termi interface, which is dark-only by
   design. Hardcoded `#000` / dark surfaces inside the mockup
   are not overridden here. */

/* ----- NAVIGATION ----- */
/* Paste-style frosted-white nav glass. */
nav {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0.46px 0.46px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 15px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
nav.scrolled {
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0.46px 0.46px rgba(0, 0, 0, 0.10),
    0 0 30px rgba(16, 16, 16, 0.08);
}

/* ----- CARDS (feature / how-it-works step) -----
   Paste's three-tier shadow: hairline + soft + depth. */
.card,
.feature-card,
.feature-card.highlight-card {
  background: #ffffff;
  box-shadow:
    0 0.46px 0.46px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 15px rgba(0, 0, 0, 0.06);
  transition:
    transform   0.55s var(--ease-paste),
    box-shadow  0.55s var(--ease-paste);
}
/* Hover: 2px lift + 1.5% scale + diffuse 30px glow. */
.feature-card.anim:hover {
  transform: translateY(-2px) scale(1.015) perspective(1200px);
  box-shadow:
    0 0.46px 0.46px rgba(0, 0, 0, 0.10),
    0 0 30px rgba(16, 16, 16, 0.10);
}
.feature-card p { color: rgb(171, 171, 176); }
.feature-card h3 { color: rgb(16, 16, 16); }

/* ----- CTA PRIMARY -----
   Dark button on light page (inverted from the original
   white-on-dark dark-mode treatment). */
/* Brand-blue CTA pill against the white page. Slightly deeper than
   the #0088FF brand blue used for icons/labels so the button reads
   as the primary action. */
.cta-primary {
  background: #0171E3;
  color: #ffffff;
}
/* Stays the same on hover (no darkening); the interaction is just
   the lift + scale set in the base rule above. */
.cta-primary:hover { background: #0171E3; }

/* ----- TRIO COLUMNS / SHORTCUT CARDS ----- */
.trio-col,
.sc-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0.46px 0.46px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 15px rgba(0, 0, 0, 0.06);
}
.sc-card:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow:
    0 0.46px 0.46px rgba(0, 0, 0, 0.10),
    0 0 30px rgba(16, 16, 16, 0.12);
}
.trio-icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

/* ----- TESTIMONIAL CARDS -----
   #F5F5F7 (same as the body grey above) so they stand out
   against the now-white testimonials section background. */
.testimonial-card,
.tst-card {
  background: #F5F5F7;
  border-color: rgba(0, 0, 0, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 0.46px 0.46px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 15px rgba(0, 0, 0, 0.10);
}
.testimonial-card:hover,
.tst-card:hover {
  background: #F5F5F7;
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow:
    0 0.46px 0.46px rgba(0, 0, 0, 0.10),
    0 0 30px rgba(16, 16, 16, 0.10);
}


/* ----- COLOR DOTS ----- */
.color-dot {
  border-color: rgba(0, 0, 0, 0.08);
}
.color-dot:hover {
  border-color: rgba(0, 0, 0, 0.25);
}
.color-dot.active {
  border-color: rgba(0, 0, 0, 0.7);
}
.color-dot.active::after {
  border-color: rgba(0, 0, 0, 0.2);
}

/* ----- TESTIMONIAL ARROW BUTTONS ----- */
.tst-arrow {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1d1d1f;
}
.tst-arrow:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.16);
}
.tst-dot {
  background: rgba(0, 0, 0, 0.15);
}
.tst-dot.is-active {
  background: #1d1d1f;
}

/* ----- FAQ ACCORDION -----
   Plain rows on the page bg, hairline separator only. */
.faq-item {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: none;
}
.faq-header { color: #1d1d1f; }
.faq-body-text { color: #6e6e73; }

/* ----- HERO META ----- */
.hero-meta { color: #6e6e73; }

/* ----- APPLE ICON -----
   No override needed - the apple icon's base color is now
   blue (#0088FF) like the rest of the feature icons. */

/* ----- SECTION LABELS (accent blue) -----
   Blue text on white reads better than yellow and gives the
   page a distinct cool accent against the warm brand yellow
   used for icon fills. `#0088FF` matches the in-app accent
   blue used in feature card icons (.feat-clipboard, .feat-swipe).
   Contrast against `rgb(245,245,247)` is ~4.4:1, comfortably AA. */
section .section-label,
.trio-col .trio-label {
  color: #0088FF;
}
/* Per-section eyebrow label palette – one colour per section so the
   page reads as a tour through the accent presets (matches the
   colour-dot order in the customization card). */
.how-it-works       .section-label { color: #EAB800; } /* Yellow (slightly darker than the picker swatch for AA contrast) */
.features-intro     .section-label { color: #35C759; } /* Green */
.testimonials-section .section-label { color: #CB30E0; } /* Purple */
.faq-section        .section-label { color: #FF453A; } /* Red */
/* Inline accent-colored links (e.g. the FAQ refund link) -
   blue. Same `#0088FF` as the section labels so all text
   accents read as one consistent voice. */
a[style*="color:var(--accent)"],
a[style*="color: var(--accent)"] {
  color: #0088FF !important;
}

/* ----- FOOTER ----- */
footer { border-top-color: rgba(0, 0, 0, 0.08); }
.footer-credit { color: #6e6e73; }
.footer-links a { color: #6e6e73; }
.footer-links a:hover { color: #1d1d1f; }

/* ----- NAV LINKS / MOBILE-TOGGLE HAMBURGER ----- */
.nav-links a { color: #6e6e73; }
.nav-links a:hover { color: #1d1d1f; }
.nav-toggle span { background: #1d1d1f; }

/* ----- SUBTITLE / GENERIC PARAGRAPHS ----- */
/* Hero subtitle matches section subtitle tone for consistency
   across all secondary-text under headlines. */
.hero p.subtitle { color: #6e6e73; }
.privacy-body { color: #6e6e73; }

/* ===== NO SHADOWS =====
   Nuke every box-shadow on the page – flat aesthetic across
   cards, nav glass, FAQ rows, MacBook frame, key-press glows,
   the macbook LED dot, everything. Single universal rule
   with `!important` so it overrides every prior declaration
   (including the light-mode additions and any inset
   highlights). If the page ever needs a specific shadow back,
   add it AFTER this block and skip the `!important` – source
   order will let the targeted rule win. */
*,
*::before,
*::after {
  box-shadow: none !important;
}


/* ===== EXTERNALIZED INLINE STYLE REPLACEMENTS ===== */
.menubar-time {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.np-topbar-icon { height: 10px; }
.np-search-icon {
  height: 13px;
  width: auto;
  opacity: 0.35;
}

.np-note-interactive { cursor: pointer; }

.color-dot-blue { background: #0088FF; }
.color-dot-yellow { background: #FFCC01; }
.color-dot-green { background: #35C759; }
.color-dot-purple { background: #CB30E0; }
.color-dot-red { background: #FF453A; }

.tst-monogram-blue { background: #0088FF; }
.tst-monogram-gold { background: #F2B603; }
.tst-monogram-purple { background: #CB30E0; }
.tst-monogram-gray { background: #949BA5; }

.faq-help-line {
  text-align: center;
  margin-top: 48px;
  font-size: 14px;
  color: var(--text-3);
}

.faq-support-link,
.faq-email-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}