/* ==========================================================================
   JASSTUDIO - design system
   --------------------------------------------------------------------------
   Theme lock:   light only. White page, one light band for alternation.
   Brand lock:   #0B1BFF, the logo blue, used neat everywhere. On white it is
                 8.0:1, and white on it is 8.0:1, so unlike the old dark build
                 the brand needs no lightened stand-ins for text vs fills.
   Shape rule:   cards 20px · inputs 12px · primary CTA is a full pill.
                 The pill is reserved for the CTA so it stays the loudest
                 shape on the page.
   Rhythm:       content is centred on a narrow measure. Sections alternate
                 white / --bg-band. Headings are two-tone: the second clause
                 carries the brand colour.
   Type:         Poppins 800 for the wordmark only. Manrope everywhere else.
   Motion:       enter/exit = --ease-out. On-screen move = --ease-io.
                 All UI transitions <= 260ms. Guarded by prefers-reduced-motion.
   ========================================================================== */

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

* { margin: 0; }

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

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

img,
svg,
picture { display: block; max-width: 100%; }

button,
input,
textarea,
select { font: inherit; color: inherit; }

ul, ol { list-style: none; padding: 0; }

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

/* --- tokens --------------------------------------------------------------- */
:root {
  --bg:       #FFFFFF;
  --bg-band:  #F6F7F9;   /* alternating section band */
  --bg-card:  #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-dark:  #101218;   /* announcement bar + footer only */

  --line:        #E6E8EE;
  --line-strong: #D2D6E0;

  --ink:    #14151A;   /* 15.9:1 on white */
  --ink-2:  #4B5060;   /* 8.1:1  on white */
  --ink-3:  #767C8C;   /*  4.6:1 on white */

  --brand:       #0B1BFF;   /* 8.0:1 on white, white on it 8.0:1 */
  --brand-deep:  #0713C4;
  --brand-lift:  #4363FF;   /* gradient tail; white on it 4.7:1 */
  --brand-wash:  #F0F2FF;
  --brand-line:  #C9D0FF;
  --on-brand:    #FFFFFF;

  --warn: #C4341B;   /* 6.2:1 on white */
  --ok:   #0E7A4E;   /* 4.9:1 on white */

  /* shape */
  --r-card: 20px;
  --r-ctl:  12px;
  --r-well: 12px;

  /* rhythm: 4px base */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --shell:   1160px;
  --measure: 780px;   /* centred prose column */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --nav-h:   68px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io:  cubic-bezier(.77, 0, .175, 1);

  --shadow-card: 0 1px 2px rgba(16, 20, 40, .04),
                 0 14px 34px -18px rgba(16, 20, 40, .16);
  --shadow-cta:  0 10px 28px -12px rgba(11, 27, 255, .5);
}

