/* ==========================================================================
   Pacod site styles
   White pages, soft gray cards, black pill buttons, Onest throughout.
   ========================================================================== */

/* Fonts ------------------------------------------------------------------- */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin-ext.woff2") format("woff2");
  /* Onest has no rupee sign (U+20B9), so it is left out and never triggers this download. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Arial resized to Onest's metrics, so text does not jump when Onest arrives. */
@font-face {
  font-family: "Onest Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 106%;
  ascent-override: 91.51%;
  descent-override: 28.77%;
  line-gap-override: 0%;
}

/* Newsreader, the serif for headlines. One static cut ships: weight 400 at the display
   optical size, since it is only ever set at 24px and up. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Georgia resized to Newsreader's metrics, for the same reason. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 96.58%;
  ascent-override: 76.62%;
  descent-override: 27.96%;
  line-gap-override: 0%;
}

/* Tokens ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  --bg: #FFFFFF;
  --surface: #F6F6F4;
  --surface-2: #EFEFEC;
  --surface-3: #E6E6E2;
  --line: #EBEBE8;
  --line-2: #DCDCD8;
  --ink: #0B0B0B;
  --ink-2: #474744;
  --ink-3: #6E6E6A;
  --ink-4: #898985;
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, 0.72);
  --on-dark-line: rgba(255, 255, 255, 0.14);

  --lime: #7ED957;
  --green-950: #06160E;
  --green-900: #0B2A1A;
  --green-700: #145530;
  --green-500: #2E8B57;
  --denim-950: #080F1F;
  --denim-900: #101C38;
  --denim-700: #213A78;
  --denim-500: #4767C0;
  --sand-100: #F3EEE4;
  --sand-300: #DFD3BD;
  /* Inside product screens only: saffron marks a flag (an idle sample), rust marks a defect. */
  --saffron: #E3A02F;
  --saffron-soft: #FBEBCB;
  --rust: #B0472A;
  --rust-soft: #F6DDD4;
  /* The circular suite's one green dot and its halo, from the Pacod Circular Suite design system. */
  --dot: #4BE067;
  --dot-halo: #EAFBEE;

  --font-sans: "Onest", "Onest Fallback", Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.625rem, 1.4rem + 5vw, 4.75rem);
  --fs-h1: clamp(2.375rem, 1.5rem + 3.7vw, 4.125rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);

  --container: 1240px;
  --gutter: clamp(16px, 3.2vw, 32px);
  /* The gutter, widened where a phone's notch or rounded corner cuts into the screen. */
  --edge: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --header-h: 64px;
  --section-y: clamp(64px, 7.5vw, 112px);
  --radius: 20px;
  --radius-lg: 24px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 48px -12px rgba(0, 0, 0, 0.16);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 24px 60px -18px rgba(0, 0, 0, 0.42);

  /* Ease-out for anything that enters, leaves or answers a press. Ease-in-out for movement on screen. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Base -------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
  /* Phones paint a grey flash over anything tapped. Every control has its own :active state instead. */
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

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

a { color: inherit; }

/* Links dim while pressed. Buttons, pills and cards answer with their own press below. */
a:not(.btn, .pill, .stretched, .bento-card):active { opacity: 0.6; }

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

::selection { background: var(--ink); color: var(--on-dark); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}

.on-dark :focus-visible { outline-color: var(--on-dark); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  font-weight: 500;
  text-decoration: none;
}
/* Reached from the keyboard, so it appears at once rather than sliding in. */
.skip-link:focus { top: 12px; }

.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;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 14px; height: 14px; }
.icon--fill { fill: currentColor; stroke: none; }

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

.container {
  width: min(calc(100% - 2 * var(--edge)), var(--container));
  margin-inline: auto;
}

.container--narrow { --container: 920px; }
.container--text { --container: 720px; }

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

.section--tight { padding-block: calc(var(--section-y) * 0.55); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--shot { padding-bottom: clamp(16px, 2.5vw, 32px); }
.section + .section.cta { padding-top: 0; }

.rule { border-top: 1px solid var(--line); }

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 12px;
}

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

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

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

.split {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6.5fr); }
  .split--flip { grid-template-columns: minmax(0, 6.5fr) minmax(0, 5fr); }
  .split--flip > :first-child { order: 2; }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--top { align-items: start; }
}

.stack > * + * { margin-top: var(--stack, 18px); }

.split > div:not(.card) > * + * { margin-top: 18px; }
.split > div:not(.card) > .label + h2 { margin-top: 12px; }
.split > div:not(.card) > .actions,
.split > div:not(.card) > .mini-stats { margin-top: 30px; }

/* Typography -------------------------------------------------------------- */

h1, h2, h3, h4,
.display, .h1, .h2, .h3, .h4 {
  color: var(--ink);
  font-weight: 500;
}

/* Headlines are set in the serif; card titles, text and controls stay in Onest. Only the 400
   cut ships, so the browser may not fake a bold or an italic from it. */
.display, h1, .h1, h2, .h2, .lineup-cta h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-synthesis: none;
}

.display {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h4, .h4 {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-3);
}

.mono { font-size: 0.8125rem; letter-spacing: 0; }
.muted { color: var(--ink-3); }
.small { font-size: 0.875rem; }
.num { font-variant-numeric: tabular-nums; }

.text-link,
.prose a,
.answer a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line-2);
  transition: text-decoration-color 0.15s ease;
}

/* Hover styles only where a mouse can hover. On a phone a tap sets :hover and leaves it stuck. */
@media (hover: hover) and (pointer: fine) {
  .text-link:hover,
  .prose a:hover,
  .answer a:hover { text-decoration-color: currentColor; }
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.15s ease;
}

.more .icon { width: 15px; height: 15px; transition: transform 0.2s var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .more:hover,
  .card--link:hover .more,
  .bento-card:hover .more { color: var(--ink); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .more:hover .icon,
  .card--link:hover .more .icon,
  .bento-card:hover .more .icon,
  .note-card:hover .more .icon { transform: translateX(3px); }
}

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

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.16s var(--ease-out);
}

.btn:active { transform: scale(0.97); }
.btn .icon { width: 16px; height: 16px; transition: transform 0.2s var(--ease-out); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover .icon-arrow,
  .btn:hover .icon-chev { transform: translateX(2px); }
}

.btn--dark { background: var(--ink); color: var(--on-dark); }
.btn--outline { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 0.875rem; }
.btn--block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn--dark:hover { background: #2A2A28; }
  .btn--light:hover { background: var(--surface-3); }
  .btn--outline:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink-4); }
}

.on-dark .btn--dark,
.btn--white { background: var(--on-dark); color: var(--ink); }
.on-dark .btn--light { background: rgba(255, 255, 255, 0.12); color: var(--on-dark); }
.on-dark .btn--outline { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32); }

@media (hover: hover) and (pointer: fine) {
  .on-dark .btn--dark:hover,
  .btn--white:hover { background: #E9E9E6; }
  .on-dark .btn--light:hover { background: rgba(255, 255, 255, 0.2); }
  .on-dark .btn--outline:hover { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--on-dark); }
}

@media (max-width: 480px) {
  .actions--stack-sm { flex-direction: column; align-items: stretch; }
  .actions--stack-sm .btn { width: 100%; }
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid transparent;
  transition: transform 0.3s var(--ease-out), border-color 0.2s ease, background-color 0.2s ease;
  view-transition-name: site-header;
}

@supports (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); }
}

.site-header.is-scrolled { border-bottom-color: var(--line); }
/* It leaves faster than it comes back. */
.site-header.is-hidden { transform: translateY(-101%); transition-duration: 0.2s; }

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--ink);
  border-radius: 6px;
}

.logo { display: block; }
.brand .logo { width: 88px; height: auto; }

.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 450;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-link .icon { width: 13px; height: 13px; stroke-width: 2; transition: transform 0.2s var(--ease-out); }
.nav-item.is-open > .nav-link,
.nav-link[aria-current] { color: var(--ink); }
.nav-link:active { opacity: 0.6; }

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { color: var(--ink); }
}
.nav-item.is-open > .nav-link { background: var(--surface); }
.nav-item.is-open > .nav-link .icon { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: -6px;
  z-index: 60;
  width: 340px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  /* Grows out of its trigger, and closes faster than it opens. */
  transform: translateY(-4px) scale(0.97);
  transform-origin: top left;
  transition: opacity 0.12s var(--ease-out), transform 0.12s var(--ease-out), visibility 0s linear 0.12s;
}

.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.nav-item.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.15s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s;
}

.dropdown ul { margin: 0; padding: 0; list-style: none; }

.dropdown a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  padding: 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.dropdown a:focus-visible,
.dropdown a[aria-current] { background: var(--surface); }

@media (hover: hover) and (pointer: fine) {
  .dropdown a:hover { background: var(--surface); }
}

.dropdown .dd-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .dropdown a:hover .dd-icon { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
}
.dropdown .dd-t { font-size: 0.9rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.dropdown .dd-d { font-size: 0.8125rem; color: var(--ink-3); line-height: 1.35; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* The menu sits on the page centre. The logo and the actions stay at the edges. */
@media (min-width: 1024px) {
  .header-inner { position: relative; }
  .primary-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
  }
  .header-actions { position: relative; z-index: 3; }
}

.split-btn {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  background: var(--ink);
}

.split-btn > .btn { border-radius: 999px 0 0 999px; padding-right: 12px; }
.split-btn > .split-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0 999px 999px 0;
  background: var(--ink);
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.16s var(--ease-out);
}

