/* Manison landing page.
   Pixel art for the machine's world, a legible text face for people.
   Tokens: see DESIGN-NOTES.md */

:root {
  --mist: #E8EDEF;
  --fog: #D3DDE1;
  --fog-2: #BFCDD3;
  --petrol: #1B2E39;
  --petrol-2: #24394A;
  --petrol-3: #34505F;
  --slate: #4B6370;
  --chalk: #F5F7F6;
  --ember: #D2401C;
  --ember-dark: #9E2C10;
  --lantern: #FFCF7A;
  --moss: #2E7D57;
  --moss-light: #5FB284;
  --focus: var(--petrol);

  --display: 'Jersey 25', ui-monospace, monospace;
  --text: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --wrap: 1240px;
  --nav-h: 68px;

  /* pixel-rounded corners: two 3px steps */
  --notch: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
  --notch-in: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--mist);
  color: var(--petrol);
  font: 400 18px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--petrol);
  color: var(--chalk);
  padding: 10px 14px;
  font-weight: 700;
}
.skip:focus { top: 12px; }

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

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  text-wrap: balance;
  -webkit-font-smoothing: none;
}
.display--xl { font-size: 50px; line-height: 48px; }
.display--lg { font-size: 50px; line-height: 48px; }
.display--md { font-size: 50px; line-height: 48px; }
@media (min-width: 640px) {
  .display--xl { font-size: 75px; line-height: 70px; }
}
@media (min-width: 1100px) {
  .display--xl { font-size: 100px; line-height: 92px; }
  .display--lg { font-size: 75px; line-height: 70px; }
}

.lead { font-size: 20px; line-height: 1.5; margin: 0; max-width: 46ch; }
.fine { font-size: 15px; color: var(--slate); margin: 18px 0 0; max-width: 46ch; }
.num { font-variant-numeric: tabular-nums; }