/* --- base ---------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--brand); color: var(--on-brand); }

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

.skip {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-ctl);
  font-weight: 700;
  transition: top 180ms var(--ease-out);
}
.skip:focus { top: var(--sp-4); }

/* --- layout -------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* in-page anchors must clear the sticky nav */
:target,
section[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

.section { padding-block: clamp(3.5rem, 8vw, var(--sp-9)); }
.section--tight { padding-block: clamp(3rem, 6vw, var(--sp-8)); }

/* the alternation device: a band, not a border */
.band { background: var(--bg-band); }

/* centred content column */
.mid {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}
.mid > * + * { margin-top: var(--sp-5); }

/* --- type ---------------------------------------------------------------- */
.h-display {
  font-size: clamp(2.375rem, 6.4vw, 4.375rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 800;
  text-wrap: balance;
}

.h-section {
  font-size: clamp(1.875rem, 4.2vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -.032em;
  font-weight: 800;
  text-wrap: balance;
}

.h-card {
  font-size: 1.1875rem;
  line-height: 1.32;
  letter-spacing: -.018em;
  font-weight: 700;
}

.lede {
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}
.mid .lede { margin-inline: auto; }

.body   { color: var(--ink-2); max-width: 62ch; }
.body-s { color: var(--ink-3); font-size: .9375rem; line-height: 1.6; max-width: 60ch; }
.mid .body { margin-inline: auto; }

/* the second clause of a heading carries the brand. This two-tone split is
   the page's main hierarchy device, which is why there are no eyebrows. */
.accent-word { color: var(--brand); }
.mute-word   { color: var(--ink-3); }

.nowrap { white-space: nowrap; }

.source {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 60ch;
}
.mid .source { margin-inline: auto; }
.source a { border-bottom: 1px solid var(--line-strong); }
@media (hover: hover) and (pointer: fine) {
  .source a:hover { color: var(--brand); border-bottom-color: var(--brand); }
}

/* --- animated backdrop ---------------------------------------------------
   Two things, both behind everything and both inert to the pointer:

   1. Two very soft blue fields that drift. Animated with transform only, so
      the work happens on the compositor and never touches layout or paint.
   2. Signal pulses travelling along flow lines. This is the product drawn
      literally - work moving through an automated pipeline - rather than a
      tiled decorative grid, which is a generated-UI signature.

   The whole layer is masked to a radial that dies out by the second section,
   so every reading surface below the hero stays plain white.
   ------------------------------------------------------------------------ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(135% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, .68) 52%, transparent 88%);
          mask-image: radial-gradient(135% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, .68) 52%, transparent 88%);
}

/* page content sits above the backdrop */
.topbar,
.nav,
main,
.footer { position: relative; z-index: 1; }

.backdrop__field {
  position: absolute;
  width: 68vw;
  height: 68vw;
  min-width: 620px;
  min-height: 620px;
  border-radius: 50%;
  /* soft by construction - no filter: blur(), which is expensive at this size */
  background: radial-gradient(circle at 50% 50%,
              rgba(11, 27, 255, .20) 0%,
              rgba(11, 27, 255, .08) 42%,
              rgba(11, 27, 255, 0) 70%);
  will-change: transform;
}
.backdrop__field--a {
  top: -30vw;
  left: -14vw;
  animation: drift-a 38s var(--ease-io) infinite alternate;
}
.backdrop__field--b {
  top: -38vw;
  right: -18vw;
  background: radial-gradient(circle at 50% 50%,
              rgba(67, 99, 255, .19) 0%,
              rgba(67, 99, 255, .07) 44%,
              rgba(67, 99, 255, 0) 70%);
  animation: drift-b 47s var(--ease-io) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(7vw, 5vw, 0) scale(1.14); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-6vw, 7vw, 0) scale(1); }
}

.backdrop__flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* the pipeline itself: always there, quiet */
.backdrop__track {
  fill: none;
  stroke: rgba(11, 27, 255, .16);
  stroke-width: 1.25;
}
/* the work moving along it: a short streak on a long gap */
.backdrop__pulse {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 34 300;
  animation: flow 10s linear infinite;
}
.backdrop__pulse--2 {
  stroke: var(--brand-lift);
  animation-duration: 13s;
  animation-delay: -3s;
}
.backdrop__pulse--3 { animation-duration: 16s; animation-delay: -7s; }

@keyframes flow { to { stroke-dashoffset: -334; } }

/* --- announcement bar ---------------------------------------------------- */
.topbar {
  background: var(--bg-dark);
  color: #EDEEF2;
  text-align: center;
  padding: .625rem var(--gutter);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.topbar b { color: #FFFFFF; font-weight: 800; }

/* --- brand wordmark ------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: .5rem; flex: none; }

.brand__word {
  font-family: 'Poppins', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3125rem;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
  text-transform: lowercase;
}

/* the uploaded logo, rebuilt: white wordmark on a solid brand-blue field */
.logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.15rem 1.75rem;
  background: var(--brand);
  border-radius: 14px;
}
.logo-card .brand__word { color: #FFFFFF; font-size: 1.75rem; }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 50px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  font-size: .9688rem;
  font-weight: 700;
  letter-spacing: -.008em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 150ms var(--ease-out),
              background-color 180ms ease,
              border-color 180ms ease,
              box-shadow 200ms ease,
              color 180ms ease;
}

.btn:active { transform: scale(.975); }
.btn[disabled] { cursor: not-allowed; opacity: .6; }

.btn--primary { background: var(--brand); color: var(--on-brand); }

.btn--secondary {
  background: var(--bg-card);
  color: var(--ink);
  border-color: var(--line-strong);
}

/* The one pill on the site. Gradient stays inside the blue family so it
   reads as the brand with depth, not as a second accent colour. */
.btn--pill {
  border-radius: 999px;
  border: 0;
  background-image: linear-gradient(96deg, var(--brand-deep) 0%, var(--brand) 48%, var(--brand-lift) 100%);
  color: var(--on-brand);
  min-height: 60px;
  padding-inline: clamp(1.75rem, 4vw, 3rem);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  letter-spacing: .005em;
  box-shadow: var(--shadow-cta);
}

.btn--wide { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover:not([disabled])   { background: #0A16D8; }
  .btn--secondary:hover { border-color: var(--ink-3); background: var(--bg-band); }
  .btn--pill:hover:not([disabled]) {
    box-shadow: 0 14px 34px -12px rgba(11, 27, 255, .62);
    transform: translateY(-1px);
  }
}

.btn .i { width: 18px; height: 18px; flex: none; }

.btn__spin {
  display: none;
  width: 17px;
  height: 17px;
  flex: none;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 620ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--brand);
  font-weight: 700;
  font-size: .9375rem;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease, gap 180ms var(--ease-out);
}
.textlink .i { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover { border-color: var(--brand); gap: var(--sp-3); }
}

/* --- nav ----------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
}
.nav[data-stuck='true'] {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--line);
}
@supports not (backdrop-filter: blur(4px)) {
  .nav[data-stuck='true'] { background: #FFFFFF; }
}

.nav__in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.625rem);
  white-space: nowrap;
}
.nav__links a {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink-2);
  padding-block: var(--sp-2);
  transition: color 160ms ease;
}
.nav__links a[aria-current='page'] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--ink); }
}

.nav__cta { flex: none; min-height: 42px; padding-inline: var(--sp-5); font-size: .9063rem; }

.nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  cursor: pointer;
  transition: transform 150ms var(--ease-out), border-color 180ms ease;
}
.nav__burger:active { transform: scale(.95); }
.nav__burger .i { width: 20px; height: 20px; }
.nav__burger .i--close,
.nav__burger[aria-expanded='true'] .i--open { display: none; }
.nav__burger[aria-expanded='true'] .i--close { display: block; }

.nav__sheet {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 49;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--gutter) var(--sp-6);
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 200ms;
}
.nav__sheet[data-open='true'] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.nav__sheet a {
  padding: var(--sp-3) 0;
  font-size: 1.0625rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.nav__sheet .btn { margin-top: var(--sp-4); }

@media (max-width: 900px) {
  .nav__links,
  .nav > .shell .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
}
@media (min-width: 901px) {
  .nav__sheet { display: none; }
}

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.hero__copy > * + * { margin-top: var(--sp-5); }
.hero .lede { margin-inline: auto; max-width: 44ch; }
.hero__cta { display: flex; justify-content: center; }

/* --- inline capture ------------------------------------------------------ */
.catch { display: grid; gap: var(--sp-3); max-width: 520px; margin-inline: auto; }
.catch__row { display: flex; gap: var(--sp-3); }
.catch__row input { flex: 1 1 auto; min-width: 0; }
.catch__row .btn { flex: none; }
@media (max-width: 560px) {
  .catch__row { flex-direction: column; }
  .catch__row .btn { width: 100%; }
}

.catch[data-state='done'] .catch__row { display: none; }
.catch[data-state='done'] [data-status] { color: var(--ok); font-weight: 700; }
.catch[data-state='error'] [data-status] { color: var(--warn); font-weight: 600; }
.catch[data-state='loading'] .btn--submit { pointer-events: none; opacity: .8; }
.catch[data-state='loading'] .btn__spin { display: block; }
.catch[data-state='loading'] .btn--submit .i { display: none; }

/* --- stat row ------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  max-width: 640px;
  margin: var(--sp-7) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.stat__n {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat__l { font-size: .8125rem; color: var(--ink-3); margin-top: var(--sp-1); line-height: 1.45; }
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; gap: var(--sp-4); text-align: center; }
}

/* --- workload ledger card ------------------------------------------------ */
.panel {
  max-width: 720px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.375rem, 3vw, 2rem);
  text-align: left;
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.panel__title { font-size: .9375rem; font-weight: 800; letter-spacing: -.015em; }
.panel__tag { font-size: .8125rem; font-weight: 700; color: var(--brand); }

.ledger { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); }
.ledger__row { display: grid; gap: var(--sp-2); }
.ledger__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: .9375rem;
}
.ledger__task { color: var(--ink-2); font-weight: 600; }
.ledger__hrs { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.ledger__bar {
  height: 8px;
  border-radius: 5px;
  background: #EBEDF3;
  overflow: hidden;
}
.ledger__fill {
  height: 100%;
  border-radius: 5px;
  background: var(--brand);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out);
}
/* --w is the share AI takes over, set per row in the markup */
.panel[data-seen='true'] .ledger__fill { transform: scaleX(var(--w, 1)); }
.ledger__row:nth-child(2) .ledger__fill { transition-delay: 90ms; }
.ledger__row:nth-child(3) .ledger__fill { transition-delay: 180ms; }
.ledger__row:nth-child(4) .ledger__fill { transition-delay: 270ms; }

