/* Stefan Supply — built 1:1 from the Figma file "Stef Supply", page Design.
   Tokens below are the local styles in that file. Do not introduce a raw hex. */

/* Unmodified Switzer webfonts from Fontshare, served locally to avoid a
   render-blocking third-party stylesheet. See fonts/README.md. */
@font-face {
  font-family: 'Switzer';
  src: url('./fonts/switzer-regular-e23161fd.woff2?v=e23161fd') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('./fonts/switzer-medium-a7cfda8e.woff2?v=a7cfda8e') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('./fonts/switzer-semibold-eb58db2b.woff2?v=eb58db2b') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ink and text */
  --ink-900: #101010;
  --ink-700: #2a2a2a;
  --text-muted: #71717a;
  --text-subtle: #a1a1aa;
  --text-quiet: #b8b8b8;

  /* Surfaces */
  --surface-ground: #ffffff;
  --surface-bleed: #eaeaea;   /* page edge, outside the hatched bands */
  --surface-card: #f0f0f0;
  --surface-card-hover: color-mix(in srgb, var(--surface-card) 50%, transparent);
  --surface-placeholder: #e9e9e9;
  --surface-hover: #e6e6e6;   /* one step under card, so hover actually shows */

  /* Lines */
  --line-rule: #e7e7e7;
  --line-border: #eaeaea;
  --line-strong: #cdcdcd;
  --line-hatch: #d9d9d9;
  --line-blueprint: #dcdcdc;   /* grid on the bleed, outside the hatched bands */
  --blueprint-cell: 72px;
  /* 25% quieter than the original 75% hatch treatment. */
  --line-hatch-soft: color-mix(in srgb, var(--line-hatch) 56.25%, transparent);
  --line-soft: #e4e4e4;

  /* Accents */
  --accent-red: #e64a43;
  --accent-yellow: #fdb831;
  --accent-blue: #0180e5;
  --accent-success: #187b3f;

  /* Layout */
  --column: 1200px;
  --gutter: 40px;
  --bleed: clamp(12px, 8.34vw, 120px);
  --band: 82px;
  --measure: 640px;
  --eyebrow-size: 31px;
  --eyebrow-gap: 14px;
  --head-gap: 4px;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

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

html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }

/* Only replaceable page sections fade. The persistent header, white ground and
   side rails remain untouched, and there is deliberately no position change. */
.ss-route-fade-out { animation: ss-route-out 160ms var(--ease) both; }
.ss-route-fade-in { animation: ss-route-in 200ms var(--ease) both; }
@keyframes ss-route-out { to { opacity: 0; } }
@keyframes ss-route-in { from { opacity: 0; } }
/* Keep the closed header below the divider's corner markers at every size.
   Only the open responsive menu needs its own elevated stacking context. */
.shell.site-header { z-index: auto; }
@media (max-width: 1023px) {
  html.nav-open .shell.site-header { z-index: 20; }
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  font-family: Switzer, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink-900);
  background-color: var(--surface-bleed);
  position: relative;
  /* large blueprint squares, only ever visible on the bleed either side of
     the hatched rails - every section paints its own ground over the top */
  -webkit-font-smoothing: antialiased;
}

/* Blueprint grid on the bleed. Two strips, each half the viewport and anchored to
   its own edge, so a whole cell lands flush left and flush right. They are split
   rather than layered because two overlapping gradients double up the 1px line
   wherever they cross. The seam where they meet sits under the content column. */
body::before,
body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* exactly the bleed: page edge -> hatched band. Measured against the rails:
     (viewport - content column) / 2, less the band. `background-repeat: round`
     then nudges the tile so a WHOLE number of cells fills that width, which is
     why no square is ever clipped where the grid meets the band. */
  width: max(0px, calc((100vw - var(--column)) / 2 - var(--band)));
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--line-blueprint) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-blueprint) 0 1px, transparent 1px);
  background-size: var(--blueprint-cell) var(--blueprint-cell);
}
/* each strip draws its vertical rule on the edge that faces the page border,
   so a whole cell is closed off flush left and flush right */
body::before { left: 0;  background-position: left top, left top; }
body::after {
  right: 0;
  background-position: right top, right top;
  background-image:
    linear-gradient(to left,   var(--line-blueprint) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-blueprint) 0 1px, transparent 1px);
}

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

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

/* ---------------------------------------------------------------- shell */

.shell {
  position: relative;
  z-index: 1;
  /* never wider than the column, and never touching the viewport edge */
  width: min(var(--column), 100% - var(--bleed) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  background: var(--surface-ground);
  /* Preserve the original box geometry, but let the fixed rails own the
     visible seams so they remain steady during route fades. */
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

/* One continuous rail behind the whole page, rather than a band per section.
   A per-section band restarts the diagonal pattern at every boundary, so the
   lines never meet across a divider. Drawn once, it cannot misalign. */
.rails {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.rails__col {
  width: min(var(--column), 100% - var(--bleed) * 2);
  height: 100%;
  margin-inline: auto;
  position: relative;
  background: var(--surface-ground);
}
.rails__col::before,
.rails__col::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(var(--band), var(--bleed));
  /* Let 25% of the grey outer surface show through the white rail fill. */
  background-color: color-mix(in srgb, var(--surface-ground) 75%, transparent);
  background-image: repeating-linear-gradient(
    135deg,
    var(--line-hatch-soft) 0 1px,
    transparent 1px 10px
  );
}
.rails__col::before {
  right: 100%;
  box-shadow: inset 1px 0 var(--line-rule), inset -1px 0 var(--line-rule);
}
.rails__col::after {
  left: 100%;
  box-shadow: inset -1px 0 var(--line-rule), inset 1px 0 var(--line-rule);
}

/* Divider lines cross the hatched rails, with node squares sitting where the
   rails meet the main white column. */
/* Sections are all z-index 1, so the section after a divider would paint over
   the node markers, clipping their bottom-right corner. The divider row has to
   outrank every section, not just its own children. */
.shell--divider { z-index: 5; }
.shell--divider::before,
.shell--divider::after {
  content: "";
  position: absolute;
  top: 0;
  width: min(var(--band), var(--bleed));
  height: 1px;
  z-index: 0;
  background: var(--line-rule);
  pointer-events: none;
}
.shell--divider::before { right: 100%; }
.shell--divider::after  { left: 100%; }

/* On desktop, carry content dividers through the hatched rail and the outer
   blueprint grid. The content rhythm wins, so edge cells may end partially. */
@media (min-width: 1024px) {
  :root {
    --page-edge: max(var(--bleed), calc((100vw - var(--column)) / 2));
    --rail-width: min(var(--band), var(--bleed));
    --outer-grid-width: max(0px, calc(var(--page-edge) - var(--rail-width)));
  }

  /* Vertical grid lines remain continuous. Horizontal rows restart inside
     each content section so their first and last edges meet the dividers. */
  body::before {
    background-image: linear-gradient(to right, var(--line-blueprint) 0 1px, transparent 1px);
  }
  body::after {
    background-image: linear-gradient(to left, var(--line-blueprint) 0 1px, transparent 1px);
  }

  .shell:not(.shell--divider)::before,
  .shell:not(.shell--divider)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--outer-grid-width);
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(to bottom, var(--line-blueprint) 0 1px, transparent 1px);
    background-size: 100% var(--blueprint-cell);
    background-repeat: no-repeat round;
  }
  .shell:not(.shell--divider)::before { right: calc(100% + var(--rail-width)); }
  .shell:not(.shell--divider)::after  { left: calc(100% + var(--rail-width)); }

  /* The header is shorter than the normal blueprint cell. Treat its outer
     bleed as one full-height cell, closed by the divider directly below it. */
  .site-header::before,
  .site-header::after {
    display: none;
  }

  .shell--divider::before,
  .shell--divider::after {
    width: var(--page-edge);
  }
}

.sep {
  position: relative;
  z-index: 1;
  height: 1px;
  margin: 0 calc(var(--gutter) * -1);
  background: var(--line-rule);
}
.sep::before, .sep::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--surface-card) 85%, var(--ink-900));
  border: 1px solid color-mix(in srgb, var(--line-soft) 85%, var(--ink-900));
}
.sep::before { left: -6px; }
.sep::after  { right: -6px; }

/* ---------------------------------------------------------------- type */

