/* penwing.app: cream canvas, one ink colour, inset rounded panels, pastel mesh "windows" around crisp white UI. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/plus-jakarta-sans-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces and text */
  --magnolia: #fcfbf8;
  --linen: #f5f3ee;
  --white: #ffffff;
  --ash: #e4e6e9;
  --midnight: #071a31;
  --navy: #0e396a;
  --steel: #5f6d77;
  --n700: #3d464e;
  --n350: #93a0aa;
  --silver: #d8dce0;
  --n200: #c6ccd2;
  --tab-idle: #dfe3e7;

  /* Transparent tints */
  --ink-5: rgb(7 26 49 / 0.05);
  --ink-10: rgb(7 26 49 / 0.1);
  --ink-20: rgb(7 26 49 / 0.2);
  --mag-5: rgb(252 251 248 / 0.05);
  --mag-10: rgb(252 251 248 / 0.1);
  --mag-40: rgb(252 251 248 / 0.4);
  --mag-70: rgb(252 251 248 / 0.7);

  /* Penwing blue takes the place of the reference brand blue */
  --blue: #0071e3;
  --azure: #2f8cff;
  --ice: #9ad3ff;
  --rain: #eaf4ff;
  --sky: #c9e4ff;

  /* Feature accents: used in media, icon tiles, chips and progress lines only, never for text */
  --pen: #b89ffa;
  --pen-2: #d4c2ff;
  --pen-soft: #eae3fa;
  --screen: #5aa9ff;
  --screen-2: #9ad3ff;
  --screen-soft: #dceeff;
  --touch: #5ddfd7;
  --touch-soft: #baf0ec;
  --private: #dbee9f;
  --private-soft: #f2f8de;
  --orange: #f8961f;
  --error: #b32812;

  /* Type */
  --font-display: "Plus Jakarta Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fs-huge: 72px;
  --fs-h1: 60px;
  --fs-h2: 48px;
  --fs-h3: 36px;
  --fs-h4: 28px;
  --fs-h5: 24px;
  --fs-h6: 20px;
  --fs-lg: 18px;
  --fs-md: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --track: -2px;
  --track-sm: -1px;

  /* Space: 4px grid */
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 32px;
  --gap-2xl: 48px;
  --gap-3xl: 56px;
  --gap-4xl: 64px;
  --gap-8xl: 128px;
  --sec-default: 120px;
  --sec-large: 96px;
  --sec-medium: 64px;
  --sec-small: 48px;
  --inset: 24px;
  --container: 1280px;
  --pad-x: 40px;
  --head-max: 640px;
  --sub-max: 560px;

  /* Radius: plain values; browsers with squircles get double (see below) */
  --r-panel: 32px;
  --r-card: 24px;
  --r-photo: 20px;
  --r-chip: 12px;
  --r-btn: 10px;
  --r-ctl: 8px;
  --r-close: 6px;
  --r-xs: 4px;

  /* Elevation: rare and soft; hierarchy comes from surface colour */
  --shadow-card: 0 20px 48px -12px rgb(11 53 88 / 0.16);
  --shadow-ui-sm: 0 1px 2px rgb(95 109 119 / 0.06), 0 4px 6px rgb(95 109 119 / 0.04);
  --shadow-ui-md: 0 2px 4px rgb(95 109 119 / 0.05), 0 8px 16px rgb(95 109 119 / 0.06);
  --shadow-ui-lg: 0 4px 6px rgb(95 109 119 / 0.04), 0 12px 30px rgb(95 109 119 / 0.08);
  --shadow-ui-xl: 0 4px 5px rgb(95 109 119 / 0.04), 0 8px 15px rgb(95 109 119 / 0.03), 0 30px 50px rgb(95 109 119 / 0.08);
  --shadow-chip: drop-shadow(0 2px 12px rgb(95 108 122 / 0.3));

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-io: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --t-fast: 150ms;
  --t-mid: 300ms;
  --t-slow: 500ms;
  --t-xslow: 600ms;

  --header-h: 68px;
  --bar-h: 40px;
}

@supports (corner-shape: squircle) {
  :root {
    --r-panel: 64px;
    --r-card: 48px;
    --r-photo: 40px;
    --r-chip: 24px;
    --r-btn: 20px;
    --r-ctl: 16px;
    --r-close: 12px;
    --r-xs: 8px;
  }
  *, *::before, *::after { corner-shape: squircle; }
  .round { corner-shape: round; }
}

@media (max-width: 1279px) {
  :root {
    --sec-default: 96px;
    --head-max: 560px;
  }
}
@media (max-width: 1023px) {
  :root {
    --fs-huge: 60px;
    --fs-h1: 48px;
    --fs-h2: 36px;
    --fs-h3: 28px;
    --fs-h4: 24px;
    --fs-h5: 22px;
    --fs-h6: 18px;
    --track: -1px;
    --track-sm: -0.5px;
    --gap-lg: 20px;
    --gap-xl: 24px;
    --gap-2xl: 32px;
    --gap-3xl: 40px;
    --gap-4xl: 48px;
    --gap-8xl: 96px;
    --sec-default: 64px;
    --sec-large: 64px;
    --sec-medium: 48px;
    --sec-small: 32px;
    --bar-h: 36px;
  }
}
@media (max-width: 767px) {
  :root {
    --fs-huge: 40px;
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 22px;
    --fs-h5: 20px;
    --fs-h6: 18px;
    --fs-lg: 16px;
    --fs-md: 14px;
    --fs-sm: 12px;
    --track: 0px;
    --track-sm: 0px;
    --gap-md: 12px;
    --gap-lg: 16px;
    --gap-xl: 20px;
    --gap-2xl: 24px;
    --gap-3xl: 32px;
    --gap-4xl: 40px;
    --gap-8xl: 80px;
    --sec-default: 48px;
    --sec-large: 48px;
    --sec-medium: 32px;
    --sec-small: 24px;
    --pad-x: 24px;
    --header-h: 64px;
  }
}
@media (max-width: 576px) {
  :root {
    --inset: 8px;
    --pad-x: 16px;
  }
}
@media (max-width: 400px) {
  :root {
    --fs-huge: 36px;
    --fs-h1: 32px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 112px;
}
/* site.js adds .is-interactive on the first pointer or key press, so a page opened at #fragment jumps there instead of gliding */
@media (prefers-reduced-motion: no-preference) {
  html.is-interactive { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--magnolia);
  color: var(--midnight);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; }
p, li { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
table { border-collapse: collapse; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 12px 16px; border-radius: var(--r-ctl);
  background: var(--midnight); color: var(--magnolia);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
}
.skip:focus { top: 16px; }
.nowrap { white-space: nowrap; }
.t-h4 .nowrap, .t-h6 .nowrap { font-feature-settings: "calt" 0; }

/* Icons from the sprite: <svg class="i"><use href="#i-name"/></svg> */
.i {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.i-20 { width: 20px; height: 20px; }
.i-24 { width: 24px; height: 24px; }
.i-32 { width: 32px; height: 32px; }

/* ---------- Type ---------- */
.t-huge {
  font-family: var(--font-display); font-size: var(--fs-huge); font-weight: 500;
  line-height: 1.1; letter-spacing: var(--track);
}
.t-h1 {
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500;
  line-height: 1.1; letter-spacing: var(--track);
}
.t-serif-h2 {
  font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 500;
  line-height: 1.1; letter-spacing: var(--track);
}
.t-h3 {
  font-family: var(--font-ui); font-size: var(--fs-h3); font-weight: 500;
  line-height: 1.1; letter-spacing: var(--track-sm);
}
.t-stat {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500;
  line-height: 1.1; letter-spacing: var(--track-sm);
}
.t-h4 {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; line-height: 1.2;
}
.t-quote {
  font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 500; line-height: 1.2;
}
.t-h5 {
  font-family: var(--font-ui); font-size: var(--fs-h5); font-weight: 500; line-height: 1.4;
}
.t-h6 {
  font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 500; line-height: 1.4;
}
.t-lead { font-size: var(--fs-lg); line-height: 1.4; color: var(--steel); }
.t-body { font-size: var(--fs-md); line-height: 1.4; color: var(--steel); }
.t-small { font-size: var(--fs-sm); line-height: 1.4; }
.t-fine { font-size: var(--fs-xs); line-height: 1.4; font-weight: 500; color: var(--steel); }
.eyebrow {
  display: block;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; line-height: 1;
  letter-spacing: 1px; text-transform: uppercase; color: var(--midnight);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.panel {
  position: relative;
  margin-inline: max(var(--inset), (100% - 1920px) / 2);
  border-radius: var(--r-panel);
  background: var(--linen);
  isolation: isolate;
}
.section { padding-block: var(--sec-default); }
.section-large { padding-block: var(--sec-large); }
.section-medium { padding-block: var(--sec-medium); }

/* Section header block: eyebrow, heading, subhead, actions */
.shead {
  display: flex; flex-direction: column; align-items: center;
  max-width: 880px; margin-inline: auto; text-align: center;
}
.shead--left { align-items: flex-start; text-align: left; margin-inline: 0; }
.shead .eyebrow { margin-bottom: var(--gap-md); }
.shead__title { max-width: var(--head-max); }
.shead__sub { max-width: var(--sub-max); margin-top: var(--gap-lg); }
.shead__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-md);
  margin-top: var(--gap-xl);
}
.shead--left .shead__actions { justify-content: flex-start; }
.shead--light, .shead--light .eyebrow, .shead--light .t-lead { color: var(--white); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 16px;
  border: 1.5px solid transparent; border-radius: var(--r-ctl);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-lg {
  min-height: 50px; padding: 12px 20px;
  border-width: 2px; border-radius: var(--r-btn);
  font-size: 16px;
}
.btn-primary { background: var(--midnight); color: var(--magnolia); }
.btn-primary:hover { background: var(--navy); }
.btn-secondary { background: transparent; border-color: var(--midnight); color: var(--midnight); }
.btn-secondary:hover { background: var(--midnight); color: var(--magnolia); }
.btn-text { min-height: 48px; padding: 8px 0; background: none; border: 0; color: var(--midnight); }
.btn-text:hover { color: var(--steel); }
.btn-light { background: var(--magnolia); color: var(--midnight); }
.btn-light:hover { background: var(--white); }

/* Primary with an icon tile at its start (the hero's two download buttons) */
.btn-tile { gap: 12px; padding: 4px 16px 4px 4px; }
.btn-tile__icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 9px;
  border-radius: var(--r-ctl); background: var(--magnolia); color: var(--midnight);
}
.btn-tile__icon .i { width: 20px; height: 20px; }

/* Text link with a rule under it and an arrow */
.link-u {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 9.5px 1.5px 8px;
  border-bottom: 1px solid var(--midnight);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; color: var(--midnight); text-decoration: none;
}
.link-u .i { transition: transform var(--t-fast) var(--ease); }
.link-u:hover .i { transform: translateX(3px); }

/* Tertiary text button with an arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-md); font-weight: 500; color: var(--midnight); text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.link-arrow:hover { color: var(--steel); }

/* 32px icon button */
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--ink-5); border-radius: var(--r-xs);
  background: var(--ink-5); color: var(--midnight); cursor: pointer; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--ink-10); }
.icon-btn .i { transition: transform var(--t-fast) var(--ease); }
.icon-btn:hover .i-ur { transform: translate(2px, -2px); }

/* ---------- Chips and badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-size: 16px; font-weight: 500; line-height: 1; color: var(--midnight);
}
.chip__tile, .tile-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--accent, var(--sky)); color: var(--midnight);
}
.chip__tile .i { width: 14px; height: 14px; stroke-width: 2; }
.chip + .badge { margin-left: 12px; }
.badge {
  display: inline-flex; align-items: center;
  height: 28px; padding: 4px 12px; border-radius: var(--r-xs);
  background: var(--ink-5); color: var(--n700);
  font-family: var(--font-ui); font-size: 14px; font-weight: 500; line-height: 1;
}
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Feature accents: set --accent / --accent-soft on any element */
.acc-pen { --accent: var(--pen); --accent-2: var(--pen-2); --accent-soft: var(--pen-soft); }
.acc-screen { --accent: var(--screen); --accent-2: var(--screen-2); --accent-soft: var(--screen-soft); }
.acc-touch { --accent: var(--touch); --accent-2: var(--touch-soft); --accent-soft: var(--touch-soft); }
.acc-private { --accent: var(--private); --accent-2: var(--private); --accent-soft: var(--private-soft); }
.acc-orange { --accent: var(--orange); --accent-2: #fcc98a; --accent-soft: #fdebd3; }

/* Two-word status chip: display word, then serif word */
.status-chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 12px;
  border-radius: var(--r-chip); background: var(--white);
  filter: var(--shadow-chip);
  font-family: var(--font-display); font-size: 36px; font-weight: 500; line-height: 1; letter-spacing: var(--track-sm);
  white-space: nowrap; color: var(--midnight);
}
.status-chip em { font-family: var(--font-serif); font-style: normal; }
.status-chip .tile-icon { width: 32px; height: 32px; border-radius: 8px; }
.status-chip .tile-icon .i { width: 18px; height: 18px; stroke-width: 2; }
@media (max-width: 767px) {
  .status-chip { height: 40px; font-size: 24px; gap: 8px; padding: 0 10px; }
  .status-chip .tile-icon { width: 24px; height: 24px; border-radius: 6px; }
}

/* Checklist with ticks */
.ticks { display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 32px; color: var(--steel); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: calc((1.4em - 20px) / 2);
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--accent, var(--sky)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23071a31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.ticks--no li::before {
  background: var(--ink-10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%235f6d77' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Cards */
.card {
  position: relative;
  border-radius: var(--r-card); background: var(--white);
}
.card-linen { background: var(--linen); }

/* Bridge motif: a small white neck that joins two shapes. Place it absolutely between them. */
.neck {
  position: absolute; width: 32px; height: 14px; background: inherit;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 50% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 50% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 50% 100% no-repeat,
        radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 50% 100% no-repeat;
}

/* Mesh-gradient media window: a raster gradient on an ash base */
.mesh {
  position: relative; overflow: hidden;
  border-radius: var(--r-panel); background: var(--ash);
  isolation: isolate;
}
.mesh__bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}

/* ---------- Announcement bar ---------- */
.announce {
  position: relative; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--bar-h); padding: 6px 48px;
  background: var(--ice); color: var(--midnight);
  font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center;
}
.announce[hidden] { display: none; }
.announce__inner { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; }
.announce__inner > .i { width: 18px; height: 18px; }
.announce__more {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--mag-40); color: var(--midnight);
  font-size: 12px; font-weight: 500; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.announce__more:hover { background: var(--magnolia); }
.announce__more .i { width: 12px; height: 12px; }
.announce__close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-close); background: transparent; color: var(--midnight);
  opacity: 0.7; cursor: pointer; transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.announce__close:hover { opacity: 1; background: var(--mag-40); }
