/* ==========================================================================
   DokaanDM — landing design system
   Tokens → primitives → components. Light + dark, fluid from 320px up.
   ========================================================================== */

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

/* The UA [hidden] rule loses to `svg { display: block }`, so restate it. */
[hidden] {
  display: none !important;
}

:root {
  /* Surfaces — paper, not screen. Every neutral carries a little red and
     yellow, so the page sits warm against the cool grey of the app
     screenshots and the shots read as a screen inside a room. */
  --bg: 252 251 249;
  --bg-2: 246 244 240;
  --surface: 255 255 255;
  --surface-2: 244 242 238;
  --surface-3: 230 226 219;
  --border: 228 224 217;
  --border-strong: 199 193 183;

  /* Text — warm ink rather than neutral black; text-3 is held above the
     4.5:1 line so meta copy stays legible. */
  --text: 25 24 22;
  --text-2: 90 85 78;
  --text-3: 132 125 116;

  /* Brand — #2563eb, the exact fill in favicon.svg and the blue the product UI
     already uses. It is not negotiable and not a design choice to relitigate:
     the mark, the app and the page have to be one colour. Hover and active are
     the same hue walked down in lightness. */
  --brand: 37 99 235;
  --brand-hover: 29 78 216;
  --brand-active: 30 64 175;
  --brand-fg: 255 255 255;
  --brand-soft: 237 242 253;

  /* The logo mark, pinned. It reads --brand's value in light mode but never
     themes, so the mark on the page always matches the favicon in the tab —
     dark mode has to lift --brand off a black ground to stay legible, and the
     mark must not lift with it. */
  --logo: 37 99 235;
  --logo-fg: 255 255 255;

  /* Accent — terracotta (#b7542d). Reserved for the cash-on-delivery
     thread: risk, money still out, the calculator. One warm colour that
     always means the same thing beats a second decorative blue. */
  --accent: 183 84 45;
  --accent-soft: 251 240 233;

  /* Ink — the deep panel behind the calculator result and closing CTA.
     Fixed rather than themed: those two blocks stay dark in both modes. */
  --ink: 24 27 38;
  --ink-2: 33 37 52;

  /* Semantic */
  --success: 31 122 77;
  --success-soft: 236 246 240;
  --warning: 176 113 15;
  --warning-soft: 251 244 231;
  --danger: 180 54 47;

  /* Elevation — layered, low-contrast, physically plausible. Tinted with the
     ink brown of the text, not blue-grey: a warm page casts a warm shadow. */
  --shadow-xs: 0 1px 2px rgb(38 32 26 / 0.05);
  --shadow-sm: 0 1px 2px rgb(38 32 26 / 0.06), 0 1px 3px rgb(38 32 26 / 0.05);
  --shadow-md: 0 2px 4px rgb(38 32 26 / 0.04), 0 8px 20px -6px rgb(38 32 26 / 0.1);
  --shadow-lg: 0 4px 8px rgb(38 32 26 / 0.05), 0 20px 44px -12px rgb(38 32 26 / 0.16);
  --shadow-xl: 0 8px 16px rgb(38 32 26 / 0.06), 0 32px 64px -16px rgb(38 32 26 / 0.2);

  /* Type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-h4: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-h3: clamp(1.3rem, 1.14rem + 0.7vw, 1.75rem);
  --fs-h2: clamp(1.75rem, 1.36rem + 1.7vw, 2.75rem);
  --fs-h1: clamp(2.3rem, 1.34rem + 4.1vw, 4rem);
  --fs-display: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);

  /* Radii */
  --r-xs: 0.375rem;
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.25rem;
  --r-2xl: 1.75rem;
  --r-full: 9999px;

  /* Rhythm */
  --section-y: clamp(3.5rem, 6.5vw, 6.5rem);
  --max: 75rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

/* Dark is the same room with the lights off: the neutrals keep their warmth
   rather than sliding to blue-grey, so the two themes read as one design. */
html.dark {
  --bg: 14 13 12;
  --bg-2: 19 18 17;
  --surface: 26 25 23;
  --surface-2: 35 33 31;
  --surface-3: 53 50 46;
  --border: 45 42 39;
  --border-strong: 70 66 61;

  --text: 247 245 242;
  --text-2: 172 165 156;
  --text-3: 133 126 117;

  /* #2563eb only reaches 3.4:1 on this background, so the brand has to lift to
     stay readable as text and as a border. Lifting it that far means white on
     top of it fails instead, so brand-fg inverts to ink. --logo does not
     follow: the mark stays the favicon's blue in both themes. */
  --brand: 122 163 255;
  --brand-hover: 158 189 255;
  --brand-active: 96 141 246;
  --brand-fg: 10 18 42;
  --brand-soft: 24 33 64;

  --accent: 226 141 98;
  --accent-soft: 46 30 22;

  --success: 90 198 141;
  --success-soft: 17 41 30;
  --warning: 226 172 78;
  --warning-soft: 46 35 15;
  --danger: 233 124 114;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 0.7);
  --shadow-xl: 0 32px 64px -16px rgb(0 0 0 / 0.8);

  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: rgb(var(--text));
  background: rgb(var(--bg));
  min-height: 100vh;
  overflow-x: hidden;
  font-feature-settings: 'cv02', 'cv03', 'cv04';
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

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

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

ul {
  list-style: none;
}

::selection {
  background: rgb(var(--brand) / 0.22);
}

:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgb(var(--bg)),
    0 0 0 4px rgb(var(--brand) / 0.6);
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  z-index: 200;
  transform: translate(-50%, -160%);
  padding: 0.6rem 1rem;
  border-radius: var(--r-sm);
  background: rgb(var(--brand));
  color: rgb(var(--brand-fg));
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: transform 0.18s var(--ease);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

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

@media (min-width: 640px) {
  .container {
    padding-inline: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 2.5rem;
  }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.07s; }
.reveal-delay-2 { transition-delay: 0.14s; }
.reveal-delay-3 { transition-delay: 0.21s; }
.reveal-delay-4 { transition-delay: 0.28s; }

/* ==========================================================================
   Logo
   ========================================================================== */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.logo-mark {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  background: rgb(var(--logo));
  color: rgb(var(--logo-fg));
  box-shadow:
    0 1px 2px rgb(16 24 40 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.22);
  flex-shrink: 0;
}

.logo-mark svg {
  width: 64%;
  height: 64%;
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgb(var(--text));
}

/* Pinned to --logo, not --brand, so the "DM" matches the mark sitting 10px to
   its left. Themed, the two would be different blues side by side in dark mode.
   At 18px/800 this counts as large text, so #2563eb's 3.4:1 on the dark ground
   clears the 3:1 large-text threshold. */
.logo-text span {
  color: rgb(var(--logo));
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-sm);
  white-space: nowrap;
  user-select: none;
  transition:
    background 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.22s var(--ease);
}