.display  { font-size: 60px; line-height: 1.06; letter-spacing: -2px;   font-weight: 500; margin: 0; }
.h-section{ font-size: 40px; line-height: 1.10; letter-spacing: -1.9px; font-weight: 500; margin: 0; }
.h-panel  { font-size: 36px; line-height: 1.18; letter-spacing: -1.4px; font-weight: 500; margin: 0; }
.h-small  { font-size: 18px; line-height: 1.30; letter-spacing: -0.3px; font-weight: 500; margin: 0; }
.h-card   { font-size: 17px; line-height: 1.30; letter-spacing: -0.3px; font-weight: 500; margin: 0; }
.h-item   { font-size: 16px; line-height: 1.32; letter-spacing: -0.2px; font-weight: 500; margin: 0; }

.lead     { font-size: 17px; line-height: 1.4; color: var(--text-muted); margin: 0; }
.body     { font-size: 15px; line-height: 1.4; color: var(--text-muted); margin: 0; }
.body-sm  { font-size: 15px; line-height: 1.4; color: var(--text-muted); margin: 0; }
.body-ft  { font-size: 14px; line-height: 1.4; color: var(--text-muted); margin: 0; }
.body-cd  { font-size: 13px; line-height: 1.4; color: var(--text-muted); margin: 0; }

.caps {
  font-size: 11px; font-weight: 500; line-height: 1;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-subtle); margin: 0;
}

.quiet { color: var(--text-quiet); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Soft navigation moves accessibility focus to the incoming page title.
   Keep that announcement without Chromium's non-interactive focus outline. */
h1[tabindex="-1"]:focus { outline: none; }

/* Keep the source phrases separate for localization, but let each language
   wrap them as one balanced sentence. */
.section-head { display: grid; gap: var(--head-gap); }
.section-title { display: block; text-wrap: balance; }
.section-title > span { display: inline; }
.section-title > span + span::before { content: " "; }
.bundle-page__hero-copy .section-title > span + span::before { content: none; }

/* ---------------------------------------------------------------- nav */

.access-banner {
  height: 36px;
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden;
  color: var(--surface-ground);
  background-color: var(--accent-blue);
  transition: background-color var(--dur-base) var(--ease);
  user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover) {
  .access-banner:hover { background-color: color-mix(in srgb, var(--accent-blue) 88%, var(--surface-ground)); }
}
.access-banner__link {
  display: block;
  height: 100%;
  cursor: pointer;
  touch-action: none;
  -webkit-user-drag: none;
}
.access-banner__link:focus-visible {
  outline: 2px solid var(--surface-ground);
  outline-offset: -2px;
}
.access-banner__divider {
  margin-inline: calc(var(--gutter) * -1);
  background: transparent;
}
.access-banner__divider-bleed {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  width: 100dvw;
  height: 1px;
  transform: translateX(-50%);
  /* The normal rule is only three RGB levels darker than the outer bleed,
     which made the viewport-wide part technically present but visually
     disappear. Match the blueprint grid so one clear line reads edge to edge. */
  background: var(--line-blueprint);
  pointer-events: none;
}
.access-banner__divider::before,
.access-banner__divider::after { z-index: 1; }
.access-banner__viewport {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.access-banner__track {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
  animation: access-banner-marquee 56s linear infinite;
}
.access-banner__group {
  display: flex;
  flex: none;
  align-items: center;
  height: 100%;
}
.access-banner__item {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding-inline: 12px;
  white-space: nowrap;
  font-size: calc(11px + 2pt);
  line-height: 1;
  letter-spacing: 0.01em;
}
.access-banner__label,
.access-banner__detail {
  font-size: inherit;
  font-weight: 500;
  letter-spacing: inherit;
}
.access-banner__mark { color: color-mix(in srgb, var(--surface-ground) 60%, transparent); }
.access-banner__detail { color: color-mix(in srgb, var(--surface-ground) 88%, transparent); }
.access-banner__arrow { font-size: 15px; }

@keyframes access-banner-marquee {
  to { transform: translateX(-50%); }
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 76px;
}
.nav__brand { display: flex; align-items: center; gap: 8px; margin-right: auto; }
/* the logo is a single lockup (mark + wordmark) exported from Figma,
   so height drives it and the width follows the 127:40 ratio */
.nav__logo { height: 48px; width: auto; display: block; }
/* .wordmark removed: the lockup SVG now carries the type. */

/* 44px gives each destination its own visual group despite the active dot
   sitting 11px into the space before its label. */
.nav__links { display: flex; align-items: center; gap: 44px; margin-right: 0; }
.nav__links a {
  position: relative;
  font-size: 15px; font-weight: 600; color: var(--text-muted);
  display: inline-flex; align-items: center;
  transition: color var(--dur-base) var(--ease);
}
/* Active page gets a dot in front. Absolutely positioned on purpose: in the
   flow it would push its own label sideways, so the menu shifted depending on
   which page you were on. Out of the flow, every item keeps its exact spot. */
.nav__links a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -11px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 999px;
  background: var(--ink-900);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink-900); }
.nav__menu-toggle,
.nav__menu { display: none; }