/* one light glint across the headline on load */
.glint {
  background: linear-gradient(100deg, var(--petrol) 0 42%, #C7792B 47%, #FFCF7A 50%, #C7792B 53%, var(--petrol) 58% 100%);
  background-size: 300% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glint 2s 0.6s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}
@keyframes glint {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@media (forced-colors: active) {
  .glint { background: none; color: CanvasText; }
}

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

.btn {
  --bg: var(--ember);
  --fg: var(--chalk);
  --edge: transparent;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px 13px;
  font: 700 16px/1.2 var(--text);
  color: var(--fg);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease;
}
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.btn::before {
  inset: 0;
  background: var(--edge);
  clip-path: var(--notch);
}
.btn::after {
  inset: 0;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 241, 207, 0.55) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat,
    var(--bg);
  clip-path: var(--notch);
}
.btn:hover::after { animation: shine 0.7s ease-out; }
.btn:active { transform: translateY(1px); }
@keyframes shine {
  from { background-position: 160% 0, 0 0; }
  to { background-position: -60% 0, 0 0; }
}
.btn--primary:hover { --bg: #DF4A24; }
.btn--sm { min-height: 40px; padding: 9px 16px 10px; font-size: 15px; }

/* outlined: edge layer + inset fill */
.btn--ghost,
.btn--dark,
.btn--quiet {
  --edge: var(--petrol);
  --bg: var(--mist);
  --fg: var(--petrol);
}
.btn--ghost::after,
.btn--dark::after,
.btn--quiet::after { inset: 3px; clip-path: var(--notch-in); }
.btn--ghost:hover { --bg: #F5F7F6; }
.btn--dark { --edge: rgba(245, 247, 246, 0.55); --bg: var(--petrol); --fg: var(--chalk); }
.btn--dark:hover { --edge: var(--chalk); --bg: var(--petrol-2); }
.btn--quiet { --edge: var(--fog-2); --bg: #FFFFFF; }
.btn--quiet:hover { --edge: var(--petrol); }
.btn:disabled,
.btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; }
.btn:disabled:hover::after,
.btn[aria-disabled="true"]:hover::after { animation: none; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

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

/* paints the phone's top safe area so content never scrolls visibly behind it */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--mist);
}
/* see-through at the top of the page so the hero's warm light reaches the top edge; solid once scrolled */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(232, 237, 239, 0);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.nav.is-scrolled {
  background: rgba(232, 237, 239, 0.88);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  box-shadow: 0 1px 0 var(--fog-2);
}
.nav__in { display: flex; align-items: center; gap: 24px; height: var(--nav-h); }
.nav nav { margin-left: auto; }
.nav__links { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.nav__links a {
  text-decoration: none;
  font-weight: 600;
  font-size: 15.5px;
  padding: 6px 0;
}
.nav__links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 920px) {
  .nav nav { display: none; }
  .nav__in > .btn { margin-left: auto; }
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark svg { width: 27px; height: 21px; }
.brand__name {
  font-family: var(--display);
  font-size: 25px;
  line-height: 25px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: none;
}

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

/* the sky runs from the top of the page (under the nav) to the bottom of the diorama,
   so the warm light and its shafts start at the top instead of at the diorama's edge */
.hero__sky {
  --sky-top: calc(-1 * (var(--nav-h) + env(safe-area-inset-top, 0px)));
  position: relative;
  isolation: isolate;
  padding-top: clamp(28px, 4vw, 56px);
}
.hero__sky::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--sky-top) 0 0;
  pointer-events: none;
  background: radial-gradient(62% 110% at 86% 0%, rgba(255, 226, 172, 0.9), rgba(255, 226, 172, 0) 70%);
}
.hero__copy { position: relative; z-index: 11; display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .hero__copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
}
.hero__side { padding-bottom: 6px; }

/* the diorama: layered canvases with depth, light and drift.
   No isolation of its own: its layers share the hero sky's stacking context with the shafts.
   Its top is clear so the hero sky shows through without an edge. */
.diorama {
  position: relative;
  overflow: hidden;
  height: 480px;
  margin-top: clamp(28px, 3.5vw, 48px);
  background: linear-gradient(to bottom, rgba(232, 237, 239, 0) 0%, rgba(228, 234, 236, 0) 30%, rgba(234, 229, 218, 0.85) 66%, #EEDDC4 100%);
}
.diorama::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 30%, transparent 62%, rgba(27, 46, 57, 0.16));
  /* fade the vignette out toward the top so it doesn't draw a line where the sky meets the page */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
  mask-image: linear-gradient(to bottom, transparent, #000 45%);
}
.layer { position: absolute; left: 0; top: 0; pointer-events: none; }
.diorama .layer--far { z-index: 1; filter: blur(1.6px); }
.diorama .layer--mid { z-index: 2; filter: blur(0.8px); }
.diorama .layer--main { z-index: 3; }
.diorama .layer--glow { z-index: 4; mix-blend-mode: screen; filter: blur(5px); }
.hero__sky > .shafts { z-index: 5; inset: var(--sky-top) 0 0; }
.diorama .layer--dust { z-index: 6; filter: blur(0.4px); }
.diorama .labels { z-index: 9; }

.shafts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
/* the rays fall from the top of the page and are brightest where the sky meets the diorama */
.shafts i {
  position: absolute;
  top: -10%;
  height: 115%;
  background: linear-gradient(to bottom, rgba(255, 222, 165, 0), rgba(255, 222, 165, 0.42) 50%, rgba(255, 222, 165, 0) 92%);
  filter: blur(16px);
  transform: rotate(26deg);
  animation: shaft 10s ease-in-out infinite alternate;
}
.shafts i:nth-child(1) { left: 54%; width: 6%; }
.shafts i:nth-child(2) { left: 67%; width: 11%; animation-delay: -4s; }
.shafts i:nth-child(3) { left: 84%; width: 4%; animation-delay: -7s; }
@keyframes shaft {
  from { opacity: 0.5; transform: rotate(26deg) translateX(-14px); }
  to { opacity: 1; transform: rotate(26deg) translateX(18px); }
}

/* entrance: the diorama pulls into focus */
.diorama .layer {
  transition: filter 1.8s cubic-bezier(0.2, 0.7, 0.1, 1), opacity 1.1s ease;
}
.diorama:not(.is-ready) .layer--far,
.diorama:not(.is-ready) .layer--mid { filter: blur(6px); opacity: 0; }
.diorama:not(.is-ready) .layer--main { filter: blur(8px); opacity: 0; }
.diorama:not(.is-ready) .layer--glow,
.diorama:not(.is-ready) .layer--dust { opacity: 0; }
.hero__sky > .shafts { transition: opacity 2s ease 0.7s; }
.hero__sky:has(.diorama:not(.is-ready)) > .shafts { opacity: 0; }
.diorama .layer--main { transition-delay: 0.15s; }

.labels { position: absolute; inset: 0; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; will-change: transform; }
.tag__in { display: block; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); }
.diorama:not(.is-ready) .tag__in,
.stage:not(.is-ready) .tag__in { opacity: 0; transform: translateY(6px); }
.diorama .tag:nth-child(1) .tag__in { transition-delay: 1.1s; }
.diorama .tag:nth-child(2) .tag__in { transition-delay: 1.3s; }
.diorama .tag:nth-child(n+3) .tag__in { transition-delay: 1.5s; }

