/* ==========================================================================
   Manuscript — product page
   Foundations, design tokens, and component styles
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Surfaces */
  --color-canvas: #0f0f10;
  --color-surface: #1B1B1B;
  --color-surface-raised: #2a2a2c;
  --color-hairline: rgba(255, 255, 255, 0.08);
  --color-hairline-strong: rgba(255, 255, 255, 0.16);
  --color-edge: #CDCDCD;

  /* Text */
  --color-text: #f5f3f4;
  --color-text-secondary: #c7c3c6;
  --color-text-tertiary: #9c9799;

  /* Accent */
  --color-accent: #FF375F;
  --color-accent-hover: #E61F48;
  --color-accent-soft: #ffb3c2; /* systemPink tinted 62% to white */
  --color-accent-deep: #d11840; /* pressed state on solid fills */
  /* The accent that is safe as text: 7.29:1 on the canvas, where plain
     --color-accent only reaches 5.44:1. Used for subheadings and highlights. */
  --color-accent-text: #ff718b;

  /* Document formats */
  /* Derived from Apple's dark-mode system colours so they sit beside
     systemPink, deepened until white labels clear WCAG AA:
     systemGreen #30d158, PowerPoint orange, systemBlue #0a84ff. */
  --color-xls: #1f8638;
  --color-pptx: #d63a31;
  --color-docx: #0974e0;

  /* Card and sheet fills for each format. Unified Oklab lightness (0.42) at
     max chroma per hue, so the set reads as one family; the previous
     hand-picked fills ranged 8.14:1-9.58:1 against white, which is what made
     them look muddy. White labels clear AA on all three. */
  --color-xls-surface: #005e1e; /* white 8.47:1 */
  --color-pptx-surface: #950004; /* white 8.26:1 */
  --color-docx-surface: #004b98; /* white 8.23:1 */

  /* Typography
     SF Pro is never self-hosted: Apple's font license forbids serving it as a
     webfont, but explicitly sanctions reaching the system font through the
     `-apple-system` keyword, which renders genuine San Francisco on Apple
     devices. Geist (SIL Open Font License 1.1) is the served fallback for
     every other platform. */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Geist",
    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Geist", "Segoe UI",
    Helvetica, Arial, sans-serif;

  /* Type scale. Apple sets body copy at 17pt; display sizes scale from it. */
  --text-xs: 0.875rem; /* 14 */
  --text-sm: 0.9375rem; /* 15 */
  --text-base: 1.0625rem; /* 17 */
  --text-lead: clamp(1.625rem, 1.45vw, 1.825rem); /* 17 -> 21 */
  --text-h3: clamp(1.0625rem, 1.5vw, 1.375rem); /* 17 -> 22 */
  --text-h2-sm: clamp(1.875rem, 3.2vw, 3rem); /* 30 -> 48 */
  --text-h2: clamp(2.25rem, 3.84vw, 3.6rem); /* 36 -> 57.6, a constant 1.2 step above --text-h2-sm */
  /* Floor lowered to 48px: at weight 800 with normal tracking the title
     is wide enough that 56px clipped at 320px on the Geist fallback,
     whose metrics run wider than SF Pro's. */
  --text-h1: clamp(3rem, 8vw, 7rem); /* 48 -> 112 */

  /* Layout — one shared content column keeps every edge aligned */
  /* Spacing follows Apple's 8-point grid, with 4pt sub-steps. */
  --space-1: 0.25rem; /* 4pt */
  --space-2: 0.5rem; /* 8pt */
  --space-3: 0.75rem; /* 12pt */
  --space-4: 1rem; /* 16pt */
  --space-5: 1.25rem; /* 20pt */
  --space-6: 1.5rem; /* 24pt */
  --space-8: 2rem; /* 32pt */
  --space-10: 2.5rem; /* 40pt */
  --space-12: 3rem; /* 48pt */
  --space-14: 3.5rem; /* 56pt */
  --space-16: 4rem; /* 64pt */
  --space-20: 5rem; /* 80pt */
  --space-24: 6rem; /* 96pt */
  --space-32: 8rem; /* 128pt */

  /* Inset blocks span 80% of the viewport. */
  --container-width: 95%;
  --container-max: 105rem;
  --block-gap: var(--space-6);
  --gutter: var(--space-5); /* 20pt, Apple's standard side margin */

  /* One rhythm shared by every section boundary. */
  --section-space: var(--space-16);

  /* Company bar on the product page. Matches the 44px Apple global nav;
     the product bar below it stays at 3.25rem, like Apple's local nav. */
  --globalnav-height: 2.75rem;

  /* Radii */
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  /* Apple sizes large marketing cards at 28px and nested cards at 18px;
     concentricity keeps inner corners smaller than their container. */
  --radius-card: 1.125rem; /* 18px */
  --radius-section: 1.2rem; /* 28px */
  --radius-pill: 980px;
  --radius-pill-small: 7px;

  /* Elevation */
  --shadow-card: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3),
    0 1.25rem 3rem rgba(0, 0, 0, 0.26);
  --shadow-float: 0 1.75rem 4.5rem rgba(0, 0, 0, 0.42);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 180ms;
  --dur: 300ms;
}

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

html {
  min-width: 20rem;
  background: var(--color-canvas);
  font-synthesis: none;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

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

img {
  height: auto; /* keeps intrinsic aspect ratio with width/height attributes */
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button {
  border: 0;
  background: none;
}

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

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.021em; /* tight tracking reads as display type */
  line-height: 1.08;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-canvas);
}