.locale-picker { position: relative; flex: none; }
.locale-picker--mobile { display: none; }
.locale-picker__button {
  appearance: none;
  width: 55px;
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink-900);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease);
}
.locale-picker__button:hover,
.locale-picker.is-open .locale-picker__button { background: var(--surface-card); }
.locale-picker__button:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.locale-picker__button .locale-picker__globe { width: 20px; height: 20px; }
.locale-picker__caret {
  width: 12px;
  height: 12px;
  transition: transform var(--dur-base) var(--ease);
}
.locale-picker.is-open .locale-picker__caret { transform: rotate(180deg); }
.locale-picker__current { display: none; }
.locale-picker__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: 164px;
  padding: 6px;
  background: var(--surface-ground);
  border: 1px solid var(--line-border);
  border-radius: 10px;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--ink-900) 14%, transparent);
}
.locale-picker__menu[hidden] { display: none; }
.locale-picker__menu a {
  position: relative;
  display: block;
  padding: 9px 12px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.2;
  border-radius: 6px;
  transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.locale-picker__menu a:hover,
.locale-picker__menu a:focus-visible {
  color: var(--ink-900);
  background: var(--surface-card);
  outline: none;
}
.locale-picker__menu a[aria-current="true"] {
  color: var(--ink-900);
  font-weight: 600;
}
.locale-picker__menu a[aria-current="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 999px;
  background: var(--ink-900);
}

/* Phosphor Duotone, inlined as a sprite. One currentColor drives both the
   0.2-opacity tone and the solid shape, so icons inherit their context. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
  vertical-align: -0.145em;
}
.icon--eyebrow {
  display: block;
  width: var(--eyebrow-size); height: var(--eyebrow-size);
  margin-bottom: var(--eyebrow-gap);
}

/* Accent tones. The same four run across the why row and the section
   eyebrows, so a duotone icon always reads as part of the brand palette. */
.tone--red    { color: var(--accent-red); }
.tone--yellow { color: var(--accent-yellow); }
.tone--blue   { color: var(--accent-blue); }
.tone--green  { color: var(--accent-success); }
.tone--charcoal { color: var(--ink-700); }
.tone--ink    { color: var(--ink-900); }
.icon--tlink   {
  /* 4px larger than the text it follows, whatever that size is */
  width: calc(1em + 4px); height: calc(1em + 4px);
  margin-left: 0;
  transition: transform var(--dur-base) var(--ease);
}
.icon--lead    { margin-right: 0.4em; }
.icon--note    { margin-right: 0.4em; color: var(--accent-success); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500; border-radius: 8px;
  border: 0.5px solid rgba(0, 0, 0, 0.75); cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.btn--primary { background: var(--ink-900); color: var(--surface-card); }
.btn--primary:hover { background: var(--ink-700); }
.btn--ghost {
  background: var(--surface-card); color: var(--ink-900);
}
.btn--ghost:hover { background: var(--surface-hover); }
.btn--ondark { background: var(--surface-card); color: var(--ink-900); }
.btn--ondark:hover { background: var(--surface-hover); }

/* Liquid metal button (Joly UI, MIT). The shader is the 2px RIM, not the fill:
   a near-black plate sits inset over it, so the button stays black and only the
   border comes alive. Without JS/WebGL it degrades to the plain black button. */
.btn--metal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  box-shadow: none;
  /* The plain black button is visible and clickable from first paint. The
     decorative shader layers take over only after WebGL is ready, so a quick
     first tap can never land on a visible control with pointer input disabled. */
}
.btn--metal:not(.btn--metal--light) {
  /* Match the final plate before WebGL is ready so initialization changes only
     the rim, never the button silhouette or its dark center. */
  background: linear-gradient(180deg, #202020 0%, #000000 100%);
}
.btn--metal:not(.btn--metal--light):not(.is-live):hover {
  background: linear-gradient(180deg, #333333 0%, #141414 100%);
}
.btn--metal.is-live,
.btn--metal.is-fallback {
  animation: none;
}
.btn--metal .btn__shader {
  /* Absolute children are laid out from the button's padding box. Extend by
     the outer hairline so the shader reaches the true outer edge. */
  position: absolute; inset: -1px; z-index: 0;
  border-radius: inherit;
  opacity: 0;
  /* Firefox will not clip a composited WebGL canvas to the parent's
     overflow:hidden + border-radius, so the shader leaks out as a square.
     A filter forces the layer to rasterise on its own surface, where the
     clip IS honoured — which is why the button looked correct on hover
     (where a brightness filter already applied) and broken at rest.
     brightness(1) is a visual no-op that keeps that path active always.
     It also makes the hover filter animate: none -> brightness() does not
     interpolate, brightness(1) -> brightness(1.45) does. */
  clip-path: inset(0 round 999px);
  filter: brightness(1);
  /* The original shader demo sits on near-black. This underlay remains visible
     only where the pill shader is transparent and keeps a continuous graphite
     rim after its reference frame is stretched to very long buttons. */
  background: #060606;
}
.btn--metal .btn__shader-source {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: inherit;
  transform: scaleX(var(--metal-stretch, 1));
  transform-origin: left center;
}
/* Full-width form actions are a separate metal-button geometry. Their shader
   paints the real control width and the outer layer supplies the pill clip, so
   compact CTA shader proportions cannot be stretched into distorted ends. */
.btn--metal-wide .btn__shader-source {
  transform: none;
}
.btn--metal .btn__shader canvas {
  position: absolute; inset: 0; display: block;
  width: 100% !important; height: 100% !important;
  border-radius: inherit;
  clip-path: inset(0 round 999px);
}
.btn--metal .btn__plate {
  /* The button border supplies the outer dark hairline. Two more pixels from
     the padding edge preserve a full 2px animated rim inside that frame. The
     light variant below only overrides the plate background. */
  position: absolute; inset: 2px; z-index: 1;
  border-radius: 999px;
  background: linear-gradient(180deg, #202020 0%, #000000 100%);
  opacity: 0;
  transition: background var(--dur-base) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  pointer-events: none;
}
.btn--metal .btn__label { position: relative; z-index: 2; }
.btn--metal.is-live { background: transparent; }
.btn--metal.is-live .btn__shader,
.btn--metal.is-live .btn__plate { opacity: 1; }
/* Keep the shader button anchored like every other button. */
.btn--metal.is-live:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}
/* Hover accelerates the shader in JS and visibly brightens the metal rim. The
   filter stays below the label so the text remains crisp. */
.btn--metal .btn__shader,
.btn--metal .btn__plate { transition: filter var(--dur-base) var(--ease),
                                      background var(--dur-base) var(--ease),
                                      box-shadow var(--dur-fast) var(--ease); }
.btn--metal.is-live:hover .btn__shader { filter: brightness(1.45) saturate(1.15); }
.btn--metal.is-live:hover .btn__plate {
  background: linear-gradient(180deg, #333333 0%, #141414 100%);
}
.btn--metal.is-live:active .btn__plate {
  box-shadow: none;
}
.btn--metal.is-live:active {
  box-shadow: none;
}
/* Light variant: same metal rim, but a pale plate and ink label so the
   secondary button matches the primary's treatment without going dark.

   ARCHIVED — deliberately kept though nothing currently uses it. It was the
   hero's "See everything" button before that became a text link, and it is
   wanted again elsewhere. Do not delete as dead CSS. To use it:

     <a class="btn btn--ghost btn--metal btn--metal--light btn--md" href="#">
       Label
     </a>

   metal.js picks up any .btn--metal automatically, so no JS change needed. */
.btn--metal--light.is-live { color: var(--ink-900); }
.btn--metal--light .btn__plate {
  background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
}
.btn--metal--light.is-live:hover .btn__plate {
  background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
}
/* the rim reads darker against a pale plate, so lift it less on hover */
.btn--metal--light.is-live:hover .btn__shader { filter: brightness(1.2) saturate(1.2); }
.btn--metal--light .btn__ripple { background: rgba(16, 16, 16, 0.18); }

.btn--metal .btn__ripple {
  position: absolute; z-index: 2; border-radius: 999px; pointer-events: none;
  background: rgba(255, 255, 255, 0.5);
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  animation: btn-ripple 600ms var(--ease) forwards;
}
@keyframes btn-ripple {
  from { transform: scale(0); opacity: 0.6; }
  to   { transform: scale(9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--metal .btn__ripple { display: none; }
}

.btn--sm { height: 38px; padding: 0 12px; }
.btn--md { height: 50px; padding: 0 28px; }
.btn--lg { height: 52px; padding: 0 26px; }

/* Polar's session can occasionally miss its parent origin, so these controls
   close the embedded iframe from the host page as a reliable fallback. */
.checkout-close-zone,
.checkout-close-button {
  position: fixed;
  z-index: 2147483647;
  border: 0;
  cursor: pointer;
}
.checkout-close-zone { padding: 0; background: transparent; }
.checkout-close-zone--left,
.checkout-close-zone--right {
  top: 0;
  bottom: 0;
  width: max(16px, calc((100vw - 512px) / 2));
}
.checkout-close-zone--left { left: 0; }
.checkout-close-zone--right { right: 0; }
.checkout-close-zone--top {
  top: 0;
  left: max(16px, calc((100vw - 512px) / 2));
  right: max(16px, calc((100vw - 512px) / 2));
  height: 24px;
}
.checkout-close-button {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font: 32px/1 Arial, sans-serif;
}
.checkout-close-button:hover { background: #f1f1f1; }
.checkout-close-button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .checkout-close-zone--top { display: none; }
  .checkout-close-button { top: 8px; right: 8px; }
}

.checkout-loading-screen,
.checkout-success-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  padding: 24px;
}
.checkout-loading-screen { background: rgba(16, 16, 16, 0.5); }
.checkout-success-screen {
  background: color-mix(in srgb, var(--ink-900) 68%, transparent);
}
.checkout-loading-card,
.checkout-success-card {
  width: min(100%, 420px);
  padding: 32px;
  display: grid;
  justify-items: center;
  gap: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface-card);
  color: var(--ink-900);
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
.checkout-success-card {
  position: relative;
  width: min(100%, 384px);
  padding: 40px;
  gap: 0;
  border-color: var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.24);
}
.checkout-success-card:focus { outline: none; }
.checkout-success-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-hover);
  color: var(--text-muted);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
/* Keep a 44px touch target around the smaller visible circle. */
.checkout-success-dismiss::after { content: ""; position: absolute; inset: -10px; }
.checkout-success-dismiss:hover { background: var(--line-hatch); color: var(--ink-900); }
.checkout-success-dismiss:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 3px; }
.checkout-processing-help {
  position: fixed;
  z-index: 2147483647;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(380px, calc(100% - 32px));
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-card);
  color: var(--ink-900);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.checkout-processing-help p { margin: 0 0 8px; }
.checkout-processing-help__link { color: var(--accent-primary, #0180e5); text-decoration: underline; text-underline-offset: 3px; }
.checkout-processing-help__link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.checkout-close-button[hidden], .checkout-close-zone[hidden] { display: none; }
.checkout-loading-card strong,
.checkout-success-card h2 { margin: 0; font-size: 30px; line-height: 1.12; }
.checkout-loading-card > span:last-child,
.checkout-success-card p { color: var(--text-muted); }
.checkout-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line-strong);
  border-top-color: var(--ink-900);
  border-radius: 50%;
  animation: checkout-spin 700ms linear infinite;
}
.checkout-success-mark {
  display: block;
  margin-bottom: 20px;
  color: var(--accent-success);
}
.checkout-success-mark svg { display: block; width: 44px; height: 44px; fill: currentColor; }
.checkout-success-copy { display: grid; gap: 10px; margin-top: 16px; }
.checkout-success-copy p { max-width: 38ch; margin: 0; line-height: 1.5; }
@media (max-width: 560px) {
  .checkout-success-screen { padding: 16px; }
  .checkout-success-card { padding: 32px 24px; }
  .checkout-success-card h2 { font-size: 26px; }
}
@keyframes checkout-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .checkout-loading-spinner { animation: none; }
}

.is-checkout-loading { cursor: progress; }

/* text link with arrow */
.tlink {
  font-size: 15px; color: var(--ink-900);
  display: inline-flex; align-items: center; gap: 8px;
}
.tlink__label { transition: opacity var(--dur-base) var(--ease); }
.tlink:hover .tlink__label { opacity: 0.5; }
.tlink:hover .icon--tlink { transform: translateX(4px); }

/* ---------------------------------------------------------------- pill + badge */

/* Announcement eyebrow. The outlined success tag stays light beside the
   muted announcement copy while retaining the site's green accent. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--text-muted); font-size: 15px;
}
.eyebrow__tag {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px; border-radius: 40px;
  border: 1px solid var(--accent-success);
  background: transparent; color: var(--accent-success);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.eyebrow__text { border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease); }
.eyebrow:hover .eyebrow__text { border-bottom-color: var(--line-strong); }

/* ---------------------------------------------------------------- chips */

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  height: 36px; padding: 0 21px;
  display: inline-flex; align-items: center;
  border-radius: 999px; font-size: 14px; font-weight: 500;
  background: var(--surface-card); color: var(--text-muted);
  border: 1px solid var(--line-soft); cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.chip:hover { background: var(--surface-hover); }
.chip[aria-pressed="true"] {
  background: var(--ink-900); color: var(--surface-card); border-color: var(--ink-900);
}

/* ---------------------------------------------------------------- sections */

.section { padding-block: 64px 72px; }
.section__head {
  display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: end;
  margin-bottom: 40px;
}
/* Give homepage section intros enough measure to wrap their lead into two
   lines at desktop widths. Tablet and mobile keep the stacked layout below. */
@media (min-width: 1024px) {
  #templates .section__head,
  #pro .section__head,
  #business .section__head {
    grid-template-columns: minmax(0, 1fr) 504px;
    column-gap: 72px;
  }
}
/* The copy column shares the headline block's baseline at its lower edge. */
.section__intro > .body { margin-top: 0; }
.section__note { margin: 24px 0 0; }

