/* ==========================================================================
   Gradia — marketing site
   Structure, type and tokens. Scenes, motion and interaction live in
   marketing-premium.css.

   Every colour below is a published Gradia value. Nocturne and daylight
   seeds come from GradiaMaterialPalette.swift (luminous environment ruling,
   2026-08-16); ink, event light and the mineral tertiary ladder come from
   GRADIA_VISUAL_SYSTEM_2026-08-16 §3. Type follows §4 — standard-width San
   Francisco, native kerning, Medium ceiling, zero tracking.
   ========================================================================== */

:root {
  /* ---- Nocturne: the site's lead register ---- */
  --night-base: #00091d;
  --night-field-1: #001640;
  --night-field-2: #031f52;
  --night-field-3: #061330;
  --night-field-4: #162141;
  --night-surface: #101a29;
  --night-chrome: #16243a;

  /* ---- Daylight: powder calibration ---- */
  --day-base: #d9e9fa;
  --day-field-1: #69b7f6;
  --day-field-2: #afcff2;
  --day-field-3: #e4effb;
  --day-field-4: #c5dcf5;
  --day-surface: #fcfdfe;

  /* ---- Focused workout: the frozen room ---- */
  --focus-base: #070b12;
  --focus-field-1: #0d1623;
  --focus-field-2: #182438;

  /* ---- Ink ---- */
  --ink: #f4f7fb;
  --ink-soft: #a7b5c8;
  --ink-quiet: rgb(167 181 200 / 72%);
  --ink-day: #101923;
  --ink-day-soft: #506174;

  /* ---- Event light. Semantic only — never a control fill. ---- */
  --readiness: #2f7dff;
  --effort: #ff9845;
  --completion: #ffc071;
  --safety: #ff5a4f;

  /* ---- The one warm source. x .86–.92, y .17–.23, both registers. ---- */
  --lamp: 255 201 138;

  /* ---- Structure ---- */
  --hairline: rgb(244 247 251 / 18%);
  --hairline-quiet: rgb(244 247 251 / 12%);
  --hairline-day: rgb(16 25 35 / 16%);
  --chalk: rgb(244 247 251 / 92%);
  --chalk-wash: rgb(244 247 251 / 8%);

  --shell: min(1240px, calc(100% - 64px));
  --radius: 24px;
  --radius-control: 999px;

  /* Two faces, one boundary. The app's display register is SF Rounded
     (GradiaTypeScale: marketingDisplay, displayHero, screenTitle, sectionTitle
     and every numeral 30pt and up carry `design: .rounded`), and reading text
     stays standard — "rounded prose is harder to read and starts to look like
     a children's app". Web boundary matches: 20px and above is display.
     `ui-rounded` resolves on WebKit; elsewhere it falls through to standard SF,
     which is the same face the reading stack uses. */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;

  /* ---- Spacing foundation: 4/8/12/16/24/32/48/64 ---- */
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --section-space: 136px;
}

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

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  background: var(--night-base);
}

body {
  margin: 0;
  background: var(--night-base);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

:is(a, button, summary):focus-visible {
  outline: 3px solid var(--readiness);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ==========================================================================
   Type — §4 product ladder, marketing display licence above 28pt.
   Weight ceiling is Medium (500). Tracking is zero. No exceptions.
   ========================================================================== */

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* Display face. h3 is 20px, which is the app's `sectionTitle` — the smallest
   rounded role — so it sits on the display side of the boundary too. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
}

p,
li,
summary {
  text-wrap: pretty;
}

h1 {
  max-width: 20ch;
  margin-bottom: 24px;
  font-size: clamp(46px, 5.2vw, 74px);
  line-height: 1.04;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.06;
}

h3 {
  margin-bottom: var(--space-3);
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
}

.lede {
  max-width: 54ch;
  margin-bottom: var(--space-8);
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 28px;
}

.keep-together {
  white-space: nowrap;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-space);
}

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: end;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.section-intro > * {
  min-width: 0;
}

.section-intro h2 {
  max-width: 22ch;
}

.section-intro > p {
  max-width: 46ch;
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 26px;
}

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

.site-header {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 88px;
  transform: translateX(-50%);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 19px;
  font-weight: 500;
}

/* The mark is 740 × 555: four quadrants, not a square. It is inlined and
   filled with currentColor rather than loaded as an <img>, because the app's
   mark file self-themes on prefers-color-scheme and this page is nocturne for
   every visitor — a light-mode reader would otherwise get #101923 on #00091D. */
.gradia-mark {
  flex: none;
  width: 30px;
  height: 22.5px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}

.desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
}

.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] {
  color: var(--ink);
}

/* The primary control is a chalk hairline capsule — faint wash, chalk label,
   structural hairline. Never a filled slab. §7. */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 44px;
  padding: 0 19px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--chalk-wash);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

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