.btn-md {
  height: 2.375rem;
  padding-inline: 0.95rem;
  font-size: var(--fs-sm);
}

.btn-lg {
  height: 2.875rem;
  padding-inline: 1.4rem;
  font-size: var(--fs-base);
  border-radius: 0.625rem;
}

.btn-primary {
  background: rgb(var(--brand));
  color: rgb(var(--brand-fg));
  box-shadow:
    0 1px 2px rgb(16 24 40 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.16);
}

.btn-primary:hover {
  background: rgb(var(--brand-hover));
  box-shadow:
    0 4px 14px -2px rgb(var(--brand) / 0.42),
    inset 0 1px 0 rgb(255 255 255 / 0.16);
}

.btn-primary:hover svg {
  transform: translateX(2px);
}

.btn-primary:active {
  background: rgb(var(--brand-active));
}

.btn-secondary {
  background: rgb(var(--surface));
  color: rgb(var(--text));
  border: 1px solid rgb(var(--border));
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background: rgb(var(--surface-2));
  border-color: rgb(var(--border-strong));
}

.btn-ghost {
  color: rgb(var(--text-2));
}

.btn-ghost:hover {
  background: rgb(var(--surface-2));
  color: rgb(var(--text));
}

.btn-block {
  width: 100%;
}

.btn-icon {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border-radius: var(--r-sm);
  color: rgb(var(--text-2));
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease);
}

.btn-icon:hover {
  background: rgb(var(--surface-2));
  color: rgb(var(--text));
}

.btn-white {
  background: #fff;
  color: rgb(17 18 22);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.14);
}

.btn-white:hover {
  background: #f2f4f7;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
}

.btn-white:hover svg {
  transform: translateX(2px);
}

.btn-outline-white {
  border: 1px solid rgb(255 255 255 / 0.45);
  color: #fff;
  backdrop-filter: blur(4px);
}

.btn-outline-white:hover {
  background: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.75);
}

.spinner {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgb(var(--bg) / 0.72);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: rgb(var(--border));
  background: rgb(var(--bg) / 0.86);
  box-shadow: 0 1px 0 rgb(16 24 40 / 0.02), var(--shadow-xs);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: var(--r-full);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface) / 0.7);
}

.nav-link {
  position: relative;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgb(var(--text-2));
  transition:
    color 0.18s var(--ease),
    background 0.18s var(--ease);
}

.nav-link:hover {
  color: rgb(var(--text));
  background: rgb(var(--surface-2));
}

