/* ---------------------------------------------------------------------------
   SiteLedger explainer: Innestolabs brand tokens, verbatim from the studio
   site's globals.css so the two surfaces read as one company.
   --------------------------------------------------------------------------- */
:root {
  --ink: #050b15;
  --midnight: #0a1931;
  --deep: #14304c;
  --steel: #4a7fa7;
  --sky: #b3cfe5;
  --canvas: #e9eff5;
  --paper: #ffffff;
  --mist: #f6fafd;
  --accent: #6f9fc4;
  --accent-soft: #9dc2dd;
  --line: rgba(20, 48, 76, 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: min(1180px, 100% - 48px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--midnight);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
}

/* Fraunces' optical-size axis runs 9 (text) to 144 (display). At 144 the
   hairlines thin right out, and at weight 300 on a dark ground the headings
   were reading faint. Lower opsz and one step up in weight keeps the same
   typeface and the same shapes, with strokes that hold at every size. */
/* The display figures and the pull quote are Fraunces too, and without this
   they fall back to automatic optical sizing, which at 60px picks the thin
   display cut again. Pin them to the same value the headings use. */
.est__total, .quote p, .proof b, .loop__num, .stat b, .kpi b,
.est__meta b, .field__value, .build__step, .screen__code, .step i {
  font-variation-settings: 'opsz' 32;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  font-variation-settings: 'opsz' 32;
}

p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }

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

.shell { width: var(--shell); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 116px) 0; }
.section--dark { background: var(--midnight); color: var(--mist); }
.section--ink { background: var(--ink); color: var(--mist); }
.section--paper { background: var(--paper); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--midnight); color: var(--mist);
  border-radius: 0 0 8px 0; font-size: 14px;
}
.skip-link:focus { left: 0; }

/* --- eyebrow + section heads ------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--steel); margin-bottom: 18px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.55;
}
.section--dark .eyebrow, .section--ink .eyebrow { color: var(--sky); }

.h2 { font-size: clamp(30px, 4vw, 50px); }
.lede {
  margin-top: 18px; max-width: 54ch; font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(10, 25, 49, 0.72);
}
.section--dark .lede, .section--ink .lede { color: rgba(246, 250, 253, 0.68); }
.head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 60px); }

/* --- nav ----------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(5, 11, 21, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(179, 207, 229, 0.14);
}
.nav__in {
  width: var(--shell); margin-inline: auto; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--mist); text-decoration: none; font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
}
/* The mark from the logo file. The wordmark is set in Inter beside it rather
   than drawn in the SVG, so the brand and the page share one typeface. */