.panel__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.panel__foot span { font-size: .8125rem; color: var(--ink-3); }
.panel__foot strong { font-size: 1.125rem; letter-spacing: -.02em; color: var(--brand); }

/* --- generic card grids -------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  text-align: left;
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 940px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.375rem, 2.6vw, 1.875rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.band .card { box-shadow: none; }

.card__list { display: grid; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); }
.card__list li {
  font-size: .8438rem;
  color: var(--ink-3);
  padding-left: 1.0625rem;
  position: relative;
}
.card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 1px;
  background: var(--brand);
}

.pict {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-well);
  background: var(--brand-wash);
  color: var(--brand);
  margin-bottom: var(--sp-2);
  flex: none;
}
.pict .i { width: 21px; height: 21px; }

/* pain rows: no icon well, just a rule and text. Keeps the section quiet. */
.pain {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
}
.pain .i { width: 19px; height: 19px; color: var(--warn); margin-top: .18rem; }
.pain p { font-size: .9375rem; color: var(--ink-2); line-height: 1.55; }

/* --- steps --------------------------------------------------------------- */
.step__n {
  display: grid;
  place-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-well);
  background: var(--brand);
  color: var(--on-brand);
  font-size: .875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.step__when {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}

/* --- pricing / packages -------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  align-items: stretch;
  text-align: left;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  height: 100%;
}
/* recommended plan is marked by surface + border weight, never by scale */
.plan--feature {
  border-color: var(--brand-line);
  background: var(--brand-wash);
  box-shadow: none;
}
.plan__head { display: grid; gap: var(--sp-2); }
.plan__tag {
  justify-self: start;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--on-brand);
  background: var(--brand);
  padding: .25rem .5rem;
  border-radius: 6px;
}
.plan__meta {
  margin-top: var(--sp-2);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
}
.plan__feat { display: grid; gap: var(--sp-3); padding-top: var(--sp-2); }
.plan__feat li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: var(--sp-3);
  font-size: .9063rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.plan__feat .i { width: 16px; height: 16px; color: var(--brand); margin-top: .28rem; }