.nav-link.is-active {
  color: rgb(var(--brand));
  background: rgb(var(--brand) / 0.1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.header-actions .btn-signin,
.header-actions .btn-cta {
  display: none;
}

.mobile-panel {
  display: none;
  border-top: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  padding: 0.85rem 1.125rem 1.125rem;
  box-shadow: var(--shadow-lg);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
}

.mobile-panel.is-open {
  display: block;
  animation: panelIn 0.24s var(--ease) both;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.mobile-panel nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mobile-panel nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: 500;
  color: rgb(var(--text-2));
  transition: background 0.15s, color 0.15s;
}

.mobile-panel nav a::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.45;
}

.mobile-panel nav a:hover,
.mobile-panel nav a:active {
  background: rgb(var(--surface-2));
  color: rgb(var(--text));
}

.mobile-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(var(--border));
}

@media (min-width: 900px) {
  .nav-desktop {
    display: flex;
  }
  .header-actions .btn-signin,
  .header-actions .btn-cta {
    display: inline-flex;
  }
  #menu-toggle {
    display: none;
  }
  .mobile-panel,
  .mobile-panel.is-open {
    display: none !important;
  }
}

/* ==========================================================================
   Section scaffolding
   ========================================================================== */

.section {
  position: relative;
  padding-block: var(--section-y);
  border-bottom: 1px solid rgb(var(--border));
}

.section-surface {
  background: rgb(var(--bg-2));
}

html.dark .section-surface {
  background: rgb(var(--bg-2));
}

/* Editorial split: label and heading hold the left column, the standfirst sits
   in the right and baselines with the heading. Centred heads on every section
   flatten the page into a stack of identical blocks. */
/* No rule of its own: every section below opens with its own hairline, and two
   rules 50px apart read as a mistake rather than a system. */
.section-head {
  max-width: 42rem;
  padding-bottom: clamp(2rem, 3.5vw, 2.75rem);
}

@media (min-width: 900px) {
  .section-head:not(.section-head--stack) {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: end;
    max-width: none;
  }

  .section-head .eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .section-head .section-title {
    grid-column: 1;
    grid-row: 2;
  }

  .section-head .section-lead {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    padding-bottom: 0.35rem;
  }
}

/* Heads with no standfirst stay a single left column — splitting them would
   leave an empty half and wrap the title for no reason. */
.section-head--stack {
  max-width: 40rem;
}

/* A plain typographic label. Neutral, not brand blue: when every eyebrow, icon
   and tick on the page is blue, the accent stops meaning anything. */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}

.section-title {
  margin-top: 0.85rem;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: rgb(var(--text));
  text-wrap: balance;
}

.section-lead {
  margin-top: 0.9rem;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: rgb(var(--text-2));
  max-width: 34rem;
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* An asymmetric editorial split rather than a centred stack: the copy holds
   the left column and the screenshot runs off the right edge of the viewport,
   so the page opens on a shape instead of a symmetrical column. The warm wash
   at the foot hands off to the section below without a hard seam. */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgb(var(--border));
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(to bottom, rgb(var(--bg)) 55%, rgb(var(--bg-2)));
}

.hero .container {
  position: relative;
}

@media (min-width: 1080px) {
  .hero {
    padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
  }

  .hero .container {
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }

  /* The display size is tuned for a full-width measure; in a 30rem column it
     breaks "Sell where your customers" across four ragged lines. Held down
     here so the headline lands in three. */
  .hero h1 {
    font-size: clamp(2.6rem, 1.2rem + 2.6vw, 3.5rem);
  }
}

.hero-content {
  position: relative;
  max-width: 40rem;
}

/* Plain editorial eyebrow — a pill badge here would only restate the category.
   Sentence case on purpose: uppercasing would render "DMs" as "DMS". */
.hero-eyebrow {
  margin-bottom: 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(var(--text-3));
}

.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: rgb(var(--text));
}

/* Underscored rather than recoloured. A brand-blue phrase inside a headline
   reads as a link and drops the contrast of the words carrying the promise;
   a rule under them marks the emphasis and leaves the type at full strength. */
.hero h1 .accent {
  position: relative;
  white-space: nowrap;
}

.hero h1 .accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.11em;
  border-radius: 0.06em;
  background: rgb(var(--accent) / 0.85);
}

.hero-lead {
  margin-top: 1.25rem;
  max-width: 32rem;
  font-size: clamp(1rem, 0.94rem + 0.32vw, 1.1875rem);
  line-height: 1.65;
  color: rgb(var(--text-2));
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  margin-top: 1.9rem;
}

.hero-ctas .btn {
  min-width: 10.5rem;
}

@media (min-width: 480px) {
  .hero-ctas {
    flex-direction: row;
    align-items: center;
  }
}

/* One sentence in the writer's voice, not three ticked chips. The ticks were
   claiming credit for the absence of things nobody promised in the first
   place. */
.hero-trust {
  margin-top: 1.35rem;
  max-width: 30rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgb(var(--text-3));
}

.hero-trust strong {
  font-weight: 600;
  color: rgb(var(--text-2));
}

/* Below 1080px the shot returns to the flow, full width and centred. Above it,
   the frame is pinned wider than its column and allowed to run past the right
   edge — the crop is the point, it says the app continues off-screen. */