.nav__mark { width: 27px; height: 26px; flex: none; display: block; }
.nav__word { font-weight: 400; letter-spacing: -0.015em; color: var(--sky); }
.nav__word b { font-weight: 650; color: var(--mist); }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a {
  color: rgba(246, 250, 253, 0.64); text-decoration: none; font-size: 14px;
  transition: color 180ms ease;
}
.nav__links a:hover { color: var(--mist); }
.nav__cta {
  padding: 8px 16px; border-radius: 999px; background: var(--sky);
  color: var(--midnight) !important; font-weight: 600; font-size: 13.5px;
}
.nav__cta:hover { background: var(--paper); }
@media (max-width: 780px) { .nav__links a:not(.nav__cta) { display: none; } }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer;
  font-family: inherit; transition: all 200ms var(--ease);
}
.btn--primary { background: var(--sky); color: var(--midnight); }
.btn--primary:hover { background: var(--paper); transform: translateY(-1px); }
.btn--ghost { border-color: rgba(179, 207, 229, 0.36); color: var(--sky); background: transparent; }
.btn--ghost:hover { background: rgba(179, 207, 229, 0.12); }
.btn--dark { background: var(--midnight); color: var(--mist); }
.btn--dark:hover { background: var(--deep); transform: translateY(-1px); }
.btn--line { border-color: rgba(20, 48, 76, 0.28); color: var(--deep); }
.btn--line:hover { background: var(--midnight); border-color: var(--midnight); color: var(--mist); }
.btn svg { transition: transform 220ms var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* --- badge --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(179, 207, 229, 0.38);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--sky);
}
.badge__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sky);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --- hero ---------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1000px 520px at 78% 12%, rgba(74, 127, 167, 0.30), transparent 62%),
    radial-gradient(700px 420px at 8% 88%, rgba(20, 48, 76, 0.7), transparent 60%),
    var(--ink);
  color: var(--mist); padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 8vw, 104px);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(179,207,229,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(179,207,229,0.05) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(700px 480px at 30% 40%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(700px 480px at 30% 40%, #000, transparent 78%);
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(36px, 5vw, 68px);
  align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin-top: 22px; font-size: clamp(38px, 5.6vw, 68px); color: var(--mist); }
.hero h1 em { font-style: normal; color: var(--sky); }
.hero__sub { margin-top: 22px; max-width: 46ch; color: rgba(246,250,253,0.7); font-size: clamp(16px,1.7vw,19px); }
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__facts {
  margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(179,207,229,0.16);
  display: flex; flex-wrap: wrap; gap: 12px;
}
.fact {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  color: rgba(246,250,253,0.72); padding: 7px 14px; border-radius: 999px;
  background: rgba(179,207,229,0.08); border: 1px solid rgba(179,207,229,0.14);
}
.fact svg { color: var(--sky); flex: none; }

/* --- device mock --------------------------------------------------------- */
.mock { position: relative; padding-bottom: 26px; }
.mock__screen {
  background: linear-gradient(170deg, #ffffff, #f2f6fa);
  border-radius: 16px; padding: 16px;
  box-shadow: 0 32px 70px rgba(2, 8, 18, 0.55), 0 0 0 1px rgba(179,207,229,0.16);
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.mock__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mock__title { font-size: 12px; font-weight: 700; color: var(--midnight); letter-spacing: -0.01em; }
.mock__chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: rgba(74,127,167,0.12); color: var(--deep);
}
.mock__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 10px;
}
.stat b { display: block; font-family: 'Fraunces', serif; font-weight: 400; font-size: 19px; color: var(--midnight); line-height: 1.1; }
.stat span { font-size: 9.5px; color: rgba(20,48,76,0.62); letter-spacing: 0.03em; }
.mock__panel { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 74px; margin-top: 10px; }
.bars i {
  flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--steel), var(--deep));
  transform-origin: bottom; animation: grow 1s var(--ease) backwards;
}
@keyframes grow { from { transform: scaleY(0.05); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.prog { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.prog__item { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; font-size: 10.5px; color: rgba(20,48,76,0.72); }
.prog__track { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: rgba(74,127,167,0.16); overflow: hidden; }
.prog__fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--steel), var(--sky)); }
.mock__phone {
  position: absolute; right: -6px; bottom: -6px; width: 158px;
  background: var(--midnight); border-radius: 20px; padding: 7px;
  box-shadow: 0 26px 50px rgba(2, 8, 18, 0.6), 0 0 0 1px rgba(179,207,229,0.18);
  animation: floaty 7s ease-in-out 0.9s infinite;
}
.mock__phone-in { background: var(--paper); border-radius: 14px; padding: 11px; }
.mock__phone h4 { margin: 0 0 8px; font-size: 10.5px; font-family: 'Inter', sans-serif; font-weight: 700; color: var(--midnight); letter-spacing: -0.01em; }
.tick { display: flex; align-items: center; gap: 7px; font-size: 9.5px; color: rgba(20,48,76,0.7); padding: 4px 0; }
.tick i {
  width: 13px; height: 13px; border-radius: 4px; flex: none; display: grid; place-items: center;
  background: rgba(74,127,167,0.14); color: var(--deep); font-size: 8px; font-style: normal;
}
.tick--done i { background: var(--deep); color: #fff; }
@media (max-width: 520px) { .mock__phone { width: 124px; right: -2px; } }

/* --- shift stage (today → with siteledger) ------------------------------- */
.toggle {
  display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px;
  background: rgba(20,48,76,0.07); border: 1px solid var(--line);
}
.toggle button {
  border: 0; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 20px; border-radius: 999px; cursor: pointer; color: rgba(20,48,76,0.6);
  transition: all 220ms var(--ease);
}
.toggle button[aria-pressed='true'] { background: var(--midnight); color: var(--mist); }

.stage {
  position: relative; margin-top: 32px; height: 420px; border-radius: 20px;
  background:
    radial-gradient(600px 300px at 50% 30%, rgba(74,127,167,0.10), transparent 70%),
    var(--paper);
  border: 1px solid var(--line); overflow: hidden;
}
.stage__card {
  position: absolute; left: 50%; top: 50%; width: min(330px, 78%);
  transform: translate(-50%, -50%) scale(0.94);
  background: var(--midnight); color: var(--mist); border-radius: 16px; padding: 18px;
  opacity: 0; transition: all 620ms var(--ease); pointer-events: none;
  box-shadow: 0 26px 54px rgba(5,11,21,0.28);
}
.stage.is-after .stage__card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.stage__card h4 { margin: 0; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.stage__card p { margin-top: 4px; font-size: 11.5px; color: rgba(246,250,253,0.6); }
.stage__list { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.stage__list div {
  display: flex; align-items: center; gap: 9px; font-size: 12px;
  padding: 8px 10px; border-radius: 9px; background: rgba(179,207,229,0.10);
  color: rgba(246,250,253,0.9);
}
.stage__list svg { color: var(--sky); flex: none; }

.note {
  position: absolute; left: 50%; top: 50%; width: 172px; padding: 12px 14px;
  border-radius: 12px; background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(5,11,21,0.10); font-size: 12px; color: var(--deep);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
  transition: all 620ms var(--ease); display: flex; gap: 9px; align-items: flex-start;
}
.note svg { flex: none; color: var(--steel); margin-top: 1px; }
.note > span { min-width: 0; overflow-wrap: anywhere; }
.note b { display: block; font-size: 11px; font-weight: 700; color: var(--midnight); }
.note span { font-size: 10.5px; color: rgba(20,48,76,0.55); line-height: 1.45; }
.stage.is-after .note {
  transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.55);
  opacity: 0;
}
/* On a phone there is no room to scatter anything. The six notes become a
   plain grid instead, and the collapse plays as a fade rather than a fly-in. */
@media (max-width: 900px) {
  .stage {
    height: auto; min-height: 392px; display: grid; grid-template-columns: 1fr 1fr;
    align-content: start; gap: 10px; padding: 18px;
  }
  .note {
    position: static; width: auto; padding: 11px 12px; transform: none;
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  }
  .stage.is-after .note { opacity: 0; transform: scale(0.94); visibility: hidden; }
  .stage__card { width: calc(100% - 36px); }
}
@media (max-width: 460px) {
  .stage { grid-template-columns: 1fr; min-height: 420px; }
}

/* --- loop ---------------------------------------------------------------- */
.loop { margin-top: 8px; }
.loop__track {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position: relative;
}
.loop__track::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: 27px; height: 2px;
  background: rgba(179,207,229,0.22);
}
.loop__node {
  position: relative; z-index: 2; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; color: inherit; padding: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.loop__dot {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); border: 2px solid rgba(179,207,229,0.28); color: rgba(179,207,229,0.7);
  transition: all 320ms var(--ease);
}
.loop__node[aria-selected='true'] .loop__dot {
  background: var(--sky); border-color: var(--sky); color: var(--midnight);
  transform: scale(1.1); box-shadow: 0 0 0 8px rgba(179,207,229,0.12);
}
.loop__label { font-size: 13px; font-weight: 600; color: rgba(246,250,253,0.55); transition: color 280ms ease; }
.loop__node[aria-selected='true'] .loop__label { color: var(--mist); }
.loop__panel {
  margin-top: 40px; border: 1px solid rgba(179,207,229,0.18); border-radius: 18px;
  padding: clamp(22px, 3vw, 34px); background: rgba(179,207,229,0.05);
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
}
.loop__num {
  font-family: 'Fraunces', serif; font-size: 46px; font-weight: 400; line-height: 1;
  color: rgba(179,207,229,0.4);
}
.loop__panel h3 { font-size: clamp(21px, 2.4vw, 28px); color: var(--mist); }
.loop__panel p { margin-top: 10px; color: rgba(246,250,253,0.7); max-width: 62ch; font-size: 16px; }
.loop__who {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--sky); padding: 5px 12px; border-radius: 999px; background: rgba(179,207,229,0.10);
}
@media (max-width: 720px) {
  .loop__track { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .loop__track::before { top: 21px; }
  .loop__dot { width: 42px; height: 42px; }
  .loop__dot svg { width: 17px; height: 17px; }
  .loop__label { font-size: 10.5px; }
  .loop__panel { grid-template-columns: 1fr; gap: 8px; }
  .loop__num { font-size: 32px; }
}

/* --- capability tiles ---------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tiles > * { grid-column: span 2; }
.tiles > *:nth-child(4), .tiles > *:nth-child(5) { grid-column: span 3; }
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles > *, .tiles > *:nth-child(4), .tiles > *:nth-child(5) { grid-column: span 1; }
  .tiles > *:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .tiles > *, .tiles > *:nth-child(5) { grid-column: span 1; }
}
.tile {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; transition: all 300ms var(--ease);
}
.tile:hover { transform: translateY(-3px); border-color: rgba(74,127,167,0.4); box-shadow: 0 16px 36px rgba(5,11,21,0.07); }
.tile__ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(179,207,229,0.5), rgba(74,127,167,0.22));
  color: var(--deep); margin-bottom: 16px;
}
.tile h3 { font-family: 'Inter', sans-serif; font-weight: 650; font-size: 16px; letter-spacing: -0.015em; }
.tile p { margin-top: 8px; font-size: 14.5px; color: rgba(20,48,76,0.68); line-height: 1.55; }
.locked {
  margin-top: 18px; display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px; border-radius: 14px; border: 1px dashed rgba(74,127,167,0.4);
  background: rgba(74,127,167,0.06); font-size: 14.5px; color: var(--deep);
}
.locked svg { color: var(--steel); flex: none; margin-top: 3px; }
.locked span { flex: 1 1 0; }

/* --- roles --------------------------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.pill {
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 9px 18px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: rgba(20,48,76,0.66); cursor: pointer; transition: all 200ms var(--ease);
}
.pill:hover { border-color: var(--steel); color: var(--deep); }
.pill[aria-selected='true'] { background: var(--midnight); border-color: var(--midnight); color: var(--mist); }

.role {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 52px);
  align-items: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: clamp(24px, 3.4vw, 40px);
}
@media (max-width: 860px) { .role { grid-template-columns: 1fr; } }
.role h3 { font-size: clamp(23px, 2.8vw, 32px); }
.role__sub { margin-top: 10px; color: rgba(20,48,76,0.66); }
.role__list { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.role__list div { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--deep); }
.role__list svg { flex: none; margin-top: 4px; color: var(--steel); }

.phone {
  background: var(--midnight); border-radius: 26px; padding: 9px;
  box-shadow: 0 22px 50px rgba(5,11,21,0.22); max-width: 268px; margin-inline: auto; width: 100%;
}
.phone__in { background: var(--mist); border-radius: 19px; overflow: hidden; }
.phone__top {
  background: var(--deep); color: var(--mist); padding: 13px 15px 15px;
}
.phone__top small { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
.phone__top h5 { margin: 3px 0 0; font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 650; letter-spacing: -0.01em; }
.phone__body { padding: 13px; display: flex; flex-direction: column; gap: 8px; min-height: 208px; }
.card-row {
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--deep); animation: slideUp 380ms var(--ease) backwards;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card-row b { font-weight: 650; font-size: 12px; color: var(--midnight); }
.card-row em { font-style: normal; font-size: 10px; color: rgba(20,48,76,0.5); display: block; }
.tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.tag--go { background: rgba(46,125,90,0.13); color: #2e7d5a; }
.tag--wait { background: rgba(191,132,33,0.14); color: #a06a12; }
.tag--flat { background: rgba(74,127,167,0.14); color: var(--deep); }

/* --- before / after rows -------------------------------------------------- */
.swaps { display: grid; gap: 12px; }
.swap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 22px;
}
.swap__before { color: rgba(20,48,76,0.55); font-size: 15px; }
.swap__after { font-size: 15.5px; font-weight: 600; color: var(--midnight); }
.swap__arrow { color: var(--steel); flex: none; }
@media (max-width: 620px) {
  .swap { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .swap__arrow { transform: rotate(90deg); }
}

/* --- estimator ----------------------------------------------------------- */
.est {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: 22px; overflow: hidden; border: 1px solid rgba(179,207,229,0.2);
  background: rgba(255,255,255,0.03);
}
@media (max-width: 900px) { .est { grid-template-columns: 1fr; } }
.est__controls { padding: clamp(24px, 3.2vw, 38px); border-right: 1px solid rgba(179,207,229,0.16); }
@media (max-width: 900px) { .est__controls { border-right: 0; border-bottom: 1px solid rgba(179,207,229,0.16); } }
.est__out { padding: clamp(24px, 3.2vw, 38px); background: rgba(179,207,229,0.06); }

.field { margin-bottom: 26px; }
.field:last-child { margin-bottom: 0; }
.field__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sky); margin-bottom: 12px;
}
.field__value { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 400; color: var(--mist); letter-spacing: -0.01em; }
.field__value small { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; opacity: 0.6; margin-left: 3px; letter-spacing: 0; text-transform: none; }

