/* ==========================================================================
   FORGE — design system
   One file for tokens, type, layout and shared components.
   Page and section styles live in their own files and only use these tokens.
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable, optical sizing) ---------- */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dmsans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  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: "DM Sans";
  src: url("../fonts/dmsans-italic-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
  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;
}

/* ---------- Tokens ---------- */
:root {
  /* Neutrals. The brand is black, white and grey. */
  --paper: #F6F6F3;          /* page ground */
  --white: #FFFFFF;
  --mist: #EFEFEC;           /* inset panels on paper */
  --fog: #E4E4E0;            /* chips, dividers on white */
  --stone: #A6A6A2;          /* tertiary text, disabled */
  --slate: #62625F;          /* secondary text (5.9:1 on paper) */
  --ink: #141414;            /* primary text, matches the logo */
  --coal: #1B1B1B;           /* dark panels */
  --night: #0F0F0F;
  --line: rgba(20, 20, 20, 0.1);
  --line-strong: rgba(20, 20, 20, 0.18);
  --line-on-dark: rgba(255, 255, 255, 0.12);

  /* Accents: each one is a colour metal turns in the forge. */
  --ember: #EE6A2C;          /* heat: the primary accent */
  --ember-ink: #B34612;      /* ember for small text on light (5.1:1) */
  --ember-soft: #FBE4D7;
  --brass: #E3A03A;          /* molten gold */
  --brass-soft: #F8EBD3;
  --patina: #5C8A57;         /* weathered bronze */
  --patina-ink: #3E6B3A;
  --patina-soft: #E2EBDD;
  --temper: #6F79D8;         /* the blue of tempered steel */
  --temper-ink: #4A53B5;
  --temper-soft: #E4E6FA;
  --blush: #EADBD3;          /* warm ground seen in the silk renders */

  /* Type */
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-statement: clamp(2.5rem, 1rem + 4.6vw, 5.25rem);
  --fs-display: clamp(2.4rem, 1.1rem + 3.4vw, 4.125rem);
  --fs-h2: clamp(2.05rem, 1rem + 2.8vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 1.05rem + 1.2vw, 2.25rem);
  --fs-h4: clamp(1.2rem, 1.02rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  --fs-eyebrow: 0.8125rem;
  --tracking-display: -0.021em;
  --tracking-h2: -0.018em;
  --tracking-h3: -0.012em;

  /* Space */
  --gutter: clamp(20px, 5vw, 72px);
  --container: 1296px;
  --section: clamp(88px, 10vw, 160px);
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.04), 0 2px 8px rgba(20, 20, 20, 0.04);
  --shadow-2: 0 2px 6px rgba(20, 20, 20, 0.04), 0 12px 32px rgba(20, 20, 20, 0.08);
  --shadow-3: 0 8px 24px rgba(20, 20, 20, 0.08), 0 32px 80px rgba(20, 20, 20, 0.14);
  --shadow-float: 0 18px 50px -12px rgba(20, 20, 20, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 0.2s;
  --dur-2: 0.45s;
  --dur-3: 0.8s;

  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* ---------- Base ---------- */
html { background: var(--paper); scroll-padding-top: var(--header-h); } /* clear of the sticky header; anchor targets add their scroll-margin ("Anchors") */
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 1000;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--white); font-weight: 500;
  transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- Type ---------- */
.t-statement, .t-display, .t-h2, .t-h3, .t-h4, h1, h2, h3, h4 { font-weight: 400; color: var(--ink); text-wrap: balance; }
/* The reference sets headlines in DM Sans' open text cut, not the condensed display cut auto optical sizing picks. */
.t-statement, .t-display, .t-h2, .t-h3 { font-optical-sizing: none; font-variation-settings: "opsz" 14; }
.t-statement { font-size: var(--fs-statement); line-height: 1.04; letter-spacing: var(--tracking-display); }
.t-display   { font-size: var(--fs-display); line-height: 1.06; letter-spacing: var(--tracking-display); }
.t-h2        { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--tracking-h2); }
.t-h3        { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: var(--tracking-h3); }
.t-h4        { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.012em; font-weight: 500; }
.t-lead      { font-size: var(--fs-lead); line-height: 1.5; color: var(--slate); letter-spacing: -0.005em; }
.t-body      { font-size: var(--fs-body); line-height: 1.6; color: var(--slate); }
.t-small     { font-size: var(--fs-small); line-height: 1.5; }
.t-micro     { font-size: var(--fs-micro); line-height: 1.4; }
.t-muted     { color: var(--slate); }
.t-faint     { color: var(--stone); }
.t-num       { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.t-balance   { text-wrap: balance; }
.t-pretty    { text-wrap: pretty; }
.t-center    { text-align: center; }
.t-accent    { color: var(--ember-ink); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ember-ink);
}
.eyebrow--ink { color: var(--ink); }
.eyebrow--light { color: rgba(255, 255, 255, 0.72); }
.eyebrow--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* A highlighted word in a heading: coloured, with a hand-drawn stroke beneath.
   Markup: <span class="mark" data-squiggle>found</span>  (forge.js injects the SVG). */