.hero-shot {
  position: relative;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 64rem;
}

/* A real bleed, not a hint of one. The frame is widened by exactly the gap
   between the container's inner edge and the viewport — outer margin plus the
   container's own padding — so it runs off the screen instead of stopping just
   short, which reads as a measurement error. The right corners square off and
   the right border goes: an edge you can see is an edge that didn't bleed. */
@media (min-width: 1080px) {
  .hero-shot {
    margin: 0;
    max-width: none;
    width: calc(100% + max(0px, (100vw - var(--max)) / 2) + 2.5rem);
  }

  .hero-shot .shot-frame {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* ==========================================================================
   Screenshot frames
   ========================================================================== */

.shot-stage {
  position: relative;
  isolation: isolate;
}

.shot-clickable {
  cursor: zoom-in;
}

.shot-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  box-shadow: var(--shadow-lg);
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.35s var(--ease);
}

.shot-frame--hero {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
}

.shot-clickable:hover .shot-frame {
  border-color: rgb(var(--border-strong));
  box-shadow: var(--shadow-xl);
}

/* No mock browser chrome at all. Every screenshot already opens with the real
   app header — its own page title and workspace switcher — so a tab bar or a
   fake address pill above it just restated what the image was about to say.
   The only thing the frame still owes the reader is the affordance that the
   shot opens, and that floats over the corner.

   Held at low opacity until the shot is hovered or focused, so five of these
   down the page don't read as a row of buttons. */
.shot-zoom-hint {
  position: absolute;
  z-index: 3;
  top: 0.6rem;
  right: 0.6rem;
  display: none;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--r-xs);
  background: rgb(var(--surface) / 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgb(var(--border));
  color: rgb(var(--text-2));
  font-size: 0.6875rem;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
  opacity: 0;
  transform: translateY(-0.25rem);
  transition:
    opacity 0.2s var(--ease),
    transform 0.2s var(--ease),
    color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}

/* Shown at every width. It used to be hidden below 560px, which removed the
   only visible sign that a shot opens from the readers who need it most — a
   phone renders a desktop screenshot too small to read, so tapping through to
   the full image is the whole point on a small screen. */
.shot-zoom-hint {
  display: inline-flex;
}

.shot-clickable:hover .shot-zoom-hint,
.shot-clickable:focus-visible .shot-zoom-hint {
  opacity: 1;
  transform: none;
  color: rgb(var(--brand));
  border-color: rgb(var(--brand) / 0.45);
}

/* Coarse pointers get no hover, so the hint has to be there from the start. */
@media (hover: none) {
  .shot-zoom-hint {
    opacity: 1;
    transform: none;
  }
}

.shot-viewport {
  position: relative;
  background: rgb(var(--bg));
  overflow: hidden;
}

/* <picture> only carries the WebP <source>; it must not generate a box of its
   own, or the inline wrapper adds a stray baseline gap under every shot. */
.shot-viewport picture {
  display: contents;
}

.shot-viewport img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.shot-viewport img.is-hidden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  pointer-events: none;
}

/* Crop the hero shot so it reads as a window, not a full page dump. The cut is
   left hard against the frame border. A gradient used to soften it, but it had
   to fade to a guessed colour — the page's surface token, not the app's own
   background — and the mismatch showed as a haze along the bottom edge in dark
   mode. A clean crop reads as a decision; a haze reads as a bug. */
.shot-frame--hero .shot-viewport {
  max-height: min(62vh, 30rem);
}

/* A 1440px-wide dashboard fitted to a 350px phone is a grey smudge — it proves
   a screenshot exists without showing anything in it. Below 640px the hero shot
   is scaled up and cropped to its top-left instead, so the greeting and the
   first two figures are actually readable and the crop says the screen carries
   on past the edge. Both themes get the same geometry, or the swap would jump. */
@media (max-width: 639px) {
  .shot-frame--hero .shot-viewport {
    max-height: 19rem;
  }

  .shot-frame--hero .shot-viewport img,
  .shot-frame--hero .shot-viewport img.is-hidden {
    width: 175%;
    max-width: none;
    height: auto;
    object-fit: fill;
  }

  .shot-frame--hero .shot-viewport img.is-hidden {
    inset: 0 auto auto 0;
  }
}

/* ==========================================================================
   Features
   ========================================================================== */

/* Ruled columns rather than six identical boxes. The hairline grid gives the
   same scanning structure without wrapping every idea in a card. */
.feature-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid rgb(var(--border));
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 4vw, 3.5rem);
  }
}

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

.feature-card {
  display: flex;
  flex-direction: column;
  padding-block: clamp(1.6rem, 3vw, 2.25rem);
  border-bottom: 1px solid rgb(var(--border));
}