/* Phones: drop the megaphone so the text fits one line, the pill below */
@media (max-width: 576px) {
  .announce__inner > .i { display: none; }
  .announce { padding: 6px 44px 6px 16px; font-size: 13px; }
}

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 50; height: var(--header-h); }
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--header-h); padding-inline: 48px;
  background: transparent;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--midnight); text-decoration: none;
  font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1;
}
.brand img { width: 32px; height: 32px; }
.nav-list { display: flex; align-items: center; gap: 4px; }
/* Nav sits next to the logo; the actions keep the right edge */
.site-header .nav { margin-left: 24px; margin-right: auto; }
.nav-list a {
  display: inline-flex; align-items: center; height: 36px; padding: 8px;
  border-radius: var(--r-ctl);
  font-size: 14px; font-weight: 500; color: var(--midnight); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.nav-list a:hover { background: var(--linen); }
.site-header.is-floating .nav-list a:hover { background: var(--linen); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .btn { font-weight: 400; }
.menu-toggle {
  display: none; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--ink-5); border-radius: var(--r-ctl); background: var(--ink-5);
  color: var(--midnight); cursor: pointer;
}
.menu-toggle .i { width: 20px; height: 20px; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }

/* Scrolling past this marker turns on the floating bar */
.header-sentinel { position: absolute; top: 480px; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* Floating bar once the page scrolls (wide screens) */
@media (min-width: 1072px) {
  .site-header.is-floating .site-header__bar {
    position: fixed; top: 24px; left: 48px; right: 48px;
    max-width: 1824px; margin-inline: auto;
    height: 72px; padding: 12px 12px 12px 16px;
    border-radius: var(--r-panel); background: var(--white);
    box-shadow: var(--shadow-ui-xl);
    animation: bar-in var(--t-mid) var(--ease-out);
  }
}
@media (min-width: 1072px) and (max-width: 1279px) {
  .site-header.is-floating .site-header__bar { left: 40px; right: 40px; }
}
@keyframes bar-in {
  from { transform: translateY(-24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Narrow screens: links go into a menu sheet; the header sticks to the top */
@media (max-width: 1071px) {
  .site-header { position: sticky; top: 0; background: var(--magnolia); }
  .site-header__bar { padding-inline: 24px; }
  .site-header .nav, .header-actions .btn-text, .header-actions .btn-secondary { display: none; }
  .menu-toggle { display: inline-grid; }
}
@media (max-width: 576px) {
  .site-header__bar { padding-inline: 16px; }
  .header-actions .btn-primary { display: none; }
}

.menu-sheet {
  position: fixed; inset: var(--header-h) 0 0; z-index: 49;
  display: flex; flex-direction: column;
  padding: 8px 24px 24px; overflow-y: auto;
  background: var(--magnolia);
}
.menu-sheet[hidden] { display: none; }
.menu-sheet ul { display: flex; flex-direction: column; }
.menu-sheet li + li { border-top: 1px solid var(--ink-10); }
.menu-sheet li a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 46px; padding: 12px 0;
  font-size: 16px; font-weight: 500; color: var(--midnight); text-decoration: none;
}
.menu-sheet__actions { display: grid; gap: 12px; margin-top: auto; padding-top: 24px; }
.menu-sheet__actions .btn { width: 100%; }
@media (min-width: 1072px) {
  .menu-sheet { display: none !important; }
}
/* Phones: 44px touch targets */
@media (max-width: 767px) {
  .menu-toggle { width: 44px; height: 44px; }
  .announce__close { right: 2px; width: 44px; height: 44px; }
  .announce__more { position: relative; }
  .announce__more::after { content: ""; position: absolute; inset: -12px -8px; }
  .brand { min-height: 44px; }
  .link-arrow { min-height: 44px; }
}

/* ---------- Footer panel ---------- */
.site-footer {
  margin: 0 max(var(--inset), (100% - 1920px) / 2) var(--inset);
  border-radius: var(--r-panel);
  background: var(--midnight); color: var(--magnolia);
}
.site-footer a { text-decoration: none; }
.footer-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-2xl) var(--gap-4xl);
  padding-top: var(--sec-medium);
}
.footer-statement { max-width: 520px; color: var(--magnolia); }
.footer-brand {
  display: inline-flex; align-items: center; gap: 16px; margin-top: var(--gap-2xl);
  font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1;
  color: var(--magnolia);
}
.footer-brand img { width: 56px; height: 56px; }
.footer-cols {
  display: grid; grid-template-columns: repeat(3, 200px); column-gap: 32px; row-gap: 32px;
}
.footer-cols h2 { margin-bottom: 16px; font-family: var(--font-ui); font-size: 18px; font-weight: 500; color: var(--magnolia); }
.footer-cols ul { display: grid; gap: 10px; }
.footer-cols a {
  font-size: 14px; color: var(--mag-70);
  transition: color var(--t-fast) var(--ease);
}
.footer-cols a:hover { color: var(--magnolia); }
.footer-mid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: var(--gap-2xl); padding-top: var(--gap-xl);
  border-top: 1px solid var(--mag-10);
}
.footer-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-tile {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 16px 0 12px;
  border: 1px solid var(--mag-10); border-radius: 12px; background: var(--mag-5);
  color: var(--magnolia); font-size: 14px; font-weight: 500;
  transition: background-color var(--t-fast) var(--ease);
}
.footer-tile:hover { background: var(--mag-10); }
.footer-tile .i { width: 20px; height: 20px; }
.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-block: var(--gap-xl) var(--gap-xl);
  font-size: 12px; font-weight: 500; color: var(--mag-70);
}
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-legal a { color: var(--mag-70); transition: color var(--t-fast) var(--ease); }
.footer-legal a:hover { color: var(--magnolia); }
@media (max-width: 1279px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 200px)); }
}
@media (max-width: 1023px) {
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { font-size: 32px; }
  .footer-brand img { width: 44px; height: 44px; }
}
/* Phones: 44px rows for the footer links */
@media (max-width: 767px) {
  .footer-cols ul { gap: 0; }
  .footer-cols a, .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Reveal on scroll (added by site.js) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-xslow) var(--ease-out), transform var(--t-xslow) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

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

/* Windows contrast themes */
@media (forced-colors: active) {
  .chip__tile, .tile-icon, .ticks li::before { forced-color-adjust: none; }
  .btn, .icon-btn, .card, .panel, .site-footer { border: 1px solid CanvasText; }
}

/* ---------- App mock-ups: small, faithful copies of Penwing's own screens ----------
   Labels, order and sizes follow the apps (surface/src/ui, mac/Sources). Scale a mock with `zoom`. */
