/*
 * Madrasaty website. Tokens are the app's (BRANDING.md); only the display
 * sizes of the hero are new, because a marketing page needs a headline the
 * app's deliberately tight scale doesn't have.
 */

/* Served from this site rather than Google Fonts, so a visit sends nobody's
   address to a third party. One variable file per subset covers every weight. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --smoke: #e7edeb;
  --ink: #0a0a0a;
  --charcoal: #26282a;
  --muted: rgba(38, 40, 42, 0.62);
  --card: #ffffff;
  --border: #d8dfdc;
  --mint: #69a481;
  --mint-hover: #619777;
  --mint-active: #588a6c;
  --mint-subtle: rgba(105, 164, 129, 0.1);
  --mint-glow: rgba(105, 164, 129, 0.28);
  --amber: #d9a441;
  --clay: #c4554b;
  --shadow-modal: 0 8px 16px rgba(38, 40, 42, 0.12), 0 20px 48px rgba(38, 40, 42, 0.16);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* The concentric pair: a 30 card with 16 padding puts everything inside at 14. */
  --card-radius: 30px;
  --card-pad: 16px;
  --control-radius: 14px; /* 30 - 16 */
  --thumb-inset: 4px;
  --thumb-radius: 10px; /* 14 - 4 */

  --pad: 16px;
  --nav-btn: 40px;
  --nav-mark: 32px;
  --card-top: 72px; /* the nav's height: 16 + 40 + 16 */
  --card-max: 1120px;
  --mark-h: min(20svh, 168px);
  --gap-mark: 32px;
  --gap-h: 12px;
  --gap-btn: 32px;
  --btn-h: 52px;
  --btn-size: 16px;
  --section-gap: 80px;

  color-scheme: light;
}

@media (min-width: 900px) {
  :root {
    --pad: 32px;
    --nav-btn: 44px;
    --nav-mark: 40px;
    --card-top: 108px;
    --mark-h: clamp(160px, 26.7svh, 320px);
    --gap-mark: 40px;
    --gap-h: 16px;
    --gap-btn: 40px;
    --section-gap: 128px;
  }
}

@media (min-width: 2000px) {
  :root {
    --pad: 48px;
    --nav-btn: 48px;
    --nav-mark: 48px;
    --card-top: 144px;
    --card-max: 1280px;
    --gap-mark: 48px;
    --gap-h: 24px;
    --gap-btn: 48px;
    --btn-h: 60px;
    --btn-size: 18px;
  }
}

/* A phone on its side: height is the constraint, so the mark gives its room
   back to the copy and both buttons stay above the fold. */
@media (max-height: 680px) and (min-width: 560px) {
  :root {
    --mark-h: 64px;
    --gap-mark: 16px;
    --gap-h: 8px;
    --gap-btn: 16px;
    --btn-h: 44px;
    --btn-size: 15px;
  }
}

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

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

body {
  margin: 0;
  background: var(--smoke);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-family: inherit;
  font-size: var(--btn-size);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease);
}

.btn-primary {
  background: var(--mint);
  color: #fff;
}
.btn-primary:hover {
  background: var(--mint-hover);
}
.btn-primary:active {
  background: var(--mint-active);
}

.btn-secondary {
  background: var(--card);
  border-color: var(--border);
  color: var(--ink);
}
.btn-secondary:hover {
  background: linear-gradient(var(--mint-subtle), var(--mint-subtle)), var(--card);
}
.btn-secondary:active {
  border-color: var(--mint);
}

.btn-link {
  background: transparent;
  color: var(--mint-active);
  padding: 0 20px;
}
.btn-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn-nav {
  height: var(--nav-btn);
  padding: 0 16px;
  font-size: 14px;
}
@media (min-width: 900px) {
  .btn-nav {
    padding: 0 20px;
    font-size: 15px;
  }
}

.btn-block {
  display: flex;
  width: 100%;
}

/* BRANDING.md's focus-visible: a charcoal outline with a mint glow between it
   and the control. The outline follows the border radius, so its corner is the
   control's plus the offset, the same geometry as the cursor ring. */
:focus-visible {
  outline: 1.5px solid var(--charcoal);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--mint-glow);
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--pad);
}

/* The bar only gains a ground once the hero has handed over; it fades in
   rather than transitioning a background colour. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Near-solid rather than a live blur: a full-width backdrop blur is
     recomputed on every scroll frame. */
  background: rgba(231, 237, 235, 0.97);
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
/* The bar keeps its padding when it turns solid: the mark lands on the brand
   slot's measured position, and a slot that moved would leave it behind. */
.nav.is-solid::before {
  opacity: 1;
}

.brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-slot {
  display: block;
  height: var(--nav-mark);
  aspect-ratio: 189 / 197;
}
.brand-slot svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
@media (min-width: 900px) {
  .wordmark {
    font-size: 19px;
  }
}

.nav-links {
  display: none;
  gap: 32px;
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal);
}
.nav-links a {
  border-radius: 6px;
  transition: color 160ms var(--ease);
}
.nav-links a:hover {
  color: var(--mint-active);
}

.nav-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 8px;
}

/* The links need 1024: with Help as a fifth, at 900 they ran into Sign in. */
@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
  .nav-menu {
    display: none;
  }
}