.split-btn > .split-toggle:active { transform: scale(0.95); }
.split-btn > .split-toggle .icon { width: 13px; height: 13px; stroke-width: 2; transition: transform 0.2s var(--ease-out); }
.split-btn.is-open > .split-toggle .icon { transform: rotate(180deg); }
.split-btn .dropdown { left: auto; right: 0; width: 300px; transform-origin: top right; }
.split-btn.is-open > .dropdown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.15s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s; }

@media (hover: hover) and (pointer: fine) {
  .split-btn > .split-toggle:hover { background: #2A2A28; }
}

.menu-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out);
}

.menu-toggle:active { transform: scale(0.95); }

/* Both bars sit on the centre line and are moved apart with transforms, so the
   morph into a cross never animates layout. */
.menu-toggle span {
  position: absolute;
  left: 11px;
  top: 19.5px;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease-out);
}

.menu-toggle span:first-child { transform: translateY(-3.5px); }
.menu-toggle span:last-child { transform: translateY(3.5px); }
.menu-open .menu-toggle span:first-child { transform: rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .primary-nav,
  .header-actions .hide-md { display: none; }
  .menu-toggle { display: inline-block; }
}

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px var(--edge) calc(36px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-out), visibility 0s linear 0.2s;
}

.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease-out), visibility 0s;
}

.menu-open,
.menu-open body { overflow: hidden; }

.mm-nav { display: grid; gap: 28px; }

.mm-group {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}

.menu-open .mm-group { opacity: 1; transform: none; }
.menu-open .mm-group:nth-child(2) { transition-delay: 40ms; }
.menu-open .mm-group:nth-child(3) { transition-delay: 80ms; }
.menu-open .mm-group:nth-child(4) { transition-delay: 120ms; }

.mm-title {
  margin: 0 0 4px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.mm-group ul { margin: 0; padding: 0; list-style: none; }

.mm-group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.mm-group a[aria-current] { color: var(--green-700); }
.mm-foot { display: grid; gap: 10px; margin-top: auto; }
.mm-foot .btn { width: 100%; height: 48px; }

/* Heroes ------------------------------------------------------------------ */

.hero {
  padding-top: clamp(56px, 9vw, 128px);
  padding-bottom: clamp(48px, 6vw, 88px);
  text-align: center;
}

.hero .display,
.hero h1 { max-width: 15em; margin-inline: auto; }
.hero h1 .hl { display: block; }
.hero h1 .hl + .hl { color: var(--ink-4); }
.hero .lead { max-width: 38em; margin: clamp(18px, 2vw, 26px) auto 0; }
.hero .actions { justify-content: center; margin-top: clamp(28px, 3vw, 38px); }
.hero .pill,
.hero .crumbs { margin-bottom: clamp(20px, 2.4vw, 30px); }

.hero--page { padding-top: clamp(48px, 7vw, 104px); }
.hero--page h1 { max-width: 16em; }

/* The homepage hero follows a horizon-glow reference, on white: green light rises from the
   bottom edge of the hero, brightest at the centre as if its source sat just below, and stops on
   a clean line where the next section begins, so the product shot rises out of it. A field of
   small arrows, drawn by main.js on the canvas, gathers in clusters at the sides, thickens toward
   the glow and keeps clear of the words. Grain in soft light textures the green and leaves white
   as white. */
.hero--home {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(ellipse 44% 30% at 50% 100%, rgb(126 217 87 / 0.7), transparent),
    radial-gradient(ellipse 95% 58% at 50% 100%, rgb(46 139 87 / 0.3), transparent),
    linear-gradient(to bottom, transparent 36%, rgb(46 139 87 / 0.06) 58%, rgb(46 139 87 / 0.2) 100%),
    var(--bg);
}

.hero-glyphs,
.hero--home::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* One canvas pixel per CSS pixel, scaled up crisp, so the arrows stay pixel art on every screen. */
.hero-glyphs {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.hero--home::after {
  content: "";
  background: url("/assets/img/grain.svg") 0 0 / 160px 160px;
  mix-blend-mode: soft-light;
}

/* The caption sits in the glow, so it takes the darker text colour to stay readable. */
.hero--home .hero-shot figcaption { color: var(--ink-2); }

/* The glow stops on a clean horizon, so the section after it starts with some white space. */
.hero--home + .section--flush-top { padding-top: clamp(40px, 5vw, 72px); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px 0 5px;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.16s var(--ease-out);
}

.pill:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .pill:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ECF8E5;
  color: #2C6B1A;
  font-weight: 500;
}

.pill-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}

.pill-sub { color: var(--ink-3); }

@media (max-width: 540px) {
  .pill-sub { display: none; }
}
.pill .icon { width: 13px; height: 13px; color: var(--ink-3); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.crumbs a { color: var(--ink-3); text-decoration: none; transition: color 0.15s ease; }

@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover { color: var(--ink); }
}
.crumbs [aria-current] { color: var(--ink); }

.hero-split {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  padding-top: clamp(48px, 7vw, 104px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

@media (min-width: 1024px) {
  .hero-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: 80px; }
}

.hero-split .crumbs { justify-content: flex-start; margin-bottom: 22px; }
.hero-split h1 { max-width: 13em; }
.hero-split .lead { margin-top: 22px; max-width: 34em; }
.hero-split .actions { margin-top: 32px; }

.link-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }

.link-list a,
.link-list .li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.link-list .t { font-size: 0.975rem; font-weight: 500; color: var(--ink); }
.link-list .d { grid-column: 1; font-size: 0.875rem; color: var(--ink-3); }

/* Plain rows beside a text column: from 1200px the title and its line sit side by side, so each
   row spans its column and leaves no ragged gap on the right. The title column fits the longest
   title, and every line keeps room for two lines, so the rows and the rules between them stay
   evenly spaced. Below 1200px the rows stack, as rows that are links always do. */
@media (min-width: 1200px) {
  .split .link-list .li {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: 24px;
    padding: 18px 0;
  }
  .split .link-list .li .d { grid-column: 2; min-height: 3.2em; text-wrap: pretty; }
}
.link-list .icon { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--ink-4); transition: transform 0.2s var(--ease-out), color 0.15s ease; }

@media (hover: hover) and (pointer: fine) {
  .link-list a:hover .icon { color: var(--ink); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .link-list a:hover .icon { transform: translateX(3px); }
}

/* Section heads ----------------------------------------------------------- */

.head-center {
  max-width: 780px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

.head-center .lead { margin-top: 16px; text-wrap: balance; }
.head-center .label { margin-bottom: 14px; }
.head-center .actions { justify-content: center; margin-top: 28px; }

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.head-row > div { max-width: 640px; }
.head-row .label { margin-bottom: 12px; }
.head-row .lead { margin-top: 14px; }

/* Cards ------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.16s var(--ease-out);
}

.card p { color: var(--ink-2); }
.card .more { margin-top: auto; padding-top: 14px; }

/* A pressed card settles a little, so the tap lands before the next page does. */
.card--link:active { transform: scale(0.985); }

@media (hover: hover) and (pointer: fine) {
  .card--link:hover { background: var(--surface-2); }
}
.card--outline { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.card--dashed { background: transparent; box-shadow: none; border: 1px dashed var(--line-2); }
.card--dark { background: var(--ink); color: var(--on-dark-2); }
.card--dark h3,
.card--dark .h3 { color: var(--on-dark); }
.card--dark p { color: var(--on-dark-2); }
.card--dark .label,
.card--dark .more,
.on-dark .label,
.on-dark .more { color: var(--on-dark-2); }
@media (hover: hover) and (pointer: fine) {
  .card--dark .more:hover,
  .on-dark .more:hover { color: var(--on-dark); }
}
.card .num-big { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 400; letter-spacing: -0.04em; color: var(--ink-4); line-height: 1; }
.card .card-tag { align-self: flex-start; }

.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.tag--green { background: #E7F4EA; box-shadow: none; color: var(--green-700); }
.tag--dark { background: var(--ink); box-shadow: none; color: var(--on-dark); }
.tag--flag { background: var(--saffron-soft); box-shadow: none; color: #6A4510; }
.tag--defect { background: var(--rust-soft); box-shadow: none; color: #7E2E18; }

/* Choose cards (the two doors, contact) */

.choose {
  display: grid;
  gap: 12px;
}

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

.choose-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.6vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.choose-card .label { margin-bottom: 14px; }
.choose-card h2,
.choose-card h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.03em; line-height: 1.12; }
.choose-card > p { margin-top: 12px; color: var(--ink-2); max-width: 30em; }
.choose-card .btn { margin-top: auto; }
.choose-card .actions { margin-top: auto; }
.choose-card--dark { background: var(--ink); color: var(--on-dark-2); }
.choose-card--dark h2,
.choose-card--dark h3 { color: var(--on-dark); }
.choose-card--dark > p,
.choose-card--dark .checklist li { color: var(--on-dark-2); }
.choose-card--dark .checklist .icon { color: var(--lime); }
.choose-card--dark .label { color: var(--on-dark-2); }

.checklist {
  display: grid;
  gap: 12px;
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.checklist .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--green-500); stroke-width: 2; }

.door-note {
  margin-top: 22px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--ink-3);
}

/* Bento ------------------------------------------------------------------- */

.bento {
  display: grid;
  gap: 12px;
}

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

@media (min-width: 720px) and (max-width: 1023px) {
  .bento > .bento-card:last-child:nth-child(odd) { grid-column: span 2; }
}

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

.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.16s var(--ease-out);
}

.bento-card:active { transform: scale(0.985); }

.bento-card--green { background: linear-gradient(160deg, var(--green-900), var(--green-700) 70%, #2B7A4B); color: var(--on-dark); }

.bento-media {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vw, 32px) clamp(18px, 3vw, 32px) 4px;
}

.bento-media > .ui { transition: transform 0.35s var(--ease-out); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bento-card:hover .bento-media > .ui { transform: translateY(-4px) scale(1.012); }
}

.bento-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 18px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.bento-card--green .more { color: var(--on-dark-2); }
@media (hover: hover) and (pointer: fine) {
  .bento-card--green:hover .more { color: var(--on-dark); }
}

/* Lineup ------------------------------------------------------------------ */

/* The homepage product lineup: Satra across the top, four cards that interlock in two
   columns, and a green satin card where each side starts. Text sits top left and each product
   shot runs off the bottom right edge. Each card carries a soft glow in its side's colour
   behind the shot, green for factories and denim for brands, the same as the dot by "For
   factories" and "For brands", and a white sheen in the top left keeps the text on plain ground. */

.lineup { display: grid; gap: 12px; }

.lineup-card {
  --pad: clamp(24px, 2.6vw, 34px);
  --tint: 46 139 87;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--pad);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 85% 95% at 100% 100%, rgb(var(--tint) / 0.2), transparent 70%),
    radial-gradient(ellipse 60% 70% at 0% 0%, rgb(255 255 255 / 0.9), transparent 72%),
    linear-gradient(150deg, var(--surface) 40%, #F2F1EC);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
  transition: transform 0.16s var(--ease-out);
}

.lineup-card--aql,
.lineup-card--bqms,
.lineup-card--passport { --tint: 71 103 192; }

.lineup-card:active { transform: scale(0.985); }

.lineup-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.lineup-name a { text-decoration: none; }
.lineup-name .icon { flex: none; width: 18px; height: 18px; color: var(--ink-4); transition: transform 0.2s var(--ease-out), color 0.15s ease; }
.lineup-name .lineup-logo { display: block; width: auto; height: 1.2em; }

.lineup-text { max-width: 30em; margin-top: 10px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }

.lineup-side { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.8125rem; color: var(--ink-3); }
.lineup-side::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); }
.lineup-side--brands::before { background: var(--denim-500); }

