/*
 * Homepage skin (index.html only). Loaded after redesign.css and scoped to
 * body.home, so login, signup, reset, 2FA and pricing keep their own look.
 * Direction: Wise's lime + forest green and chunky pill buttons, Ramp's
 * confident heavy headlines and dark band, Notion's soft rounded cards on
 * warm neutrals. The dashboard preview (#dashboard-preview) is untouched.
 *
 * Every selector here is prefixed .h- or scoped to body.home, and every
 * custom property is namespaced --h-*, so nothing leaks into the preview.
 */

/* body.pricing-nav (pricing.html) takes only the navbar and buttons from this
   file, so it gets the same variables but none of the page-level rules below. */
body.home,
body.pricing-nav {
  --h-ink: #0e0f0c;
  --h-ink-70: rgba(14, 15, 12, .72);
  --h-ink-50: rgba(14, 15, 12, .52);
  --h-forest: #1d0f66;
  --h-lime: #4e26e3;
  --h-lime-hover: #6039f0;
  --h-lime-pale: #eeeafd;
  --h-lime-bright: #b9a5ff; /* the accent, lightened for text on dark surfaces */
  --h-on-accent: #fff; /* text on the accent colour */
  --h-warm: #f5f5f1;
  --h-line: #e6e6df;
  --h-radius: 28px;
  --h-radius-sm: 18px;
  --h-wrap: 1240px;
  --h-pad: clamp(20px, 4vw, 48px);
  --h-ease: cubic-bezier(.22, .8, .24, 1);
  --h-smooth: cubic-bezier(.45, .05, .2, 1);
  --h-nav-h: 88px;
  --nav-h: 88px;
}

body.home {
  background: #fff;
  color: var(--h-ink);
  font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "cv11", "ss03";
  line-height: 1.55;
  overflow-x: clip;
}

body.home :is(h1, h2, h3, h4):not(#dashboard-preview *) {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: inherit;
}
body.home ::selection { background: var(--h-lime); color: var(--h-on-accent); }
body.home .scroll-progress { block-size: 3px; background: transparent; }
body.home .scroll-progress span { background: var(--h-forest); }

.h-wrap {
  inline-size: min(100%, var(--h-wrap));
  margin-inline: auto;
  padding-inline: var(--h-pad);
}

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

.h-btn {
  --fill: var(--h-forest);
  --fill-ink: var(--h-lime-bright);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 600 15px/1 "Inter", system-ui, sans-serif;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .7s var(--h-smooth), border-color .7s var(--h-smooth), transform .6s var(--h-smooth);
}
/* Hover wave: a circle grows from wherever the pointer entered, is clipped
   by the pill, and swaps the button's colours. site.js sets --bx / --by. */
.h-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: var(--bx, 50%);
  inset-block-start: var(--by, 100%);
  inline-size: max(260%, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 1.1s var(--h-smooth);
  pointer-events: none;
}
.h-btn:hover::before, .h-btn:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
.h-btn:hover, .h-btn:focus-visible { color: var(--fill-ink); }
.h-btn:hover, .h-btn:focus-visible { border-color: var(--fill); }
.h-btn-text:hover, .h-btn-text:focus-visible { border-color: transparent; }
.h-btn:hover { transform: scale(1.03); }
.h-btn:active { transform: scale(.97); }
.h-btn:focus-visible { outline: 3px solid var(--h-forest); outline-offset: 3px; }
.h-btn-lg { min-block-size: 56px; padding: 0 30px; font-size: 17px; }
.h-btn-lime { background: var(--h-lime); color: var(--h-on-accent); --fill: var(--h-forest); --fill-ink: var(--h-lime-bright); }
.h-btn-dark { background: var(--h-forest); color: var(--h-lime-bright); --fill: var(--h-ink); --fill-ink: var(--h-lime-bright); }
.h-btn-outline { border-color: var(--h-ink); color: var(--h-ink); background: transparent; --fill: var(--h-ink); --fill-ink: #fff; }
.h-btn-outline-dark { border-color: var(--h-forest); color: var(--h-forest); background: transparent; --fill: var(--h-forest); --fill-ink: var(--h-lime-bright); }
.h-btn-text { color: var(--h-ink); padding-inline: 14px; --fill: rgba(14, 15, 12, .07); --fill-ink: var(--h-ink); }
.h-btn-text:hover { transform: none; }
.h-waitlist .h-btn-lime, .h-sec-lime .h-btn-lime { --fill: var(--h-lime-pale); --fill-ink: var(--h-forest); }

/* --------------------------------------------------------------- nav -- */
/* A floating pill: detached from the top, left and right edges, as wide as
   its content. The header itself is a click-through rail; only the pill
   takes pointer events. */

.h-nav {
  position: fixed;
  inset-block-start: 14px;
  inset-inline: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-inline: 12px;
  pointer-events: none;
}
.h-nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  inline-size: fit-content;
  max-inline-size: 100%;
  block-size: 60px;
  padding: 0 10px 0 18px;
  border: 1px solid rgba(14, 15, 12, .08);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(14, 15, 12, .04), 0 10px 30px -12px rgba(14, 15, 12, .14);
  pointer-events: auto;
  transform-origin: top center;
  transition: background-color .45s var(--h-ease), box-shadow .45s var(--h-ease),
    border-color .45s var(--h-ease), transform .45s var(--h-ease), block-size .45s var(--h-ease);
}
.h-nav.is-stuck .h-nav-inner {
  background: #fff;
  border-color: rgba(14, 15, 12, .1);
  box-shadow: 0 2px 4px rgba(14, 15, 12, .05), 0 22px 50px -18px rgba(14, 15, 12, .28);
  block-size: 56px;
}
html.js .h-nav-inner { animation: h-nav-in .9s var(--h-ease) both; }
@keyframes h-nav-in { from { opacity: 0; transform: translateY(-24px) scale(.96); } to { opacity: 1; transform: none; } }

.h-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--h-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.04em;
  text-decoration: none;
}
.h-brand img { display: block; inline-size: 30px; block-size: 30px; border-radius: 9px; }
.h-brand-light { color: #fff; }

.h-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.h-nav-links a {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--h-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .3s var(--h-ease), color .3s var(--h-ease);
}
.h-nav-links a:hover { background: rgba(14, 15, 12, .06); }
.h-nav-links a[aria-current="location"],
.h-nav-links a[aria-current="page"] { background: var(--h-lime-pale); color: var(--h-forest); }
.h-nav-links a:focus-visible { outline: 3px solid var(--h-forest); outline-offset: 2px; }
.h-only-narrow { display: none; }

.h-nav-actions { display: flex; align-items: center; gap: 6px; }
.h-nav-actions .h-btn { min-block-size: 40px; padding: 0 18px; font-size: 14.5px; }
.h-nav-actions .h-btn-text { padding-inline: 12px; }
.h-burger {
  display: none;
  inline-size: 40px;
  block-size: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 15, 12, .06);
  color: var(--h-ink);
  cursor: pointer;
  transition: background-color .3s var(--h-ease), transform .3s var(--h-ease);
}
.h-burger:hover { background: rgba(14, 15, 12, .1); }
.h-burger:active { transform: scale(.92); }
.h-burger:focus-visible { outline: 3px solid var(--h-forest); outline-offset: 2px; }

/* Wide navbar: spans the page content, never past the side whitespace. */
@media (min-width: 901px) {
  .h-nav-inner {
    inline-size: min(100%, calc(var(--h-wrap) - 2 * var(--h-pad)));
    justify-content: space-between;
  }
  .h-nav-primary { flex: 1; display: flex; justify-content: center; }
}

@media (max-width: 900px) {
  .h-nav-inner { inline-size: 100%; justify-content: space-between; gap: 12px; }
  .h-nav-actions .h-btn-text { display: none; }
  .h-burger { display: inline-flex; }
  .h-nav-primary { position: static; }
  .h-nav-links {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border: 1px solid rgba(14, 15, 12, .08);
    border-radius: 28px;
    background: #fff;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 60px -20px rgba(14, 15, 12, .3);
    transform-origin: top center;
  }
  .h-nav-links:not([hidden]) { animation: h-menu-in .35s var(--h-ease) both; }
  .h-nav-links[hidden] { display: none; }
  .h-nav-links a { padding: 14px 18px; border-radius: 18px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
  .h-only-narrow { display: block; }
}
@keyframes h-menu-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 380px) { .h-nav-actions .h-btn-lime { padding-inline: 14px; } }

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

.h-hero { position: relative; isolation: isolate; padding-block-start: calc(var(--h-nav-h) + clamp(24px, 5vw, 72px)); }
.h-hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: min(900px, 90vh);
  z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(124, 92, 255, .32), transparent 70%),
    radial-gradient(40% 40% at 90% 30%, rgba(214, 203, 255, .16), transparent 72%);
  pointer-events: none;
}
.h-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: min(100%, 980px);
  margin-inline: auto;
  padding-inline: var(--h-pad);
  text-align: center;
}
.h-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 8px 16px;
  border: 1px solid var(--h-line);
  border-radius: 999px;
  background: #fff;
  color: var(--h-ink-70);
  font-size: 13.5px;
  font-weight: 500;
}
.h-pill i {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: #2f9e0a;
  box-shadow: 0 0 0 4px rgba(47, 158, 10, .18);
}
.h-hero-title {
  margin: 0;
  font-size: clamp(2.9rem, 1rem + 8.2vw, 7.4rem);
  line-height: .94;
  letter-spacing: -.055em;
}
.h-hero-sub {
  max-inline-size: 640px;
  margin: 28px 0 0;
  color: var(--h-ink-70);
  font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
  line-height: 1.5;
}
.h-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 36px; }
.h-fine { margin: 18px 0 0; color: var(--h-ink-50); font-size: 14px; }

