/* ==========================================================================
   Sprrint landing page
   Concept: a team whiteboard. Marker inks, drawn edges, stickmen.
   ========================================================================== */

:root {
  --board:    #F4F6F4;   /* dry-erase white */
  --paper:    #FFFFFF;
  --ink:      #16181D;   /* black marker */
  --ink-soft: #8B93A6;   /* the marker that's drying out */
  --blue:     #2B5CE6;
  --red:      #E8453C;
  --green:    #1FA463;
  --hi:       #FFD23F;   /* highlighter */

  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-hand:    "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --gut: clamp(20px, 5vw, 60px);
  --wrap: 1180px;
  --cycle: 400ms;   /* one full stride; short enough to read as a sprint */

  /* edges drawn by hand are never the same twice */
  --r-a: 16px 10px 18px 12px / 12px 18px 10px 16px;
  --r-b: 10px 18px 11px 20px / 18px 11px 20px 12px;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--board);
  background-image: radial-gradient(circle at 1px 1px, rgba(22, 24, 29, .10) 1px, transparent 0);
  background-size: 24px 24px;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.02; }

a { color: inherit; }

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

.skip {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--board);
  border-radius: 0 0 8px 8px;
  text-decoration: none;
}
.skip:focus { top: 0; }

/* --------------------------------------------------------------------------
   The stickman
   Every joint is a nested <g> whose local origin sits on the pivot, so a
   plain rotate() bends the limb the way a limb bends.
   -------------------------------------------------------------------------- */

.sm {
  display: block;
  width: 100%;
  aspect-ratio: 144 / 208;
  overflow: visible;
}

/* All widths derive from --sw, set per size below, so relative weights hold
   at every scale without fighting specificity. */
.sm__ln {
  stroke: var(--ink);
  stroke-width: var(--sw, 7.5);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Far-side limbs stay black — the drawing is black-dominant — and read as
   further away purely by carrying less ink, the way a marker eases off. */
.sm__ln--far { stroke-width: calc(var(--sw, 7.5) * .74); }

.sm__ln--neck { stroke-width: calc(var(--sw, 7.5) * .7); }   /* thin stick neck */

/* Board-colored fill so cards passing behind the figure don't show through
   the open head. The logo mark is too small for the disc to read. */
.sm__head-fill { fill: var(--paper); stroke: none; }
.sm--mark .sm__head-fill { display: none; }

/* Origin in user units, and no transform-box: that keeps the pivot on the
   group's own local origin, which is where we parked each joint. */
.sm__thigh, .sm__shin, .sm__arm, .sm__fore, .sm__torso {
  transform-origin: 0 0;
}

/* Resting pose: the open-stride moment of the sprint, near leg reaching,
   far leg recovering with the heel tucked up. Doubles as the logo pose. */
.sm__thigh--f { transform: rotate(-46deg); }
.sm__shin--f  { transform: rotate(14deg); }
.sm__thigh--b { transform: rotate(20deg); }
.sm__shin--b  { transform: rotate(66deg); }
.sm__arm--f   { transform: rotate(44deg); }
.sm__fore--f  { transform: rotate(-70deg); }
.sm__arm--b   { transform: rotate(-26deg); }
.sm__fore--b  { transform: rotate(-100deg); }
.sm__torso    { transform: rotate(20deg); }

/* A sprint stride, not a jog: toe-off behind, heel snapped up under the hip,
   knee driven high in front, then unfold and strike. */
@keyframes sm-leg {
  0%   { transform: rotate(34deg); }    /* toe-off, extended behind */
  20%  { transform: rotate(6deg); }     /* swinging through */
  40%  { transform: rotate(-52deg); }   /* knee drives high */
  60%  { transform: rotate(-46deg); }   /* reaching out front */
  80%  { transform: rotate(-8deg); }    /* strike, taking weight */
  100% { transform: rotate(34deg); }
}
@keyframes sm-shin {
  0%   { transform: rotate(14deg); }
  20%  { transform: rotate(118deg); }   /* heel kicks up to the backside */
  40%  { transform: rotate(72deg); }    /* still folded under the high knee */
  60%  { transform: rotate(14deg); }    /* unfolds to reach */
  80%  { transform: rotate(6deg); }     /* straight beneath the body */
  100% { transform: rotate(14deg); }
}
@keyframes sm-arm {
  0%   { transform: rotate(-38deg); }   /* hand up front, opposite the leg */
  20%  { transform: rotate(-14deg); }
  40%  { transform: rotate(30deg); }
  60%  { transform: rotate(46deg); }    /* driven back past the hip */
  80%  { transform: rotate(12deg); }
  100% { transform: rotate(-38deg); }
}
@keyframes sm-fore {
  0%   { transform: rotate(-106deg); }  /* elbow locked tight, hand at the chin */
  20%  { transform: rotate(-96deg); }
  40%  { transform: rotate(-80deg); }
  60%  { transform: rotate(-68deg); }
  80%  { transform: rotate(-88deg); }
  100% { transform: rotate(-106deg); }
}
@keyframes sm-torso {
  0%, 50%, 100% { transform: rotate(20deg); }
  25%, 75%      { transform: rotate(23deg); }
}
@keyframes sm-bob {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75%      { transform: translateY(-7px); }
}

/* The mark runs when you point at it. Near and far limbs are half a cycle
   apart; the arm keyframes already start opposite the legs. */
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) {
  --run: var(--cycle) linear infinite;
  --sway: var(--cycle) ease-in-out infinite;
  --off: calc(var(--cycle) / -2);
}
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) .sm__bob      { animation: sm-bob var(--sway); }
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) .sm__torso    { animation: sm-torso var(--sway); }
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) .sm__thigh--f { animation: sm-leg var(--run); }
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) .sm__shin--f  { animation: sm-shin var(--run); }
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) .sm__arm--f   { animation: sm-arm var(--run); }
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) .sm__fore--f  { animation: sm-fore var(--run); }
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) .sm__thigh--b { animation: sm-leg var(--run) var(--off); }
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) .sm__shin--b  { animation: sm-shin var(--run) var(--off); }
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) .sm__arm--b   { animation: sm-arm var(--run) var(--off); }
:is(.sm.is-running, .mark:hover .sm, .mark:focus-visible .sm) .sm__fore--b  { animation: sm-fore var(--run) var(--off); }

/* Per size, so the marker keeps a consistent apparent thickness: the hero
   lands around 13px on screen. */
.sm--hero   { --sw: 7.5; }
.sm--finish { --sw: 8.5; }
.sm--mark   { --sw: 13; }

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

.nav {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 30px var(--gut) 0;
}

.mark {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  text-decoration: none;
}

.mark__glyph { width: 24px; }

.mark__word {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.035em;
}

/* The two r's are the legs. */
.mark__rr { color: var(--blue); }

.nav__links {
  display: flex;
  gap: 26px;
  font-size: 15px;
}

/* Underline drawn on, rather than a border: keeps the stroke tight to the
   text while the padding stays big enough to tap. */
.nav__links a,
.foot__links a {
  text-decoration: none;
  padding-block: 8px;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 calc(100% - 8px);
  transition: background-size .2s ease;
}
.nav__links a:hover,
.foot__links a:hover { background-size: 100% 2px; }

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

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  padding: 13px 24px;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-a);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.btn--primary {
  background: var(--ink);
  color: var(--board);
  box-shadow: 4px 4px 0 rgba(22, 24, 29, .2);
}
.btn--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(22, 24, 29, .24);
}

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--hi); transform: translate(-1px, -1px); }

.btn--small { padding: 9px 17px; font-size: 15px; }
.btn--big   { padding: 17px 34px; font-size: 20px; }

/* Header CTA: highlighter ink colors the box in from the left. */
.nav .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  z-index: 0;
}
.nav .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hi);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}
.nav .btn:hover::before,
.nav .btn:focus-visible::before {
  transform: scaleX(1);
}

/* Traced twice, the way you redraw a box on a whiteboard. */
.sketch { position: relative; }
.sketch::after {
  content: "";
  position: absolute;
  inset: -6px -4px -4px -6px;
  border: 2px solid var(--ink);
  border-radius: var(--r-b);
  transform: rotate(-.6deg);
  opacity: .26;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Shared text
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-hand);
  font-size: 23px;
  color: var(--blue);
  margin: 0 0 14px;
  transform: rotate(-1.2deg);
}

.lede {
  font-size: clamp(17px, 1.25vw, 19px);
  max-width: 46ch;
  margin: 0 0 26px;
  color: #33373F;
}
.lede--center { margin-inline: auto; text-align: center; }

.note {
  font-family: var(--font-hand);
  font-size: 20px;
  color: var(--ink-soft);
  margin: 0;
}

.note--hero { margin-top: 18px; transform: rotate(-.8deg); }
.note--finish { margin-top: 16px; }

/* One stroke of a highlighter per line, drawn left to right. inline-block
   keeps a stroke from fragmenting across a line break. */
.hl { position: relative; display: inline-block; }
.hl::after {
  content: "";
  position: absolute;
  left: -.09em;
  right: -.09em;
  top: .25em;
  bottom: .13em;
  background: var(--hi);
  border-radius: 3px 9px 4px 10px / 8px 3px 9px 4px;
  transform: skewX(-8deg);
  transform-origin: left center;
  mix-blend-mode: multiply;
  animation: hl-swipe .6s .45s cubic-bezier(.22, .8, .2, 1) both;
}
.hl--late::after { animation-delay: .72s; }
@keyframes hl-swipe {
  from { transform: skewX(-8deg) scaleX(0); }
  to   { transform: skewX(-8deg) scaleX(1); }
}

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

.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) var(--gut) clamp(56px, 7vw, 96px);
}

.hero__title {
  font-size: clamp(42px, 6.2vw, 78px);
  font-weight: 800;
  letter-spacing: -.038em;
  margin-bottom: 26px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}

/* --- the stage the runner runs on --- */

.hero__stage { min-width: 0; }

.stage {
  --rw: clamp(190px, 25vw, 260px);   /* runner width; his feet key off it */
  position: relative;
  padding: 56px 0 0;
  isolation: isolate;
}

/* Above the flying cards so they pass behind him, below the callout. */
.stage__runner {
  position: relative;
  z-index: 2;
  width: var(--rw);
  margin: 0 auto;
}

/* The figure leaves empty space below its feet inside the viewBox, so pull
   the ground line up by that much. */
.stage__track {
  height: 3px;
  margin-top: calc(var(--rw) * -.111);
  background-image: repeating-linear-gradient(90deg,
    var(--ink) 0 15px, transparent 15px 27px);
  opacity: .5;
  animation: treadmill .46s linear infinite;
}
@keyframes treadmill { to { background-position-x: -27px; } }

/* Caption sits in the top-left; the arrow is anchored to the text so it
   always points from the note to Aboo, not through the flying cards. */
.stage__callout {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  z-index: 4;
  pointer-events: none;
}

.note--aboo {
  font-size: 20px;
  line-height: 1.15;
  color: var(--ink);
  transform: rotate(-2.5deg);
  white-space: nowrap;
}