.product-slider { min-width: 0; }
.product-slider__viewport {
  overflow: hidden;
  /* The resting cards keep the section gutter, while moving cards clip at
     the outer shell edge—the same rail logic used by the hero carousel. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.product-slider__track {
  display: flex;
  align-items: stretch;
  gap: var(--gutter);
  transition: transform 520ms var(--ease);
  will-change: transform;
}
.product-slide { flex: 0 0 100%; min-width: 0; }
.product-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 24px;
}
.product-slider__dots button {
  position: relative;
  width: 24px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.product-slider__dots button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--line-strong);
  transform: translate(-50%, -50%);
  transition: width var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.product-slider__dots button[aria-current="true"]::before {
  width: 18px;
  background: var(--ink-900);
}
.product-slider__dots button:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 0;
  border-radius: 999px;
}

/* ---------------------------------------------------------------- hero */

.hero { padding-block: 56px 16px; }
.hero .display { margin: 24px 0 28px; max-width: 900px; }
.hero .lead { max-width: 560px; font-size: 16px; }
.hero__actions { display: flex; align-items: center; gap: 24px; margin: 36px 0 18px; }
.hero__link { font-weight: 500; }
.hero__note { font-size: 15px; color: var(--text-subtle); }
.hero__note .icon--note {
  width: calc(1em + 4px);
  height: calc(1em + 4px);
  /* Offset half the increase to preserve the original vertical center. */
  vertical-align: calc(-0.145em - 2px);
}

/* ------------------------------------------------------ complete bundle */

.bundle-page__hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
  align-items: center;
  gap: 72px 64px;
  min-height: 720px;
  padding-block: 76px;
}
.bundle-page__hero-copy { position: relative; z-index: 2; }
.bundle-page__hero-copy > .caps { margin: 18px 0 0; }
.bundle-page__hero-copy .display { margin: 18px 0 24px; font-size: clamp(52px, 4.7vw, 70px); }
.bundle-page__hero-copy .lead { max-width: 600px; }
.bundle-page__hero-copy > .btn { margin-top: 28px; }
.bundle-page__hero-showcase { min-width: 0; }
.bundle-page__hero-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ink-900);
}
.bundle-page__visual-bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--surface-ground) 12%, transparent);
  background: var(--ink-900);
  color: var(--text-subtle);
}
.bundle-page__visual-bar span { width: 6px; height: 6px; border-radius: 999px; background: var(--text-muted); }
.bundle-page__visual-viewport {
  position: absolute;
  inset: 44px 0 0;
  margin: 0;
  padding: 0;
}
.bundle-page__visual-track { height: 100%; gap: 0; }
.bundle-page__visual-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 12px;
}
.bundle-page__hero-showcase > .product-slider__dots { margin-top: 16px; }
.bundle-page__hero-tile {
  position: relative;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surface-ground) 18%, transparent);
  border-radius: 8px;
  background: var(--surface-ground);
}
.bundle-page__hero-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.bundle-page__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 24px;
}
.bundle-page__price strong { font-size: 42px; line-height: 1; font-weight: 600; }
.bundle-page__price s { color: var(--text-muted); font-size: 18px; }
.bundle-page__price span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--accent-red);
  color: var(--surface-ground);
  font-size: 12px;
  font-weight: 600;
}
.bundle-page__benefits > .section-head,
.bundle-page__steps > .section-head { max-width: 680px; }
.bundle-page__benefits .section-head .body,
.bundle-page__steps .section-head .body { margin-top: 20px; }
.bundle-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}
.bundle-benefits article {
  min-height: 230px;
  padding: 30px;
  border: 1px solid var(--line-border);
  border-radius: 12px;
  background: var(--surface-card);
}
.bundle-benefits .h-item { margin: 20px 0 12px; }
.bundle-page__included-head { max-width: 720px; margin-inline: auto; text-align: center; }
.bundle-page__included-head .body { max-width: 580px; margin: 20px auto 0; }
.bundle-collections { margin-top: 56px; }
.bundle-category { padding-block: 52px 60px; border-top: 1px solid var(--line-rule); }
.bundle-category:first-child { padding-top: 0; border-top: 0; }
.bundle-category:last-child { padding-bottom: 0; }
.bundle-category__head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  align-items: end;
  gap: 48px;
  margin-bottom: 32px;
}
.bundle-category__head > .body { width: 100%; max-width: 450px; justify-self: end; }
.bundle-card .card__foot { margin-top: 18px; }
.bundle-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.bundle-step {
  position: relative;
  min-height: 220px;
  padding: 28px;
  border: 1px solid var(--line-border);
  border-radius: 12px;
  background: var(--surface-card);
  overflow: hidden;
}
.bundle-step > .contact__num {
  display: flex;
  width: 33px;
  height: 33px;
  border: 1px solid var(--ink-900);
  background: transparent;
  color: var(--ink-900);
  margin: 0 0 44px;
  font-size: 18px;
}
.bundle-step .h-item { margin-bottom: 12px; }
.bundle-offer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 64px;
  padding: 56px;
  border-radius: 12px;
  background: var(--ink-900);
  color: var(--surface-ground);
  overflow: hidden;
}
.bundle-offer > * { position: relative; z-index: 1; }
.bundle-offer__price { justify-content: flex-start; margin: 0 0 28px; }
.bundle-offer__price s { color: var(--text-subtle); }
.bundle-offer .h-panel { margin: 0 0 18px; }
.bundle-offer .body { max-width: 620px; color: var(--text-subtle); }
.bundle-offer__buy { min-width: 250px; }
.bundle-offer__buy > p { margin: 14px 0 0; color: var(--text-subtle); font-size: 13px; text-align: left; }

/* ---------------------------------------------------------------- carousel */

.carousel { padding-block: 12px 40px; }
.carousel__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.carousel__top--controls-only { justify-content: flex-end; }
.arrows { display: flex; gap: 8px; }
.arrow {
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-card); border: 1px solid var(--line-soft);
  color: var(--ink-900); font-size: 18px; cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.arrow:hover { background: var(--ink-900); color: var(--surface-ground); }
.arrow:disabled { color: var(--line-hatch); cursor: default; background: transparent; }
.arrow:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

.track {
  scroll-behavior: smooth;
  display: flex; gap: 24px;
  overflow: hidden; scroll-snap-type: none;
  scrollbar-width: none; -ms-overflow-style: none;
  /* clip at the column edge, exactly as the design does */
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
}
.track::-webkit-scrollbar { display: none; }
.track > figure { margin: 0; flex: 0 0 460px; scroll-snap-align: start; }
.track > figure:last-child { scroll-snap-align: end; }
.track__link { display: block; color: inherit; text-decoration: none; }
.track figcaption { padding-top: 16px; }
.track .name { font-size: 16px; font-weight: 500; letter-spacing: -0.2px; }
.track__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-top: 4px;
}
.track .meta { font-size: 15px; color: var(--ink-900); }
.track__link:hover .meta .icon--tlink { transform: translateX(4px); }