.ui {
  font-family: -apple-system, BlinkMacSystemFont, "Geist", "Segoe UI", system-ui, sans-serif;
  color: #1d1d1f; line-height: 1.3; letter-spacing: 0;
  -webkit-user-select: none; user-select: none;
}
.ui svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Mac wallpaper used inside device screens */
.ui-wall {
  background:
    radial-gradient(70% 60% at 82% 18%, rgb(150 205 255 / 0.9) 0, transparent 70%),
    radial-gradient(80% 70% at 12% 95%, rgb(20 70 200 / 0.9) 0, transparent 70%),
    radial-gradient(60% 50% at 40% 55%, rgb(90 160 255 / 0.55) 0, transparent 70%),
    linear-gradient(160deg, #2a6cf0 0%, #3e8cff 45%, #1b4fca 100%);
}

/* Surface-style tablet (3:2 screen) and a MacBook */
.ui-tablet {
  position: relative; padding: 10px; border-radius: 20px;
  background: #101113;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 18px 40px -12px rgb(7 26 49 / 0.35);
}
.ui-tablet__screen { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 8px; }
.ui-laptop { position: relative; }
.ui-laptop__lid {
  padding: 8px 8px 10px; border-radius: 14px 14px 4px 4px; background: #121316;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.ui-laptop__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 6px 6px 2px 2px; }
.ui-laptop__base {
  height: 12px; margin: 0 -6%; border-radius: 2px 2px 12px 12px;
  background: linear-gradient(#d9dce1, #b9bec6);
  box-shadow: 0 10px 24px -10px rgb(7 26 49 / 0.35);
}
.ui-laptop__base::before {
  content: ""; display: block; width: 16%; height: 5px; margin: 0 auto;
  border-radius: 0 0 6px 6px; background: #a9aeb6;
}

/* Mac window */
.ui-mwin {
  overflow: hidden; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 12px 30px -6px rgb(7 26 49 / 0.35);
}
.ui-mwin__bar {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  background: #f3f3f5; border-bottom: 1px solid rgb(0 0 0 / 0.06);
}
.ui-mwin__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ui-mwin__bar i:nth-child(2) { background: #febc2e; }
.ui-mwin__bar i:nth-child(3) { background: #28c840; }
.ui-mwin__bar span { margin-left: 8px; font-size: 11px; font-weight: 600; color: #6e6e73; }

/* The mountain-lake picture (sprite symbol #u-lake) */
.ui-pic { display: block; width: 100%; height: auto; }

/* Penwing toolbar: dark glass capsule. Real order: status | Keyboard, Draw, Pointer | Zoom, Screens, Full | Shortcuts, Sound, Stats | Leave | fold */
.ui-glass {
  background: rgb(28 28 32 / 0.74);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 12px 32px rgb(0 0 0 / 0.38), 0 1px 3px rgb(0 0 0 / 0.3);
  color: #fff;
}
.ui-tb {
  display: inline-flex; align-items: center;
  height: 60px; padding: 4px 6px; border-radius: 30px;
  white-space: nowrap;
}
.ui-tb__status {
  display: flex; align-items: center; gap: 10px;
  height: 52px; max-width: 200px; padding: 0 12px 0 14px; border-radius: 26px;
}
.ui-tb__status b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: #fff; }
.ui-tb__status small { display: block; font-size: 11px; line-height: 1.3; color: rgb(255 255 255 / 0.74); }
.ui-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 3px rgb(48 209 88 / 0.25); }
.ui-dot.is-warn { background: #ff9f0a; box-shadow: 0 0 0 3px rgb(255 159 10 / 0.25); }
.ui-tb__sep { flex: none; width: 1px; height: 28px; margin: 0 6px; background: rgb(255 255 255 / 0.16); }
.ui-tb__btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 58px; height: 52px; padding-top: 7px; border-radius: 16px;
  font-size: 10.5px; font-weight: 500; line-height: 12px; color: rgb(255 255 255 / 0.8);
  transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.ui-tb__btn svg { width: 22px; height: 22px; color: rgb(255 255 255 / 0.92); transition: color var(--t-mid) var(--ease); }
.ui-tb__btn.is-on, .ui-tb__btn.is-on svg { color: #5aacff; font-weight: 600; }
.ui-tb__btn.is-on::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: #5aacff;
}
.ui-tb__btn.is-press { background: rgb(255 255 255 / 0.17); }
.ui-tb__btn.is-danger, .ui-tb__btn.is-danger svg { color: #ff6961; font-weight: 600; }
.ui-tb__fold { display: grid; place-items: center; width: 36px; height: 52px; }
.ui-tb__fold svg { width: 16px; height: 16px; color: rgb(255 255 255 / 0.66); }

/* Folded toolbar pill */
.ui-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 11px 0 12px; border-radius: 16px;
  font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap;
}
.ui-pill svg { width: 13px; height: 13px; color: rgb(255 255 255 / 0.7); }

/* Mac pairing alert: icon, title, code, hint, one Cancel button */
.ui-alert {
  width: 300px; padding: 30px 24px 20px; border-radius: 18px; text-align: center;
  background: rgb(246 246 248 / 0.97);
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.06), 0 30px 60px rgb(13 34 64 / 0.22);
}
.ui-alert img { width: 64px; height: 64px; margin: 0 auto 14px; }
.ui-alert__title { font-size: 13px; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.ui-alert__code {
  margin-top: 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 38px; font-weight: 600; line-height: 1.1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.ui-alert__hint { margin-top: 4px; font-size: 12px; line-height: 1.4; color: #6e6e73; text-wrap: balance; }
.ui-alert__btn {
  display: block; margin-top: 20px; padding: 5px 0; border-radius: 7px;
  background: #fff; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.16), 0 1px 1px rgb(0 0 0 / 0.06);
  font-size: 13px; color: #1d1d1f;
}

/* Mac menu-bar menu (like the Mac's own Wi-Fi menu) */
.ui-menu {
  width: 300px; padding: 5px 0; border-radius: 10px; font-size: 13px;
  background: rgb(246 246 246 / 0.92);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 14px 36px rgb(7 26 49 / 0.25);
}
.ui-menu__row { display: flex; align-items: center; gap: 10px; min-height: 24px; padding: 4px 14px; }
.ui-menu__row > span:first-child:not(.ui-menu__badge, .ui-menu__ok), .ui-menu__text { flex: 1; min-width: 0; }
.ui-menu__row b { display: block; font-weight: 600; }
.ui-menu__row small { display: block; font-size: 11px; color: #6e6e73; }
.ui-menu__head { padding: 6px 14px 2px; font-size: 11px; font-weight: 700; color: #8e8e93; }
.ui-menu__sep { height: 1px; margin: 5px 14px; background: rgb(0 0 0 / 0.1); }
.ui-menu__right { margin-left: auto; color: #8e8e93; font-size: 12px; }
.ui-menu__badge {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #007aff; color: #fff;
}
.ui-menu__badge svg { width: 13px; height: 13px; stroke-width: 2; }
.ui-menu__ok { display: grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 50%; background: #34c759; color: #fff; }
.ui-menu__ok svg { width: 9px; height: 9px; stroke-width: 3; }
.ui-menu__btn {
  flex: none; padding: 2px 8px; border-radius: 5px; background: #fff; font-size: 11px;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 1px 1px rgb(0 0 0 / 0.06);
}
.ui-switch {
  position: relative; flex: none; width: 26px; height: 15px; border-radius: 8px; background: rgb(0 0 0 / 0.12);
  transition: background-color var(--t-mid) var(--ease);
}
.ui-switch::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform var(--t-mid) var(--ease);
}
.ui-switch.is-on { background: #007aff; }
.ui-switch.is-on::after { transform: translateX(11px); }

/* Windows app, light theme (Home window pages) */
.ui-app {
  overflow: hidden; border-radius: 12px; background: #f5f5f7; color: #1d1d1f;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 16px 40px -10px rgb(7 26 49 / 0.3);
}
.ui-app__bar {
  display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 0 0 12px;
  background: #ececef; font-size: 11px; color: #6e6e73;
}
.ui-app__bar span:last-child { display: flex; height: 100%; }
.ui-app__bar span:last-child i { width: 34px; height: 100%; background: no-repeat center / 10px; }
.ui-app__body { padding: 18px; }
.ui-app h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ui-app__sub { margin-top: 4px; font-size: 12px; color: #6e6e73; }
.ui-app__head {
  display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px;
  font-size: 11px; font-weight: 600; color: #6e6e73;
}
.ui-app__group { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }
.ui-app__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.ui-app__row + .ui-app__row { border-top: 1px solid rgb(0 0 0 / 0.08); }
.ui-app__row svg { width: 22px; height: 22px; color: #6e6e73; }
.ui-app__row b { display: block; font-size: 13px; font-weight: 600; }
.ui-app__row small { display: block; font-size: 11px; color: #6e6e73; }
.ui-app__btn {
  margin-left: auto; padding: 6px 14px; border-radius: 8px; background: #0071e3; color: #fff;
  font-size: 12px; font-weight: 600;
}
.ui-spin {
  display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px;
  border: 1.5px solid rgb(0 0 0 / 0.15); border-top-color: #6e6e73; border-radius: 50%;
  animation: ui-spin 0.9s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Code entry on the PC: six boxes as 3 – 3 */
.ui-code { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ui-code span {
  display: grid; place-items: center; width: 40px; height: 48px; border-radius: 10px;
  background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.13);
  font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: #1d1d1f;
}
.ui-code span.is-current { box-shadow: inset 0 0 0 2px #0071e3, 0 0 0 4px rgb(0 113 227 / 0.25); }
.ui-code i { width: 10px; height: 2px; background: #c7c7cc; }

/* Bring back card (on the PC, under the toolbar) */
.ui-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 22px;
}
.ui-card svg { flex: none; width: 26px; height: 26px; color: #5aacff; }
.ui-card b { display: block; font-size: 14.5px; font-weight: 600; }
.ui-card small { display: block; font-size: 12px; color: rgb(255 255 255 / 0.74); }
.ui-card__btns { display: flex; gap: 6px; margin-left: auto; }
.ui-card__btns span { padding: 8px 12px; border-radius: 13px; background: rgb(255 255 255 / 0.1); font-size: 12.5px; font-weight: 600; }
.ui-card__btns span:last-child { background: #0071e3; }

/* Touch point and pen tip markers for animations */
.ui-touch {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgb(255 255 255 / 0.45); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9), 0 4px 12px rgb(7 26 49 / 0.25);
  pointer-events: none;
}
.ui-ring {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.95); box-shadow: 0 0 0 1px rgb(7 26 49 / 0.25);
  pointer-events: none;
}

/* ========== hero ========== */
/* ==========================================================================
   Hero panel + product showcase (builder: hero)
   Linen panel with the headline, two download buttons, then a gradient stage
   holding four feature tabs joined by a neck to one magnolia card.
   Wide screens (JS adds .is-pinned): the stage pins, grows to the viewport
   and steps through the tabs with scroll. Elsewhere: tabs + auto-advance.
   ========================================================================== */

.hero {
  --card-max: 996px;
  --card-pad: 48px;
  --col-text: 320px;
  --col-media: 516px;
  --col-gap: 64px;
  --tile: 56px;
  --tab-step: 64px;   /* tile + 8px gap: moves the neck under the active tile */
  --mz: 1;            /* media zoom: art is drawn at 516 x 400 and zoomed to its column */
  --pin-top: 24px;
  --t-show: 600ms;
  padding-top: var(--sec-default);
  padding-bottom: var(--pad-x);
}

/* ---------- Headline block ---------- */
.hero .hero__head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
/* 820px instead of 640px: at 72px the line sets on two balanced lines, not three ragged ones. */
.hero .hero__title { max-width: 820px; }
.hero .hero__lead { max-width: var(--sub-max); margin-top: var(--gap-lg); }
.hero .hero__ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  margin-top: var(--gap-xl);
}
.hero .hero__fine { margin-top: 16px; }

/* ---------- Showcase stage ---------- */
.hero .hero__show { margin-top: var(--gap-2xl); padding-inline: var(--pad-x); }
.hero .hero__stage {
  position: relative;
  max-width: 1200px; margin-inline: auto;
  padding: 48px 30px 64px;
}
.hero .hero__bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; isolation: isolate;
  border-radius: var(--r-panel); background: var(--ash);
}
/* The sliding gradient strip: the four gradients stacked; the active one slides in from the side over the last one. */
.hero .hero__bgimg {
  position: absolute; inset: 0;
  opacity: 0; transform: translateX(7%) scale(1.16);
  transition: opacity var(--t-show) var(--ease-io), transform var(--t-show) var(--ease-io);
}
.hero .hero__bgimg.is-before { transform: translateX(-7%) scale(1.16); }
.hero .hero__bgimg.is-active { z-index: 1; opacity: 1; transform: scale(1.16); }
.hero .hero__bgimg.is-leaving { opacity: 1; transition: transform var(--t-show) var(--ease-io); }
.hero .hero__bgimg picture, .hero .hero__bgimg img { width: 100%; height: 100%; }
.hero .hero__bgimg img { position: static; object-fit: cover; }

.hero .hero__content { position: relative; z-index: 1; }
/* top has no effect until pinned; it lets the JS read --pin-top in px before it decides to pin */
.hero .hero__pin { top: var(--pin-top); }

/* Tabs: 56px tiles with a white ring; the active one takes the feature colour */
.hero .hero__tabs { display: flex; justify-content: center; gap: 8px; }
.hero .hero__tab {
  display: grid; place-items: center; flex: none;
  width: var(--tile); height: var(--tile); padding: 0;
  border: 3px solid var(--white); border-radius: var(--r-chip);
  background: var(--tab-idle); color: var(--steel);
  cursor: pointer;
  transition: background-color var(--t-show) var(--ease-io), color var(--t-show) var(--ease-io);
}
.hero .hero__tab:hover { color: var(--midnight); }
.hero .hero__tab[aria-selected="true"] { background: var(--accent); color: var(--midnight); }
.hero .hero__tab .i { width: 24px; height: 24px; stroke-width: 1.75; }
.hero .hero__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Card: one magnolia surface; the panels stack in one grid cell and cross-fade */
.hero .hero__card {
  position: relative;
  display: grid;
  width: 100%; max-width: var(--card-max);
  margin: 14px auto 0;
  padding: var(--card-pad);
  border-radius: var(--r-card);
  background: var(--magnolia);
}
.hero .hero__neck {
  top: -14px; left: calc(50% - 16px);
  transform: translateX(calc((var(--tab, 0) - 1.5) * var(--tab-step)));
  transition: transform var(--t-show) var(--ease-io);
}
.hero .hero__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: var(--col-text) var(--col-media);
  column-gap: var(--col-gap);
  align-items: center;
  visibility: hidden;
  transition: visibility 0s linear var(--t-show);
}
.hero .hero__panel.is-active { z-index: 1; visibility: visible; transition: none; }
.hero .hero__panel.is-leaving { visibility: visible; }

.hero .hero__copy {
  display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0; transform: translateY(8px);
  transition: opacity 280ms var(--ease-io), transform 280ms var(--ease-io);
}
.hero .is-active > .hero__copy {
  opacity: 1; transform: none;
  transition: opacity 420ms var(--ease-io) 180ms, transform var(--t-show) var(--ease-io);
}
.hero .hero__copy .chip { margin-bottom: var(--gap-lg); }
.hero .hero__h { margin-bottom: var(--gap-md); }
.hero .hero__copy .link-u { margin-top: var(--gap-lg); }

.hero .hero__media {
  position: relative; width: 100%; aspect-ratio: 516 / 400;
  opacity: 0; transition: opacity var(--t-show) var(--ease-io);
}
.hero .is-active > .hero__media, .hero .is-leaving > .hero__media { opacity: 1; }
.hero .is-leaving > .hero__media { transition: none; }

/* The art is drawn at 516 x 400 and zoomed to the column width */
.hero .hero__art {
  position: relative;
  width: 516px; height: 400px;
  zoom: var(--mz);
  border-radius: 20px;
  overflow: hidden; isolation: isolate;
  background: var(--ash);
}
.hero .hero__art svg { max-width: none; }
/* App UI keeps plain round corners (circles stay circles) */
@supports (corner-shape: round) {
  .hero .hero__art .ui, .hero .hero__art .ui * { corner-shape: round; }
}
.hero .hero__art.is-paused, .hero .hero__art.is-paused * { animation-play-state: paused !important; }

/* Pause / play for everything that moves (the tabs' auto-advance and the art) */
.hero .hero__pause {
  position: absolute; z-index: 2;
  right: calc(var(--card-pad) + 12px); bottom: calc(var(--card-pad) + 12px);
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid rgb(255 255 255 / 0.9); border-radius: var(--r-xs);
  background: rgb(255 255 255 / 0.78); color: var(--midnight);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.hero .hero__pause:hover { background: var(--white); }
.hero .hero__pause[hidden] { display: none; }
.hero .hero__pause .i { width: 14px; height: 14px; stroke-width: 2.2; }
.hero .hero__play-i, .hero .hero__pause.is-paused .hero__pause-i { display: none; }
.hero .hero__pause.is-paused .hero__play-i { display: block; }

/* Close ("Skip the tour"): only while the pinned stage fills the screen */
.hero .hero__close {
  position: absolute; z-index: 3;
  top: calc(var(--reserve, 0px) + 20px); right: 24px;
  border-color: rgb(255 255 255 / 0.9); border-radius: var(--r-close);
  background: rgb(255 255 255 / 0.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility 0s linear var(--t-mid), background-color var(--t-fast) var(--ease);
}
.hero .hero__close:hover { background: var(--white); }
.hero:not(.is-pinned) .hero__close { display: none; }
.hero.is-pinned.is-full .hero__close {
  opacity: 1; visibility: visible;
  transition: opacity var(--t-mid) var(--ease), visibility 0s, background-color var(--t-fast) var(--ease);
}

/* ---------- Pinned mode (JS: >= 1024px wide, >= 600px tall, motion allowed, card fits at >= 90 %) ---------- */
.hero.is-pinned { padding-bottom: 0; }
.hero.is-pinned .hero__show { padding-inline: 0; }
.hero.is-pinned .hero__pin {
  position: sticky; top: var(--pin-top);
  height: calc(100vh - var(--pin-top) - 24px);
  height: calc(100svh - var(--pin-top) - 24px);   /* steady while touch toolbars slide in and out */
}
.hero.is-pinned .hero__stage { position: absolute; inset: 0; max-width: none; padding: 0; }
.hero.is-pinned .hero__bg { transform-origin: 50% 0; will-change: transform; }
.hero.is-pinned .hero__content {
  position: absolute; left: 50%; top: 0;
  width: var(--card-max);
  transform: translate(-50%, 48px);
  transform-origin: 50% 0; will-change: transform;
}
/* Below 1072px the header sticks to the top, so the pinned stage starts under it */
@media (max-width: 1071px) {
  .hero { --pin-top: calc(var(--header-h) + 16px); }
}

/* ==========================================================================
   Illustrations (all drawn in a 516 x 400 box)
   Still frames are the default (reduced motion); .is-run plays the loop.
   ========================================================================== */
.hero .hp-tablet { position: absolute; left: 48px; top: 56px; width: 420px; }   /* screen: 400 x 266.7 at (58, 66) */
.hero .hp-pen .ui-tablet, .hero .hp-tch .ui-tablet { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 48px -16px rgb(7 26 49 / 0.4); }

/* Smaller Mac window chrome so the windows sit at a believable scale on these screens */
.hero .hero__art .ui-mwin__bar { height: 16px; gap: 4px; padding: 0 7px; }
.hero .hero__art .ui-mwin__bar i { width: 6px; height: 6px; }
.hero .hero__art .ui-mwin__bar span { margin-left: 5px; font-size: 8px; }

/* 1. Pen: the toolbar with Draw on; a pressure stroke inks itself while the pen follows */
.hero .hp-pen__win { position: absolute; left: 20px; top: 42px; width: 360px; border-radius: 7px; }
.hero .hp-pen__canvas { display: block; width: 360px; height: 190px; background: #fff; }
.hero .hp-pen__bar { position: absolute; top: 7px; left: 0; right: 0; display: flex; justify-content: center; }
.hero .hp-pen__bar .ui-tb { zoom: 0.45; }
.hero .hp-pen__reveal { stroke-dasharray: 1 1.1; stroke-dashoffset: 0; }   /* pathLength = 1 */
.hero .hp-pen__pen {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 1px; height: 1px;
  transform: translate(388px, 196px) rotate(-1deg);
  transform-origin: 0 0;
}
.hero .hp-pen__pen svg {
  position: absolute; left: -4px; top: -116px;
  width: 120px; height: 120px;
  filter: drop-shadow(10px 14px 10px rgb(7 26 49 / 0.28));
}
.hero .hp-pen.is-run .hp-pen__reveal--a { animation: hp-ink-a 7s linear infinite; }
.hero .hp-pen.is-run .hp-pen__reveal--b { animation: hp-ink-b 7s linear infinite; }
.hero .hp-pen.is-run .hp-pen__ink { animation: hp-ink-fade 7s var(--ease-io) infinite; }
.hero .hp-pen.is-run .hp-pen__pen { animation: hp-pen-move 7s linear infinite; }
@keyframes hp-ink-a {
  0% { stroke-dashoffset: 1; }
  12.00% { stroke-dashoffset: 1.0000; }
  13.12% { stroke-dashoffset: 0.9757; }
  14.25% { stroke-dashoffset: 0.9431; }
  15.38% { stroke-dashoffset: 0.9028; }
  16.50% { stroke-dashoffset: 0.8554; }
  17.62% { stroke-dashoffset: 0.8015; }
  18.75% { stroke-dashoffset: 0.7415; }
  19.88% { stroke-dashoffset: 0.6760; }
  21.00% { stroke-dashoffset: 0.6056; }
  22.12% { stroke-dashoffset: 0.5308; }
  23.25% { stroke-dashoffset: 0.4522; }
  24.38% { stroke-dashoffset: 0.3703; }
  25.50% { stroke-dashoffset: 0.2856; }
  26.62% { stroke-dashoffset: 0.1987; }
  27.75% { stroke-dashoffset: 0.1102; }
  28.88% { stroke-dashoffset: 0.0206; }
  29.13% { stroke-dashoffset: 0.0000; }
  30.00% { stroke-dashoffset: 0.0000; }
  31.12% { stroke-dashoffset: 0.0000; }
  32.25% { stroke-dashoffset: 0.0000; }
  33.38% { stroke-dashoffset: 0.0000; }
  34.50% { stroke-dashoffset: 0.0000; }
  35.62% { stroke-dashoffset: 0.0000; }
  36.75% { stroke-dashoffset: 0.0000; }
  37.88% { stroke-dashoffset: 0.0000; }
  39.00% { stroke-dashoffset: 0.0000; }
  40.12% { stroke-dashoffset: 0.0000; }
  41.25% { stroke-dashoffset: 0.0000; }
  42.38% { stroke-dashoffset: 0.0000; }
  43.50% { stroke-dashoffset: 0.0000; }
  44.62% { stroke-dashoffset: 0.0000; }
  45.75% { stroke-dashoffset: 0.0000; }
  46.88% { stroke-dashoffset: 0.0000; }
  48.00% { stroke-dashoffset: 0.0000; }
  100% { stroke-dashoffset: 0; }
}
@keyframes hp-ink-b {
  0% { stroke-dashoffset: 1; }
  12.00% { stroke-dashoffset: 1.0000; }
  13.12% { stroke-dashoffset: 1.0000; }
  14.25% { stroke-dashoffset: 1.0000; }
  15.38% { stroke-dashoffset: 1.0000; }
  16.50% { stroke-dashoffset: 1.0000; }
  17.62% { stroke-dashoffset: 1.0000; }
  18.75% { stroke-dashoffset: 1.0000; }
  19.88% { stroke-dashoffset: 1.0000; }
  21.00% { stroke-dashoffset: 1.0000; }
  22.12% { stroke-dashoffset: 1.0000; }
  23.25% { stroke-dashoffset: 1.0000; }
  24.38% { stroke-dashoffset: 1.0000; }
  25.50% { stroke-dashoffset: 1.0000; }
  26.62% { stroke-dashoffset: 1.0000; }
  27.75% { stroke-dashoffset: 1.0000; }
  28.88% { stroke-dashoffset: 1.0000; }
  29.13% { stroke-dashoffset: 1.0000; }
  30.00% { stroke-dashoffset: 0.9390; }
  31.12% { stroke-dashoffset: 0.8598; }
  32.25% { stroke-dashoffset: 0.7811; }
  33.38% { stroke-dashoffset: 0.7034; }
  34.50% { stroke-dashoffset: 0.6272; }
  35.62% { stroke-dashoffset: 0.5529; }
  36.75% { stroke-dashoffset: 0.4809; }
  37.88% { stroke-dashoffset: 0.4119; }
  39.00% { stroke-dashoffset: 0.3462; }
  40.12% { stroke-dashoffset: 0.2844; }
  41.25% { stroke-dashoffset: 0.2269; }
  42.38% { stroke-dashoffset: 0.1743; }
  43.50% { stroke-dashoffset: 0.1269; }
  44.62% { stroke-dashoffset: 0.0853; }
  45.75% { stroke-dashoffset: 0.0500; }
  46.88% { stroke-dashoffset: 0.0214; }
  48.00% { stroke-dashoffset: 0.0000; }
  100% { stroke-dashoffset: 0; }
}
@keyframes hp-ink-fade {
  0%, 78% { opacity: 1; }
  86%, 100% { opacity: 0; }
}
@keyframes hp-pen-move {
  0% { opacity: 0; transform: translate(126px, 252px) rotate(-3deg); animation-timing-function: var(--ease-out); }
  6% { opacity: 1; transform: translate(126px, 252px) rotate(-3deg); animation-timing-function: var(--ease-io); }
  12.00% { transform: translate(112.0px, 270.0px) rotate(-3.0deg); }
  13.12% { transform: translate(113.8px, 263.9px) rotate(-2.8deg); }
  14.25% { transform: translate(116.3px, 255.9px) rotate(-2.6deg); }
  15.38% { transform: translate(119.9px, 246.0px) rotate(-2.3deg); }
  16.50% { transform: translate(124.8px, 234.7px) rotate(-1.9deg); }
  17.62% { transform: translate(131.2px, 222.2px) rotate(-1.6deg); }
  18.75% { transform: translate(139.5px, 209.0px) rotate(-1.1deg); }
  19.88% { transform: translate(150.4px, 196.0px) rotate(-0.7deg); }
  21.00% { transform: translate(164.6px, 184.5px) rotate(-0.3deg); }
  22.12% { transform: translate(182.8px, 178.0px) rotate(0.2deg); }
  23.25% { transform: translate(202.5px, 182.1px) rotate(0.6deg); }
  24.38% { transform: translate(217.4px, 197.0px) rotate(1.0deg); }
  25.50% { transform: translate(226.2px, 217.1px) rotate(1.3deg); }
  26.62% { transform: translate(226.5px, 239.4px) rotate(1.6deg); }
  27.75% { transform: translate(212.6px, 256.6px) rotate(1.8deg); }
  28.88% { transform: translate(196.9px, 243.3px) rotate(2.0deg); }
  29.13% { transform: translate(196.0px, 238.0px) rotate(2.0deg); }
  30.00% { transform: translate(199.2px, 220.4px) rotate(2.0deg); }
  31.12% { transform: translate(213.7px, 202.3px) rotate(2.0deg); }
  32.25% { transform: translate(233.8px, 190.8px) rotate(1.8deg); }
  33.38% { transform: translate(256.3px, 186.4px) rotate(1.6deg); }
  34.50% { transform: translate(278.4px, 190.4px) rotate(1.3deg); }
  35.62% { transform: translate(296.4px, 202.8px) rotate(1.0deg); }
  36.75% { transform: translate(308.5px, 220.2px) rotate(0.6deg); }
  37.88% { transform: translate(321.5px, 235.9px) rotate(0.2deg); }
  39.00% { transform: translate(338.5px, 245.1px) rotate(-0.3deg); }
  40.12% { transform: translate(356.6px, 245.1px) rotate(-0.7deg); }
  41.25% { transform: translate(371.7px, 237.6px) rotate(-1.1deg); }
  42.38% { transform: translate(383.1px, 226.9px) rotate(-1.6deg); }
  43.50% { transform: translate(391.5px, 215.7px) rotate(-1.9deg); }
  44.62% { transform: translate(397.7px, 205.1px) rotate(-2.3deg); }
  45.75% { transform: translate(402.3px, 195.7px) rotate(-2.6deg); }
  46.88% { transform: translate(405.7px, 187.9px) rotate(-2.8deg); }
  48.00% { transform: translate(408.0px, 182.0px) rotate(-3.0deg); }
  54% { opacity: 1; transform: translate(398px, 186px) rotate(-1deg); animation-timing-function: var(--ease-io); }
  60% { opacity: 0; transform: translate(404px, 180px) rotate(-1deg); }
  100% { opacity: 0; transform: translate(126px, 252px) rotate(-3deg); }
}

/* 2. Second screen: a window is dragged off the Mac and lands on the PC.
   One window per screen, both moved by the same keyframes: the PC screen sits
   right of the Mac's (macOS arrangement), so the window crosses the edge like the real thing. */
.hero .hp-scr__lap { position: absolute; left: 24px; top: 114px; width: 244px; }   /* screen 228 x 142.5 at (32, 122) */
.hero .hp-scr__tab { position: absolute; left: 286px; top: 143px; width: 206px; }  /* screen 188 x 125.3 at (295, 152) */
/* macOS shows its menu bar on every display */
.hero .hp-scr .ui-laptop__screen::before, .hero .hp-scr .ui-tablet__screen::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: rgb(255 255 255 / 0.3);
}
.hero .hp-scr .ui-laptop__base { box-shadow: 0 14px 26px -12px rgb(7 26 49 / 0.45); }
.hero .hp-scr .ui-tablet { padding: 9px; border-radius: 16px; }
.hero .hp-scr .ui-tablet__screen { border-radius: 6px; }
.hero .hp-scr .ui-mwin { border-radius: 5px; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 8px 18px -6px rgb(7 26 49 / 0.4); }
.hero .hp-scr .ui-mwin__bar { height: 13px; gap: 3px; padding: 0 5px; }
.hero .hp-scr .ui-mwin__bar i { width: 5px; height: 5px; }
.hero .hp-scr .ui-mwin__bar span { margin-left: 3px; font-size: 6.5px; }
.hero .hp-scr__drag {
  position: absolute; left: 32px; top: 24px; width: 100px;
  transform: translate(240px, 39px);
}
.hero .hp-scr__drag--pc { left: -196px; top: -6px; }   /* the PC screen's origin is (228, 30) in Mac space */
.hero .hp-cur {
  position: absolute; left: -5px; top: -3px; z-index: 2;
  width: 20px; height: 20px;
  fill: #111318; stroke: #fff; stroke-width: 1.5;
  transform: translate(70px, 52px);
  transform-origin: 5px 3px;
}
.hero .hp-scr__pill { position: absolute; top: 4px; left: 0; right: 0; display: flex; justify-content: center; }
.hero .hp-scr__pill .ui-pill { zoom: 0.5; }
.hero .hp-scr.is-run .hp-scr__drag { animation: hp-scr-drag 8s linear infinite; }
.hero .hp-scr.is-run .hp-cur { animation: hp-scr-cur 8s linear infinite; }
@keyframes hp-scr-drag {
  0%, 12% { transform: translate(0, 0); animation-timing-function: var(--ease-io); }
  36%, 60% { transform: translate(240px, 39px); animation-timing-function: var(--ease-io); }
  84%, 100% { transform: translate(0, 0); }
}
@keyframes hp-scr-cur {
  0% { transform: translate(70px, 52px); animation-timing-function: var(--ease-io); }
  9% { transform: translate(46px, 6px) scale(1); }
  11%, 36% { transform: translate(46px, 6px) scale(0.86); }
  38% { transform: translate(46px, 6px) scale(1); animation-timing-function: var(--ease-io); }
  46%, 52% { transform: translate(70px, 52px) scale(1); animation-timing-function: var(--ease-io); }
  58% { transform: translate(46px, 6px) scale(1); }
  60%, 84% { transform: translate(46px, 6px) scale(0.86); }
  86% { transform: translate(46px, 6px) scale(1); animation-timing-function: var(--ease-io); }
  94%, 100% { transform: translate(70px, 52px) scale(1); }
}

/* 3. Touch: two fingers pinch the photo larger; a two-finger tap opens the right-click menu */
.hero .hp-tch__win { position: absolute; left: 50px; top: 24px; width: 300px; border-radius: 7px; }
.hero .hp-tch__view { overflow: hidden; }
.hero .hp-tch__pic { transform: scale(1.35); transform-origin: 58% 54%; }
.hero .hp-tch .ui-touch { left: 0; top: 0; opacity: 0; }
.hero .hp-tch .hp-tch__t { opacity: 0.95; }
.hero .hp-tch .hp-tch__t--1 { left: 226px; top: 118px; }
.hero .hp-tch .hp-tch__t--2 { left: 254px; top: 108px; }
.hero .hp-tch__menu { position: absolute; left: 236px; top: 124px; transform-origin: 0 0; }
.hero .hp-tch__menu .ui-menu { width: 150px; zoom: 0.74; }
.hero .hp-tch__menu .ui-menu__row { min-height: 22px; padding: 3px 12px; }
.hero .hp-tch.is-run .hp-tch__pic { animation: hp-tch-zoom 8s linear infinite; }
.hero .hp-tch.is-run .hp-tch__f--1 { animation: hp-tch-f1 8s linear infinite; }
.hero .hp-tch.is-run .hp-tch__f--2 { animation: hp-tch-f2 8s linear infinite; }
.hero .hp-tch.is-run .hp-tch__t { animation: hp-tch-tap 8s linear infinite; }
.hero .hp-tch.is-run .hp-tch__menu { animation: hp-tch-menu 8s linear infinite; }
@keyframes hp-tch-zoom {
  0%, 6% { transform: scale(1); animation-timing-function: var(--ease-io); }
  26%, 66% { transform: scale(1.6); animation-timing-function: var(--ease-io); }
  84%, 100% { transform: scale(1); }
}
@keyframes hp-tch-f1 {
  0% { opacity: 0; transform: translate(188px, 132px) scale(0.6); animation-timing-function: var(--ease-out); }
  5% { opacity: 1; transform: translate(188px, 132px) scale(1); animation-timing-function: var(--ease-io); }
  26% { opacity: 1; transform: translate(140px, 98px) scale(1); }
  30%, 62% { opacity: 0; transform: translate(140px, 98px) scale(0.8); animation-timing-function: var(--ease-out); }
  66% { opacity: 1; transform: translate(140px, 98px) scale(1); animation-timing-function: var(--ease-io); }
  84% { opacity: 1; transform: translate(188px, 132px) scale(1); }
  88%, 100% { opacity: 0; transform: translate(188px, 132px) scale(0.8); }
}
@keyframes hp-tch-f2 {
  0% { opacity: 0; transform: translate(216px, 154px) scale(0.6); animation-timing-function: var(--ease-out); }
  5% { opacity: 1; transform: translate(216px, 154px) scale(1); animation-timing-function: var(--ease-io); }
  26% { opacity: 1; transform: translate(266px, 190px) scale(1); }
  30%, 62% { opacity: 0; transform: translate(266px, 190px) scale(0.8); animation-timing-function: var(--ease-out); }
  66% { opacity: 1; transform: translate(266px, 190px) scale(1); animation-timing-function: var(--ease-io); }
  84% { opacity: 1; transform: translate(216px, 154px) scale(1); }
  88%, 100% { opacity: 0; transform: translate(216px, 154px) scale(0.8); }
}
@keyframes hp-tch-tap {
  0%, 34% { opacity: 0; scale: 1.5; animation-timing-function: var(--ease-out); }
  37% { opacity: 1; scale: 1; }
  39% { opacity: 1; scale: 1; animation-timing-function: var(--ease-out); }
  43%, 100% { opacity: 0; scale: 0.85; }
}
@keyframes hp-tch-menu {
  0%, 40% { opacity: 0; transform: scale(0.94); animation-timing-function: var(--ease-out); }
  43%, 58% { opacity: 1; transform: none; animation-timing-function: var(--ease); }
  61%, 100% { opacity: 0; transform: none; }
}

/* 4. Private: the Mac shows the code, the PC fills it in digit by digit, then "Paired once" */
.hero .hp-prv__mac { position: absolute; left: 32px; top: 34px; z-index: 1; }
.hero .hp-prv__mac .ui-alert { zoom: 0.74; }
.hero .hp-prv__pc { position: absolute; right: 30px; top: 148px; z-index: 2; }
.hero .hp-prv__pc .ui-app { width: 340px; zoom: 0.7; }
.hero .hp-prv__title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.hero .hp-prv__code { position: relative; justify-content: flex-start; margin-top: 16px; }
.hero .hp-prv__code b { font-weight: 600; }
.hero .hp-prv__caret {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 48px; border-radius: 10px;
  box-shadow: inset 0 0 0 2px #0071e3, 0 0 0 4px rgb(0 113 227 / 0.25);
  opacity: 0;
}
.hero .hp-prv__chip { position: absolute; left: 44px; top: 302px; z-index: 3; display: flex; }
.hero .hp-prv.is-run .hp-prv__caret { animation: hp-prv-caret 8s steps(1, end) infinite; }
.hero .hp-prv.is-run .hp-prv__code span:nth-child(1) b { animation: hp-prv-d0 8s var(--ease-out) infinite; }
.hero .hp-prv.is-run .hp-prv__code span:nth-child(2) b { animation: hp-prv-d1 8s var(--ease-out) infinite; }
.hero .hp-prv.is-run .hp-prv__code span:nth-child(3) b { animation: hp-prv-d2 8s var(--ease-out) infinite; }
.hero .hp-prv.is-run .hp-prv__code span:nth-child(5) b { animation: hp-prv-d3 8s var(--ease-out) infinite; }
.hero .hp-prv.is-run .hp-prv__code span:nth-child(6) b { animation: hp-prv-d4 8s var(--ease-out) infinite; }
.hero .hp-prv.is-run .hp-prv__code span:nth-child(7) b { animation: hp-prv-d5 8s var(--ease-out) infinite; }
.hero .hp-prv.is-run .hp-prv__chip { animation: hp-prv-chip 8s linear infinite; }
@keyframes hp-prv-caret {
  0% { opacity: 0; transform: translateX(0); }
  8% { opacity: 1; transform: translateX(0); }
  14% { opacity: 1; transform: translateX(48px); }
  19% { opacity: 1; transform: translateX(96px); }
  24% { opacity: 1; transform: translateX(162px); }
  29% { opacity: 1; transform: translateX(210px); }
  34% { opacity: 1; transform: translateX(258px); }
  39%, 100% { opacity: 0; transform: translateX(258px); }
}
@keyframes hp-prv-d0 { 0%, 14% { opacity: 0; transform: translateY(4px); } 16%, 86% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: none; } }
@keyframes hp-prv-d1 { 0%, 19% { opacity: 0; transform: translateY(4px); } 21%, 86% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: none; } }
@keyframes hp-prv-d2 { 0%, 24% { opacity: 0; transform: translateY(4px); } 26%, 86% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: none; } }
@keyframes hp-prv-d3 { 0%, 29% { opacity: 0; transform: translateY(4px); } 31%, 86% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: none; } }
@keyframes hp-prv-d4 { 0%, 34% { opacity: 0; transform: translateY(4px); } 36%, 86% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: none; } }
@keyframes hp-prv-d5 { 0%, 39% { opacity: 0; transform: translateY(4px); } 41%, 86% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: none; } }
@keyframes hp-prv-chip {
  0%, 44% { opacity: 0; transform: translateY(12px) scale(0.72); animation-timing-function: var(--ease-out); }
  48% { opacity: 1; transform: translateY(0) scale(1.04); animation-timing-function: var(--ease-io); }
  51%, 84% { opacity: 1; transform: none; animation-timing-function: var(--ease-io); }
  90%, 100% { opacity: 0; transform: translateY(6px) scale(0.96); }
}

/* ---------- Small desktop: 1024 to 1279 ---------- */
@media (max-width: 1279px) {
  .hero {
    --card-max: 836px;
    --card-pad: 40px;
    --col-text: 280px;
    --col-media: 436px;
    --col-gap: 40px;
    --mz: 0.845;
  }
}

/* ---------- Tablet: the card stacks, text over media ---------- */
@media (max-width: 1023px) {
  .hero { --card-max: 640px; --card-pad: 32px; --mz: 1.1; }
  .hero .hero__stage { padding: 40px 24px 48px; }
  .hero .hero__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    row-gap: var(--gap-xl);
    align-items: start;
  }
  .hero .hero__copy .chip { margin-bottom: var(--gap-md); }
  /* A 44px hit area round a 32px tile that lines up with the chip and the card's text edge */
  .hero .hero__pause {
    top: calc(var(--card-pad) - 6px); right: calc(var(--card-pad) - 6px); bottom: auto;
    width: 44px; height: 44px;
    border: 0; border-radius: var(--r-ctl); background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .hero .hero__pause::before {
    content: ""; position: absolute; inset: 6px;
    border-radius: var(--r-xs); background: var(--ink-5);
    transition: background-color var(--t-fast) var(--ease);
  }
  .hero .hero__pause:hover { background: none; }
  .hero .hero__pause:hover::before { background: var(--ink-10); }
  .hero .hero__pause .i { position: relative; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  .hero { --card-pad: 20px; --tile: 48px; --tab-step: 56px; --mz: 0.55; }
  .hero .hero__stage { padding: 24px 16px 16px; border-radius: var(--r-card); }
  .hero .hero__bg { border-radius: var(--r-card); }
  .hero .hero__card { border-radius: calc(var(--r-card) - 16px); }   /* concentric with the stage (16px inset) */
  .hero .hero__panel { row-gap: var(--gap-lg); }
  .hero .hero__copy .link-u { min-height: 44px; margin-top: var(--gap-sm); }   /* 44px touch target */
  .hero .hero__art { border-radius: 24px; }
  .hero .hero__pause .i { width: 16px; height: 16px; }
}
@media (max-width: 576px) {
  .hero .hero__ctas { flex-direction: column; align-self: stretch; gap: 12px; }
  .hero .hero__ctas .btn { width: 100%; }
}

@media (forced-colors: active) {
  .hero .hero__tab[aria-selected="true"] { outline: 3px solid Highlight; }
}

/* ========== how ========== */
/* How it works: a second linen panel on a soft mesh, with three expanding step cards.
   Wide screens: one card is open (512 of 1200 px), the other two are narrow; the open card follows hover, focus and tap.
   Mock-ups come from the app kit. They shrink to fit a narrow card and grow with it (the `scale` property, so the
   keyframe `transform`s stay free), and they animate once when their card opens in view.
   Below 1024 px every card is open and the cards stack. */

.how {
  margin-top: var(--inset);
  overflow: hidden;
  /* mock-up scale in the open card, then in a narrow card */
  --z-menu: 1;     --z-menu-off: 0.78;
  --z-app: 1;      --z-app-off: 0.62;
  --z-alert: 0.66; --z-alert-off: 0.6;
  --z-tray: 0.8;   --z-tray-off: 0.7;
}

/* ---------- Card row ---------- */
.how .how__row {
  --gap: var(--gap-lg);
  --grow-off: 320;
  --grow-on: 512;
  --card-h: 523px;
  --pad: 32px;
  --art-h: 224px;
  --open: var(--t-slow) var(--ease-io);
  display: flex;
  gap: var(--gap);
  margin-top: var(--gap-3xl);
}

.how .how__card {
  position: relative;
  flex: var(--grow-off) 1 0px;
  min-width: 0;
  height: var(--card-h);
  border-radius: var(--r-card);
  background: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: flex-grow var(--open);
}
.how .how__card.is-active { flex-grow: var(--grow-on); cursor: default; }
.how .how__card:focus-visible { outline-offset: 4px; }

/* Card shadow on its own layer, so only opacity animates */
.how .how__card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transition: opacity var(--open);
  pointer-events: none;
}
.how .how__card.is-active::before { opacity: 1; }

/* Bridge: a white neck joins each card to the next, near the top */
.how .how__card:not(:last-child)::after {
  --r: calc(var(--gap) / 2);
  content: "";
  position: absolute; left: 100%; top: 64px; z-index: 1;
  width: var(--gap); height: 40px;
  background: var(--white);
  pointer-events: none;
  -webkit-mask:
    radial-gradient(circle at 50% 0, #0000 var(--r), #000 calc(var(--r) + 0.5px)) top / 100% 50% no-repeat,
    radial-gradient(circle at 50% 100%, #0000 var(--r), #000 calc(var(--r) + 0.5px)) bottom / 100% 50% no-repeat;
  mask:
    radial-gradient(circle at 50% 0, #0000 var(--r), #000 calc(var(--r) + 0.5px)) top / 100% 50% no-repeat,
    radial-gradient(circle at 50% 100%, #0000 var(--r), #000 calc(var(--r) + 0.5px)) bottom / 100% 50% no-repeat;
}

.how .how__clip {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  padding: var(--pad) var(--pad) 0;
}

/* ---------- Text ---------- */
.how .how__num {
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  margin-bottom: var(--gap-md);
  border-radius: var(--r-ctl);
  box-shadow: inset 0 0 0 1px var(--ink-10);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--midnight);
}
.how .how__num::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.how .how__card.is-active .how__num::before { opacity: 1; }

.how .how__title { color: var(--midnight); }
.how .how__desc { margin-top: var(--gap-sm); }

/* Checklist: accent icon tiles joined by a thin line; shown on the open card */
.how .how__list {
  position: relative;
  display: grid; gap: 10px;
  margin-top: 20px;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.how .how__list::before {
  content: "";
  position: absolute; left: 11.5px; top: 12px; bottom: 12px;
  width: 1px; background: var(--ink-20);
}
.how .how__list li {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 24px;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; color: var(--midnight);
  transform: translateY(6px);
  transition: transform var(--t-fast) var(--ease);
}
.how .how__list .tile-icon { width: 24px; height: 24px; border-radius: var(--r-ctl); }
.how .how__list .tile-icon .i { width: 14px; height: 14px; stroke-width: 2; }

.how .how__card.is-active .how__list {
  opacity: 1;
  transition: opacity var(--t-mid) var(--ease-out) 220ms;
}
.how .how__card.is-active .how__list li {
  transform: none;
  transition: transform 420ms var(--ease-out) 220ms;
}
.how .how__card.is-active .how__list li:nth-child(2) { transition-delay: 280ms; }
.how .how__card.is-active .how__list li:nth-child(3) { transition-delay: 340ms; }
/* Reduced motion: the card snaps open, so its checklist shows at once */
@media (prefers-reduced-motion: reduce) {
  .how .how__card.is-active .how__list,
  .how .how__card.is-active .how__list li { transition-delay: 0s !important; }
}

/* ---------- Illustration window ---------- */
.how .how__art {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 0;
  height: var(--art-h);
  overflow: hidden; isolation: isolate;
  border-radius: 20px 20px 0 0;
  background: var(--ash);
}
.how .how__menu, .how .how__app, .how .how__alert, .how .how__tray {
  position: absolute; left: 50%;
  translate: -50% 0;
  transition: scale var(--open);
}

/* 1 · A slice of the Mac menu bar, and the Penwing menu hanging from its icon */
.how .how__bar {
  position: absolute; inset: 0 0 auto;
  height: 24px;
  /* The window's own corners: a backdrop blur is not clipped by the parent's rounding, so it would show square corners */
  border-radius: inherit;
  corner-shape: inherit;
  background: rgb(255 255 255 / 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 0.5px 0 rgb(0 0 0 / 0.08);
}
.how .how__glyph {
  position: absolute; top: 2px; left: 50%;
  display: grid; place-items: center;
  width: 30px; height: 20px;
  border-radius: 5px;
  translate: calc(-150px * var(--z-menu-off)) 0;
  transition: translate var(--open);
}
.how .how__card.is-active .how__glyph { translate: calc(-150px * var(--z-menu)) 0; }
.how .how__glyph::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.1);
}
.how .how__glyph img { position: relative; width: 16px; height: 16px; }

.how .how__menu {
  top: 30px;
  transform-origin: 50% 0;
  scale: var(--z-menu-off);
}
.how .how__card.is-active .how__menu { scale: var(--z-menu); }
.how .how__sub { white-space: nowrap; }
.how .how__switch.is-on { background: rgb(0 0 0 / 0.12); }
.how .how__switch::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: #007aff;
}

/* 2 · Windows app, Pair a Mac (rises from the bottom edge) */
.how .how__app {
  bottom: -14px;
  width: 380px;
  transform-origin: 50% 100%;
  scale: var(--z-app-off);
}
.how .how__card.is-active .how__app { scale: var(--z-app); }
.how .how__app-title { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.how .ui-spin { animation: none; }
.how .how__group { display: grid; }
.how .how__group > * { grid-area: 1 / 1; }
.how .how__empty {
  align-self: center;
  padding: 8px 16px;
  font-size: 12px; line-height: 1.35; color: #6e6e73; text-align: center;
  opacity: 0;
}
.how .how__pair { position: relative; }
.how .how__tap { left: 50%; top: 50%; opacity: 0; }

/* 3 · Mac pairing alert, and the code boxes on the PC in front of it */
.how .how__alert {
  top: 16px;
  transform-origin: 50% 0;
  scale: var(--z-alert-off);
}
.how .how__card.is-active .how__alert { scale: var(--z-alert); }
.how .how__tray {
  bottom: 12px;
  padding: 10px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 14px 30px -10px rgb(13 34 64 / 0.3);
  transform-origin: 50% 100%;
  scale: var(--z-tray-off);
}
.how .how__card.is-active .how__tray { scale: var(--z-tray); }

/* Wide row: the alert sits a little higher and the tray a little lower, so the open card's tray
   clears the alert's hint; a narrow card's Windows app is lifted off the bottom edge and settles there as it opens */
@media (min-width: 1024px) {
  .how .how__alert { top: 8px; }
  .how .how__tray { bottom: 4px; }
  .how .how__app { transition: scale var(--open), translate var(--open); }
  .how .how__card:not(.is-active) .how__app { translate: -50% -44px; }
}
.how .how__tray .ui-code { position: relative; }
.how .how__tray .ui-code b { font-weight: inherit; }
.how .how__caret {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 48px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #0071e3, 0 0 0 4px rgb(0 113 227 / 0.25);
  opacity: 0;
  pointer-events: none;
}

/* ---------- Illustration motion: plays once when a card opens in view ----------
   Without .is-play every mock shows its finished, still state. */
.how .how__art:is(.is-play, .is-armed) .how__glyph::before { animation: how-in 160ms linear 120ms both; }
.how .how__art:is(.is-play, .is-armed) .how__menu { animation: how-drop 320ms var(--ease-out) 180ms both; }
.how .how__art:is(.is-play, .is-armed) .how__switch::before { animation: how-in 300ms var(--ease) 1000ms both; }
.how .how__art:is(.is-play, .is-armed) .how__switch::after { animation: how-knob 300ms var(--ease) 1000ms both; }
.how .how__art:is(.is-play, .is-armed) .how__sub { animation: how-in 300ms var(--ease) 1060ms both; }
.how .how__art:is(.is-play, .is-armed) .how__perm .ui-menu__ok,
.how .how__art:is(.is-play, .is-armed) .how__perm .ui-menu__right { animation: how-pop 320ms var(--ease-out) 1500ms both; }
.how .how__art:is(.is-play, .is-armed) .how__perm + .how__perm .ui-menu__ok,
.how .how__art:is(.is-play, .is-armed) .how__perm + .how__perm .ui-menu__right { animation-delay: 1720ms; }

.how .how__art:is(.is-play, .is-armed) .ui-spin { animation: ui-spin 0.9s linear 5; }
.how .how__art:is(.is-play, .is-armed) .how__empty { animation: how-out 200ms linear 1300ms both; }
.how .how__art:is(.is-play, .is-armed) .how__found { animation: how-rise 460ms var(--ease-out) 1500ms both; }
.how .how__art:is(.is-play, .is-armed) .how__tap { animation: how-tap 900ms var(--ease) 2400ms both; }
.how .how__art:is(.is-play, .is-armed) .how__pair { animation: how-press 280ms var(--ease) 2580ms both; }

.how .how__art:is(.is-play, .is-armed) .how__alert { animation: how-pop 360ms var(--ease-out) 100ms both; }
.how .how__art:is(.is-play, .is-armed) .how__tray { animation: how-rise 460ms var(--ease-out) 520ms both; }
.how .how__art:is(.is-play, .is-armed) .ui-code b { animation: how-type 160ms var(--ease-out) 1000ms both; }
.how .how__art:is(.is-play, .is-armed) .ui-code span:nth-child(2) b { animation-delay: 1230ms; }
.how .how__art:is(.is-play, .is-armed) .ui-code span:nth-child(3) b { animation-delay: 1460ms; }
.how .how__art:is(.is-play, .is-armed) .ui-code span:nth-child(5) b { animation-delay: 1690ms; }
.how .how__art:is(.is-play, .is-armed) .ui-code span:nth-child(6) b { animation-delay: 1920ms; }
.how .how__art:is(.is-play, .is-armed) .ui-code span:nth-child(7) b { animation-delay: 2150ms; }
.how .how__art:is(.is-play, .is-armed) .how__caret { animation: how-caret 1400ms linear 900ms both; }

.how .how__art.is-armed:not(.is-play) *,
.how .how__art.is-armed:not(.is-play) *::before,
.how .how__art.is-armed:not(.is-play) *::after { animation-play-state: paused; }
.how.is-paused .is-play,
.how.is-paused .is-play *,
.how.is-paused .is-play *::before,
.how.is-paused .is-play *::after { animation-play-state: paused !important; }

@keyframes how-in { from { opacity: 0; } }
@keyframes how-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes how-drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes how-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes how-pop { from { opacity: 0; transform: scale(0.94); } }
@keyframes how-type { from { opacity: 0; transform: translateY(4px); } }
@keyframes how-knob { from { transform: translateX(0); } to { transform: translateX(11px); } }
@keyframes how-press { 50% { transform: scale(0.93); } }
@keyframes how-tap {
  0% { opacity: 0; transform: scale(1.5); }
  30% { opacity: 1; transform: scale(1); }
  60% { opacity: 1; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.05); }
}
/* The caret jumps box to box as each digit lands, then leaves once all six are in */
@keyframes how-caret {
  0% { opacity: 0; transform: translateX(0); }
  5% { opacity: 1; transform: translateX(0); }
  7.1% { transform: translateX(0); }
  7.2% { transform: translateX(48px); }
  23.5% { transform: translateX(48px); }
  23.6% { transform: translateX(96px); }
  40% { transform: translateX(96px); }
  40.1% { transform: translateX(162px); }
  56.4% { transform: translateX(162px); }
  56.5% { transform: translateX(210px); }
  72.8% { transform: translateX(210px); }
  72.9% { transform: translateX(258px); }
  89% { opacity: 1; transform: translateX(258px); }
  100% { opacity: 0; transform: translateX(258px); }
}

/* ---------- Small desktop, 1024–1279 ---------- */
@media (max-width: 1279px) {
  .how {
    --z-menu: 1;     --z-menu-off: 0.7;
    --z-app: 0.92;   --z-app-off: 0.56;
    --z-alert: 0.64; --z-alert-off: 0.56;
    --z-tray: 0.72;  --z-tray-off: 0.64;
  }
  .how .how__row {
    --card-h: 548px;
    --pad: 24px;
    --art-h: 214px;
  }
}
@media (max-width: 1151px) {
  .how {
    --z-menu: 0.92;  --z-menu-off: 0.6;
    --z-app: 0.8;    --z-app-off: 0.48;
    --z-alert: 0.6;  --z-alert-off: 0.5;
    --z-tray: 0.72;  --z-tray-off: 0.55;
  }
  .how .how__row { --card-h: 568px; }
}

/* ---------- Tablet and phone: every card open, stacked ---------- */
@media (max-width: 1023px) {
  .how .how__row {
    flex-direction: column;
    --pad: 32px;
  }
  .how .how__card,
  .how .how__card.is-active {
    flex: none;
    height: auto;
    cursor: auto;
  }
  .how .how__card::before { display: none; }
  .how .how__card:not(:last-child)::after {
    left: 48px; top: 100%;
    width: 40px; height: var(--gap);
    -webkit-mask:
      radial-gradient(circle at 0 50%, #0000 var(--r), #000 calc(var(--r) + 0.5px)) left / 50% 100% no-repeat,
      radial-gradient(circle at 100% 50%, #0000 var(--r), #000 calc(var(--r) + 0.5px)) right / 50% 100% no-repeat;
    mask:
      radial-gradient(circle at 0 50%, #0000 var(--r), #000 calc(var(--r) + 0.5px)) left / 50% 100% no-repeat,
      radial-gradient(circle at 100% 50%, #0000 var(--r), #000 calc(var(--r) + 0.5px)) right / 50% 100% no-repeat;
  }
  .how .how__num::before { opacity: 1; }
  .how .how__card .how__list { opacity: 1; transition: none; }
  .how .how__card .how__list li { transform: none; transition: none; }

  /* Text on the left, the mock-up window on the right */
  .how .how__clip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--gap-xl);
  }
  .how .how__text { grid-column: 1; grid-row: 1; }
  .how .how__list { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: var(--pad); }
  .how .how__art {
    position: relative; inset: auto;
    grid-column: 2; grid-row: 1 / span 2;
    height: auto; min-height: 260px;
    container: how-art / inline-size;
  }

  /* Every card is open: mock-ups scale to the window they sit in */
  .how .how__row .how__card .how__glyph { translate: calc(-150px * var(--zm, 1)) 0; }
  .how .how__row .how__card .how__menu { scale: var(--zm, 1); }
  .how .how__row .how__card .how__app { scale: var(--za, 1); }
  .how .how__row .how__card .how__alert { scale: var(--zl, 0.66); }
  .how .how__row .how__card .how__tray { scale: var(--zt, 0.8); }
  /* the tray sits over the alert's lower part (hint and Cancel), whatever the window height */
  .how .how__tray { top: calc(16px + 240px * var(--zl, 0.66)); bottom: auto; transform-origin: 50% 0; }
  @container how-art (max-width: 419px) {
    .how .how__bar, .how .how__menu, .how .how__app, .how .how__alert, .how .how__tray { --zm: 0.92; --za: 0.84; --zl: 0.62; --zt: 0.76; }
  }
  @container how-art (max-width: 339px) {
    .how .how__bar, .how .how__menu, .how .how__app, .how .how__alert, .how .how__tray { --zm: 0.84; --za: 0.72; --zl: 0.58; --zt: 0.7; }
  }
  @container how-art (max-width: 279px) {
    .how .how__bar, .how .how__menu, .how .how__app, .how .how__alert, .how .how__tray { --zm: 0.78; --za: 0.66; --zl: 0.54; --zt: 0.64; }
  }
}

/* Tablet: the window spans both grid rows, so the Windows app sits in its middle, like the Mac mock-ups up top */
@media (max-width: 1023px) and (min-width: 768px) {
  .how .how__app { top: 50%; bottom: auto; translate: -50% -50%; transform-origin: 50% 50%; }
}

@media (max-width: 767px) {
  .how .how__row { --pad: 24px; }
  .how .how__clip { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .how .how__text, .how .how__list, .how .how__art { grid-column: 1; grid-row: auto; }
  .how .how__list { margin-bottom: 0; }
  .how .how__art { height: 232px; min-height: 0; margin-top: var(--gap-lg); }
  .how .how__card:not(:last-child)::after { left: 40px; }
}

@media (max-width: 576px) {
  .how .how__row { --pad: 20px; }
}

/* Windows contrast themes: plain bordered cards, every checklist shown, no decorative mock-ups */
@media (forced-colors: active) {
  .how .how__card { border: 1px solid CanvasText; }
  .how .how__card:not(:last-child)::after, .how .how__art { display: none; }
  .how .how__clip { padding-bottom: var(--pad); }
  .how .how__list { opacity: 1; margin-bottom: 0; }
  .how .how__list li { transform: none; }
}

/* ========== features ========== */
/* Features: an intro with two joined cards, then four switchbacks (text column + 580px media square).
   The media square holds a 580 x 580 "stage" that is zoomed to the square's real width (--s, set by section.js),
   so every composition keeps its proportions at every width. */

/* ---------- Intro ---------- */
.features-intro { padding-bottom: var(--sec-medium); }
.features-intro .fi-vs {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-lg);
  max-width: 1200px; margin: var(--gap-3xl) auto 0;
}
.features-intro .fi-card { padding: 32px; border-radius: var(--r-card); }
.features-intro .fi-card__list { margin-top: var(--gap-lg); gap: var(--gap-md); font-size: var(--fs-lg); }
.features-intro .fi-card__list li::before { top: calc((1.4em - 20px) / 2); }
.features-intro .fi-card--with .fi-card__list li { color: var(--midnight); }
/* The bridge: a linen neck joins the two cards at mid-height */
.features-intro .fi-neck {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--gap-lg) + 2px); height: 44px;
  transform: translate(-50%, -50%);
  background: var(--linen);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 11.5px, #000 12px) top / 100% 50% no-repeat,
                radial-gradient(circle at 50% 100%, transparent 11.5px, #000 12px) bottom / 100% 50% no-repeat;
  mask: radial-gradient(circle at 50% 0, transparent 11.5px, #000 12px) top / 100% 50% no-repeat,
        radial-gradient(circle at 50% 100%, transparent 11.5px, #000 12px) bottom / 100% 50% no-repeat;
}
@media (max-width: 1023px) {
  .features-intro .fi-card { padding: 24px; }
}
@media (max-width: 767px) {
  .features-intro .fi-vs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Stacked: the neck turns upright and sits in the 20px gap between the cards */
  .features-intro .fi-neck {
    position: relative; left: auto; top: auto; transform: none;
    justify-self: center; margin: -1px 0;
    width: 44px; height: 22px;
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 10.5px, #000 11px) left / 50% 100% no-repeat,
                  radial-gradient(circle at 100% 50%, transparent 10.5px, #000 11px) right / 50% 100% no-repeat;
    mask: radial-gradient(circle at 0 50%, transparent 10.5px, #000 11px) left / 50% 100% no-repeat,
          radial-gradient(circle at 100% 50%, transparent 10.5px, #000 11px) right / 50% 100% no-repeat;
  }
}

/* ---------- Switchback rows ---------- */
.feature .fx-row {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 580px);
  justify-content: center; align-items: stretch;
  gap: var(--gap-3xl);
}
.feature--flip .fx-row { grid-template-columns: minmax(0, 580px) minmax(0, 540px); }
.feature--flip .fx-media { order: -1; }
/* Wide screens: the row stays on screen while the scroll opens its items (site.js adds .is-scroll and the extra height) */
.feature.is-scroll > .container { position: sticky; top: var(--fx-top, 120px); }

.feature .fx-text {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-2xl);
  min-width: 0;
}
.feature .fx-head { display: flex; flex-direction: column; align-items: flex-start; }
/* The headings use the display sans, like the page's other headings. The reference uses a serif here:
   remove the font-family line to go back to Newsreader. */
.feature .fx-title {
  margin-top: var(--gap-md); max-width: 540px;
  font-family: var(--font-display);
}

/* ---------- Accordion ---------- */
.feature .fx-acc { position: relative; }
/* One continuous 2px track; each item's fill rides on top of it */
.feature .fx-acc::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  border-radius: 1px; background: var(--ink-20);
}
.feature .fx-item { position: relative; transition: transform 420ms var(--ease); }
.feature .fx-item__h { margin: 0; font: inherit; }
.feature .fx-item__btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 24px 0 24px 24px; margin: 0;
  border: 0; background: none; color: var(--midnight); text-align: left; cursor: pointer;
  opacity: 0.62;            /* idle; 62% keeps the label above 4.5:1 on the cream canvas */
  transition: opacity var(--t-fast) var(--ease);
}
.feature .fx-item__btn:hover,
.feature .fx-item__btn:focus-visible,
.feature .fx-item.is-open .fx-item__btn { opacity: 1; }
/* The 12px title-to-description gap lives in the open button, so its focus ring has room below the title */
.feature .fx-item.is-open .fx-item__btn { padding-bottom: 12px; cursor: default; }
.feature .fx-item__btn:focus-visible { outline-offset: -2px; border-radius: var(--r-ctl); }
.feature .fx-item__btn .t-h6 { min-width: 0; }
/* Closed panels stay laid out (out of flow, invisible) so section.js can measure the tallest one */
.feature .fx-item__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 0 0 24px 60px;
  visibility: hidden; opacity: 0; pointer-events: none;
}
.feature .fx-item.is-open .fx-item__panel {
  position: relative; top: auto;
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity 360ms var(--ease-out) 260ms;
}
.feature .fx-item.is-open .fx-item__panel p { min-height: var(--fx-desc, 0px); }

/* Progress: the open item's track fills like a timer */
.feature .fx-item__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  border-radius: 1px; background: var(--fx-fill, var(--accent));
  transform: scaleY(0); transform-origin: 50% 0;
  pointer-events: none;
}
.feature .fx-item.is-open .fx-item__fill { transform: none; }            /* still state (no auto-advance) */
.feature .fx-acc.is-auto .fx-item.is-open .fx-item__fill {
  transform: scaleY(0);
  animation: features-fill 6s linear forwards;
}
.feature .fx-acc.is-auto.is-hold .fx-item.is-open .fx-item__fill { animation-play-state: paused; }
@keyframes features-fill {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
/* Lime is too pale against the track: a deeper lime from the same family */
.feature.acc-private { --fx-fill: #a9cb45; }

/* ---------- Media square ---------- */
.feature .fx-media {
  --s: 1;
  align-self: center;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--r-panel);
}
.feature .fx-stage {
  position: absolute; left: 0; top: 0;
  width: 580px; height: 580px;
  zoom: var(--s);
}

/* Crisp white card with an inner radius and a translucent white ring */
.feature .fx-card {
  position: absolute; left: 40px; top: 121px; width: 500px;
  padding: 8px; border-radius: var(--r-card); background: var(--white);
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.4), 0 28px 56px -24px rgb(11 53 88 / 0.28);
}
.feature .fx-shot {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 3 / 2;
  border-radius: calc(var(--r-card) - 8px);
  background: var(--ash);
}
.feature .fx-shot img,
.feature .fx-shot video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.feature .fx-pos-pen { object-position: 82% 50%; }
.feature .fx-pos-touch { object-position: 88% 50%; }
.feature .fx-pos-second { object-position: 62% 50%; }

/* Layers cross-fade (300ms); a layer is shown for the items listed in its data-on */
.feature .fx-layer {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
}
.feature .fx-layer.is-on {
  opacity: 1; visibility: visible;
  transition: opacity var(--t-mid) var(--ease), visibility 0s;
}
/* Floating overlays also rise into place, a beat after the cross-fade */
.feature .fx-float {
  inset: auto;
  transform: translateY(10px) scale(0.97);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
}
.feature .fx-float.is-on {
  transform: none;
  transition: opacity 400ms var(--ease-out) 140ms, transform 500ms var(--ease-out) 140ms, visibility 0s;
}
.feature .fx-center { display: grid; place-items: center; }

/* Pen, Draw mode: the toolbar in a white tray, joined to the card by a neck */
.feature .fx-tray {
  left: 0; right: 0; top: 59px; width: fit-content; margin-inline: auto;
  padding: 6px; border-radius: 24px; background: var(--white);
}
.feature .fx-tray__zoom { zoom: 0.6; }
.feature .fx-tray .ui-glass { background: rgb(24 24 28 / 0.92); }
.feature .fx-neck { left: 50%; top: 100%; margin-left: -16px; }
.feature .fx-draw { overflow: visible; }
.feature .fx-tap {
  left: 50%; top: 18px; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-color: #fff; opacity: 0; transform: scale(1.6);
}
.feature .fx-tray.is-on .fx-tap { animation: features-tap 600ms var(--ease-out) 650ms 1 both; }
@keyframes features-tap {
  0% { opacity: 0; transform: scale(1.6); }
  35% { opacity: 1; transform: scale(1); }
  55% { opacity: 1; transform: scale(0.86); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* Second screen, windows come back: the PC's Bring back card over the photo's top */
.feature .fx-bring { left: 0; right: 0; top: 100px; width: fit-content; margin-inline: auto; }
.feature .fx-bring .ui-card { zoom: 0.92; background: rgb(24 24 28 / 0.84); }

/* Private: the Mac's own alert and menu, framed by a translucent ring */
.feature .fx-ring {
  padding: 8px; background: rgb(255 255 255 / 0.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.feature .fx-ring--alert { border-radius: 26px; }
.feature .fx-ring--alert .ui-alert { zoom: 1.2; }
.feature .fx-ring--menu { border-radius: 18px; }
.feature .fx-ring--menu .ui-menu { zoom: 1.3; }
.feature .fx-menu { left: 0; right: 0; width: fit-content; margin-inline: auto; }
/* Each menu is centred in the 580px stage */
.feature .fx-menu--short { top: 204px; }   /* 174px tall */
.feature .fx-menu--full { top: 152px; }    /* 272px tall */
.feature .fx-chip--tls { right: 40px; top: 70px; }
.feature .fx-chip--acct { left: 40px; bottom: 70px; }
/* Allow remote access switches on: the blue fades in and the knob slides (transform/opacity only) */
.feature .fx-switch i {
  position: absolute; inset: 0; border-radius: inherit; background: #007aff;
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
}
.feature .fx-switch::after { z-index: 1; }
.feature .fx-menu.is-on .fx-switch i { opacity: 1; transition-delay: 750ms; }
.feature .fx-menu.is-on .fx-switch::after { transform: translateX(11px); transition-delay: 750ms; }

/* Pause / play for the auto-advance and the loops */
.feature .fx-pause {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid rgb(255 255 255 / 0.7); border-radius: var(--r-ctl);
  background: rgb(255 255 255 / 0.72); color: var(--midnight);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.feature .fx-pause:hover { background: var(--white); }
.feature .fx-pause[hidden] { display: none; }
.feature .fx-pause .i { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- Small desktop (1024-1279): both columns shrink together; the square's top meets the chip ---------- */
@media (max-width: 1279px) {
  .feature .fx-row { gap: var(--gap-2xl); }
  .feature .fx-media { align-self: start; }
}

/* ---------- Below 768: one column on the container's left edge (from 768 up the two columns share the width equally).
   Header, then the media square, then the accordion, so each picture stays next to the list that drives it ---------- */
@media (max-width: 767px) {
  .feature .fx-row,
  .feature--flip .fx-row { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--gap-2xl); }
  .feature .fx-text { display: contents; }
  .feature .fx-head { order: 0; }
  .feature .fx-media,
  .feature--flip .fx-media { order: 1; max-width: 580px; }
  .feature .fx-acc { order: 2; width: 100%; max-width: 640px; }
}
/* The stage is zoomed as a whole, so the chips keep their full-size proportions inside it */
.feature .fx-stage .status-chip { height: 56px; gap: 10px; padding: 0 12px; font-size: 36px; }
.feature .fx-stage .status-chip .tile-icon { width: 32px; height: 32px; border-radius: 8px; }

@media (max-width: 767px) {
  .feature .fx-item__btn { padding: 16px 0 16px 20px; }   /* the open one keeps its 12px bottom (rule above) */
  .feature .fx-item__panel { padding: 0 0 16px 56px; }
  .feature .fx-pause { right: 12px; bottom: 12px; width: 44px; height: 44px; }
}

@media (forced-colors: active) {
  .feature .fx-item__fill, .feature .fx-acc::before { forced-color-adjust: none; background: CanvasText; }
  .feature .fx-pause { border: 1px solid CanvasText; }
}

/* ========== stories ========== */
/* Ways to use it: a full-bleed gradient band with a use-case carousel.
   The focused card and its neighbouring photo pills are one track; each slide's outline is drawn by four
   nested clip windows (one rounded corner each) moved with transforms, so a pill can open into the card
   and the card can close into a pill without animating width or height. */
.stories {
  --stories-lip: 32px;
  --stories-top: calc(var(--sec-default) + var(--stories-lip));
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--stories-top) var(--sec-default);
}
/* The cream canvas above ends in a rounded lip over the band */
.stories::before {
  content: "";
  position: absolute; z-index: 1; left: 0; right: 0; top: 0;
  height: var(--stories-lip);
  border-radius: 0 0 32px 32px; corner-shape: round;
  background: var(--magnolia);
  pointer-events: none;
}
.stories .stories__bg { position: absolute; inset: 0; z-index: -1; }
.stories .stories__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
}
/* A soft ink veil at the top keeps the white heading readable on the lighter parts of the gradient */
.stories .stories__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(7 26 49 / 0.42) 0%, rgb(7 26 49 / 0.36) 22%, rgb(7 26 49 / 0.16) 40%, rgb(7 26 49 / 0) 58%);
}
.stories .shead__title { max-width: 720px; }
.works .shead__sub { text-wrap: balance; }

/* ---------- Carousel ---------- */
.stories .stories__carousel { margin-top: var(--gap-4xl); }
.stories .stories__stage { position: relative; }

/* Shared card layout (used without JavaScript and by the live carousel) */
.stories .story__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  padding: 16px;
  background: var(--white);
  color: var(--midnight);
}
.stories .story__text {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 28px 16px 24px;
}
.stories .story__quote { margin-top: var(--gap-md); }
.stories .story__chip { margin-top: auto; padding-top: var(--gap-lg); }
.stories .story__photo {
  position: relative; overflow: hidden;
  min-height: 0;
  border-radius: var(--r-photo);
  background: var(--ash);
}
.stories .story__photo picture { position: absolute; inset: 0; }
.stories .story__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--fx, 50%) 50%;
}
.stories .story__frame,
.stories .story__neck { display: none; }

/* Without JavaScript: a simple row of cards that scrolls sideways */
html:not(.has-js) .stories .stories__carousel .stories__track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(24px, (100% - 762px) / 2);
}
html:not(.has-js) .stories .stories__carousel .stories__track::-webkit-scrollbar { display: none; }
html:not(.has-js) .stories .stories__carousel .story { flex: 0 0 min(762px, 100vw - 48px); scroll-snap-align: center; }
html:not(.has-js) .stories .stories__carousel .story__win { display: contents; }
html:not(.has-js) .stories .stories__carousel .story__body { min-height: 513px; border-radius: var(--r-panel); }

/* ---------- Live carousel ---------- */
/* Keyed on .has-js (set in <head>), not on the script's .is-live, so the layout does not switch when site.js arrives */
.has-js .stories .stories__carousel .stories__stage {
  height: var(--ch, 513px);
  touch-action: pan-y;
}
.has-js .stories .stories__carousel .stories__track { position: absolute; inset: 0; }
.has-js .stories .stories__carousel .story {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  opacity: 0;
}
.has-js .stories .stories__carousel .story.is-shown { opacity: 1; }
.has-js .stories .stories__carousel .story__win {
  position: absolute; left: 0; top: 0;
  width: var(--big, 1000px); height: var(--big, 1000px);
  overflow: hidden;
  pointer-events: none; /* the square windows reach below the card; only the clipped card itself takes clicks */
}
.has-js .stories .stories__carousel .story.is-shown .story__body { pointer-events: auto; }
.has-js .stories .stories__carousel .story__win--tl { border-top-left-radius: var(--r-panel); }
.has-js .stories .stories__carousel .story__win--tr { border-top-right-radius: var(--r-panel); }
.has-js .stories .stories__carousel .story__win--br { border-bottom-right-radius: var(--r-panel); }
.has-js .stories .stories__carousel .story__win--bl { border-bottom-left-radius: var(--r-panel); }
.has-js .stories .stories__carousel .story__body {
  position: absolute; left: 0; top: 0;
  width: var(--cw, 762px); height: var(--ch, 513px);
}
.stories .stories__carousel.is-measuring .story__body { height: auto; }
.has-js .stories .stories__carousel .story__photo,
.has-js .stories .stories__carousel .story__frame--r { transform-origin: 0 0; }

/* Text shows on the focused card only; pills are photo-only */
.has-js .stories .stories__carousel .story__text { opacity: 0; }
.has-js .stories .stories__carousel .story.is-card .story__text { opacity: 1; }

/* A white ring (16px, like the card's padding; 8px on narrow pills) around the photo, in two halves that ride
   the window's left and right edges. On the card it lies on the card's own white padding, so only pills show it. */
.has-js .stories .stories__carousel .story__frame {
  display: block;
  position: absolute; left: 0; top: 0;
  width: var(--big, 1000px); height: var(--ch, 513px);
  border: var(--ring, 16px) solid var(--white); border-right-width: 0;
  border-radius: calc(var(--r-photo) + var(--ring, 16px)) 0 0 calc(var(--r-photo) + var(--ring, 16px));
  pointer-events: none;
}
.has-js .stories .stories__carousel .story__frame--r {
  border-right-width: var(--ring, 16px); border-left-width: 0;
  border-radius: 0 calc(var(--r-photo) + var(--ring, 16px)) calc(var(--r-photo) + var(--ring, 16px)) 0;
}
.has-js .stories .stories__carousel .story.is-pill .story__win--tl { cursor: pointer; }

/* White neck joining a slide to the next one (a horizontal bridge with curved sides) */
.has-js .stories .stories__carousel .story__neck {
  display: block;
  position: absolute; left: 0; top: calc(var(--ch, 513px) / 2 - 24px);
  width: var(--gap, 24px); height: 48px;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 0, #0000 calc(var(--gap, 24px) / 2), #000 calc(var(--gap, 24px) / 2 + 0.5px)) top / 100% 50% no-repeat,
                radial-gradient(circle at 50% 100%, #0000 calc(var(--gap, 24px) / 2), #000 calc(var(--gap, 24px) / 2 + 0.5px)) bottom / 100% 50% no-repeat;
  mask: radial-gradient(circle at 50% 0, #0000 calc(var(--gap, 24px) / 2), #000 calc(var(--gap, 24px) / 2 + 0.5px)) top / 100% 50% no-repeat,
        radial-gradient(circle at 50% 100%, #0000 calc(var(--gap, 24px) / 2), #000 calc(var(--gap, 24px) / 2 + 0.5px)) bottom / 100% 50% no-repeat;
}
.has-js .stories .stories__carousel .story__neck.is-shown { opacity: 1; }

/* Motion: 500 ms ease-in-out on transforms; text and frames cross-fade around it */
.stories .stories__track.is-anim { transition: transform var(--t-slow) var(--ease-io); }
.stories .stories__track.is-anim .story { transition: opacity 400ms var(--ease); }
.stories .stories__track.is-anim .story__win,
.stories .stories__track.is-anim .story__photo,
.stories .stories__track.is-anim .story__frame--r,
.stories .stories__track.is-anim .story__neck { transition: transform var(--t-slow) var(--ease-io), opacity 300ms var(--ease); }
.stories .stories__track.is-anim .story__text { transition: opacity 150ms var(--ease), transform var(--t-slow) var(--ease-io); }
.stories .stories__track.is-anim .story.is-card .story__text { transition: opacity 350ms var(--ease) 150ms, transform var(--t-slow) var(--ease-io); }
.stories .stories__track.is-dragging { transition: none; }
.stories .stories__track .no-anim,
.stories .stories__track .no-anim * { transition: none !important; }

/* ---------- Controls: pause, progress bars, previous / next ---------- */
.stories .stories__controls {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  width: min(var(--cw, 762px), 100% - 48px);
  margin: 40px auto 0;
}
.stories .stories__controls[hidden] { display: none; }
.stories .stories__nav { grid-column: 3; display: flex; gap: 8px; justify-self: end; }
.stories .stories__toggle { grid-column: 1; justify-self: start; }
.stories .stories__btn {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--ink-5); border-radius: var(--r-ctl);
  background: var(--ink-5); color: var(--midnight);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.stories .stories__btn:hover { background: var(--ink-10); }
.stories .stories__btn .i { width: 20px; height: 20px; }
.stories .stories__btn[hidden] { display: none; }
.stories .stories__toggle .i-play { display: none; fill: currentColor; stroke-width: 1.5; }
.stories .stories__toggle.is-stopped .i-pause { display: none; }
.stories .stories__toggle.is-stopped .i-play { display: block; }
.stories .stories__prev .i { transition: transform var(--t-fast) var(--ease); }
.stories .stories__next .i { transition: transform var(--t-fast) var(--ease); }
.stories .stories__prev:hover .i { transform: translateX(-2px); }
.stories .stories__next:hover .i { transform: translateX(2px); }

.stories .stories__dots { grid-column: 2; display: flex; align-items: center; justify-content: center; }
.stories .stories__dot {
  display: grid; place-items: center;
  width: 24px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-xs); background: none;
  cursor: pointer;
}
.stories .stories__dot.is-on { width: 80px; cursor: default; }
.stories .stories__bar {
  position: relative; display: block; overflow: hidden;
  width: 8px; height: 8px; border-radius: 3px;
  background: rgb(7 26 49 / 0.55);
  transition: background-color var(--t-fast) var(--ease);
}
.stories .stories__dot:hover .stories__bar { background: rgb(7 26 49 / 0.7); }
.stories .stories__dot.is-on .stories__bar { width: 68px; background: var(--ink-10); }
.stories .stories__fill {
  position: absolute; inset: 0;
  background: var(--blue);
  transform: scaleX(0); transform-origin: 0 50%;
}
.stories .stories__dot.is-timing .stories__fill { animation: stories-fill 4s linear forwards; }
.stories .stories__carousel.is-held .stories__dot.is-timing .stories__fill { animation-play-state: paused; }
.stories .stories__dot.is-full .stories__fill { transform: none; }
@keyframes stories-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------- Tiers ---------- */
@media (max-width: 1023px) {
  .stories .story__body { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
  .stories .story__text { padding: 16px 20px 12px 16px; }
}
@media (max-width: 767px) {
  .stories .stories__bg::after {
    background: linear-gradient(180deg, rgb(7 26 49 / 0.44) 0%, rgb(7 26 49 / 0.38) 16%, rgb(7 26 49 / 0.12) 30%, rgb(7 26 49 / 0) 40%);
  }
  .stories .story__body { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .has-js .stories .stories__carousel .story__frame { display: none; }
  .stories .story__photo { order: -1; aspect-ratio: 4 / 3; }
  .stories .story__text { padding: 20px 8px 8px; }
  .stories .story__chip { padding-top: var(--gap-xl); }
  html:not(.has-js) .stories .stories__carousel .story__body { min-height: 0; }
  .stories .stories__controls { margin-top: 24px; gap: 8px; }
  .stories .stories__btn { width: 44px; height: 44px; }
  .stories .stories__dot { height: 44px; }
}
/* Below 432 px the full bar would push the dots off centre (24 px dots keep their targets apart) */
@media (max-width: 431px) {
  .stories .stories__dot.is-on { width: 44px; }
  .stories .stories__dot.is-on .stories__bar { width: 36px; }
}

/* ========== Works with ========== */
.works {
  --tile: 112px;
  --tgap: 24px;
  --row: calc(6 * var(--tile) + 5 * var(--tgap));
}
.works .works__tiles {
  display: grid;
  grid-template-columns: repeat(6, var(--tile));
  gap: var(--tgap);
  justify-content: center;
  margin-top: var(--gap-4xl);
}
.works .works__tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 1;
  padding: 12px 8px;
  border-radius: 24px;
  background: var(--linen);
  text-align: center;
  transition: transform 200ms var(--ease-io);
}
@media (hover: hover) {
  .works .works__tile:hover { z-index: 1; transform: scale(1.05); }
}
/* Linen neck to the next tile in the row */
.works .works__tile::after {
  content: "";
  position: absolute; left: 100%; top: 50%;
  width: var(--tgap); height: 48px; margin-top: -24px;
  background: var(--linen);
  -webkit-mask: radial-gradient(circle at 50% 0, #0000 calc(var(--tgap) / 2), #000 calc(var(--tgap) / 2 + 0.5px)) top / 100% 50% no-repeat,
                radial-gradient(circle at 50% 100%, #0000 calc(var(--tgap) / 2), #000 calc(var(--tgap) / 2 + 0.5px)) bottom / 100% 50% no-repeat;
  mask: radial-gradient(circle at 50% 0, #0000 calc(var(--tgap) / 2), #000 calc(var(--tgap) / 2 + 0.5px)) top / 100% 50% no-repeat,
        radial-gradient(circle at 50% 100%, #0000 calc(var(--tgap) / 2), #000 calc(var(--tgap) / 2 + 0.5px)) bottom / 100% 50% no-repeat;
}
.works .works__tile:nth-child(6n)::after,
.works .works__tile:last-child::after { display: none; }
.works .works__icon { width: 40px; height: 40px; stroke-width: 1.25; color: var(--midnight); }
.works .works__label {
  min-height: 2.5em; /* room for two lines, so every icon sits at the same height */
  font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--midnight);
  text-wrap: balance;
}
/* A tab on the tile's top-right edge, clear of the icon */
.works .works__beta {
  position: absolute; top: -8px; right: -6px;
  padding: 4px 6px;
  border-radius: var(--r-xs);
  background: var(--white);
  box-shadow: var(--shadow-ui-sm);
  color: var(--n700);
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.2px;
}

/* Suite cards */
.works .works__cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  max-width: var(--row);
  margin: var(--gap-2xl) auto 0;
}
.works .works__card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 182px;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--linen);
}
.works .works__card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transition: opacity 200ms var(--ease-io);
  pointer-events: none;
}
@media (hover: hover) {
  .works .works__card:hover::after { opacity: 1; }
  .works .works__card:hover .works__card-link { background: var(--ink-10); }
  .works .works__card:hover .works__card-link .i-ur { transform: translate(2px, -2px); }
}
.works .works__card-top {
  display: flex; align-items: center; justify-content: space-between; align-self: stretch;
  margin-bottom: var(--gap-md);
}
/* The arrow button's hit area covers the whole card */
.works .works__card-link::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.works .works__card-link:focus-visible { outline-offset: 3px; }
.works .works__card-title { margin-bottom: var(--gap-sm); }

@media (max-width: 1023px) {
  .works { --tile: 96px; --tgap: 20px; }
}
@media (max-width: 767px) {
  .works { --tgap: 16px; }
  .works .works__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 360px; margin-inline: auto;
  }
  .works .works__tile { padding: 10px 6px; gap: 6px; }
  .works .works__tile:nth-child(6n)::after { display: block; }
  .works .works__tile:nth-child(3n)::after,
  .works .works__tile:last-child::after { display: none; }
  .works .works__icon { width: 36px; height: 36px; }
  .works .works__cards { grid-template-columns: minmax(0, 1fr); max-width: 360px; gap: 16px; }
  .works .works__card { min-height: 0; }
}
/* 577-767: four tiles a row and the two cards side by side, as wide as the blocks around them */
@media (min-width: 577px) and (max-width: 767px) {
  .works .works__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 528px; }
  .works .works__tile:nth-child(3n)::after { display: block; }
  .works .works__tile:nth-child(4n)::after,
  .works .works__tile:last-child::after { display: none; }
  .works .works__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 528px; }
}

/* ========== info ========== */
/* info: Compare table, Pricing card, FAQ. Every selector is scoped under .compare, .pricing or .faq. */

/* ---------- Compare ---------- */
.compare .compare__card {
  position: relative;
  margin-top: var(--gap-3xl);
  padding: 16px 24px;
  border-radius: var(--r-panel);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--ink-5), var(--shadow-ui-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.compare .compare__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
.compare .compare__table thead tr > :first-child { width: 26%; }
.compare .compare__table th,
.compare .compare__table td {
  padding: 22px 24px;
  border-bottom: 1px solid var(--ink-10);
  vertical-align: top;
  font-size: var(--fs-md);
  line-height: 1.4;
  text-align: left;
  text-wrap: balance;
}
.compare .compare__table thead th,
.compare .compare__table thead td {
  padding-top: 28px;
  padding-bottom: 22px;
  vertical-align: middle;
}
.compare .compare__table thead th {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--midnight);
}
.compare .compare__table tbody th { font-weight: 500; color: var(--midnight); }
.compare .compare__table tbody td { color: var(--steel); }
.compare .compare__table tbody tr:last-child > * { border-bottom: 0; padding-bottom: 28px; }

/* The Penwing column: one soft blue band from the header to the last row */
.compare .compare__table .is-us {
  background: var(--rain);
  border-bottom-color: rgb(0 113 227 / 0.1);
  color: var(--midnight);
  font-weight: 500;
}
.compare .compare__table thead .is-us { border-radius: var(--r-photo) var(--r-photo) 0 0; }
.compare .compare__table tbody tr:last-child .is-us { border-radius: 0 0 var(--r-photo) var(--r-photo); }
.compare .compare__brand { display: inline-flex; align-items: center; gap: 10px; }
.compare .compare__brand img { width: 28px; height: 28px; flex: none; }

.compare .compare__note {
  max-width: 640px;
  margin: var(--gap-lg) auto 0;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 1279px) {
  .compare .compare__card { padding: 16px; }
  .compare .compare__table th,
  .compare .compare__table td { padding-inline: 18px; }
}

/* From 768 to 1023px the table fits the card; below 768px the card scrolls sideways inside itself and the row labels stay put */
@media (max-width: 1023px) {
  .compare .compare__card {
    padding: 8px 0;
    /* A soft edge on the right while there is more to see; it slides away at the end */
    background:
      linear-gradient(to left, var(--white) 45%, rgb(255 255 255 / 0)) 100% 0 / 48px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgb(7 26 49 / 0.22), rgb(7 26 49 / 0)) 100% 0 / 24px 100% no-repeat scroll,
      var(--white);
  }
  .compare .compare__table { width: 100%; }
  .compare .compare__table thead tr > :first-child { width: 152px; }
  .compare .compare__table th,
  .compare .compare__table td { padding: 20px 12px; }
  .compare .compare__table thead th,
  .compare .compare__table thead td { padding-top: 24px; padding-bottom: 20px; }
  .compare .compare__table tbody tr:last-child > * { padding-bottom: 24px; }
  .compare .compare__table tr > :first-child {
    position: sticky; left: 0; z-index: 1;
    padding-left: 16px;
    background: var(--white);
    box-shadow: inset -1px 0 0 var(--ink-10);
  }
}
@media (max-width: 767px) {
  .compare .compare__table { width: 784px; }
  .compare .compare__table thead tr > :first-child { width: 144px; }
  .compare .compare__table th,
  .compare .compare__table td { padding: 16px 16px; }
  .compare .compare__table thead th,
  .compare .compare__table thead td { padding-top: 20px; padding-bottom: 16px; }
  .compare .compare__table tbody tr:last-child > * { padding-bottom: 20px; }
  .compare .compare__table tr > :first-child { padding-left: 16px; padding-right: 12px; }
  .compare .compare__brand { gap: 8px; }
  .compare .compare__brand img { width: 24px; height: 24px; }
}
/* Phones: narrower columns, so the next column shows clearly cut off at the edge */
@media (max-width: 576px) {
  .compare .compare__table { width: 672px; }
  .compare .compare__table thead tr > :first-child { width: 128px; }
  .compare .compare__table th,
  .compare .compare__table td { padding-inline: 14px; }
  .compare .compare__table tr > :first-child { padding-left: 16px; padding-right: 12px; }
}

/* ---------- Pricing ---------- */
.pricing .pricing__stage {
  display: grid;
  place-items: center;
  margin-top: var(--gap-3xl);
  padding: 96px 48px;
  /* clip, not hidden: still rounds the corners but is not a scroll container, so view() below follows the page */
  overflow: clip;
}
.pricing .pricing__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  /* One soft shadow under the whole white shape: tiles, necks and card */
  filter: drop-shadow(0 24px 40px rgb(11 53 88 / 0.14));
}
.pricing .pricing__card {
  flex: 0 1 720px;
  min-width: 0;
  padding: 48px;
  border-radius: var(--r-card);
  background: var(--white);
}
.pricing .pricing__chip { gap: 10px; line-height: 1.25; }
.pricing .pricing__chip img { width: 28px; height: 28px; flex: none; }
.pricing .pricing__soon { margin-top: var(--gap-lg); color: var(--midnight); }
.pricing .pricing__ticks {
  grid-template-columns: repeat(3, max-content);
  gap: 16px 40px;
  margin-top: var(--gap-xl);
  padding-top: var(--gap-xl);
  border-top: 1px solid var(--ink-10);
}
.pricing .pricing__ticks li { color: var(--midnight); }
/* "No subscription." keeps to one line, but may still wrap inside itself when it cannot fit (large text spacing on a 320px screen) */
#pricing-title .nowrap { display: inline-block; white-space: normal; }

/* App tiles for the Mac and the PC, joined to the card by white necks */
.pricing .pricing__tile {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: var(--r-card);
  background: var(--white);
}
.pricing .pricing__glyph {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-chip);
  background: var(--screen-soft);
  color: var(--midnight);
}
.pricing .pricing__glyph .i { width: 32px; height: 32px; stroke-width: 1.5; }
.pricing .pricing__neck {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 32px;
  margin-top: -16px;
  background: var(--white);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 7px, #000 7.5px) top / 100% 50% no-repeat,
                radial-gradient(circle at 50% 100%, transparent 7px, #000 7.5px) bottom / 100% 50% no-repeat;
  mask: radial-gradient(circle at 50% 0, transparent 7px, #000 7.5px) top / 100% 50% no-repeat,
        radial-gradient(circle at 50% 100%, transparent 7px, #000 7.5px) bottom / 100% 50% no-repeat;
}
.pricing .pricing__tile--mac .pricing__neck { left: 100%; }
.pricing .pricing__tile--win .pricing__neck { right: 100%; }

/* The gradient drifts a little as the window scrolls through view (scroll-linked, so it never moves on its own) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pricing .pricing__stage .mesh__bg {
      animation: pricing-drift auto linear both;
      animation-timeline: view();
    }
  }
}
@keyframes pricing-drift {
  from { transform: scale(1.2) translate3d(-4%, 3%, 0); }
  to { transform: scale(1.2) translate3d(4%, -3%, 0); }
}

@media (max-width: 1279px) {
  .pricing .pricing__stage { padding: 80px 40px; }
  .pricing .pricing__ticks { column-gap: 40px; }
  .pricing .pricing__card { flex-basis: 600px; padding: 40px; }
  .pricing .pricing__tile { width: 88px; height: 88px; }
  .pricing .pricing__glyph { width: 56px; height: 56px; }
  .pricing .pricing__glyph .i { width: 28px; height: 28px; }
}
@media (max-width: 1023px) {
  .pricing .pricing__stage { padding: 64px 40px; }
  .pricing .pricing__tile { display: none; }
}
@media (max-width: 767px) {
  .pricing .pricing__stage { padding: 40px 24px; }
  .pricing .pricing__card { padding: 28px 24px; }
  .pricing .pricing__chip img { width: 24px; height: 24px; }
  .pricing .pricing__ticks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 576px) {
  .pricing .pricing__stage { padding: 32px 16px; }
  .pricing .pricing__card { padding: 28px 20px; }
  .pricing .pricing__chip { gap: 8px; font-size: 15px; }
}

/* ---------- FAQ ---------- */
.faq { interpolate-size: allow-keywords; }
.faq .faq__list {
  max-width: 880px;
  margin: var(--gap-3xl) auto 0;
  border-bottom: 1px solid var(--ink-10);
}
.faq .faq__item { border-top: 1px solid var(--ink-10); }
.faq .faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  min-height: 44px;
  padding: 24px 0;
  border-radius: var(--r-xs);
  list-style: none;
  cursor: pointer;
  color: var(--midnight);
  transition: color var(--t-fast) var(--ease);
}
.faq .faq__q > .t-h6 { text-wrap: balance; }
.faq .faq__q::-webkit-details-marker { display: none; }
.faq .faq__q::marker { content: ""; }
.faq .faq__q:hover { color: var(--steel); }
.faq .faq__q:focus-visible { outline-offset: 4px; }
.faq .faq__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ink-5);
  border-radius: var(--r-xs);
  background: var(--ink-5);
  color: var(--midnight);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.faq .faq__icon .i { transition: transform var(--t-mid) var(--ease); }
.faq .faq__q:hover .faq__icon { background: var(--ink-10); }
.faq .faq__item[open] .faq__icon { border-color: var(--midnight); background: var(--midnight); color: var(--magnolia); }
.faq .faq__item[open] .faq__icon .i { transform: rotate(45deg); }
.faq .faq__a { padding: 0 56px 28px 0; }
.faq .faq__a p { max-width: 720px; }
.faq .faq__item[open] .faq__a { animation: faq-in var(--t-slow) var(--ease-out) both; }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
/* Smooth height where the browser can animate to auto; elsewhere, and with reduced motion, the answer simply appears.
   (The foundation's reduced-motion rule targets *, ::before and ::after, which never match ::details-content.) */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq .faq__item::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size var(--t-slow) var(--ease), content-visibility var(--t-slow) allow-discrete;
    }
    .faq .faq__item[open]::details-content { block-size: auto; }
  }
}

/* Wide screens: the heading stays beside the list while it scrolls */
@media (min-width: 1280px) {
  .faq .faq__grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    column-gap: var(--gap-4xl);
    align-items: start;
  }
  .faq .faq__head {
    position: sticky;
    top: 128px;
    align-items: flex-start;
    margin: 0;
    padding-top: 28px;
    text-align: left;
  }
  .faq .faq__list { max-width: none; margin: 0; }
}
@media (max-width: 767px) {
  .faq .faq__q { padding: 20px 0; gap: var(--gap-md); }
  .faq .faq__a { padding: 0 0 24px; }
}

/* ========== get ========== */
/* ---------- Get Penwing: closing call to action with the people carousel ----------
   Cards are 656 x 432 (narrower on phones, same ratio). The frame fills the lower 89% of a card;
   the cut-out person stands on the frame's floor and their head rises above its top edge.
   JS sets --o (offset from the centred card, -2..2) and --sg (its sign) on each card. */
.get {
  --cw: min(656px, 100vw - 48px);   /* card width */
  --ch: calc(var(--cw) * 0.6585);   /* 432 / 656 */
  --ss: 0.86;                       /* neighbour scale */
  --g: 24px;                        /* space between cards */
  --sc: var(--ss);
}

.get .get__actions { margin-top: var(--gap-xl); }

.get .get-carousel { margin-top: var(--gap-4xl); }

.get .get-stage {
  position: relative;
  max-width: 1920px; height: calc(var(--ch) + 40px);
  margin-inline: auto;
  overflow: hidden;
  touch-action: pan-y;
}

/* ---- Card ---- */
.get .get-card {
  position: absolute; top: 16px; left: 50%;
  width: var(--cw); height: var(--ch);
  margin-left: calc(var(--cw) / -2);
  opacity: 0;
  pointer-events: none;
  transform:
    translateX(calc(var(--o, 0) * (var(--ss) * var(--cw) + var(--g)) + var(--sg, 0) * (1 - var(--ss)) * var(--cw) / 2))
    scale(var(--sc));
  transition: transform var(--t-xslow) var(--ease-io), opacity var(--t-xslow) var(--ease-io);
}
.get .get-card.is-active { --sc: 1; opacity: 1; pointer-events: auto; }
.get .get-card.is-near { opacity: 0.7; pointer-events: auto; cursor: pointer; }
.get .get-card.is-jump { transition: none; }

.get .get-card__frame {
  position: absolute; inset: 11% 0 0;
  overflow: hidden; isolation: isolate;
  border-radius: var(--r-card);
  background: var(--ash);
}
.get .get-card__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ink-5);
}
/* The band gradient fades to cream in its lower part: show only its colourful top */
.get .get-card--5 .mesh__bg { height: 165%; object-fit: fill; }