input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 99px;
  background: rgba(179,207,229,0.24); outline: none; cursor: pointer;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sky); border: 4px solid var(--midnight);
  box-shadow: 0 0 0 1px var(--sky); cursor: grab;
}
input[type='range']::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sky);
  border: 4px solid var(--midnight); box-shadow: 0 0 0 1px var(--sky); cursor: grab;
}
.scale { display: flex; justify-content: space-between; font-size: 10.5px; color: rgba(246,250,253,0.4); margin-top: 8px; }

.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  flex: 1 1 auto; min-width: 84px; border: 1px solid rgba(179,207,229,0.26); background: transparent;
  border-radius: 11px; padding: 11px 12px; font-family: inherit; cursor: pointer; text-align: left;
  color: rgba(246,250,253,0.72); transition: all 200ms var(--ease);
}
.opt:hover { border-color: var(--sky); }
.opt b { display: block; font-size: 13.5px; font-weight: 650; color: var(--mist); letter-spacing: -0.01em; }
.opt span { font-size: 10.5px; opacity: 0.62; }
.opt[aria-pressed='true'] { background: var(--sky); border-color: var(--sky); }
.opt[aria-pressed='true'] b, .opt[aria-pressed='true'] span { color: var(--midnight); }
.opt[aria-pressed='true'] span { opacity: 0.75; }