.hero {
  position: relative;
  min-height: 880px;
  overflow: hidden;
  isolation: isolate;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.82fr);
  align-items: center;
  gap: 64px;
  min-height: 880px;
  padding-top: 88px;
}

.hero-copy,
.hero-stage {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Availability line. There is no App Store listing yet, so there is no badge
   and no fake button — Apple's marketing guidelines require the badge to link
   to a live product page, and a dead control is worse than an honest sentence.
   Swap in .store-badge here on launch day. */
.availability {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 21px;
}

.availability strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
}

.hero-stage {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 880px;
  padding: 108px 24px 40px;
}

.hero-stage .phone {
  width: min(376px, 100%);
}

/* ==========================================================================
   Device
   ========================================================================== */

.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 879 / 1832;
  filter: drop-shadow(0 34px 44px rgb(0 9 29 / 62%));
}

/* Insets and radius are measured against the 879 × 1832 device render in
   /assets/gradia/device/ — the same frame family Rivet uses, so the numbers
   are shared. Screenshots are 1206 × 2622; `cover` absorbs the small ratio
   difference at the top and bottom bezel. */
.phone-screen {
  position: absolute;
  inset: 2.3% 4.2% 2.35%;
  z-index: 1;
  overflow: hidden;
  border-radius: 13.2% / 6.5%;
  background: var(--night-base);
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("/assets/gradia/device/iphone-17-pro-deepblue.png") 50% / 100% 100% no-repeat;
  pointer-events: none;
}

/* ==========================================================================
   Method — three ruled steps beside a device
   ========================================================================== */

.story-section {
  position: relative;
}

.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(440px, 1.2fr);
  gap: var(--space-6);
}

.story-layout > * {
  min-width: 0;
}

.story-steps {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-content: center;
  gap: 18px;
  min-height: 150px;
  padding: 28px;
  border: 1px solid var(--hairline-quiet);
  border-radius: var(--radius);
  background: var(--night-surface);
}

.story-steps li > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.story-steps h3,
.view-card h3 {
  margin-bottom: 10px;
}

/* Measured caps, not guessed ones. The CSS `ch` unit is the advance of "0",
   which in SF is ~15% narrower than the average lowercase advance — so a
   declared 58ch renders as ~68 real characters, which is the top of the
   comfortable range. Every cap below is set from a rendered measurement. */
.story-steps p,
.view-card p {
  max-width: 46ch;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 20px;
}

.story-stage,
.view-stage {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 540px;
  overflow: hidden;
  border-radius: var(--radius);
}

.story-stage {
  padding: 48px;
}

.story-stage .phone {
  width: min(330px, 100%);
}

/* ==========================================================================
   Surfaces — one wide card, two half cards
   ========================================================================== */

.view-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.view-card {
  display: grid;
  grid-template-rows: auto 460px;
  overflow: hidden;
  border: 1px solid var(--hairline-quiet);
  border-radius: var(--radius);
  background: var(--night-surface);
  min-width: 0;
}

.view-card-wide {
  grid-column: 1 / -1;
  grid-template-rows: 620px;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
}

.view-card-copy {
  align-self: end;
  padding: 36px 40px;
}

.view-card-wide .view-card-copy {
  align-self: center;
  padding: 50px;
}

.view-card h3 {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.14;
}

.view-card-wide h3 {
  font-size: clamp(28px, 2.4vw, 34px);
}

.view-stage {
  min-height: 460px;
  padding: 48px 48px 0;
}

.view-stage .phone {
  width: min(272px, 100%);
}

.view-card-wide .view-stage {
  min-height: 620px;
}

.view-card-wide .view-stage .phone {
  width: min(324px, 100%);
}

/* Crosslink to /features. Lives here, not in features.css, because the home
   page carries one too and does not load that stylesheet. */
.features-crosslink {
  margin: 28px 0 0;
  text-align: center;
}

.features-crosslink a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}

.features-crosslink a:hover {
  color: var(--ink-soft);
}

/* ==========================================================================
   Connections — the daylight band
   ========================================================================== */

.connections-section {
  padding-block: var(--section-space);
  color: var(--ink-day);
}

.connections-section .section-intro > p,
.connections-section .privacy-panel p {
  color: var(--ink-day-soft);
}

.connections-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--hairline-day);
  border-radius: var(--radius);
}

.connection {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 106px;
  padding: 24px 28px;
  border-right: 1px solid var(--hairline-day);
  border-bottom: 1px solid var(--hairline-day);
  color: var(--ink-day);
  font-size: 15px;
}

.connection:nth-child(3n) {
  border-right: 0;
}

.connection:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.connection svg {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--ink-day);
}

/* Wordmark-only services get a letter in a ring rather than an approximated
   logo. Same footprint as the drawn icons so the column stays aligned. */