html.js .h-hero-copy > * { animation: h-rise .8s var(--h-ease) both; }
/* The headline animates itself letter by letter (site.js); hide it until then. */
html.js .h-hero-copy > .h-hero-title.is-split { animation: none; }
.h-l { position: relative; display: inline-block; opacity: 0; }
.h-w { display: inline-block; white-space: nowrap; }
.h-flip { position: relative; overflow: clip; } /* nothing may show outside the pill */
.h-flip-track b::before { transition: transform .7s var(--h-ease); }
/* Intro: the dot waits below the pill and slides up with the word. */
.h-flip.is-intro .h-flip-track b::before { transform: translateY(260%); }
html.js .h-hero-copy > :nth-child(2) { animation-delay: .06s; }
html.js .h-hero-copy > :nth-child(3) { animation-delay: .14s; }
html.js .h-hero-copy > :nth-child(4) { animation-delay: .22s; }
html.js .h-hero-copy > :nth-child(5) { animation-delay: .28s; }
@keyframes h-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* The dashboard preview is deliberately left exactly as redesign.css draws
   it; only inherited text settings are pinned back below. */
body.home #dashboard-preview {
  font-feature-settings: normal;
  line-height: 1.6;
}

/* Stage: the dashboard sits on a gradient card, top corners rounded, and is
   cropped by the card's bottom edge so it reads as bleeding off the page. */
.h-hero { overflow-x: clip; }
.h-stage {
  position: relative;
  inline-size: calc(100vw - 60px);
  margin-inline: calc(50% - 50vw + 30px);
  margin-block-start: clamp(40px, 6vw, 80px);
  padding: clamp(24px, 4vw, 56px) 0 0;
  border-end-start-radius: clamp(20px, 3.5vw, 55px);
  border-end-end-radius: clamp(20px, 3.5vw, 55px);
  overflow: clip;
  background:
    radial-gradient(55% 60% at 22% 100%, rgba(124, 92, 255, .42), transparent 70%),
    radial-gradient(55% 60% at 80% 100%, rgba(59, 130, 246, .38), transparent 70%),
    linear-gradient(180deg, rgba(110, 90, 255, 0) 0%, rgba(110, 90, 255, .14) 45%, rgba(70, 120, 255, .3) 100%);
}
.h-stage-scroll {
  inline-size: min(100% - 2 * var(--shell-pad), var(--shell) - 2 * var(--shell-pad));
  margin-inline: auto;
}
.h-stage .mock-wrap { margin: 0; padding: 0; }
.h-stage .mock { border-end-start-radius: 0; border-end-end-radius: 0; }

/* Below the laptop width the dashboard sits in a device instead: an iPad on tablets,
   an iPhone on phones. The frame image is drawn over the dashboard (its screen is a
   transparent hole, so the rounded bezel masks the dashboard's square corners).
   The device is as tall as the screen allows - its top stays 80px below the navbar and its
   bottom 30px above the window's. The frame is a plain stretched background image (no
   border-image, which some browsers dropped); it is positioned outside the screen by the
   bezel's share of the screen size. --dev-w is the screen width in px (site.js). */
@media (max-width: 1100px) {
  /* The card runs edge to edge on tablets and phones. */
  .h-stage { border-end-start-radius: 0; border-end-end-radius: 0; inline-size: 100vw; margin-inline: calc(50% - 50vw); }
  .h-stage-scroll { position: relative; isolation: isolate; margin-inline: auto; --dev-w: 360px; }
  .h-stage-scroll::before {
    content: ""; position: absolute; z-index: 6; pointer-events: none;
    background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
  }
  .h-stage .mock { border-width: 0; }
}

/* iPad: screen 1352 wide in a 1400 x 1060 frame (24px bezel). */
@media (min-width: 701px) and (max-width: 1100px) {
  .h-stage { padding: 40px 28px 40px; }
  .h-stage-scroll { inline-size: auto; }
  .h-stage-scroll::before {
    inset: -13px;                                   /* fallback */
    inset: calc(var(--dev-w) * -0.01775);
    background-image: url("ipad-frame.png?v=2");
  }
  .h-stage .mock {
    height: clamp(380px, calc(100svh - 216px), 1000px); min-height: 0;
    border-radius: calc(var(--dev-w) * 0.0355);
  }
}

/* iPhone: screen 393 wide in a 429 x 884 frame; the Dynamic Island covers the top of the
   screen, so the dashboard starts below it. */
@media (max-width: 700px) {
  .h-stage { padding: 34px 28px 34px; }
  /* The scaled dashboard still takes its unscaled space, so the holder is sized to the scaled height. */
  .h-stage .mock-wrap { height: calc(340px * 853 / 393 * var(--mock-zoom, 1)); }
  /* Aspect ratio locked: the width follows the height the screen allows (393 : 853). */
  .h-stage-scroll { inline-size: min(100%, 372px, calc(clamp(500px, calc(100svh - 210px), 1000px) * 0.4607)); }
  .h-stage-scroll::before {
    /* The phone's ratio is locked, so its bezel is a fixed share of the screen: percentages. */
    inset: -1.875% -4.58% -1.76%;
    background-image: url("iphone-frame.png?v=2");
  }
  .h-stage .mock {
    /* Laid out at a fixed 340 x 738 phone screen and scaled (site.js sets --mock-zoom) to the
       width the screen allows, so the dashboard keeps its phone layout at any device size. */
    width: 340px; height: calc(340px * 853 / 393); min-height: 0; padding: 46px 12px 12px;
    transform: scale(var(--mock-zoom, 1)); transform-origin: 0 0; border-radius: 47.6px;
  }
}

/* ---------------------------------------------------------- feature grid -- */

.h-head-center { margin-inline: auto; text-align: center; }
.h-head-center .h-lead { margin-inline: auto; }
.h-fg-sec { position: relative; isolation: isolate; padding-block-end: clamp(48px, 7vw, 100px); overflow: clip; }
/* Soft blurred colour behind the heading and grid. */
.h-fg-sec::before {
  content: "";
  position: absolute;
  /* Reaches 160px below the section so the colour carries on into the next section; the
     positions below are the old percentages of the section's own height, kept with calc(). */
  inset: 0 0 -160px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 30% at 14% calc(28% - 44.8px), rgba(167, 139, 250, .38), transparent 70%),
    radial-gradient(32% 28% at 88% calc(22% - 35.2px), rgba(96, 165, 250, .34), transparent 70%),
    radial-gradient(36% 30% at 78% calc(82% - 131.2px), rgba(244, 114, 182, .26), transparent 70%),
    radial-gradient(34% 30% at 20% calc(86% - 137.6px), rgba(124, 92, 255, .30), transparent 70%),
    radial-gradient(30% 26% at 50% calc(52% - 83.2px), rgba(196, 181, 253, .30), transparent 70%);
  filter: blur(40px);
}
/* The glow runs past the bottom edge, so only the sides are clipped; the next section sits above it. */
.h-fg-sec { overflow-x: clip; overflow-y: visible; }
.h-rv-sec { position: relative; z-index: 1; }
.h-fg { inline-size: 100%; }
.h-fg-grid {
  --cols: 11; /* 9 real columns + 1 empty one each side */
  --s: 124px;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--s));
  grid-auto-rows: calc(var(--s) * .92);
  inline-size: calc(var(--cols) * var(--s));
  position: relative;
  inset-inline-start: 50%;
  translate: -50% 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.h-fg-cell {
  grid-column: calc(var(--c) + 1);
  grid-row: calc(var(--r) + 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--h-line);
  margin: 0 -1px -1px 0;
  color: var(--h-ink-70);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  background: rgba(255, 255, 255, .55);
  transition: border-color .12s linear, color .12s linear;
}
.h-fg-cell svg { inline-size: 24px; block-size: 24px; flex: none; }
/* Hover: pink border and a small tilt toward the cursor; nothing grows or floats. */
.h-fg-cell, .h-fg-core { opacity: var(--f, 1); }
.h-fg-empty { pointer-events: none; }
.h-fg-cell:hover {
  z-index: 2;
  border-color: #5022e4;
  color: var(--h-ink);
  will-change: transform;
}

.h-fg-core {
  grid-column: 5 / 8;
  grid-row: 3 / 6;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--h-line);
  margin: 0 -1px -1px 0;
  background: rgba(255, 255, 255, .55);
}
/* The logo fills 80% of the tile's width and height, centred. */
.h-fg-core img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 80%;
  max-block-size: 80%;
  object-fit: contain;
  opacity: .5;
}

/* When the grid is wider than the screen, fade at the screen edges too. */
@media (max-width: 1179px) {
  /* A mask on the whole section made every moving square repaint the section; the same fade is
     two static strips of the page colour over the edges, which cost nothing while scrolling. */
  .h-fg-sec::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, var(--h-edge, #fff) 0, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, var(--h-edge, #fff) 100%);
  }
}
/* Phones: a 4-column grid sized so that every square is completely on screen with 20px to
   spare on each side - nothing is ever cut in half by the screen edge. The logo is 2x2 squares
   in the middle; the 20 most important squares flow around it in order (two rows above, one
   beside it on each side for its two rows, two rows below) and the rest are not shown. */
@media (max-width: 699px) {
  .h-fg-grid { --cols: 4; --s: min(96px, calc((100vw - 40px) / 4)); }
  .h-fg-cell { grid-column: auto; grid-row: auto; order: 1; opacity: 1; }
  .h-fg-empty, .h-fg-cell:not([data-imp]) { display: none; }
  .h-fg-cell[data-imp="1"] { order: 1; }   .h-fg-cell[data-imp="2"] { order: 2; }
  .h-fg-cell[data-imp="3"] { order: 3; }   .h-fg-cell[data-imp="4"] { order: 4; }
  .h-fg-cell[data-imp="5"] { order: 5; }   .h-fg-cell[data-imp="6"] { order: 6; }
  .h-fg-cell[data-imp="7"] { order: 7; }   .h-fg-cell[data-imp="8"] { order: 8; }
  .h-fg-cell[data-imp="9"] { order: 9; }   .h-fg-cell[data-imp="10"] { order: 10; }
  .h-fg-cell[data-imp="11"] { order: 11; } .h-fg-cell[data-imp="12"] { order: 12; }
  .h-fg-cell[data-imp="13"] { order: 13; } .h-fg-cell[data-imp="14"] { order: 14; }
  .h-fg-cell[data-imp="15"] { order: 15; } .h-fg-cell[data-imp="16"] { order: 16; }
  .h-fg-cell[data-imp="17"] { order: 17; } .h-fg-cell[data-imp="18"] { order: 18; }
  .h-fg-cell[data-imp="19"] { order: 19; } .h-fg-cell[data-imp="20"] { order: 20; }
  .h-fg-core { grid-column: 2 / 4; grid-row: 3 / 5; order: 0; }
  /* No edge fade: there is nothing cut off to fade. */
  .h-fg-sec::after { display: none; }
}