.est__total-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); }
.est__total {
  font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(42px, 6vw, 62px);
  line-height: 1; margin: 10px 0 6px; color: var(--mist); letter-spacing: -0.03em;
}
.est__range { font-size: 13.5px; color: rgba(246,250,253,0.55); }
.est__meta {
  margin: 24px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.est__meta div {
  border: 1px solid rgba(179,207,229,0.18); border-radius: 11px; padding: 11px 13px;
}
.est__meta b { display: block; font-family: 'Fraunces', serif; font-size: 20px; font-weight: 400; color: var(--mist); }
.est__meta span { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(246,250,253,0.5); }

.split { display: flex; height: 10px; border-radius: 99px; overflow: hidden; margin-bottom: 16px; background: rgba(179,207,229,0.14); }
.split i { display: block; transition: width 420ms var(--ease); }
.legend { display: flex; flex-direction: column; gap: 9px; }
.legend div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: rgba(246,250,253,0.72); }
.legend em { width: 10px; height: 10px; border-radius: 3px; display: block; }
.legend b { font-weight: 600; color: var(--mist); font-variant-numeric: tabular-nums; }
.disclaimer {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(179,207,229,0.16);
  font-size: 12.5px; color: rgba(246,250,253,0.5); line-height: 1.55;
}

.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 40px; }
.proof div { border: 1px solid rgba(179,207,229,0.18); border-radius: 14px; padding: 20px; background: rgba(179,207,229,0.05); }
.proof b { display: block; font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(22px,2.6vw,29px); color: var(--mist); line-height: 1.15; letter-spacing: -0.02em; }
.proof span { font-size: 12.5px; color: rgba(246,250,253,0.55); display: block; margin-top: 7px; }