.plan .btn { margin-top: auto; }
.plan__note { font-size: .8125rem; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* --- why-us rows --------------------------------------------------------- */
.reasons {
  display: grid;
  gap: 0;
  max-width: 760px;
  margin: var(--sp-7) auto 0;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
  padding-inline: clamp(1.25rem, 3vw, 2rem);
}
.reason {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.reason:last-child { border-bottom: 0; }
.reason .i { width: 22px; height: 22px; color: var(--brand); margin-top: .2rem; }

/* --- founder statement --------------------------------------------------- */
.quote {
  max-width: 720px;
  margin: var(--sp-6) auto 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
  text-align: left;
}
.quote p {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  letter-spacing: -.014em;
  color: var(--ink);
}
.quote footer {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--ink-3);
  font-weight: 700;
}

/* --- faq: one card, hairline rows, circular toggle ----------------------- */
.faq {
  max-width: 820px;
  margin: var(--sp-7) auto 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
  padding-inline: clamp(1.25rem, 3vw, 2rem);
  text-align: left;
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.016em;
  color: var(--ink);
  cursor: pointer;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { color: var(--brand); }
}
.faq__q .i {
  width: 30px;
  height: 30px;
  padding: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--bg-band);
  color: var(--ink-2);
  transition: transform 220ms var(--ease-io), background-color 180ms ease, color 180ms ease;
}
.faq__q[aria-expanded='true'] .i {
  transform: rotate(45deg);
  background: var(--brand);
  color: var(--on-brand);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--ease-io);
}
.faq__a[data-open='true'] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--sp-5); color: var(--ink-2); max-width: 64ch; }