/* Below 1024px the shot sits under the text, runs off the right edge and is cut by the bottom one. */
.lineup-shot {
  display: block;
  align-self: flex-end;
  width: 84%;
  max-width: none;
  margin: 22px calc(-1 * var(--pad) - 4%) calc(-1 * var(--pad) - 12%) auto;
  transition: transform 0.35s var(--ease-out);
}

.lineup-card--satra .lineup-shot { width: 74%; margin-bottom: calc(-1 * var(--pad) - 18%); }
.lineup-card--fqms .lineup-shot { width: 108%; margin-right: calc(-1 * var(--pad) - 12%); margin-bottom: calc(-1 * var(--pad) - 4%); }
.lineup-card--aql .lineup-shot { width: 88%; margin-bottom: calc(-1 * var(--pad) - 9%); }
.lineup-card--bqms .lineup-shot { width: 66%; margin-bottom: calc(-1 * var(--pad) - 16%); }

/* A hang tag for the passport card, drawn rather than photographed, with a hole the card shows through. */
.lineup-tag {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  align-self: flex-end;
  width: 152px;
  margin: 26px 12% calc(-1 * var(--pad) - 8px) auto;
  padding: 44px 20px 22px;
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 22px 40px -18px rgba(0, 0, 0, 0.35);
  transform: rotate(-8deg);
  transition: transform 0.35s var(--ease-out);
}

.lineup-tag-hole {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.lineup-tag > svg:not(.logo) { display: block; width: 100%; height: auto; }
.lineup-tag-logo { width: 62px; height: auto; color: var(--ink); }

/* The closing card wears the satin of the CTA band at the foot of the page (the green panel and
   sand folds are shared in the CTA band section), with white silk ribbons drawn over it. */
.lineup-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 17rem;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--radius);
  color: var(--on-dark-2);
}

/* The shade sits behind the words on the left, so the text clears 4.5:1 wherever the folds land.
   It is sized in rem like the text column, so it still covers the words when a narrower card
   swings the fold and the ribbons across them. It comes last in the markup, so it paints over
   the ribbons and they fade in from under the words. */
.lineup-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 46rem 150% at 12rem 50%, rgba(6, 30, 18, 0.62) 55%, transparent);
}

.lineup-cta-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.lineup-cta-body { max-width: 34rem; }
.lineup-cta h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); line-height: 1.12; letter-spacing: -0.018em; color: var(--on-dark); text-wrap: balance; }
.lineup-cta p { margin-top: 12px; font-size: 0.9375rem; line-height: 1.55; }
.lineup-cta .actions { margin-top: 26px; }

/* On a phone the text runs the full width, so the ribbons keep to the lower half, behind the buttons. */
@media (max-width: 639px) {
  .lineup-cta-art {
    top: auto;
    height: 46%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
    mask-image: linear-gradient(to bottom, transparent, #000 45%);
  }

  .lineup-cta::after { background: radial-gradient(ellipse 100% 70% at 30% 36%, rgba(6, 30, 18, 0.6), transparent 80%); }
}

@media (min-width: 640px) {
  .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .lineup-card--satra,
  .lineup-cta { grid-column: 1 / -1; }

  /* Satra spans the full width from here, so its shot can stand beside the text. */
  .lineup-card--satra { min-height: 19rem; }
  .lineup-card--satra .lineup-text { max-width: 52%; }
  .lineup-card--satra .lineup-shot { position: absolute; z-index: -1; right: 4%; bottom: -18%; width: 40%; margin: 0; }
}

/* From 1024px the four cards interlock, a tall and a short card in each column, and every
   shot is set against its card's bottom right corner. */
@media (min-width: 1024px) {
  .lineup { grid-template-rows: auto minmax(15rem, auto) minmax(4.5rem, auto) minmax(15rem, auto) auto; }
  .lineup-card--fqms { grid-column: 1; grid-row: 2 / span 2; }
  .lineup-card--aql { grid-column: 2; grid-row: 2; }
  .lineup-card--bqms { grid-column: 2; grid-row: 3 / span 2; }
  .lineup-card--passport { grid-column: 1; grid-row: 4; }

  .lineup-text { max-width: var(--text-w, 30em); }

  .lineup-shot,
  .lineup-tag { position: absolute; z-index: -1; margin: 0; }

  /* The text takes a wider column and the tablet grows and moves in, so the two meet near
     the middle of the card instead of leaving a gap between them. */
  .lineup-card--satra { min-height: 21rem; }
  .lineup-card--satra .lineup-text { max-width: 46%; }
  .lineup-card--satra .lineup-shot { right: 9%; bottom: -18%; width: 36%; }
  .lineup-card--fqms .lineup-shot { right: -10%; bottom: -10%; width: 80%; margin: 0; }
  .lineup-card--aql { --text-w: 52%; }
  .lineup-card--aql .lineup-shot { right: -5%; bottom: -14%; width: 46%; margin: 0; }
  .lineup-card--bqms { --text-w: 48%; }
  .lineup-card--bqms .lineup-shot { right: -2%; bottom: -12%; width: 44%; margin: 0; }
  .lineup-card--passport { --text-w: 50%; }
  .lineup-card--passport .lineup-tag { right: 12%; bottom: -5%; }
}

@supports selector(:has(*)) {
  .lineup-card:has(.stretched:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
  .lineup-card .stretched:focus-visible { outline: none; }
}

@media (hover: hover) and (pointer: fine) {
  .lineup-card:hover .lineup-name .icon { color: var(--ink); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lineup-card:hover .lineup-name .icon { transform: translateX(3px); }
  .lineup-card:hover .lineup-shot { transform: translate3d(0, -6px, 0); }
  .lineup-card:hover .lineup-tag { transform: translate3d(0, -6px, 0) rotate(-5deg); }
}

/* Globe ------------------------------------------------------------------- */

/* Where Pacod is headquartered and where it is expanding, as a dotted globe seen from above.
   South Asia is marked in the factory side's green, Europe in the brand side's denim. The dots
   are a static image (assets/img/globe.svg); the arc and the pins sit over it in the same
   16:9 frame. The dots fade into the page at the sides and the bottom; the pins stay crisp. */

/* One sentence to a line: where Pacod is, then where it is going. */
.globe-title > span { display: block; }

.globe { position: relative; overflow: hidden; }

.globe-stage { position: relative; aspect-ratio: 16 / 9; margin: 0; }

.globe-stage img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, #000 86%, transparent);
  mask-composite: intersect;
}

.globe-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.globe-arc path { stroke-width: 2.5; stroke-linecap: round; }

/* Each pin is a point on the map: an ink dot ringed in white, and a label that leans away
   from the nearer edge, naming the place and what it is to Pacod. */
.globe-pin { position: absolute; width: 0; height: 0; margin: 0; }
.globe-pin--sa { left: 67.9%; top: 76.88%; }
.globe-pin--eu { left: 19.13%; top: 22.48%; }

.globe-pin::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--bg), 0 2px 6px 2px rgba(0, 0, 0, 0.18);
}

.globe-pill {
  position: absolute;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-pop);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
}

.globe-pill .icon { width: 18px; height: 18px; color: var(--green-700); }
.globe-pin--eu .globe-pill .icon { color: var(--denim-700); }
.globe-role { padding-left: 9px; border-left: 1px solid var(--line-2); font-weight: 400; color: var(--ink-3); }
.globe-pin--eu .globe-pill { left: -18px; }
.globe-pin--sa .globe-pill { right: -18px; }