.quote {
  margin-top: 40px; border-left: 2px solid var(--sky); padding: 6px 0 6px 24px;
}
.quote p { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(19px, 2.3vw, 25px); line-height: 1.4; color: var(--mist); letter-spacing: -0.02em; }
.quote footer { margin-top: 14px; font-size: 13px; color: rgba(246,250,253,0.55); }

/* --- build cards ---------------------------------------------------------- */
.builds { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }
.build {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column;
}
.build__step { font-family: 'Fraunces', serif; font-size: 13px; font-weight: 500; color: var(--steel); letter-spacing: 0.08em; }
.build h3 { margin-top: 14px; font-size: 22px; }
.build p { margin-top: 12px; font-size: 15px; color: rgba(20,48,76,0.68); }
.build ul { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.build li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--deep); }
.build li svg { flex: none; margin-top: 4px; color: var(--steel); }
.build__foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: rgba(20,48,76,0.55); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 40px; }
.step { position: relative; padding: 20px 20px 20px 22px; border-radius: 14px; background: rgba(20,48,76,0.05); }
.step b { display: block; font-size: 15px; font-weight: 650; color: var(--midnight); letter-spacing: -0.01em; }
.step span { font-size: 13.5px; color: rgba(20,48,76,0.62); }
.step i {
  position: absolute; top: 20px; right: 18px; font-style: normal;
  font-family: 'Fraunces', serif; font-size: 22px; color: rgba(74,127,167,0.35);
}