/* --------------------------------------------------------- reviews -- */

.h-rv-sec { overflow: clip; }
.h-rv { display: grid; gap: 16px; }
.h-rv-row {
  overflow: hidden;
  padding-block: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.h-rv-track {
  display: flex;
  inline-size: max-content;
  animation: h-rv-move 110s linear infinite;
}
.h-rv-right .h-rv-track { animation-direction: reverse; animation-duration: 125s; }
.h-rv-group { display: flex; gap: 16px; padding-inline-end: 16px; }
@keyframes h-rv-move { to { transform: translateX(-50%); } }

.h-rv-card {
  flex: none;
  inline-size: 330px;
  min-block-size: 190px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--h-line);
  border-radius: 24px;
  background: #fff;
  transition: filter .45s var(--h-smooth), opacity .45s var(--h-smooth), border-color .3s var(--h-smooth);
}
.h-rv-card header { display: flex; align-items: center; gap: 12px; }
.h-rv-av {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
  color: var(--h-forest);
  font-size: 14px;
  font-weight: 700;
}
.h-rv-who { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.3; }
.h-rv-who b { font-size: 15px; font-weight: 600; }
.h-rv-who span { color: var(--h-ink-50); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-rv-card p { margin: 0; color: var(--h-ink-70); font-size: 15px; line-height: 1.5; }

/* Pointing at a card slows both rows to a stop (see site.js) and softens and softens every other card. */
.h-rv:has(.h-rv-card:hover, .h-rv-card:focus-visible) .h-rv-card:not(:hover, :focus-visible) { filter: blur(5px); opacity: .55; }
.h-rv-card:hover, .h-rv-card:focus-visible { border-color: var(--h-ink); outline: none; }

@media (max-width: 600px) {
  .h-rv-card { inline-size: 280px; min-block-size: 200px; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-rv-row { overflow-x: auto; }
  .h-rv-track { animation: none; }
}

/* ------------------------------------------------------------ ticker -- */

.h-ticker {
  overflow: hidden;
  border-block: 1px solid var(--h-line);
  background: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.h-ticker-track {
  display: flex;
  inline-size: max-content;
  animation: h-marquee 55s linear infinite;
}
.h-ticker:hover .h-ticker-track { animation-play-state: paused; }
.h-ticker-track span {
  padding: 22px 28px;
  color: var(--h-ink-50);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.h-ticker-track span::after { content: "•"; margin-inline-start: 56px; color: var(--h-lime); }
@keyframes h-marquee { to { transform: translateX(-50%); } }

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

.h-sec { padding-block: clamp(72px, 10vw, 140px); }
.h-sec-tight { padding-block: clamp(40px, 6vw, 80px); }
.h-sec-dark { background: var(--h-ink); color: #fff; }
.h-sec-lime { background: var(--h-lime); color: var(--h-on-accent); }

.h-head { max-inline-size: 860px; margin-block-end: clamp(36px, 5vw, 72px); }
.h-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--h-lime-pale);
  color: var(--h-forest);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}
.h-sec-dark .h-kicker { background: rgba(185, 165, 255, .16); color: var(--h-lime-bright); }
.h-sec-lime .h-kicker, .h-kicker-lime { background: var(--h-forest); color: var(--h-lime-bright); }
.h-title { margin: 0; font-size: clamp(2.2rem, 1rem + 4.4vw, 4.6rem); letter-spacing: -.045em; line-height: .98; }
.h-lead { max-inline-size: 640px; margin: 22px 0 0; color: var(--h-ink-70); font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); }
.h-sec-dark .h-lead { color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------- bento -- */

.h-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.h-span-4 { grid-column: span 4; }
.h-span-2 { grid-column: span 2; }
.h-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-block-size: 340px;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border-radius: var(--h-radius);
  transition: transform .4s var(--h-ease);
}
.h-tile:hover { transform: translateY(-4px); }
.h-tile h3 { margin: 0 0 14px; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); letter-spacing: -.045em; }
.h-tile p { max-inline-size: 46ch; margin: 0; font-size: 16.5px; line-height: 1.5; }
.h-tile-dark { background: var(--h-forest); color: #fff; }
.h-tile-dark p { color: rgba(255, 255, 255, .78); }
.h-tile-lime { background: var(--h-lime); color: var(--h-on-accent); }
.h-tile-warm { background: var(--h-warm); color: var(--h-ink); }
.h-tile-warm p { color: var(--h-ink-70); }
.h-tile-green { background: var(--h-lime-pale); color: var(--h-forest); }

.h-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 22px; }
.h-chips b {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
  color: inherit;
  font-size: 13px;
  font-weight: 600;
}
.h-tile-dark .h-chips b { background: rgba(185, 165, 255, .18); color: var(--h-lime-bright); }

/* tile illustrations: pure CSS, decorative */
.h-art { display: flex; align-items: flex-end; gap: 10px; min-block-size: 96px; }
.h-art-bars { block-size: 120px; }
.h-art-bars i {
  flex: 1;
  block-size: var(--h);
  border-radius: 10px 10px 4px 4px;
  background: var(--h-lime);
  opacity: .9;
}
.h-art-bars i:nth-child(odd) { background: rgba(78, 38, 227, .45); }
.h-art-rows { flex-direction: column; align-items: stretch; gap: 8px; }
.h-art-rows i { block-size: 30px; border-radius: 10px; background: rgba(255, 255, 255, .6); position: relative; }
.h-art-rows i::after { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 14px; inline-size: 38%; border-radius: 6px; background: rgba(29, 15, 102, .22); }
.h-art-rows i:nth-child(2)::after { inline-size: 52%; }
.h-art-rows i:nth-child(3)::after { inline-size: 28%; }
.h-art-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.h-art-grid i { aspect-ratio: 1; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--h-line); }
.h-art-grid i:nth-child(2) { background: var(--h-lime); box-shadow: none; }
.h-art-pay { gap: 12px; flex-wrap: wrap; }
.h-art-pay span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-weight: 600;
  color: var(--h-ink-70);
}
.h-art-pay b { color: var(--h-forest); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.h-art-pay .is-net { background: var(--h-forest); color: rgba(255, 255, 255, .75); }
.h-art-pay .is-net b { color: var(--h-lime-bright); }

/* -------------------------------------------------------- dark steps -- */

.h-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.h-step {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--h-radius);
  background: rgba(255, 255, 255, .04);
  transition: background-color .3s, border-color .3s;
}
.h-step:hover { background: rgba(185, 165, 255, .08); border-color: rgba(185, 165, 255, .4); }
.h-step-n { display: block; margin-block-end: 36px; color: var(--h-lime-bright); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.h-step h3 { margin: 0 0 14px; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); }
.h-step p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 16px; }

/* ------------------------------------------------------------- stats -- */