/* On a phone the globe runs to the screen edges, drawn wider than the screen and slid left,
   so the window still runs from Europe to Sri Lanka. */
@media (max-width: 639px) {
  .globe { margin-inline: calc(-1 * var(--edge)); }
  .globe-stage { width: 170%; margin-left: -24%; }
  .globe-pill { padding: 6px 11px 6px 9px; font-size: 0.8125rem; }
  .globe-pill .icon { width: 16px; height: 16px; }
  .globe-role { padding-left: 7px; }
}

/* Showcase panels ---------------------------------------------------------- */

.showcase {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 42vw, 520px);
  padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 56px);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 58%, #3C9A5C 100%);
}

.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.showcase--denim { background: linear-gradient(135deg, var(--denim-950) 0%, var(--denim-700) 60%, #5878CF 100%); }
.showcase--sand { background: linear-gradient(135deg, #EFE8DB 0%, var(--sand-300) 100%); }
.showcase--sand::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px); background-size: 32px 32px; }
.showcase--ink { background: radial-gradient(ellipse at 30% 20%, #2A2A28 0%, #0B0B0B 70%); }

.showcase .corner {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--on-dark);
}

.showcase .corner.tl { top: 0; left: 0; }
.showcase .corner.tr { top: 0; right: 0; }
.showcase .corner.bl { bottom: 0; left: 0; }
.showcase .corner.br { bottom: 0; right: 0; }
.showcase--sand .corner { background: var(--ink); }

.showcase > .ui,
.showcase > .tab-panels { position: relative; z-index: 1; }

.showcase .ui { box-shadow: var(--shadow-card); }

.showcase-note {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 1;
  font-size: 0.75rem;
  color: var(--on-dark-2);
}

.showcase--sand .showcase-note { color: var(--ink-3); }

.showcase-wrap { position: relative; }

/* Product shots ------------------------------------------------------------ */

.hero-shot {
  width: min(100%, 940px);
  margin: clamp(32px, 4.5vw, 60px) auto 0;
}

/* The hands leave the frame at the bottom edge, so the shot fades into the page. */
.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.hero-shot figcaption {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.showcase-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.showcase-img--wide { max-width: 940px; }
.showcase-img--tablet { max-width: 820px; }
.showcase-img--small { max-width: 560px; }
.showcase-img--hands { max-width: 640px; }

.showcase--shot { padding-bottom: clamp(44px, 6vw, 72px); }

/* The hands rise from the bottom edge of the panel. */
.showcase--photo {
  align-items: end;
  padding-bottom: 0;
}

.showcase--photo .showcase-img { width: 92%; }

@media (max-width: 719px) {
  .showcase--shot.showcase--hero { min-height: 0; }
  .showcase--photo.showcase--hero { padding-top: 44px; }
}

@media (min-width: 720px) {
  .showcase--photo .showcase-img { width: 100%; }
}

.lockup {
  display: block;
  width: auto;
  height: clamp(24px, 2.4vw, 32px);
  margin: 0 auto clamp(22px, 2.6vw, 32px);
  color: var(--ink);
}

.bento-mark { display: inline-flex; align-items: center; gap: 10px; }
.bento-foot .satra-logo { width: auto; height: 17px; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
}

.tab {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.16s var(--ease-out);
}

.tab:active { transform: scale(0.97); }
.tab[aria-selected="true"] { background: var(--surface-2); color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .tab:hover { color: var(--ink); }
}

.tab-panels { display: grid; width: 100%; place-items: center; }
.tab-panels > [role="tabpanel"] { grid-area: 1 / 1; width: 100%; display: grid; place-items: center; }
.tab-panels > [role="tabpanel"][hidden] { display: none; }

/* A short fade and no slide: the tabs sit side by side, so the panel has nowhere to come from.
   Opacity only, so it stays for visitors who ask for reduced motion. */
.tab-panels > [role="tabpanel"]:not([hidden]) { animation: panel-in 0.2s var(--ease-out); }

@keyframes panel-in {
  from { opacity: 0; }
}

.mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin-top: 36px;
}

.mini-stats b {
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.mini-stats span { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-3); }

/* Product screens ---------------------------------------------------------- */

/* Cropped screenshots from the Pacod and Satra demo accounts. Each sits where an HTML stand-in
   sat, on a white card with the same lift, a little wider so the real interface stays legible. */
.screen {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), var(--shadow-card);
}

.showcase--hero .screen { max-width: 920px; }
.bento-media > .screen { max-width: 520px; transition: transform 0.35s var(--ease-out); }

/* On a phone a whole screen would shrink past reading, so it runs larger and off the right edge. */
@media (max-width: 639px) {
  .showcase .screen { justify-self: start; width: 150%; max-width: none; margin-bottom: 28px; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bento-card:hover .bento-media > .screen { transform: translateY(-4px) scale(1.012); }
}

/* The HTML stand-ins below still draw the small cards where no screen exists yet. */

.ui {
  container-type: inline-size;
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.ui-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
}

.ui-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

.ui-dots { display: inline-flex; gap: 6px; }
.ui-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
.ui-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); }

.ui-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.ui-row:last-child { border-bottom: 0; }
.ui-title { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ui-meta { margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.ui-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.chip svg { width: 11px; height: 11px; }
.chip--done { background: var(--green-700); box-shadow: none; color: var(--on-dark); }
.chip--flag { background: var(--saffron); box-shadow: none; color: var(--ink); }
.chip--defect { background: var(--rust); box-shadow: none; color: #FFFFFF; }
.chip--soft { background: var(--surface-2); box-shadow: none; }

.ui-flag-row { background: #FDF6E7; }

.swatch {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background-color: #2D3550;
  background-image:
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-60deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 6px);
}

.swatch--light { background-color: #8F9AB8; }

.swatch-mark {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  border: 2px solid var(--rust);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(176, 71, 42, 0.25);
}

.swatch-mark.m1 { left: 18%; top: 20%; }
.swatch-mark.m2 { left: 50%; top: 34%; width: 28%; }
.swatch-mark.m3 { left: 30%; top: 46%; width: 26%; }

.swatch-stamp {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(10, 10, 10, 0.66);
  font-size: 10px;
  color: #FFFFFF;
}

.clock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 18px 16px;
}

.clock-ring { position: relative; width: 108px; height: 108px; }
.clock-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock-ring .track { stroke: var(--surface-2); }
.clock-ring .fill { stroke: var(--green-700); stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease-out) 0.25s; }
.clock-ring .label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.clock-ring .label b { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.clock-ring .label span { margin-top: 4px; font-size: 10.5px; color: var(--ink-3); }

.kv-mini { display: grid; gap: 8px; margin: 0; }
.kv-mini div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.kv-mini dt { color: var(--ink-3); }
.kv-mini dd { margin: 0; font-weight: 500; text-align: right; }

.ui-aql { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.ui-aql > div { padding: 12px 16px; border-left: 1px solid var(--line); }
.ui-aql > div:first-child { border-left: 0; }
.ui-aql .k { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.ui-aql .v { margin-top: 4px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.ui-aql .v small { font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.ui-aql .v--over { color: var(--rust); }

.ui-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }

.ui-progress { position: relative; height: 6px; overflow: hidden; border-radius: 6px; background: var(--surface-2); }
.ui-progress i { position: absolute; inset: 0; border-radius: inherit; background: var(--green-700); transform: scaleX(var(--p, 0.5)); transform-origin: left center; transition: transform 1.4s var(--ease-out) 0.3s; }
.p-57 { --p: 0.57; }
.p-64 { --p: 0.64; }
.p-71 { --p: 0.71; }
.p-82 { --p: 0.82; }
.p-40 { --p: 0.4; }
.p-30 { --p: 0.3; }

.perf-row { grid-template-columns: 7.5em minmax(0, 1fr); padding-block: 10px; }
.ui-row--media { grid-template-columns: 72px minmax(0, 1fr); }
.ui-row--bare { padding: 0 0 12px; border-bottom: 0; }

.tna { padding: 4px 16px 12px; }
.tna-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.tna-row:last-child { border-bottom: 0; }
.tna-row .mono { font-size: 11.5px; color: var(--ink-3); }
.tna-row .done { color: var(--green-700); font-weight: 500; }

.passport { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px; }
.passport .qr { width: 104px; height: 104px; padding: 8px; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.passport .qr svg { width: 100%; height: 100%; display: block; }

/* The inspector's field app, dark */
.ui--dark { background: #121211; color: var(--on-dark); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 50px -20px rgba(0, 0, 0, 0.6); }
.ui--dark .ui-head { border-bottom-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }
.ui--dark .ui-head strong { color: var(--on-dark); }
.ui--dark .ui-row { border-bottom-color: rgba(255, 255, 255, 0.08); }
.ui--dark .ui-title { color: var(--on-dark); }
.ui--dark .ui-meta { color: rgba(255, 255, 255, 0.55); }
.ui--dark .ui-progress { background: rgba(255, 255, 255, 0.1); }
.ui--dark .ui-progress i { background: var(--lime); }
.ui--dark .ui-progress i.over { background: var(--rust); }
.ui--dark .chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); }
.field-count { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.field-count small { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.55); }
.field-bar { grid-column: 1 / -1; }

@container (max-width: 430px) {
  .ui-row:not(.ui-row--media):not(.perf-row) { grid-template-columns: minmax(0, 1fr); }
  .ui-row > .tag,
  .ui-row > .chip { justify-self: start; }
  .ui-chips { justify-content: flex-start; }
  .ui-head { flex-wrap: wrap; gap: 2px 12px; padding: 11px 14px; }
  .ui-row { padding: 11px 14px; }
  .ui-aql > div { padding: 11px 12px; }
  .ui-aql .v { font-size: 17px; }
  .ui-aql .v small { font-size: 11px; }
  .ui-photos { padding: 11px 14px; gap: 6px; }
  .clock { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
  .passport { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .tna { padding: 4px 14px 10px; }
  .tna-row { font-size: 12.5px; }
  .ui--dark .ui-row:not(.ui-row--media):not(.perf-row) { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Demo states: product screens start in their 'before' state and play once in view. */
@media (prefers-reduced-motion: no-preference) {
  .reveal:not(.is-in) [data-tap],
  .stations.is-enhanced .station-ui:not(.is-active) [data-tap] {
    background: transparent;
    color: var(--ink-2);
    box-shadow: inset 0 0 0 1px var(--line-2);
    transition-delay: 0s;
  }
  .reveal:not(.is-in) [data-tap] svg,
  .stations.is-enhanced .station-ui:not(.is-active) [data-tap] svg { display: none; }
  [data-tap] { transition-delay: 0.9s; }
  [data-tap]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
  }
  .reveal.is-in [data-tap]::after,
  .stations.is-enhanced .station-ui.is-active [data-tap]::after { animation: tap-ring 0.9s var(--ease-out) 0.85s 1 both; }
  .reveal.is-in .chip--flag,
  .stations.is-enhanced .station-ui.is-active .chip--flag { animation: flag-pulse 1.4s var(--ease-in-out) 0.6s 2 both; }
  .reveal:not(.is-in) .clock-ring .fill { stroke-dashoffset: 326.73 !important; transition-delay: 0s; }
  .reveal:not(.is-in) .ui-progress i { transform: scaleX(0) !important; transition-delay: 0s; }
}

@keyframes tap-ring {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(20, 85, 48, 0.45); }
  100% { opacity: 0; box-shadow: 0 0 0 12px rgba(20, 85, 48, 0); }
}

@keyframes flag-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 160, 47, 0); }
  50% { box-shadow: 0 0 0 6px rgba(227, 160, 47, 0.3); }
}

/* Stats ------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  padding: clamp(24px, 3.5vw, 44px) clamp(14px, 2.6vw, 32px) clamp(26px, 3.5vw, 46px);
  border-left: 1px solid var(--line);
}

.stat:first-child { padding-left: 0; border-left: 0; }

.stat b {
  display: block;
  font-size: clamp(2.125rem, 1.4rem + 3vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.stat b small { font-size: 0.45em; letter-spacing: -0.02em; color: var(--ink-3); margin-left: 0.08em; }
.stat > span { display: block; margin-top: 14px; font-size: 0.875rem; line-height: 1.45; color: var(--ink-3); }

@media (max-width: 599px) {
  .stat { padding-inline: 10px; }
  .stat > span { font-size: 0.8125rem; }
}

/* Feature grid ------------------------------------------------------------ */

.feature-grid {
  display: grid;
  gap: 32px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.feature {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 14px;
}

.feature .icon { grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; color: var(--ink); }
.feature b { font-size: 0.975rem; font-weight: 500; color: var(--ink); line-height: 1.35; }
.feature span { font-size: 0.9rem; color: var(--ink-3); line-height: 1.5; }

/* Steps ------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

@media (min-width: 560px) and (max-width: 819px) {
  .steps--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  padding: 26px;
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}

.step-num { font-size: 0.8125rem; color: var(--ink-3); }
.step h3 { margin-top: auto; font-size: 1.0625rem; letter-spacing: -0.015em; }
.step p { font-size: 0.9rem; color: var(--ink-3); line-height: 1.5; }

/* Comparison table -------------------------------------------------------- */

.compare {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.compare th,
.compare td {
  padding: 22px 28px 22px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.compare thead th {
  padding-top: 0;
  padding-bottom: 14px;
  border-bottom-color: var(--line-2);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
}

.compare thead th.with { color: var(--green-700); }
.compare tbody th { width: 24%; font-weight: 500; color: var(--ink); font-size: 1rem; }
.compare td { width: 38%; font-size: 1.0625rem; line-height: 1.45; }
.compare td.today { color: var(--ink-3); }
.compare td.with { color: var(--ink); }

.compare td.with::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 12px 2px 0;
  border-radius: 50%;
  background: var(--green-500);
  vertical-align: middle;
}

@media (max-width: 719px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td { display: block; width: 100%; }
  .compare tbody tr { padding: 20px 0; border-bottom: 1px solid var(--line); }
  .compare tbody th,
  .compare td { width: auto; padding: 0; border: 0; }
  .compare tbody th { margin-bottom: 12px; }
  .compare td.today { margin-bottom: 10px; }
  .compare td.with { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); }
  .compare td::before,
  .compare td.with::before {
    content: attr(data-label);
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 4px;
    border-radius: 0;
    background: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink-3);
  }
  .compare td.with::before { color: var(--green-700); }
}

/* Timeline ---------------------------------------------------------------- */

.tl-year {
  display: grid;
  gap: 16px;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 860px) {
  .tl-year { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 48px; }
  .tl-year-label { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
}

.tl-year-label {
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--ink-4);
}

.tl-year--next .tl-year-label { color: var(--ink); }

.tl-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.tl-entry:first-child { padding-top: 6px; }
.tl-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.tl-title { font-size: 1.0625rem; font-weight: 500; color: var(--ink); line-height: 1.4; }
.tl-date { font-size: 0.875rem; color: var(--ink-3); white-space: nowrap; }
.tl-text { grid-column: 1 / -1; max-width: 46em; color: var(--ink-2); }

.tl-source {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.8125rem;
}

.tl-source a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 0.25em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tl-source a:hover { color: var(--ink); text-decoration-color: currentColor; }
}
.tl-source .icon { width: 12px; height: 12px; }

/* Notes ------------------------------------------------------------------- */

.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16 / 10;
  padding: clamp(16px, 2vw, 22px);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-md);
  color: var(--on-dark);
}

.cover-mark { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--on-dark-2); }
.cover-mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
/* A cover reads like a journal's, so its title takes the headline serif. */
.cover-title { font-family: var(--font-serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 400; font-synthesis: none; letter-spacing: -0.015em; line-height: 1.08; max-width: 12em; }
.cover--green { background: linear-gradient(150deg, var(--green-950) 0%, var(--green-700) 70%, #3B9659 100%); }
.cover--ink { background: radial-gradient(ellipse at 80% 10%, #3A3A37 0%, #0B0B0B 65%); }
.cover--denim { background: linear-gradient(150deg, var(--denim-950) 0%, var(--denim-700) 68%, #5878CF 100%); }
.cover--sand { background: linear-gradient(150deg, #F2ECE1 0%, var(--sand-300) 100%); color: var(--ink); }
.cover--sand .cover-mark { color: var(--ink-3); }

.cover::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -30%;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.03), 0 0 0 56px rgba(255, 255, 255, 0.025);
}

.cover--sand::after { border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 0 0 28px rgba(0, 0, 0, 0.02), 0 0 0 56px rgba(0, 0, 0, 0.015); }

.note-cards {
  display: grid;
  gap: 28px 12px;
}

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

.note-card { position: relative; display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: transform 0.16s var(--ease-out); }
.note-card:active { transform: scale(0.985); }
.note-card .cover { transition: transform 0.3s var(--ease-out); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .note-card:hover .cover { transform: translateY(-3px); }
}
.note-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.8125rem; color: var(--ink-3); }
.note-card h3 { font-size: 1rem; line-height: 1.35; letter-spacing: -0.012em; }
.note-card h3 a { text-decoration: none; }

.note-feature {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #0B0B0B;
  color: var(--on-dark-2);
}

@media (min-width: 960px) { .note-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 440px; } }

.note-feature-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 4.5vw, 56px); }
.note-feature-body .note-meta { color: var(--on-dark-2); }
.note-feature h2 { color: var(--on-dark); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); max-width: 12em; }
.note-feature h2 a { text-decoration: none; }
.note-feature p { max-width: 30em; }
.note-feature .btn { align-self: flex-start; margin-top: auto; }
.note-feature .cover { aspect-ratio: auto; min-height: 260px; border-radius: 0; }
.note-feature .cover-title { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

.note-list { border-top: 1px solid var(--line); }

.note-row {
  position: relative;
  display: grid;
  gap: 6px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 860px) { .note-row { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } }

.note-row h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
.note-row h3 a { text-decoration: none; }
.note-row p { grid-column: 1; font-size: 0.9375rem; color: var(--ink-3); max-width: 52em; }
.note-row .note-meta { grid-row: 1; grid-column: 2; white-space: nowrap; }
.note-row:active { opacity: 0.6; }

@media (hover: hover) and (pointer: fine) {
  .note-row:hover h3 { color: var(--green-700); }
}

@media (max-width: 859px) { .note-row .note-meta { grid-row: auto; grid-column: auto; } }

/* Article */

.article-head {
  max-width: 820px;
  margin-inline: auto;
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(32px, 4vw, 48px);
  text-align: center;
}

.article-head .note-meta { justify-content: center; margin-bottom: 20px; }
.article-head h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.article-head .lead { margin-top: 20px; }
.article-head .byline { margin-top: 22px; font-size: 0.875rem; color: var(--ink-3); }
.article-cover { max-width: 1040px; margin: 0 auto clamp(40px, 5vw, 64px); }
.article-cover .cover { aspect-ratio: 21 / 8; }
.article-cover .cover-title { font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem); max-width: 14em; }

.prose {
  max-width: 680px;
  margin-inline: auto;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.75;
}

.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2em; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); letter-spacing: -0.012em; line-height: 1.2; }
.prose h3 { margin-top: 1.6em; font-size: 1.125rem; }
.prose h2 + p,
.prose h3 + p { margin-top: 0.6em; }
.prose ul,
.prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--ink-4); }
.prose strong { color: var(--ink); font-weight: 600; }