/* ---------------------------------------------------------------- mockup */

/* the minimal monitor: an ink frame with the artwork inset */
.mock {
  background: var(--ink-900);
  border-radius: 12px;
  padding: 10px;
}
.mock > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* placeholders have no intrinsic size, so they carry the ratio */
.mock > div {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: var(--surface-placeholder);
}
.mock--43  > * { aspect-ratio: 4 / 3; }
.mock--169 > * { aspect-ratio: 16 / 9; }
.mock--34  > * { aspect-ratio: 3 / 4; }

/* The screenshot itself—not the padded monitor frame—owns the 4:3 ratio.
   This keeps all four black insets equal and lets the inner radius clip the
   actual image corners, without stretching or letterboxing the artwork. */
.track .mock {
  width: 100%;
  height: auto;
}
.track .mock > * { width: 100%; height: auto; aspect-ratio: 4 / 3; }

/* card mockups keep the ratio but a tighter inset */
.card .mock { padding: 8px; border-radius: 10px; }
.card .mock--34 > * { max-width: 232px; margin: 0 auto; }

/* ---------------------------------------------------------------- cards */

.template-filter {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line-border);
  border-radius: 999px;
  background: transparent;
}
.template-filter a {
  appearance: none;
  min-width: 72px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.template-filter a { display: inline-flex; align-items: center; justify-content: center; }
.template-filter a:hover { color: var(--ink-900); background: var(--surface-hover); }
.template-filter a[aria-current="page"] { color: var(--surface-ground); background: var(--ink-900); }
.template-filter a:focus,
.template-filter a:focus-visible { outline: 0; box-shadow: none; }

.catalogue-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 40px;
}
.catalogue-head .section-head { max-width: 620px; }
.catalogue-head .section-head > .body { margin-top: 14px; }
.catalogue-head .template-filter { justify-self: end; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.card {
  background: var(--surface-card);
  border: 1px solid var(--line-border);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column;
  transition: background var(--dur-base) var(--ease);
}
.card:hover { background: var(--surface-card-hover); }
.card--product {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.card--product:focus { outline: none; }
.card--product:focus-visible {
  border-color: var(--ink-900);
  box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--ink-900);
}
.card[hidden] { display: none; }
.card__title { margin-top: 17px; }
.card__blurb { margin-top: 6px; flex: 1; }
.card__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 22px;
}
.card__view { font-size: 14px; color: var(--ink-900); }
.card--product:hover .card__view .tlink__label { opacity: 1; }
.card--product:hover .card__view .icon--tlink { transform: translateX(4px); }
.card__price { font-size: 24px; line-height: 1; font-weight: 500; color: var(--ink-900); }
.card__price--free { color: var(--accent-success); }
.card__price--soon { color: var(--text-subtle); }

/* ---------------------------------------------------------- template detail */

.template-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 64px;
  align-items: center;
}
.template-detail__media .mock { padding: 12px; border-radius: 14px; }
.template-detail__copy { max-width: 520px; }
.template-detail__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.template-detail__notion { display: block; width: 38px; height: 38px; }
.template-detail__copy .body { margin-top: 20px; }
.template-detail__price {
  margin: 0;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-900);
}
.template-detail__price--free { color: var(--accent-success); }
.template-detail__copy .btn { margin-top: 24px; }
.template-detail__security {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 22px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.template-detail__security-lock { width: 14px; height: 14px; }
.template-detail__polar-logo {
  display: block;
  width: 48px;
  height: auto;
  opacity: 0.58;
}
.template-detail__security-divider { margin-inline: 2px; font-size: 14px; }
.template-detail__stripe-logo {
  display: block;
  width: 36px;
  height: auto;
  opacity: 0.58;
  filter: brightness(0);
}
.template-detail__back { display: flex; width: fit-content; margin-top: 22px; }

/* ---------------------------------------------------------------- why */

.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-block: 56px; }
.why > div { position: relative; }
.why > div + div { padding-left: 40px; border-left: 1px solid var(--line-rule); }
.why__icon { display: block; font-size: 26px; line-height: 0; }
.why h3 { margin: 18px 0 12px; }

/* ---------------------------------------------------------------------- cta */


.cta {
  /* Keep both the complete showcase frame and its dark inner panel at 3:1. */
  aspect-ratio: 3 / 1;
  padding-block: calc((var(--gutter) / 3) + 16px);
}
.panel {
  background: var(--ink-900); color: var(--surface-card);
  border-radius: 12px; padding: 62px 56px 56px;
}
.panel .body { color: var(--text-subtle); margin: 18px 0 30px; max-width: 540px; }
.panel--bundle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: 56px;
  aspect-ratio: 3 / 1;
  min-height: 0;
  overflow: hidden;
}
.bundle__copy { position: relative; z-index: 2; }
.bundle__notion {
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: 20px;
}
.bundle__copy .body { margin-bottom: 22px; }
.bundle__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 24px;
}
.bundle__price strong { font-size: 28px; line-height: 1; font-weight: 500; color: var(--surface-ground); }
.bundle__was {
  align-self: flex-start;
  margin-top: 1px;
  margin-right: -6px;
  font-size: 13px;
  line-height: 1;
  color: var(--text-subtle);
  text-decoration: line-through;
}
.bundle__discount {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--accent-red);
  color: var(--surface-ground);
  font-size: 12px;
  font-weight: 600;
}
.bundle__visual {
  position: relative;
  width: 112%;
  height: 100%;
  min-height: 520px;
  margin-right: -18%;
  transform: scale(0.9);
  transform-origin: right center;
  overflow: visible;
}
.bundle__tile {
  position: absolute;
  width: 41.4%;
  margin: 0;
  padding: 5px;
  border-radius: 8px;
  background: var(--surface-ground);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}
.bundle__tile:nth-child(1) { left: -4%; top: -5%; transform: rotate(-2.5deg); z-index: 1; }
.bundle__tile:nth-child(2) { left: 36%; top: 2%; transform: rotate(1.5deg); z-index: 3; }
.bundle__tile:nth-child(3) { left: 76%; top: -7%; transform: rotate(-1deg); z-index: 2; }
.bundle__tile:nth-child(4) { left: 1%; top: 50%; transform: rotate(1.75deg); z-index: 3; }
.bundle__tile:nth-child(5) { left: 42%; top: 56%; transform: rotate(-2deg); z-index: 4; }
.bundle__tile:nth-child(6) { left: 81%; top: 47%; transform: rotate(2.25deg); z-index: 2; }
.bundle__tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}

@media (min-width: 1024px) {
  .panel--bundle {
    /* The invisible spanning row keeps 3:1 as the preferred minimum shape.
       Grid content can still make the row taller when copy wraps, so overflow
       never hides the price or CTA at narrower desktop widths. */
    padding-block: 20px;
    aspect-ratio: auto;
  }
  .panel--bundle::before {
    content: "";
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 3 / 1;
    visibility: hidden;
    pointer-events: none;
  }
  .bundle__copy {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
  }
  .bundle__copy .h-panel { font-size: 32px; letter-spacing: -1.1px; }
  .bundle__notion { margin-bottom: 12px; }
  .bundle__copy .body { margin: 12px 0 16px; }
  .bundle__price { margin-bottom: 18px; }
  .bundle__visual {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
  }
}

/* ---------------------------------------------------------------- footer */