/* Last row keeps its rule only where the grid actually ends. */
@media (min-width: 1024px) {
  .feature-card:nth-last-child(-n + 3) {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.feature-icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  margin-bottom: 0.9rem;
  color: rgb(var(--text-2));
}

.feature-icon svg {
  width: 100%;
  height: 100%;
}

.feature-card h3 {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgb(var(--text));
}

.feature-card p {
  margin-top: 0.5rem;
  margin-bottom: 1.1rem;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: rgb(var(--text-2));
  max-width: 26rem;
}

/* margin-top:auto keeps the spec line on the baseline across a row. */
.feature-tag {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgb(var(--text-3));
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   Product tour
   ========================================================================== */

/* Five screens, plainly stacked. Copy on one side, the screenshot on the
   other, sides alternating so the eye zig-zags down the page instead of
   running straight down one gutter. */
.product-list {
  display: flex;
  flex-direction: column;
}

.product-row {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgb(var(--border));
}

/* Hairlines separate the rows, so the first one doesn't get a lid. */
.product-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.product-row:last-child {
  padding-bottom: 0;
}

@media (min-width: 900px) {
  .product-row {
    /* Screenshot side wider: the text reads fine narrow, the UI in the shot
       does not. */
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(2.75rem, 6vw, 4.5rem);
  }

  /* Copy comes first in the markup on every row, so reading order and the
     mobile stack stay correct; flipping is only a placement swap. */
  .product-row:nth-child(even) .product-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .product-row:nth-child(even) .shot-stage {
    grid-column: 1;
    grid-row: 1;
  }
}

.product-copy h3 {
  margin-top: 0.85rem;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgb(var(--text));
  text-wrap: balance;
}

.product-copy > p {
  margin-top: 0.85rem;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: rgb(var(--text-2));
  max-width: 34rem;
}

.product-bullets {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-base);
  color: rgb(var(--text-2));
}

.bullet-check {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: rgb(var(--brand) / 0.12);
  color: rgb(var(--brand));
}

.bullet-check svg {
  width: 0.72rem;
  height: 0.72rem;
}

/* ==========================================================================
   DM capture simulator
   ========================================================================== */

.dm-simulator-wrapper {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--r-xl);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}


.sim-header {
  position: relative;
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}


.sim-header h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: rgb(var(--text));
}

.sim-header p {
  margin-top: 0.6rem;
  font-size: var(--fs-base);
  color: rgb(var(--text-2));
}

.sim-body {
  position: relative;
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 960px) {
  .sim-body {
    grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
  }
}

.sim-chat {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  min-width: 0;
}

.sim-chat-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  background: rgb(var(--surface-2));
  border-bottom: 1px solid rgb(var(--border));
}

.sim-avatar {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #f09433, #dc2743 55%, #bc1888);
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.sim-chat-user {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sim-chat-user strong {
  font-size: var(--fs-base);
  color: rgb(var(--text));
}

.sim-chat-user span {
  font-size: var(--fs-xs);
  color: rgb(var(--text-3));
}

.sim-status {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: var(--r-xs);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgb(var(--text-3));
  flex-shrink: 0;
}

.sim-messages {
  padding: 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: rgb(var(--bg));
  flex: 1;
  min-height: 9.5rem;
}

.sim-msg {
  max-width: 92%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.sim-msg.incoming {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  color: rgb(var(--text));
  align-self: flex-start;
  border-top-left-radius: 0.25rem;
  box-shadow: var(--shadow-xs);
}

.sim-msg .time {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.625rem;
  color: rgb(var(--text-3));
}

.sim-chat-actions {
  padding: 0.8rem 0.9rem;
  background: rgb(var(--surface));
  border-top: 1px solid rgb(var(--border));
}

.sim-arrow {
  display: grid;
  place-items: center;
  color: rgb(var(--text-3));
}

.sim-arrow svg {
  width: 1.35rem;
  height: 1.35rem;
  transform: rotate(90deg);
  animation: simNudge 1.9s ease-in-out infinite;
}

@media (min-width: 960px) {
  .sim-arrow svg {
    transform: none;
  }
}

@keyframes simNudge {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.sim-result {
  border-radius: var(--r-md);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  box-shadow: var(--shadow-sm);
  padding: 1.1rem;
  min-width: 0;
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.sim-order-header {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgb(var(--border));
}

.sim-order-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.order-no {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  color: rgb(var(--text));
}

.order-status {
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-xs);
  font-size: 0.6875rem;
  font-weight: 700;
}

.badge-pending {
  background: rgb(var(--warning) / 0.14);
  color: rgb(var(--warning));
}

.sim-cod-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-xs);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sim-cod-badge.badge-success {
  background: rgb(var(--success) / 0.1);
  color: rgb(var(--success));
  border: 1px solid rgb(var(--success) / 0.28);
}

.sim-cod-badge.badge-pending {
  background: rgb(var(--warning) / 0.1);
  color: rgb(var(--warning));
  border: 1px solid rgb(var(--warning) / 0.28);
}

.sim-cod-badge svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

.sim-order-details {
  padding-block: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sim-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-sm);
}

.sim-detail-row .label {
  color: rgb(var(--text-3));
  flex-shrink: 0;
}

.sim-detail-row .val {
  color: rgb(var(--text));
  font-weight: 500;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sim-detail-row .val.highlight {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
}

.sim-order-footer {
  padding-top: 0.75rem;
  border-top: 1px solid rgb(var(--border));
  text-align: center;
}

.sim-ready-text {
  font-size: var(--fs-xs);
  color: rgb(var(--text-3));
}

/* ==========================================================================
   How it works
   ========================================================================== */

.steps {
  position: relative;
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 4vw, 3.5rem);
  }
}

/* A numbered sequence, not three more cards. The rule above each step carries
   the structure; the numeral carries the order. */
.step {
  position: relative;
  padding-top: 1.35rem;
  border-top: 2px solid rgb(var(--text));
}

.step-head {
  margin-bottom: 0.9rem;
}

.step-num {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  color: rgb(var(--text-3));
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgb(var(--text));
}

.step p {
  margin-top: 0.6rem;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: rgb(var(--text-2));
  max-width: 24rem;
}

/* ==========================================================================
   ROI calculator
   ========================================================================== */

.calc-card {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-md);
}