.article-foot { max-width: 1040px; margin: clamp(56px, 7vw, 96px) auto 0; }

/* Answers ----------------------------------------------------------------- */

.faq-layout { display: grid; gap: 40px; }

@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 3.5fr); column-gap: 64px; }
  .faq-aside { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
}

.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(36px, 5vw, 56px);
  padding: 0;
  list-style: none;
}

.faq-nav a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .faq-nav a:hover { background: var(--surface-2); color: var(--ink); }
}

.faq-group { scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-group + .faq-group { margin-top: clamp(48px, 6vw, 72px); }
.faq-group > h2 { margin-bottom: 12px; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); letter-spacing: -0.012em; }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

.faq summary:active { opacity: 0.6; }

.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.012em; }

.pm {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--surface);
  transition: background-color 0.15s ease, transform 0.3s var(--ease-out);
}

.pm::before,
.pm::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .pm { transform: rotate(45deg); }

@media (hover: hover) and (pointer: fine) {
  .faq summary:hover .pm { background: var(--surface-2); }
}

.answer { max-width: 46em; padding: 0 50px 24px 0; color: var(--ink-2); }
.answer p + p { margin-top: 0.8em; }

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.3s var(--ease-out), content-visibility 0.3s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}

.aside-card { padding: 28px; border-radius: var(--radius); background: var(--surface); }
/* Too small for the display serif; it reads as a card title. */
.aside-card h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; }
.aside-card p { margin-top: 8px; font-size: 0.9375rem; }
.aside-card .actions { margin-top: 20px; }