.tag--sky::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 2px;
  height: 10px;
  background: var(--petrol);
}
.tag--sky .tag__in {
  position: absolute;
  left: -12px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  padding: 6px 10px 7px;
  background: rgba(245, 247, 246, 0.94);
  color: var(--petrol);
  font-size: 14px;
  line-height: 1.25;
  clip-path: var(--notch-in);
}
.tag--sky b { font-weight: 700; }
.tag__d { color: var(--slate); font-size: 13px; }
.tag--plaque .tag__in {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: rgba(245, 247, 246, 0.86);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.stage:not(.is-ready) .tag--plaque .tag__in { transform: translate(-50%, -50%) translateY(6px); }
.diorama:not(.is-ready) .tag--plaque .tag__in { transform: translate(-50%, -50%) translateY(6px); }
@media (max-width: 720px) {
  .tag__d { display: none; }
  .tag--plaque .tag__in { font-size: 12px; }
}

/* the ground under the diorama: what Manison runs on */
.bedrock {
  position: relative;
  margin-top: -1px;
  background: var(--petrol);
  color: var(--chalk);
  padding: 10px 0 44px;
  --focus: var(--lantern);
}
.bedrock__in { display: grid; gap: 22px; margin: 0; }
@media (min-width: 960px) {
  .bedrock__in { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.stratum dt {
  font-family: var(--display);
  font-size: 25px;
  line-height: 25px;
  color: var(--lantern);
  margin-bottom: 10px;
  -webkit-font-smoothing: none;
}
.stratum dd { margin: 0; }
.names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 16px;
  color: rgba(245, 247, 246, 0.82);
}

/* ---------- demo ---------- */

.demo {
  background: var(--petrol);
  color: var(--chalk);
  padding: 72px 0 88px;
  border-top: 3px solid var(--petrol-2);
  --focus: var(--lantern);
}
.demo__head { display: grid; gap: 24px; }
@media (min-width: 1000px) {
  .demo__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
}
.demo__intro p { margin: 0 0 20px; color: rgba(245, 247, 246, 0.84); max-width: 50ch; }

.biz { display: flex; flex-wrap: wrap; gap: 10px; }
.biz button {
  position: relative;
  isolation: isolate;
  appearance: none;
  border: 0;
  background: none;
  color: var(--chalk);
  font: inherit;
  cursor: pointer;
  padding: 10px 16px 11px;
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}
.biz button::before,
.biz button::after { content: ""; position: absolute; pointer-events: none; }
.biz button::before { inset: 0; z-index: -2; background: rgba(245, 247, 246, 0.3); clip-path: var(--notch); }
.biz button::after { inset: 3px; z-index: -1; background: var(--petrol); clip-path: var(--notch-in); }
.biz button:hover::before { background: rgba(245, 247, 246, 0.6); }
.biz button[aria-checked="true"]::before { background: var(--lantern); }
.biz button[aria-checked="true"]::after { background: #2A4250; }
.biz b { font-size: 16px; font-weight: 700; }
.biz span { font-size: 13px; color: rgba(245, 247, 246, 0.72); }

.demo__body { display: grid; gap: 28px; margin-top: 44px; }
@media (min-width: 1100px) {
  .demo__body { grid-template-columns: minmax(0, 1fr) 384px; gap: 32px; align-items: start; }
}
.demo__main { min-width: 0; }

.steps {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.steps button {
  width: 100%;
  appearance: none;
  border: 0;
  border-top: 3px solid rgba(245, 247, 246, 0.2);
  background: none;
  color: rgba(245, 247, 246, 0.62);
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 2px 8px;
  text-align: left;
  transition: color 0.2s ease, border-color 0.3s ease;
}
.steps button:hover { color: var(--chalk); }
.steps__n { font-family: var(--display); font-size: 25px; line-height: 25px; -webkit-font-smoothing: none; }
.steps__t { font-size: 15px; font-weight: 700; }
.steps button.is-done { border-top-color: var(--moss-light); color: rgba(245, 247, 246, 0.82); }
.steps button[aria-current="step"] { border-top-color: var(--lantern); color: var(--chalk); }
@media (max-width: 560px) {
  /* hidden visually, still the button's name for screen readers */
  .steps button:not([aria-current="step"]) .steps__t {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.stage-frame {
  position: relative;
  clip-path: var(--notch);
  background:
    radial-gradient(55% 80% at 90% 0%, rgba(255, 226, 172, 0.9), rgba(255, 226, 172, 0) 70%),
    linear-gradient(to bottom, #DCE5E8 0%, #E6E6DF 60%, #EDDCC3 100%);
}
.stage { position: relative; overflow: hidden; isolation: isolate; height: 400px; }
.stage .layer--far { z-index: 1; filter: blur(1.4px); }
.stage .layer--mid { z-index: 2; filter: blur(0.7px); }
.stage .layer--main { z-index: 3; transition: filter 1.4s cubic-bezier(0.2, 0.7, 0.1, 1); }
.stage .layer--glow { z-index: 4; mix-blend-mode: screen; filter: blur(4px); }
.stage .layer--shade { z-index: 5; }
.stage .labels { z-index: 6; }
.stage:not(.is-ready) .layer--main { filter: blur(6px); }
.stage .tag__in { transition-delay: 0.5s; }
.wipe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }

.caption { padding: 22px 0 4px; min-height: 166px; }
.caption h3 { font-size: 24px; line-height: 1.25; margin: 0 0 8px; font-weight: 700; }
.caption p { margin: 0; color: rgba(245, 247, 246, 0.84); max-width: 62ch; }
.caption .caption__gain {
  margin-top: 12px;
  color: var(--lantern);
  font-weight: 700;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.caption__gain::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--lantern);
  transform: translateY(-1px);
}

.demo__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.demo__hint { margin: 0; font-size: 15px; color: var(--lantern); }
#demo-next.is-ready { animation: ready 1.4s ease-in-out infinite; }
@keyframes ready { 50% { filter: brightness(1.18) drop-shadow(0 0 10px rgba(255, 207, 122, 0.55)); } }

.demo__note { margin-top: 36px; margin-bottom: 0; font-size: 15px; color: rgba(245, 247, 246, 0.66); }

/* the Manison app, as you'd see it */
.app {
  background: var(--chalk);
  color: var(--petrol);
  clip-path: var(--notch);
  font-size: 15px;
  line-height: 1.45;
  min-height: 560px;
  --focus: var(--petrol);
}
.app__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--fog);
  font-size: 14px;
}
.app__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.app__brand svg { width: 14px; height: 11px; }
.app__co { color: var(--slate); }
.app__body { padding: 4px 18px 18px; }
.app__block { padding: 14px 0; border-bottom: 1px solid var(--fog); }
.app__block:last-child { border-bottom: 0; }
.app__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate);
}
.app__label .num { margin-left: auto; font-weight: 600; }
.app__goaltext { margin: 0 0 12px; font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.app__empty { margin: 0; color: var(--slate); font-size: 14px; }

.meter__bar { position: relative; height: 9px; background: var(--fog); }
.meter__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--moss);
  transition: width 0.9s steps(14, end);
}
.meter__text { margin: 6px 0 0; font-size: 13.5px; color: var(--slate); }
.meter__text .num { color: var(--petrol); font-weight: 700; }