:focus-visible {
  border-radius: var(--radius-xs);
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.site-container,
.content-container {
  width: min(var(--container-width), var(--container-max));
  margin-inline: auto;
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

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

/* Surface sections are inset rounded blocks sitting on the page colour,
   separated by --block-gap. */
.section--surface {
  width: min(var(--container-width), var(--container-max));
  padding-inline: var(--space-12);
  border-radius: var(--radius-section);
  margin-inline: auto;
  background: var(--color-surface);
}

/* Inside a block the container already provides width and padding. */
.section--surface .content-container {
  width: 100%;
  max-width: none;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1.125rem;
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-canvas);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  translate: 0 -180%;
  transition: translate var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  translate: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.noscript-message {
  position: fixed;
  z-index: 90;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font-size: 0.875rem;
  text-align: center;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  gap: 0.625rem;
  padding-inline: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.button--accent {
  background: var(--color-accent-hover);
  color: #fff;
}

.button--accent:hover {
  background: var(--color-accent-deep);
}

.button--outline {
  border-color: rgba(255, 55, 95, 0.9);
  background: transparent;
}

.button--outline:hover {
  border-color: var(--color-accent-soft);
  background: rgba(255, 55, 95, 0.14);
}

.button--compact {
  min-height: 2.5rem;
  padding-inline: 0.5rem 1rem;
  font-size: var(--text-sm);
}

.button--large {
  min-width: 11.5rem;
  min-height: 3.25rem;
  padding-inline: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

.button--outline.button--large {
  padding-inline: 1.5rem;
}

.button__icon {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--color-accent);
}

.button--large .button__icon {
  width: 1.875rem;
  height: 1.875rem;
}

.button__icon svg {
  width: 0.9375rem;
  height: 0.9375rem;
  stroke-width: 2.75;
}

.button--large .button__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.button--outline svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* On the product page only the company bar is visible at the top. Once the
   page scrolls, that bar leaves and the Manuscript bar fades into its place.
   `.is-nav-swapped` covers the moment before the deferred script runs, so a
   refreshed mid-page view does not flash the company bar. Other pages keep
   a single fixed product bar. */
.is-nav-swapped .globalnav {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.is-nav-swapped .page-product .site-header {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.globalnav {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  left: 0;
  height: var(--globalnav-height);
  color: var(--color-text);
}

.globalnav__inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.globalnav__brand {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  place-items: center start;
  color: inherit;
}

.globalnav__mark {
  width: 1rem;
  height: 1rem;
}

.globalnav.has-menu-open {
  background: var(--color-surface);
}

.page-product .globalnav,
.page-product .site-header {
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out),
    visibility 0s linear var(--dur),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    backdrop-filter var(--dur) var(--ease-out),
    -webkit-backdrop-filter var(--dur) var(--ease-out);
}

/* Hidden until the page has scrolled. It occupies the same slot as the
   company bar, so the two never stack. */
.page-product .site-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-product .site-header.is-revealed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.page-product .globalnav.is-hidden {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-product .globalnav:not(.is-hidden) {
  transition-delay: 0s;
}

/* A product nav in Apple's manner: always in place, clear while it sits over
   the hero so it reads as part of it, and frosted as soon as content starts
   to pass beneath. JS toggles `.is-scrolled`. */
.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    backdrop-filter var(--dur) var(--ease-out),
    -webkit-backdrop-filter var(--dur) var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-hairline);
  background: rgba(22, 22, 23, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.site-header__inner {
  display: flex;
  height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-header__brand {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  flex: none;
  gap: 0.625rem;
  color: var(--color-text);
  text-decoration: none;
}

.site-header__logo {
  width: auto;
  height: 1.625rem;
}

.site-header__wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* The menu button is phone-only; wider screens show the links inline. */
.site-nav__toggle {
  display: none;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav__links a {
  position: relative;
  color: rgba(245, 243, 244, 0.72);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-nav__links a:hover,
.site-nav__links a[aria-current] {
  color: var(--color-text);
}

/* The section in view gets a short accent rule beneath its link. */
.site-nav__links a::after {
  position: absolute;
  right: 0;
  bottom: -0.4375rem;
  left: 0;
  height: 1px;
  background: var(--color-accent-text);
  content: "";
  opacity: 0;
  scale: 0.4 1;
  transition:
    opacity var(--dur) var(--ease-out),
    scale var(--dur) var(--ease-out);
}

.site-nav__links a[aria-current]::after {
  opacity: 1;
  scale: 1 1;
}

.site-header__cta {
  position: relative;
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  flex: none;
  padding-inline: 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-hover);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.site-header__cta:hover {
  background: var(--color-accent-deep);
}

/* A 28px pill is below the 44px touch minimum; the hit area grows invisibly. */
.site-header__cta::before {
  position: absolute;
  inset: -0.5rem -0.25rem;
  content: "";
}

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

/* The hero's panel stops at the editor window's midpoint, so the window
   straddles its lower edge: half inside the hero, half on the page below.
   The window is min(95cqi, 52rem) wide at a 1474:760 ratio, so half its
   height is that width x 0.2578. */
.hero {
  --hero-pad-end: var(--space-12);
  --shot-half: calc(min(95cqi, 52rem) * 0.2578);
  position: relative;
  min-height: 34rem;
  container-type: inline-size;
  isolation: isolate;
}

/* Clips the aura and the arc, so both end at the panel's lower edge. */
.hero__backdrop {
  position: absolute;
  z-index: 1;
  inset: 0 0 calc(var(--hero-pad-end) + var(--shot-half));
  overflow: hidden;
  background: var(--color-canvas);
  pointer-events: none;
}

/* The pointer aura is parked. The hero keeps only the light on the arc. */
.hero__aura {
  display: none;
}

.hero__content {
  /* The reveal sets `translate: 0 0` on this element, and a non-none translate
     creates a stacking context, so z-indexes on the children cannot be
     compared with .hero__backdrop. The aura's layer is therefore decided
     here: content above, aura below. */
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  align-items: center;
  flex-direction: column;
  /* Bottom-aligned, so any spare min-height goes above the title and the
     window always ends --hero-pad-end from the bottom, where the panel's
     edge is measured from. */
  justify-content: flex-end;
  padding-block: var(--space-20) var(--hero-pad-end);
}

.hero__stage {
  position: relative;
  z-index: 2;
  width: min(100%, 52rem);
  margin-block-start: var(--space-10);
}

.hero__eyebrow {
  position: relative;
  z-index: 3;
  color: var(--color-text-secondary);
  font-size: var(--text-lead);
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* Rim-light horizon behind the editor window: the top of a very large
   circle whose apex sits just under the window's top edge, so the light
   emerges symmetrically from both sides and falls away toward the edges.
   It lives in the backdrop so the panel clips it, and is placed from the
   panel's bottom edge, which is always the window's midpoint, so it still
   tracks the window. --pad leaves room around the ring for its bloom,
   which the mask would otherwise clip flat at the element's edge. */
.hero__orbit {
  --pad: 8rem;
  --diameter: clamp(48rem, 160vw, 240rem);
  position: absolute;
  z-index: 0;
  top: calc(100% - var(--shot-half) + 0.75rem - var(--pad));
  left: 50%;
  width: calc(var(--diameter) + var(--pad) * 2);
  aspect-ratio: 1;
  /* Fades from the apex outward in both directions, so neither end of the
     arc stops abruptly. */
  mask-image: radial-gradient(
    ellipse 46% 22% at 50% var(--pad),
    #000 20%,
    rgba(0, 0, 0, 0.55) 55%,
    transparent 100%
  );
  translate: -50% 0;
  pointer-events: none;
}

.hero__orbit::before {
  position: absolute;
  inset: var(--pad);
  border-radius: 50%;
  content: "";
}

/* The light stays on the line. The wide halos that washed the hero are gone. */
.hero__orbit::before {
  border: 1px solid rgba(255, 222, 230, 0.85);
  box-shadow:
    0 0 0.375rem rgba(255, 150, 175, 0.7),
    0 0 1.25rem rgba(255, 55, 95, 0.4);
}

.file-icon {
  --file-color: var(--color-text-tertiary);
  position: relative;
  display: grid;
  width: clamp(2.75rem, 3.6vw, 3.5rem);
  aspect-ratio: 0.8;
  place-items: end center;
  padding-block-end: 0.5rem;
  border-radius: 0.3125rem;
  background: var(--file-color);
  color: #fff;
  filter: drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.35));
  font-size: clamp(0.6875rem, 0.9vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.file-icon::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 0 0.3125rem 0 0;
  background: linear-gradient(
    225deg,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 50%
  );
  content: "";
}

.file-icon--xls {
  --file-color: var(--color-xls);
}

.file-icon--pptx {
  --file-color: var(--color-pptx);
}

.file-icon--docx {
  --file-color: var(--color-docx);
}

.hero h1 {
  position: relative;
  z-index: 3;
  background: linear-gradient(100deg, #fffafb 4%, #ffb3c2 46%, #ff375f 96%);
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 800;
  letter-spacing: initial;
  line-height: 1;
}/* --------------------------------------------------------------------------
   Writing heritage
   -------------------------------------------------------------------------- */

.heritage {
  /* Full-bleed; sits on the page's root rather than inside a rounded surface
     block, so the eye reads it as a chapter opener rather than a card. */
  position: relative;
  overflow: hidden;
  padding-block: var(--section-space);
}

/* The hero already ends in its own padding below the window, and neither
   block is an inset card, so main's block gap and a full section space on
   top of that leave the page feeling stalled. */
.hero + .heritage {
  margin-block-start: calc(var(--block-gap) * -1);
  padding-block-start: var(--space-16);
}

/* Stacked below 64rem: photograph, then heading, then the story. Wider, the
   photograph takes the larger left column and the text sits beside it. */
.heritage__flow {
  --heritage-pad: var(--space-16);
  display: grid;
  width: min(100%, 100rem);
  max-width: var(--container-max);
  padding-inline: var(--heritage-pad);
  gap: var(--space-10);
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .heritage__flow {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    column-gap: var(--space-8);
    align-items: center;
  }
}

/* No frame: the photograph is already low-key, so it fades into the page
   instead of sitting in a card. Stacked, it runs edge to edge and only the
   top and bottom dissolve; side by side, every edge does. */
.heritage__media {
  position: relative;
  margin: 0 calc(var(--heritage-pad) * -1);
}

@media (min-width: 64rem) {
  /* Run the photograph out to the section's left edge; the mask dissolves
     it there, so it never shows a hard boundary. */
  .heritage__media {
    margin-inline: calc(var(--heritage-pad) * -1) 0;
  }
}

.heritage__image {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(1.12) contrast(1.05);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 62%, transparent 100%);
  /* Settles from a slight push-in as the section scrolls into place. */
  scale: calc(1.08 - var(--heritage-progress, 1) * 0.08);
  transform-origin: 40% 60%;
}

@media (min-width: 64rem) {
  /* Side by side, the photograph dissolves on every edge. The credit sits
     outside the mask, so the name stays readable under the fade. */
  .heritage__image {
    mask-image:
      linear-gradient(to right, transparent 0%, #000 10%, #000 74%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 8%, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
}

.heritage__credit {
  margin: var(--space-4) 0 0;
  padding-inline: var(--heritage-pad);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.heritage__text {
  display: grid;
  gap: var(--space-10);
}

.heritage__intro {
  display: grid;
  gap: var(--space-4);
}

.heritage__eyebrow {
  color: var(--color-accent-text);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.heritage h2 {
  max-width: 16ch;
  margin: 0;
  font-size: var(--text-h2);
  text-align: left;
}

/* Stacked under the photograph, the heading uses the column. The 16ch
   measure is only for the desktop layout, where it sits beside the image. */
@media (max-width: 63.99rem) {
  .heritage h2 {
    max-width: none;
  }
}

/* Told as four beats rather than a paragraph. Each line lights as it
   reaches the reading line; JS adds `.is-scrubbing`, so without it every
   line simply stays lit. */
.heritage__story {
  display: grid;
  max-width: 24ch;
  gap: var(--space-4);
  font-size: clamp(1.375rem, 2.1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.22;
}

.heritage__story p {
  margin: 0;
  color: var(--color-text);
  text-wrap: balance;
  transition: color 600ms var(--ease-out);
}

.heritage__story.is-scrubbing p:not(.is-lit) {
  color: rgba(245, 243, 244, 0.2);
}

/* The payoff lands in the accent once it is lit. */
.heritage__story .heritage__payoff {
  margin-block-start: var(--space-4);
}

.heritage__story .heritage__payoff.is-lit,
.heritage__story:not(.is-scrubbing) .heritage__payoff {
  background: linear-gradient(100deg, #ffc2cf 0%, #ff718b 50%, #ff375f 100%);
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Compatibility and context
   -------------------------------------------------------------------------- */

.compatibility {
  padding-block: 0;
}

.feature-panels {
  display: grid;
  gap: var(--block-gap);
}

.feature-panel {
  padding: var(--section-space) var(--space-12);
  border-radius: var(--radius-section);
  background: var(--color-surface);
}

.feature-panel__header {
  display: grid;
  max-width: 44rem;
  gap: 0.75rem;
  margin-inline: auto;
  text-align: center;
}

.feature-panel__header h2 {
  font-size: var(--text-h2-sm);
}

.feature-panel__header p {
  color: var(--color-text-secondary);
  font-size: var(--text-lead);
  font-weight: 400;
  letter-spacing: -0.011em;
  line-height: 1.45;
}

/* Format fidelity.
   One window, one document, two platforms. The switch swaps only the window
   chrome; the title bar keeps a fixed height on both, so the page beneath
   never shifts. That stillness is the claim the headline makes. */
.fidelity {
  --fidelity-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fidelity-dur: 450ms;
  overflow: hidden;
  padding: var(--section-space) var(--space-12);
  border-radius: var(--radius-section);
  background: var(--color-surface);
}

.fidelity__intro {
  display: grid;
  max-width: 46rem;
  gap: var(--space-4);
  margin-inline: auto;
  text-align: center;
}

.fidelity__eyebrow {
  color: var(--color-accent-text);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fidelity__intro h2 {
  font-size: var(--text-h2);
}

.fidelity__lead {
  max-width: 38rem;
  margin-inline: auto;
  color: var(--color-text-secondary);
  /* Below the site's --text-lead: under a headline this short, the shared
     size crowded it on phones. */
  font-size: clamp(1.1875rem, 1.5vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.011em;
  line-height: 1.4;
  text-wrap: pretty;
}

.fidelity__demo {
  display: grid;
  max-width: 60rem;
  justify-items: center;
  gap: var(--space-8);
  margin: var(--space-16) auto 0;
}

/* Segmented control */
.fidelity__switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--color-hairline);
}

.fidelity__switch button {
  position: relative;
  z-index: 1;
  min-width: 7.5rem;
  min-height: 2.25rem;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color var(--fidelity-dur) var(--fidelity-ease);
}

.fidelity__switch button:hover,
.fidelity__switch button[aria-pressed="true"] {
  color: var(--color-text);
}

.fidelity__thumb {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: calc(50% - 0.25rem);
  border-radius: var(--radius-pill);
  background: #3a3a3c;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  transition: translate var(--fidelity-dur) var(--fidelity-ease);
}

[data-platform="pc"] .fidelity__thumb {
  translate: 100% 0;
}

/* The window. Everything inside is sized in container units through --u,
   so the document scales as one picture instead of reflowing. */
.fidelity__window {
  --u: 1cqi;
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 0.75rem;
  background: #1c1c1e;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    var(--shadow-float);
  container-type: inline-size;
  transition: border-radius var(--fidelity-dur) var(--fidelity-ease);
}

[data-platform="pc"] .fidelity__window {
  border-radius: 0.5rem;
}

.fidelity__titlebar {
  position: relative;
  height: 2.75rem;
  border-block-end: 1px solid rgba(255, 255, 255, 0.06);
  background: #2a2a2d;
  transition: background-color var(--fidelity-dur) var(--fidelity-ease);
}

[data-platform="pc"] .fidelity__titlebar {
  background: #202020;
}

.fidelity__bar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  transition:
    opacity var(--fidelity-dur) var(--fidelity-ease),
    translate var(--fidelity-dur) var(--fidelity-ease);
}

.fidelity__bar--pc,
[data-platform="pc"] .fidelity__bar--mac {
  opacity: 0;
  translate: 0 -0.25rem;
  pointer-events: none;
}

[data-platform="pc"] .fidelity__bar--pc {
  opacity: 1;
  translate: 0 0;
}

.fidelity__lights {
  display: flex;
  flex: none;
  gap: 0.5rem;
}

.fidelity__lights i {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

.fidelity__lights i:nth-child(1) {
  background: #ff5f57;
}

.fidelity__lights i:nth-child(2) {
  background: #febc2e;
}

.fidelity__lights i:nth-child(3) {
  background: #28c840;
}

.fidelity__filename {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* macOS centres the title in the bar; Windows sets it beside the app mark. */
.fidelity__bar--mac .fidelity__filename {
  position: absolute;
  left: 50%;
  max-width: 55%;
  translate: -50% 0;
}

.fidelity__bar--pc .fidelity__filename {
  font-family: "Segoe UI Variable", "Segoe UI", var(--font-body);
  font-weight: 400;
}

.fidelity__app-mark {
  display: grid;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  place-items: center;
  border-radius: 0.1875rem;
  background: var(--color-docx);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}

.fidelity__controls {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-6);
  margin-inline-start: auto;
  color: var(--color-text-secondary);
}

.fidelity__controls svg {
  width: 0.875rem;
  height: 0.875rem;
}

.fidelity__canvas {
  display: flex;
  height: calc(var(--u) * 60);
  justify-content: center;
  padding-block-start: calc(var(--u) * 4.5);
}

/* The document itself. Fixed colours: a page is paper on either platform. */
.fidelity__page {
  width: calc(var(--u) * 58);
  height: max-content;
  padding: calc(var(--u) * 4.5) calc(var(--u) * 5.5);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, 0.35);
  color: #1d1d1f;
  font-family: var(--font-body);
}

.fidelity__running {
  display: flex;
  justify-content: space-between;
  padding-block-end: calc(var(--u) * 1.2);
  border-block-end: 1px solid #e5e5ea;
  margin-block-end: calc(var(--u) * 3.2);
  color: #86868b;
  font-size: calc(var(--u) * 1.05);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fidelity__heading {
  margin: 0 0 calc(var(--u) * 1.6);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 3.6);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.fidelity__body {
  margin: 0 0 calc(var(--u) * 2.6);
  color: #424245;
  font-size: calc(var(--u) * 1.35);
  line-height: 1.55;
}

/* A dusk range, matching the editor window in the hero. */
.fidelity__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 6;
  border-radius: calc(var(--u) * 0.8);
  background:
    radial-gradient(circle at 70% 38%, #fff3e6 0 4%, transparent 4.5%),
    linear-gradient(180deg, #ffb59a 0%, #ff8fa8 48%, #e45a7c 100%);
}

.fidelity__media::before,
.fidelity__media::after {
  position: absolute;
  inset: 0;
  content: "";
}

.fidelity__media::before {
  background: #8f3156;
  clip-path: polygon(0 78%, 18% 52%, 30% 64%, 48% 30%, 62% 56%, 74% 42%, 100% 70%, 100% 100%, 0 100%);
  opacity: 0.75;
}

.fidelity__media::after {
  background: #4e1a33;
  clip-path: polygon(0 88%, 22% 72%, 40% 84%, 58% 66%, 80% 82%, 100% 74%, 100% 100%, 0 100%);
}

.fidelity__table {
  width: 100%;
  margin-block-start: calc(var(--u) * 2.6);
  border-collapse: collapse;
  font-size: calc(var(--u) * 1.2);
  font-variant-numeric: tabular-nums;
}

.fidelity__table th,
.fidelity__table td {
  padding: calc(var(--u) * 0.8) 0;
  border-block-end: 1px solid #ededf0;
  text-align: left;
}

.fidelity__table th {
  border-block-end-color: #d2d2d7;
  color: #86868b;
  font-weight: 600;
}

.fidelity__table :is(th, td):not(:first-child) {
  text-align: right;
}

/* Narrow windows would shrink the page past legibility, so the page takes
   more of the width and the unit grows to match. */
@container (max-width: 36rem) {
  .fidelity__canvas {
    --u: 1.5cqi;
  }

  .fidelity__page {
    width: 86cqi;
  }
}

.fidelity__caption {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  text-align: center;
  text-wrap: balance;
}

/* Supporting formats, set as a quiet three-up row under a hairline. */
.fidelity__formats {
  display: grid;
  max-width: 60rem;
  gap: var(--space-10);
  margin: var(--space-20) auto 0;
  padding: var(--space-12) 0 0;
  border-block-start: 1px solid var(--color-hairline);
  list-style: none;
}

@media (min-width: 48rem) {
  .fidelity__formats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10);
  }
}

.fidelity__format {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-2);
}

.fidelity__format .file-icon {
  width: 2.5rem;
  margin-block-end: var(--space-3);
  padding-block-end: 0.375rem;
  font-size: 0.5625rem;
}

.fidelity__format h3 {
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.fidelity__format p {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  letter-spacing: -0.011em;
  line-height: 1.5;
}

/* Layered document stack.
   The three format sheets reuse the template card's shape (0.926 w/h and the
   same hairline edge) and all share one size, so they read as one family
   fanning up out of the product card. Each is backed by a border-only
   outline at a wider angle. */
.context-stack {
  --card-w: clamp(5rem, 23vw, 13rem);
  --card-h: calc(var(--card-w) * 1.302);
  --sheet-w: calc(var(--card-w) * 0.95);
  --sheet-h: calc(var(--sheet-w) / 0.926);
  --fan-out: calc(var(--card-w) * 0.725);
  --floor: calc(var(--card-w) * 0.038);
  position: relative;
  width: 100%;
  max-width: 45rem;
  height: calc(var(--card-w) * 1.787);
  margin-block-start: var(--space-16);
  margin-inline: auto;
}

/* Size the illustration from its own column so the fan always fits. */
@supports (container-type: inline-size) {
  .context-stack {
    --card-w: 35.5cqw;
    container-type: inline-size;
    height: auto;
    aspect-ratio: 1.574;
  }
}

/* One shared card shape, taken from the template sheets. */
.context-sheet {
  position: absolute;
  left: 50%;
  width: var(--sheet-w);
  height: var(--sheet-h);
  border: 0.8px solid white;

  border-radius: var(--radius-card);
}

/* Back versions: transparent, outline only. */
.context-sheet--ghost {
  /* Behind every solid sheet. Previously 5, tying with the product card and
     leaving the stacking order dependent on DOM position alone. */
  z-index: 1;
  border: 0.5px solid white;
  background: transparent;
}

.context-sheet--ghost-xls {
  bottom: calc(var(--card-w) * 0.16);
  rotate: 4.5deg;
  background-color: rgba(0, 94, 30, 0.22);
  transform-origin: 100% 100%;
  translate: calc(-50% - var(--fan-out)) 0;
}

.context-sheet--ghost-docx {
  bottom: calc(var(--card-w) * 0.761);
  translate: -50% 0;
  z-index: 1;
  background-color: rgba(0, 75, 152, 0.22);
}

.context-sheet--ghost-pptx {
  bottom: calc(var(--card-w) * 0.16);
  rotate: -4.5deg;
  transform-origin: 0 100%;
  background-color: rgba(138, 50, 12, 0.22);
  translate: calc(-50% + var(--fan-out)) 0;
}

/* Front format sheets, angled as in the design. */
.context-sheet--xls,
.context-sheet--docx,
.context-sheet--pptx {
  z-index: 2;
  box-shadow: var(--shadow-card);
}

.context-sheet--xls {
  z-index: 2;
  bottom: calc(var(--card-w) * 0.1);
  background: var(--color-xls-surface);
  rotate: 0deg;
  transform-origin: 100% 100%;
  translate: calc(-50% - var(--fan-out)) 0;
}

.context-sheet--docx {
  z-index: 2;
  bottom: calc(var(--card-w) * 0.695);
  background: var(--color-docx-surface);
  translate: -50% 0;
}

.context-sheet--pptx {
  bottom: calc(var(--card-w) * 0.1);
  background: var(--color-pptx-surface);
  rotate: 0deg;
  transform-origin: 0 100%;
  translate: calc(-50% + var(--fan-out)) 0;
}

/* Product card sits in front, so the sheets emerge from behind it. */
.context-sheet--manuscript {
  z-index: 3;
  bottom: var(--floor);
  display: grid;
  width: var(--card-w);
  height: var(--card-h);
  place-items: center;
  /* Reads as the topmost card, not a void: the fill starts lighter than the
     #1B1B1B panel so the top edge catches light, then falls away so the pink
     M still has a near-black field to sit on. #010000 was darker than the
     panel, which is what made it look like a hole. */
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(168deg, #35353a 0%, #1c1c1f 42%, #0b0b0d 100%);
  box-shadow: var(--shadow-float);
  translate: -50% 0;
}

.context-sheet--manuscript span {
  background: linear-gradient(120deg, #fffafb, #ffa8bc 56%, #ff375f);
  background-clip: text;
  color: transparent;
  /* 1px white outline taken from the rendered silhouette. Stroking the
     glyph contours instead would also trace SF Pro's internal seams,
     which appear as stray lines inside the M and the a. */
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
  font-family: var(--font-display);
  font-size: calc(var(--card-w) * 0.34);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.context-sheet__label {
  position: absolute;
  color: #fff;
  font-size: calc(var(--sheet-w) * 0.115);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.context-sheet--docx .context-sheet__label {
  top: calc(var(--sheet-w) * 0.1);
  right: 0;
  left: 0;
  text-align: center;
}

.context-sheet--xls .context-sheet__label {
  top: 50%;
  left: calc(var(--sheet-w) * 0.1);
  translate: 0 -50%;
  writing-mode: vertical-rl;
}

.context-sheet--pptx .context-sheet__label {
  top: 50%;
  right: calc(var(--sheet-w) * 0.1);
  translate: 0 -50%;
  writing-mode: vertical-rl;
}

.context-sheet__line {
  position: absolute;
  border-radius: var(--radius-pill-small);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid white;
}

.context-sheet--docx .context-sheet__line {
  top: calc(var(--sheet-w) * 0.3);
  left: 50%;
  width: 57%;
  height: calc(var(--sheet-w) * 0.072);
  translate: -50% 0;
}

/* Two vertical bars: the one nearest the product card runs taller. */
.context-sheet--xls .context-sheet__line,
.context-sheet--pptx .context-sheet__line {
  top: 7.4%;
  width: calc(var(--sheet-w) * 0.070);
  height: 80.5%;
}

.context-sheet--xls .context-sheet__line--muted,
.context-sheet--pptx .context-sheet__line--muted {
  top: 20.9%;
  width: calc(var(--sheet-w) * 0.065);
  height: 57.5%;
  background: rgba(255, 255, 255, 0.52);
}

.context-sheet--xls .context-sheet__line {
  left: 59.4%;
}

.context-sheet--xls .context-sheet__line--muted {
  left: 39.6%;
}

.context-sheet--pptx .context-sheet__line {
  right: 59.4%;
}

.context-sheet--pptx .context-sheet__line--muted {
  right: 39.6%;
}

/* --------------------------------------------------------------------------
   Templates
   -------------------------------------------------------------------------- */

.templates {
  background: var(--color-surface);
}

.templates__intro {
  display: grid;
  max-width: 44rem;
  gap: var(--space-3);
  margin-inline: auto;
  text-align: center;
}

.templates__intro h2,
.closing-cta h2 {
  font-size: var(--text-h2);
}

.templates__intro p {
  max-width: 44rem;
  color: var(--color-text-secondary);
  text-align: left;
  font-size: var(--text-lead);
  font-weight: 400;
  letter-spacing: -0.011em;
  line-height: 1.45;
}

.template-stack {
  --sheet-size: clamp(10rem, 27.6vw, 15rem);
  position: relative;
  width: 100%;
  height: calc(var(--sheet-size) * 1.34);
  margin-block: var(--space-12) var(--space-10);
}

.template-sheet {
  position: absolute;
  bottom: calc(var(--sheet-size) * 0.16);
  left: 50%;
  display: flex;
  width: var(--sheet-size);
  height: calc(var(--sheet-size) * 1.08);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  /* Relative to the card, not the positioned ancestor */
  padding-inline: calc(var(--sheet-size) * 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-card);
  translate: -50% 0;
}

.template-sheet--left,
.template-sheet--right {
  background: var(--color-surface);
}

.template-sheet--left {
  rotate: -13deg;
  transform-origin: 50% 100%;
  translate: calc(-50% - var(--sheet-size) * 0.3) 0;
}

.template-sheet--right {
  rotate: 13deg;
  transform-origin: 50% 100%;
  translate: calc(-50% + var(--sheet-size) * 0.3) 0;
}

.template-sheet--front {
  z-index: 3;
  bottom: auto;
  top: 0;
  width: calc(var(--sheet-size) * 1.1);
  height: calc(var(--sheet-size) * 1.243);
  border-color: var(--color-edge);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}

.template-sheet span {
  display: block;
  height: clamp(0.5625rem, 0.95vw, 0.8125rem);
  border-radius: var(--radius-pill);
  background: #8f8f8f;
}

/* Back sheets only hint at content so the composition stays calm */
.template-sheet--left span,
.template-sheet--right span {
  background: rgba(255, 255, 255, 0.42);
}

.template-sheet span:nth-child(1) {
  width: 52%;
  background: #d6d6d6;
}

.template-sheet span:nth-child(2) {
  width: 100%;
}

.template-sheet span:nth-child(3) {
  width: 78%;
  background: #b4b4b4;
}

.template-sheet span:nth-child(4) {
  width: 54%;
  background: #d6d6d6;
}

.template-sheet--left span:nth-child(1),
.template-sheet--right span:nth-child(1),
.template-sheet--left span:nth-child(3),
.template-sheet--right span:nth-child(3) {
  background: rgba(255, 255, 255, 0.3);
}

.templates__button {
  display: flex;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.closing-cta {
  padding-block: var(--section-space);
  background: var(--color-surface);
}

.closing-cta__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-12);
  text-align: center;
}

.closing-cta__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

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

/* The footer sits outside <main>, so it needs the block gap applied
   explicitly; otherwise the last section butts straight into it. */
.site-footer {
  margin-block-start: var(--block-gap);
  background: var(--color-canvas);
}

.site-footer__inner {
  padding-block: var(--space-12) var(--space-10);
  border-top: 1px solid var(--color-hairline);
}

.footer-mark {
  width: auto;
  height: 2.75rem;
  margin-block-end: var(--space-6);
}

/* Footnote, the way Apple opens a product-page footer. */
.footer-note {
  max-width: 48rem;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* Grouped link columns. */
.footer-grid {
  display: grid;
  margin-block-start: var(--space-10);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 16rem));
  justify-content: start;
  gap: var(--space-8) var(--space-6);
}

.footer-col h3 {
  margin-block-end: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.footer-col ul {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 0.125rem;
  list-style: none;
}

.footer-col a,
.footer-col button {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: 0;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: -0.005em;
  text-align: left;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-col a:hover,
.footer-col button:hover {
  color: var(--color-text);
}

/* Bottom bar: copyright, legal, locale. */
.footer-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-5);
  border-top: 1px solid var(--color-hairline);
}

.footer-copyright,
.footer-locale {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.footer-legal button,
.footer-legal a {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-legal button:hover,
.footer-legal a:hover {
  color: var(--color-text);
}

.footer-locale {
  margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal {
  padding-block: calc(3.25rem + var(--space-16)) var(--space-24);
}

.legal__inner {
  width: min(var(--container-width), 40rem);
  margin-inline: auto;
}

.legal h1 {
  margin: 0;
  font-size: var(--text-h2-sm);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.legal__meta {
  margin: var(--space-4) 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.legal h2 {
  margin: var(--space-12) 0 var(--space-4);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.legal p,
.legal li {
  color: var(--color-text-secondary);
}

.legal p {
  margin: 0 0 var(--space-4);
}

.legal ul {
  margin: 0 0 var(--space-4);
  padding-inline-start: 1.15rem;
}

.legal li + li {
  margin-block-start: var(--space-2);
}

.legal a {
  color: var(--color-accent-text);
  text-underline-offset: 0.18em;
}

.legal a:hover {
  color: var(--color-text);
}

.legal a.button,
.legal a.button:hover {
  color: var(--color-text);
}

.spec {
  display: grid;
  margin: 0 0 var(--space-4);
}

.spec div {
  display: grid;
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-hairline);
  gap: var(--space-2) var(--space-6);
  grid-template-columns: minmax(9rem, 14rem) 1fr;
}

.spec dt {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.spec dd {
  margin: 0;
  color: var(--color-text);
}

.contact-list {
  display: grid;
  margin: var(--space-8) 0 0;
  gap: var(--space-8);
}

.contact-list h2 {
  margin: 0 0 var(--space-2);
}

.contact-list a {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--text-lead);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-decoration: none;
}

.contact-list p {
  margin-block-start: var(--space-2);
}

.site-footer__main {
  display: grid;
  align-items: center;
  margin-block-start: var(--space-16);
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-8);
}

.footer-follow p,
.footer-download p {
  margin-block-end: 0.5rem;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0;
}

.footer-socials {
  display: flex;
  gap: 0.25rem;
  margin-inline-start: -0.625rem;
}

.footer-socials a {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.footer-socials a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
}

.footer-socials svg {
  width: 1.3125rem;
  height: 1.3125rem;
  stroke-width: 1.9;
}

.site-footer__brand {
  background: linear-gradient(104deg, #f1eef0, #cbc7ca 62%, #a7a3a6);
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.4vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-decoration: none;
}

.footer-download {
  justify-self: end;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Scroll reveals
   -------------------------------------------------------------------------- */

.hero__shot {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  /* 25px on a 1474px-wide asset: expressed as a ratio so the corner stays
     circular and scales with the image instead of over-clipping when small. */
  border-radius: 1.7% / 3.29%;
  box-shadow: var(--shadow-float);
}

/* Feature list. Deliberately has no --section-surface block: it sits straight
   on the page so it reads as a pause between the two surfaced sections that
   surround it. Six items flow into two columns by three rows. */
.features__title {
  max-width: 44rem;
  margin: 0 auto var(--space-16);
  font-size: var(--text-h2);
  text-align: center;
}

.features__grid {
  display: grid;
  grid-template-columns: minmax(0, 34rem);
  /* The tracks are capped to a readable measure rather than stretched, so
     centring them keeps the block balanced while the copy stays left aligned. */
  justify-content: center;
  gap: var(--space-14) var(--space-16);
}

.feature-item h3 {
  color: var(--color-accent-text);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.feature-item p {
  margin-block-start: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: -0.011em;
  line-height: 1.5;
}

/* The `reveals` class is added by main.js, so if the script never runs the
   content simply stays visible instead of being hidden forever. */
.reveals [data-reveal] {
  opacity: 0;
  translate: 0 1.75rem;
  transition:
    opacity 800ms var(--ease-out),
    translate 800ms var(--ease-out);
  will-change: opacity, translate;
}

.reveals [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

/* Small stagger so copy and its visual do not arrive in lockstep. */
.reveals [data-reveal="1"] {
  transition-delay: 90ms;
}

.reveals [data-reveal="2"] {
  transition-delay: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveals [data-reveal],
  .reveals [data-reveal].is-visible {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bar {
    justify-content: flex-start;
  }

  .footer-locale {
    margin-inline-start: 0;
  }

  .site-footer__main {
    justify-items: center;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    text-align: center;
  }

  .site-footer__brand {
    order: -1;
  }

  .footer-download {
    justify-self: center;
    text-align: center;
  }

  .footer-socials {
    justify-content: center;
    margin-inline-start: 0;
  }
}

/* --------------------------------------------------------------------------
   Desktop: pair each section's copy with its visual, side by side
   -------------------------------------------------------------------------- */

@media (min-width: 80rem) {
  .two-col,
  .feature-panel,
  .templates .content-container {
    display: grid;
    align-items: center;
    column-gap: var(--space-16);
  }

  /* Feature panels: a narrow copy column beside the visual. */
  .feature-panel {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    padding: var(--space-16) var(--space-12);
  }

  .feature-panel__header {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }

  .context-stack {
    max-width: none;
    margin: 0;
  }

  /* Templates: copy and action left, fanned sheets right. */
  .templates .content-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }

  .templates__intro {
    max-width: none;
    align-self: end;
    margin-inline: 0;
    grid-column: 1;
    grid-row: 1;
    text-align: left;
  }

  .templates__button {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin: var(--space-10) 0 0;
  }

  .template-stack {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }

  /* Mirrored blocks alternate the flow: visual left, copy right. */
  .feature-panel.block--mirrored {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  }

  .feature-panel.block--mirrored .context-stack {
    grid-column: 1;
    grid-row: 1;
  }

  .feature-panel.block--mirrored .feature-panel__header {
    grid-column: 2;
    grid-row: 1;
  }

  .templates.block--mirrored .content-container {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .templates.block--mirrored .templates__intro {
    grid-column: 2;
    grid-row: 1;
  }

  .templates.block--mirrored .templates__button {
    grid-column: 2;
    grid-row: 2;
  }

  .templates.block--mirrored .template-stack {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  /* Closing call to action: headline left, actions right. */
  .closing-cta__inner {
    align-items: center;
    justify-items: stretch;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-16);
    text-align: left;
  }

  .closing-cta h2 {
    text-align: left;
  }

  .closing-cta__actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

/* Section rhythm steps in 8pt-grid increments: 64 -> 96 -> 128. */
@media (min-width: 48rem) {
  .features__grid {
    grid-template-columns: repeat(2, minmax(0, 34rem));
  }

  :root {
    --section-space: var(--space-24);
    --block-gap: var(--space-10);
  }
}

@media (min-width: 64rem) {
  :root {
    --section-space: var(--space-32);
    --block-gap: var(--space-16);
  }
}

@media (max-width: 47.99rem) {
  /* Narrow screens keep the wordmark and Download in the bar; the links
     move behind the menu button. */
  .site-nav {
    gap: var(--space-3);
  }

  .site-nav__toggle {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    margin-inline-end: -0.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }

  /* Two bars that fold into a cross, rather than swapping icons. */
  .site-nav__toggle-bars {
    position: relative;
    width: 1.125rem;
    height: 0.5rem;
  }

  .site-nav__toggle-bars::before,
  .site-nav__toggle-bars::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    content: "";
    transition:
      top var(--dur) var(--ease-out),
      rotate var(--dur) var(--ease-out);
  }

  .site-nav__toggle-bars::before {
    top: 0;
  }

  .site-nav__toggle-bars::after {
    top: calc(100% - 1.5px);
  }

  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::before,
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::after {
    top: calc(50% - 0.75px);
  }

  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::before {
    rotate: 45deg;
  }

  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::after {
    rotate: -45deg;
  }

  /* `visibility: hidden` keeps the closed links out of the tab order while
     still letting the panel animate. */
  .site-nav__links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    /* The panel spans the viewport, so its side padding is derived from
       the same inset .site-container uses. That lands the links on the
       logo's optical edge instead of the unrelated --gutter value. */
    padding: var(--space-2)
      calc((100% - min(var(--container-width), var(--container-max))) / 2)
      var(--space-6);
    border-bottom: 1px solid var(--color-hairline);
    /* Opaque, not a glass material: the hero's saturated cards showed
       through a translucent panel and collided with the link text. */
    background: var(--color-surface);
    opacity: 0;
    translate: 0 -0.5rem;
    visibility: hidden;
    transition:
      opacity var(--dur) var(--ease-out),
      translate var(--dur) var(--ease-out),
      visibility 0s linear var(--dur);
  }

  .site-nav__links.is-open {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    transition-delay: 0s;
  }

  /* The bar joins the panel so the two read as one surface, even at the
     top of the page where the header is otherwise transparent. */
  .site-header.has-menu-open {
    border-bottom-color: transparent;
    background: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-nav__links a {
    display: flex;
    min-height: 3rem;
    align-items: center;
    border-bottom: 1px solid var(--color-hairline);
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 500;
    opacity: 0;
    translate: 0 -0.25rem;
    transition:
      opacity var(--dur) var(--ease-out),
      translate var(--dur) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }

  .site-nav__links a:last-child {
    border-bottom: 0;
  }

  /* The underline is a desktop cue; in the list the current item is
     marked by colour alone. */
  .site-nav__links a::after {
    display: none;
  }

  .site-nav__links a[aria-current] {
    color: var(--color-accent-text);
  }

  .site-nav__links.is-open a {
    opacity: 1;
    translate: 0 0;
  }

  .site-nav__links.is-open a:nth-child(2) {
    transition-delay: 30ms;
  }

  .site-nav__links.is-open a:nth-child(3) {
    transition-delay: 60ms;
  }

  .site-nav__links.is-open a:nth-child(4) {
    transition-delay: 90ms;
  }

  .site-nav__links.is-open a:nth-child(5) {
    transition-delay: 120ms;
  }
}

@media (max-width: 40rem) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .spec div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .section--surface,
  .feature-panel {
    padding-inline: var(--space-4);
  }


  .hero {
    min-height: 33rem;
  }

  .hero__content {
    padding-block-start: 5.5rem;
  }

  .heritage__flow {
    --heritage-pad: var(--gutter);
  }

  .closing-cta__actions {
    align-items: stretch;
    flex-direction: column;
    width: min(100%, 20rem);
  }

  .button--large {
    width: 100%;
  }

  /* Keep the layered compositions inside the viewport on small phones. */
  .feature-panel,
  .fidelity {
    padding: var(--space-12) var(--space-4);
  }

  .fidelity__switch button {
    min-width: 6.5rem;
    padding-inline: var(--space-4);
  }

  .template-stack {
    --sheet-size: clamp(7rem, 38vw, 10rem);
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}