/* People, principles, places --------------------------------------------- */

.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.person-photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink-4);
}

.person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person-name { margin-top: 14px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.person-role { margin-top: 2px; font-size: 0.875rem; color: var(--ink-3); }
.person-line { margin-top: 8px; font-size: 0.875rem; color: var(--ink-2); line-height: 1.5; }

.principle h3 { margin-top: clamp(20px, 2.4vw, 32px); font-size: 1.125rem; }
.principle p { font-size: 0.9rem; color: var(--ink-3); }

.place {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 132px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.place b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.place span { font-size: 0.875rem; color: var(--ink-3); }

/* Partners triad */

.triad { display: grid; gap: 12px; }
@media (min-width: 900px) { .triad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.triad-record {
  margin-top: 12px;
  padding: 14px 18px;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* Report (specimen) ------------------------------------------------------- */

.report { display: grid; }
.report-row { display: grid; }

.report-sheet {
  padding: clamp(20px, 3vw, 32px);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.report-row:first-child .report-sheet { border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.report-row:last-child .report-sheet { border-radius: 0 0 var(--radius) var(--radius); }

.report-annot {
  display: flex;
  gap: 12px;
  padding: 14px 4px 22px 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.report-annot b {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-dark);
  font-size: 11px;
  font-weight: 500;
}

@media (min-width: 1100px) {
  .report-row { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 40px; }
  .report-annot { padding: clamp(20px, 3vw, 32px) 0 0; align-self: start; }
  .report-annot::before {
    content: "";
    position: relative;
    top: 11px;
    flex: none;
    width: 28px;
    height: 1px;
    margin-left: -40px;
    margin-right: -16px;
    background: var(--line-2);
  }
}

.report-wrap { padding: clamp(12px, 2vw, 24px); border-radius: var(--radius-lg); background: var(--surface); }

.sheet-label { margin-bottom: 12px; font-size: 0.8125rem; color: var(--ink-3); }
.sheet-title { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); line-height: 1.15; }
.sheet-title + .kv { margin-top: 18px; }

.specimen-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 18px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--ink-2);
}

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.kv > div { padding: 12px 16px 12px 0; border-top: 1px solid var(--line); }
.kv dt { font-size: 0.75rem; color: var(--ink-3); }
.kv dd { margin-top: 3px; font-size: 0.9375rem; font-weight: 500; color: var(--ink); }

.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--line); }
.results > div { padding: 16px; border-left: 1px solid var(--line); }
.results > div:first-child { border-left: 0; }
.results .k { font-size: 0.75rem; color: var(--ink-3); }
.results .v { margin-top: 6px; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.results .v small { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.results .over { color: var(--rust); }

@media (max-width: 599px) {
  .results > div { padding: 12px; }
  .results .v small { display: block; margin-top: 6px; }
}

.verdict-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 0.875rem; color: var(--ink-2); }

.defects { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 14px; }
.defect .swatch { margin-bottom: 10px; }
.defect .tag { margin-top: 8px; }
.decision { display: grid; gap: 6px; }
.report-sheet .ui-progress { margin: 6px 0 10px; }
.report-sheet .ui-meta + .ui-meta { margin-top: 2px; }

/* AQL calculator ---------------------------------------------------------- */

.aql-layout { display: grid; gap: 32px; }
@media (min-width: 1024px) { .aql-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 3.5fr); column-gap: 56px; } }

.aql {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-pop);
}

.aql-lot { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.aql-lot label { font-size: 0.8125rem; color: var(--ink-3); }
.aql-lot-input { display: flex; align-items: baseline; gap: 12px; }

.aql-lot-input input[type="number"] {
  width: 6ch;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.aql-lot-input input[type="number"]::-webkit-outer-spin-button,
.aql-lot-input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aql-lot-input input[type="number"]:focus-visible { outline: none; border-bottom-color: var(--green-700); }
.aql-lot-input span { color: var(--ink-3); }

.aql-range {
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.aql-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--surface-2); }
.aql-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--surface-2); }
.aql-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--bg), 0 2px 8px rgba(0, 0, 0, 0.25); transition: transform 0.16s var(--ease-out); }
.aql-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--bg), 0 2px 8px rgba(0, 0, 0, 0.25); }
.aql-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.aql-range:focus-visible { outline: none; }
.aql-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--ink); }
.aql-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--ink); }

.aql-scale { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ink-3); }
.aql-band { font-size: 0.875rem; color: var(--ink-2); }

.aql-out { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.aql-out > div { padding: 18px clamp(14px, 2vw, 24px); border-left: 1px solid var(--line); }
.aql-out > div:first-child { border-left: 0; }
.aql-out .k { font-size: 0.75rem; color: var(--ink-3); }
.aql-out .v { margin-top: 6px; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.aql-out .v small { display: block; margin-top: 5px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }

@media (max-width: 719px) {
  .aql-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aql-out > div:nth-child(3) { border-left: 0; }
  .aql-out > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

.aql-log { display: grid; gap: 2px; padding: 10px clamp(20px, 3vw, 32px); }
.aql-counter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.aql-counter:last-child { border-bottom: 0; }
.aql-counter .name { font-weight: 500; color: var(--ink); }
.aql-counter .limit { font-size: 0.8125rem; color: var(--ink-3); }
.aql-counter .meter { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.aql-counter .meter i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--green-500); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s var(--ease-out), background-color 0.2s ease; }

/* Odometer digits for the calculator's results and defect counts. */
.odo,
.odo-row { display: inline-flex; align-items: baseline; }
.odo { font-variant-numeric: tabular-nums; }
.odo-slot { --odo-cell: 1.2em; position: relative; display: inline-block; line-height: var(--odo-cell); }
.odo-sizer { visibility: hidden; }
.odo-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.odo-strip { position: absolute; top: 0; left: 0; right: 0; transition: transform 0.45s var(--ease-out); }
.odo-strip > span { display: block; height: var(--odo-cell); text-align: center; }
.odo-slot.is-still .odo-strip { transition: none; }
.odo-slot--enter { animation: odo-enter 0.4s var(--ease-out) both; }
@keyframes odo-enter { from { opacity: 0; } }

/* Counted figures keep their width while they count. */
[data-countup] { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.aql-counter .meter i.over { background: var(--rust); }

.stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); }

.stepper button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.16s var(--ease-out);
}

.stepper button:active { transform: scale(0.95); }

@media (hover: hover) and (pointer: fine) {
  .stepper button:hover { background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
}
.stepper output { min-width: 3ch; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); }

.aql-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 18px clamp(20px, 3vw, 32px);
  background: var(--green-700);
  color: var(--on-dark);
  transition: background-color 0.25s ease;
}

.aql-verdict.is-reject { background: var(--rust); }
.aql-verdict b { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; }
.aql-verdict span { font-size: 0.875rem; color: var(--on-dark-2); }
.aql-note { margin-top: 14px; font-size: 0.8125rem; color: var(--ink-3); max-width: 60em; }

/* CTA band ---------------------------------------------------------------- */

/* The closing section of every page, after the satin reference: a green panel with a sand sheen
   folded across it, the headline in the serif, and three short notes on cards underneath. The
   folds are soft radial gradients on a rotated layer behind the text, so no image is needed. */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  padding: clamp(64px, 9vw, 112px) clamp(24px, 5vw, 64px) clamp(68px, 9.5vw, 120px);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}

/* The same satin dresses the closing card of the product line-up on the home page. */
.cta-band,
.lineup-cta { background: linear-gradient(120deg, #2A915A 0%, #1B7045 32%, var(--green-700) 58%, #0D3A25 84%, #082114 100%); }

.cta-band::before,
.lineup-cta::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(243, 238, 228, 0.55), transparent) 14% 66% / 78% 19% no-repeat,
    radial-gradient(closest-side, rgba(223, 211, 189, 0.28), transparent) 47% 87% / 70% 13% no-repeat,
    radial-gradient(closest-side, rgba(6, 22, 14, 0.5), transparent) 64% 36% / 86% 24% no-repeat,
    radial-gradient(closest-side, rgba(126, 217, 87, 0.22), transparent) 84% 18% / 60% 20% no-repeat;
  transform: rotate(-22deg);
}