/* ---------- Hero ---------- */

/* The track is one screen plus the distance What it is travels to land,
   and the stage sticks for exactly that distance. hero.js sets --pin. */
.hero-track {
  position: relative;
  height: calc(100svh + var(--pin, 0px));
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.hero-light {
  position: absolute;
  left: 0;
  top: 0;
  width: max(62vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(105, 164, 129, 0.12), rgba(105, 164, 129, 0));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: calc(var(--pad) + var(--nav-btn) + 24px) var(--pad) calc(var(--pad) + 72px);
  text-align: center;
}

.mark-slot {
  height: var(--mark-h);
  aspect-ratio: 189 / 197;
  margin-bottom: var(--gap-mark);
}

.mark {
  display: block;
  width: 100%;
  height: 100%;
}

/* Where the mark lives while it moves: fixed, so it can leave the hero and stay
   in the nav after the stage has scrolled away. */
.mark-float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}
.mark-float .mark {
  width: 100%;
  height: 100%;
}

.hero-title {
  margin: 0;
  font-size: clamp(40px, 4.45vw, 88px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero-title span {
  display: block;
}

.hero-sub {
  margin: var(--gap-h) 0 0;
  max-width: 340px;
  font-size: clamp(16px, 1.39vw, 24px);
  line-height: 1.5;
  color: var(--muted);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 4px;
  margin-top: var(--gap-btn);
}

.wide-only {
  display: none;
}

@media (min-width: 900px) {
  .hero-sub {
    max-width: none;
  }
  .wide-only {
    display: inline;
  }
  /* The link carries 20px of padding either side for its hit area, so the
     pair's visible edges sit 20px short on the right. Matching it on the left
     centres what the eye sees rather than the boxes. */
  .hero-ctas {
    flex-direction: row;
    align-self: center;
    gap: 12px;
    padding-left: 20px;
  }
}

@media (max-height: 680px) and (min-width: 560px) {
  .hero-column {
    padding-top: calc(var(--pad) + var(--nav-btn) + 8px);
    padding-bottom: var(--pad);
  }
  .hero-title {
    font-size: 32px;
  }
  .hero-title span {
    display: inline;
  }
  .hero-sub {
    max-width: none;
    font-size: 14px;
  }
  .wide-only {
    display: none;
  }
  /* The link carries 20px of padding either side for its hit area, so the
     pair's visible edges sit 20px short on the right. Matching it on the left
     centres what the eye sees rather than the boxes. */
  .hero-ctas {
    flex-direction: row;
    align-self: center;
    gap: 12px;
    padding-left: 20px;
  }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--pad);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: var(--control-radius);
  color: var(--muted);
  transition: color 160ms var(--ease);
}
.scroll-cue:hover {
  color: var(--ink);
}
/* A nudge, then a rest. An arrow that never stops reads as a loading state. */
.scroll-cue svg {
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(6px);
  }
}
@media (max-height: 480px) {
  .scroll-cue {
    display: none;
  }
}

/* Before hero.js has drawn its first frame, hold everything the intro brings
   in. The head script drops this after 3s if the script never arrives. */
.motion-pending .hero-copy > *,
.motion-pending .scroll-cue,
.motion-pending .nav-extra,
.motion-pending .btn-nav,
.motion-pending .mark-slot .mark {
  opacity: 0;
}

/* ---------- Shared pieces ---------- */

.icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm {
  width: 18px;
  height: 18px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(105, 164, 129, 0.12);
  color: var(--mint-active);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.pill-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot, currentColor);
}
/* Amber text drops to the avatar tint's tone for contrast; the dot keeps the
   full amber, since it is a shape rather than text (BRANDING.md). */
.pill-amber {
  --dot: var(--amber);
  background: rgba(217, 164, 65, 0.16);
  color: #8a6a3a;
}
.pill-clay {
  background: rgba(196, 85, 75, 0.1);
  color: var(--clay);
}

.section {
  max-width: calc(var(--card-max) + 2 * var(--pad));
  margin: var(--section-gap) auto 0;
  padding: 0 var(--pad);
}
.section-head {
  max-width: 760px;
  margin-bottom: 32px;
}
.section-head--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.section-head--center .lead {
  margin-right: auto;
  margin-left: auto;
}
.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-active);
}
.h2 {
  margin: 0;
  font-size: clamp(32px, 3.34vw, 48px);
  line-height: 1.17;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lead {
  max-width: 720px;
  margin: 12px 0 0;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- What it is ---------- */

/* Pulled up by the pin distance, so it rises over the stuck hero while the
   mark flies to the nav, and lands just under it. */
.what {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--pin, 0px));
  padding: 48px var(--pad) 0;
}
.what-inner {
  max-width: var(--card-max);
  margin: 0 auto;
}

/* The laptop takes most of the width; the phone stands in front of its
   bottom-right corner, lower than the laptop's base, as in Penpot. The
   mockups are images (assets/devices), so their shadow follows the device's
   outline rather than a box. */