.get .get-card__person {
  position: absolute; z-index: 1; bottom: 0; left: var(--px, 46%);
  width: auto; max-width: none; height: 104%;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
}

/* Two-word status chip over the lower third, on the side away from the face */
.get .get-card .status-chip {
  position: absolute; z-index: 2; bottom: var(--cb, 17%);
  opacity: 0;
  transform: translateY(8px) scale(0.84);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.get .get-card--l .status-chip { left: var(--cx, 6%); transform-origin: 0 100%; }
.get .get-card--r .status-chip { right: var(--cx, 6%); transform-origin: 100% 100%; }
/* The centred card's chip pops in once its slide has settled */
.get .get-card.is-active .status-chip {
  opacity: 1; transform: none;
  transition: opacity var(--t-mid) var(--ease-out) var(--t-xslow), transform var(--t-mid) var(--ease-out) var(--t-xslow);
}
.get .get-carousel.is-waiting .get-card .status-chip { opacity: 0; transform: translateY(8px) scale(0.84); }

/* Per photo: where the person stands (--px), the chip's distance from the card's side (--cx) and from its foot (--cb).
   Chips on the left just overlap the person's arm; chips on the right sit clear of the tablet. */
.get .get-card--1 { --px: 41%; --cx: 12.5%; --cb: 17%; }
.get .get-card--2 { --px: 6%;  --cx: 3.5%;  --cb: 9%; }
.get .get-card--3 { --px: 41%; --cx: 13%;   --cb: 16%; }
.get .get-card--4 { --px: 6%;  --cx: 6%;    --cb: 15%; }
.get .get-card--5 { --px: 45%; --cx: 6%;    --cb: 17%; }

/* ---- Controls: pause on the left, progress bars in the centre, previous / next on the right ---- */
.get .get-controls {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  width: min(var(--cw), 100% - 48px);
  margin: var(--gap-xl) auto 0;
}
.get .get-ctl {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--ink-5); border-radius: var(--r-ctl);
  background: var(--ink-5); color: var(--midnight);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.get .get-ctl:hover { background: var(--ink-10); }
.get .get-ctl .i { width: 20px; height: 20px; }
.get .get-ctl--play { grid-column: 1; justify-self: start; margin: 0; }
.get .get-ctl--play[hidden] { display: none; }
.get .get-ctl__play { display: none; fill: currentColor; stroke-width: 1.5; }
.get .get-ctl--play.is-stopped .get-ctl__pause { display: none; }
.get .get-ctl--play.is-stopped .get-ctl__play { display: block; }
.get .get-nav { grid-column: 3; display: flex; gap: 8px; justify-self: end; }
.get .get-ctl--prev .i { transition: transform var(--t-fast) var(--ease); }
.get .get-ctl--next .i { transition: transform var(--t-fast) var(--ease); }
.get .get-ctl--prev:hover .i { transform: translateX(-2px); }
.get .get-ctl--next:hover .i { transform: translateX(2px); }

/* Progress bars: idle 8 x 8, the current one 68 px wide; its fill is the timer. Spacing and colours match Stories. */
.get .get-dots { grid-column: 2; display: flex; align-items: center; gap: 16px; margin-inline: 12px; }
.get .get-dot {
  position: relative; overflow: hidden;
  width: 8px; height: 8px; border-radius: 3px;
  background: rgb(7 26 49 / 0.55);
}
.get .get-dot.is-current { width: 68px; background: var(--ink-10); }
.get .get-dot__fill {
  position: absolute; inset: 0;
  background: var(--blue);
  transform: scaleX(0); transform-origin: 0 50%;
}
.get .get-dot.is-current .get-dot__fill { transform: scaleX(1); }
/* While the slides play, the current bar fills like a timer; the slide moves on when it is full */
.get .get-carousel.is-auto .get-dot.is-current .get-dot__fill { animation: get-fill 4000ms linear both; }
.get .get-carousel.is-auto.is-hold .get-dot.is-current .get-dot__fill { animation-play-state: paused; }
@keyframes get-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

html:not(.js) .get .get-controls { display: none; }

/* ---- Widths ---- */
/* 1024-1279: the doc's 560 px heading cap would set this short line in three; give it two */
@media (min-width: 1024px) and (max-width: 1279px) {
  .get .shead__title { max-width: 640px; }
}
/* 768-1023: chip type is set looser here, so its chip is 6 px wider; card 2's person steps 1% left to keep 24 px clear of it */
@media (min-width: 768px) and (max-width: 1023px) {
  .get .get-card--2 { --px: 5%; }
}
/* 768 and up: the stage leaves 24 px under the cards, so the controls sit 40 px below them, as in Stories */
@media (min-width: 768px) {
  .get .get-controls { margin-top: 16px; }
}
@media (max-width: 767px) {
  .get { --g: 12px; }
  .get .get-stage { height: calc(var(--ch) + 32px); }
  .get .get-card { top: 12px; }
  /* Phones: every person stands right of centre and every chip sits bottom left */
  .get .get-card { --px: 45%; --cx: 4%; --cb: 8%; }
  .get .get-card .status-chip { left: var(--cx); right: auto; transform-origin: 0 100%; }
  .get .get-card--5 { --px: 49%; }
  .get .get-controls { gap: 8px; }
  .get .get-dots { gap: 6px; margin-inline: 0; }
  .get .get-dot.is-current { width: 48px; }
}
@media (max-width: 576px) {
  .get .get__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
}

/* Reduced motion: no autoplay (see JS), cards and chips change in place */
@media (prefers-reduced-motion: reduce) {
  .get .get-carousel .get-dot__fill { animation: none !important; }
  .get .get-card, .get .get-card .status-chip, .get .get-card.is-active .status-chip { transition: none !important; }
}

@media (forced-colors: active) {
  .get .get-card__frame { border: 1px solid CanvasText; }
  .get .get-dot { forced-color-adjust: none; }
}

/* ========== privacy ========== */
/* Privacy page (privacy.html): a linen hero panel, then readable prose in a 720px column,
   with a sticky list of contents on wide screens. Every rule is scoped under .legal (the page's <main>). */

/* Hero panel */
.legal .legal-hero { overflow: hidden; padding-block: 76px 84px; }
.legal .legal-hero__date { margin-top: var(--gap-lg); }
/* The soft gradient is stretched, not cropped, so its tinted corners stay in this short panel */
.legal .legal-hero .mesh__bg { object-fit: fill; }

/* Body: contents (wide screens) + document column */
.legal .legal-body { padding-block: var(--gap-4xl) var(--sec-default); }
.legal .legal-doc { max-width: 720px; margin-inline: auto; }
.legal .legal-toc { display: none; }

/* Summary card */
.legal .legal-summary {
  display: flex; align-items: flex-start; gap: var(--gap-lg);
  padding: 32px;
  border: 1px solid var(--ink-5);
  box-shadow: var(--shadow-ui-md);
}
.legal .legal-summary__icon {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--r-chip);
  background: var(--accent); color: var(--midnight);
}
.legal .legal-summary__icon .i { width: 24px; height: 24px; }
.legal .legal-summary__lead {
  margin-bottom: var(--gap-xs);
  font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 500; line-height: 1.25;
  letter-spacing: -0.5px; color: var(--midnight);
}
.legal .legal-summary__lead + p { font-size: 17px; line-height: 1.6; color: var(--steel); }
.legal .legal-summary__icon + div { padding-top: 8px; }