/* A soft shade behind the words, so the sheen can stay bright at the edges and the text still
   clears 4.5:1 wherever the folds land, which moves with the panel's shape. */
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 58% 62% at 50% 46%, rgba(6, 30, 18, 0.5), transparent 78%);
}

.cta-band h2 { max-width: 16em; color: var(--on-dark); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); letter-spacing: -0.018em; }
.cta-band p { max-width: 34em; margin-top: 16px; font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.cta-band .actions { justify-content: center; margin-top: 30px; }

/* The second button is glass: a dark tint and a blur of the sheen behind it, so its label
   reads wherever the folds fall. */
.cta-band .btn--outline,
.lineup-cta .btn--outline {
  background: rgba(6, 30, 18, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (hover: hover) and (pointer: fine) {
  .cta-band .btn--outline:hover,
  .lineup-cta .btn--outline:hover { background: rgba(6, 30, 18, 0.75); }
}

/* The notes stand apart from the band, so they read as a follow-up and not as its footer. */
.cta-notes { display: grid; gap: 8px; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; }

.cta-notes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 4px 12px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--surface);
}

.cta-notes .icon { grid-row: span 2; width: 18px; height: 18px; margin-top: 2px; color: var(--green-700); }
.cta-notes b { font-weight: 500; color: var(--ink); }
.cta-notes span { font-size: 0.875rem; line-height: 1.45; color: var(--ink-3); }

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

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

.site-footer {
  padding: clamp(56px, 7vw, 80px) 0 calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}

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

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

@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); }
  .footer-brand { padding-right: 32px; border-right: 1px solid var(--line); }
}

.footer-brand { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; }
@media (min-width: 1024px) { .footer-brand { grid-column: auto; } }

.footer-brand .logo { width: 92px; color: var(--ink); }
.footer-brand p { font-size: 0.8125rem; color: var(--ink-3); }
.footer-title { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 500; color: var(--ink); }
.footer-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer-col a { font-size: 0.8125rem; color: var(--ink-2); text-decoration: none; transition: color 0.15s ease; }

@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover { color: var(--ink); }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* News card ---------------------------------------------------------------- */

/* A short announcement on the homepage, under the globe: the partner graphic on one side and a few
   lines on the other, on the same soft grey as the site's cards. */
.news-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.news-media { margin: 0; background: #050806; }
.news-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.news-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(26px, 3.4vw, 48px); }
.news-body h2 { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem); line-height: 1.12; text-wrap: balance; }
.news-body p { color: var(--ink-2); max-width: 30em; }
.news-body .more { margin-top: 6px; }

.news-body .news-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-3); }
.news-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 3px #E7F4EA; }

@media (min-width: 900px) {
  .news-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* Circular suite ----------------------------------------------------------- */

/* The /circular-economy page, after the Pacod Circular Suite design system: everything is drawn
   from a line, a node and one green dot. Lines are 1.5px ink, nodes are ink circles, and each
   group has one green dot, on the thing that matters now. The product marks live in sprite.svg
   (mark-loop and the rest); their lines follow currentColor and their dot is always green.
   Product names are lowercase wordmarks in Onest 600. */

.cs-mark { flex: none; width: 28px; height: 28px; color: var(--ink); }
.on-dark .cs-mark,
.card--dark .cs-mark { color: var(--on-dark); }

.cs-name { font-weight: 600; letter-spacing: -0.04em; text-transform: lowercase; color: var(--ink); }

.cs-lockup { display: inline-flex; align-items: center; gap: 10px; }
.cs-lockup .cs-name { font-size: 1.375rem; line-height: 1; }

.cs-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px clamp(20px, 3vw, 36px);
  margin: clamp(32px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.cs-status { margin-top: 16px; font-size: 0.875rem; color: var(--ink-3); }

/* A stepper: a node per step on one line, and the green dot on the step where it ends. */
.cs-steps { margin: 0; padding: 0; list-style: none; }

.cs-steps li {
  position: relative;
  padding: 0 0 18px 30px;
  color: var(--ink-2);
  line-height: 1.5;
}

.cs-steps li:last-child { padding-bottom: 0; }

.cs-steps li::before {
  content: "";
  position: absolute;
  top: calc(0.75em - 4px);
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.cs-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(0.75em + 4px);
  bottom: calc(4px - 0.75em);
  left: 3.25px;
  width: 1.5px;
  background: var(--ink);
}

.cs-steps li:last-child::before { background: var(--dot); box-shadow: 0 0 0 4px var(--dot-halo); }

.cs-tools { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

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

.cs-tool .cs-name { font-size: 1.625rem; line-height: 1.1; }
.cs-tool .cs-role { font-size: 0.875rem; font-weight: 500; color: var(--green-700); }
.cs-tool .tag { align-self: flex-start; margin-top: auto; }
.cs-tool .cs-mark { width: 32px; height: 32px; }

.cs-how { display: grid; gap: 12px; }
@media (min-width: 900px) { .cs-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-how .card { gap: 18px; }
.cs-how .cs-role { margin-left: 4px; font-size: 0.875rem; color: var(--green-700); }

/* The page's dark boxes are green: a deep gradient that brightens toward the bottom right, so the
   lime eyebrows at the top left keep their contrast, with a soft glow and the site's faint grid. */
.cs-green {
  --on-dark-2: rgba(255, 255, 255, 0.84);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 100% 100%, rgb(126 217 87 / 0.1), transparent 70%),
    linear-gradient(150deg, var(--green-950) 0%, var(--green-900) 35%, var(--green-700) 85%, #17603A 100%);
  color: var(--on-dark-2);
}

.cs-green::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 60%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 70% 60%, #000 20%, transparent 75%);
}

/* The suite together: one kilogram of scrap moving along five nodes, the last one green. It sits on
   the green box above. */
.cs-panel {
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--radius-lg);
}

.cs-panel h2 { color: var(--on-dark); max-width: 18em; }
.cs-panel .label { color: var(--lime); }

.cs-flow {
  display: grid;
  gap: 0;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.cs-flow li { position: relative; padding: 0 0 22px 30px; }
.cs-flow li:last-child { padding-bottom: 0; }
.cs-flow b { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--lime); }
.cs-flow p { margin-top: 4px; color: var(--on-dark); line-height: 1.45; }

.cs-flow li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--on-dark);
}

.cs-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: -4px;
  left: 4.25px;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.45);
}

.cs-flow li:last-child::before { background: var(--dot); box-shadow: 0 0 0 5px rgba(75, 224, 103, 0.22); }

@media (min-width: 900px) {
  .cs-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .cs-flow li { padding: 30px 0 0; }
  .cs-flow li:not(:last-child)::after { top: 4.25px; bottom: auto; left: 18px; right: -18px; width: auto; height: 1.5px; }
}

.cs-panel-notes {
  display: grid;
  gap: 24px;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid var(--on-dark-line);
}

@media (min-width: 720px) { .cs-panel-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-panel-notes h3 { font-size: 1.0625rem; color: var(--on-dark); }
.cs-panel-notes p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.55; }

.cs-list { margin: 0; padding: 0; list-style: none; }
.cs-list li { position: relative; padding: 7px 0 7px 22px; color: var(--on-dark); }
.cs-list li::before { content: ""; position: absolute; top: calc(7px + 0.75em - 3px); left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark); }

.on-dark .cs-eyebrow,
.card--dark .cs-eyebrow { color: var(--lime); }

.cs-quote {
  padding-left: 18px;
  border-left: 3px solid var(--lime);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink);
}


.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-source { margin-top: 14px; font-size: 0.8125rem; color: var(--ink-3); }

@media (min-width: 720px) {
  .compare--4 tbody th { width: 17%; }
  .compare--4 td { width: auto; font-size: 1rem; }
}

/* Misc -------------------------------------------------------------------- */

.check-list { margin: 0; padding: 0; list-style: none; }

.check-list li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.check-list li:last-child { border-bottom: 0; }
.check-list .icon { width: 16px; height: 16px; margin-top: 4px; color: var(--ink-4); stroke-width: 2; }

/* Legal headings stay in Onest: they are small, and they are for scanning, not for voice. */
.legal .prose h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.375rem; letter-spacing: -0.03em; }
.legal .prose h3 { font-size: 1rem; }

.mt-s { margin-top: 18px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: clamp(28px, 4vw, 44px); }
.plain-list { margin: 0; padding: 0; list-style: none; }
.hero-note { margin-top: 18px; font-size: 0.8125rem; color: var(--ink-3); }
.label .icon { width: 16px; height: 16px; }

@media (min-width: 1024px) {
  .bento--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento--2 .bento-card { min-height: 420px; }
}

.showcase--hero { min-height: clamp(400px, 48vw, 620px); }
.showcase--hero .ui { max-width: 560px; }

.card--media { gap: 10px; }
.card-media { margin-bottom: 14px; }
.card-media .ui { max-width: none; }
.card--media h3 { font-size: 1.125rem; }
.card--media p { font-size: 0.9375rem; }

.mm-group a .icon { width: 16px; height: 16px; color: var(--ink-4); }
.contact-line { margin-top: 16px; color: var(--on-dark-2); }