.showcase {
  position: relative;
  margin: 40px 0 0;
  padding-bottom: 44px;
}
.showcase::before {
  content: '';
  position: absolute;
  inset: 5% 10% 0;
  background: radial-gradient(closest-side, rgba(105, 164, 129, 0.18), rgba(105, 164, 129, 0));
  pointer-events: none;
}
.showcase img {
  position: relative;
  display: block;
  height: auto;
}
/* A soft floor under each device instead of a drop-shadow filter: the filter
   was repainted on scroll and cost frames; a gradient costs nothing. */
.showcase::after,
.showcase-floor {
  content: '';
  position: absolute;
  z-index: -1;
  height: 36px;
  background: radial-gradient(closest-side, rgba(10, 11, 12, 0.2), rgba(10, 11, 12, 0));
  pointer-events: none;
}
.showcase::after {
  left: 3%;
  width: 82%;
  bottom: 30px;
}
.showcase-floor {
  right: 1%;
  width: 26%;
  bottom: -14px;
}
.showcase-laptop {
  width: 94%;
}
.showcase .showcase-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
}

.who-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.who-line li,
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(38, 40, 42, 0.8);
}
.who-line .icon,
.trust .icon {
  color: var(--mint-active);
}

/* ---------- What it does: bento ---------- */

.bento {
  display: grid;
  gap: 16px;
}
.tile {
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--card);
  box-shadow: 0 2px 4px rgba(38, 40, 42, 0.08), 0 4px 10px rgba(38, 40, 42, 0.06);
}
/* 30 tile padded 16: the picture panel is 14, and nothing inside it is
   rounded except pills and avatars. */
.tile-visual {
  padding: 20px;
  border-radius: var(--control-radius);
  background: var(--smoke);
  font-size: 15px;
}
.tile h3 {
  margin: 20px 8px 6px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.tile > p {
  margin: 0 8px 8px;
  font-size: 15px;
  line-height: 1.47;
  color: var(--muted);
}
/* Every panel fills its tile, so tiles sharing a row keep their titles level. */
.tile-visual {
  flex: 1;
}
.tile-soon {
  justify-content: flex-end;
  border: 1px dashed #b9c3bf;
  background: transparent;
  box-shadow: none;
}
.tile-soon .pill {
  align-self: flex-start;
  margin: 0 8px;
}

.tv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tv-head b {
  font-weight: 600;
}
.tv-big {
  margin: 12px 0 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tv-track {
  display: block;
  height: 6px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 3px;
  background: #d0d8d5;
}
.tv-track i {
  display: block;
  height: 100%;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease);
}
.tv-pupils {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tv-pupils li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  border-top: 1px solid var(--border);
}
.tv-pupils b {
  font-weight: 600;
}
.tv-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--mint-active);
}

.tv-notice {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.tv-notice b {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.tv-notice small {
  font-size: 13px;
  color: var(--muted);
}
.tv-reach {
  text-align: right;
}
.tv-reach b {
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tv-reach small {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--mint-active);
}
.tv-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(38, 40, 42, 0.7);
}

.tile-progress .tile-visual small,
.tile-hours .tile-visual small {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.tv-meter {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 18px;
}
.tv-meter:last-child {
  margin-bottom: 0;
}
.tv-meter i {
  width: 26px;
  height: 7px;
  border-radius: 999px;
  background: #d0d8d5;
  transition: background-color 250ms var(--ease);
}
.tv-meter i.is-sel {
  background: var(--mint);
}
.tv-meter b {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mint-active);
}
.tv-figure {
  display: block;
  margin-top: 2px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tv-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
  margin-top: 12px;
}
.tv-bars i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 3px;
  background: var(--mint);
  transform: scaleY(0.15);
  transform-origin: bottom;
  opacity: 0.3;
  transition:
    transform 400ms var(--ease),
    opacity 400ms var(--ease);
}
.tv-bars i.is-sel {
  transform: none;
  opacity: 1;
}

/* A child's record: who they are, then the adults linked to them and what
   each is cleared for. */
.tv-child {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.tv-child b,
.tv-guardians b {
  display: block;
  font-weight: 600;
}
.tv-child b {
  font-size: 17px;
}
.tv-child small,
.tv-guardians small {
  font-size: 13px;
  color: var(--muted);
}
.tv-label {
  margin: 14px 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tv-guardians {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tv-guardians li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  transform: translateY(8px);
  transition:
    opacity 350ms var(--ease),
    transform 350ms var(--ease);
}
.tv-guardians li.is-on {
  transform: none;
}
.tv-guardians li + li {
  border-top: 1px solid var(--border);
}
.tv-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

.tv-ping {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
}
.tv-ping + .tv-ping {
  border-top: 1px solid var(--border);
}
.tv-ping b {
  display: block;
  font-weight: 600;
}
.tv-ping small {
  font-size: 13px;
  color: var(--muted);
}
.tv-ping-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--mint);
}

/* ---------- Who it's for ---------- */

.audiences {
  display: grid;
  gap: 16px;
}
.aud {
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--card);
  box-shadow: 0 2px 4px rgba(38, 40, 42, 0.08), 0 4px 10px rgba(38, 40, 42, 0.06);
}
/* 30 card padded 16, so the panel is 14. The phone images are cropped to the
   top of the phone, so they stand on the panel's bottom edge; the laptop is
   whole and sits in the middle. One height for all three keeps the cards in
   line. */