.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.task { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.task__av svg { width: 18px; height: 10px; }
.task__txt { display: flex; flex-direction: column; min-width: 0; }
.task__txt b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.task__txt span { font-size: 13px; color: var(--slate); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: #E3E9EC;
  color: var(--slate);
}
.pill::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.pill[data-s="working"] { background: #FFF1CF; color: #7A4B00; }
.pill[data-s="working"]::before { background: #E8A24A; animation: blink 0.8s steps(2, jump-none) infinite; }
.pill[data-s="waiting"] { background: #FBE3DA; color: var(--ember-dark); }
.pill[data-s="waiting"]::before { background: var(--ember); animation: blink 1s steps(2, jump-none) infinite; }
.pill[data-s="done"] { background: #DDEFE5; color: #1F5E3F; }
.pill[data-s="done"]::before { background: var(--moss); }
@keyframes blink { 50% { opacity: 0.2; } }

.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.log li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
.log .num { color: var(--slate); font-weight: 700; }

.approval:focus { outline: none; }
.approval:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.approval { padding: 14px 14px 14px 16px; background: #FFF7F1; box-shadow: inset 3px 0 0 var(--ember); }
.approval[data-state="approved"] { background: #EEF7F1; box-shadow: inset 3px 0 0 var(--moss); }
.approval__dot { width: 8px; height: 8px; background: var(--ember); animation: blink 1s steps(2, jump-none) infinite; }
.approval__dot.is-done { background: var(--moss); animation: none; }
.approval__ask { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.approval__from { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--slate); }
.approval__from svg { width: 16px; height: 9px; }
.approval__preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--fog);
  font-size: 14px;
}
.approval__preview span { font-size: 13px; color: var(--slate); }
.approval__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.approval__note { margin: 10px 0 0; font-size: 12.5px; color: var(--slate); }
.approval__wait { margin: 0; font-size: 14px; color: var(--slate); }
.approval__done { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: #1F5E3F; }
.approval__tick svg,
.report__tick svg { width: 14px; height: 12px; }

.report__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 14px; }
.report__stats div { background: #E9EEF0; padding: 10px 10px 8px; }
.report__stats dt { font-size: 12px; font-weight: 700; color: var(--slate); }
.report__stats dd { margin: 4px 0 0; font-family: var(--display); font-size: 25px; line-height: 25px; -webkit-font-smoothing: none; }
.report__list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.report__list li { display: flex; gap: 8px; align-items: baseline; }
.report__tick { flex: none; transform: translateY(1px); }
.report__next { padding: 12px 12px 13px; background: #FFF1CF; }
.report__next .app__label { color: #7A4B00; }
.report__next .app__label svg { width: 14px; height: 11px; }
.report__next p:last-child { margin: 0; font-size: 14px; }

/* arrival: a short glint across whatever just changed */
.is-new { position: relative; animation: arrive 0.6s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
.is-new::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 207, 122, 0.5) 50%, transparent 70%) 0 0 / 260% 100% no-repeat;
  animation: sweep 1s ease-out both;
}
@keyframes arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sweep { from { background-position: 110% 0; opacity: 1; } to { background-position: -50% 0; opacity: 0; } }

/* ---------- control ---------- */

.control { padding: clamp(80px, 10vw, 128px) 0; }
.control__in { display: grid; gap: 36px; }
@media (min-width: 1000px) {
  .control__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .control__head { position: sticky; top: 108px; }
}
.control__head p { margin: 20px 0 0; color: var(--slate); max-width: 42ch; }
.instruments { list-style: none; margin: 0; padding: 0; }
.instrument {
  display: grid;
  gap: 18px;
  padding: 28px 0;
  border-top: 1px solid var(--fog-2);
}
.instrument:last-child { border-bottom: 1px solid var(--fog-2); }
@media (min-width: 640px) {
  .instrument { grid-template-columns: 216px minmax(0, 1fr); gap: 32px; align-items: center; }
}
.instrument__art {
  position: relative;
  width: 216px;
  height: 135px;
  overflow: hidden;
  clip-path: var(--notch);
  background:
    radial-gradient(70% 90% at 75% 0%, rgba(255, 226, 172, 0.75), rgba(255, 226, 172, 0) 70%),
    linear-gradient(to bottom, #DFE7EA, #E9E4D9);
}
.instrument__art .layer--glow { mix-blend-mode: screen; filter: blur(3px); }
.instrument h3 { font-size: 21px; line-height: 1.3; margin: 0 0 6px; }
.instrument p { margin: 0; color: var(--slate); max-width: 52ch; }

/* ---------- setup ---------- */

.setup { padding: clamp(72px, 9vw, 112px) 0 0; }
.setup__head { display: grid; gap: 16px; }
@media (min-width: 1000px) {
  .setup__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
}
.setup__head p, .pricing__head p { margin: 0; color: var(--slate); max-width: 44ch; }

.stairs {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}
.stair { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.stair__txt { padding: 0 24px 22px 0; }
.stair__when {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 25px;
  line-height: 25px;
  color: var(--ember);
  -webkit-font-smoothing: none;
}
.stair h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.3; }
.stair__txt p:last-child { margin: 0; font-size: 16px; color: var(--slate); }
.stair__block {
  position: relative;
  height: calc(var(--h) * 39px);
  background:
    linear-gradient(to bottom, #4C6B7A 0 3px, #34505F 3px 9px, #24394A 9px 12px, transparent 12px),
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(76, 107, 122, 0.35) 27px 30px),
    var(--petrol);
}
.stair__block::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #3F6B4E 0 3px, transparent 3px 15px, #5FB284 15px 18px, transparent 18px 33px);
}
.stair__flag { position: absolute; right: 14px; bottom: 100%; }
.stair:last-child .stair__txt { padding-right: 56px; }
.stair__flag svg { width: 24px; height: 60px; }
@media (max-width: 760px) {
  .stairs { grid-template-columns: 1fr; gap: 26px; }
  .stair { flex-direction: column-reverse; }
  .stair__txt { padding: 12px 0 0; }
  .stair__block { height: 18px; width: calc(var(--h) * 25%); }
  .stair__flag { display: none; }
}

/* ---------- pricing ---------- */

.pricing { padding: clamp(80px, 10vw, 128px) 0; border-top: 3px solid var(--petrol); }
.pricing__head { display: grid; gap: 16px; }
@media (min-width: 1000px) {
  .pricing__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
}
.tiers {
  display: grid;
  margin-top: 48px;
  box-shadow: inset 0 0 0 3px var(--petrol);
}
@media (min-width: 960px) {
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tier { position: relative; display: flex; flex-direction: column; padding: 60px 28px 32px; }
.tier + .tier { box-shadow: inset 0 3px 0 var(--petrol); }
@media (min-width: 960px) {
  .tier + .tier { box-shadow: inset 3px 0 0 var(--petrol); }
}
.tier--pick { background: var(--chalk); }
.tier--pick + .tier { box-shadow: inset 0 3px 0 var(--petrol); }
@media (min-width: 960px) {
  .tier--pick { margin: 3px 0; }
  .tier--pick + .tier { box-shadow: inset 3px 0 0 var(--petrol); }
}
.tier__flag {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  padding: 7px 28px 8px;
  background: var(--petrol);
  color: var(--lantern);
  font-size: 14px;
  font-weight: 700;
}
@media (min-width: 960px) {
  .tier--pick .tier__flag { left: 3px; right: 0; top: -3px; }
}
.tier__blocks {
  width: calc(var(--n) * 21px - 3px);
  max-width: 100%;
  height: 18px;
  margin-bottom: 20px;
  background:
    linear-gradient(to bottom, #4C6B7A 0 3px, transparent 3px),
    repeating-linear-gradient(90deg, var(--petrol) 0 18px, transparent 18px 21px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 18px, transparent 18px 21px);
  mask: repeating-linear-gradient(90deg, #000 0 18px, transparent 18px 21px);
}
.tier:last-child .tier__blocks {
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 18px, transparent 18px 21px), linear-gradient(90deg, #000 55%, transparent);
  -webkit-mask-composite: source-in;
  mask: repeating-linear-gradient(90deg, #000 0 18px, transparent 18px 21px) intersect, linear-gradient(90deg, #000 55%, transparent);
}
.tier h3 { margin: 0 0 6px; font-size: 21px; }
.tier__price { margin: 0; font-size: 16px; color: var(--slate); }
.tier__price .num {
  font-family: var(--display);
  font-size: 50px;
  line-height: 50px;
  color: var(--petrol);
  margin-right: 4px;
  -webkit-font-smoothing: none;
}
.tier__setup { margin: 6px 0 22px; font-size: 15px; color: var(--slate); }
.tier ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 16px; flex: 1; }
.tier li { position: relative; padding-left: 18px; }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--moss); }
.tier .btn { align-self: flex-start; }
.tier--pick .btn--ghost { --bg: var(--chalk); }

.terms { display: grid; gap: 24px; margin-top: 36px; }
@media (min-width: 760px) {
  .terms { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.terms h3 { margin: 0 0 4px; font-size: 18px; }
.terms p { margin: 0; color: var(--slate); max-width: 52ch; }

/* ---------- questions ---------- */

.faq { padding: clamp(72px, 9vw, 112px) 0; border-top: 1px solid var(--fog-2); }
.faq__in { display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .faq__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
}
.faq details { border-top: 1px solid var(--fog-2); }
.faq details:last-child { border-bottom: 1px solid var(--fog-2); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 44px 18px 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7px;
  background:
    linear-gradient(var(--petrol), var(--petrol)) center / 15px 3px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) center / 3px 15px no-repeat;
  transition: transform 0.25s steps(3, end);
}
.faq details[open] summary::after {
  background: linear-gradient(var(--ember), var(--ember)) center / 15px 3px no-repeat;
  transform: rotate(180deg);
}
.faq summary:hover { color: var(--slate); }
.faq details p { margin: 0 0 22px; color: var(--slate); max-width: 62ch; }
.faq details[open] p { animation: arrive 0.4s ease both; }

/* ---------- book ---------- */

.book { padding: clamp(72px, 9vw, 112px) 0 clamp(96px, 11vw, 140px); }
.book__in { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .book__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
}
.book__copy p { margin: 20px 0 0; color: var(--slate); max-width: 44ch; }

.form {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--chalk);
  clip-path: var(--notch);
}
@media (min-width: 640px) {
  .form { grid-template-columns: 1fr 1fr; }
}
.field--wide { grid-column: 1 / -1; }
.field { min-width: 0; }
.field label,
.field legend { display: block; margin-bottom: 6px; padding: 0; font-size: 15px; font-weight: 700; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.field input:not([type="checkbox"]),
.field select {
  --b: #9FB3BD;
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--petrol);
  background: #FFFFFF;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--b);
  padding: 11px 12px;
  appearance: none;
}
.field select {
  padding-right: 40px;
  background:
    linear-gradient(var(--petrol), var(--petrol)) right 21px top 50% / 3px 3px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) right 18px top calc(50% - 3px) / 9px 3px no-repeat,
    #FFFFFF;
}
.field input:not([type="checkbox"]):hover,
.field select:hover { --b: var(--slate); }
.field input:not([type="checkbox"]):focus-visible,
.field select:focus-visible { --b: var(--petrol); outline: 3px solid var(--ember); outline-offset: 2px; }
/* after hover and focus, so an invalid field keeps its ember border */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { --b: var(--ember); }
.field__err { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--ember-dark); }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 13px;
  font-size: 15px;
  font-weight: 600;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px var(--fog-2);
  cursor: pointer;
}
.checks label:hover { box-shadow: inset 0 0 0 2px var(--slate); }
.checks label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--petrol); background: #FFF6E6; }
.checks input { width: 16px; height: 16px; margin: 0; accent-color: var(--ember); }
.checks input:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form__msg { margin: 0; font-weight: 700; font-size: 16px; }
.form__msg[data-state="error"] { color: var(--ember-dark); }
.form__msg[data-state="ok"] { color: #1F5E3F; }
.form__fine { margin: 0; font-size: 14px; color: var(--slate); }

/* ---------- footer: the ground everything stands on ---------- */

.ground {
  position: relative;
  margin-top: 48px;
  background: var(--petrol);
  color: var(--chalk);
  padding: 36px 0 40px;
  --focus: var(--lantern);
}
.ground__edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='24' shape-rendering='crispEdges'%3E%3Cg fill='%231B2E39'%3E%3Crect x='0' y='15' width='24' height='9'/%3E%3Crect x='24' y='12' width='36' height='12'/%3E%3Crect x='60' y='6' width='24' height='18'/%3E%3Crect x='84' y='9' width='30' height='15'/%3E%3Crect x='114' y='15' width='42' height='9'/%3E%3Crect x='156' y='12' width='36' height='12'/%3E%3C/g%3E%3Cg fill='%2334505F'%3E%3Crect x='0' y='15' width='24' height='3'/%3E%3Crect x='24' y='12' width='36' height='3'/%3E%3Crect x='60' y='6' width='24' height='3'/%3E%3Crect x='84' y='9' width='30' height='3'/%3E%3Crect x='114' y='15' width='42' height='3'/%3E%3Crect x='156' y='12' width='36' height='3'/%3E%3C/g%3E%3Cg fill='%235FB284'%3E%3Crect x='30' y='9' width='3' height='3'/%3E%3Crect x='69' y='3' width='3' height='3'/%3E%3Crect x='123' y='12' width='3' height='3'/%3E%3C/g%3E%3Cg fill='%233F6B4E'%3E%3Crect x='45' y='9' width='3' height='3'/%3E%3Crect x='99' y='6' width='3' height='3'/%3E%3Crect x='171' y='9' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 384px 48px repeat-x;
  image-rendering: pixelated;
}
.ground__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.ground__in p { margin: 0; color: rgba(245, 247, 246, 0.78); font-size: 16px; }
.ground__small { margin-left: auto !important; font-size: 14px !important; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .glint { animation: none; background: none; color: var(--petrol); }
  .shafts i { animation: none; }
}