.footer__divider { margin-top: auto; }
.footer { padding-block: 48px 32px; }
.footer__signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 445px);
  align-items: start;
  gap: 48px;
  padding-bottom: 48px;
}
.footer__signup-sep { margin-bottom: 40px; }
.footer__signup-copy { display: flex; align-items: flex-start; gap: 16px; }
.footer__signup-icon { width: 32px; height: 32px; }
.footer__signup-copy .body-ft { margin-top: 8px; }
.footer-signup { position: relative; min-width: 0; }
.footer-signup__row {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-ground);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.footer-signup__row:focus-within {
  border-color: var(--ink-900);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-900) 18%, transparent);
}
.footer-signup input[type="email"] {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-900);
  font: inherit;
  font-size: 15px;
}
.footer-signup input[type="email"]::placeholder { color: var(--text-subtle); }
.footer-signup input[type="email"]:focus { outline: 0; }
.footer-signup__row .btn {
  flex: none;
  width: 88px;
  min-width: 88px;
  height: 36px;
  padding-inline: 4px;
}
.footer-signup__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--surface-ground) 38%, transparent);
  border-top-color: var(--surface-ground);
  border-radius: 50%;
  animation: subscribe-spin 700ms linear infinite;
}
@keyframes subscribe-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .footer-signup__spinner { animation-duration: 1400ms; }
}
.footer-signup__fine,
.footer-signup__status { margin: 9px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-subtle); }
.footer-signup__fine a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer-signup__status { min-height: 17px; }
.footer-signup__status:empty { display: none; }
.footer-signup__status.is-ok { color: var(--accent-success); }
.footer-signup__status.is-err { color: var(--accent-red); }
.footer__mast { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.footer__brand { display: flex; align-items: center; gap: 8px; }
.footer__logo { height: 48px; width: auto; display: block; }
.nav__brand,
.footer__brand { transition: opacity var(--dur-base) var(--ease); }
.nav__brand:hover,
.footer__brand:hover { opacity: 0.75; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 28px; }
.footer__copyright { margin: 0; font-size: 14px; color: var(--text-subtle); }
.footer__badges {
  flex: 0 0 50%; min-width: 0; height: 32px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Keep the longer directory strip moving at the same measured pace. */
.footer__badges-track { display: flex; align-items: center; width: max-content; animation: footer-badges-scroll 49.3s linear infinite; }
.footer__badges-set { display: flex; align-items: center; flex: none; gap: 12px; padding-right: 12px; }
.footer__badge { display: block; flex: none; line-height: 0; border-radius: 8px; }
.footer__badge img { display: block; width: auto; height: 32px; }
@keyframes footer-badges-scroll { to { transform: translateX(-33.333333333%); } }
@media (prefers-reduced-motion: reduce) {
  .footer__badges { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .footer__badges-track { animation: none; }
}
.footer__legal {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 14px;
}
.footer__link {
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease);
}
.footer__link:hover { color: var(--ink-900); }
.footer__link:hover .tlink__label { opacity: 1; }
button.footer__link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- policy pages */

/* catalogue header, the same shape as a policy header */
.page-head { padding-block: 64px 60px; }
.page-head .display { margin: 32px 0 0; }
.page-head .lead { margin-top: 26px; max-width: var(--measure); }

/* ---------------------------------------------------------------- blog */

.blog-head { margin-bottom: 40px; }
.blog-head .section-head { max-width: 680px; }
.blog-head .section-head > .body { margin-top: 14px; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.blog-card {
  min-width: 0;
  min-height: 286px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--line-border);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease);
}
.blog-card:hover { background: var(--surface-card-hover); }
.blog-card:focus { outline: none; }
.blog-card:focus-visible {
  border-color: var(--ink-900);
  box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--ink-900);
}
.blog-card:hover .tlink__label { opacity: 1; }
.blog-card:hover .icon--tlink { transform: translateX(4px); }
.blog-card__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.blog-card__top time { font-size: 13px; color: var(--text-subtle); }
.blog-card__icon { width: 30px; height: 30px; }
.blog-card .h-small { margin-top: 30px; font-size: 23px; line-height: 1.18; letter-spacing: -0.7px; }
.blog-card > .body { margin-top: 14px; }
.blog-card__foot {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.blog-card__foot .tlink { font-size: 14px; }

.article-head { padding-block: 72px 68px; }
.article-head__inner { max-width: 930px; }
.article-head .display { max-width: 920px; }
.article-head .lead { margin-top: 24px; max-width: 700px; font-size: 18px; }
.article-meta { margin: 26px 0 0; font-size: 14px; color: var(--text-subtle); }

.article-body { padding-block: 72px 88px; }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.article-prose { min-width: 0; }
.article-intro { display: grid; gap: 18px; }
.article-prose p { margin: 0; font-size: 17px; line-height: 1.62; color: var(--text-muted); }
.article-note {
  margin: 40px 0 56px;
  padding: 24px 26px;
  background: var(--surface-card);
  border-radius: 12px;
}
.article-note strong { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.article-note p { font-size: 15px; }
.article-picks { border-bottom: 1px solid var(--line-rule); }
.article-pick { padding: 38px 0 40px; border-top: 1px solid var(--line-rule); }
.article-pick h2 { margin: 12px 0 14px; font-size: 28px; line-height: 1.2; letter-spacing: -0.8px; font-weight: 500; }
.article-pick .tlink { display: inline-flex; margin-top: 18px; font-size: 15px; }
.article-close {
  margin-top: 64px;
  padding: 40px;
  color: var(--surface-ground);
  background: var(--ink-900);
  border-radius: 12px;
}
.article-close h2 { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.9px; font-weight: 500; }
.article-close p { margin-top: 16px; color: var(--text-subtle); }
.article-close .btn { margin-top: 28px; background: var(--surface-ground); color: var(--ink-900); }
.article-promo-rail {
  display: block;
  width: 240px;
  min-width: 240px;
  justify-self: end;
  gap: 16px;
  position: sticky;
  top: 32px;
}
.framer-promo {
  position: relative;
  display: block;
  width: 240px;
  aspect-ratio: 224 / 244;
  overflow: hidden;
  padding: 0;
  color: #fff;
  background: #000;
  border: 0;
  border-radius: 12px;
  text-decoration: none;
  isolation: isolate;
  container-type: inline-size;
}
.framer-promo__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 224px;
  height: 244px;
  overflow: hidden;
  color: #fff;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.04);
  transform: scale(1.0714285714);
  transform-origin: top left;
}
.framer-promo__title {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
  font-family: Inter, "Inter Placeholder", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}
.framer-promo__title > span { display: block; }
.framer-promo__media {
  position: absolute;
  inset: 90px 0 0;
  z-index: 0;
  width: 100%;
  height: 154px;
  object-fit: cover;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform 500ms linear(0, .0686, .1959, .3264, .4429, .5418, .6241, .692, .7477, .7934, .8308, .8615, .8866, .9072, .924, .9378, .949, .9583, .9658, .972, .9771, .9813, .9847, .9874, .9897, .9916, 1);
}
.framer-promo__arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
  transition: background-color 500ms linear(0, .0686, .1959, .3264, .4429, .5418, .6241, .692, .7477, .7934, .8308, .8615, .8866, .9072, .924, .9378, .949, .9583, .9658, .972, .9771, .9813, .9847, .9874, .9897, .9916, 1), border-color 500ms linear(0, .0686, .1959, .3264, .4429, .5418, .6241, .692, .7477, .7934, .8308, .8615, .8866, .9072, .924, .9378, .949, .9583, .9658, .972, .9771, .9813, .9847, .9874, .9897, .9916, 1);
}
.framer-promo__arrow svg { width: 16px; height: 16px; fill: currentColor; transform: rotate(-90deg); }
.framer-promo:hover .framer-promo__arrow {
  background: #707070;
  border-color: #707070;
}
.framer-promo:hover .framer-promo__media { transform: scale(1.2); }
.framer-promo:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 3px;
}
.related-posts > .section-head { margin-bottom: 40px; }
.blog-grid--related .blog-card { min-height: 260px; }

.policy-head { padding-block: 64px 60px; }
.policy-head .display { margin: 32px 0 0; hyphens: auto; overflow-wrap: anywhere; }
.policy-head .lead { margin-top: 26px; }
.policy-head .updated { margin-top: 16px; font-size: 15px; color: var(--text-subtle); }

.policy { padding-block: 96px; display: grid; gap: 48px; }
.policy section { display: grid; gap: 22px; }
.policy .item { display: grid; gap: 6px; }
.policy h2 { font-size: 18px; line-height: 1.3; letter-spacing: -0.3px; font-weight: 500; margin: 0; }
.policy h3 { font-size: 16px; line-height: 1.32; letter-spacing: -0.2px; font-weight: 500; margin: 0; }
.policy p { font-size: 15px; line-height: 1.4; color: var(--text-muted); margin: 0; }
.policy a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }

/* centre the reading column, 640 max, on every policy page */
.measure { max-width: var(--measure); margin: 0 auto; }

/* ---------------------------------------------------------------- 404 */

.not-found {
  min-height: calc(100vh - 330px);
  padding-block: 96px 120px;
  display: grid;
  align-items: center;
}
.not-found .measure { text-align: center; }
.not-found .display { margin: 28px 0 22px; }
.not-found .lead { margin-bottom: 34px; }

/* ---------------------------------------------------------------- consent */

.consent {
  position: fixed; left: auto; right: 24px; bottom: 24px; z-index: 50;
  width: calc(100% - 48px); max-width: 520px; margin: 0;
  background: var(--surface-ground);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 10px 40px rgba(16, 16, 16, 0.08);
}
.consent p { font-size: 14px; line-height: 1.4; color: var(--text-muted); margin: 0 0 16px; }
.consent a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: 10px; }
.consent .btn { height: 40px; padding: 0 18px; font-size: 14px; }
.consent [data-consent="denied"] { border-color: transparent; }