/* --- waitlist ------------------------------------------------------------ */
.wait {
  max-width: 640px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: left;
}
.wait__perks {
  display: grid;
  gap: var(--sp-3);
  max-width: 560px;
  margin: var(--sp-6) auto 0;
  text-align: left;
}
.wait__perks li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--sp-3);
  font-size: .9375rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.wait__perks .i { width: 17px; height: 17px; color: var(--brand); margin-top: .25rem; }

/* --- forms --------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form__fields { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: var(--sp-2); text-align: left; }
.field > label { font-size: .9063rem; font-weight: 700; color: var(--ink); }
.field__hint { font-size: .8125rem; color: var(--ink-3); }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field input,
.field textarea,
.field select,
.catch input {
  width: 100%;
  min-height: 50px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  transition: border-color 170ms ease, box-shadow 170ms ease;
}
.field textarea { min-height: 108px; resize: vertical; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--sp-8);
}

.field input::placeholder,
.field textarea::placeholder,
.catch input::placeholder { color: #9AA0AE; }   /* 3.1:1, placeholder only */

.field input:focus,
.field textarea:focus,
.field select:focus,
.catch input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
  outline: none;
}

.field__error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: .8438rem;
  font-weight: 600;
  color: var(--warn);
}
.field__error .i { width: 15px; height: 15px; flex: none; }
.field[data-invalid='true'] .field__error { display: flex; }
.field[data-invalid='true'] input,
.field[data-invalid='true'] textarea,
.field[data-invalid='true'] select { border-color: var(--warn); }

.form__note { font-size: .8438rem; color: var(--ink-3); line-height: 1.5; }

/* honeypot: off-screen but not display:none, so bots still fill it */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- form states: one source of truth on data-state ---------------------- */
.form__done,
.form__fail { display: none; }

.form[data-state='done'] .form__fields,
.form[data-state='done'] .form__note { display: none; }
.form[data-state='done'] .form__done { display: flex; }
.form[data-state='error'] .form__fail { display: flex; }

.form[data-state='loading'] .btn--submit { pointer-events: none; opacity: .8; }
.form[data-state='loading'] .btn__spin { display: block; }
.form[data-state='loading'] .btn--submit .i { display: none; }

.form__done,
.form__fail {
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-5);
  border-radius: var(--r-card);
}
.form__done {
  border: 1px solid var(--brand-line);
  background: var(--brand-wash);
}
.form__done .i { width: 22px; height: 22px; color: var(--ok); flex: none; margin-top: .15rem; }
.form__fail {
  border: 1px solid #F0C4BB;
  background: #FDF3F1;
  margin-top: var(--sp-2);
}
.form__fail .i { width: 20px; height: 20px; color: var(--warn); flex: none; margin-top: .15rem; }
.form__fail p { font-size: .875rem; color: var(--ink-2); line-height: 1.55; }
.form__fail a { color: var(--brand); font-weight: 700; border-bottom: 1px solid currentColor; }

.queue {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--brand-line);
  font-size: .875rem;
  color: var(--ink-3);
}