.aud-panel {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 300px;
  overflow: hidden;
  border-radius: var(--control-radius);
  background: linear-gradient(var(--smoke), #d3e4da);
}
.aud-panel img {
  display: block;
  flex-shrink: 0;
  width: min(66%, 222px);
  height: auto;
}
.aud-panel--desk {
  align-items: center;
}
.aud-panel--desk img {
  width: min(80%, 340px);
}
.aud-who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 8px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-active);
}
.aud-promise {
  margin: 12px 8px 0;
  font-size: clamp(24px, 1.85vw, 26px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.aud-list {
  margin: 20px 8px 8px;
  padding: 0;
  list-style: none;
}
.aud-list li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-top: 1px solid var(--border);
}
/* A mint tick in a soft disc. */
.aud-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(105, 164, 129, 0.12);
}
.aud-list li::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 20px;
  width: 5px;
  height: 9px;
  border: solid var(--mint-active);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.aud-list b {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.aud-list span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- Questions ---------- */

/* One 30 card padded 16; each question is a row inside it, so its focus ring
   takes the 14 that leaves. Built on <details>, so it needs no JS. */
.faq {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--card);
  box-shadow: 0 2px 4px rgba(38, 40, 42, 0.08), 0 4px 10px rgba(38, 40, 42, 0.06);
}
.faq-item + .faq-item {
  border-top: 1px solid var(--border);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 8px;
  border-radius: var(--control-radius);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--mint-active);
}
/* A chevron that turns to point up when the answer is open. */
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border: solid var(--mint-active);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--ease);
}
.faq-item[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}
.faq-item p {
  max-width: 660px;
  margin: 0 8px;
  padding-bottom: 18px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
/* Charcoal with a mint underline: mint text on the card is too faint for body
   size. The answer's wrapper clips, so keep a link off an answer's first line,
   where its focus ring would be cut off. */
.faq-link {
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--mint);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  border-radius: 4px;
  transition: color 160ms var(--ease);
}
.faq-link:hover {
  color: var(--mint-active);
}

/*
 * The slide. The answer's wrapper is a one-row grid whose row eases between
 * 0fr and 1fr, so the browser animates to the answer's own height: nothing is
 * measured, and nothing snaps at the end. hero.js adds .is-expanded after
 * opening and keeps the row open until it has slid shut.
 *
 * This animates layout, the one exception to opacity-and-transform, chosen
 * here because a dropdown that steps open doesn't read as one. It only runs
 * while a row is clicked. Without JS (no .js) the answer simply shows.
 */
.faq-a {
  display: grid;
  grid-template-rows: 1fr;
}
.faq-a > div {
  overflow: hidden;
}
.js .faq-a {
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--ease);
}
.js .faq-a p {
  opacity: 0;
  transition: opacity 280ms var(--ease);
}
.js .faq-item.is-expanded .faq-a {
  grid-template-rows: 1fr;
}
.js .faq-item.is-expanded .faq-a p {
  opacity: 1;
  transition-delay: 60ms;
}
.js .faq-item summary::after {
  transform: translateY(-2px) rotate(45deg);
}
.js .faq-item.is-expanded summary::after {
  transform: translateY(2px) rotate(225deg);
}

/* ---------- Book a demo ---------- */

/* On a phone the mark is smaller and cropped further off the corner, so the
   headline gets a proper column beside it instead of waiting underneath. */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--charcoal);
  color: var(--smoke);
}
.cta-mark {
  position: absolute;
  top: -26px;
  right: -48px;
  height: 150px;
  aspect-ratio: 189 / 197;
}
.cta-copy {
  position: relative;
  margin: 16px 8px 8px;
}
.cta-copy .cta-eyebrow {
  max-width: none;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7cb491;
}
.cta-copy h2 {
  max-width: 226px;
  margin: 0 0 20px;
  font-size: 27px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cta-copy p {
  max-width: 520px;
  margin: 0 0 24px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.5;
  color: rgba(231, 237, 235, 0.72);
}
.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-ghost {
  background: transparent;
  border-color: #5a5e61;
  color: var(--smoke);
}
.btn-ghost:hover {
  background: rgba(231, 237, 235, 0.08);
}
/* Charcoal disappears against charcoal, so the outline inverts here. */
.cta-band :focus-visible {
  outline-color: var(--smoke);
}

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

.footer {
  margin-top: 64px;
  padding: 0 var(--pad);
}
.footer-inner {
  display: grid;
  gap: 40px;
  max-width: var(--card-max);
  margin: 0 auto;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 6px;
  font-size: 19px;
  font-weight: 700;
}
.footer-logo svg {
  height: 36px;
  aspect-ratio: 189 / 197;
}
.footer-brand p {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--muted);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}
.footer-cols h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-cols a {
  display: block;
  width: fit-content;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  transition: color 160ms var(--ease);
}
.footer-cols a:hover {
  color: var(--mint-active);
}
.copyright {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- Wider screens ---------- */

@media (max-width: 420px) {
  /* Mark, Sign in and Book a demo fit a phone's nav; the wordmark doesn't. */
  .wordmark {
    display: none;
  }
}

@media (min-width: 600px) {
  .footer-cols {
    grid-template-columns: repeat(3, 160px);
  }
}

@media (min-width: 700px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'reg reg'
      'not not'
      'pro hrs'
      'ppl ppl'
      'par soon';
  }
  /* Named areas only where a template names them: without one (a phone's
     single column) the browser invents overlapping areas and every tile lands
     in the same cell. */
  .tile-register { grid-area: reg; }
  .tile-notices { grid-area: not; }
  .tile-progress { grid-area: pro; }
  .tile-hours { grid-area: hrs; }
  .tile-people { grid-area: ppl; }
  .tile-parents { grid-area: par; }
  .tile-soon { grid-area: soon; }
}