/* ---------------------------------------------------------------- tablet 834 */

@media (max-width: 1023px) {
  :root { --gutter: 24px; --column: 786px; --bleed: clamp(8px, 2.88vw, 24px); }
  .track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .product-slider__viewport { touch-action: pan-y pinch-zoom; }
  .display { font-size: 60px; }
  .section__head { grid-template-columns: 1fr; gap: 20px; }
  .section__intro > .body { margin-top: 0; }
  .catalogue-head { grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__badges { display: none; }
  .bundle-page__hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
    min-height: 0;
    padding-block: 64px;
  }
  .bundle-page__hero-copy { max-width: 680px; }
  .bundle-page__hero-showcase { width: min(680px, 100%); }
  .bundle-page__hero-visual { width: 100%; }
  .bundle-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bundle-category__head { grid-template-columns: 1fr; gap: 16px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
  .why > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .why > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .panel--bundle {
    grid-template-columns: 1fr;
    gap: 40px;
    aspect-ratio: auto;
    min-height: 0;
  }
  .cta {
    aspect-ratio: auto;
    padding-block: 40px;
  }
  .bundle__visual {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-right: 0;
    transform: none;
    aspect-ratio: 1.45;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .bundle__visual > .bundle__tile:nth-child(n) {
    position: absolute;
    inset: auto;
    width: 60%;
    top: 22%;
    transform-origin: center;
  }
  .bundle__visual > .bundle__tile:nth-child(1) { left: 5%; transform: rotate(-10deg); z-index: 1; }
  .bundle__visual > .bundle__tile:nth-child(2) { left: 20%; top: 8%; transform: none; z-index: 3; }
  .bundle__visual > .bundle__tile:nth-child(3) { left: 35%; transform: rotate(10deg); z-index: 2; }
  .bundle__visual > .bundle__tile:nth-child(n + 4) { display: none; }
  .nav { position: relative; }
  .nav__brand { position: relative; z-index: 3; }
  .nav__links,
  .nav > .btn,
  .nav > .locale-picker { display: none; }
  .nav__menu-toggle {
    appearance: none;
    position: relative;
    z-index: 2;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }
  .nav__menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-900);
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  }
  .nav__menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__menu-toggle:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 3px; }
  .nav__menu {
    position: fixed;
    z-index: 1;
    inset: 0;
    height: 100dvh;
    padding: 140px 24px 28px;
    border: 0;
    border-radius: 0;
    background: var(--surface-ground);
    box-shadow: none;
    overflow-y: auto;
  }
  /* The normal tablet shell is deliberately narrower than the viewport. Once
     the menu opens, promote its header to a true viewport-wide app bar so the
     logo and close control stay at the real screen edges. Its opaque menu also
     sits above the page divider and node markers instead of exposing them. */
  html.nav-open .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 24px;
    border: 0;
    background: var(--surface-ground);
  }
  .nav__menu:not([hidden]) {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 28px;
  }
  .nav__menu-links { display: grid; align-content: start; width: 100%; }
  .nav__menu-links a {
    display: block;
    position: relative;
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-rule);
    color: var(--ink-900);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 600;
  }
  .nav__menu-links a[aria-current="page"] { padding-left: 18px; }
  .nav__menu-links a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 999px;
    background: var(--ink-900);
  }
  .nav__menu .btn { display: inline-flex; width: 100%; }
  .nav__menu-actions { display: grid; gap: 12px; }
  .locale-picker--mobile { display: block; }
  .locale-picker--mobile .locale-picker__button {
    width: 100%;
    height: 44px;
    justify-content: flex-start;
    border: 1px solid var(--line-strong);
  }
  .locale-picker--mobile .locale-picker__current {
    display: inline;
    margin-right: auto;
    font-size: 15px;
    font-weight: 500;
  }
  .locale-picker--mobile .locale-picker__menu {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }
  html.nav-open,
  html.nav-open body { overflow: hidden; }
}

/* ----------------------------------------------------------- mobile fluid */