/* --- interior pages: contact aside, services, about --------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.aside-card {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.aside-row { display: grid; gap: var(--sp-1); }
.aside-row dt { font-size: .8125rem; font-weight: 700; color: var(--ink-3); }
.aside-row dd { font-size: 1rem; font-weight: 600; }
.aside-row dd a { border-bottom: 1px solid var(--line-strong); }
@media (hover: hover) and (pointer: fine) {
  .aside-row dd a:hover { border-bottom-color: var(--brand); color: var(--brand); }
}

.svc { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
.svc__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, .74fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
}
.svc__item > .pict { margin-bottom: 0; }
.svc__body > * + * { margin-top: var(--sp-3); }
.svc__meta { display: grid; gap: var(--sp-2); align-content: start; }
.svc__meta li {
  font-size: .875rem;
  color: var(--ink-3);
  padding-left: 1.125rem;
  position: relative;
}
.svc__meta li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 1px;
  background: var(--brand);
}
@media (max-width: 900px) {
  .svc__item { grid-template-columns: 44px minmax(0, 1fr); }
  .svc__meta { grid-column: 1 / -1; padding-top: var(--sp-2); border-top: 1px solid var(--line); }
}
@media (max-width: 520px) { .svc__item { grid-template-columns: 1fr; } }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split__figure {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-band);
  overflow: hidden;
}
.split__prose > * + * { margin-top: var(--sp-4); }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split__figure { aspect-ratio: 16 / 10; }
}

.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-7); }
.principle {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-card);
}
.principle h3 { margin-bottom: var(--sp-2); }
@media (max-width: 720px) { .principles { grid-template-columns: 1fr; } }

.slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--sp-3);
  justify-items: center;
  text-align: center;
  padding: var(--sp-6);
  background: var(--bg-band);
}
.slot__mark { width: 46px; height: 46px; color: var(--ink-3); opacity: .55; }
.slot__text { font-size: .8125rem; font-weight: 600; color: var(--ink-3); max-width: 26ch; line-height: 1.5; }

.page-head {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.page-head > * + * { margin-top: var(--sp-4); }

/* --- closing cta --------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band__in { display: grid; justify-items: center; gap: var(--sp-5); max-width: 660px; margin-inline: auto; }
.cta-band .lede { max-width: 44ch; }

/* --- footer -------------------------------------------------------------- */
.footer {
  background: var(--bg-dark);
  color: #C7CAD4;
  padding-block: var(--sp-8) var(--sp-6);
}
.footer .brand__word { color: #FFFFFF; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.footer__col h3 {
  font-size: .8125rem;
  font-weight: 800;
  color: #8A8F9C;
  margin-bottom: var(--sp-3);
}
.footer__col li + li { margin-top: var(--sp-2); }
.footer__col a { font-size: .9375rem; color: #C7CAD4; transition: color 160ms ease; }
.footer .body-s { color: #8A8F9C; }
@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover { color: #FFFFFF; }
}
.footer__base {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-size: .875rem;
  color: #8A8F9C;
}
@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; }
}

/* --- scroll reveal (IntersectionObserver driven) ------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.reveal[data-seen='true'] { opacity: 1; transform: none; }

.enter { opacity: 0; animation: enter 560ms var(--ease-out) forwards; }
.enter--1 { animation-delay: 40ms; }
.enter--2 { animation-delay: 100ms; }
.enter--3 { animation-delay: 160ms; }
.enter--4 { animation-delay: 220ms; }
.enter--5 { animation-delay: 280ms; }

@keyframes enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* the backdrop stays, it just stops moving */
  .backdrop__field,
  .backdrop__pulse { animation: none; }
  .backdrop__pulse { stroke-dasharray: none; stroke: rgba(11, 27, 255, .12); }

  .reveal { opacity: 1; transform: none; transition: none; }
  .enter { animation: fade 240ms ease forwards; }
  .faq__a { transition: none; }
  .btn:active, .nav__burger:active { transform: none; }
  .btn--pill:hover { transform: none; }
  .nav__sheet { transition: opacity 120ms ease, visibility 120ms; transform: none; }
  .ledger__fill { transition: none; transform: scaleX(var(--w, 1)); }
  .btn__spin { animation-duration: 1.6s; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}