/* --- cta / footer --------------------------------------------------------- */
.cta { text-align: center; }
.cta h2 { font-size: clamp(32px, 4.6vw, 56px); color: var(--mist); }
.cta p { margin: 20px auto 0; max-width: 46ch; color: rgba(246,250,253,0.66); }
.cta__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.foot {
  background: var(--ink); color: rgba(246,250,253,0.5); padding: 34px 0;
  border-top: 1px solid rgba(179,207,229,0.12); font-size: 13px;
}
.foot__in { width: var(--shell); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.foot a { color: var(--sky); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* --- reveal on scroll ----------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT LAYER
   The sections below turn the page from a pitch into a document: the meta
   strip, the domain facts, the delivery decisions, the screens themselves,
   and the honest list of what it will not do.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- top rule + meta strip ------------------------------------------------ */
.docrule {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(179, 207, 229, 0.55); margin-bottom: 30px;
}
.docrule i { font-style: normal; opacity: 0.4; }

.metastrip {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(179, 207, 229, 0.16);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 760px) { .metastrip { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.metastrip div span {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(179, 207, 229, 0.5); margin-bottom: 6px;
}
.metastrip div b { font-size: 13.5px; font-weight: 500; color: rgba(246, 250, 253, 0.9); letter-spacing: -0.01em; }

/* --- domain facts --------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr; } }
.factcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column;
}
.factcard__n {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 18px;
}
.factcard h3 { font-family: 'Inter', sans-serif; font-weight: 650; font-size: 17px; letter-spacing: -0.02em; line-height: 1.3; }
.factcard p { margin-top: 12px; font-size: 14.5px; color: rgba(20, 48, 76, 0.68); line-height: 1.6; }
.factcard__proof {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--deep); display: flex; gap: 9px; align-items: flex-start;
}
.factcard__proof svg { flex: none; margin-top: 2px; color: var(--steel); }

/* --- two shells ----------------------------------------------------------- */
.shells { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .shells { grid-template-columns: 1fr; } }
.shell-card {
  border: 1px solid rgba(179, 207, 229, 0.2); border-radius: 18px; padding: 28px;
  background: rgba(179, 207, 229, 0.05);
}
.shell-card__tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--sky); padding: 4px 10px; border-radius: 999px;
  background: rgba(179, 207, 229, 0.12); margin-bottom: 18px;
}
.shell-card h3 { font-family: 'Inter', sans-serif; font-weight: 650; font-size: 18px; color: var(--mist); letter-spacing: -0.02em; }
.shell-card p { margin-top: 10px; font-size: 14.5px; color: rgba(246, 250, 253, 0.66); }
.shell-card ul { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.shell-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: rgba(246, 250, 253, 0.82); }
.shell-card li svg { flex: none; margin-top: 4px; color: var(--sky); }

.gate {
  margin-top: 14px; border: 1px dashed rgba(179, 207, 229, 0.3); border-radius: 16px;
  padding: 22px 26px; display: flex; gap: 16px; align-items: flex-start;
  background: rgba(5, 11, 21, 0.35);
}
.gate svg { flex: none; margin-top: 3px; color: var(--sky); }
.gate b { color: var(--mist); font-weight: 650; }
.gate span { font-size: 14.5px; color: rgba(246, 250, 253, 0.66); line-height: 1.6; }

/* --- decision table ------------------------------------------------------- */
.tablewrap { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(179, 207, 229, 0.18); }
.dtable { width: 100%; border-collapse: collapse; min-width: 640px; }
.dtable th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--sky); padding: 15px 20px;
  background: rgba(179, 207, 229, 0.08); border-bottom: 1px solid rgba(179, 207, 229, 0.16);
}
.dtable td {
  padding: 18px 20px; font-size: 14.5px; color: rgba(246, 250, 253, 0.68);
  border-bottom: 1px solid rgba(179, 207, 229, 0.1); vertical-align: top; line-height: 1.55;
}
.dtable tr:last-child td { border-bottom: 0; }
.dtable td:first-child { color: var(--mist); font-weight: 600; width: 27%; }
.dtable td:last-child { color: var(--sky); width: 24%; }