.letter-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(16 25 35 / 34%);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
}

.privacy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  margin-top: var(--space-6);
  padding: 30px 34px;
  border-radius: var(--radius);
  background: rgb(255 255 255 / 54%);
}

.privacy-panel h3 {
  color: var(--ink-day);
}

.privacy-panel p {
  max-width: 56ch;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 22px;
}

.privacy-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--hairline-day);
  border-radius: var(--radius-control);
  color: var(--ink-day);
  font-size: 13px;
  font-weight: 500;
}

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

/* The register change from the daylight band already reads as a boundary, so
   this section does not also need a full section-space above it. */
.pricing-section {
  padding-top: 104px;
  padding-bottom: 96px;
}

.pricing-intro {
  align-items: start;
  margin-bottom: var(--space-12);
}

.pricing-intro > div {
  max-width: 46ch;
}

.pricing-intro > div > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 26px;
}

.pricing-intro .free-copy {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-quiet);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 21px;
}

.pro-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.62fr);
  gap: var(--space-16);
  overflow: hidden;
  padding: 56px;
  border-radius: var(--radius);
}

.pro-copy {
  display: grid;
  align-content: space-between;
  gap: var(--space-12);
  min-width: 0;
}

.pro-identity {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.pro-icon {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: 0 16px 30px rgb(0 9 29 / 42%);
}

.pro-identity h3 {
  margin-bottom: 8px;
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.05;
}

.pro-identity p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 22px;
}

.pro-features {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline-quiet);
  list-style: none;
}

.pro-features li {
  position: relative;
  padding: 18px 0 18px 28px;
  border-bottom: 1px solid var(--hairline-quiet);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 21px;
}

.pro-features li:last-child {
  border-bottom: 0;
}

.pro-features li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--ink-quiet);
  transform: translateY(-50%);
}

/* The panel hugs its content rather than stretching to the feature list.
   Stretching leaves a hole where Rivet has a purchase button, and an
   unexplained hole reads as a bug. */
.pro-purchase {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  padding: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgb(16 26 41 / 82%);
  backdrop-filter: none;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

.price strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(44px, 4.6vw, 60px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
}

.price span {
  color: var(--ink-soft);
  font-size: 15px;
}

.trial {
  margin: 18px 0 var(--space-8);
  color: var(--readiness);
  font-size: 14px;
  font-weight: 500;
}

.alternate-pricing {
  margin: var(--space-6) 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 20px;
}

.pricing-note {
  margin: var(--space-8) 0 0;
  color: var(--ink-quiet);
  font-size: 12px;
  line-height: 18px;
}

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

.faq-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
  gap: 70px;
  padding-block: 96px 120px;
}

.faq-section > h2 {
  max-width: 16ch;
}

.faq-list {
  border-top: 1px solid var(--hairline-quiet);
}

.faq-list details {
  border-bottom: 1px solid var(--hairline-quiet);
}

.faq-list summary {
  position: relative;
  padding: 24px 48px 24px 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list p {
  max-width: 58ch;
  margin: -4px 0 var(--space-6);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 24px;
}

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

.site-footer {
  padding: 0 0 24px;
  background: var(--night-base);
}

.footer-close {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-16);
  min-height: 420px;
  overflow: hidden;
  padding: var(--space-16);
  border-radius: var(--radius);
  isolation: isolate;
}

.footer-close > * {
  position: relative;
  z-index: 1;
}

.footer-close-copy {
  max-width: 62ch;
}

.footer-close h2 {
  max-width: 20ch;
  margin-bottom: var(--space-6);
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.02;
}

.footer-close p {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 26px;
}

.footer-close .availability {
  flex: none;
  align-self: end;
  text-align: right;
}

.footer-meta {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-8);
  padding: 28px 0 4px;
}

.footer-meta nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--ink-soft);
  font-size: 13px;
}

/* 44px minimum hit area, same rule the app holds itself to. Small type is
   fine; a small target is not. */
.footer-meta nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-meta .copyright {
  margin: 0;
  color: var(--ink-quiet);
  font-size: 13px;
}

/* ==========================================================================
   Responsive — 980 / 680, matching the app's own two breaks in spirit
   ========================================================================== */