@media (max-width: 767px) {
  /* Phones vary far beyond the old 390px design frame. Let the page ground
     fill the viewport and keep spacing inside it as the 16px content gutter. */
  :root { --gutter: 16px; --column: 100%; --bleed: 0px; }
  html, body { overflow-x: clip; }
  /* the divider runs the full column width, so the node markers land on the
     column rules here exactly as they do at the wider breakpoints */
  .sep { margin: 0 calc(var(--gutter) * -1); }

  .nav { height: 64px; gap: 12px; }
  html.nav-open .site-header { padding-inline: 16px; }
  .nav__logo { height: 42px; }
  .nav__menu { padding: 124px 24px 24px; }

  .display { font-size: 40px; letter-spacing: -1.4px; }
  .h-section { font-size: 32px; letter-spacing: -1.1px; }
  .h-panel { font-size: 32px; letter-spacing: -1.1px; }

  .hero { padding-block: 40px 0; }
  .hero .display br { display: none; }
  .hero .display { margin: 20px 0 22px; }
  .carousel { padding-block: 24px 32px; }
  .section { padding-block: 44px 48px; }
  .catalogue-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .catalogue-head .section-head,
  .catalogue-head .template-filter { grid-column: 1; }
  .catalogue-head .template-filter { justify-self: start; }
  .blog-grid { grid-template-columns: 1fr; }
  .article-head { padding-block: 48px 44px; }
  .article-head .display { font-size: 40px; }
  .article-head .lead { font-size: 17px; }
  .article-body { padding-block: 48px 64px; }
  .article-layout { grid-template-columns: 1fr; }
  .article-promo-rail {
    display: none;
  }
  .article-prose p { font-size: 16px; }
  .article-note { margin: 32px 0 44px; padding: 20px; }
  .article-pick { padding-block: 32px 34px; }
  .article-pick h2 { font-size: 24px; }
  .article-close { margin-top: 48px; padding: 28px 24px; }
  .article-close h2 { font-size: 26px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__actions .btn { width: 100%; }
  .bundle-page__hero { gap: 30px; padding-block: 48px; }
  .bundle-page__hero-copy .display { font-size: 40px; }
  .bundle-page__hero-copy > .btn { width: 100%; }
  .bundle-page__hero-showcase { width: 100%; margin-top: 8px; }
  .bundle-page__hero-visual { display: block; width: 100%; }
  .bundle-page__visual-bar { height: 36px; padding-inline: 12px; }
  .bundle-page__hero-visual { aspect-ratio: 4 / 3; }
  .bundle-page__visual-viewport {
    inset-block-start: 36px;
  }
  .bundle-page__visual-slide {
    padding: 10px;
  }
  .bundle-page__price strong { font-size: 36px; }
  .bundle-benefits,
  .bundle-steps { grid-template-columns: 1fr; }
  .bundle-benefits { gap: 32px; margin-top: 40px; }
  .bundle-benefits article { min-height: 0; padding: 24px; }
  .bundle-collections { margin-top: 40px; }
  .bundle-category { padding-block: 40px 48px; }
  .bundle-steps { margin-top: 40px; }
  .bundle-offer { grid-template-columns: 1fr; gap: 36px; padding: 36px 28px; }
  .bundle-offer__buy { min-width: 0; }
  .bundle-offer__buy .btn { width: 100%; }

  .consent {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    margin-inline: auto;
  }

  .track > figure { flex: 0 0 min(460px, 86vw); }

  .grid { grid-template-columns: 1fr; }
  /* A phone carousel presents one product per dot. Keeping all three cards in
     each desktop group made the whole vertical stack move while it was being
     read, which is not a usable carousel interaction on a narrow screen. */
  .product-slide > .card:not(:first-child) { display: none; }
  .template-detail { grid-template-columns: 1fr; gap: 36px; }
  .template-detail__copy { max-width: none; }
  .why { grid-template-columns: 1fr; gap: 32px; }
  .why > div + div { padding-left: 0; border-left: 0; }

  .panel { padding: 40px 32px; }
  .panel--bundle { grid-template-columns: 1fr; gap: 40px; }
  .footer__mast { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__signup { grid-template-columns: 1fr; gap: 24px; padding-bottom: 48px; }
  .footer__signup-sep { margin-bottom: 32px; }
  .footer__logo { height: 42px; }
  .footer__legal { justify-content: flex-start; gap: 12px 20px; }

  .policy { padding-block: 64px; }
  .policy-head, .page-head { padding-block: 44px 40px; }
  .not-found { min-height: calc(100vh - 280px); padding-block: 64px 80px; }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .product-slider__track { transition: none; }
  .article-ad__media,
  .article-ad__arrow { transition: none; }
}


/* ---------------------------------------------------- hero entrance

   A single fade on load, staggered down the hero in reading order. Runs
   once (animations do not repeat by default) and only where motion is
   welcome — without the media query the content still renders normally,
   because the hidden state lives inside it too. */

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow,
  .hero .display,
  .hero .lead,
  .hero__actions .btn,
  .hero__actions .tlink,
  .hero__note {
    animation: hero-in 620ms var(--ease) both;
  }
  .hero .eyebrow          { animation-delay:   0ms; }
  .hero .display          { animation-delay:  90ms; }
  .hero .lead             { animation-delay: 180ms; }
  .hero__actions .btn  { animation-delay: 270ms; }
  .hero__actions .tlink { animation-delay: 360ms; }
  .hero__note             { animation-delay: 450ms; }
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* ------------------------------------------- section header reveal

   Same fade and 90ms stagger as the hero, but triggered on scroll-into-view
   and only once. The hidden state is scoped to .reveal-armed, which only
   reveal.js adds, so without JS every header renders normally. */

@media (prefers-reduced-motion: no-preference) {
  .reveal-armed .reveal-item { opacity: 0; }
  .reveal-self { opacity: 0; }
  .reveal-armed.is-in .reveal-item {
    animation: hero-in 620ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  .reveal-self.is-in {
    animation: hero-in 620ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
}

/* ------------------------------------------- policy body reveal

   The policy pages stagger their header first (caps, title, lead, date). Only
   once that has finished does the body appear, and it fades on opacity alone —
   no travel — so a long numbered document does not slide about as it lands.
   reveal.js adds .is-in on a timer sized to the header's own stagger. */

@media (prefers-reduced-motion: no-preference) {
  .fade-armed { opacity: 0; }
  .fade-armed.is-in { animation: fade-in 620ms var(--ease) both; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------------- contact */

/* Two-up: what to expect on the left, the form on the right. Collapses to one
   column under 900px, same breakpoint the grids use. */
/* Both cards run to the same height — stretch, not start — so the pair reads
   as one block rather than a short note beside a tall form. */
.contact {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 24px;
  align-items: stretch;
  min-width: 0;
}
/* Outline only: the form is the filled card, this one sits on the page. */
.contact__aside {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 32px;
  display: flex; flex-direction: column;
}
.contact__aside h3 { font-size: 19px; font-weight: 600; margin: 0 0 26px; }
/* The steps stay tucked under the heading. Centring or spreading them in the
   card's full height only opens a gap below the heading. */
.contact__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 30px;
}
.contact__list li { display: flex; gap: 14px; align-items: flex-start; }
.contact__num {
  flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 999px;
  background: var(--ink-900); color: var(--surface-card);
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.contact__num > span { transform: translateY(-0.02em); }
.contact__num[data-step="1"] > span { transform: translateY(-0.046em); }
.bundle-step > .contact__num[data-step="1"] > span { transform: translateY(-0.074em); }
.bundle-step > .contact__num[data-step="2"] > span { transform: translateY(-0.05em); }
.bundle-step > .contact__num[data-step="3"] > span { transform: translateY(-0.046em); }
.contact__list p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-muted); }
.contact__list strong {
  color: var(--ink-900); font-weight: 500; display: block;
  font-size: 16px; line-height: 1.75;   /* sits level with its number */
}

.form {
  background: var(--surface-card);
  border: 1px solid var(--line-border);
  border-radius: 12px;
  padding: 28px;
  display: grid; gap: 18px;
  width: 100%;
  min-width: 0;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > label { font-size: 14px; font-weight: 500; }
.field__opt { color: var(--text-subtle); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink-900);
  background: var(--surface-ground);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.field textarea { resize: vertical; min-height: 132px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-subtle); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2371717a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
.form__submit { width: 100%; }
.form__submit .btn__label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* WWA's basic 16px ring spinner, using this site's foreground token. */
.contact-spinner {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: contact-spin 700ms linear infinite;
}
@keyframes contact-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .contact-spinner { animation-duration: 1400ms; }
}
.form__note { font-size: 13px; color: var(--text-subtle); text-align: center; margin: 0; }

/* status line: hidden until the submit handler has something to say */
.form__status {
  font-size: 14px; margin: 0; padding: 11px 13px; border-radius: 8px; display: none;
}
.form__status.is-ok {
  display: block; color: var(--accent-success);
  background: color-mix(in srgb, var(--accent-success) 9%, transparent);
}
.form__status.is-err {
  display: block; color: var(--accent-red);
  background: color-mix(in srgb, var(--accent-red) 9%, transparent);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--accent-red);
}
.field input[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-red) 18%, transparent);
}

/* Turnstile sits on the card, so give it the card's own surface and a rule that
   matches every other control rather than the widget's default white box. */
.turnstile {
  display: flex; justify-content: flex-start;
  width: 100%;
  min-width: 0;
}
.turnstile > .cf-turnstile {
  width: 100%; min-width: 0;
  border-radius: 8px;
  overflow: hidden;
}
.turnstile iframe { border-radius: inherit; }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
  .contact__aside { order: 2; }
  .form__row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- faq */

/* Stacked header rather than the two-up .section__head used elsewhere: the
   lead reads as a subtitle under the headline, not as a column beside it. */
.section__head--stack {
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 620px;
}
.section__head--stack > .body { margin-top: 0; }

.faq { padding-block: 56px 72px; }
.faq__list { display: grid; gap: 10px; }

/* No border: the fill alone separates a row from the page, and an open row
   steps up one shade rather than gaining a rule. */
.faq__item {
  background: var(--surface-card);
  border-radius: 12px;
  transition: background var(--dur-base) var(--ease);
}
/* Hover only where a pointer can actually hover — the component guards this
   with an isTouchDevice check so a tap does not leave the row stuck lit. */
@media (hover: hover) {
  .faq__item:hover { background: var(--surface-card-hover); }
}
/* Keep the same 50% hover fill while the answer is open, including on touch
   devices where there is no persistent hover state. */
.faq__item.is-open { background: var(--surface-card-hover); }

.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 19px 22px;
  font-size: 16px; font-weight: 500; line-height: 1.4;
  color: var(--ink-900);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus { outline: none; }
.faq__q:focus-visible {
  background: var(--surface-hover);
  border-radius: 12px;
}

/* Two bars rather than a glyph, so the stroke matches the rules on the page.
   The upright fades out as the row opens, turning the plus into a minus. */
.faq__mark {
  flex: none; position: relative; width: 14px; height: 14px;
  transition: transform var(--dur-slow) var(--ease);
}
.faq__item.is-open .faq__mark { transform: rotate(180deg); }   /* questionIconRotation: 180 */
.faq__mark::before, .faq__mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; margin-top: -0.75px;
  background: var(--ink-900);
  border-radius: 2px;
}
.faq__mark::after {
  transform: rotate(90deg);
  transition: opacity var(--dur-base) var(--ease);
}
.faq__item.is-open .faq__mark::after { opacity: 0; }

/* The answer is the animated box, so it carries no padding of its own —
   height has to be able to reach a true zero. */
.faq__a { overflow: hidden; will-change: height; }
.faq__a p {
  margin: 0; padding: 0 22px 20px; max-width: 720px;
  font-size: 15px; line-height: 1.4; color: var(--text-muted);
}
.faq__a a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .form { padding: 18px; }
  .faq__q { padding: 17px 18px; font-size: 15px; gap: 16px; }
  .faq__a p { padding: 0 18px 18px; }
}

/* iOS zooms the viewport when a focused form control is smaller than 16px.
   Keep this global so every current and future field is covered on touch-sized
   layouts, regardless of its component-specific desktop typography. */
@media (max-width: 1023px) {
  input,
  textarea,
  select { font-size: 16px !important; }
}

@media (max-width: 389px) {
  .turnstile { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__mark, .faq__mark::after { transition: none; }
  .access-banner__track { animation: none; width: 100%; justify-content: center; }
  .access-banner__group { justify-content: center; width: 100%; }
  .access-banner__group + .access-banner__group,
  .access-banner__item + .access-banner__item { display: none; }
  /* Keep the full call to action readable on narrow screens without motion. */
  @media (max-width: 767px) {
    .access-banner__detail, .access-banner__mark { display: none; }
  }
}

/* Translated headings may contain long compound words, especially in German. */
html:not([lang="en"]) :is(h1, h2, h3) { overflow-wrap: anywhere; }
html[lang="de"] :is(h1, h2, h3) { hyphens: auto; }