.calc-grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

@media (min-width: 1024px) {
  .calc-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
  }
}

.calc-controls {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.calc-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.calc-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.calc-label-row label {
  font-size: var(--fs-base);
  font-weight: 500;
  color: rgb(var(--text));
}

/* The whole calculator is about cash on delivery, so it runs on the accent
   rather than the brand. Two colours across the page, each meaning one thing:
   blue is the product, terracotta is COD and the money it puts at risk. */
.calc-val-badge {
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-xs);
  border: 1px solid rgb(var(--accent) / 0.28);
  background: rgb(var(--accent) / 0.09);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: rgb(var(--accent));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Custom range input — filled track via --pct set in JS */
.calc-slider {
  --pct: 20%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.5rem;
  border-radius: var(--r-full);
  background:
    linear-gradient(
      90deg,
      rgb(var(--accent)) 0 var(--pct),
      rgb(var(--surface-3)) var(--pct) 100%
    );
  outline: none;
  cursor: pointer;
  margin-top: 0.15rem;
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--r-full);
  background: #fff;
  border: 2px solid rgb(var(--accent));
  box-shadow: 0 1px 4px rgb(38 32 26 / 0.28);
  cursor: grab;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 0.3rem rgb(var(--accent) / 0.18);
}

.calc-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
}

.calc-slider::-moz-range-thumb {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: var(--r-full);
  background: #fff;
  border: 2px solid rgb(var(--accent));
  box-shadow: 0 1px 4px rgb(38 32 26 / 0.28);
  cursor: grab;
}

.calc-slider::-moz-range-track {
  height: 0.5rem;
  border-radius: var(--r-full);
  background: transparent;
}

.calc-ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgb(var(--text-3));
}

.calc-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: 0.5rem;
  border: 1px solid rgb(var(--border));
  border-radius: var(--r-md);
  background: rgb(var(--border));
  overflow: hidden;
}

/* Stacked on narrow screens reads as a label/value list; a row of three above. */
.calc-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  background: rgb(var(--bg));
}

@media (min-width: 560px) {
  .calc-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .calc-summary > div {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.85rem 0.95rem;
  }
}

.calc-summary-label {
  font-size: var(--fs-xs);
  color: rgb(var(--text-3));
}

.calc-summary-val {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgb(var(--text));
  font-variant-numeric: tabular-nums;
}

.calc-summary-val.is-brand {
  color: rgb(var(--accent));
}

/* Ink, not a slab of brand blue. A saturated panel this size fights the
   screenshots for attention, and in dark mode the brand token lifts far
   enough that white type on it drops under 4.5:1. Ink is fixed in both
   themes, so the contrast is knowable. The figure is left-aligned and set
   large — a number is the one thing on the page worth shouting. */
.calc-result-box {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgb(var(--ink-2)), rgb(var(--ink)));
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
}

/* One warm rule at the top edge, picking up the accent used for COD
   everywhere else on the page. */
.calc-result-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgb(var(--accent));
}

.result-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.result-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.62);
}

.result-sub {
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 0.5);
}