@media (min-width: 900px) {
  .section-head {
    margin-bottom: 48px;
  }
  .lead {
    margin-top: 16px;
  }
  .what {
    padding-top: 64px;
  }
  /* As in Penpot: the phone drops about 100px below the laptop's base. */
  .showcase {
    margin-top: 56px;
    padding-bottom: 104px;
  }
  .showcase-laptop {
    width: 88%;
  }
  .showcase .showcase-phone {
    width: 23.5%;
  }
  .audiences {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .trust li + li {
    padding-left: 28px;
    border-left: 1px solid #c9d1ce;
  }
  .cta-band {
    min-height: 360px;
  }
  .cta-mark {
    top: -30px;
    right: -90px;
    height: 420px;
  }
  .cta-copy {
    margin: 40px;
  }
  .cta-copy h2 {
    max-width: 600px;
    font-size: 44px;
    line-height: 1.18;
  }
  .cta-copy p {
    margin-bottom: 32px;
  }
  .cta-buttons {
    flex-direction: row;
    gap: 12px;
  }
  .footer {
    margin-top: 96px;
  }
  .footer-inner {
    grid-template-columns: 1fr auto;
    padding: 56px 0;
  }
  .copyright {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      'reg reg not not'
      'reg reg pro hrs'
      'ppl ppl par soon';
    gap: 24px;
  }
}

/* ---------- Arriving ---------- */

/* Each block rises and fades in once as it enters the view. Anything carrying
   a shadow only rises: fading a shadow repaints it every frame. */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ease) var(--d, 0ms),
    transform 600ms var(--ease) var(--d, 0ms);
}
.motion .tile[data-reveal],
.motion .aud[data-reveal],
.motion .faq[data-reveal],
.motion .showcase[data-reveal],
.motion .plan[data-reveal],
.motion .step[data-reveal],
.motion .qa[data-reveal],
.motion .form-card[data-reveal] {
  opacity: 1;
  transform: translateY(28px);
  transition: transform 700ms var(--ease) var(--d, 0ms);
}
.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Avatars and scene helpers ---------- */

/* Initials avatars stay circular, the one exception to derived corners
   (BRANDING.md). Tints are hashed per person in the app; fixed here. */