@media (max-width: 1023px) {
  .split-btn > .btn { border-radius: 999px; padding-right: 14px; }
}

/* Satra stations (sticky stage on wide screens) --------------------------- */

.stations { display: grid; gap: 24px; }

.station { padding: 8px 0; }
.station-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px; background: var(--surface); color: var(--ink); }
.station-num { font-size: 0.8125rem; color: var(--ink-3); }
.station h3 { margin: 6px 0 10px; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.03em; }
.station p { color: var(--ink-2); max-width: 30em; }

.station .checklist { margin: 16px 0 0; }
.station-ui .showcase { min-height: 0; padding-block: clamp(40px, 6vw, 72px); border-radius: var(--radius); }
.station-ui .showcase .corner { display: none; }

@media (min-width: 1024px) {
  .stations.is-enhanced {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 0;
  }
  .stations.is-enhanced .station {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 66vh;
    padding: 32px 0;
  }
  .stations.is-enhanced .station h3,
  .stations.is-enhanced .station p,
  .stations.is-enhanced .station .checklist li { transition: color 0.4s ease; }
  .stations.is-enhanced .station-icon,
  .stations.is-enhanced .station .checklist .icon { transition: opacity 0.4s ease; }
  /* Inactive stations step back to the secondary grey, which still reads at 4.5:1. */
  .stations.is-enhanced .station:not(.is-active) h3,
  .stations.is-enhanced .station:not(.is-active) p,
  .stations.is-enhanced .station:not(.is-active) .checklist li { color: var(--ink-3); }
  .stations.is-enhanced .station:not(.is-active) .station-icon,
  .stations.is-enhanced .station:not(.is-active) .checklist .icon { opacity: 0.4; }
  .stations.is-enhanced .station:nth-of-type(1) { grid-row: 1; }
  .stations.is-enhanced .station:nth-of-type(2) { grid-row: 2; }
  .stations.is-enhanced .station:nth-of-type(3) { grid-row: 3; }
  .stations.is-enhanced .station:nth-of-type(4) { grid-row: 4; }
  .stations.is-enhanced .station:nth-of-type(5) { grid-row: 5; }
  .stations.is-enhanced .station:nth-of-type(6) { grid-row: 6; }
  .stations.is-enhanced .station-ui {
    grid-column: 2;
    grid-row: 1 / span var(--stations, 5);
    position: sticky;
    top: calc(var(--header-h) + 6vh);
    align-self: start;
    height: calc(100vh - var(--header-h) - 12vh);
    min-height: 480px;
    max-height: 660px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.985);
    transition: opacity 0.2s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s linear 0.2s;
  }
  /* The outgoing screen has mostly gone before the next one arrives, so the two never sit on top of each other. */
  .stations.is-enhanced .station-ui.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.4s var(--ease-out) 0.1s, transform 0.5s var(--ease-out) 0.1s, visibility 0s;
  }
  .stations.is-enhanced .station-ui .showcase { height: 100%; }
}

.station-progress { display: none; }

@media (min-width: 1024px) {
  .stations.is-enhanced .station-progress { position: absolute; left: 22px; top: 22px; z-index: 2; display: flex; gap: 6px; }
  .station-progress i { width: 22px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
  .station-progress i.on { background: var(--on-dark); }
}

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  /* Every page plays this on arrival, so it is over in well under a second. */
  .intro > * { animation: intro-rise 0.6s var(--ease-out) both; }
  .intro > :nth-child(2) { animation-delay: 50ms; }
  .intro > :nth-child(3) { animation-delay: 100ms; }
  .intro > :nth-child(4) { animation-delay: 150ms; }
  .intro > :nth-child(5) { animation-delay: 200ms; }
  .intro--late > :nth-child(1) { animation-delay: 200ms; }
  .intro--late > :nth-child(2) { animation-delay: 250ms; }
  .intro--late > :nth-child(3) { animation-delay: 300ms; }

  /* The headline is the largest paint on most pages, so it moves but never starts hidden. */
  .intro h1,
  .intro .display { animation: glide 0.7s var(--ease-out) both; }
  .intro > .hero-shot { animation: shot-rise 0.9s var(--ease-out) 60ms both; }

  /* Each headline word comes into focus in turn, starting visible so the first paint keeps it. */
  h1 .w {
    animation: focus-in 0.6s var(--ease-out) backwards;
    animation-delay: calc(var(--wi, 0) * 30ms + 40ms);
  }

  /* Only product screens rise into view; text and buttons are simply there. The rise is a
     one-time animation, not a transition, so once it has played a card's own press applies again. */
  .reveal:not([data-reveal="stagger"]):not(.is-in),
  .reveal[data-reveal="stagger"]:not(.is-in) > * { opacity: 0; }

  .reveal.is-in:not([data-reveal="stagger"]),
  .reveal[data-reveal="stagger"].is-in > * { animation: reveal-rise 0.6s var(--ease-out) var(--d, 0ms) backwards; }

  /* The globe's one moment: South Asia lights up, the line runs to Europe, Europe lights up. */
  .globe-arc path { stroke-dasharray: 1; transition: stroke-dashoffset 1.4s var(--ease-in-out) 0.5s; }
  .globe-pin { transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out); }
  .globe-pin--sa { transition-delay: 0.3s; }
  .globe-pin--eu { transition-delay: 1.75s; }
  .globe-stage.reveal:not(.is-in) .globe-arc path { stroke-dashoffset: 1; }
  .globe-stage.reveal:not(.is-in) .globe-pin { opacity: 0; transform: translateY(8px); }

  @supports (animation-timeline: view()) {
    .zoom-in {
      animation: zoom-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

@keyframes intro-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes reveal-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
}

@keyframes glide {
  from { transform: translate3d(0, 0.22em, 0); }
  to { transform: none; }
}

/* Ported from React Bits Blur Text, focus effect (notice: /assets/js/react-bits-license.txt). */
@keyframes focus-in {
  from { filter: blur(0.18em); opacity: 0.32; transform: scale(1.12); }
  72% { filter: blur(0.015em); opacity: 0.95; transform: scale(0.995); }
  to { filter: none; opacity: 1; transform: none; }
}

h1 .w { display: inline-block; }
.w1 { --wi: 1; } .w2 { --wi: 2; } .w3 { --wi: 3; } .w4 { --wi: 4; } .w5 { --wi: 5; } .w6 { --wi: 6; }
.w7 { --wi: 7; } .w8 { --wi: 8; } .w9 { --wi: 9; } .w10 { --wi: 10; } .w11 { --wi: 11; } .w12 { --wi: 12; }
.w13 { --wi: 13; } .w14 { --wi: 14; } .w15 { --wi: 15; } .w16 { --wi: 16; } .w17 { --wi: 17; } .w18 { --wi: 18; }
.w19 { --wi: 19; } .w20 { --wi: 20; } .w21 { --wi: 21; } .w22 { --wi: 22; } .w23 { --wi: 23; } .w24 { --wi: 24; }

@keyframes shot-rise {
  from { transform: translate3d(0, 56px, 0) scale(0.965); }
  to { transform: none; }
}

@keyframes zoom-in {
  from { transform: scale(0.94); }
  to { transform: none; }
}

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
  animation-timing-function: var(--ease-out);
}

/* Reduced motion means less movement, not no feedback. Entrances, reveals, scroll zooms and
   hover nudges already sit behind no-preference above. What is left keeps its fades and colour
   changes, because they show a state has changed, and loses anything that travels. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  .dropdown,
  .mm-group,
  .stations.is-enhanced .station-ui { transform: none; }

  /* The header fades out of the way instead of sliding. */
  .site-header { transition: opacity 0.2s ease, visibility 0s, border-color 0.2s ease, background-color 0.2s ease; }
  .site-header.is-hidden { transform: none; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }

  .aql-counter .meter i { transition: background-color 0.2s ease; }
}

/* Touch ------------------------------------------------------------------- */

.btn,
button,
summary,
[role="tab"] { touch-action: manipulation; }

/* A long press on a control should not select its label. Links keep their
   long-press menu, so a visitor can still copy or share them. */
.btn,
button,
.pill {
  -webkit-user-select: none;
  user-select: none;
}

button { -webkit-touch-callout: none; }

/* On touch screens every control gets a 44px target. Compact controls keep their
   look and get an invisible hit area; stacked lists get taller rows instead,
   so neighbouring hit areas never overlap. */
@media (pointer: coarse) {
  .tab,
  .btn--sm,
  .pill,
  .brand,
  .crumbs a,
  a.more:not(.stretched),
  .note-meta a { position: relative; }

  .tab::after,
  .btn--sm::after,
  .pill::after,
  .brand::after,
  .crumbs a::after,
  a.more:not(.stretched)::after,
  .note-meta a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  .menu-toggle::after { content: ""; position: absolute; inset: -2px; }

  /* Wrapped rows of tabs keep their hit areas apart. */
  .tabs { row-gap: 12px; }

  .stepper button { width: 44px; height: 44px; }
  .link-stack a { display: inline-flex; align-items: center; min-height: 44px; }
  .faq-nav a { height: 44px; }

  .footer-col ul { gap: 0; }
  .footer-col a { display: flex; align-items: center; min-height: 44px; }

  .tl-source { row-gap: 0; }
  .tl-source a { min-height: 44px; }

  .aql-range { height: 44px; }
  .aql-range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
  .aql-range::-moz-range-thumb { width: 28px; height: 28px; }
}

/* Print ------------------------------------------------------------------- */

@media print {
  .site-header,
  .mobile-menu,
  .site-footer,
  .cta,
  .skip-link { display: none !important; }
  .section { padding-block: 24px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}