/* --- screen documents ----------------------------------------------------- */
.screen { margin-bottom: clamp(38px, 5vw, 62px); }
.screen:last-of-type { margin-bottom: 0; }
.screen__head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.screen__code {
  flex: none; font-family: 'Fraunces', serif; font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--steel); padding-top: 5px;
}
.screen__head h3 { font-size: clamp(20px, 2.4vw, 27px); }
.screen__head p { margin-top: 10px; font-size: 15.5px; color: rgba(20, 48, 76, 0.68); max-width: 62ch; }
.section--dark .screen__head p { color: rgba(246, 250, 253, 0.66); }
.screen__meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 22px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
@media (max-width: 700px) { .screen__meta { grid-template-columns: repeat(2, 1fr); } }
.screen__meta div { background: var(--paper); padding: 13px 16px; }
.screen__meta span {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--steel); margin-bottom: 4px;
}
.screen__meta b { font-size: 13px; font-weight: 500; color: var(--midnight); letter-spacing: -0.01em; }
.screen__frame {
  border-radius: 18px; padding: clamp(18px, 3vw, 34px);
  background: linear-gradient(165deg, #dfe8f0, #eef3f8);
  border: 1px solid var(--line); display: flex; justify-content: center;
}

/* browser-chrome mock (office) */
.win { width: 100%; max-width: 780px; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px rgba(5,11,21,0.16); }
.win__bar {
  background: #dbe4ec; padding: 9px 12px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(20,48,76,0.1);
}
.win__dots { display: flex; gap: 5px; }
.win__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(20,48,76,0.2); display: block; }
.win__url {
  flex: 1; background: var(--paper); border-radius: 6px; padding: 4px 10px;
  font-size: 10.5px; color: rgba(20,48,76,0.55); text-align: center;
}
.win__body { background: var(--mist); display: grid; grid-template-columns: 152px 1fr; min-height: 300px; }
@media (max-width: 620px) { .win__body { grid-template-columns: 1fr; } .win__side { display: none; } }
.win__side { background: var(--midnight); padding: 14px 12px; }
.win__side h6 {
  margin: 0 0 14px; font-size: 11px; font-weight: 700; color: var(--mist);
  font-family: 'Inter', sans-serif; letter-spacing: -0.01em; display: flex; align-items: center; gap: 7px;
}
.win__side h6 em {
  font-style: normal; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center;
  background: var(--sky); color: var(--midnight); font-family: 'Fraunces', serif; font-size: 11px;
}
.win__nav { display: flex; flex-direction: column; gap: 3px; }
.win__nav span {
  font-size: 10.5px; color: rgba(246,250,253,0.5); padding: 6px 9px; border-radius: 6px;
}
.win__nav span.on { background: rgba(179,207,229,0.16); color: var(--mist); font-weight: 600; }
/* A grid item defaults to min-width:auto, so the five-column table inside was
   forcing the whole window wider than the phone and getting clipped. Let the
   column shrink, and let the table scroll inside it instead. */
.win__main { padding: 16px; min-width: 0; }
@media (max-width: 620px) {
  .win__main { overflow-x: auto; }
  .wtable { min-width: 372px; }
}
.win__h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px;
}
.win__h b { font-size: 14px; font-weight: 650; color: var(--midnight); letter-spacing: -0.02em; }
.win__h small { font-size: 10px; color: rgba(20,48,76,0.5); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 13px; }
@media (max-width: 520px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; }
.kpi b { display: block; font-family: 'Fraunces', serif; font-weight: 400; font-size: 19px; color: var(--midnight); line-height: 1.15; }
.kpi span { font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(20,48,76,0.52); }
.wtable { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wtable th {
  text-align: left; font-size: 8.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(20,48,76,0.5); font-weight: 700; padding: 8px 11px; border-bottom: 1px solid var(--line);
}
.wtable td { padding: 9px 11px; font-size: 11px; color: var(--deep); border-bottom: 1px solid rgba(20,48,76,0.07); }
.wtable tr:last-child td { border-bottom: 0; }
.wtable td b { font-weight: 650; color: var(--midnight); }
.minibar { width: 62px; height: 5px; border-radius: 99px; background: rgba(74,127,167,0.18); display: inline-block; vertical-align: middle; }
.minibar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--steel), var(--sky)); }