.result-number {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  margin-block: 0.65rem 0.75rem;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.result-desc {
  padding-top: 0.9rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: rgb(255 255 255 / 0.66);
}

.result-desc strong,
.result-desc span {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.result-cta {
  margin-top: 1.4rem;
}

.result-note {
  margin-top: 0.9rem;
  font-size: 0.6875rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.42);
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.billing-toggle {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.25rem;
}

.toggle {
  display: inline-flex;
  padding: 0.25rem;
  border-radius: var(--r-full);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  box-shadow: var(--shadow-xs);
}

.toggle button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgb(var(--text-3));
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.toggle button:hover {
  color: rgb(var(--text-2));
}

.toggle button.is-active {
  background: rgb(var(--brand));
  color: rgb(var(--brand-fg));
  box-shadow: var(--shadow-xs);
}

.toggle .save {
  padding: 0.05rem 0.35rem;
  border-radius: var(--r-xs);
  background: rgb(var(--success) / 0.14);
  font-size: 0.625rem;
  font-weight: 700;
  color: rgb(var(--success));
}

.toggle button.is-active .save {
  background: rgb(255 255 255 / 0.22);
  color: #fff;
}

.pricing-grid {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

@media (min-width: 640px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
    align-items: stretch;
  }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem;
  border-radius: var(--r-lg);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.price-card:hover {
  border-color: rgb(var(--border-strong));
  box-shadow: var(--shadow-md);
}

/* The recommended plan is marked with a solid top rule and a heavier card,
   not a floating pill. It reads as the same object as its neighbours, just
   emphasised — which is what "recommended" actually means. */
.price-card.is-popular {
  border-color: rgb(var(--border-strong));
  box-shadow: var(--shadow-md);
}

.price-card.is-popular::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: rgb(var(--brand));
}

.price-card.is-popular:hover {
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1100px) {
  .price-card.is-popular {
    margin-block: -0.75rem;
    padding-block: 2.35rem;
  }
}

/* Sits in the card, on the same baseline as the plan name — no absolute
   positioning to collide with the card above it on a narrow screen. */
.popular-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--brand));
  white-space: nowrap;
}

.plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.25rem;
}

.plan-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}

.price-main {
  font-family: var(--font-heading);
  margin-top: 0.75rem;
  font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: rgb(var(--text));
  font-variant-numeric: tabular-nums;
}

.price-sub {
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: rgb(var(--text-3));
}

.price-features {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgb(var(--border));
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: var(--fs-base);
  color: rgb(var(--text-2));
}

.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.price-features li svg {
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.28rem;
  flex-shrink: 0;
  color: rgb(var(--brand));
}

.price-card .btn {
  margin-top: 1.6rem;
}

.pricing-note {
  margin-top: 1.9rem;
  max-width: 44rem;
  font-size: var(--fs-sm);
  color: rgb(var(--text-3));
}

/* ==========================================================================
   Scope — what the product deliberately does not do
   ========================================================================== */

.scope-list {
  display: grid;
  gap: 0;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid rgb(var(--border));
}

@media (min-width: 768px) {
  .scope-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}

.scope-list li {
  padding-block: 1.6rem;
  border-bottom: 1px solid rgb(var(--border));
}

.scope-list h3 {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-h4);
  font-weight: 700;
  color: rgb(var(--text));
}

/* A struck-through rule, not a red cross: these are choices, not failures. */
.scope-list h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.85rem;
  height: 2px;
  border-radius: 1px;
  background: rgb(var(--text-3));
}

.scope-list p {
  margin-top: 0.5rem;
  padding-left: 1.6rem;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: rgb(var(--text-2));
  max-width: 34rem;
}


/* ==========================================================================
   Founder's note
   ========================================================================== */

/* The one place on the page where a person speaks. It gets the treatment of a
   letter rather than a card: a hanging label in the left margin, a measure
   narrow enough to read like prose, and a rule under the signature. No avatar
   — a stock headshot would undo exactly the thing this block is for. */
.note {
  position: relative;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 2px solid rgb(var(--text));
}

@media (min-width: 900px) {
  .note {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}

.note-label {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: rgb(var(--text));
  text-wrap: balance;
}

@media (max-width: 899px) {
  .note-label {
    margin-bottom: 1.1rem;
  }
}

.note-body {
  max-width: 38rem;
}

/* Slightly larger and looser than body copy elsewhere — this is the one block
   meant to be read rather than scanned. */
.note-body p {
  font-size: var(--fs-lg);
  line-height: 1.72;
  color: rgb(var(--text-2));
}

.note-body p + p {
  margin-top: 1.1rem;
}

.note-body em {
  font-style: italic;
  color: rgb(var(--text));
}

.note-sign {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.6rem;
  font-size: var(--fs-sm);
  color: rgb(var(--text-3));
}

.note-sign span {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgb(var(--text));
}

.note-sign span::after {
  content: '';
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-top: 0.4rem;
  background: rgb(var(--accent));
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-list {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgb(var(--border));
}

.faq-item {
  border-bottom: 1px solid rgb(var(--border));
}

.faq-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  text-align: left;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: rgb(var(--text));
  transition: color 0.18s var(--ease);
}

.faq-trigger:hover {
  color: rgb(var(--brand));
}

.faq-trigger svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: rgb(var(--text-3));
  transition: transform 0.28s var(--ease), color 0.2s var(--ease);
}