.avatar {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
}
.avatar.sm { width: 34px; height: 34px; font-size: 12px; }
.avatar.lg { width: 52px; height: 52px; font-size: 17px; }
.av-mint { background: #d7e8dd; color: #3f6b52; }
.av-blue { background: #dce4f0; color: #3e5a87; }
.av-amber { background: #f1e4d3; color: #8a6a3a; }
.av-plum { background: #ebdcef; color: #6e4a82; }

/* Anything a tile brings in during its moment fades; its layout never moves. */
.swap {
  transition:
    opacity 300ms var(--ease),
    transform 450ms var(--ease);
}
.swap:not(.is-on) {
  opacity: 0;
}
/* Without JS a tile shows its finished picture. */
.no-js .swap {
  opacity: 1;
}

/* ---------- Cursor ---------- */

.cursor {
  display: none;
}

.has-cursor,
.has-cursor * {
  cursor: none !important;
}
.has-cursor .cursor {
  display: block;
}
/* Typing keeps the system's text cursor; the dot steps aside over a field. */
.has-cursor input,
.has-cursor textarea,
.has-cursor select {
  cursor: auto !important;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
  will-change: transform, opacity;
}

.cursor-dot {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--mint);
  transition: opacity 150ms var(--ease);
}

/* Sized to its target instantly and never animated in size; it appears by
   fading and settling its scale, so no frame ever lays anything out. */
.cursor-ring {
  border: 1.5px solid var(--mint);
  opacity: 0;
  transform-origin: center;
}

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

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg {
    animation: none;
  }
  .btn,
  .nav::before,
  .cursor-dot,
  .tv-track i,
  .tv-meter i,
  .tv-bars i,
  .tv-guardians li,
  .swap,
  .faq-item summary::after,
  .js .faq-a,
  .js .faq-a p {
    transition: none;
  }
}

/* =================================================================
 * Inner pages: Pricing and Book a demo. Designs are the
 * "Website · Pricing" and "Website · Book a demo" pages in Penpot.
 * ================================================================= */

:root {
  --shadow-card: 0 2px 4px rgba(38, 40, 42, 0.08), 0 4px 10px rgba(38, 40, 42, 0.06);
  /* The only overshoot on the site, kept for the mint full stop on "Free.". */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nowrap {
  white-space: nowrap;
}

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

.nav-links a[aria-current='page'],
.footer-cols a[aria-current='page'] {
  color: var(--mint-active);
}

/* The light is placed first and every block after it is positioned, so it
   paints under all of them. */
.page {
  position: relative;
  padding-top: calc(var(--card-top) + 32px);
  /* The light is wider than a phone; it may spill down the page, never sideways. */
  overflow-x: clip;
}
.page > :not(.hero-light) {
  position: relative;
}

/* ---------- Pricing: the hero ---------- */

.price-hero {
  padding: 0 var(--pad);
  text-align: center;
}
.price-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-weight: 700;
}
.free-wrap {
  display: inline-block;
}
.free {
  display: flex;
  align-items: baseline;
  font-size: clamp(96px, 11vw, 168px);
  line-height: 1;
  letter-spacing: -0.04em;
}
/* The mask the letters rise out of. The padding gives the glyphs' own
   overhang room; the negative margin gives it back to the layout. */
.free-word {
  display: inline-flex;
  overflow: hidden;
  padding: 0.06em 0.03em 0.02em;
  margin: -0.06em -0.03em -0.02em;
}
.free-l,
.free-dot {
  display: inline-block;
}
.free-dot {
  color: var(--mint);
  transform-origin: 50% 80%;
}
.free-wipe {
  display: block;
  width: 92%;
  margin: 0.02em auto 0;
  overflow: hidden;
}
/* width 0 with a 100% minimum: the underline fills the word's width without
   lending the word its own (an SVG's default 300px), which on a phone made
   the box wider than "Free." and pushed the word off centre. */
.free-wipe svg {
  display: block;
  width: 0;
  min-width: 100%;
  height: auto;
}
.price-line {
  max-width: 310px;
  margin-top: 28px;
  font-size: clamp(26px, 2.78vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.price-lead {
  margin: 16px auto 0;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.5;
  color: var(--muted);
}
.price-lead span {
  display: block;
}

@media (min-width: 900px) {
  .price-line {
    max-width: none;
  }
  .price-lead span {
    display: inline;
  }
}

/* "Free." arrives in three beats: the letters rise out of their mask one after
   another, the full stop pops in, and the underline draws itself. The draw is
   two opposing translations, the window sliding right while the stroke inside
   it slides back, so the stroke stays still while more of it shows. */
.motion .free-l {
  transform: translateY(105%);
  transition: transform 520ms var(--ease) calc(var(--i) * 50ms);
}
.motion .free-dot {
  opacity: 0;
  transform: scale(0.2);
  transition:
    opacity 140ms var(--ease) 260ms,
    transform 480ms var(--ease-pop) 260ms;
}
.motion .free-wipe {
  transform: translateX(-101%);
  transition: transform 600ms var(--ease) 360ms;
}
.motion .free-wipe svg {
  transform: translateX(101%);
  transition: transform 600ms var(--ease) 360ms;
}
.motion .free-wrap.is-in .free-l,
.motion .free-wrap.is-in .free-dot,
.motion .free-wrap.is-in .free-wipe,
.motion .free-wrap.is-in .free-wipe svg {
  opacity: 1;
  transform: none;
}

/* The home hero's light, following the pointer behind "Free.". */
.page > .hero-light {
  transition: opacity 900ms var(--ease) 400ms;
}
.page > .hero-light.is-lit {
  opacity: 1;
}

/* An arrow after a button's label. */
.btn-icon {
  width: 18px;
  height: 18px;
  margin-left: 8px;
}

/* ---------- Pricing: the plan ---------- */

.plan {
  display: grid;
  max-width: var(--card-max);
  margin: 56px auto 0;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
  text-align: left;
}
.plan-offer {
  display: flex;
  flex-direction: column;
  padding: 12px 8px 0;
}
.plan-offer .eyebrow,
.plan-included .eyebrow {
  margin-bottom: 8px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.plan-price b {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.plan-price span {
  font-size: 16px;
  font-weight: 500;
  color: rgba(38, 40, 42, 0.7);
}
.plan-copy {
  margin: 12px 0 24px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
/* On a phone the button reaches the card's padding, 16 in, so its 14 corner
   is the card's 30 less that. */
.plan-offer .btn {
  margin: 0 -8px;
}
.plan-note {
  margin: 12px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}
.plan-included {
  margin: 24px 8px 0;
  padding: 24px 0 8px;
  border-top: 1px solid var(--border);
}
.plan-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan-list li,
.get-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.tick {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(105, 164, 129, 0.14);
  color: var(--mint-active);
}
.tick .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}

@media (min-width: 900px) {
  .plan {
    grid-template-columns: 400px minmax(0, 1fr);
    margin-top: 64px;
  }
  .plan-offer {
    position: relative;
    padding: 24px;
  }
  .plan-offer::after {
    content: '';
    position: absolute;
    top: 24px;
    right: 0;
    bottom: 24px;
    width: 1px;
    background: var(--border);
  }
  .plan-offer .btn {
    margin: 0;
  }
  .plan-price b {
    font-size: 56px;
  }
  .plan-copy {
    font-size: 16px;
  }
  .plan-included {
    margin: 0;
    padding: 24px 24px 24px 40px;
    border-top: 0;
  }
  .plan-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
  }
  .plan-list li {
    padding: 17px 0;
  }
  .plan-list li:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}

/* ---------- Pricing: steps and questions ---------- */

.steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.step-n {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--control-radius);
  background: rgba(105, 164, 129, 0.12);
  color: var(--mint-active);
  font-size: 15px;
  font-weight: 700;
}
.step h3 {
  margin: 4px 0 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}
.step p {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.step-arrow {
  display: none;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .step {
    position: relative;
    display: block;
  }
  .step h3 {
    margin: 24px 8px 6px;
    font-size: 20px;
  }
  .step p {
    margin: 0 8px 8px;
  }
  /* Sits in the 24px gap between two cards. */
  .step-arrow {
    position: absolute;
    top: 50%;
    right: -22px;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color: var(--mint-active);
    opacity: 0.6;
  }
}

.qa {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.qa-row {
  padding: 18px 8px;
}
.qa-row + .qa-row {
  border-top: 1px solid var(--border);
}
.qa-row h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.qa-row p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Book a demo ---------- */

.demo {
  display: grid;
  gap: 48px;
  max-width: calc(var(--card-max) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad);
}
.demo-copy {
  display: flex;
  flex-direction: column;
}
.demo-title {
  margin: 0;
  font-size: clamp(34px, 3.34vw, 48px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.demo-lead {
  max-width: 480px;
  margin: 16px 0 0;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.5;
  color: var(--muted);
}
.demo-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.demo-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(38, 40, 42, 0.8);
}
.demo-meta .icon {
  color: var(--mint-active);
}
.demo-h {
  margin: 48px 0 20px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}
.show-list,
.get-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.show-list {
  gap: 20px;
}
.show-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
}
.show-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--control-radius);
  background: rgba(105, 164, 129, 0.12);
  color: var(--mint-active);
}
.show-list b {
  display: block;
  margin-top: 1px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.show-list div span {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.get-list {
  gap: 14px;
}
.get-list li {
  align-items: flex-start;
  font-size: 16px;
}

@media (min-width: 900px) {
  .demo {
    grid-template-columns: minmax(0, 1fr) 464px;
    gap: 64px;
    align-items: start;
  }
  .demo-lead {
    max-width: 480px;
  }
  /* On a desk the practical details close the column; on a phone they sit
     under the lead, where the question "how long?" is asked. */
  .demo-meta {
    order: 10;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  .demo-h {
    margin-top: 56px;
  }
  .form-card {
    position: sticky;
    top: calc(var(--card-top) + 24px);
  }
}

/* ---------- The form ---------- */

.form-card {
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--card-top) + 16px);
}
.form-head {
  padding: 8px 8px 0;
}
.form-head h2,
.thanks h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.form-head p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.field {
  margin-top: 20px;
  border: 0;
  padding: 0;
}
.field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 8px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}
.badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.badge-req {
  background: rgba(196, 85, 75, 0.1);
  color: var(--clay);
}
.badge-opt {
  background: rgba(217, 164, 65, 0.16);
  color: #8a6a3a;
}
.input {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition: border-color 160ms var(--ease);
}
.input::placeholder {
  color: rgba(38, 40, 42, 0.42);
}
.input:hover {
  border-color: #c3ccc8;
}
.input:focus,
.input:focus-visible {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 4px var(--mint-glow);
}
textarea.input {
  height: 96px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
.select-wrap {
  position: relative;
}
.select-wrap .input {
  padding-right: 44px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.select-wrap .input:invalid {
  color: rgba(38, 40, 42, 0.42);
}
.select-wrap .icon {
  position: absolute;
  top: 15px;
  right: 14px;
  width: 18px;
  height: 18px;
  color: var(--charcoal);
  pointer-events: none;
}

/* Four equal quarters in a bordered track, like the app's Segments. The thumb
   is inset 4 inside the 14 track, so its corner is 10, and it slides between
   quarters rather than resizing. */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--thumb-inset);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
}
.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg label {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: var(--thumb-radius);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(38, 40, 42, 0.8);
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.seg label:hover {
  color: var(--mint-active);
}
.seg input:checked + label {
  color: #fff;
}
.seg input:focus-visible + label {
  outline: 1.5px solid var(--charcoal);
  outline-offset: 2px;
}
.seg-thumb {
  position: absolute;
  top: var(--thumb-inset);
  bottom: var(--thumb-inset);
  left: var(--thumb-inset);
  width: calc((100% - 2 * var(--thumb-inset)) / 4);
  border-radius: var(--thumb-radius);
  background: var(--mint);
  opacity: 0;
  transform: translateX(calc(var(--seg, 0) * 100%));
  transition:
    transform 300ms var(--ease),
    opacity 200ms var(--ease);
}
.seg.has-value .seg-thumb {
  opacity: 1;
}
.seg.is-placing .seg-thumb {
  transition: opacity 200ms var(--ease);
}
@media (min-width: 400px) {
  .seg label {
    font-size: 14px;
  }
}

.field-error {
  display: none;
  margin: 8px 8px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--clay);
}
.field.has-error .input,
.field.has-error .seg {
  border-color: var(--clay);
}
.field.has-error .field-error {
  display: block;
}

.form-actions {
  margin-top: 24px;
}
.form-actions .btn {
  gap: 10px;
}
.form-actions .btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}
.form-fine {
  margin: 12px 8px 4px;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}
.form-fail {
  margin: 12px 8px 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--clay);
}
.hp {
  display: none;
}

/* The thank-you replaces the form inside the same card. The form fades out,
   the card takes the new height while nothing is showing, and the thanks
   rises in, so the resize is never seen. */
.form-body,
.thanks {
  transition:
    opacity 240ms var(--ease),
    transform 600ms var(--ease);
}
.form-card.is-leaving .form-body {
  opacity: 0;
}
.thanks[hidden] {
  display: none;
}
.thanks.is-arriving {
  opacity: 0;
  transform: translateY(16px);
}
.thanks-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--control-radius);
  background: rgba(105, 164, 129, 0.12);
  color: var(--mint-active);
}
.thanks h2 {
  margin: 28px 8px 0;
  font-size: 28px;
}
.thanks > p {
  margin: 10px 8px 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.thanks-wait {
  margin: 28px 8px 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.thanks-wait .eyebrow {
  margin-bottom: 4px;
}
.thanks-wait a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -8px;
  padding: 12px 8px;
  border-radius: var(--control-radius);
  transition: color 160ms var(--ease);
}
/* Drawn rather than a border: a border would follow the row's 14 corner and
   curl up at both ends, and the rule sits at the text's inset, not the row's. */
.thanks-wait a + a {
  background: linear-gradient(var(--border), var(--border)) 8px 0 / calc(100% - 16px) 1px no-repeat;
}
.thanks-wait a:hover {
  color: var(--mint-active);
}
.thanks-wait b {
  display: block;
  font-size: 17px;
  font-weight: 600;
}
.thanks-wait small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
}
.thanks-wait .icon {
  color: var(--mint-active);
}