.mark { position: relative; display: inline-block; white-space: nowrap; }
.mark--ember  { color: var(--ember); }
.mark--patina { color: var(--patina); }
.mark--temper { color: var(--temper); }
.mark .squiggle {
  position: absolute; left: -2%; right: -14%; bottom: -0.2em;
  width: 116%; height: 0.42em; overflow: visible; pointer-events: none;
  color: var(--squiggle, var(--ember));
}
.mark .squiggle path {
  fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mark--soft .squiggle { opacity: 0.55; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(1520px + var(--gutter) * 2); }
.container--narrow { max-width: calc(880px + var(--gutter) * 2); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--flush-top { padding-top: 0; }
/* Two paper sections in a row would stack two full paddings (about 290px at 1440, which reads as empty).
   The second one keeps only a short top, so the space between them is about 185px at 1440 and 115px on phones. */
.section:not(.dark) + .section:not(.dark) { padding-top: calc(var(--section) * 0.3); }
/* The footer brings its own top padding, so the last section before it needs less. */
main > .section:not(.dark):last-child { padding-bottom: calc(var(--section) * 0.6); }
.stack > * + * { margin-top: var(--stack, 16px); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }
.grid { display: grid; gap: var(--gap, 24px); }
.split { display: grid; gap: var(--gap, 48px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; } }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head--center { justify-items: center; text-align: center; margin-inline: auto; max-width: 860px; }
@media (min-width: 960px) {
  .section-head--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; gap: 48px; }
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Surfaces ---------- */
.surface { background: var(--white); border-radius: var(--r-xl); }
.panel { background: var(--mist); border-radius: var(--r-xl); }
.card {
  position: relative; background: var(--white); border-radius: var(--r-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.glass {
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px -10px rgba(20, 20, 20, 0.22);
}
.glass--tint {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.dark {
  background: var(--coal); color: var(--white);
  --slate: rgba(255, 255, 255, 0.62);
  --stone: rgba(255, 255, 255, 0.38);
  --line: var(--line-on-dark);
}
.dark .t-statement, .dark .t-display, .dark .t-h2, .dark .t-h3, .dark .t-h4,
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--white); }

/* Silk materials, rendered offline (tools/silk.html). The hero silks (1600 wide, for 2x screens) are never drawn
   wider than ~1020px, so 1x screens take a 1100 copy; the card silks have none (some boxes already draw them wider). */
.silk { background-color: var(--blush); background-size: cover; background-position: center; }
.silk--websites { background-image: url("../img/silk/hero-websites.webp"); background-color: #E6D9D2;
  background-image: image-set(url("../img/silk/hero-websites-1100.webp") 1x, url("../img/silk/hero-websites.webp") 2x); }
.silk--brand    { background-image: url("../img/silk/hero-brand.webp");    background-color: #EE8C45;
  background-image: image-set(url("../img/silk/hero-brand-1100.webp") 1x, url("../img/silk/hero-brand.webp") 2x); }
.silk--social   { background-image: url("../img/silk/hero-social.webp");   background-color: #3D6739;
  background-image: image-set(url("../img/silk/hero-social-1100.webp") 1x, url("../img/silk/hero-social.webp") 2x); }
.silk--ember    { background-image: url("../img/silk/card-ember.webp");    background-color: #EE8C45; }
.silk--temper   { background-image: url("../img/silk/card-temper.webp");   background-color: #7D86DD; }
.silk--patina   { background-image: url("../img/silk/card-patina.webp");   background-color: #3D6739; }
.silk--graphite { background-image: url("../img/silk/card-graphite.webp"); background-color: #1C1C1C; }
.silk--brass    { background-image: url("../img/silk/card-brass.webp");    background-color: #DE9A3A; }
.silk--blush    { background-image: url("../img/silk/card-blush.webp");    background-color: #E6D9D2; }
.silk--silver   { background-image: url("../img/silk/card-silver.webp");   background-color: #DADAD7; }

/* Film grain, used sparingly over large materials */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit;
  opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 56px;
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  height: var(--btn-h); padding: 0 28px; border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn__label { position: relative; z-index: 1; }

/* Primary: dark pill with a white arrow disc (reference "Get Demo Account") */
.btn--primary {
  background: linear-gradient(180deg, #2A2A2A 0%, var(--ink) 100%);
  color: var(--white);
  padding: 0 6px 0 30px; gap: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -12px rgba(20, 20, 20, 0.6);
}
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 32px -12px rgba(20, 20, 20, 0.55); }
.btn__disc {
  position: relative; z-index: 1; display: grid; place-items: center; overflow: hidden;
  width: calc(var(--btn-h) - 12px); height: calc(var(--btn-h) - 12px);
  border-radius: 50%; background: var(--white); color: var(--ink); flex: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.btn__disc svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.btn__disc svg + svg { position: absolute; transform: translateX(-160%); }
.btn:hover .btn__disc svg:first-child { transform: translateX(160%); }
.btn:hover .btn__disc svg + svg { transform: none; }
.btn:hover .btn__disc { transform: scale(1.04); }

/* Ember: same shape, accent fill, for the single most important action on dark bands */
.btn--ember { background: var(--ember); color: var(--white); padding: 0 6px 0 30px; gap: 28px; box-shadow: 0 12px 28px -14px rgba(238, 106, 44, 0.9); }
.btn--ember .btn__disc { color: var(--ember-ink); }

/* Light: white pill for dark surfaces */
.btn--light { background: var(--white); color: var(--ink); padding: 0 6px 0 30px; gap: 28px; }
.btn--light .btn__disc { background: var(--ink); color: var(--white); }

/* Ghost: hairline pill (reference nav "Get Demo") */
.btn--ghost {
  --btn-h: 46px; padding: 0 22px; font-size: 0.9375rem;
  border: 1px solid var(--line-strong); color: var(--ink); background: transparent;
}
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.dark .btn--ghost { border-color: rgba(255, 255, 255, 0.28); color: var(--white); }
.dark .btn--ghost:hover { background: var(--white); color: var(--ink); }

.btn--sm { --btn-h: 44px; font-size: 0.9375rem; }
.btn--sm.btn--primary, .btn--sm.btn--light, .btn--sm.btn--ember { padding-left: 22px; gap: 18px; }
.btn--block { width: 100%; justify-content: space-between; }

/* Round icon buttons */
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--ink); background: transparent;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.dark .icon-btn { border-color: rgba(255, 255, 255, 0.28); color: var(--white); }

/* Black arrow disc (reference card corner button) */
.arrow-btn {
  display: inline-grid; place-items: center; flex: none; overflow: hidden; position: relative;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.arrow-btn svg { width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease-out); }
.arrow-btn svg + svg { position: absolute; transform: translateX(-180%); }
.arrow-btn:hover svg:first-child, a:hover > .arrow-btn svg:first-child, .has-arrow:hover .arrow-btn svg:first-child { transform: translateX(180%); }
.arrow-btn:hover svg + svg, a:hover > .arrow-btn svg + svg, .has-arrow:hover .arrow-btn svg + svg { transform: none; }
.arrow-btn--light { background: var(--white); color: var(--ink); }
.arrow-btn--sm { width: 40px; height: 40px; }
.arrow-btn--sm svg { width: 16px; height: 16px; }

/* Text link with animated underline */
.link {
  position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size var(--dur-2) var(--ease-out);
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 1px; }
.link svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.link:hover svg { transform: translateX(3px); }

/* ---------- Chips, tags, badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent;
  font-size: 0.875rem; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.chip--solid { background: var(--white); border-color: transparent; box-shadow: var(--shadow-1); }
.chip--dark { background: var(--ink); color: var(--white); border-color: transparent; }
.chip--ember { background: var(--ember-soft); color: var(--ember-ink); border-color: transparent; }
.chip--patina { background: var(--patina-soft); color: var(--patina-ink); border-color: transparent; }
.chip--temper { background: var(--temper-soft); color: var(--temper-ink); border-color: transparent; }
.chip svg { width: 15px; height: 15px; }
.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  background: var(--ink); color: var(--white);
}

/* Soft square icon tile (reference "Popular payments" tile) */
.icon-tile {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 14px; color: var(--white);
  background: var(--ink);
}
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile--ember  { background: var(--ember); }
.icon-tile--brass  { background: var(--brass); }
.icon-tile--patina { background: var(--patina); }
.icon-tile--temper { background: var(--temper); }
.icon-tile--soft   { background: var(--mist); color: var(--ink); }

/* ---------- Notched corner ----------
   A card whose bottom-right corner is bitten by a perfect circle, concentric with the round
   button it holds, so an even ring of whatever lies behind the card runs round the button
   (reference hero cards). The ring is cut out of the card itself with a mask: nothing of the card
   (background, silk, content) is painted under it, so there is no colour to match and no hairline
   where the card's edge crosses the ring. The mask also draws the disc's edge (the button is a
   little larger than the disc, so the card never shows round it).
   Knobs, set on the CARD (the cut inherits them): --notch-d (button diameter, 52px), --notch-gap
   (ring width, 9px), --notch-card-r (the card's corner radius, --r-xl), --notch-top (1 puts the
   circle at the top-right; move the cut there too). The centre --notch-in is worked out from them
   so the circle swallows the card's rounded corner and slightly overshoots both edges, leaving no
   sliver. --notch-open (0 to 1) closes the ring; forge.js keeps it in step with the cut's opacity,
   so a cut a script fades in or out opens and closes its ring with it.
   A card whose button sits outside it (the ladder's mat, with the cut in the step around it) takes
   .notch--hole: the whole circle is cut and the button sits on what is behind. */
@property --notch-open { syntax: "<number>"; inherits: false; initial-value: 1; }
.notch { position: relative; }
.notch, .notch--hole, .notch__cut:not(.notch__cut--tr) {
  --notch-R: calc(var(--notch-d, 52px) / 2 + var(--notch-gap, 9px));
  --notch-in0: min(calc(var(--notch-R) - 2px), calc((var(--notch-R) + 0.4142 * var(--notch-card-r, var(--r-xl))) * 0.7071 - 1px));
  --notch-in: var(--notch-in0);
}
/* whole pixels: the mask is placed from the card's pixel-snapped box, the cut's contents (icon, the
   hero's progress ring) snap on their own; a whole-pixel offset lands both on the same centre */
@supports (width: round(down, 1.5px, 1px)) {
  .notch, .notch--hole, .notch__cut:not(.notch__cut--tr) { --notch-in: round(down, var(--notch-in0), 1px); }
}
.notch:where(:has(> .notch__cut:not(.notch__cut--tr))), .notch--hole {
  /* the mask box reaches --notch-pad past the card (no-clip), so focus rings and shadows still show */
  --notch-pad: 64px;
  --notch-aa: 0.5px; /* half the edge ramp: one device pixel in all */
  --notch-shut: rgb(0 0 0 / calc(1 - var(--notch-open)));
  --notch-at: calc(100% - var(--notch-in) - var(--notch-pad))
    calc((100% - var(--notch-in) - var(--notch-pad)) * (1 - var(--notch-top, 0)) + (var(--notch-in) + var(--notch-pad)) * var(--notch-top, 0));
  --notch-mask: radial-gradient(circle at var(--notch-at),
    #000 calc(var(--notch-d, 52px) / 2 - var(--notch-aa)), var(--notch-shut) calc(var(--notch-d, 52px) / 2 + var(--notch-aa)),
    var(--notch-shut) calc(var(--notch-R) - var(--notch-aa)), #000 calc(var(--notch-R) + var(--notch-aa)));
  -webkit-mask: var(--notch-mask) calc(var(--notch-pad) * -1) calc(var(--notch-pad) * -1) / calc(100% + var(--notch-pad) * 2) calc(100% + var(--notch-pad) * 2) no-repeat;
  mask: var(--notch-mask) calc(var(--notch-pad) * -1) calc(var(--notch-pad) * -1) / calc(100% + var(--notch-pad) * 2) calc(100% + var(--notch-pad) * 2) no-repeat border-box no-clip;
}
.notch--hole {
  --notch-mask: radial-gradient(circle at var(--notch-at), var(--notch-shut) calc(var(--notch-R) - var(--notch-aa)), #000 calc(var(--notch-R) + var(--notch-aa)));
}
@media (min-resolution: 1.5dppx) { .notch, .notch--hole { --notch-aa: 0.34px; } }
@media (min-resolution: 2dppx) { .notch, .notch--hole { --notch-aa: 0.25px; } }
.notch__cut {
  --notch-r: 22px;
  position: absolute; right: 0; bottom: 0; z-index: 3;
}
.notch__cut:not(.notch__cut--tr) {
  right: calc(var(--notch-in) - var(--notch-R)); bottom: calc(var(--notch-in) - var(--notch-R));
  width: calc(var(--notch-R) * 2); height: calc(var(--notch-R) * 2);
  display: grid; place-items: center; border-radius: 50%;
}
.notch__cut:not(.notch__cut--tr) > .arrow-btn { width: var(--notch-d, 52px); height: var(--notch-d, 52px); border-radius: 50%; }
/* inside a masked card the mask draws the disc's edge: the button runs 2px past it on every side */
.notch > .notch__cut:not(.notch__cut--tr) > .arrow-btn { width: calc(var(--notch-d, 52px) + 4px); height: calc(var(--notch-d, 52px) + 4px); }
/* the ring is see-through, so the focus ring goes inside the disc */
.notch > .notch__cut:not(.notch__cut--tr) > .arrow-btn:focus-visible { outline-offset: -6px; }
.notch:where(:has(> .notch__cut > .arrow-btn--sm)) { --notch-d: 40px; --notch-gap: 8px; }
/* top-right variant (folder tab holding a text pill, reference "Payments" label).
   It paints --notch-bg, the colour of the surface behind the card. */
.notch__cut--tr { top: 0; bottom: auto; padding: 0 0 10px 10px; border-radius: 0 0 0 calc(var(--notch-r) + 6px); background: var(--notch-bg, var(--paper)); }
.notch__cut--tr::before, .notch__cut--tr::after {
  content: ""; position: absolute; width: var(--notch-r); height: var(--notch-r); pointer-events: none;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--notch-r) - 0.5px), var(--notch-bg, var(--paper)) var(--notch-r));
}
.notch__cut--tr::before { right: 0; bottom: calc(var(--notch-r) * -1); }
.notch__cut--tr::after  { left: calc(var(--notch-r) * -1); top: 0; }

/* ---------- Device mockups ---------- */
.phone {
  --phone-w: 280px;
  position: relative; width: var(--phone-w); aspect-ratio: 9 / 19.2; flex: none;
  border-radius: calc(var(--phone-w) * 0.16);
  padding: calc(var(--phone-w) * 0.032);
  background: linear-gradient(145deg, #3A3A3A, #0D0D0D 40%, #262626);
  box-shadow: inset 0 0 0 1.5px #4A4A4A, 0 30px 60px -20px rgba(20, 20, 20, 0.45), 0 12px 24px -12px rgba(20, 20, 20, 0.3);
}
.phone__screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--phone-w) * 0.13);
  background: var(--white); color: var(--ink);
  font-size: calc(var(--phone-w) * 0.043);
  line-height: 1.35;
}
.phone__island {
  position: absolute; z-index: 5; left: 50%; top: calc(var(--phone-w) * 0.04);
  width: 32%; height: calc(var(--phone-w) * 0.085); transform: translateX(-50%);
  border-radius: 99px; background: #0B0B0B;
}
.phone__status {
  position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--phone-w) * 0.05) calc(var(--phone-w) * 0.08) 0;
  height: calc(var(--phone-w) * 0.14);
  font-size: calc(var(--phone-w) * 0.042); font-weight: 600; letter-spacing: -0.01em;
}
.phone__status i { display: inline-flex; gap: 4px; align-items: center; font-style: normal; }
.phone__status i::before, .phone__status i::after { content: ""; display: block; background: currentColor; border-radius: 2px; }
.phone__status i::before { width: calc(var(--phone-w) * 0.05); height: calc(var(--phone-w) * 0.03); clip-path: polygon(0 100%, 25% 100%, 25% 70%, 50% 70%, 50% 40%, 75% 40%, 75% 0, 100% 0, 100% 100%); }
.phone__status i::after { width: calc(var(--phone-w) * 0.075); height: calc(var(--phone-w) * 0.036); border-radius: 3px; }

.browser {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background: var(--white); box-shadow: var(--shadow-3);
  border: 1px solid var(--line);
}
.browser__bar {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px;
  background: #F3F3F1; border-bottom: 1px solid var(--line);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots span { width: 10px; height: 10px; border-radius: 50%; background: #D9D9D6; }
.browser__url {
  flex: 1; max-width: 320px; margin-inline: auto; height: 24px; border-radius: 8px; background: var(--white);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; color: var(--slate); border: 1px solid var(--line);
}

/* ---------- Header / navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  transition: transform 0.55s var(--ease-out), background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(246, 246, 243, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-open-menu { transform: none; }
.nav {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h);
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
  transform-origin: left; transition: opacity 0.4s var(--ease-out);
}
.site-header.is-scrolled .nav::after { opacity: 0; }
.nav__logo { display: inline-flex; align-items: center; flex: none; }
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: none; align-items: center; gap: 6px; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 400; color: var(--ink); white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out);
}
.nav__link:hover, .nav__item.is-open > .nav__link { background: rgba(20, 20, 20, 0.05); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--ember);
}
.nav__link svg { width: 11px; height: 11px; transition: transform var(--dur-2) var(--ease-out); }
.nav__item { position: relative; }
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__actions .btn--ghost { display: none; }
/* Menu toggle (below 1040px): a hairline pill like the WhatsApp disc beside it (the desktop pair is that disc and
   the "Get a quote" pill), filled ink while the menu is open. "Menu" rolls up to "Close" as the two lines slide
   together and turn into a centred X; closing runs it backwards. The lines sit on whole device pixels at 1x, 2x
   and 3x (--tl-t thickness, --tl-g gap, set per screen density here; forge.js refines them for in-between
   densities such as 2.625x), so both strokes stay sharp and equally thick. */
.nav__toggle {
  --tl-w: 18px; --tl-t: 2px; --tl-g: 4px;
  position: relative; display: inline-flex; align-items: center; gap: 12px; flex: none;
  height: 46px; padding: 0 16px 0 19px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out), transform 0.3s var(--ease-out);
}
@media (min-resolution: 1.5dppx) { .nav__toggle { --tl-t: 1.5px; --tl-g: 5px; } }
@media (min-resolution: 2.5dppx) { .nav__toggle { --tl-t: calc(5px / 3); --tl-g: calc(14px / 3); } }
.nav__toggle-text { display: grid; justify-items: center; height: 20px; line-height: 20px; overflow: hidden; }
.nav__toggle-text > span { grid-area: 1 / 1; transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out); }
.nav__toggle-text > span + span { transform: translateY(100%); opacity: 0; }
/* each label keeps its own colour ("Menu" ink, "Close" white), so neither passes through grey while the pill fills or empties */
.nav__toggle-text > span:first-child { color: var(--ink); }
.nav__toggle-text > span + span { color: var(--white); }
.nav__toggle-icon { position: relative; flex: none; width: var(--tl-w); height: 44px; }
.nav__toggle-line {
  position: absolute; left: 0; width: 100%; height: var(--tl-t); border-radius: var(--tl-t); background: currentColor;
  transition: translate 0.24s var(--ease-in-out) 0.18s, rotate 0.3s var(--ease-out);
}
.nav__toggle-line:first-child { top: calc(50% - var(--tl-g) / 2 - var(--tl-t)); }
.nav__toggle-line:last-child { top: calc(50% + var(--tl-g) / 2); }
.is-menu-open .nav__toggle { background: var(--ink); border-color: var(--ink); color: var(--white); }
.is-menu-open .nav__toggle-text > span:first-child { transform: translateY(-100%); opacity: 0; }
.is-menu-open .nav__toggle-text > span + span { transform: none; opacity: 1; }
.is-menu-open .nav__toggle-line { transition: translate 0.24s var(--ease-in-out), rotate 0.42s var(--ease-out) 0.16s; }
.is-menu-open .nav__toggle-line:first-child { translate: 0 calc((var(--tl-g) + var(--tl-t)) / 2); rotate: 45deg; }
.is-menu-open .nav__toggle-line:last-child { translate: 0 calc((var(--tl-g) + var(--tl-t)) / -2); rotate: -45deg; }
@supports not (rotate: 45deg) {
  .nav__toggle-line, .is-menu-open .nav__toggle-line { transition: transform 0.4s var(--ease-out); }
  .is-menu-open .nav__toggle-line:first-child { transform: translateY(calc((var(--tl-g) + var(--tl-t)) / 2)) rotate(45deg); }
  .is-menu-open .nav__toggle-line:last-child { transform: translateY(calc((var(--tl-g) + var(--tl-t)) / -2)) rotate(-45deg); }
}
.nav__toggle:active { transform: scale(0.95); background-color: rgba(20, 20, 20, 0.06); transition-duration: 0.12s; }
.is-menu-open .nav__toggle:active { background-color: #2A2A2A; }
.nav__toggle:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .nav__toggle:hover { border-color: var(--ink); } }
@media (min-width: 1040px) {
  .nav__links { display: flex; position: absolute; left: 50%; transform: translateX(-50%); }
  .nav__actions .btn--ghost { display: inline-flex; }
  .nav__toggle { display: none; }
}
/* 1040 to 1199: five links plus the WhatsApp button; "Get a quote" returns at 1200 (Contact is in the nav) */
@media (min-width: 1040px) and (max-width: 1199.98px) {
  .nav__actions .btn--ghost { display: none; }
  .nav__link { padding: 0 12px; }
}

/* Dropdown panel */
.dropdown {
  position: absolute; left: 50%; top: calc(100% + 14px); z-index: 20;
  width: max-content; min-width: 280px; padding: 10px;
  background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(0.98); transform-origin: top center;
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s linear 0.3s;
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.dropdown--mega { display: grid; grid-template-columns: repeat(3, 250px); gap: 8px; }
.dropdown__card {
  display: grid; gap: 12px; align-content: start; padding: 10px; border-radius: var(--r-md);
  transition: background-color var(--dur-1) var(--ease-out);
}
.dropdown__card:hover { background: var(--mist); }
.dropdown__thumb { height: 110px; border-radius: 12px; }
/* The three thumbnails are 145K of silk: fetch them once someone reaches for the menu, not on every page load. */
.nav:not(:hover):not(:focus-within) .nav__item:not(.is-open) .dropdown__thumb { background-image: none; }
.dropdown__title { font-weight: 500; font-size: 1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dropdown__title small { font-size: 0.8125rem; color: var(--slate); font-weight: 400; }
.dropdown__desc { font-size: 0.875rem; color: var(--slate); line-height: 1.45; }
.dropdown__list { display: grid; gap: 2px; min-width: 260px; }
.dropdown__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border-radius: 12px; font-size: 0.9375rem;
  transition: background-color var(--dur-1) var(--ease-out);
}
.dropdown__row:hover { background: var(--mist); }
.dropdown__row small { color: var(--slate); font-size: 0.8125rem; }

/* Mobile menu: a paper sheet that drops from under the header (whose hairline becomes the list's top rule).
   Each row's word rises out of a mask, its note fades in and its hairline draws, one row after another
   (--i, set in the markup); the WhatsApp button and the hours sit at the foot, in thumb reach. Closing fades the
   contents, then lifts the sheet. The page behind is locked (overflow) and made inert by forge.js. */
.mobile-menu {
  --mm-x: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  padding: var(--header-h) var(--mm-x) calc(20px + env(safe-area-inset-bottom));
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0 round 0 0 32px 32px);
  visibility: hidden;
  transition: clip-path 0.55s var(--ease-in-out) 0.1s, visibility 0s linear 0.65s;
}
.is-menu-open .mobile-menu {
  clip-path: inset(0 0 0 0 round 0 0 0 0); visibility: visible;
  transition: clip-path 0.7s var(--ease-in-out), visibility 0s;
}
.is-menu-open { overflow: hidden; scrollbar-gutter: stable; }
/* a soft scrim under the dropping sheet: paper on paper, the sheet's moving edge would otherwise read as a hard cut */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 89; pointer-events: none;
  background: rgba(20, 20, 20, 0.2); opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease-out) 0.2s, visibility 0s linear 0.7s;
}
.is-menu-open body::before { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease-out), visibility 0s; }
@media (min-width: 1040px) { body::before { display: none; } }
.is-menu-open .site-header .nav::after { opacity: 1; }
/* the header takes the sheet's paper while it is open, so rows scrolled up on a short phone pass under the logo, not over it */
.is-menu-open .site-header { background: var(--paper); }
.mobile-menu__nav, .mobile-menu__foot { opacity: 0; transition: opacity 0.22s var(--ease-out); }
.is-menu-open .mobile-menu__nav, .is-menu-open .mobile-menu__foot { opacity: 1; transition: none; }
.mobile-menu__links li { position: relative; }
.mobile-menu__links li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left center; transition: transform 0s linear 0.65s;
}
.mobile-menu__links a {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px;
  min-height: 56px; padding: clamp(10px, 2vh, 17px) 0;
  -webkit-tap-highlight-color: transparent;
}
/* overflow: clip (not hidden) keeps the word's own baseline, so the note sits on it */
.mobile-menu__label {
  display: block; overflow: hidden; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em;
  font-size: clamp(1.5rem, min(1.1rem + 3.4vw, 4.6vh), 2.75rem); line-height: 1.1; letter-spacing: -0.03em;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
  transition: opacity var(--dur-1) var(--ease-out);
}
.mobile-menu__label > span { display: block; transform: translateY(110%); transition: transform 0s linear 0.65s; }
.mobile-menu__note {
  flex: none; font-size: 0.8125rem; line-height: 1.2; color: var(--slate); white-space: nowrap;
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0s linear 0.65s;
}
.mobile-menu__note--tag {
  display: inline-flex; align-items: center; align-self: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--ember-soft); color: var(--ember-ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
/* the page you are on: an ember dot after its name */
.mobile-menu__links a[aria-current="page"] .mobile-menu__label > span::after {
  content: ""; display: inline-block; width: 0.21em; height: 0.21em; margin-left: 0.28em; vertical-align: 0.14em;
  border-radius: 50%; background: var(--ember);
}
.mobile-menu__links a:active .mobile-menu__label { opacity: 0.5; transition-duration: 0s; }
@media (hover: hover) and (pointer: fine) { .mobile-menu__links a:hover .mobile-menu__label { opacity: 0.6; } }
.mobile-menu__foot { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* "Get a quote on WhatsApp" needs 300px at the usual padding and a 320 phone gives it 280, so the pill tightens
   below 360. Should it still not fit (a larger system text size), the label wraps inside the pill, never past it. */
.mobile-menu__cta .btn__label { white-space: normal; line-height: 1.15; text-wrap: balance; }
.mobile-menu__cta .btn { height: auto; min-height: var(--btn-h); padding-block: 6px; } /* grows only if the label wraps (large system text) */
@media (max-width: 359.98px) { .mobile-menu__cta .btn { padding-left: 22px; gap: 12px; } }
@media (min-width: 600px) { .mobile-menu__foot { width: 100%; max-width: 440px; } }
/* phones on their side: two columns, so every page shows without scrolling */
@media (orientation: landscape) and (max-height: 520px) {
  .mobile-menu__links { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .mobile-menu__links a { min-height: 48px; }
}
.mobile-menu__foot > * { opacity: 0; transform: translateY(16px); transition: opacity 0s linear 0.65s, transform 0s linear 0.65s; }
.mobile-menu__hours { display: flex; align-items: flex-start; gap: 10px; font-size: 0.8125rem; line-height: 1.45; color: var(--slate); }
.mobile-menu__hours .i { width: 16px; height: 16px; margin-top: 2px; }
.mobile-menu__hours strong { display: block; font-weight: 500; color: var(--ink); }
/* entrance: one row after another */
.is-menu-open .mobile-menu__label > span { transform: none; transition: transform 0.85s var(--ease-out) calc(0.1s + var(--i, 0) * 0.045s); }
.is-menu-open .mobile-menu__note { opacity: 1; transition: opacity 0.6s var(--ease-out) calc(0.28s + var(--i, 0) * 0.045s); }
.is-menu-open .mobile-menu__links li::after { transform: none; transition: transform 1s var(--ease-out) calc(0.16s + var(--i, 0) * 0.045s); }
.is-menu-open .mobile-menu__foot > * {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-out) calc(0.1s + var(--i, 0) * 0.045s), transform 0.85s var(--ease-out) calc(0.1s + var(--i, 0) * 0.045s);
}
/* no animation in QA, with reduced motion, or when forge.js closes the menu instantly (back/forward cache, a window widened past 1040px) */
.is-qa .nav__toggle *, .is-qa .mobile-menu, .is-qa .mobile-menu *, .is-qa .mobile-menu *::after,
.is-reduced .nav__toggle *, .is-reduced .mobile-menu, .is-reduced .mobile-menu *, .is-reduced .mobile-menu *::after,
.is-menu-instant .nav__toggle, .is-menu-instant .nav__toggle *, .is-menu-instant .mobile-menu,
.is-menu-instant .mobile-menu *, .is-menu-instant .mobile-menu *::after { transition: none !important; }
/* phones in landscape: keep the header clear of the notch, like the menu */
@media (max-width: 1039.98px) {
  .site-header > .container { padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); }
}
@media (min-width: 1040px) { .mobile-menu { display: none; } }

/* ---------- Footer ---------- */
.site-footer { position: relative; padding: clamp(64px, 8vw, 112px) 0 32px; background: var(--paper); overflow: hidden; }
.footer__top { display: grid; gap: 48px; grid-template-columns: 1fr; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
/* Side by side only when the four columns have room; below 1280 the brand sits above them. */
@media (min-width: 1280px) { .footer__top { grid-template-columns: 1fr 2.1fr; } }
.footer__brand { display: grid; gap: 20px; align-content: start; max-width: 380px; }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__social-btn { width: 44px; height: 44px; }
.footer__social-btn .i { width: 18px; height: 18px; }
.footer__brand img { height: 30px; width: auto; }
.footer__cols { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__cols > :last-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); }
  .footer__cols > :last-child { grid-column: auto; }
}
.footer__hours { display: grid; gap: 2px; }
.footer__title { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--stone); margin-bottom: 18px; }
.footer__list { display: grid; gap: 12px; font-size: 0.9375rem; }
.footer__list a { color: var(--ink); transition: color var(--dur-1); overflow-wrap: anywhere; }
.footer__list a.nowrap { overflow-wrap: normal; }
.footer__list a:hover { color: var(--ember-ink); }
.footer__list span { color: var(--slate); }
.footer__word { margin: clamp(40px, 6vw, 80px) 0 0; line-height: 0; user-select: none; }
.footer__word svg { width: 100%; height: auto; color: var(--ink); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; font-size: 0.8125rem; color: var(--slate); }
.footer__bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__bottom a:hover { color: var(--ink); }
.pay-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-list .chip { height: 30px; font-size: 0.8125rem; padding: 0 12px; color: var(--slate); }
/* Payment acceptance tiles: official marks on white, one height, optically balanced logo sizes */
.pay-tile {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 46px; padding: 0 16px; border-radius: var(--r-sm);
  background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04);
  font-size: 0.8125rem; font-weight: 500; line-height: 1; color: #141414; white-space: nowrap;
}
.pay-logo { display: block; flex: none; width: auto; height: calc(20px * var(--pay-s, 1)); }
.pay-logo--ecocash { height: calc(15px * var(--pay-s, 1)); }
.pay-logo--innbucks { height: calc(26px * var(--pay-s, 1)); border-radius: calc(5px * var(--pay-s, 1)); }
.pay-logo--visa { height: calc(12px * var(--pay-s, 1)); }
.pay-logo--mastercard { height: calc(22px * var(--pay-s, 1)); }
.pay-logo--zimswitch { height: calc(24px * var(--pay-s, 1)); }
.pay-logo--paynow { height: 12px; margin-top: 1px; }
/* Larger tiles for a page's own payment section */
.pay-list--lg { --pay-s: 1.15; gap: 10px; }
.pay-list--lg .pay-tile { flex: 1 1 auto; height: 56px; padding: 0 20px; border-radius: 14px; font-size: 0.875rem; }
.pay-tile__cap {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--mist); color: #62625F; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em;
}
.pay-tile__marks { display: inline-flex; align-items: center; gap: 11px; }
.pay-tile__via {
  display: inline-flex; align-items: center; gap: 6px; align-self: stretch;
  margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--line);
  font-size: 0.75rem; color: #62625F;
}
.pay-tile--text { gap: 9px; }
.pay-tile--text .i { width: 18px; height: 18px; color: #62625F; }
.pay-tile--text span { color: #62625F; }
/* on the narrowest phones a long text tile (ZiG) may wrap instead of pushing the page sideways */
@media (max-width: 379.98px) { .pay-tile--text { flex: 1 1 100%; max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; } }
.pay-tile__zig { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; color: #141414; }
@media (max-width: 480px) {
  .pay-list { gap: 6px; }
  .pay-tile { height: 42px; padding: 0 12px; }
  .pay-tile__marks { gap: 10px; }
  .pay-tile__via { margin-left: 2px; padding-left: 10px; }
  .pay-list--lg { --pay-s: 1; }
  .pay-list--lg .pay-tile { height: 46px; padding: 0 14px; border-radius: var(--r-sm); font-size: 0.8125rem; }
}

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px 0 8px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--white);
  box-shadow: var(--shadow-float); font-size: 0.9375rem; font-weight: 500;
  transform: translateY(140%); transition: transform 0.6s var(--ease-out);
}
.wa-float.is-visible { transform: none; }
.wa-float__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #25D366; color: var(--white); }
.wa-float__icon svg { width: 22px; height: 22px; }
.wa-float__dot { width: 8px; height: 8px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
@media (max-width: 560px) { .wa-float { padding: 0 8px; } .wa-float__text { display: none; } .wa-float__dot { display: none; } }

/* ---------- Accordion (FAQ) ---------- */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; text-align: left;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); letter-spacing: -0.015em; line-height: 1.3;
}
.acc-icon {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; margin: -0.75px 0 0 -6.5px;
  background: currentColor; transition: transform var(--dur-2) var(--ease-out);
}
.acc-icon::after { transform: rotate(90deg); }
.acc-item.is-open .acc-icon { background: var(--ink); color: var(--white); border-color: var(--ink); }
.acc-item.is-open .acc-icon::after { transform: rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-out); }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-body { padding: 0 64px 28px 0; color: var(--slate); max-width: 760px; }
.acc-body > * + * { margin-top: 12px; }