.faq-item.is-open .faq-trigger svg {
  transform: rotate(180deg);
  color: rgb(var(--brand));
}

/* Height animation without JS measurement */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}

.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel > div {
  overflow: hidden;
}

.faq-panel p {
  padding: 0 0 1.4rem;
  max-width: 42rem;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: rgb(var(--text-2));
}

.faq-footnote {
  margin-top: 1.75rem;
  font-size: var(--fs-base);
  color: rgb(var(--text-2));
}

.faq-footnote a {
  color: rgb(var(--brand));
  font-weight: 600;
}

.faq-footnote a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.final-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid rgb(var(--border));
}

/* Ink in both themes, matching the calculator panel. A full-bleed band of
   saturated brand blue is the loudest thing a page can do, and doing it in
   the last screenful means the reader leaves on noise rather than on the
   sentence you actually want them holding. */
.final-cta-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgb(var(--ink-2)), rgb(var(--ink)) 65%);
}

/* A single hairline in the accent, the same mark that opens the calculator
   panel — the page's one recurring flourish, used twice. */
.final-cta-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgb(var(--accent));
  pointer-events: none;
}

.final-cta-inner {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.final-cta h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
}

.final-cta p {
  margin: 0.9rem auto 0;
  max-width: 34rem;
  font-size: var(--fs-lg);
  color: rgb(255 255 255 / 0.85);
}

.final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2rem;
}

@media (min-width: 480px) {
  .final-cta-actions {
    flex-direction: row;
    align-items: center;
  }
}

.final-cta-note {
  margin-top: 1.35rem;
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.7);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: rgb(var(--bg-2));
  padding-block: clamp(2.75rem, 5vw, 4rem);
}

.footer-grid {
  display: grid;
  gap: 2.25rem;
}

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

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2.5rem;
  }
}

.footer-brand p {
  margin-top: 0.9rem;
  max-width: 22rem;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: rgb(var(--text-2));
}


/* A real address block where the dead social buttons used to be. Terms and
   labels on the same line so it reads as a masthead, not another link list. */
.footer-meta {
  margin-top: 1.35rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 1rem;
  font-size: var(--fs-sm);
}

.footer-meta dt {
  color: rgb(var(--text-3));
}

.footer-meta dd {
  color: rgb(var(--text-2));
}

.footer-meta a {
  color: rgb(var(--text-2));
  text-decoration: underline;
  text-decoration-color: rgb(var(--border-strong));
  text-underline-offset: 0.2em;
  transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease);
}

.footer-meta a:hover {
  color: rgb(var(--brand));
  text-decoration-color: rgb(var(--brand) / 0.5);
}

.footer-col h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}

.footer-col ul {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: var(--fs-base);
  color: rgb(var(--text-2));
}

.footer-col a {
  transition: color 0.15s var(--ease);
}

.footer-col a:hover {
  color: rgb(var(--brand));
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(var(--border));
  font-size: var(--fs-sm);
  color: rgb(var(--text-3));
  text-align: center;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  /* Keep the tagline clear of the fixed back-to-top button */
  .footer-bottom p:last-child {
    padding-right: 3.25rem;
  }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease);
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgb(4 5 8 / 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lightbox-content {
  position: relative;
  z-index: 1;
  width: min(100%, 78rem);
  max-height: 92vh;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(var(--surface));
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  transform: scale(0.97);
  transition: transform 0.28s var(--ease);
}

.lightbox.is-open .lightbox-content {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: var(--r-full);
  background: rgb(0 0 0 / 0.5);
  color: #fff;
  transition: background 0.15s;
}

.lightbox-close:hover {
  background: rgb(0 0 0 / 0.78);
}

.lightbox-close svg {
  width: 1.05rem;
  height: 1.05rem;
}

.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  background: rgb(var(--surface-2));
  border-bottom: 1px solid rgb(var(--border));
  gap: 1rem;
}

.lightbox-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.lightbox-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  color: rgb(var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lightbox-tag {
  font-size: var(--fs-xs);
  color: rgb(var(--text-3));
  margin-right: 2.25rem;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .lightbox-tag {
    display: none;
  }
}

.lightbox-body {
  overflow: auto;
  padding: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--bg));
}

.lightbox-body img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   Back to top
   ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-full);
  background: rgb(var(--surface));
  color: rgb(var(--text-2));
  border: 1px solid rgb(var(--border));
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    transform 0.18s var(--ease);
  cursor: pointer;
}

.back-to-top:hover {
  background: rgb(var(--brand));
  border-color: rgb(var(--brand));
  color: #fff;
}

.back-to-top svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

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

@media print {
  .site-header,
  .back-to-top,
  .lightbox,
  .shot-zoom-hint {
    display: none !important;
  }
}