.stage__arrow {
  position: absolute;
  top: 6px;
  left: 100%;
  width: 52px;
  overflow: visible;
  color: var(--blue);
}
.stage__arrow path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.is-in .stage__arrow path { animation: draw .8s .35s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.dust {
  position: absolute;
  bottom: calc(var(--rw) * .111);
  left: 42%;
  width: 9px;
  height: 9px;
  border: 2px solid var(--ink-soft);
  border-radius: 50%;
  opacity: 0;
  animation: dust .8s linear infinite;
}
.dust--2 { animation-delay: .27s; }
.dust--3 { animation-delay: .53s; }
@keyframes dust {
  0%   { opacity: .85; transform: translate(0, 0) scale(.3); }
  100% { opacity: 0;   transform: translate(-88px, -26px) scale(1.7); }
}

.flyby {
  position: absolute;
  inset: 88px 0 auto 0;
  height: 154px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.flyby--back  { z-index: 1; }
.flyby--front { z-index: 3; }

.flyby__note {
  position: absolute;
  left: 100%;
  padding: 7px 11px;
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  background: var(--hi);
  border: 2px solid var(--ink);
  border-radius: 3px 6px 4px 7px;
  animation: flyby 12.6s linear infinite, note-bob 1.1s ease-in-out infinite;
}
.flyby__note--a { top: 18px; animation-delay: 0s,    0s; }
.flyby__note--b { top: 92px; background: #BFE3FF; animation-delay: 1.8s,  .2s; }
.flyby__note--c { top: 54px; background: #FFC9C4; animation-delay: 3.6s,  .4s; }
.flyby__note--d { top: 26px; background: #C8EBD4; animation-delay: 5.4s,  .15s; }
.flyby__note--e { top: 82px; background: #BFE3FF; animation-delay: 7.2s,  .35s; }
.flyby__note--f { top: 42px; animation-delay: 9s,    .5s; }
.flyby__note--g { top: 100px; background: #FFC9C4; animation-delay: 10.8s, .25s; }

@keyframes flyby {
  /* Cross the stage in the first half, then wait off-screen so the next
     card has room. Seven labels, about three on screen at a time. */
  0%      { left: 100%; opacity: 0; }
  5%      { opacity: 1; }
  43%     { left: -26%; opacity: 1; }
  48%     { left: -26%; opacity: 0; }
  48.01%  { left: 100%; opacity: 0; }
  100%    { left: 100%; opacity: 0; }
}
@keyframes note-bob {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-4px); }
}

/* --------------------------------------------------------------------------
   The Black Hole
   A deliberate break from the whiteboard: unplanned work lives somewhere
   quiet and dark until it earns a place in a sprint.
   -------------------------------------------------------------------------- */

.gravity {
  --space: #09090E;
  --space-soft: #111019;
  --space-ink: #F2EEFF;
  --space-muted: #A39DAD;
  --violet: #9B7CFF;
  --coral: #FF8066;
  position: relative;
  color: var(--space-ink);
  background: var(--space);
  overflow: hidden;
}

.gravity::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 79% 42%, rgba(132, 91, 255, .12), transparent 25%),
    radial-gradient(circle at 12% 90%, rgba(255, 128, 102, .06), transparent 20%);
}

.gravity__inner {
  position: relative;
  display: grid;
  grid-template-columns: .83fr 1.17fr;
  align-items: center;
  gap: clamp(34px, 5vw, 78px);
  max-width: var(--wrap);
  min-height: 760px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 126px) var(--gut);
}

.gravity__copy { position: relative; z-index: 3; }

.gravity__eyebrow {
  margin: 0 0 19px;
  color: var(--coral);
  font-family: var(--font-hand);
  font-size: 23px;
  transform: rotate(-1deg);
}

.gravity__title {
  margin-bottom: 28px;
  color: var(--space-ink);
  font-size: clamp(42px, 5.6vw, 69px);
  font-weight: 800;
  letter-spacing: -.045em;
}
.gravity__title span { color: #706B79; }

.gravity__lede {
  max-width: 43ch;
  margin: 0 0 30px;
  color: #C0BAC9;
  font-size: clamp(17px, 1.25vw, 19px);
}

.gravity__rules {
  display: grid;
  gap: 11px;
  max-width: 44ch;
  padding-top: 21px;
  border-top: 1px solid #2A2731;
}

.gravity__rules p {
  position: relative;
  margin: 0;
  padding-left: 20px;
  color: var(--space-muted);
  font-size: 15px;
}

.gravity__rules p::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 11px rgba(155, 124, 255, .8);
}
.gravity__rules p:last-child::before { background: var(--coral); box-shadow: none; }
.gravity__rules strong { color: #E7E2F0; }

.well {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  margin: 0;
  border: 1px solid #282431;
  border-radius: 30px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .025), transparent 45%),
    #0C0B11;
  box-shadow: 0 36px 90px rgba(0, 0, 0, .5);
  overflow: hidden;
  isolation: isolate;
}

.well__stars {
  position: absolute;
  inset: 0;
  opacity: .36;
  background-image:
    radial-gradient(circle at 16% 18%, #DDD5EF 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 8%, #DDD5EF 0 1px, transparent 1.5px),
    radial-gradient(circle at 59% 45%, #8E829C 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 63%, #DDD5EF 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 83%, #8E829C 0 1px, transparent 1.5px);
}

.well__orbit {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(164, 140, 210, .17);
  border-radius: 50%;
}
.well__orbit--far {
  width: 105%;
  aspect-ratio: 1;
  left: -48%;
  bottom: -52%;
}
.well__orbit--near {
  width: 74%;
  aspect-ratio: 1;
  left: -31%;
  bottom: -35%;
  border-color: rgba(185, 151, 255, .25);
}

.well__glow,
.well__hole {
  position: absolute;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 50%;
}

.well__glow {
  width: 50%;
  left: -18%;
  bottom: -24%;
  background: #8C67E8;
  box-shadow:
    0 0 26px #A889FF,
    0 0 75px rgba(128, 80, 255, .74);
  animation: gravity-breathe 4.8s ease-in-out infinite;
}

.well__hole {
  width: 43%;
  left: -14.5%;
  bottom: -20.5%;
  background: #000;
  box-shadow: inset -10px 10px 22px rgba(107, 65, 160, .24);
}

@keyframes gravity-breathe {
  0%, 100% { transform: scale(.97); opacity: .72; }
  50%      { transform: scale(1.04); opacity: 1; }
}

.space-task {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  min-width: max-content;
  max-width: none;
  height: 34px;
  padding: 0 10px 0 10px;
  color: #DED8E8;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid #3B3645;
  border-radius: 99px;
  background: #17151D;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
}

.space-task i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}

.space-task span,
.space-task small {
  flex: none;
}

.space-task small {
  color: #716B7B;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.space-task--today { top: 19%; left: 8%; transform: rotate(-5deg); }
.space-task--week  { top: 35%; left: 28%; transform: rotate(6deg); }
.space-task--month {
  left: 12%;
  bottom: 29%;
  opacity: .64;
  transform: rotate(-9deg) scale(.91);
}
.space-task--old {
  left: 2%;
  bottom: 17%;
  opacity: .42;
  transform: rotate(10deg) scale(.81);
}
.space-task--month i,
.space-task--old i { background: #786C87; }

.well__depth {
  position: absolute;
  z-index: 3;
  top: 43%;
  left: 2.5%;
  margin: 0;
  color: #5D5665;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: rotate(-73deg);
}
.well__depth span { margin-left: 6px; color: #8B7E99; font-size: 13px; }

.well__escape {
  position: absolute;
  z-index: 3;
  top: 43%;
  left: 34%;
  width: 36%;
  overflow: visible;
  color: #77698A;
}
.well__escape path {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 7;
}

.well__pull {
  position: absolute;
  z-index: 4;
  top: 62%;
  left: 48%;
  color: #7E748A;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: rotate(-14deg);
}

.sprint-pod {
  position: absolute;
  z-index: 5;
  top: 5%;
  right: 5%;
  width: 44%;
  padding: 20px;
  color: #201A29;
  border-radius: 22px 17px 24px 19px / 19px 24px 17px 22px;
  background: #F0ECFF;
  box-shadow: 0 18px 48px rgba(128, 100, 211, .21);
  transform: rotate(1.5deg);
}

.sprint-pod header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #6E6088;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sprint-pod header small { font-size: inherit; }
.sprint-pod > strong {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.7vw, 19px);
  letter-spacing: -.025em;
}
.sprint-pod ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sprint-pod li { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 650; }
.sprint-pod li i {
  display: grid;
  place-items: center;
  flex: 0 0 15px;
  height: 15px;
  color: #FFF;
  font-size: 8px;
  font-style: normal;
  border: 1px solid #A69CAF;
  border-radius: 4px;
}
.sprint-pod li.is-done { color: #938A9E; text-decoration: line-through; }
.sprint-pod li.is-done i { border-color: #2D2535; background: #2D2535; }

.sprint-pod__progress {
  height: 3px;
  margin-top: 15px;
  border-radius: 2px;
  background: #D5CFE0;
  overflow: hidden;
}
.sprint-pod__progress span {
  display: block;
  width: 60%;
  height: 100%;
  background: var(--coral);
}

.well figcaption {
  position: absolute;
  z-index: 6;
  right: 20px;
  bottom: 17px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8E8499;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.well figcaption i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 10px var(--violet);
}
.well figcaption span { flex: 1; height: 1px; background: #2A2630; }

/* Comic pass: the Black Hole is a sheet of black paper pinned to the same
   whiteboard, not a different product landing page. */
.gravity {
  --space: #1B1D24;
  --space-soft: #242730;
  --space-ink: #F7F7F2;
  --space-muted: #C4C7D0;
  --violet: var(--blue);
  --coral: var(--hi);
  padding: clamp(48px, 6vw, 80px) var(--gut);
  background: transparent;
}

.gravity::before { display: none; }

.gravity__inner {
  width: 100%;
  max-width: var(--wrap);
  min-height: 680px;
  padding: clamp(46px, 6vw, 78px);
  border: 3px solid var(--ink);
  border-radius: var(--r-b);
  background-color: var(--space);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0);
  background-size: 27px 27px;
  box-shadow: 8px 9px 0 rgba(22, 24, 29, .2);
  isolation: isolate;
}

.gravity__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9px 7px 8px 10px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 11px 19px 13px 22px / 18px 12px 21px 11px;
  transform: rotate(.18deg);
  pointer-events: none;
}

.gravity__inner::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: -13px;
  left: 9%;
  width: 78px;
  height: 27px;
  background: rgba(255, 210, 63, .76);
  border: 1px solid rgba(22, 24, 29, .2);
  transform: rotate(-3deg);
  clip-path: polygon(3% 8%, 98% 0, 95% 92%, 0 100%);
  pointer-events: none;
}

.gravity__eyebrow {
  color: #86B9FF;
  font-size: 25px;
  transform: rotate(-2.2deg);
}

.gravity__title {
  color: var(--space-ink);
  letter-spacing: -.04em;
}

.gravity__title span {
  position: relative;
  display: inline-block;
  color: var(--space-ink);
  z-index: 0;
}

.gravity__title span::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.07em;
  right: -.09em;
  bottom: .06em;
  height: .42em;
  border-radius: 8px 3px 7px 4px;
  background: rgba(43, 92, 230, .7);
  transform: rotate(-1.3deg);
}

.gravity__lede { color: #E0E1E6; }

.gravity__rules {
  border-top: 2px dashed rgba(255, 255, 255, .28);
}

.gravity__rules p {
  color: #C8CAD2;
  font-size: 15.5px;
}

.gravity__rules p::before {
  width: 9px;
  height: 9px;
  border: 2px solid #86B9FF;
  background: transparent;
  box-shadow: none;
  transform: rotate(-8deg);
}

.gravity__rules p:last-child::before {
  border-radius: 1px;
  border-color: var(--hi);
  background: transparent;
}

.gravity__rules strong { color: #FFF; }

.well {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.well__stars {
  opacity: .7;
  background-image:
    radial-gradient(circle at 16% 18%, #FFF 0 1.5px, transparent 2px),
    radial-gradient(circle at 38% 8%, #FFF 0 1px, transparent 1.5px),
    radial-gradient(circle at 59% 45%, #FFF 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 63%, #FFF 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 83%, #FFF 0 1px, transparent 1.5px);
}

.well__orbit {
  border-width: 2px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, .38);
}

.well__orbit--far { transform: rotate(-5deg) scaleY(.94); }
.well__orbit--near {
  border-style: solid;
  border-color: rgba(255, 255, 255, .52);
  transform: rotate(4deg) scaleX(.96);
}

.well__glow {
  left: 1%;
  bottom: 1%;
  border: 10px solid var(--hi);
  background: transparent;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .75),
    0 0 0 15px rgba(255, 210, 63, .13);
  transform: rotate(-3deg) scaleX(.96);
  animation: none;
}

.well__hole {
  left: 4.5%;
  bottom: 4.5%;
  border: 3px solid var(--ink);
  background: #030304;
  box-shadow: inset -9px 9px 0 rgba(255, 255, 255, .025);
  transform: rotate(2deg) scaleY(.97);
}

.well__hole-label {
  position: absolute;
  z-index: 5;
  left: 3%;
  bottom: 23%;
  color: #FFF;
  font-family: var(--font-hand);
  font-size: 18px;
  transform: rotate(-8deg);
}

.well__hole-label::after {
  content: "↙";
  display: inline-block;
  margin-left: 5px;
  color: var(--hi);
  font-size: 24px;
  transform: rotate(8deg);
}

.space-task {
  height: 35px;
  padding: 0 14px 0 12px;
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 17px;
  font-weight: 650;
  border: 2px solid var(--ink);
  border-radius: 3px 7px 4px 8px;
  background: var(--hi);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
}

.space-task:nth-of-type(even) { border-radius: 7px 3px 8px 4px; }
.space-task i { background: var(--red); }
.space-task small {
  color: rgba(22, 24, 29, .58);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
}
.space-task--week { background: #BFE3FF; }
.space-task--month { background: #C8EBD4; }
.space-task--old { background: #FFC9C4; }
.space-task--month i,
.space-task--old i { background: var(--ink-soft); }

.well__depth {
  color: rgba(255, 255, 255, .7);
  font-family: var(--font-hand);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.well__depth span { color: var(--hi); font-size: 19px; }

.well__escape { color: #86B9FF; }
.well__escape path {
  stroke-width: 3;
  stroke-dasharray: none;
}

.well__pull {
  color: #BFE3FF;
  font-family: var(--font-hand);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.sprint-pod {
  padding: 20px;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-a);
  background: var(--paper);
  box-shadow: 5px 6px 0 rgba(0, 0, 0, .28);
  transform: rotate(2.2deg);
}

.sprint-pod::after {
  content: "";
  position: absolute;
  inset: -5px -4px -4px -5px;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: var(--r-b);
  transform: rotate(-1.1deg);
  pointer-events: none;
}

.sprint-pod__light {
  position: absolute;
  top: -31px;
  right: 4px;
  color: var(--hi);
  font-family: var(--font-hand);
  font-size: 20px;
  font-weight: 700;
  transform: rotate(5deg);
}

.sprint-pod header {
  color: var(--blue);
  font-family: var(--font-hand);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.sprint-pod > strong { font-size: clamp(15px, 1.7vw, 20px); }

.sprint-pod li i {
  border-width: 2px;
  border-color: var(--ink);
  border-radius: 2px 4px 3px 5px;
}

.sprint-pod li.is-done i {
  border-color: var(--green);
  background: var(--green);
}

.sprint-pod__progress {
  height: 6px;
  border: 1.5px solid var(--ink);
  border-radius: 5px 2px 4px 3px;
  background: transparent;
}

.sprint-pod__progress span { background: var(--blue); }

.well figcaption {
  color: rgba(255, 255, 255, .72);
  font-family: var(--font-hand);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.well figcaption i {
  width: 8px;
  height: 8px;
  border: 2px solid var(--hi);
  background: transparent;
  box-shadow: none;
}

.well figcaption span {
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .38) 0 8px, transparent 8px 14px);
}

/* Four tasks wait in one set of concentric circles, then travel to the sprint. */
.well__stars,
.well__orbit--far,
.well__depth,
.well figcaption {
  display: none;
}

.well__orbit--near {
  width: 82%;
  left: 0;
  bottom: 0;
  opacity: .62;
  transform: none;
}

.well__glow {
  width: 74%;
  left: 4%;
  bottom: 4%;
  transform: none;
}

.well__hole {
  width: 66%;
  left: 8%;
  bottom: 8%;
  transform: none;
}

.well__task-field {
  position: absolute;
  z-index: 4;
  left: 8%;
  bottom: 8%;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.well__orbit--near,
.well__glow,
.well__hole,
.well__task-field,
.well__hole-label {
  animation: black-hole-hover 6s ease-in-out infinite;
}

@keyframes black-hole-hover {
  0%, 100% { translate: 0 0; }
  50%      { translate: 3px -4px; }
}

.space-task--today,
.space-task--week,
.space-task--month,
.space-task--old {
  bottom: auto;
  opacity: .58;
  filter: grayscale(.76) brightness(.72);
  animation: hole-drift 3.6s ease-in-out infinite;
  margin-left: var(--repel-x, 0px);
  margin-top: var(--repel-y, 0px);
  transition:
    filter .35s ease,
    opacity .35s ease,
    margin-left .18s ease-out,
    margin-top .18s ease-out;
}

.space-task--today { top: 18%; left: 13%; transform: rotate(-3deg) scale(.84); }
.space-task--week  { top: 34%; left: 46%; transform: rotate(2deg) scale(.82); animation-delay: -.9s; }
.space-task--month { top: 52%; left: 15%; transform: rotate(-2deg) scale(.8); animation-delay: -1.8s; }
.space-task--old   { top: 70%; left: 38%; transform: rotate(3deg) scale(.78); animation-delay: -2.7s; }

.space-task--aged {
  z-index: 2;
  bottom: auto;
  color: #B9B9B9;
  border-color: #4C4C50;
  background: #4A4A4E;
  box-shadow: none;
  filter: grayscale(1);
  opacity: .4;
  animation: hole-drift 4.4s ease-in-out infinite;
  margin-left: var(--repel-x, 0px);
  margin-top: var(--repel-y, 0px);
  transition: margin-left .18s ease-out, margin-top .18s ease-out;
}

.space-task--aged i { background: #77777D; }
.space-task--aged small { color: #98989E; }

.space-task--aged-one {
  top: 9%;
  left: 34%;
  transform: rotate(4deg) scale(.72);
  z-index: 3;
  background: #898A8F;
  opacity: .57;
}

.space-task--aged-two {
  top: 22%;
  left: 5%;
  transform: rotate(-3deg) scale(.68);
  background: #55565B;
  opacity: .43;
  animation-delay: -1.1s;
}

.space-task--aged-three {
  top: 30%;
  left: 52%;
  transform: rotate(5deg) scale(.64);
  z-index: 1;
  background: #38393E;
  opacity: .32;
  animation-delay: -2.2s;
}

.space-task--aged-four {
  top: 42%;
  left: 27%;
  transform: rotate(-4deg) scale(.6);
  background: #222328;
  opacity: .2;
  animation-delay: -3.3s;
}

.space-task--aged-five {
  top: 48%;
  left: 44%;
  transform: rotate(2deg) scale(.69);
  z-index: 3;
  background: #68696E;
  opacity: .48;
  animation-delay: -1.7s;
}

.space-task--aged-six {
  top: 58%;
  left: 1%;
  transform: rotate(-5deg) scale(.62);
  background: #292A2F;
  opacity: .24;
  animation-delay: -2.8s;
}

.space-task--aged-seven {
  top: 63%;
  left: 50%;
  transform: rotate(4deg) scale(.66);
  background: #44454A;
  opacity: .34;
  animation-delay: -.5s;
}

.space-task--aged-eight {
  top: 74%;
  left: 20%;
  transform: rotate(-2deg) scale(.57);
  z-index: 1;
  background: #1D1E22;
  opacity: .17;
  animation-delay: -3.8s;
}

.space-task--aged-nine {
  top: 80%;
  left: 42%;
  transform: rotate(5deg) scale(.63);
  background: #33343A;
  opacity: .28;
  animation-delay: -2s;
}

.space-task.is-travelling {
  z-index: 12;
  opacity: 1;
  filter: none;
}
.space-task--traveller {
  z-index: 12;
  margin: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  animation: none !important;
  pointer-events: none;
}
.space-task.is-departing { visibility: hidden; }
.space-task.is-delivered { visibility: hidden; }

@keyframes hole-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 5px -4px; }
}

.well__escape {
  top: 36%;
  left: 52%;
  width: 27%;
  opacity: .78;
}

.well__hole-label {
  top: 5%;
  left: 4%;
  bottom: auto;
  white-space: nowrap;
}

.well__hole-label::after {
  content: none;
}

.well__hole-arrow {
  position: absolute;
  z-index: 6;
  top: .25em;
  left: calc(100% + 7px);
  bottom: auto;
  width: 104px;
  overflow: visible;
  color: var(--hi);
  transform: rotate(3deg);
}

.well__hole-arrow path {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.well__pull {
  top: 47%;
  left: 59%;
  font-size: 13px;
  white-space: nowrap;
  transform: rotate(-8deg);
}

.js .sprint-arrival {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .35s ease, transform .35s ease;
}

.js .sprint-arrival.is-added {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.sprint-arrival input {
  appearance: none;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 2px 4px 3px 5px;
  background: transparent;
  cursor: pointer;
}

.sprint-arrival input:checked {
  border-color: var(--green);
  background: var(--green);
}

.sprint-arrival input:checked::after {
  content: "✓";
  display: block;
  color: #FFF;
  font-size: 10px;
  font-weight: 800;
  line-height: 11px;
  text-align: center;
}

.sprint-arrival input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.sprint-arrival.is-complete {
  color: #938A9E;
  text-decoration: line-through;
}

.sprint-pod {
  animation: sprint-hover 5.4s ease-in-out infinite;
}

@keyframes sprint-hover {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}

.js .sprint-pod__progress span {
  width: 0;
  transition: width .4s ease;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--gut);
}

.section__head { max-width: 60ch; margin-bottom: clamp(34px, 4vw, 54px); }

.section__title {
  font-size: clamp(31px, 3.7vw, 47px);
  font-weight: 700;
  letter-spacing: -.032em;
  margin-bottom: 14px;
}

.section__sub { margin: 0; color: #4A4F59; max-width: 52ch; }

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: clamp(26px, 3vw, 38px);
}

.card {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-a);
  padding: 26px 24px 28px;
  box-shadow: 4px 5px 0 rgba(22, 24, 29, .13);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:nth-child(1) { transform: rotate(-.5deg); }
.card:nth-child(3) { transform: rotate(.6deg); }
.card:hover {
  transform: translateY(-5px) rotate(0deg);
  box-shadow: 7px 9px 0 rgba(22, 24, 29, .16);
}

.card__doodle {
  display: block;
  width: 76px;
  height: 54px;
  margin: -3px 0 15px -4px;
  color: var(--blue);
  transform: rotate(-1.5deg);
}
.card:nth-child(2) .card__doodle { transform: rotate(1deg); }
.card:nth-child(3) .card__doodle { transform: rotate(-.5deg); }
.card__doodle svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.card__doodle .g-ln {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card__doodle .g-ln--soft {
  stroke-width: 1.7;
  opacity: .48;
}
.card__doodle .g-dot { fill: currentColor; }

.card__title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.card__body { margin: 0; font-size: 16px; color: #3B4048; }

/* --- public progress --- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
}

.split__copy { min-width: 0; }

.section__title--left { margin-bottom: 16px; }

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

.ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 9px;
  font-size: 16px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 13px;
  height: 8px;
  border-left: 2.5px solid var(--green);
  border-bottom: 2.5px solid var(--green);
  transform: rotate(-46deg);
  border-radius: 1px;
}

.note--crowd { margin-top: 22px; transform: rotate(-1deg); }

.share {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-a);
  padding: 20px 22px 22px;
  margin: 0;
  box-shadow: 6px 7px 0 rgba(22, 24, 29, .13);
  transform: rotate(.7deg);
}

.share__url {
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: .01em;
  color: #4A4F59;
  background: var(--board);
  border: 2px solid var(--ink);
  border-radius: 40px;
  padding: 6px 14px;
  display: inline-block;
  margin-bottom: 16px;
}

.share__chart svg { display: block; width: 100%; height: auto; }

.chart__ideal {
  stroke: #C3C9D6;
  stroke-width: 2.5;
  stroke-dasharray: 7 7;
  stroke-linecap: round;
}

.chart__real {
  stroke: var(--blue);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.is-in .chart__real { animation: burn 1.5s .2s ease-out forwards; }
@keyframes burn { to { stroke-dashoffset: 0; } }

.chart__dot { fill: var(--blue); opacity: 0; }
.is-in .chart__dot { animation: pop .3s 1.5s ease-out forwards; }
@keyframes pop { to { opacity: 1; } }

.share__stats {
  display: flex;
  gap: 22px;
  font-size: 15px;
  color: #4A4F59;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 2px dashed rgba(22, 24, 29, .18);
}
.share__stats strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}

/* The people watching. */
.crowd { display: flex; gap: 4px; margin: 18px 0 0; padding: 0; list-style: none; }

.crowd li {
  width: 20px;
  animation: peek 2.6s ease-in-out infinite;
}
.crowd li:nth-child(2) { animation-delay: .32s; }
.crowd li:nth-child(3) { animation-delay: .64s; }
.crowd li:nth-child(4) { animation-delay: .96s; }
.crowd li:nth-child(5) { animation-delay: 1.28s; }

.crowd svg {
  display: block;
  width: 100%;
  stroke: var(--ink-soft);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes peek {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* --------------------------------------------------------------------------
   Finish line
   -------------------------------------------------------------------------- */

.finish {
  /* Figure width tracks garden width (~23.5%) so the cast lands in the pond.
     Use vw here — multiplying a min()/clamp() custom property breaks height. */
  --finish-garden: clamp(300px, 44vw, 520px);
  --finish-fw: clamp(70px, 10.3vw, 118px);
  padding: clamp(56px, 7vw, 100px) 0 0;
}

.finish__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gut);
  text-align: center;
}

.finish__title {
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 800;
  letter-spacing: -.038em;
  margin-bottom: 16px;
}

.finish__scene {
  --fw: var(--finish-fw);
  --garden: var(--finish-garden);
  position: relative;
  width: 100%;
  height: 300px;
  margin-top: 46px;
  overflow: visible;
}

.finish__runner {
  position: absolute;
  z-index: 3;
  bottom: calc(26px - var(--fw) * .111);
  left: calc(-1 * var(--fw));
  width: var(--fw);
}

.finish__rod {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: calc(var(--fw) * 2.08);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

.finish__rod-stick,
.finish__rod-line,
.finish__ripple {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finish__rod-stick { stroke: #725D46; stroke-width: 3; }

.finish__rod-line {
  stroke: #68727E;
  stroke-width: 1.4;
  stroke-dasharray: 100 0;
  stroke-dashoffset: 100;
}

.finish__ripple {
  stroke: #79AAB5;
  stroke-width: 1.6;
  opacity: 0;
}

.finish__scene.is-settled .finish__rod {
  opacity: 1;
  transition: opacity .2s .45s ease;
}

.finish__scene.is-settled .finish__rod-line {
  stroke-dashoffset: 0;
  animation: finish-cast .8s .55s ease-out both;
  transition: stroke-dasharray .55s cubic-bezier(.25, .8, .2, 1);
}

.finish__scene.is-settled .finish__ripple {
  animation: finish-ripple 2.5s 1.25s ease-out infinite;
}

.finish__catch {
  fill: #E07A3D;
  stroke: none;
  opacity: 0;
  pointer-events: none;
  transform: translate(236px, 160px);
  transition: transform .55s cubic-bezier(.25, .8, .2, 1), opacity .18s ease;
}

.finish__catch-fish {
  transform: rotate(90deg);
  transform-origin: 0 0;
}

.finish__scene.is-settled:has(.finish__garden:hover) .finish__rod-line {
  animation: none;
  stroke-dasharray: 34 100;
  stroke-dashoffset: 0;
}

.finish__scene.is-settled:has(.finish__garden:hover) .finish__catch {
  opacity: 1;
  transform: translate(232px, 97px);
}

.finish__scene.is-settled:has(.finish__garden:hover) .finish__catch-fish {
  animation: fish-hang 1.05s ease-in-out infinite;
}

.finish__scene.is-settled:has(.finish__garden:hover) .finish__ripple {
  animation: none;
  opacity: 0;
}

.finish__scene.is-settled:has(.finish__garden:hover) .garden__fish--a {
  animation: none;
  opacity: 0;
}

@keyframes finish-cast { to { stroke-dashoffset: 0; } }
@keyframes finish-ripple {
  0%, 100% { opacity: 0; transform: scaleX(.65); transform-origin: 235px 174px; }
  35%      { opacity: .75; transform: scaleX(1); }
}

@keyframes fish-hang {
  0%, 100% { transform: rotate(78deg); }
  50%      { transform: rotate(108deg); }
}

.finish__scene.is-dashing .finish__runner {
  animation: finish-cross 3.35s cubic-bezier(.3, .2, .45, 1) forwards;
}

.finish__scene.is-settled .finish__runner {
  left: calc(100% - var(--garden) - var(--gut) + var(--garden) * .16);
  animation: none;
}

@keyframes finish-cross {
  from { left: calc(-1 * var(--fw)); }
  to   { left: calc(100% - var(--garden) - var(--gut) + var(--garden) * .16); }
}

.finish__track {
  width: calc(100% - var(--finish-garden) - var(--gut));
  height: 2px;
  margin: -26px 0 0;
  background-image: repeating-linear-gradient(90deg,
    rgba(22, 24, 29, .16) 0 11px, transparent 11px 20px);
}

.finish:has(.finish__scene.is-dashing) .finish__track,
.finish:has(.finish__scene.is-near-garden) .finish__track {
  animation: finish-treadmill .46s linear infinite;
}

.finish:has(.finish__scene.is-near-garden) .finish__track {
  animation-play-state: paused;
}

@keyframes finish-treadmill { to { background-position-x: -20px; } }

.finish__garden {
  position: absolute;
  z-index: 1;
  right: var(--gut);
  bottom: 20px;
  width: var(--garden);
  overflow: visible;
  pointer-events: auto;
  cursor: pointer;
}

.garden__hill {
  fill: #DCEBDD;
  stroke: #9ABC9E;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.garden__hill--far {
  fill: #EEF5EE;
  stroke: none;
}

.garden__trunk,
.garden__bench {
  fill: none;
  stroke: #89967C;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.garden__canopy {
  fill: #C7DFC9;
  stroke: #86AD8A;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.garden__tree--right { opacity: .82; }
.garden__edge-growth { opacity: .72; }

.garden__fruit {
  fill: #D7A8A3;
  stroke: none;
}

.garden__fruit--gold { fill: #E6C35A; }

.garden__birds {
  fill: none;
  stroke: #A7AEBB;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.garden__birds path:nth-child(1) { animation: bird-drift 9s ease-in-out infinite; }
.garden__birds path:nth-child(2) { animation: bird-drift 11s 1.2s ease-in-out infinite reverse; }
.garden__birds path:nth-child(3) { animation: bird-drift 8s .6s ease-in-out infinite; }

@keyframes bird-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(10px, -4px); }
}

.garden__pond {
  fill: #DCECF0;
  stroke: #9EBFC7;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.garden__fish {
  fill: #7AA8B0;
  stroke: none;
}

.garden__fish--a { animation: fish-a 7.4s ease-in-out infinite; }
.garden__fish--b { animation: fish-b 9.2s ease-in-out infinite; }

@keyframes fish-a {
  0%   { transform: translate(158px, 180px) scale(1, 1); opacity: .7; }
  18%  { transform: translate(176px, 183px) scale(1, .32); opacity: .12; }
  36%  { transform: translate(196px, 179px) scale(-1, 1); opacity: .65; }
  54%  { transform: translate(178px, 184px) scale(-1, .26); opacity: .08; }
  72%  { transform: translate(154px, 181px) scale(1, 1); opacity: .7; }
  86%  { transform: translate(148px, 185px) scale(1, .28); opacity: .1; }
  100% { transform: translate(158px, 180px) scale(1, 1); opacity: .7; }
}

@keyframes fish-b {
  0%   { transform: translate(214px, 188px) scale(-1, 1); opacity: .6; }
  22%  { transform: translate(198px, 191px) scale(-1, .3); opacity: .1; }
  44%  { transform: translate(176px, 186px) scale(1, 1); opacity: .55; }
  66%  { transform: translate(192px, 190px) scale(1, .24); opacity: .08; }
  88%  { transform: translate(220px, 187px) scale(-1, 1); opacity: .6; }
  100% { transform: translate(214px, 188px) scale(-1, 1); opacity: .6; }
}

.garden__bench { stroke: #B9AA9C; stroke-width: 2; }

.garden__bench-seat {
  fill: #E6D2B0;
  stroke: #B9AA9C;
}

.garden-cat {
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 0;
  transition: opacity .18s ease;
}

.garden-cat__line,
.garden-cat__moustache {
  fill: none;
  stroke: #424943;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.garden-cat__line--far {
  stroke-width: 1.75;
  opacity: .58;
}

.garden-cat__body { stroke-width: 2.6; }
.garden-cat__head { fill: var(--paper); }
.garden-cat__moustache { stroke-width: 1.45; }

.garden-cat__leg,
.garden-cat__tail,
.garden-cat__sit-tail {
  transform-origin: 0 0;
}

.garden-cat__sit-shape { display: none; }

.garden-cat.is-present .garden-cat__tail {
  animation: garden-cat-tail 1.4s ease-in-out infinite;
}

.garden-cat.is-walking .garden-cat__bob {
  animation: garden-cat-bob .62s ease-in-out infinite;
}

.garden-cat.is-walking :is(.garden-cat__leg--near-a, .garden-cat__leg--far-b) {
  animation: garden-cat-step .62s ease-in-out infinite;
}

.garden-cat.is-walking :is(.garden-cat__leg--near-b, .garden-cat__leg--far-a) {
  animation: garden-cat-step .62s -.31s ease-in-out infinite;
}

.garden-cat.is-jumping .garden-cat__bob {
  transform: rotate(-5deg);
  transform-origin: 0 -20px;
}

.garden-cat.is-jumping :is(.garden-cat__leg--near-a, .garden-cat__leg--far-b) {
  transform: rotate(-18deg);
}

.garden-cat.is-jumping :is(.garden-cat__leg--near-b, .garden-cat__leg--far-a) {
  transform: rotate(22deg);
}

.garden-cat.is-sitting .garden-cat__bob { display: none; }
.garden-cat.is-sitting .garden-cat__sit-shape { display: block; }

.garden-cat.is-sitting .garden-cat__sit-tail {
  animation: garden-cat-tail 1.7s ease-in-out infinite;
}

@keyframes garden-cat-step {
  0%, 100% { transform: rotate(12deg); }
  50%      { transform: rotate(-14deg); }
}

@keyframes garden-cat-tail {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(8deg); }
}

@keyframes garden-cat-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.4px); }
}

.note--done {
  position: absolute;
  top: 12px;
  right: calc(var(--gut) + var(--garden) + 12px);
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ink);
  transform: rotate(2deg);
  opacity: 0;
  transition: opacity .6s ease;
}

.finish__scene.is-settled .note--done { opacity: 1; }

/* At the pond, Aboo stands still and brings both hands to the fishing rod. */
.sm--finish.is-settled .sm__bob,
.sm--finish.is-settled .sm__torso,
.sm--finish.is-settled .sm__thigh,
.sm--finish.is-settled .sm__shin,
.sm--finish.is-settled .sm__arm,
.sm--finish.is-settled .sm__fore {
  animation: none !important;
}

.sm--finish.is-settled .sm__torso    { transform: rotate(10deg) !important; }
.sm--finish.is-settled .sm__thigh--f { transform: rotate(-7deg) !important; }
.sm--finish.is-settled .sm__shin--f  { transform: rotate(8deg) !important; }
.sm--finish.is-settled .sm__thigh--b { transform: rotate(10deg) !important; }
.sm--finish.is-settled .sm__shin--b  { transform: rotate(-7deg) !important; }
.sm--finish.is-settled .sm__arm--f   { transform: rotate(-76deg) !important; }
.sm--finish.is-settled .sm__fore--f  { transform: rotate(24deg) !important; }
.sm--finish.is-settled .sm__arm--b   { transform: rotate(-62deg) !important; }
.sm--finish.is-settled .sm__fore--b  { transform: rotate(18deg) !important; }

.sm--finish .sm__thigh,
.sm--finish .sm__shin,
.sm--finish .sm__arm,
.sm--finish .sm__fore,
.sm--finish .sm__torso {
  transition: transform .65s cubic-bezier(.2, .7, .3, 1);
}

.sm--finish.is-running .sm__thigh,
.sm--finish.is-running .sm__shin,
.sm--finish.is-running .sm__arm,
.sm--finish.is-running .sm__fore,
.sm--finish.is-running .sm__torso {
  transition: none;
}

.sm--finish.is-settled .sm__bob {
  transform: translateY(0);
}

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

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 28px var(--gut) 48px;
}

.foot__links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 15px; }

.foot__note {
  width: 100%;
  margin: 0;
  font-family: var(--font-hand);
  font-size: 19px;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Narrower screens
   -------------------------------------------------------------------------- */

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; }
  .hero__stage { max-width: 460px; }

  .gravity__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .gravity__copy { max-width: 620px; }
  .well { max-width: 620px; }

  .split { grid-template-columns: 1fr; }
  .aboo-morph { justify-self: start; }
}

@media (max-width: 620px) {
  .nav { flex-wrap: wrap; }
  .nav__links {
    order: 3;
    width: 100%;
    gap: 18px;
    padding-top: 2px;
  }

  .gravity__inner { padding-block: 68px; }
  .gravity__title { font-size: clamp(39px, 12vw, 54px); }
  .well {
    width: calc(100% + 16px);
    margin-left: -8px;
    border-radius: 22px;
  }
  .sprint-pod { width: 51%; padding: 15px; }
  .sprint-pod li { font-size: 8px; }
  .sprint-pod__light { top: -25px; font-size: 16px; }
  .space-task { height: 29px; padding: 0 12px 0 10px; font-size: 9px; }
  .space-task--week { left: 22%; }
  .well__hole-label {
    top: 4%;
    bottom: auto;
    font-size: 13px;
  }
  .well__hole-label::after { font-size: 18px; }
  .well__hole-arrow {
    top: .2em;
    left: calc(100% + 5px);
    bottom: auto;
    width: 74px;
  }
  .well__pull { display: none; }

  /* Stacked narrow, the caption already sits right above him, so the arrow
     has nothing to explain and only collides with his head. */
  .stage__arrow { display: none; }
  .stage { padding-top: 68px; }

  .hero__title { font-size: clamp(36px, 10vw, 48px); }

  /* Concrete sizes only — derived calcs from min() garden vars collapse height. */
  .finish {
    --finish-garden: min(300px, calc(100% - 40px));
    --finish-fw: 62px;
    padding-bottom: 12px;
  }
  .finish__scene {
    height: 228px;
    margin-top: 28px;
  }
  .finish__garden {
    right: 8px;
    bottom: 24px;
  }
  .finish__runner {
    bottom: calc(34px - var(--fw) * .111);
  }
  .finish__track {
    width: calc(100% - var(--finish-garden) - 8px);
    margin-top: -8px;
  }
  .finish__scene.is-settled .finish__runner {
    left: calc(100% - var(--garden) - 8px + var(--garden) * .15);
  }
  @keyframes finish-cross {
    from { left: calc(-1 * var(--fw)); }
    to   { left: calc(100% - var(--garden) - 8px + var(--garden) * .15); }
  }
  .note--done {
    top: 4px;
    right: auto;
    left: calc(100% - var(--garden) + 4px);
    z-index: 2;
    max-width: 10em;
    font-size: 15px;
    line-height: 1.2;
  }
  .sm--finish { --sw: 7; }
}

/* --------------------------------------------------------------------------
   Reduced motion: keep the drawing, drop the running
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .sm__bob, .sm__torso, .sm__thigh, .sm__shin, .sm__arm, .sm__fore,
  .stage__track, .finish__track, .finish__runner, .dust, .flyby__note, .crowd li,
  .hl::after, .stage__arrow path, .chart__real, .chart__dot, .well__glow,
  .space-task, .well__orbit--near, .well__hole, .well__task-field,
  .well__hole-label, .sprint-pod,
  .finish__rod-line, .finish__ripple, .garden__fish, .garden__birds path,
  .finish__catch, .finish__catch-fish,
  .garden-cat__bob, .garden-cat__leg, .garden-cat__tail, .garden-cat__sit-tail {
    animation: none !important;
  }

  .finish__rod-line { stroke-dashoffset: 0; }

  .finish__scene.is-settled:has(.finish__garden:hover) .finish__catch {
    opacity: 1;
    transform: translate(232px, 97px);
  }
  .finish__scene.is-settled:has(.finish__garden:hover) .finish__catch-fish {
    transform: rotate(90deg);
  }
  .finish__ripple { opacity: .45; }
  .garden__fish--a { transform: translate(158px, 180px); opacity: .55; }
  .garden__fish--b { transform: translate(214px, 188px) scaleX(-1); opacity: .45; }

  .dust { display: none; }

  /* Standing still, three cards just pile onto him. Keep one, parked in the
     clear band above his head and right of the caption. */
  .flyby { inset: 0 0 auto 0; height: 58px; }
  .flyby__note--a { left: 66%; opacity: 1; transform: rotate(-4deg); }
  .flyby__note--b,
  .flyby__note--c,
  .flyby__note--d,
  .flyby__note--e,
  .flyby__note--f,
  .flyby__note--g { display: none; }

  .stage__arrow path { stroke-dashoffset: 0; }
  .chart__real { stroke-dashoffset: 0; }
  .chart__dot { opacity: 1; }

  .js [data-reveal] { transition: none; opacity: 1; transform: none; }

  .nav .btn::before { transition: none; }
}

/* --------------------------------------------------------------------------
   Aboo cast — eight hand-drawn characters, one conversational stage
   -------------------------------------------------------------------------- */

.aboo-split .lede { margin-bottom: 22px; }

.aboo-morph {
  justify-self: end;
  width: min(100%, 430px);
  margin: 0;
}

.aboo-morph__card {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  background:
    linear-gradient(104deg, transparent 0 49.5%, rgba(22, 24, 29, .035) 50%, transparent 50.5%),
    var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-b);
  box-shadow: 6px 7px 0 rgba(22, 24, 29, .13);
  transform: rotate(.35deg);
}

.aboo-morph__card::before {
  content: "";
  position: absolute;
  right: -26px;
  bottom: 46px;
  width: 220px;
  height: 90px;
  border: 2px solid rgba(43, 92, 230, .14);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.aboo-morph__speech {
  position: absolute;
  z-index: 4;
  top: 20px;
  left: 50%;
  width: calc(100% - 44px);
  max-width: 350px;
  min-height: 104px;
  padding: 13px 15px 15px;
  background: #FFF7C7;
  border: 2.5px solid var(--ink);
  border-radius: 14px 11px 15px 9px / 11px 16px 10px 15px;
  box-shadow: 3px 4px 0 rgba(22, 24, 29, .10);
  transform: translateX(-50%) rotate(-1.2deg);
}

.aboo-morph__speech::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 22%;
  width: 22px;
  height: 19px;
  background: #FFF7C7;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: skewX(-31deg) rotate(24deg);
}

.aboo-morph__speech-label {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-hand);
  font-size: 17px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
}

.aboo-morph__speech p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 650;
  letter-spacing: -.018em;
  line-height: 1.28;
}

.aboo-morph__speech.is-speaking p {
  animation: aboo-speech-in .38s ease both;
}

@keyframes aboo-speech-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.aboo-morph__stage {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 44px;
  width: min(64%, 270px);
  aspect-ratio: 240 / 280;
  transform: translateX(50%);
}

.aboo-morph__form {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  filter: blur(2px);
  transform: translateX(16px) scale(.96);
  transition: opacity .42s ease, filter .42s ease, transform .42s ease;
  pointer-events: none;
}

.aboo-morph__form.is-active {
  opacity: 1;
  filter: none;
  transform: translateX(0) scale(1);
}

.aboo-morph__footer {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 0;
  left: 18px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 13px;
  align-items: center;
  min-height: 50px;
  border-top: 2px dashed rgba(22, 24, 29, .25);
}

.aboo-morph__caption {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
}

.aboo-morph__steps {
  display: flex;
  gap: 5px;
  align-items: center;
}

.aboo-morph__steps i {
  display: block;
  width: 6px;
  height: 6px;
  background: #C7CCD5;
  border-radius: 50%;
  transition: width .22s ease, background-color .22s ease;
}

.aboo-morph__steps i.is-active {
  width: 16px;
  background: var(--blue);
  border-radius: 99px;
}

.aboo-morph__count {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: #727987;
  letter-spacing: .04em;
}

/* Shared marker language for the standalone character drawings. */
.aboo-character {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  --character-ink: var(--ink);
  --character-accent: var(--blue);
  --character-paper: var(--paper);
}

.aboo-character__shadow {
  fill: rgba(22, 24, 29, .10);
}

.aboo-character__line,
.aboo-character__hair-line {
  fill: none;
  stroke: var(--character-ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aboo-character__line--far { stroke-width: 4; opacity: .72; }
.aboo-character__line--fine { stroke-width: 3.2; }
.aboo-character__line--head { stroke-width: 5.5; }
.aboo-character__head-fill { fill: var(--character-paper); }

.aboo-character__accent-line,
.aboo-character__voice-mark {
  fill: none;
  stroke: var(--character-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aboo-character__accent-line--fine { stroke-width: 3; }
.aboo-character__accent-fill { fill: var(--character-accent); }

.aboo-character__garment {
  fill: var(--outfit-main);
  stroke: var(--character-ink);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aboo-character__garment--dark { fill: var(--outfit-dark); }
.aboo-character__garment--light { fill: var(--outfit-light); }
.aboo-character__garment--accent { fill: var(--character-accent); }

.aboo-character__garment-line {
  fill: none;
  stroke: var(--outfit-detail);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aboo-character__garment-line--light {
  stroke: var(--outfit-light);
}

.aboo-character__talk-arm {
  transform-origin: 0 0;
}

.aboo-character__voice-mark {
  opacity: 0;
  stroke-width: 4.5;
}

.aboo-morph__form.is-active .aboo-character__bob {
  animation: aboo-character-bob 1.8s ease-in-out infinite;
}

.aboo-morph__form.is-active .aboo-character__bob--soft {
  animation-duration: 2.1s;
}

.aboo-morph__form.is-active .aboo-character__talk-arm {
  animation: aboo-character-talk 1.7s ease-in-out infinite;
}

.aboo-morph__form.is-active .aboo-character__talk-arm--ninja {
  animation-name: aboo-character-ninja-talk;
}

.aboo-morph__form.is-active .aboo-character__talk-arm--girl {
  animation-duration: 1.55s;
}

.aboo-morph__form.is-active .aboo-character__talk-arm--jilbab {
  animation-name: aboo-character-soft-talk;
  animation-duration: 2s;
}

.aboo-morph__form.is-active .aboo-character__loose-detail {
  transform-box: fill-box;
  transform-origin: left center;
  animation: aboo-character-detail 1.8s ease-in-out infinite;
}

.aboo-morph__form.is-active .aboo-character__loose-detail--hair {
  transform-origin: center center;
  animation-duration: 2s;
}

.aboo-morph__form.is-active .aboo-character__voice-mark {
  animation: aboo-character-voice 1.65s ease-out infinite;
}

.aboo-morph__form.is-active .aboo-character__voice-mark--two { animation-delay: .16s; }
.aboo-morph__form.is-active .aboo-character__voice-mark--three { animation-delay: .32s; }

.aboo-morph__form.is-active .aboo-character__vine {
  transform-origin: 29px 0;
  animation: aboo-character-vine 2.1s ease-in-out infinite;
}

@keyframes aboo-character-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45%      { transform: translateY(-3px) rotate(-.35deg); }
  70%      { transform: translateY(-1px) rotate(.25deg); }
}

@keyframes aboo-character-talk {
  0%, 100% { transform: rotate(-4deg); }
  30%      { transform: rotate(6deg); }
  54%      { transform: rotate(-1deg); }
  72%      { transform: rotate(4deg); }
}

@keyframes aboo-character-ninja-talk {
  0%, 100% { transform: rotate(-6deg); }
  35%      { transform: rotate(4deg); }
  58%      { transform: rotate(-3deg); }
}

@keyframes aboo-character-soft-talk {
  0%, 100% { transform: rotate(-3deg); }
  45%      { transform: rotate(4deg); }
  72%      { transform: rotate(1deg); }
}

@keyframes aboo-character-detail {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-2px); }
}

@keyframes aboo-character-voice {
  0%, 18%, 100% { opacity: 0; transform: translateX(-4px) scale(.85); }
  36%, 66%      { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes aboo-character-vine {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(2deg); }
}

/* Character-specific fabric palettes. The body proportions stay stick-thin;
   colour belongs to removable clothes, never to Aboo's blank face. */
.aboo-character--classic {
  --character-accent: var(--blue);
  --outfit-main: #5577D5;
  --outfit-dark: #2F477F;
  --outfit-light: #FFF0A3;
  --outfit-detail: #233866;
}

.aboo-character--ninja {
  --character-accent: var(--red);
  --outfit-main: #323640;
  --outfit-dark: #191C22;
  --outfit-light: #AEB8C9;
  --outfit-detail: #111318;
}

.aboo-character--tarzan {
  --character-accent: var(--green);
  --outfit-main: #B9793D;
  --outfit-dark: #72441F;
  --outfit-light: #E8C17B;
  --outfit-detail: #633B1D;
}

.aboo-character__vine,
.aboo-character__tarzan-hair {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aboo-character__vine {
  stroke: var(--green);
  stroke-width: 4;
}
.aboo-character__vine-leaf {
  fill: #BCE5C7;
  stroke: var(--green);
  stroke-width: 2.6;
  stroke-linejoin: round;
}
.aboo-character__tarzan-hair { stroke-width: 4; }

.aboo-character--girl {
  --character-accent: var(--red);
  --outfit-main: #E76A60;
  --outfit-dark: #526DB2;
  --outfit-light: #FFF0A7;
  --outfit-detail: #8D342F;
}

.aboo-character__hair-line { stroke-width: 3.5; }

.aboo-character--jilbab {
  --character-accent: #D49A22;
  --outfit-main: #6078BA;
  --outfit-dark: #425993;
  --outfit-light: #AFBEE5;
  --outfit-detail: #30457B;
}

.aboo-character--athletic {
  --character-accent: var(--green);
  --outfit-main: #31A776;
  --outfit-dark: #324E8B;
  --outfit-light: #FFE274;
  --outfit-detail: #176748;
}

.aboo-character--thobe {
  --character-accent: var(--blue);
  --outfit-main: #F1EBD9;
  --outfit-dark: #D1C4A6;
  --outfit-light: #FFFDF7;
  --outfit-detail: #756B58;
}

.aboo-character--builder {
  --character-accent: var(--red);
  --outfit-main: #F0C84A;
  --outfit-dark: #405B99;
  --outfit-light: #FFF1A0;
  --outfit-detail: #745D18;
}

.aboo-character__hem-motif {
  fill: none;
  stroke: #EAC76D;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 940px) {
  .aboo-morph {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .aboo-morph__card { min-height: 450px; }
  .aboo-morph__speech {
    top: 18px;
    left: 50%;
    width: calc(100% - 30px);
    min-height: 101px;
    padding: 12px 12px 13px;
  }
  .aboo-morph__stage {
    right: 50%;
    width: min(72%, 275px);
  }
  .aboo-morph__footer {
    right: 14px;
    left: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aboo-morph__form,
  .aboo-morph__form.is-active {
    filter: none;
    transition: none;
  }
  .aboo-character__bob,
  .aboo-character__talk-arm,
  .aboo-character__vine,
  .aboo-character__loose-detail,
  .aboo-character__voice-mark,
  .aboo-morph__speech p {
    animation: none !important;
  }
  .aboo-morph__form.is-active .aboo-character__voice-mark {
    opacity: .8;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Customise Aboo page
   -------------------------------------------------------------------------- */

.customise {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gut) clamp(72px, 9vw, 120px);
}

.customise__head {
  max-width: 42rem;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.customise__title {
  font-size: clamp(34px, 4.2vw, 48px);
  font-weight: 700;
  letter-spacing: -.032em;
  margin-bottom: 12px;
}

.customise__sub {
  margin: 0;
  color: #4A4F59;
  max-width: 48ch;
}

.customise__layout {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.customise__preview {
  position: sticky;
  top: 88px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-b);
  padding: 28px 20px 24px;
  text-align: center;
  box-shadow: 5px 6px 0 rgba(22, 24, 29, .12);
}

.customise__figure {
  position: relative;
  width: min(210px, 82%);
  aspect-ratio: 240 / 280;
  margin: 0 auto 14px;
}

.customise__preview-character {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(2px);
  transform: translateY(5px) scale(.97);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
  pointer-events: none;
}

.customise__preview-character.is-active {
  opacity: 1;
  filter: none;
  transform: translateY(0) scale(1);
}

.customise__preview-name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.customise__preview-mood {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 20px;
  color: var(--blue);
  line-height: 1.25;
}

.customise__form {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 34px);
}

.customise__field {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.customise__label {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 12px;
}

.customise__input {
  width: 100%;
  max-width: 320px;
  padding: 12px 14px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-a);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 12px;
}

.avatar-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin: 0;
  min-height: 142px;
  padding: 10px 8px 9px;
  overflow: hidden;
  background: var(--paper);
  border: 2.5px solid var(--ink-soft);
  border-radius: var(--r-a);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.avatar-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.avatar-opt:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.avatar-opt.is-selected,
.avatar-opt:has(input:checked) {
  border-color: var(--ink);
  box-shadow: 3px 4px 0 rgba(22, 24, 29, .14);
}

.avatar-opt:has(input:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.avatar-opt__frame {
  display: block;
  width: 76px;
  aspect-ratio: 240 / 280;
}

.avatar-opt__name {
  font-size: 13px;
  font-weight: 600;
  color: #3B4048;
  line-height: 1.2;
  text-align: center;
}

.behaviour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.behaviour-opt {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 5px;
  align-items: start;
  margin: 0;
  min-height: 102px;
  padding: 14px 15px 15px;
  background: var(--paper);
  border: 2.5px solid var(--ink-soft);
  border-radius: var(--r-a);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.behaviour-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.behaviour-opt:hover { border-color: var(--ink); }

.behaviour-opt:has(input:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.behaviour-opt.is-selected,
.behaviour-opt:has(input:checked) {
  border-color: var(--ink);
  box-shadow: 3px 4px 0 rgba(22, 24, 29, .14);
}

.behaviour-opt__icon {
  grid-row: 1 / span 2;
  display: block;
  width: 52px;
  height: 46px;
  align-self: center;
  transition: transform .16s ease;
}

.behaviour-opt:hover .behaviour-opt__icon {
  transform: rotate(-2deg) scale(1.04);
}

.behaviour-opt__icon svg,
.capability-card__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.behaviour-opt__icon--cheerful {
  --scribble-wash: #FFF0A7;
  --scribble-accent: var(--red);
}

.behaviour-opt__icon--calm {
  --scribble-wash: #DDE7FF;
  --scribble-accent: var(--blue);
}

.behaviour-opt__icon--straight {
  --scribble-wash: #DDF2E4;
  --scribble-accent: var(--blue);
}

.behaviour-opt__icon--soft {
  --scribble-wash: #F9DEE1;
  --scribble-accent: var(--red);
}

.scribble-icon__wash {
  fill: var(--scribble-wash, #E3E9F8);
}

.scribble-icon__line,
.scribble-icon__accent {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scribble-icon__accent {
  stroke: var(--scribble-accent, var(--blue));
  stroke-width: 3.6;
}

.behaviour-opt__title {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.behaviour-opt__body {
  grid-column: 2;
  font-size: 14px;
  color: #4A4F59;
  line-height: 1.45;
}

.customise__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

.customise__saved {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--green);
  line-height: 1.2;
}

/* Aboo capabilities — the permanent abilities underneath every chosen look. */
.aboo-capabilities {
  margin-top: clamp(76px, 10vw, 128px);
  padding-top: clamp(42px, 6vw, 68px);
  border-top: 2px dashed rgba(22, 24, 29, .24);
}

.aboo-capabilities__head {
  max-width: 650px;
  margin-bottom: clamp(28px, 4vw, 42px);
}

.aboo-capabilities__eyebrow {
  margin: 0 0 7px;
  font-family: var(--font-hand);
  font-size: 21px;
  font-weight: 700;
  color: var(--blue);
  transform: rotate(-1deg);
  transform-origin: left center;
}

.aboo-capabilities__title {
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 750;
  letter-spacing: -.035em;
}

.aboo-capabilities__lede {
  max-width: 56ch;
  margin: 0;
  color: #4A4F59;
  line-height: 1.65;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.capability-card {
  position: relative;
  min-height: 252px;
  padding: 22px 20px 24px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-a);
  box-shadow: 4px 5px 0 rgba(22, 24, 29, .10);
}

.capability-card:nth-child(1) { transform: rotate(-.55deg); }
.capability-card:nth-child(2) { transform: rotate(.4deg); }
.capability-card:nth-child(3) { transform: rotate(-.3deg); }
.capability-card:nth-child(4) { transform: rotate(.6deg); }

.capability-card__icon {
  display: block;
  width: 68px;
  height: 62px;
  margin-bottom: 17px;
}

.capability-card__icon--memory {
  --scribble-wash: #E1E8FB;
  --scribble-accent: var(--blue);
}

.capability-card__icon--tasks {
  --scribble-wash: #FFF1B0;
  --scribble-accent: var(--green);
}

.capability-card__icon--tools {
  --scribble-wash: #DDF1E3;
  --scribble-accent: var(--red);
}

.capability-card__icon--talks {
  --scribble-wash: #F8DDE1;
  --scribble-accent: var(--red);
}

.capability-card h3 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.18;
}

.capability-card p {
  margin: 0;
  color: #4A4F59;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .customise__layout { grid-template-columns: 1fr; }
  .customise__preview { position: static; max-width: 320px; }
}

@media (max-width: 560px) {
  .behaviour-grid { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 0; }
}

/* --------------------------------------------------------------------------
   Shared subpages (Pricing, Examples, Download)
   -------------------------------------------------------------------------- */

.nav__links a[aria-current="page"] {
  background-size: 100% 2px;
  font-weight: 600;
}

.subpage {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px var(--gut) 96px;
}

.subpage__head {
  max-width: 640px;
  margin-bottom: 40px;
}

.subpage__title {
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-bottom: 14px;
}

.subpage__sub {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  color: #3B4048;
  line-height: 1.55;
}

.subpage__note {
  margin: 36px 0 0;
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 880px;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 30px 34px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-a);
}

.price-card--aboo {
  background:
    linear-gradient(135deg, rgba(255, 210, 63, .22), transparent 48%),
    var(--paper);
}

.price-card__eyebrow {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--ink-soft);
  line-height: 1;
}

.price-card__name {
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.03em;
}

.price-card__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  margin: 4px 0 2px;
}

.price-card__figure {
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

.price-card__unit {
  font-size: 15px;
  color: #4A4F59;
}

.price-card__blurb {
  margin: 0;
  color: #3B4048;
  line-height: 1.55;
}

.price-card__list {
  margin: 4px 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.price-card__list li {
  position: relative;
  padding-left: 22px;
  color: #3B4048;
}

.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--hi);
  transform: rotate(-8deg);
}

.price-card .btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 720px) {
  .price-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Download
   -------------------------------------------------------------------------- */

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

.dl-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 30px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-a);
}

.dl-card__icon {
  width: 56px;
  margin-bottom: 4px;
}

.dl-card__icon .g-ln {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dl-card__name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.dl-card__blurb {
  margin: 0;
  color: #3B4048;
  line-height: 1.5;
  flex: 1;
}

.dl-card .btn { align-self: flex-start; }

.dl-card__meta {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .dl-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* --------------------------------------------------------------------------
   Examples — view switcher + theme switcher + public board
   -------------------------------------------------------------------------- */

.view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.view-switch__btn {
  appearance: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 10px 18px;
  color: var(--ink);
  background: var(--hi);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-a);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.view-switch__btn:hover {
  transform: translate(-1px, -1px);
}

.view-switch__btn.is-active {
  background: var(--blue);
  color: #fff;
  border-color: var(--ink);
}

.theme-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.theme-switch__btn {
  appearance: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 10px 18px;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-a);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

.theme-switch__btn:hover {
  background: var(--hi);
  transform: translate(-1px, -1px);
}

.theme-switch__btn.is-active {
  background: var(--ink);
  color: var(--board);
}

.board-stage {
  overflow-x: auto;
  padding-bottom: 8px;
}

.pub-board {
  min-width: min(100%, 720px);
  padding: 22px;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.pub-board__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 22px;
}

.pub-board__brand {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pub-board__mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 2.5px solid currentColor;
  border-radius: 10px;
}

.pub-board__team {
  margin: 0 0 2px;
  font-size: 13px;
  opacity: .72;
}

.pub-board__sprint {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.pub-board__url {
  margin: 0;
  font-size: 13px;
  opacity: .65;
  align-self: center;
}

.pub-board__stats {
  display: grid;
  grid-template-columns: auto auto minmax(140px, 1fr);
  gap: 14px 20px;
  margin-bottom: 18px;
  align-items: end;
}

.pub-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.pub-stat span,
.pub-stat__label,
.pub-stat__pct {
  font-size: 13px;
  opacity: .7;
}

.pub-stat--wide {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
}

.pub-stat__label { grid-column: 1 / -1; }

.pub-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
  overflow: hidden;
}

.pub-progress > span {
  display: block;
  height: 100%;
  width: var(--pct);
  border-radius: inherit;
  background: currentColor;
}

.pub-board__chart {
  position: relative;
  margin-bottom: 22px;
  padding: 12px 14px 8px;
  border-radius: 12px;
}

.pub-board__chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 120px;
}

.pub-chart__ideal {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: .35;
}

.pub-chart__real {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pub-chart__dot { fill: currentColor; }

.pub-board__chart-label {
  margin: 4px 0 0;
  font-size: 12px;
  opacity: .55;
}

.pub-board__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pub-col__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.pub-col__title span {
  font-weight: 600;
  opacity: .55;
}

.pub-tasks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.pub-task {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.35;
}

.pub-task__key {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .55;
}

.pub-task__title { flex: 1; }

.pub-task.is-done .pub-task__title {
  text-decoration: line-through;
  opacity: .55;
}

/* --- Progress sheet: all sprints --- */

.pub-sprints {
  margin-top: 4px;
}

.pub-sprints__head,
.pub-sprint {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.6fr) 72px 78px;
  gap: 10px 14px;
  align-items: center;
}

.pub-sprints__head {
  margin-bottom: 8px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .5;
}

.pub-sprints__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.pub-sprint {
  padding: 12px;
  font-size: 14px;
  line-height: 1.3;
}

.pub-sprint__num {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pub-sprint__name { font-weight: 600; }

.pub-sprint__done,
.pub-sprint__status {
  font-size: 13px;
  opacity: .72;
}

.pub-sprint.is-live .pub-sprint__status {
  font-weight: 700;
  opacity: 1;
}

.pub-sprint.is-done .pub-sprint__name { opacity: .7; }

/* --- Roadmap --- */

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

.pub-road {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
}

.pub-road__when {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .65;
  padding-top: 2px;
}

.pub-road.is-now .pub-road__when { opacity: 1; }

.pub-road__title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.pub-road__meta {
  margin: 0 0 6px;
  font-size: 12px;
  opacity: .6;
}

.pub-road__copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  opacity: .85;
}

/* --- Changelog --- */

.pub-log {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.pub-log__entry {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
}

.pub-log__date {
  font-size: 12px;
  font-weight: 700;
  opacity: .6;
  padding-top: 3px;
}

.pub-log__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.pub-log__items {
  margin: 0;
  padding: 0 0 0 1.1em;
  display: grid;
  gap: 4px;
  font-size: 14px;
  line-height: 1.4;
  opacity: .85;
}

/* --- Comic theme --- */
[data-board-theme="comic"] .pub-board {
  --comic-ink: #1A1520;
  --comic-paper: #FFF8E8;
  --comic-panel: #FFE56A;
  --comic-pop: #E8453C;
  --comic-sky: #6EC6FF;
  color: var(--comic-ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(110, 198, 255, .35), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(232, 69, 60, .18), transparent 22%),
    var(--comic-paper);
  border: 4px solid var(--comic-ink);
  border-radius: 18px 14px 20px 12px / 14px 20px 12px 18px;
  box-shadow: 8px 8px 0 var(--comic-ink);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
}

[data-board-theme="comic"] .pub-board__mark {
  background: var(--comic-pop);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--comic-ink);
}

[data-board-theme="comic"] .pub-board__sprint {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

[data-board-theme="comic"] .pub-board__chart {
  background: #fff;
  border: 3px solid var(--comic-ink);
  border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%;
  transform: rotate(-.6deg);
}

[data-board-theme="comic"] .pub-chart__real,
[data-board-theme="comic"] .pub-chart__dot { color: var(--comic-pop); stroke: var(--comic-pop); fill: var(--comic-pop); }

[data-board-theme="comic"] .pub-progress { background: #fff; border: 2px solid var(--comic-ink); }
[data-board-theme="comic"] .pub-progress > span { background: var(--comic-sky); }

[data-board-theme="comic"] .pub-col {
  background: #fff;
  border: 3px solid var(--comic-ink);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 4px 4px 0 var(--comic-ink);
}

[data-board-theme="comic"] .pub-col[data-col="doing"] { background: var(--comic-panel); }
[data-board-theme="comic"] .pub-col[data-col="done"] { background: #C8F5A8; }

[data-board-theme="comic"] .pub-task {
  background: #fff;
  border: 2.5px solid var(--comic-ink);
  border-radius: 10px 14px 8px 12px / 12px 8px 14px 10px;
  transform: rotate(-.4deg);
}

[data-board-theme="comic"] .pub-task:nth-child(even) { transform: rotate(.5deg); }

[data-board-theme="comic"] .pub-task.is-done {
  background: #F3F3F3;
}

[data-board-theme="comic"] .pub-sprint,
[data-board-theme="comic"] .pub-road,
[data-board-theme="comic"] .pub-log__entry {
  background: #fff;
  border: 3px solid var(--comic-ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--comic-ink);
}

[data-board-theme="comic"] .pub-sprint.is-live,
[data-board-theme="comic"] .pub-road.is-now {
  background: var(--comic-panel);
}

[data-board-theme="comic"] .pub-sprint.is-done {
  background: #C8F5A8;
}

[data-board-theme="comic"] .pub-sprints__head { font-family: "Comic Neue", cursive, sans-serif; }

/* --- Professional / Jira-like --- */
[data-board-theme="pro"] .pub-board {
  --pro-ink: #172B4D;
  --pro-muted: #5E6C84;
  --pro-border: #DFE1E6;
  --pro-bg: #F4F5F7;
  --pro-card: #FFFFFF;
  --pro-blue: #0052CC;
  --pro-green: #00875A;
  color: var(--pro-ink);
  background: var(--pro-bg);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(9, 30, 66, .08);
  font-family: "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  padding: 20px 18px 18px;
}

[data-board-theme="pro"] .pub-board__mark {
  background: var(--pro-blue);
  border: none;
  border-radius: 4px;
}

[data-board-theme="pro"] .pub-board__team,
[data-board-theme="pro"] .pub-board__url,
[data-board-theme="pro"] .pub-stat span,
[data-board-theme="pro"] .pub-stat__label,
[data-board-theme="pro"] .pub-stat__pct,
[data-board-theme="pro"] .pub-board__chart-label {
  color: var(--pro-muted);
  opacity: 1;
  font-size: 12px;
  font-weight: 500;
}

[data-board-theme="pro"] .pub-board__sprint {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.015em;
}

[data-board-theme="pro"] .pub-stat strong {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
}

[data-board-theme="pro"] .pub-board__chart {
  background: var(--pro-card);
  border: 1px solid var(--pro-border);
  border-radius: 6px;
}

[data-board-theme="pro"] .pub-chart__real,
[data-board-theme="pro"] .pub-chart__dot { color: var(--pro-blue); stroke: var(--pro-blue); fill: var(--pro-blue); }

[data-board-theme="pro"] .pub-progress { background: #EBECF0; border-radius: 3px; height: 8px; }
[data-board-theme="pro"] .pub-progress > span { background: var(--pro-blue); border-radius: 3px; }

[data-board-theme="pro"] .pub-col {
  background: #EBECF0;
  border-radius: 6px;
  padding: 10px;
}

[data-board-theme="pro"] .pub-col__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pro-muted);
}

[data-board-theme="pro"] .pub-task {
  background: var(--pro-card);
  border: 1px solid var(--pro-border);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(9, 30, 66, .08);
  padding: 10px 10px 12px;
  font-size: 13px;
}

[data-board-theme="pro"] .pub-task__key {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--pro-muted);
  opacity: 1;
  font-size: 11px;
  font-weight: 500;
}

[data-board-theme="pro"] .pub-task.is-done {
  opacity: .72;
}

[data-board-theme="pro"] .pub-task.is-done .pub-task__title {
  color: var(--pro-green);
  text-decoration: none;
  opacity: 1;
}

[data-board-theme="pro"] .pub-sprint,
[data-board-theme="pro"] .pub-road,
[data-board-theme="pro"] .pub-log__entry {
  background: var(--pro-card);
  border: 1px solid var(--pro-border);
  border-radius: 6px;
  box-shadow: 0 1px 1px rgba(9, 30, 66, .06);
}

[data-board-theme="pro"] .pub-sprint.is-live,
[data-board-theme="pro"] .pub-road.is-now {
  border-color: var(--pro-blue);
  box-shadow: inset 3px 0 0 var(--pro-blue);
}

[data-board-theme="pro"] .pub-sprint.is-live .pub-sprint__status {
  color: var(--pro-blue);
}

[data-board-theme="pro"] .pub-sprints__head,
[data-board-theme="pro"] .pub-road__when,
[data-board-theme="pro"] .pub-log__date,
[data-board-theme="pro"] .pub-road__meta {
  color: var(--pro-muted);
  opacity: 1;
}

[data-board-theme="pro"] .pub-road__title,
[data-board-theme="pro"] .pub-log__title {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 600;
}

/* --- Excel-like --- */
[data-board-theme="excel"] .pub-board {
  --xl-ink: #1F1F1F;
  --xl-green: #217346;
  --xl-grid: #D4D4D4;
  --xl-header: #E7E6E6;
  --xl-select: #E2EFDA;
  color: var(--xl-ink);
  background: #FFFFFF;
  border: 1px solid #A6A6A6;
  border-radius: 0;
  box-shadow: none;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  padding: 0;
  overflow: hidden;
}

[data-board-theme="excel"] .pub-board__top {
  margin: 0;
  padding: 10px 12px;
  background: var(--xl-green);
  color: #fff;
  align-items: center;
}

[data-board-theme="excel"] .pub-board__mark {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 2px;
  background: #fff;
}

[data-board-theme="excel"] .pub-board__team,
[data-board-theme="excel"] .pub-board__url {
  color: rgba(255, 255, 255, .78);
  opacity: 1;
  font-size: 12px;
}

[data-board-theme="excel"] .pub-board__sprint {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0;
}

[data-board-theme="excel"] .pub-board__stats,
[data-board-theme="excel"] .pub-board__chart {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--xl-grid);
}

[data-board-theme="excel"] .pub-board__chart {
  background: #FAFAFA;
  border-radius: 0;
}

[data-board-theme="excel"] .pub-chart__real,
[data-board-theme="excel"] .pub-chart__dot { color: var(--xl-green); stroke: var(--xl-green); fill: var(--xl-green); }

[data-board-theme="excel"] .pub-progress { background: #F2F2F2; border: 1px solid var(--xl-grid); border-radius: 0; height: 14px; }
[data-board-theme="excel"] .pub-progress > span { background: var(--xl-green); border-radius: 0; }

[data-board-theme="excel"] .pub-board__body {
  gap: 0;
  border-collapse: collapse;
}

[data-board-theme="excel"] .pub-col {
  border-right: 1px solid var(--xl-grid);
  padding: 0;
}

[data-board-theme="excel"] .pub-col:last-child { border-right: none; }

[data-board-theme="excel"] .pub-col__title {
  margin: 0;
  padding: 8px 10px;
  background: var(--xl-header);
  border-bottom: 1px solid var(--xl-grid);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

[data-board-theme="excel"] .pub-tasks { gap: 0; }

[data-board-theme="excel"] .pub-task {
  margin: 0;
  padding: 7px 10px;
  border-bottom: 1px solid var(--xl-grid);
  border-radius: 0;
  font-size: 13px;
  font-family: "IBM Plex Mono", "Consolas", ui-monospace, monospace;
}

[data-board-theme="excel"] .pub-task:nth-child(even) {
  background: #F9F9F9;
}

[data-board-theme="excel"] .pub-task.is-done {
  background: var(--xl-select);
}

[data-board-theme="excel"] .pub-task.is-done .pub-task__title {
  text-decoration: none;
  opacity: 1;
}

[data-board-theme="excel"] .pub-task__key {
  font-family: inherit;
  min-width: 52px;
  opacity: .75;
}

[data-board-theme="excel"] .pub-sprints,
[data-board-theme="excel"] .pub-roadmap,
[data-board-theme="excel"] .pub-log {
  gap: 0;
  border-top: 1px solid var(--xl-grid);
}

[data-board-theme="excel"] .pub-sprints__head {
  margin: 0;
  padding: 8px 12px;
  background: var(--xl-header);
  border-bottom: 1px solid var(--xl-grid);
  opacity: 1;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

[data-board-theme="excel"] .pub-sprints__list { gap: 0; }

[data-board-theme="excel"] .pub-sprint,
[data-board-theme="excel"] .pub-road,
[data-board-theme="excel"] .pub-log__entry {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--xl-grid);
  border-radius: 0;
  font-family: "IBM Plex Mono", "Consolas", ui-monospace, monospace;
  font-size: 13px;
}

[data-board-theme="excel"] .pub-sprint:nth-child(even),
[data-board-theme="excel"] .pub-road:nth-child(even),
[data-board-theme="excel"] .pub-log__entry:nth-child(even) {
  background: #F9F9F9;
}

[data-board-theme="excel"] .pub-sprint.is-live,
[data-board-theme="excel"] .pub-road.is-now {
  background: var(--xl-select);
}

[data-board-theme="excel"] .pub-sprint.is-done {
  background: #E2EFDA;
}

[data-board-theme="excel"] .pub-road__title,
[data-board-theme="excel"] .pub-log__title {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

[data-board-theme="excel"] .pub-road__copy,
[data-board-theme="excel"] .pub-log__items {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

@media (max-width: 820px) {
  .pub-board__stats { grid-template-columns: 1fr 1fr; }
  .pub-stat--wide { grid-column: 1 / -1; }
  .pub-board__body { grid-template-columns: 1fr; }
  .pub-sprints__head,
  .pub-sprint {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }
  .pub-sprints__head span:nth-child(3),
  .pub-sprint__done { display: none; }
  .pub-road,
  .pub-log__entry {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  [data-board-theme="excel"] .pub-col {
    border-right: none;
    border-bottom: 1px solid var(--xl-grid);
  }
}