@media (prefers-reduced-motion: reduce) {
  .input,
  .seg label,
  .seg-thumb,
  .form-body,
  .thanks,
  .thanks-wait a,
  .page > .hero-light {
    transition: none;
  }
}

/* ---------- Legal pages ---------- */

/* Privacy, Cookies, Terms, Data processing and Sub-processors share this one
   reading column. Text sits on the page's own ground; only the summary and the
   tables are cards, so the long pages read as a document, not a stack of tiles. */
.legal {
  max-width: calc(760px + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad);
  color: var(--charcoal);
}
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.legal-nav a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease);
}
.legal-nav a:hover {
  background: linear-gradient(var(--mint-subtle), var(--mint-subtle)), var(--card);
}
.legal-nav a[aria-current='page'] {
  border-color: var(--mint);
  background: linear-gradient(var(--mint-subtle), var(--mint-subtle)), var(--card);
  color: var(--mint-active);
}
.legal-head h1 {
  margin: 0;
  font-size: clamp(32px, 3.34vw, 48px);
  line-height: 1.17;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.legal-updated {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.legal-summary {
  margin: 32px 0 0;
  padding: 24px;
  border-radius: var(--card-radius);
  background: var(--card);
  font-size: 16px;
  line-height: 1.65;
}
.legal-summary h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-active);
}
.legal-summary p,
.legal-summary ul {
  margin: 0;
}
.legal-summary ul {
  padding-left: 20px;
}
.legal-summary li + li {
  margin-top: 6px;
}
.legal-summary ul + p {
  margin-top: 16px;
}
.legal-toc {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  columns: 2 240px;
  column-gap: 24px;
}
.legal-toc a {
  display: inline-block;
  padding: 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--mint-active);
}
.legal-toc a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.legal-body {
  font-size: 16px;
  line-height: 1.65;
}
.legal-body h2 {
  margin: 56px 0 12px;
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  scroll-margin-top: calc(var(--card-top) + 16px);
}
.legal-body h3 {
  margin: 32px 0 8px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
  scroll-margin-top: calc(var(--card-top) + 16px);
}
.legal-body p,
.legal-body ul,
.legal-body ol {
  margin: 0 0 16px;
}
.legal-body li {
  margin-bottom: 8px;
}
.legal-body li > ul,
.legal-body li > ol {
  margin-top: 8px;
}
.legal-body a,
.legal-summary a,
.form-fine a {
  color: var(--mint-active);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-body a:hover,
.legal-summary a:hover,
.form-fine a:hover {
  color: var(--charcoal);
}
.legal-part {
  margin: 72px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.legal-part > .eyebrow {
  margin-bottom: 0;
}
.legal-part > h2 {
  margin-top: 8px;
}
/* The card carries no padding, so the table runs to its edges and the card's
   own overflow cuts the corners: the one nesting case with no inner radius. */
.legal-table {
  margin: 0 0 24px;
  border-radius: var(--card-radius);
  background: var(--card);
  overflow-x: auto;
}
.legal-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.legal-table th,
.legal-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.legal-table tr:last-child td {
  border-bottom: 0;
}
.legal-table th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Details the owner still has to supply. Amber so they can't ship unnoticed. */
.ph {
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(217, 164, 65, 0.22);
}
.copyright {
  max-width: 720px;
  line-height: 1.55;
}