@media (max-width: 980px) {
  :root {
    --shell: min(100% - 48px, 760px);
    --section-space: 104px;
  }

  .desktop-nav {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .hero,
  .hero-inner {
    min-height: auto;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 150px;
    text-align: center;
  }

  .hero-copy {
    display: grid;
    justify-items: center;
  }

  h1 {
    max-width: 24ch;
  }

  .lede {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stage {
    width: min(620px, 100%);
    min-height: 700px;
    margin-inline: auto;
    padding: 36px 24px 48px;
  }

  .section-intro,
  .faq-section {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .story-layout {
    grid-template-columns: 1fr;
  }

  /* Rivet runs three step cards across at this width. Its step bodies are one
     short sentence; Gradia's list movement names, and three across collapsed
     them to 20 characters a line. The single-column ladder that the desktop
     layout already uses carries through instead. */
  .story-stage {
    min-height: 560px;
  }

  /* One column for every surface card, so all three devices render at the
     same scale. Two-across at this width gave the wide card a 324px phone
     beside 218px ones in the same block. */
  .view-grid {
    grid-template-columns: 1fr;
  }

  .view-card,
  .view-card-wide {
    grid-column: auto;
    grid-template-rows: auto 500px;
    grid-template-columns: 1fr;
  }

  /* Once all three cards are the same width, the lead card's larger device
     reads as an error rather than hierarchy. Same stage, same scale. */
  .view-card-wide .view-stage {
    min-height: 500px;
  }

  .view-card-wide .view-stage .phone {
    width: min(272px, 100%);
  }

  .view-card-wide .view-card-copy {
    padding: 36px 40px;
  }

  .connections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .connection:nth-child(3n) {
    border-right: 1px solid var(--hairline-day);
  }

  .connection:nth-child(2n) {
    border-right: 0;
  }

  .connection:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--hairline-day);
  }

  .connection:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .pro-card {
    gap: 40px;
    padding: 42px;
  }

  .footer-close {
    gap: 40px;
    padding: 52px;
  }

  .footer-meta {
    grid-template-columns: 1fr auto;
  }

  .footer-meta .copyright {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .pro-card,
  .footer-close {
    grid-template-columns: 1fr;
  }

  .footer-close {
    align-items: start;
    min-height: 460px;
  }

  .footer-close .availability {
    align-self: auto;
    text-align: left;
  }
}

@media (max-width: 680px) {
  :root {
    --shell: calc(100% - 32px);
    --radius: 20px;
    --section-space: 88px;
  }

  .site-header {
    min-height: 76px;
  }

  .hero-inner {
    padding-top: 122px;
  }

  h1 {
    margin-bottom: 20px;
    font-size: clamp(38px, 11vw, 48px);
    line-height: 1.06;
  }

  .lede {
    margin-bottom: 26px;
    font-size: 17px;
    line-height: 26px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px;
  }

  .hero-stage {
    min-height: 560px;
    padding: 24px 16px 40px;
  }

  .section-intro {
    margin-bottom: 42px;
  }

  .story-steps,
  .view-grid {
    grid-template-columns: 1fr;
  }

  .story-steps li {
    grid-template-columns: 38px 1fr;
    min-height: 0;
    padding: 24px;
  }

  .story-stage {
    min-height: 480px;
    padding: 40px;
  }

  .story-stage .phone {
    width: min(272px, 100%);
  }

  .view-card,
  .view-card-wide {
    grid-column: auto;
    grid-template-rows: auto 420px;
    grid-template-columns: 1fr;
  }

  .view-card-copy,
  .view-card-wide .view-card-copy {
    padding: 28px;
  }

  .view-card h3,
  .view-card-wide h3 {
    font-size: 24px;
  }

  .view-stage,
  .view-card-wide .view-stage {
    min-height: 420px;
    padding: 40px 40px 0;
  }

  .view-stage .phone,
  .view-card-wide .view-stage .phone {
    width: min(248px, 100%);
  }

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

  .connection,
  .connection:nth-child(2n),
  .connection:nth-child(3n) {
    min-height: 84px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline-day);
  }

  .connection:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--hairline-day);
  }

  .connection:last-child {
    border-bottom: 0;
  }

  .privacy-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px;
  }

  .privacy-panel a {
    justify-self: start;
  }

  .pricing-section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .pro-card {
    gap: 36px;
    padding: 28px 24px 24px;
  }

  .pro-copy {
    gap: var(--space-8);
  }

  .pro-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
  }

  .pro-identity h3 {
    font-size: 30px;
  }

  .pro-purchase {
    padding: 28px 24px;
  }

  .pricing-note {
    margin-top: 30px;
    padding-top: 0;
  }

  .faq-section {
    padding-block: 80px 88px;
  }

  .faq-list summary {
    padding-right: 42px;
  }

  .footer-close {
    min-height: 380px;
    gap: 36px;
    padding: 40px 24px;
  }

  .footer-close h2 {
    margin-bottom: 20px;
    font-size: clamp(34px, 10vw, 42px);
  }

  .footer-close p {
    font-size: 16px;
  }

  .footer-meta {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 0 0;
  }

  .footer-meta nav {
    flex-wrap: wrap;
    gap: 12px 22px;
  }

  .footer-meta .copyright {
    grid-column: auto;
    padding-top: 16px;
    border-top: 1px solid var(--hairline-quiet);
  }
}

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