/* Prose */
.legal .legal-doc h2 {
  margin: 32px 0 12px; padding-top: 32px;
  border-top: 1px solid var(--ink-10);
}
/* The first heading follows the card at the tier's 2xl gap (48/32/24); doc-qualified so it beats the tier overrides below */
.legal .legal-doc > .legal-summary + h2 { margin-top: var(--gap-2xl); padding-top: 0; border-top: 0; }
.legal .legal-doc > p,
.legal .legal-doc > ul > li {
  font-size: 17px; line-height: 1.6; color: var(--steel);
}
.legal .legal-doc strong { font-weight: 500; color: var(--midnight); }
.legal .legal-doc > p + p,
.legal .legal-doc > ul + p,
.legal .legal-doc > p + ul { margin-top: var(--gap-md); }
.legal .legal-doc > ul { display: grid; gap: 12px; }
.legal .legal-doc > ul > li { position: relative; padding-left: 24px; }
.legal .legal-doc > ul > li::before {
  content: ""; position: absolute; left: 4px; top: calc(0.8em - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--midnight);
  corner-shape: round;
}

/* Contents list, sticky beside the text */
@media (min-width: 1280px) {
  .legal .legal-body {
    display: grid; align-items: start;
    grid-template-columns: minmax(184px, 1fr) minmax(0, 720px) minmax(0, 1fr);
    column-gap: var(--gap-2xl);
  }
  .legal .legal-doc { grid-column: 2; max-width: none; margin: 0; }
  .legal .legal-toc {
    display: block; grid-column: 1; grid-row: 1;
    position: sticky; top: 128px;
    max-width: 220px;
  }
  .legal .legal-toc__title { margin-bottom: var(--gap-md); }
  .legal .legal-toc ol {
    display: grid;
    border-left: 2px solid var(--ink-10);
    scroll-target-group: auto;
  }
  .legal .legal-toc a {
    display: block; margin-left: -2px; padding: 7px 0 7px 16px;
    border-left: 2px solid transparent;
    font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--steel); text-decoration: none;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .legal .legal-toc a:hover { color: var(--midnight); border-left-color: var(--ink-20); }
  /* Browsers with scroll-target-group mark the section in view; others keep plain links. */
  .legal .legal-toc a:target-current { color: var(--midnight); border-left-color: var(--midnight); }
}

@media (max-width: 1023px) {
  .legal .legal-hero { padding-block: 64px 72px; }
  .legal .legal-doc h2 { margin-top: 28px; padding-top: 28px; }
  .legal .legal-doc > p,
  .legal .legal-doc > ul > li { font-size: 16px; }
  .legal .legal-summary__lead + p { font-size: 16px; }
}

@media (max-width: 767px) {
  .legal .legal-hero { padding-block: 44px 52px; }
  .legal .legal-hero__date { margin-top: var(--gap-md); }
  .legal .legal-summary { flex-direction: column; gap: var(--gap-md); padding: 24px; }
  .legal .legal-summary__icon { width: 40px; height: 40px; }
  .legal .legal-summary__icon .i { width: 20px; height: 20px; }
  .legal .legal-summary__icon + div { padding-top: 0; }
  .legal .legal-doc h2 { margin-top: 24px; padding-top: 24px; }
}