/* ---------- Tabs / segmented control ---------- */
.segmented {
  position: relative; display: inline-flex; padding: 5px; gap: 2px; border-radius: var(--r-pill);
  background: var(--mist); border: 1px solid var(--line);
}
.segmented button {
  position: relative; z-index: 1; height: 42px; padding: 0 20px; border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 500; color: var(--slate); transition: color var(--dur-2) var(--ease-out);
}
.segmented button[aria-selected="true"] { color: var(--ink); }
.segmented__pill {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; border-radius: var(--r-pill);
  background: var(--white); box-shadow: var(--shadow-1);
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out);
}

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; }
.field label, .field .field__label { font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.field .field__hint { font-size: 0.8125rem; color: var(--slate); }
.input, .select, .textarea {
  width: 100%; min-height: 54px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink);
  font-size: 1rem; transition: border-color var(--dur-1), box-shadow var(--dur-1);
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23141414' stroke-width='1.6' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(238, 106, 44, 0.16); }
.input::placeholder, .textarea::placeholder { color: var(--stone); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; color: var(--slate); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 16px; text-align: center;
  border-radius: 14px; border: 1px solid var(--line-strong); background: var(--white); font-size: 0.9375rem; font-weight: 500;
  transition: all var(--dur-1) var(--ease-out); cursor: pointer;
}
.choice input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ---------- Lists ---------- */
.ticks { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 30px; line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.12em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 9.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.ticks--ember li::before { background-color: var(--ember); }
.ticks li.is-off { color: var(--stone); }
.ticks li.is-off::before { background: var(--fog) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23A6A6A2' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9h6'/%3E%3C/svg%3E") center / 18px no-repeat; }
.hooks { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.hooks li { display: flex; gap: 12px; align-items: baseline; }
.hooks li::before { content: "\21B3"; color: var(--slate); flex: none; transform: translateY(-1px); }

/* ---------- Data table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--white); -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 720px; font-size: 0.9375rem; }
.table th, .table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--slate); background: #FAFAF8; position: sticky; top: 0; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td:first-child, .table th:first-child { font-weight: 500; color: var(--ink); }
.table .is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 960px) { .page-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; gap: 64px; } }
.page-hero__title { margin-top: 18px; }
.page-hero__aside { display: grid; gap: 28px; justify-items: start; }
.page-hero__media { margin-top: clamp(40px, 5vw, 64px); height: clamp(260px, 36vw, 520px); border-radius: var(--r-xl); overflow: hidden; position: relative; }

/* ---------- Big CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  padding: clamp(48px, 7vw, 104px) clamp(24px, 6vw, 88px);
  background: var(--coal) url("../img/silk/banner-graphite.webp") center / cover no-repeat; color: var(--white);
  /* Banners are 2400px wide for 2x screens; 1x screens take the 1600 copy (no band draws one wider than ~1420px).
     Browsers without image-set() keep the url above. Same pattern in every page's banner rule. */
  background-image: image-set(url("../img/silk/banner-graphite-1600.webp") 1x, url("../img/silk/banner-graphite.webp") 2x);
}
.cta-band__grid { position: relative; z-index: 2; display: grid; gap: 32px; }
@media (min-width: 960px) { .cta-band__grid { grid-template-columns: 1.3fr 0.7fr; align-items: end; } }

/* ---------- Motion primitives ----------
   Only applied when JS runs (html.js). Without JS, or in QA/reduced motion, content is simply visible. */
.js [data-reveal]:not(.is-in) { opacity: 0; }
.js [data-reveal="up"]:not(.is-in),
.js [data-reveal=""]:not(.is-in) { transform: translate3d(0, 28px, 0); }
.js [data-reveal="blur"]:not(.is-in) { filter: blur(14px); transform: translate3d(0, 12px, 0); }
.js [data-reveal="scale"]:not(.is-in) { transform: scale(0.94); }
.js [data-reveal="rise"]:not(.is-in) { transform: translate3d(0, 64px, 0); filter: blur(8px); }
.js.is-qa [data-reveal], .js.is-reduced [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
.split-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-word { display: inline-block; will-change: transform, filter, opacity; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* If scripts never boot, reveal everything after a beat. GSAP adds .is-in as soon as it takes over. */
.js [data-reveal]:not(.is-in) { animation: forge-failsafe 0.6s ease 3.2s forwards; }
@keyframes forge-failsafe { to { opacity: 1; transform: none; filter: none; } }
/* The header items and split headings animate in when scripts boot (forge.js); until then they wait, so they
   never show finished and then blink out for their entrance (the legal pages' h1s are split headings).
   Opacity only: .nav__links keeps its centring transform. */
.js.is-loading:not(.is-qa):not(.is-reduced) .site-header .nav > *,
.js.is-loading:not(.is-qa):not(.is-reduced) [data-split="words"],
.js.is-loading:not(.is-qa):not(.is-reduced) [data-split="lines"] { opacity: 0; animation: boot-failsafe 0.6s ease 3s forwards; }
@keyframes boot-failsafe { to { opacity: 1; } }

/* ---------- Icons (inline sprite: <svg class="i"><use href="#i-name"/></svg>) ---------- */
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.nav__link .i { width: 11px; height: 11px; stroke-width: 2.2; }

/* ---------- Page curtain (between internal pages) ---------- */
.page-curtain {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center;
  background: var(--ink); color: var(--white);
  visibility: hidden; opacity: 0; pointer-events: none;
}
.page-curtain__mark { width: 44px; height: 44px; }
/* Arriving from another Forge page (class set in the head): the curtain covers the first paint until
   forge.js lifts it, so the new page never flashes between the two curtains. Lifts by itself if scripts fail. */
.is-arriving .page-curtain { visibility: visible; opacity: 1; animation: curtain-failsafe 0.4s ease 3s forwards; }
@keyframes curtain-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- Anchors (links to #id, from this page or another) ----------
   A target lands 16px below the sticky header: html's scroll-padding-top (the header) plus this
   scroll-margin-top. That is where the browser jumps without JS; forge.js ("Anchors") lands at exactly
   the same place once the layout has settled. A target that needs more room sets its own scroll-margin-top. */
[id] { scroll-margin-top: 16px; }
/* Opened at #id, or brought back by a refresh or back/forward: the head script holds the page until forge.js
   has landed (it removes .is-anchoring), so the top of the page never flashes before the jump. Shows by
   itself after 3s if scripts never boot. */
.is-anchoring main, .is-anchoring .site-footer { opacity: 0; animation: anchor-failsafe 0s 3s forwards; }
@keyframes anchor-failsafe { to { opacity: 1; } }
/* a section focused by an in-page link (so Tab carries on from there) shows no ring */
[data-anchor-focus]:focus { outline: none; }

/* ---------- Footer extras ---------- */
.footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.footer__pay .footer__title { margin: 0; }
.footer__word img { width: 100%; height: auto; opacity: 0.94; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 56px; }
.w-full { width: 100%; }
.hide-mobile { display: none; }
@media (min-width: 960px) { .hide-mobile { display: initial; } .hide-desktop { display: none !important; } }
.nowrap { white-space: nowrap; }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Hints: show people where they can switch ----------
   A control that changes what you see (a segmented toggle, a row of tabs, a sideways rail) carries a small
   hint, slate words after an ember icon, written in the section's markup. It is aria-hidden: the control
   has its own roles and labels.
     <span class="hint hint--below" data-hint="switch" aria-hidden="true">Switch plans to compare</span>
   data-hint picks the icon (switch, two arrows passing; swipe, one arrow both ways); Forge.hint() in
   forge.js draws it, shows the hint when the control first scrolls into view (with a one-time nudge of the
   control) and fades it after the first use, remembered for the session. Hints stay hidden until a script
   shows them (.is-on), so nothing points at a control that cannot work. A hint never moves the page: the
   section places it absolutely, in space that is already there or that it reserves, and a hint that has
   gone keeps its space.
   Placement, for a hint inside its control (the control is position: relative):
     .hint--below   under the control, left edges aligned (.hint--center centres it)
     .hint--beside  to the right of the control, centred on it (only where the room is there)
     .hint--chip    the same slate words on a light frost, for a hint over imagery (a rail's "Swipe" cue);
                    quiet on purpose, so it reads as a hint and never as a button
     .hint--touch   only on touch screens
   Rails: Forge.hint gives a sideways scroller .hint-rail, .is-scrollable while it overflows, and
   .is-edge-l / .is-edge-r on each side that has more to show, which fades softly (--hint-fade sets the
   width, or --hint-fade-l and --hint-fade-r one side each; --hint-fade-to how much of the edge still shows). */
@property --hint-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --hint-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hint {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.005em; white-space: nowrap;
  color: var(--slate);
  pointer-events: none; -webkit-user-select: none; user-select: none;
  opacity: 0; visibility: hidden; translate: 0 5px;
  transition: opacity 0.5s var(--ease-out), translate 0.8s var(--ease-out), visibility 0s linear 0.8s;
}
.hint.is-on { opacity: 1; visibility: visible; translate: none; transition-delay: 0s; }
.hint.is-done {
  opacity: 0; visibility: hidden; translate: 0 -3px;
  transition: opacity 0.3s ease, translate 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.is-qa .hint { transition: none; }
.hint__icon { width: 16px; height: 16px; color: var(--ember); }
/* the arrows start 3px inside their box: pull them back so their ink lines up with the text above */
.hint:not(.hint--chip) .hint__icon { margin-left: -3px; }
.hint__icon g { transform-box: fill-box; }
.hint--below, .hint--beside { position: absolute; z-index: 3; }
.hint--below { left: 0; top: calc(100% + var(--hint-gap, 10px)); }
.hint--below.hint--center { left: 50%; transform: translateX(-50%); }
.hint--beside { left: calc(100% + var(--hint-gap, 16px)); top: 50%; transform: translateY(-50%); }
.hint--chip {
  position: absolute; z-index: 6;
  height: 28px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.62);
}
@media (hover: hover), (pointer: fine) { .hint--touch { display: none; } }

/* the nudge: the icon's arrows lean apart once (Forge.hint adds .is-nudge while the control nudges) */
.hint.is-nudge .hint__fwd  { animation: hint-fwd 1.3s var(--ease-in-out) 0.15s both; }
.hint.is-nudge .hint__back { animation: hint-back 1.3s var(--ease-in-out) 0.15s both; }
.hint.is-nudge .hint__swipe { animation: hint-swipe 1.5s var(--ease-in-out) 0.15s both; }
@keyframes hint-fwd   { 0%, 100% { translate: 0 0; } 40% { translate: 3px 0; } }
@keyframes hint-back  { 0%, 100% { translate: 0 0; } 40% { translate: -3px 0; } }
@keyframes hint-swipe { 0%, 100% { translate: 0 0; } 30% { translate: -3.5px 0; } 65% { translate: 3.5px 0; } }

/* the ember ring a tab sends out when its row nudges (Forge.hint.pulse) */
.hint-ring {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(238, 106, 44, 0.75), 0 0 18px 2px rgba(238, 106, 44, 0.28); opacity: 0;
}

/* sideways rails: a soft fade on the side(s) with more to show */
.hint-rail.is-scrollable {
  --hint-mask: linear-gradient(90deg, rgba(0, 0, 0, var(--hint-fade-to, 0.18)) 0, #000 var(--hint-l), #000 calc(100% - var(--hint-r)), rgba(0, 0, 0, var(--hint-fade-to, 0.18)) 100%);
  -webkit-mask-image: var(--hint-mask); mask-image: var(--hint-mask);
  transition: --hint-l 0.5s var(--ease-out), --hint-r 0.5s var(--ease-out);
}
.hint-rail.is-edge-l { --hint-l: var(--hint-fade-l, var(--hint-fade, 44px)); }
.hint-rail.is-edge-r { --hint-r: var(--hint-fade-r, var(--hint-fade, 44px)); }

/* ---------- Breadcrumbs: each inner page's hero eyebrow reads "Forge / Page" ----------
   The eyebrow keeps its classes (eyebrow, the page's hero hook) and any data-reveal, so its size, tracking,
   uppercase, intro and spacing stay as they were. "Forge" and the slash are quieter; the page keeps the
   eyebrow's colour. On a dark ground add eyebrow--light (or sit inside .dark) and the page turns ember.
     <nav class="eyebrow crumbs ws-hero__eyebrow" aria-label="Breadcrumb">
       <ol class="crumbs__list" role="list">
         <li><a class="crumbs__home" href="index.html">Forge</a></li>
         <li><span class="crumbs__sep" aria-hidden="true">/</span><span class="crumbs__here" aria-current="page">Websites</span></li>
       </ol>
     </nav> */
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.crumbs__list > li { display: inline-flex; align-items: center; }
.crumbs__home { position: relative; color: var(--slate); transition: color var(--dur-2) var(--ease-out); }
.crumbs__home::before { content: ""; position: absolute; inset: -16px -10px; } /* a 44px tap target that moves nothing */
.crumbs__home::after { /* the hover underline, drawn from the left like .link */
  content: ""; position: absolute; left: 0; right: 0.09em; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease-out);
}
.crumbs__home:hover { color: var(--ink); }
.crumbs__home:hover::after { transform: none; }
.crumbs__sep { margin-inline: 0.65em; font-weight: 400; color: var(--stone); } /* even, with room for the focus ring on "Forge" */
.crumbs.eyebrow--light .crumbs__home, .dark .crumbs__home { color: rgba(255, 255, 255, 0.62); }
.crumbs.eyebrow--light .crumbs__home:hover, .dark .crumbs__home:hover { color: var(--white); }
.crumbs.eyebrow--light .crumbs__sep, .dark .crumbs__sep { color: rgba(255, 255, 255, 0.38); }
.crumbs.eyebrow--light .crumbs__here, .dark .crumbs__here { color: var(--ember); }