/* phone mock (site) */
.phone--doc { max-width: 292px; }
.phone__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px 0; font-size: 9px; color: rgba(246,250,253,0.6);
}
.chipline { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.chipline i { width: 6px; height: 6px; border-radius: 50%; background: #5fbf8f; display: block; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.act {
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 10px; display: flex; flex-direction: column; gap: 7px;
}
.act svg { color: var(--deep); }
.act span { font-size: 10.5px; font-weight: 600; color: var(--midnight); line-height: 1.25; letter-spacing: -0.01em; }
.act--primary { background: var(--deep); border-color: var(--deep); }
.act--primary svg { color: var(--sky); }
.act--primary span { color: var(--mist); }
.subhead {
  font-size: 9px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(20,48,76,0.45); margin: 4px 0 2px;
}
.field-row {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; font-size: 11px; color: var(--deep);
}
.field-row b { display: block; font-size: 10px; font-weight: 650; color: rgba(20,48,76,0.55); letter-spacing: 0.02em; margin-bottom: 4px; text-transform: uppercase; font-size: 8.5px; }
.field-row em { font-style: normal; font-size: 11.5px; color: var(--midnight); font-weight: 500; }
.photos { display: flex; gap: 5px; }
.photos i {
  flex: 1; height: 34px; border-radius: 7px; display: block;
  background: linear-gradient(150deg, rgba(74,127,167,0.35), rgba(20,48,76,0.5));
}
.photos i:last-child {
  background: rgba(74,127,167,0.1); border: 1px dashed rgba(74,127,167,0.4);
}
.btn-mock {
  background: var(--midnight); color: var(--mist); border-radius: 9px; text-align: center;
  padding: 10px; font-size: 11px; font-weight: 650; letter-spacing: -0.01em;
}

.screen__note {
  margin-top: 14px; font-size: 13px; color: rgba(20,48,76,0.55); display: flex; gap: 9px; align-items: flex-start;
}
.section--dark .screen__note { color: rgba(246,250,253,0.5); }
.screen__note svg { flex: none; margin-top: 3px; color: var(--steel); }

/* --- yours to change ------------------------------------------------------ */
/* Six items, so three across and three across. auto-fit left a five-plus-one
   row with a bare grey gutter beside it. */
.yours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (max-width: 880px) { .yours { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .yours { grid-template-columns: 1fr; } }
.yours div { background: var(--paper); padding: 20px 22px; }
.yours b { display: block; font-size: 15px; font-weight: 650; color: var(--midnight); letter-spacing: -0.015em; }
.yours p { margin-top: 6px; font-size: 13.5px; color: rgba(20,48,76,0.62); }
.yours em {
  display: inline-block; margin-top: 12px; font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--steel);
  padding: 3px 9px; border-radius: 999px; background: rgba(74,127,167,0.1);
}

/* --- not doing ------------------------------------------------------------ */
.nots { display: flex; flex-wrap: wrap; gap: 8px; }
.nots span {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px;
  color: rgba(246,250,253,0.62); padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(179,207,229,0.16); background: rgba(179,207,229,0.04);
}
.nots span svg { color: rgba(179,207,229,0.45); flex: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ENTRY NOTICE
   Shown once per visit. It says the thing a reader will otherwise work out
   halfway down and feel misled by: the demo is not live yet.
   ═══════════════════════════════════════════════════════════════════════════ */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 24px;
}
.modal__scrim {
  position: absolute; inset: 0; background: rgba(5, 11, 21, 0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 260ms ease both;
}
.modal__card {
  position: relative; width: min(486px, 100%);
  background:
    radial-gradient(560px 300px at 80% -10%, rgba(74, 127, 167, 0.30), transparent 62%),
    var(--midnight);
  color: var(--mist); border: 1px solid rgba(179, 207, 229, 0.2);
  border-radius: 20px; padding: clamp(26px, 4vw, 38px);
  box-shadow: 0 40px 90px rgba(2, 8, 18, 0.55);
  animation: popIn 380ms var(--ease) both;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

.modal__x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid rgba(179, 207, 229, 0.22);
  background: transparent; color: rgba(246, 250, 253, 0.6); cursor: pointer;
  display: grid; place-items: center; font-family: inherit;
  transition: all 180ms var(--ease);
}
.modal__x:hover { background: rgba(179, 207, 229, 0.14); color: var(--mist); }

.modal__card h2 {
  margin-top: 18px; font-size: clamp(25px, 3.4vw, 33px); color: var(--mist);
}
.modal__card p { margin-top: 14px; font-size: 15px; color: rgba(246, 250, 253, 0.7); line-height: 1.62; }
.modal__list { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.modal__list li {
  display: flex; gap: 11px; align-items: flex-start; font-size: 14px;
  color: rgba(246, 250, 253, 0.86);
}
.modal__list svg { flex: none; margin-top: 3px; color: var(--sky); }
.modal__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.modal__foot {
  margin-top: 20px !important; padding-top: 16px;
  border-top: 1px solid rgba(179, 207, 229, 0.14);
  font-size: 12.5px !important; color: rgba(246, 250, 253, 0.45) !important;
}
body.is-locked { overflow: hidden; }