.h-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.h-stat { padding: 8px 0; border-block-start: 3px solid var(--h-forest); padding-block-start: 20px; }
.h-stat b {
  display: block;
  font-size: clamp(3rem, 1.4rem + 5.4vw, 6.4rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.h-stat span { display: block; max-inline-size: 22ch; margin-block-start: 14px; font-size: 16px; font-weight: 500; opacity: .8; }

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

.h-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.h-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.h-card, .h-mini {
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--h-radius);
  background: var(--h-warm);
  transition: transform .35s var(--h-ease), background-color .3s;
}
.h-card:hover, .h-mini:hover { transform: translateY(-4px); background: var(--h-lime-pale); }
.h-card h3 { margin: 28px 0 12px; font-size: clamp(1.4rem, 1.1rem + .8vw, 1.8rem); }
.h-card p { margin: 0; color: var(--h-ink-70); font-size: 16px; }
.h-card code { padding: 2px 7px; border-radius: 7px; background: #fff; font-size: .9em; }
.h-mini { padding: 24px; border-radius: var(--h-radius-sm); }
.h-mini h3 { margin: 20px 0 8px; font-size: 1.2rem; letter-spacing: -.03em; }
.h-mini p { margin: 0; color: var(--h-ink-70); font-size: 14.5px; line-height: 1.5; }
.h-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 16px;
  background: var(--h-lime);
  color: var(--h-on-accent);
}
.h-ico svg { inline-size: 26px; block-size: 26px; }
.h-mini .h-ico { inline-size: 44px; block-size: 44px; border-radius: 14px; }
.h-mini .h-ico svg { inline-size: 22px; block-size: 22px; }

/* ---------------------------------------------------------- waitlist -- */

.h-waitlist {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(28px, 5vw, 72px);
  border-radius: 40px;
  background: var(--h-forest);
  color: #fff;
}
.h-waitlist .h-title { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4rem); }
.h-waitlist .h-lead { color: rgba(255, 255, 255, .75); }
.h-wl-form { display: flex; flex-direction: column; gap: 12px; }
.h-wl-form label { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.h-wl-form input[type="email"] {
  inline-size: 100%;
  min-block-size: 58px;
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #fff;
  color: var(--h-ink);
  font: 500 17px/1 "Inter", system-ui, sans-serif;
}
.h-wl-form input[type="email"]::placeholder { color: var(--h-ink-50); }
.h-wl-form input[type="email"]:focus-visible { outline: 3px solid var(--h-lime-bright); outline-offset: 3px; }
.h-wl-form .waitlist-status { min-block-size: 1.4em; margin: 0; color: var(--h-lime-bright); font-size: 14.5px; font-weight: 500; }

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

.h-cta {
  padding: clamp(48px, 8vw, 120px) clamp(24px, 5vw, 72px);
  border-radius: 40px;
  background: var(--h-lime);
  color: var(--h-on-accent);
  text-align: center;
}
.h-cta h2 { max-inline-size: 15ch; margin: 0 auto; font-size: clamp(2.6rem, 1rem + 6.4vw, 6.2rem); font-weight: 900; letter-spacing: -.055em; line-height: .94; }
.h-cta p { max-inline-size: 560px; margin: 26px auto 0; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight: 500; }

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

.h-footer { padding-block: clamp(56px, 8vw, 96px) 28px; background: var(--h-ink); color: rgba(255, 255, 255, .72); }
.h-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
.h-footer p { max-inline-size: 38ch; margin: 18px 0 0; font-size: 15px; }
.h-footer h4 { margin: 0 0 18px; color: #fff; font-size: 15px; letter-spacing: -.01em; }
.h-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.h-footer a { color: inherit; text-decoration: none; transition: color .2s; }
.h-footer a:hover { color: var(--h-lime-bright); }
.h-footer a:focus-visible { outline: 3px solid var(--h-lime-bright); outline-offset: 3px; border-radius: 6px; }
.h-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 24px; }
.h-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: #fff;
}
.h-socials a:hover { background: var(--h-lime); border-color: var(--h-lime); color: var(--h-on-accent); }
.h-socials svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.h-footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1000px) {
  .h-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-grid-3 { grid-template-columns: 1fr; }
  .h-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .h-waitlist { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .h-bento { grid-template-columns: 1fr; }
  .h-span-4, .h-span-2 { grid-column: auto; }
  .h-tile { min-block-size: 0; }
  .h-grid-2 { grid-template-columns: 1fr; }
  .h-footer-grid { grid-template-columns: 1fr 1fr; }
  .h-footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .h-grid-4 { grid-template-columns: 1fr; }
  .h-actions .h-btn { inline-size: 100%; }
  .h-waitlist, .h-cta { border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-ticker-track { animation: none; }
  html.js .h-hero-copy > * { animation: none; }
  .h-btn, .h-tile, .h-card, .h-mini, .h-btn::before { transition: none; }
  .h-btn:hover, .h-tile:hover, .h-card:hover, .h-mini:hover { transform: none; }
}

/* final polish */
.h-grid-4 > .h-mini:last-child:nth-child(4n + 3) { grid-column: span 2; }
.h-stat b { font-size: clamp(2.8rem, 1.2rem + 4.2vw, 5.4rem); }
.h-hero-title { font-size: clamp(2.7rem, 1rem + 7vw, 6.6rem); }
@media (max-width: 1000px) { .h-grid-4 > .h-mini:last-child:nth-child(4n + 3) { grid-column: auto; } }

/* Hero headline: two lines with a rotating word in a green pill. Words share
   one grid cell; site.js sizes the track to the visible word so the pill
   glides between widths. Without script the first word simply shows. */
.h-hero-copy { inline-size: min(100%, 1240px); }
.h-hero-title { font-size: clamp(2.1rem, .8rem + 4.8vw, 4.9rem); font-weight: 700; letter-spacing: -.045em; line-height: calc(1.08em + 6px); text-wrap: balance; }
.h-flip {
  --pill-bg: #4e26e3;
  --pill-ink: #ffffff;
  display: inline-block;
  padding: calc(.02em + 3px) .2em calc(.08em + 3px); /* +6px taller */
  border-radius: .3em;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-weight: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
  transition: background-color .7s var(--h-ease), color .7s var(--h-ease);
}
/* One solid colour pair per word; site.js sets data-tone as the words change. */
.h-flip[data-tone="1"] { --pill-bg: #ffc091; --pill-ink: #3a1a00; }
.h-flip[data-tone="2"] { --pill-bg: #1d0f66; --pill-ink: #b9a5ff; }
.h-flip[data-tone="3"] { --pill-bg: #ffd7ef; --pill-ink: #4a0b30; }
.h-flip-track {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  padding-block: .06em .12em;
  margin-block: -.06em -.12em;
  transition: inline-size .7s var(--h-ease);
}
.h-flip-track b {
  grid-area: 1 / 1;
  justify-self: start;
  font-weight: inherit;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(70%);
  transition: opacity .5s var(--h-ease), transform .7s var(--h-ease);
}
.h-flip-track b.is-on { opacity: 1; transform: none; }
.h-flip-track b.is-out { opacity: 0; transform: translateY(-70%); }
@media (prefers-reduced-motion: reduce) {
  .h-flip-track, .h-flip-track b { transition: none; }
}

/* Fixed line breaks so the headline never reflows while the pill changes
   width: two lines on desktop, three on phones (the break sits before
   "without"). */
.h-hero-title { font-size: clamp(2rem, .7rem + 5.6vw, 5.4rem); white-space: nowrap; }
.h-hero-copy { inline-size: min(100%, 1480px); padding-inline: 12px; }
.h-br-m { display: none; }
@media (max-width: 700px) {
  .h-br-m { display: inline; }
}
@media (max-width: 360px) { .h-hero-title { font-size: 1.75rem; } }

/* A solid dot sits left of every pill word and slides in and out with it. */
.h-flip-track b {
  display: inline-flex;
  align-items: center;
  gap: .22em;
}
.h-flip-track b::before {
  content: "";
  flex: none;
  inline-size: .3em;
  block-size: .3em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(.02em);
}
.h-hero-title { font-size: clamp(1.75rem, .5rem + 4.9vw, 4.8rem); }
@media (max-width: 360px) { .h-hero-title { font-size: 1.55rem; } }

/* Negative letter-spacing makes a word's last glyph overhang its measured
   box, and the track clips overflow. Give the track room on the right (and
   a sliver on the left) so the final letter is never cut; the pill's own
   padding is trimmed by the same amount so its size is unchanged. */
.h-flip { padding-inline: .2em .1em; }
.h-flip-track { padding-inline: .02em .1em; margin-inline: -.02em 0; }

/* Keep the headline inside the page's side whitespace: the copy block is the
   same width as the content, and the type size is capped so the longest line
   (about 17.6em wide on desktop, 10.8em on phones where it wraps before
   "without") always fits that width. */
.h-hero-copy {
  inline-size: min(100%, var(--h-wrap));
  padding-inline: var(--h-pad);
  container-type: inline-size;
}
.h-hero-title { font-size: min(clamp(1.75rem, .5rem + 4.6vw, 4.8rem), calc(100cqw / 17.6)); }
@media (max-width: 700px) {
  .h-hero-title { font-size: min(clamp(1.55rem, .5rem + 4.6vw, 4.8rem), calc(100cqw / 10.8)); }
}

/* demo card */
.h-demo {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px 56px; border-radius: 16px; background: #f3f1f6;
}
.h-demo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q-42 100 95 200L163 200Q26 100 52 0Z' fill='white' fill-opacity='0.10' stroke='white' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M52 0Q26 100 163 200L231 200Q96 100 104 0Z' fill='white' fill-opacity='0.15' stroke='white' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M104 0Q96 100 231 200L299 200Q164 100 156 0Z' fill='white' fill-opacity='0.20' stroke='white' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M156 0Q164 100 299 200L367 200Q234 100 208 0Z' fill='white' fill-opacity='0.25' stroke='white' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M208 0Q234 100 367 200L435 200Q302 100 260 0Z' fill='white' fill-opacity='0.30' stroke='white' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M260 0Q302 100 435 200L503 200Q372 100 312 0Z' fill='white' fill-opacity='0.35' stroke='white' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M312 0Q372 100 503 200L571 200Q440 100 364 0Z' fill='white' fill-opacity='0.40' stroke='white' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M364 0Q440 100 571 200L639 200Q510 100 416 0Z' fill='white' fill-opacity='0.45' stroke='white' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M416 0Q510 100 639 200L707 200Q578 100 468 0Z' fill='white' fill-opacity='0.50' stroke='white' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M468 0Q578 100 707 200L775 200Q648 100 520 0Z' fill='white' fill-opacity='0.55' stroke='white' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") right / 62% 100% no-repeat,
    radial-gradient(60% 140% at 100% 100%, rgba(124,58,237,.75) 0%, rgba(167,139,250,.4) 45%, transparent 75%);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 85%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 85%);
  animation: h-demo-drift 9s ease-in-out infinite alternate;
}
@keyframes h-demo-drift { from { transform: translateX(0) scale(1); } to { transform: translateX(-14px) scale(1.04); } }
.h-demo h3 { margin: 0; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 600; letter-spacing: -.02em; color: #0f1419; }
.h-demo p { margin: 6px 0 0; font-size: .95rem; color: #5f5a6b; max-inline-size: 46ch; }
.h-demo p a { color: #0f1419; text-decoration: underline; text-underline-offset: 2px; }
.h-demo p a:focus-visible { outline: 2px solid #4e26e3; outline-offset: 2px; border-radius: 4px; }
.h-demo-btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px; background: #17141f; color: #fff;
  font-size: .92rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 18px -6px rgba(23,20,31,.6);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.h-demo-btn::after { content: "→"; transition: transform .2s; }
.h-demo-btn:hover { background: #4e26e3; transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(78,38,227,.7); }
.h-demo-btn:hover::after { transform: translateX(3px); }
.h-demo-btn:focus-visible { outline: 2px solid #4e26e3; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .h-demo::before { animation: none; } .h-demo-btn { transition: none; } }
@media (max-width: 640px) {
  .h-demo { flex-direction: column; align-items: flex-start; padding: 24px; }
}

/* Pill, final: symmetric padding and no sideways clipping. The track only
   needs to hide words sliding in and out vertically, so it clips with a
   clip-path that is generous on the left and right instead of overflow:hidden
   (which cut the last glyph). The right padding is .045em wider than the left
   to cancel the headline's negative letter-spacing, so the visible gap on both
   sides of the text matches. */
.h-flip { padding-inline: .24em .285em; }
.h-flip-track {
  overflow: visible;
  clip-path: inset(0 -1em);
  padding-inline: 0;
  margin-inline: 0;
}

/* Navbar logo: wordmark 25px, icon 46.1px (43.9px + 5%). Footer logo unchanged. */
.h-nav .h-brand { font-size: 25px; gap: 13px; }
.h-nav .h-brand img { inline-size: 46.1px; block-size: 46.1px; }
/* Narrow phones: keep the logo from pushing the buttons out of the pill. */
@media (max-width: 420px) {
  .h-nav .h-brand { font-size: 25px; gap: 10px; }
  .h-nav .h-brand img { inline-size: 38.1px; block-size: 38.1px; }
}

/* coming soon: small lime card; once it scrolls into view it grows on its own, then the content blurs in */
.h-soon-sec { padding-inline: 0; }
.h-soon-stage { display: grid; place-items: center; padding-block: clamp(40px, 6vw, 80px); }
.h-soon {
  --grow: 0.9s;
  inline-size: 100%;
  padding: clamp(36px, 4.5vw, 64px) var(--h-pad) clamp(36px, 4.5vw, 64px);
  border-radius: 0;
  background: #000;
  color: #fff;
  text-align: center;
  position: relative; overflow: hidden; isolation: isolate;
}
.h-soon .h-kicker { background: rgba(185, 165, 255, .16); color: var(--h-lime-bright); }
.h-soon h2 { margin: 0 auto; font-size: clamp(2.4rem, 1rem + 5vw, 5.2rem); font-weight: 900; letter-spacing: -.05em; line-height: .96; }
.h-soon-tag { margin: 14px auto 0; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); font-weight: 500; }
.h-soon-more { display: grid; grid-template-rows: 1fr; }
.h-soon-more > div { min-block-size: 0; overflow: hidden; }
.h-soon-list {
  --cols: 3; --gap: 16px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
  inline-size: min(100%, calc(var(--h-wrap) - 2 * var(--h-pad))); margin: clamp(24px, 3vw, 40px) auto 0; padding: 0; list-style: none; text-align: left;
}
.h-soon-item {
  transition: opacity .9s var(--h-smooth), filter .9s var(--h-smooth), transform .9s var(--h-smooth);
  transition-delay: calc(var(--grow) + var(--i, 0) * 90ms);
}
.h-soon-item { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.h-soon-item img { display: block; inline-size: 100%; block-size: auto; border-radius: 16px; }

/* The card is always its full, open size (it never grows or shrinks). Before it opens, the
   screenshots wait invisible, and a white cover with a hole shaped like the old small card hides
   everything around that hole - the sides and the part below. Opening fades the cover away. */
html.js .h-soon:not(.is-open) .h-soon-item { opacity: 0; filter: blur(14px); transform: translateY(10px); transition-delay: 0s; }

/* Blurry multicolor light along the bottom, with black grain */
.h-soon > * { position: relative; z-index: 1; }
.h-soon::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -12%;
  background:
    /* bottom */
    radial-gradient(36% 28.8% at 12% 96%, #3347e0 0%, transparent 70%),
    radial-gradient(36% 31.2% at 36% 100%, #6d28d9 0%, transparent 70%),
    radial-gradient(36% 31.2% at 62% 98%, #d02bb8 0%, transparent 70%),
    radial-gradient(36% 28.8% at 88% 95%, #f2603b 0%, transparent 70%),
    /* top */
    radial-gradient(38.4% 28.8% at 14% 4%, rgba(51, 71, 224, .85) 0%, transparent 70%),
    radial-gradient(38.4% 31.2% at 38% 0%, rgba(109, 40, 217, .85) 0%, transparent 70%),
    radial-gradient(38.4% 31.2% at 64% 2%, rgba(208, 43, 184, .8) 0%, transparent 70%),
    radial-gradient(38.4% 28.8% at 88% 5%, rgba(242, 96, 59, .75) 0%, transparent 70%),
    /* sides, middle */
    radial-gradient(28.8% 43.2% at 0% 38%, rgba(51, 71, 224, .9) 0%, transparent 70%),
    radial-gradient(28.8% 43.2% at 2% 64%, rgba(208, 43, 184, .85) 0%, transparent 70%),
    radial-gradient(28.8% 43.2% at 100% 36%, rgba(242, 96, 59, .85) 0%, transparent 70%),
    radial-gradient(28.8% 43.2% at 98% 62%, rgba(208, 43, 184, .85) 0%, transparent 70%);
  filter: blur(46px); opacity: .95;
  animation: h-soon-glow 16s ease-in-out infinite alternate;
}
.h-soon::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -7 0 0 0 3.4'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
  opacity: .95;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, #000 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, #000 100%);
}
@keyframes h-soon-glow { from { transform: scale(1) translateX(-2%); } to { transform: scale(1.06) translateX(2%); } }

/* Rows of faint symbols that keep changing (desktop only; see site.js). They are masked with the
   same spots as the glow, so they show wherever there is color and nowhere on the black. */
.h-soon > .h-soon-glyphs {
  position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(44.4% 36% at 2.9% 107%, #000 0%, transparent 70%),
    radial-gradient(44.4% 38.4% at 32.6% 112%, #000 0%, transparent 70%),
    radial-gradient(44.4% 38.4% at 64.9% 109.5%, #000 0%, transparent 70%),
    radial-gradient(44.4% 36% at 97.1% 105.8%, #000 0%, transparent 70%),
    radial-gradient(48% 36% at 5.4% -7%, #000 0%, transparent 70%),
    radial-gradient(48% 38.4% at 35.1% -12%, #000 0%, transparent 70%),
    radial-gradient(48% 38.4% at 67.4% -9.5%, #000 0%, transparent 70%),
    radial-gradient(48% 36% at 97.1% -5.8%, #000 0%, transparent 70%),
    radial-gradient(36% 54% at -12% 35%, #000 0%, transparent 70%),
    radial-gradient(36% 54% at -9.5% 67%, #000 0%, transparent 70%),
    radial-gradient(36% 54% at 112% 32.6%, #000 0%, transparent 70%),
    radial-gradient(36% 54% at 109.5% 65%, #000 0%, transparent 70%);
  mask-image: radial-gradient(44.4% 36% at 2.9% 107%, #000 0%, transparent 70%),
    radial-gradient(44.4% 38.4% at 32.6% 112%, #000 0%, transparent 70%),
    radial-gradient(44.4% 38.4% at 64.9% 109.5%, #000 0%, transparent 70%),
    radial-gradient(44.4% 36% at 97.1% 105.8%, #000 0%, transparent 70%),
    radial-gradient(48% 36% at 5.4% -7%, #000 0%, transparent 70%),
    radial-gradient(48% 38.4% at 35.1% -12%, #000 0%, transparent 70%),
    radial-gradient(48% 38.4% at 67.4% -9.5%, #000 0%, transparent 70%),
    radial-gradient(48% 36% at 97.1% -5.8%, #000 0%, transparent 70%),
    radial-gradient(36% 54% at -12% 35%, #000 0%, transparent 70%),
    radial-gradient(36% 54% at -9.5% 67%, #000 0%, transparent 70%),
    radial-gradient(36% 54% at 112% 32.6%, #000 0%, transparent 70%),
    radial-gradient(36% 54% at 109.5% 65%, #000 0%, transparent 70%);
}
.h-soon-glyphs span {
  display: block; block-size: 34px; overflow: hidden; white-space: nowrap; text-align: center;
  font: 500 13px/34px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .35em;
  color: #fff; opacity: .3; user-select: none;
}

/* Waitlist field */
.h-soon-form {
  display: flex; align-items: center; gap: 6px;
  inline-size: min(100%, 460px); margin: 28px auto 0; padding: 6px;
  background: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px;
}
.h-soon-form input {
  flex: 1; min-inline-size: 0; padding: 12px 14px; border: 0; background: transparent;
  color: #0e0f0c; font: 500 16px/1.2 "Inter", system-ui, sans-serif;
}
.h-soon-form input::placeholder { color: #6b6b6b; }
.h-soon-form input:focus-visible { outline: none; }
.h-soon-form:focus-within { box-shadow: 0 0 0 3px rgba(167, 139, 250, .6); }
.h-soon-form button {
  flex: none; padding: 12px 20px; border: 0; border-radius: 9px; background: #7c3aed; color: #fff;
  font: 700 15px/1.2 "Inter", system-ui, sans-serif; cursor: pointer; transition: background .2s;
}
.h-soon-form button:hover { background: #6d28d9; }
.h-soon-form button:disabled { opacity: .7; cursor: default; }
/* What joining means, said once, right under the field. */
.h-soon-note { max-inline-size: 460px; margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .75); }
.h-soon-note a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.h-soon-note a:focus-visible { outline: 2px solid var(--h-lime-bright); outline-offset: 2px; border-radius: 4px; }
.h-soon-status { min-block-size: 1.4em; margin: 10px 0 0; font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, .75); }
.h-soon-status.is-ok { color: var(--h-lime-bright); }
.h-soon-status.is-bad { color: #fca5a5; }
.h-soon-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 480px) { .h-soon-form { flex-direction: column; align-items: stretch; } .h-soon-form button { inline-size: 100%; } }
@media (prefers-reduced-motion: reduce) { .h-soon::before { animation: none; } }

@media (max-width: 900px) { .h-soon-list { --cols: 2; } }
@media (max-width: 600px) {
  .h-soon-list { --cols: 1; }
}
@media (prefers-reduced-motion: reduce) { .h-soon, .h-soon h2, .h-soon-more, .h-soon-item { transition: none !important; } }

/* money and tax cards */
.h-mor { padding: clamp(20px, 2.2vw, 28px); border-radius: var(--h-radius); background: var(--h-warm); }
.h-mor-art { overflow: hidden; border-radius: var(--h-radius-sm); }
.h-mor-art img { display: block; inline-size: 100%; block-size: auto; margin-block: -9% -7%; }
.h-mor h3 { margin: 20px 0 8px; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.h-mor p { margin: 0; color: var(--h-ink-70); font-size: 16px; }

/* purple theme: borders/lines that sat on the old lime band */
.h-sec-lime .h-stat { border-block-start-color: rgba(255, 255, 255, .7); }

/* pricing.html: same navbar as the homepage. The bar is fixed, so the page
   starts below it; the plan cards are not touched. */
body.pricing-nav .h-nav,
body.pricing-nav .h-nav * { font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; }
body.pricing-nav .h-nav { line-height: 1.55; font-feature-settings: "cv11", "ss03"; }
body.pricing-nav .pricing-main { padding-block-start: var(--h-nav-h); }
body.pricing-nav .scroll-progress { block-size: 3px; background: transparent; }
body.pricing-nav .scroll-progress span { background: var(--h-forest); }

/* two feature cards with a notched bottom-right corner; hovering fills the notch in */
.h-feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.h-feat {
  --notch-h: 80px;
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  min-block-size: 560px; padding: 16px; border-radius: 24px; background: #efede8; color: var(--h-ink); text-decoration: none;
}
/* The notch: a page-coloured, slanted block in the bottom-right corner. On hover the whole
   notch shrinks into the corner, so the card colour fills in around it. */
.h-feat-notch {
  position: absolute; z-index: 1; pointer-events: none;
  inset-inline-end: 0; inset-block-end: 0; inline-size: 140px; block-size: var(--notch-h);
  transform-origin: 100% 100%;
  transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
.h-feat-notch::after { /* the slanted, rounded block (bleeds off the card's right and bottom edges) */
  content: ""; position: absolute; inset-inline-start: 60px; inset-block-start: 0; inline-size: 180px; block-size: calc(var(--notch-h) + 30px);
  background: #fff; border-top-left-radius: 20px; transform-origin: 0 0; transform: skewX(-26.6deg);
}
.h-feat-notch::before { /* rounds the card's own corner just above the notch */
  content: ""; position: absolute; inset-inline-end: 0; inset-block-start: -18px; inline-size: 18px; block-size: 18px;
  background: radial-gradient(circle at 0 0, transparent 17.5px, #fff 18px);
}
.h-feat:hover .h-feat-notch, .h-feat:focus-visible .h-feat-notch { transform: scale(0); }
.h-feat:focus-visible { outline: 3px solid var(--h-lime); outline-offset: 4px; }
.h-feat-shot { overflow: hidden; border-radius: 12px; aspect-ratio: 1200 / 900; background: #fff; }
.h-feat-shot img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.h-feat-tag { margin: 22px 0 0; font: 400 13px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .02em; text-transform: uppercase; }
body.home .h-feat h3 { margin: 24px 0 0; max-inline-size: 24ch; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); font-weight: 400 !important; letter-spacing: -.015em !important; line-height: 1.25 !important; }
.h-feat-more { position: relative; z-index: 2; margin-block-start: auto; padding-block-start: 48px; padding-inline-start: 2px; font-size: 16px; }
.h-feat-go {
  position: absolute; z-index: 2; inset-inline-end: 22px; inset-block-end: 22px; display: grid; place-items: center;
  inline-size: 28px; block-size: 28px; transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
.h-feat-go svg { inline-size: 24px; block-size: 24px; }
.h-feat:hover .h-feat-go { transform: translateX(3px); }
@media (max-width: 800px) { .h-feat-grid { grid-template-columns: 1fr; } .h-feat { min-block-size: 0; } }
@media (prefers-reduced-motion: reduce) { .h-feat-notch, .h-feat-go { transition: none; } }

/* Hero scroll: as you scroll, the headline block travels up and away while the
   dashboard stays where it is. site.js measures --stage-top (where the dashboard
   sits at scroll 0) and --hero-runway (how far the page scrolls before the
   dashboard is released and scrolls normally). Reserved for whatever is built
   next in that space. */
.h-hero > .shell { position: sticky; top: var(--stage-top, 0px); }
/* The runway: an empty element after the dashboard that the sticky dashboard travels through
   (a real element, because .h-hero::after is the grid background). */
.h-hero-runway { display: block; block-size: var(--hero-runway, 0px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .h-hero > .shell { position: static; }
  .h-hero-runway { display: none; }
}

/* Taller headline block (site.js sets min-height): keep the copy centred in it. */
.h-hero-copy { justify-content: center; }

/* Hero (desktop only): the dashboard sits on a MacBook screen. The laptop image is
   drawn behind the mock-up; the mock-up itself is untouched. The image's screen
   starts 1.2% in and the notch ends ~5% down, so the mock is 88% as wide as the
   laptop and starts ~8.5% down.

   The stage used to clip everything with overflow:clip, which would crop the
   laptop bezel at high zoom levels. Now the stage uses overflow:visible and the
   gradient background is rendered by a clipped ::after pseudo so the rounded
   bottom corners still work, while the laptop image above is never cropped. */
@media (min-width: 1101px) {
  .h-stage {
    overflow: visible;
    background: none;
    padding-block-start: min(calc(5.4% + 20px), 120px);
    /* Crop the laptop at the card's rounded bottom edge, but let it stick out the top. */
    clip-path: inset(-100vh 0 0 0 round 0 0 clamp(20px, 3.5vw, 55px) clamp(20px, 3.5vw, 55px));
  }
  /* Gradient background pseudo: fills the stage area, clips at the rounded
     bottom corners so the card shape is preserved. */
  .h-stage::after {
    content: ""; position: absolute; inset: 0; z-index: -2;
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
    overflow: hidden;
    background:
      radial-gradient(55% 60% at 22% 100%, rgba(124, 92, 255, .42), transparent 70%),
      radial-gradient(55% 60% at 80% 100%, rgba(59, 130, 246, .38), transparent 70%),
      linear-gradient(180deg, rgba(110, 90, 255, 0) 0%, rgba(110, 90, 255, .14) 45%, rgba(70, 120, 255, .3) 100%);
    pointer-events: none;
  }
  .h-stage-scroll {
    position: relative; isolation: isolate;
    inline-size: min(100% - 2 * var(--shell-pad), var(--shell) - 2 * var(--shell-pad), calc((100vw - 60px) * .879));
  }
  .h-stage-scroll::before {
    content: ""; position: absolute; z-index: -1; top: 0; inset-inline: -6.89%; aspect-ratio: 1372 / 862;
    background: url("laptop.png") center / 100% 100% no-repeat; transform: translateY(-8.47%); pointer-events: none;
  }  /* The dashboard's height follows its width so its bottom edge always meets the bottom of the
     laptop picture: the picture is 1.1378 x the screen wide, 862/1372 as tall, and the screen
     starts 8.47% of that down, which leaves 0.6544 x the screen width for the dashboard. */
  .h-stage .mock { height: auto; min-height: 0; aspect-ratio: 1 / 0.6544; }
}

/* Smooth-scroll is paused while the hero holds the page, but the scrollbar stays
   visible (redesign.css would hide it with overflow:hidden). */
html:has(body.home).lenis.lenis-stopped { overflow: auto; }

/* Hero: a small grey grid behind the headline, fading out toward the edges and the bottom. */
.h-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14, 15, 12, .12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 15, 12, .12) 1px, transparent 1px);
  background-size: 56px 56px;
  background-attachment: fixed; /* the grid stays put while the page scrolls over it */
  /* fades to white on both sides and at the top (and at the bottom) */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 24%, #000 76%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 26%, #000 50%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 24%, #000 76%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 26%, #000 50%, transparent 100%);
  mask-composite: intersect;
}

/* The features section follows the hero card with a modest gap (the default section padding was far larger). */
.h-fg-sec { padding-block-start: clamp(40px, 4.5vw, 64px); }

/* ---------------------------------------------------------- markets strip -- */
/* Title and text on the left; on the right, a big wheel of flag squares whose
   centre sits on the right edge of the page, so only its left half shows.
   site.js builds the rings from the flags in .h-flags-row and sets --spin as
   you scroll; every other ring turns the other way. */
.h-flags-sec {
  --R: clamp(260px, 34vw, 540px); /* wheel radius */
  --d: clamp(46px, 4.6vw, 76px);  /* flag square size */
  --spin: 0deg;
  position: relative;
  padding-block: clamp(36px, 5vw, 72px);
  overflow: clip;
}
/* A faint grid behind the title, fading out in every direction. */
.h-flags-sec { isolation: isolate; }
.h-flags-sec::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block: 0; inset-inline-start: 0; inline-size: min(100%, 1100px);
  background-image:
    linear-gradient(to right, rgba(14, 15, 12, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 15, 12, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
  -webkit-mask-image: radial-gradient(closest-side at 32% 50%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 100%);
  mask-image: radial-gradient(closest-side at 32% 50%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 100%);
}
.h-flags-layout { display: flex; align-items: center; min-block-size: calc(2 * var(--R)); }
.h-flags-copy { max-inline-size: min(520px, 46%); margin-block-end: 0; }
.h-flags-copy .h-lead { margin-block-start: 20px; }
.h-flags {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  inline-size: var(--R);
  pointer-events: none;
}
.h-flags-wheel {
  position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  inline-size: calc(2 * var(--R)); block-size: calc(2 * var(--R));
  translate: 0 -50%;
  /* fades to white at the top and the bottom */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
}
/* A white band along the right edge of the page: the flags fade into it, the globe stays on top. */
.h-flags-wheel::after {
  content: ""; position: absolute; z-index: 1; inset-block: 0;
  inset-inline-start: calc(50% - var(--d) * 2.4); inline-size: calc(var(--d) * 2.4);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 85%);
}
.h-flags-head { z-index: 2; }
.h-flags-head {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: calc(var(--d) * 1.6); block-size: calc(var(--d) * 1.6);
  translate: -50% -50%;
  display: grid; place-items: center;
  border-radius: 28%; background: var(--h-forest); color: var(--h-lime-bright);
  box-shadow: 0 4px 16px rgba(14, 15, 12, .14);
}
.h-flags-head svg { inline-size: 46%; block-size: 46%; }
.h-flags-row { display: none; } /* the source list; site.js copies it into rings */
.h-flags-ring {
  position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
  rotate: calc(var(--spin) * var(--dir, 1));
  will-change: rotate;
}
.h-flags-ring li {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: var(--d); block-size: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 26%; overflow: hidden;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(90deg);
  box-shadow: 0 4px 16px rgba(14, 15, 12, .08), 0 0 0 1px rgba(14, 15, 12, .08);
}
.h-flags-ring img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Tablets and phones: text on top, and underneath it the wheel sits on the
   bottom edge of the section, so only its top half shows. The fades turn with
   it: the sides fade out and the white band runs along the bottom. */
@media (max-width: 1024px) {
  .h-flags-sec { --R: min(46vw, 400px); --d: clamp(38px, 6vw, 60px); padding-block-end: 0; }
  .h-flags-sec::before { inline-size: 100%; }
  .h-flags-layout { display: block; min-block-size: 0; }
  .h-flags-copy { max-inline-size: 620px; }
  .h-flags { position: relative; inset: auto; inline-size: 100%; block-size: min(var(--R), var(--d) * 5.4); margin-block-start: 24px; overflow: clip; }
  .h-flags-wheel {
    inset-block: auto calc(-1 * var(--R)); inset-inline-start: 50%; translate: -50% 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 74%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 74%, transparent 100%);
  }
  .h-flags-wheel::after {
    inset-inline: 0; inline-size: auto;
    inset-block-start: calc(50% - var(--d) * 2); block-size: calc(var(--d) * 2);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
  }
}
@media (max-width: 600px) {
  .h-flags-sec { --R: min(62vw, 300px); --d: clamp(34px, 9vw, 46px); }
}

/* ---------------------------------------------------- left-aligned titles -- */
/* Every title (and the text and buttons that go with it) starts at the left edge
   of the page's content area, the same line as the logo in the navbar. */
.h-hero-copy {
  inline-size: min(100%, var(--h-wrap));
  padding-inline: var(--h-pad);
  align-items: flex-start;
  text-align: left;
}
.h-hero-copy .h-actions { justify-content: flex-start; }
.h-head-center { margin-inline: 0; text-align: left; }
.h-head-center .h-lead { margin-inline: 0; }
.h-cta { text-align: left; }
.h-cta h2 { margin-inline: 0; max-inline-size: 18ch; }
.h-cta p { margin-inline: 0; }
.h-cta .h-actions { justify-content: flex-start; }
.h-soon { text-align: left; }
.h-soon h2, .h-soon-tag { margin-inline: 0; }
/* The coming-soon card spans the whole screen once open; its text still starts on the content's left edge. */
.h-soon { padding-inline: max(var(--h-pad), calc((100% - var(--h-wrap)) / 2 + var(--h-pad))); }
.h-soon-form { margin-inline: 0 auto; }

/* Auto-demo cursor inside the dashboard preview (site.js). */
.h-cursor {
  position: absolute; inset: 0 auto auto 0; z-index: 30; pointer-events: none;
  inline-size: 26px; block-size: 26px; opacity: 0;
  transform: translate(var(--cx, 70%), var(--cy, 20%));
  transition: transform .95s cubic-bezier(.45, .05, .2, 1), opacity .4s ease;
  filter: drop-shadow(0 4px 8px rgba(14, 15, 12, .28));
}
.h-cursor.is-on { opacity: 1; }
.h-cursor svg { display: block; }
.h-cursor i {
  position: absolute; inset: 2px auto auto 3px; inline-size: 30px; block-size: 30px; margin: -12px 0 0 -12px;
  border-radius: 50%; background: rgba(78, 38, 227, .35); transform: scale(0); opacity: 0;
}
.h-cursor.is-click i { animation: h-cursor-ripple .55s ease-out; }
@keyframes h-cursor-ripple { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .h-cursor { display: none; } }
@media (max-width: 900px) { .h-cursor { display: none; } }

/* ---------------------------------------------- dashboard preview extras -- */

/* Caption shown by the auto-demo. While it is up, the lower part of the dashboard melts
   into a blur that gets stronger toward the bottom (so it is obvious a message is being
   shown), and the text itself is purple. */
.h-demo-note {
  position: absolute; inset: auto 0 0 0; z-index: 25; pointer-events: none;
  block-size: 52%;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 24px clamp(26px, 6%, 60px);
  opacity: 0; transition: opacity .55s var(--h-ease);
}
.h-demo-note::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  background: linear-gradient(to bottom, rgba(246, 247, 249, 0) 0%, rgba(246, 247, 249, .55) 55%, rgba(238, 234, 253, .85) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .35) 28%, #000 78%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .35) 28%, #000 78%);
}
.h-demo-note.is-on { opacity: 1; }
.h-demo-note p {
  margin: 0; max-inline-size: 30ch; text-wrap: balance; text-align: center; color: #4e26e3;
  font: 800 clamp(1.5rem, 1rem + 2.1vw, 2.6rem)/1.04 "Inter", system-ui, sans-serif; letter-spacing: -.045em;
  opacity: 0; filter: blur(12px); transform: translateY(14px);
  transition: opacity .55s var(--h-ease) .1s, filter .6s var(--h-ease) .1s, transform .6s var(--h-ease) .1s;
}
.h-demo-note.is-on p { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce), (max-width: 900px) { .h-demo-note { display: none; } }

/* Switching pages inside the preview: the new page eases in (and its blocks follow one
   after another). `backwards` so nothing is left applied once it has finished. */
body.home #dashboard-preview .mock-page.is-on { animation: h-pg-in .6s var(--h-ease) backwards; }
body.home #dashboard-preview .mock-page.is-on > * { animation: h-pg-item .6s var(--h-ease) backwards; }
body.home #dashboard-preview .mock-page.is-on > :nth-child(2) { animation-delay: .06s; }
body.home #dashboard-preview .mock-page.is-on > :nth-child(3) { animation-delay: .12s; }
body.home #dashboard-preview .mock-page.is-on > :nth-child(4) { animation-delay: .18s; }
body.home #dashboard-preview .mock-page.is-on > :nth-child(n + 5) { animation-delay: .24s; }
@keyframes h-pg-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes h-pg-item { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.home #dashboard-preview .mock-page.is-on, body.home #dashboard-preview .mock-page.is-on > * { animation: none; }
}

/* Sidebar buttons: the same wave hover as the navbar's Log in / Get started buttons
   (the wave grows from where the pointer came in; site.js sets --bx / --by). */
body.home #dashboard-preview .mock-nav button,
body.home #dashboard-preview .mock-settings {
  --fill: rgba(78, 38, 227, .13); --fill-ink: #4e26e3;
  position: relative; isolation: isolate; overflow: hidden;
  transition: color .45s var(--h-ease);
}
body.home #dashboard-preview .mock-nav button.on,
body.home #dashboard-preview .mock-settings.on { --fill: #1d0f66; --fill-ink: #b9a5ff; }
body.home #dashboard-preview .mock-nav button::before,
body.home #dashboard-preview .mock-settings::before {
  content: ""; position: absolute; z-index: -1;
  inset-inline-start: var(--bx, 50%); inset-block-start: var(--by, 50%);
  inline-size: max(260%, 320px); aspect-ratio: 1; border-radius: 50%;
  background: var(--fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .7s var(--h-ease);
  pointer-events: none;
}
body.home #dashboard-preview .mock-nav button:hover::before,
body.home #dashboard-preview .mock-settings:hover::before { transform: translate(-50%, -50%) scale(1); }
body.home #dashboard-preview .mock-nav button:hover,
body.home #dashboard-preview .mock-settings:hover { color: var(--fill-ink); background: transparent; }
body.home #dashboard-preview .mock-nav button.on:hover,
body.home #dashboard-preview .mock-settings.on:hover { background: var(--primary); color: var(--fill-ink); }
body.home #dashboard-preview .mock-nav button:hover svg,
body.home #dashboard-preview .mock-settings:hover svg { color: var(--fill-ink); }
@media (prefers-reduced-motion: reduce) {
  body.home #dashboard-preview .mock-nav button::before, body.home #dashboard-preview .mock-settings::before { transition: none; }
}

/* ------------------------------------------------------------ cards on scroll -- */
/* site.js adds .h-cardfx to every card and .is-in when it first scrolls into view.
   The keyframes only give the starting look; the card ends on whatever its own
   styles say (so per-card opacity and hover effects are untouched). */
html.js .h-cardfx:not(.is-in) { opacity: 0; transform: translateY(34px) scale(.96); filter: blur(10px); }
html.js .h-cardfx.is-in { animation: h-card-in .85s var(--h-ease) var(--cd, 0ms) backwards; }
html.js .h-cardfx.is-in.is-instant { animation: none; }
@keyframes h-card-in {
  from { opacity: 0; transform: translateY(34px) scale(.96); filter: blur(10px); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .h-cardfx:not(.is-in) { opacity: 1; transform: none; filter: none; }
  html.js .h-cardfx.is-in { animation: none; }
}

/* ------------------------------------------------- pricing.html page body -- */
/* Same type, colours and soft rounded cards as the homepage. Content untouched. */
body.pricing-nav {
  background: #fff;
  color: var(--h-ink);
  font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "cv11", "ss03";
  line-height: 1.55;
  overflow-x: clip;
}
body.site.pricing-nav ::selection { background: var(--h-lime); color: var(--h-on-accent); }
body.site.pricing-nav :is(h1, h2):not(#dashboard-preview *) { font-family: inherit; font-weight: 800; letter-spacing: -.035em; line-height: 1.04; color: inherit; }
body.pricing-nav .pricing-section { padding-block: clamp(48px, 7vw, 96px) clamp(72px, 10vw, 140px); }
body.pricing-nav .pricing-shell { inline-size: min(100%, var(--h-wrap)); max-inline-size: none; padding-inline: var(--h-pad); }
body.pricing-nav .pricing-intro { max-inline-size: 860px; margin-block-end: 0; }
body.pricing-nav .pricing-kicker { color: var(--h-ink); font-size: clamp(2.2rem, 1rem + 4.4vw, 4.6rem); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
body.pricing-nav .pricing-intro > p.h-lead { max-inline-size: 640px; margin: 22px 0 0; color: var(--h-ink-70); font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.55; letter-spacing: 0; }
body.pricing-nav .pricing-grid { gap: 20px; margin-block-start: clamp(36px, 5vw, 64px); }
body.pricing-nav .price-card {
  padding: 30px 24px 18px;
  border: 0;
  border-radius: 24px;
  background: #efede8;
  color: var(--h-ink);
  box-shadow: none;
}
body.pricing-nav .price-card-popular { padding: 30px 24px 18px; border: 0; background: var(--h-forest); color: #fff; }
body.pricing-nav .popular-label { background: var(--h-lime); color: var(--h-on-accent); font-weight: 700; }
body.pricing-nav .price-card-head h2 { color: inherit; font-size: 25px; }
body.pricing-nav .price-card-head p,
body.pricing-nav .price-line span,
body.pricing-nav .price-billing,
body.pricing-nav .rate-block > p,
body.pricing-nav .rate-block dt { color: var(--h-ink-50); }
body.pricing-nav .price-line strong { color: inherit; font-family: inherit; }
body.pricing-nav .price-monthly,
body.pricing-nav .rate-block dd { color: inherit; }
body.pricing-nav .rate-block { border-color: var(--h-line); }
body.pricing-nav .rate-block > strong { color: var(--h-lime); font-family: inherit; }
body.pricing-nav .price-features li { color: inherit; }
body.pricing-nav .price-features li::before { border-color: var(--h-lime); }
body.pricing-nav .price-volume { border-radius: 14px; background: #fff; color: var(--h-ink); }
body.pricing-nav .price-card-popular :is(.price-card-head p, .price-line span, .price-billing, .rate-block > p, .rate-block dt) { color: rgba(255, 255, 255, .64); }
body.pricing-nav .price-card-popular .rate-block { border-color: rgba(255, 255, 255, .18); }
body.pricing-nav .price-card-popular .rate-block > strong,
body.pricing-nav .price-card-popular .price-features li::before { color: var(--h-lime-bright); border-color: var(--h-lime-bright); }
body.pricing-nav .price-card-popular .price-volume { background: rgba(185, 165, 255, .16); color: #fff; }
body.pricing-nav .pricing-note { margin-block-start: 24px; color: var(--h-ink-70); font-size: 14px; font-style: normal; }

/* pricing.html backdrop: slow-drifting soft purple gradient with a faint grid on top.
   Fixed behind everything, never takes clicks. */
body.site.pricing-nav::before,
body.pricing-nav::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body.site.pricing-nav::before {
  -webkit-mask-image: none;
  mask-image: none;
  display: block;
  inset: -20%;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(78, 38, 227, .07), transparent 72%),
    radial-gradient(34% 38% at 82% 18%, rgba(185, 165, 255, .14), transparent 72%),
    radial-gradient(40% 44% at 70% 82%, rgba(96, 57, 240, .06), transparent 72%),
    radial-gradient(36% 40% at 22% 80%, rgba(214, 203, 255, .16), transparent 72%);
  filter: blur(30px);
  animation: p-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
body.pricing-nav::after {
  background-image:
    linear-gradient(to right, rgba(29, 15, 102, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 15, 102, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 85%);
}
@keyframes p-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-1%, 4%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { body.pricing-nav::before { animation: none; } }
html:has(body.pricing-nav) { background: #fff; }
body.site.pricing-nav { background: transparent; }
body.pricing-nav .pricing-intro { max-inline-size: none; }
body.pricing-nav .pricing-intro > p.h-lead { max-inline-size: none; }

/* Hero: headline and buttons centred. On phones the two buttons share one row, smaller. */
.h-hero-copy { align-items: center; text-align: center; }
.h-hero-copy .h-actions { justify-content: center; }
@media (max-width: 560px) {
  .h-hero-copy .h-actions { flex-wrap: nowrap; gap: 8px; margin-block-start: 24px; }
  .h-hero-copy .h-actions .h-btn { inline-size: auto; flex: 0 1 auto; min-block-size: 44px; padding: 0 18px; font-size: 14.5px; white-space: nowrap; }
}

/* Phones: a bigger headline, still sized so its longest line fits the width. */
@media (max-width: 700px) {
  .h-hero-title { font-size: calc(100cqw / 11); line-height: 1.08; }
}

/* The animated pill must not make its line taller than the others: its padding is paid back
   with an equal negative margin, so every line of the headline is exactly one line-height
   and the pill sits centred on its line at every width. */
.h-flip { margin-block: calc(-.02em - 3px) calc(-.08em - 3px); }

/* Phones: more air between the headline's lines. */
@media (max-width: 700px) {
  /* The id keeps this above the site-wide heading rule, which has one too. */
  body.home #top h1.h-hero-title { line-height: 1.3; }
}

/* Pin the pill to its line's box instead of to the text baseline: browsers disagree about the
   baseline of an inline-block with clipped contents (iPhone Safari put it too high), but the
   line box is the same everywhere, and the pill's margin box is exactly one line tall. */
.h-flip { vertical-align: top; }

/* While the financial breakdown is open, the demo caption drops its blur over the lower
   dashboard, so the panel stays readable... */
.h-demo-note::before { transition: opacity .45s var(--h-ease); }
#dashboard-preview.is-breakdown-open .h-demo-note::before { opacity: 0; }
/* ...and so does its text, which would otherwise sit over the panel's own title. */
#dashboard-preview.is-breakdown-open .h-demo-note.is-on { opacity: 0; }

/* Without Lenis on tablets and phones, in-page links jump natively: keep them clear of the navbar. */
@media (max-width: 1100px) {
  html { scroll-padding-top: 92px; }
}

/* Touch screens: the moving squares and the heading letters get their own layers up front, and
   the big blurred glow behind the grid is a plain gradient (it is soft already). */
@media (pointer: coarse) {
  .h-fg-cell, .h-fg-core { will-change: transform, opacity; }
  .h-fg-sec::before { filter: none; }
}

/* Tablets and phones: the first section is the headline and the whole device - no cropped card,
   no pinning, no extra scroll space; it ends where the device ends. At rest the headline block is
   just tall enough that only the top 40% of the device is on screen (site.js). The desktop card's script
   leaves nothing inline here, and these keep it that way. The glide is in site.js. */
@media (max-width: 1100px) {
  .h-hero > .shell { position: static !important; margin-block: 0 !important; }
  .h-hero-runway { display: none !important; }
  .h-stage { height: auto !important; top: auto !important; }
  .h-stage-scroll { margin-top: 0 !important; }
}

/* Tablets and phones: the headline's blur is redrawn as the page glides; keeping the block on its
   own layer lets the GPU apply it without repainting the text. */
@media (max-width: 1100px) {
  .h-hero-copy { will-change: filter; }
}

/* "What's coming soon": the card is always its full size. Before it opens it is clipped to a small
   rounded box that hugs the text (site.js sets the --soon-* insets); opening animates the clip to
   the full card and the corners to square. Clipping runs on the GPU, so it stays smooth. */
html.js .h-soon {
  clip-path: inset(var(--soon-t, 0px) var(--soon-r, 0px) var(--soon-b, 0px) var(--soon-l, 0px) round 40px);
  transition: clip-path 1.1s cubic-bezier(.65, 0, .25, 1);
}
html.js .h-soon.is-open { clip-path: inset(0 0 0 0 round 0); }
html.js .h-soon.is-measuring, html.js .h-soon.is-measuring * { transition: none !important; }
@media (max-width: 480px) { html.js .h-soon:not(.is-open) { clip-path: inset(var(--soon-t, 0px) var(--soon-r, 0px) var(--soon-b, 0px) var(--soon-l, 0px) round 28px); } }
.h-soon > .h-soon-veil { display: none; }
@media (prefers-reduced-motion: reduce) { html.js .h-soon { clip-path: none; transition: none; } }

/* Before the card opens, its text sits a little to the right and smaller; opening slides it left
   to its place and grows it to full size, in step with the cover. */
.h-soon .h-kicker, .h-soon h2, .h-soon-tag, .h-soon-form, .h-soon-note, .h-soon-status {
  transform-origin: 0 50%;
  transition: transform 1.1s cubic-bezier(.65, 0, .25, 1);
}
html.js .h-soon:not(.is-open) :is(.h-kicker, h2, .h-soon-tag, .h-soon-form, .h-soon-note, .h-soon-status) {
  transform: translateX(clamp(16px, 3vw, 44px)) scale(.8);
}
@media (prefers-reduced-motion: reduce) {
  html.js .h-soon:not(.is-open) :is(.h-kicker, h2, .h-soon-tag, .h-soon-form, .h-soon-note, .h-soon-status) { transform: none; }
}

/* Tablets and phones: the coming-soon text, tagline and waitlist form sit in the centre. */
@media (max-width: 1100px) {
  .h-soon { text-align: center; }
  .h-soon h2, .h-soon-tag { margin-inline: auto; }
  .h-soon-form, .h-soon-note { margin-inline: auto; }
  .h-soon .h-kicker, .h-soon h2, .h-soon-tag, .h-soon-form, .h-soon-note, .h-soon-status { transform-origin: 50% 50%; }
  html.js .h-soon:not(.is-open) :is(.h-kicker, h2, .h-soon-tag, .h-soon-form, .h-soon-note, .h-soon-status) { transform: scale(.8); }
}

/* Flags wheel (desktop): the globe in the middle sits fully inside the page, wrapped in the white
   fog, instead of half off the right edge. The wheel moves left by the globe's half width plus a
   gap, and the fog now covers everything right of its fade, so no flag shows past the globe. */
@media (min-width: 1025px) {
  .h-flags-wheel { inset-inline-start: calc(-1 * (var(--d) * 0.8 + 28px)); }
  .h-flags-wheel::after {
    inline-size: calc(var(--R) + var(--d) * 2.4);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff calc(var(--d) * 2.4 * .85), #fff);
  }
}

/* Flags wheel: the globe in the middle is part of the fog - half see-through (never above .5). */
.h-flags-head { opacity: .45; box-shadow: none; }

/* The globe sits behind the fog's gradient, so the fog fades it out along the ramp. */
.h-flags-head { z-index: 0; opacity: .5; }
@media (min-width: 1025px) {
  .h-flags-wheel::after {
    inset-inline-start: calc(50% - var(--d) * 2.4);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff calc(var(--d) * 3.6 * .95), #fff);
  }
}
@media (max-width: 1024px) {
  .h-flags-wheel::after {
    inset-block-start: calc(50% - var(--d) * 3.2); block-size: calc(var(--d) * 3.2);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 95%);
  }
}

/* Desktop (wider than a tablet): a plain reveal - the full card just fades up into place. No
   clipping, no resizing, no blur, so it stays smooth on slower laptops. */
@media (min-width: 1101px) {
  html.js .h-soon {
    clip-path: none;
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  }
  html.js .h-soon.is-open { clip-path: none; opacity: 1; transform: none; }
  html.js .h-soon:not(.is-open) :is(.h-kicker, h2, .h-soon-tag, .h-soon-form, .h-soon-note, .h-soon-status) { transform: none; }
  .h-soon .h-kicker, .h-soon h2, .h-soon-tag, .h-soon-form, .h-soon-note, .h-soon-status { transition: none; }
  html.js .h-soon:not(.is-open) .h-soon-item { opacity: 0; filter: none; transform: translateY(14px); transition-delay: 0s; }
  html.js .h-soon.is-open .h-soon-item { transition-delay: calc(.25s + var(--i, 0) * 60ms); }
}