/* ===== styles.css ===== */
:root {
  /* Porcelain & Sage — locked brand system */
  --navy: #182a3d;        /* ink slate: headlines, dark panels */
  --navy-2: #22384f;      /* slate lift for gradients */
  --sky-dark: #3d566e;
  --sky: #dce4dc;         /* mist tertiary tint */
  --gold: #e2b04c;
  --cream: #f7f6f1;       /* porcelain page background */
  --text: #212a33;
  --muted: #64707d;
  --border: #e6e5dd;
  --shadow: 0 14px 38px rgba(24, 42, 61, 0.05);
  --accent: #8faf8b;      /* sage: buttons, fills, graphics */
  --accent-ink: #5f7d5c;  /* text-safe sage for small type on light */
  --accent-soft: #a9c4a6;
  --paper: #fdfdfb;
  --grey-card: #eef0ea;
  --font-head: 'Plus Jakarta Sans', Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

img {
  max-width: 100%;
}

.container {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  background: rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px);
  z-index: 20;
}

.nav-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.brand {
  text-decoration: none;
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
}

.nav-cta,
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.95rem 1.2rem;
}

.nav-cta {
  color: var(--navy);
}

.btn-primary {
  background: var(--navy);
  color: white;
}

.btn-primary .arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: transform 0.2s ease;
}

.btn-primary:hover .arrow {
  transform: translateX(3px);
}

.btn-secondary {
  color: var(--navy);
  background: var(--cream);
}

.hero {
  --forest: #14243a;
  --forest-2: #22384f;
  --lime: #8faf8b;
  display: flex;
  min-height: 100svh;
  padding: clamp(10px, 1.5vw, 18px);
  background: var(--cream);
}

.hero__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  padding: clamp(1.1rem, 2.4vw, 2.1rem) clamp(1.1rem, 2.6vw, 2.4rem);
  background:
    radial-gradient(58% 42% at 88% 100%, rgba(20, 36, 58, 0.52), transparent 72%),
    linear-gradient(105deg, rgba(20, 36, 58, 0.6) 0%, rgba(20, 36, 58, 0.28) 42%, rgba(20, 36, 58, 0) 72%),
    linear-gradient(180deg, rgba(20, 36, 58, 0.14) 0%, rgba(20, 36, 58, 0) 35%, rgba(20, 36, 58, 0.32) 100%),
    url("/assets/b2e0f12901674aac.jpg") center 30% / cover no-repeat;
  color: #fff;
}

.hero__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--forest-2);
  mix-blend-mode: color;
  opacity: 0.16;
}

.hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.13;
}

.hero__card > * {
  position: relative;
  z-index: 1;
}

.hero__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3.5vw, 3rem);
}

.hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.hero__logo {
  height: 36px;
  width: auto;
  display: block;
}

.hero__logo--ink {
  display: none;
}

.hero__links {
  list-style: none;
  display: flex;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin: 0;
  padding: 0;
}

.hero__links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
}

.hero__links a:hover {
  color: #fff;
}

.hero__pill {
  margin-left: auto;
  background: #fff;
  color: var(--forest);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.72rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.hero__pill:hover {
  transform: translateY(-1px);
}

.hero__lead {
  margin-top: clamp(2.2rem, 6vh, 4.2rem);
}

.hero__headline {
  max-width: 19ch;
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.25rem, 4.9vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: #fff;
}

.hero__headline em {
  font-style: italic;
  color: var(--accent-soft);
}

.cta-card h2 em {
  font-style: italic;
  color: var(--accent-soft);
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(1.4rem, 3vh, 2rem);
  background: var(--forest);
  color: #fff;
  border-radius: 999px;
  padding: 0.45rem 1.45rem 0.45rem 0.45rem;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(10, 20, 36, 0.55);
}

.hero__btn .arr {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lime);
  transition: transform 0.2s ease;
}

.hero__btn .arr svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--forest);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__btn:hover .arr {
  transform: translateX(3px);
}

.hero__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: clamp(2rem, 5vh, 3.5rem);
}

.hero__tagline {
  max-width: 22rem;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
}

.hero__scroll:hover {
  color: #fff;
}

.hero__scroll svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__partners {
  text-align: left;
}

.hero__partners-cap {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.6rem;
}

.hero__partners-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  white-space: nowrap;
}

.hero__panel {
  background: #fff;
  border-radius: 28px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.28);
  min-height: 420px;
}

.hero__panel__head {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.6rem;
}

.hero__panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.hero__panel__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background: #f8f8f8;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
}

.hero__panel__item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(20, 33, 61, 0.14);
}

.hero__panel__item--active {
  border: 1px solid #7be0a6;
  background: rgba(123, 224, 166, 0.12);
}

.hero__panel__item--active::before {
  background: #7be0a6;
}

.hero__sub {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.6;
  margin: 1.2rem 0 0;
  max-width: 34rem;
}

.hero__rev__txt {
  color: rgba(255, 255, 255, 0.9);
}

.hero__rev__txt b {
  color: #fff;
}

.hero__rev__go {
  background: rgba(255, 255, 255, 0.12);
}

.hero__rev:hover .hero__rev__go {
  background: rgba(255, 255, 255, 0.18);
}

.hero__logos {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
}

.case-rail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: clamp(1.3rem, 2.4vw, 1.9rem);
  margin-bottom: clamp(1.5rem, 2.8vw, 2.2rem);
  border-bottom: 1px solid var(--border);
}

.case-rail__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  box-shadow: 0 12px 26px -16px rgba(18, 30, 58, 0.6);
}

.case-rail__tag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7be0a6;
}

.case-rail__proof {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.34rem 0.85rem 0.34rem 0.4rem;
  box-shadow: 0 10px 24px -18px rgba(18, 30, 58, 0.4);
}

.case-rail__avs {
  display: flex;
}

.case-rail__avs img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -9px;
  border: 2px solid #fff;
}

.case-rail__avs img:first-child {
  margin-left: 0;
}

.case-rail__rev {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
}

.case-rail__rev .stars {
  color: var(--gold);
  font-weight: 700;
}

.case-rail__file {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid #d6dee8;
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  background: rgba(234, 239, 247, 0.55);
}

.hero__wm {
  position: absolute;
  top: clamp(4.5rem, 11vw, 8.5rem);
  right: -2%;
  z-index: 0;
  font-weight: 800;
  font-size: clamp(7rem, 19vw, 16.5rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(20, 33, 61, 0.06);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  column-gap: clamp(1.3rem, 2.8vw, 2.4rem);
  row-gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
}

.hero__intro {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 1rem;
}

.hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.hero__title {
  font-size: clamp(2.05rem, 4.4vw, 3.45rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  margin: 0 0 1rem;
  max-width: 13ch;
  color: var(--navy);
}

.hero__sub {
  color: var(--text);
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.7;
  margin: 0 0 1.7rem;
  max-width: 33rem;
}

.hero__cta {
  margin-top: 1rem;
}

..hero__rev {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
  padding: 0.95rem 1.1rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 999px;
  box-shadow: 0 22px 40px -24px rgba(18, 30, 58, 0.33);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero__rev:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 48px -26px rgba(18, 30, 58, 0.35);
}

.hero__rev__avs {
  display: flex;
  align-items: center;
}

.hero__rev__avs img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -10px;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px -3px rgba(18, 30, 58, 0.45);
}

.hero__rev__avs img:first-child {
  margin-left: 0;
}

.hero__rev__txt {
  font-size: 0.88rem;
  line-height: 1.3;
}

.hero__rev__txt b {
  color: var(--navy);
}

.hero__rev__go {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(20, 33, 61, 0.07);
}

.hero__rev__go svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--sky-dark);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__verify {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 24px;
  padding: 1rem 1.15rem;
  box-shadow: 0 26px 66px -42px rgba(20, 33, 61, 0.25);
}

.hero__verify span {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text);
}

.hero__verify .ic {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  flex: 0 0 auto;
  background: rgba(20, 33, 61, 0.08);
}

.hero__verify .ic svg {
  width: 16px;
  height: 16px;
  stroke: var(--navy);
  stroke-width: 2.2;
  fill: none;
}

.stage {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-height: clamp(498px, 44vw, 588px);
}

.stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -6%;
  top: -6%;
  width: 84%;
  height: 118%;
  background: radial-gradient(circle at 44% 42%, rgba(20, 33, 61, 0.16), transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}

.docs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}

.doc {
  position: absolute;
  background: #fbf7ee;
  border: 1px solid #e7e0d1;
  border-radius: 5px;
  box-shadow: 0 28px 54px -30px rgba(18, 30, 58, 0.45);
  padding: 13px 15px;
  overflow: hidden;
}

.doc__h {
  display: block;
  font-weight: 700;
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b6ae9b;
  margin-bottom: 9px;
}

.doc__row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.lab {
  height: 5px;
  border-radius: 3px;
  background: #e5dfcf;
  flex: 0 0 28%;
}

.doc__bar {
  height: 9px;
  border-radius: 2px;
  background: #222a40;
  opacity: 0.9;
}

.w1 { width: 46%; }
.w2 { width: 62%; }
.w3 { width: 34%; }

.doc--report {
  width: 44%;
  top: -14px;
  right: 3%;
  transform: rotate(4deg);
}

.evidence {
  position: absolute;
  left: 0;
  top: 4%;
  z-index: 3;
  width: 64%;
  background: linear-gradient(165deg, #193258 0%, #0a1630 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 11px;
  box-shadow: 0 56px 108px -44px rgba(10, 21, 48, 0.76), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.hvid {
  position: relative;
  aspect-ratio: 1.34;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(150deg, #14274f, #0a1530);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.6);
}

.hvid__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
  background: linear-gradient(180deg, rgba(10, 21, 48, 0.06) 0%, rgba(10, 21, 48, 0.5) 100%);
}

.pbtn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 36px -10px rgba(0,0,0,0.55);
  border: 0;
  cursor: pointer;
}

.pbtn svg {
  width: 26px;
  height: 26px;
  fill: var(--navy);
}

.hvid__id {
  position: absolute;
  left: 11px;
  bottom: 11px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 0.48rem 0.8rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(10, 21, 48, 0.04), rgba(10, 21, 48, 0.7));
  backdrop-filter: blur(3px);
  border-left: 3px solid var(--accent);
}

.hvid__id b {
  font-weight: 700;
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.12;
}

.hvid__id span {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.78);
  margin-top: 1px;
}

.evidence__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.3rem 0.15rem;
}

.evidence__meta .m {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.8);
}

.evidence__meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7be0a6;
}

.evidence__meta .dur {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}

.qnote {
  position: absolute;
  left: 24%;
  bottom: 9%;
  z-index: 6;
  width: 34%;
  min-width: 188px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0.95rem 1.1rem 0.9rem;
  box-shadow: 0 28px 52px -20px rgba(16,34,82,.5);
}

.qnote__lab {
  display: block;
  font-weight: 700;
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.qnote q {
  font-style: italic;
  font-size: 0.96rem;
  color: var(--navy);
  line-height: 1.34;
}

.filesheet {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: 40%;
  min-width: 240px;
  background: #fbf7ee;
  border: 1px solid #e7e0d1;
  border-radius: 8px;
  padding: clamp(1rem,1.3vw,1.25rem) clamp(1rem,1.3vw,1.2rem) clamp(1.05rem,1.4vw,1.3rem);
  box-shadow: 0 36px 66px -28px rgba(16,34,82,.5), 6px 8px 0 -2px #fbf7ee, 6px 8px 0 -1px #e7e0d1, 12px 15px 0 -3px #fbf7ee, 12px 15px 0 -2px #e7e0d1;
}

.filesheet__tab {
  position: absolute;
  top: -18px;
  left: 16px;
  background: linear-gradient(120deg,#1a2f58,#14274f);
  color: #fff;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.42rem 0.8rem;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -3px 12px -5px rgba(16,34,82,.5);
}

.filesheet__client {
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:.15rem 0 .75rem;
}

.filesheet__client .ph {
  width:32px;
  height:32px;
  border-radius:50%;
  flex:0 0 auto;
  background: linear-gradient(150deg,var(--accent),var(--navy));
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:.82rem;
}

.filesheet__client b {
  display:block;
  font-weight:700;
  color:var(--navy);
  font-size:.86rem;
  line-height:1.12;
}

.filesheet__client span {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.68rem;
  color:var(--muted);
}

.filesheet__client span svg {
  width:10px;
  height:10px;
  fill:none;
  stroke:var(--accent);
  stroke-width:3;
}

.dotsep {
  border-top:1px dotted #cfc7b6;
  margin:.15rem 0 .7rem;
}

.frow {
  display:flex;
  align-items:baseline;
  gap:.55rem;
  margin-bottom:.5rem;
}

.frow .dt {
  font-weight:700;
  font-size:.52rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  flex:0 0 32%;
}

.frow .dd {
  font-size:.76rem;
  color:var(--text);
  line-height:1.3;
}

@media (max-width: 920px) {
  .hero__links {
    display: none;
  }

  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }
}

/* Stacked hero: text on porcelain, photo as its own card */
@media (max-width: 760px) {
  .hero {
    min-height: auto;
    padding: 12px 14px 0;
  }

  .hero__card {
    background: none;
    color: var(--navy);
    padding: 0.6rem 0.1rem 0;
    border-radius: 0;
    overflow: visible;
  }

  .hero__card::before,
  .hero__card::after {
    display: none;
  }

  .hero__brand {
    color: var(--navy);
  }

  .hero__logo--light {
    display: none;
  }

  .hero__logo--ink {
    display: block;
    height: 32px;
  }

  .hero__pill {
    background: var(--navy);
    color: #fff;
  }

  .hero__lead {
    margin-top: 2.2rem;
  }

  .hero__headline {
    color: var(--navy);
  }

  .hero .hero__subline {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0.7rem 0 0;
  }

  .hero .hero__soft {
    color: var(--muted);
    text-align: center;
  }

  .hero__scroll {
    color: rgba(255, 255, 255, 0.85);
  }

  .hero__foot {
    display: none;
  }

  .hero__foot-l {
    display: block;
  }

  .hero__tagline {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9rem;
    max-width: 21rem;
    margin-bottom: 0.9rem;
  }

  .hero__headline {
    font-size: clamp(2.3rem, 10vw, 2.8rem);
    line-height: 1.07;
    letter-spacing: -0.025em;
  }

  .hero .hero__headline em {
    color: var(--accent-ink);
  }

  .hero__btn {
    width: 100%;
    justify-content: center;
    margin-top: 0.9rem;
  }

  /* The soft-pull line stays on mobile. It sits directly under the button on
     the one viewport paid traffic actually lands on, and it is the line that
     removes the flinch before the tap. */
  .hero .hero__soft {
    display: block;
  }

  .hero .hero__grev {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
  }

  .hero .hero__grev svg {
    width: 17px;
    height: 17px;
  }

  .hero .hero__grev .stars {
    color: #fbbc05;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    line-height: 1;
  }

  .hero .hero__grev .t {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
  }

  .section {
    padding: 3.4rem 0;
  }

  .stat {
    flex-direction: row;
    align-items: baseline;
    gap: 1.1rem;
    padding-left: 0;
    padding-top: 1.1rem;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .stat__n {
    font-size: 1.9rem;
    min-width: 4.3rem;
  }

  .stat__n::after {
    display: none;
  }

  .stat-band {
    padding: 1.9rem 0 2.1rem;
  }

  .fee-panel {
    border-radius: 22px;
    padding: 1.7rem 1.4rem;
  }

  .cta-card {
    border-radius: 22px;
    padding: 1.6rem 1.3rem 1.8rem;
  }

  .cta-side {
    width: 100%;
    text-align: left;
  }

  .btn-tangerine {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .hero__headline {
    font-size: clamp(2rem, 8.4vw, 2.4rem);
    line-height: 1.1;
  }

  .hero__pill {
    padding: 0.6rem 1.1rem;
  }

  .hero__tagline {
    margin-bottom: 1.1rem;
  }

  .hero__partners-row {
    gap: 1rem;
    font-size: 0.94rem;
  }
}

.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

h1,
h2,
h3 {
  line-height: 1.08;
  margin: 0 0 0.8rem;
}

h1 {
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  color: var(--navy);
}

h2,
.section-title {
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.028em;
  /* Even out the rag. Without this, "Cards charge interest on your interest.
     A fixed loan counts down." strands the "A" at the end of line two. */
  text-wrap: balance;
}

.section-intro {
  max-width: 44rem;
}

.card h3 {
  font-weight: 600;
}

.hero-subhead,
.section-copy,
.split-copy p,
.how-card p,
.info-card li,
.faq-list p,
.cta-card p {
  color: var(--muted);
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.soft-pull {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.hero-card,
.card,
.faq-list details,
.cta-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.hero-card {
  padding: 1.6rem;
}

.hero-card-top {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}

.hero-card ul,
.info-card ul {
  padding-left: 1.1rem;
  margin: 0 0 1.2rem;
}

.trust-bar {
  background: var(--navy);
  padding: 1rem 0;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  color: white;
  font-weight: 600;
}

.trust-strip > div {
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  text-align: center;
  font-size: 0.95rem;
}

.section {
  padding: clamp(4.5rem, 8vw, 6rem) 0;
}

.section-light {
  background: var(--cream);
}

.section-alt {
  background: var(--paper);
}

.section-intro {
  margin-bottom: 2rem;
}

.card-grid,
.split-grid {
  display: grid;
  gap: 1rem;
}

.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.how-card,
.info-card,
.split-card {
  padding: 1.3rem;
}

.step-no {
  display: inline-block;
  color: var(--navy);
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.split-grid {
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
}

.info-card {
  background: #ecf1eb;
  border-color: #d6dfd5;
}

.info-card.alt {
  background: var(--cream);
  border-color: var(--border);
}

.faq-list {
  display: grid;
  gap: 0;
  max-width: 56rem;
}

.faq-list details {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--border);
  padding: 1.5rem 0.2rem;
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--border);
}

.faq-list summary {
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--navy);
  letter-spacing: -0.01em;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-ink);
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list details p {
  margin: 0.9rem 0 0.2rem;
  max-width: 60ch;
  line-height: 1.7;
}

.faq-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.faq-lede {
  max-width: 26rem;
  margin: 1.1rem 0 1.8rem;
  color: var(--muted);
  line-height: 1.65;
}

.faq-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-ghost:hover {
  background: var(--navy);
  color: #fff;
}

.faq-pills {
  gap: 0.85rem;
  max-width: none;
}

.faq-pills details.fp {
  border: 0;
  border-radius: 20px;
  padding: 1.25rem 1.5rem;
  transition: border-radius 0.2s ease;
}

.faq-pills details.fp:last-child {
  border-bottom: 0;
}

.faq-pills details.fp summary {
  font-weight: 600;
  align-items: center;
}

.faq-pills details.fp summary::after {
  display: none;
}

.fp .tgl {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 4px 12px -6px rgba(24, 42, 61, 0.3);
}

.fp .tgl::before {
  content: "+";
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
}

.fp[open] .tgl::before {
  content: "\2212";
}

.fp p {
  max-width: 54ch;
}

.faq-pills .fp--slate {
  background: #d9e1ea;
}

.faq-pills .fp--stone {
  background: #ece9de;
}

.faq-pills .fp--sagemist {
  background: #e6eee4;
}

.faq-pills .fp--sage {
  background: #a9c4a6;
}

.faq-pills .fp--mist {
  background: #dce4dc;
}

.fp--slate summary,
.fp--stone summary,
.fp--sagemist summary,
.fp--sage summary,
.fp--mist summary {
  color: var(--navy);
}

.fp--slate p,
.fp--stone p,
.fp--sagemist p,
.fp--sage p,
.fp--mist p {
  color: #37424e;
}

.faq-pills .fp--ink {
  background: var(--navy);
}

.fp--ink summary {
  color: #fff;
}

.fp--ink p {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 980px) {
  .faq-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.faq-list summary {
  cursor: pointer;
  font-weight: 600;
}

.final-cta {
  padding-top: 1rem;
}

.cta-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f2f1ea;
  border: 1px solid #e8e6db;
  border-radius: 28px;
  padding: clamp(2.2rem, 4.5vw, 3.5rem);
}

.cta-card::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 48% at 24% 30%, rgba(34, 56, 79, 0.22), transparent 68%),
    radial-gradient(40% 52% at 74% 78%, rgba(143, 175, 139, 0.34), transparent 66%),
    radial-gradient(30% 38% at 88% 18%, rgba(143, 175, 139, 0.16), transparent 70%);
  filter: blur(24px);
  animation: aurora-light 18s ease-in-out infinite alternate;
}

.cta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.55;
}

@keyframes aurora-light {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(4%, -5%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-card::before {
    animation: none;
  }
}

.cta-card__content {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.cta-card__content .btn-tangerine {
  margin-top: 1.5rem;
}

.cta-figure {
  position: absolute;
  right: clamp(2rem, 6vw, 5.5rem);
  bottom: 0;
  height: 108%;
  width: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 24px 40px rgba(6, 14, 26, 0.4));
}

/* Dark panels: near-monochrome buttons, sage reduced to one accent point */
.fee-panel .btn-tangerine {
  background: #fdfdfb;
  color: var(--navy);
}

.fee-panel .btn-tangerine .arr {
  background: var(--accent);
}

.fee-panel .btn-tangerine .arr svg {
  stroke: var(--navy);
}

.cta-card .btn-tangerine {
  background: var(--navy);
  color: #fff;
}

.cta-card .btn-tangerine .arr {
  background: var(--accent);
}

.cta-card .btn-tangerine .arr svg {
  stroke: var(--navy);
}

.cta-card h2 em {
  color: var(--accent-ink);
}

@media (max-width: 980px) {
  .cta-card {
    display: flex;
    flex-direction: column;
  }

  .cta-card__content {
    max-width: none;
    text-align: center;
  }

  .cta-figure {
    position: relative;
    z-index: 1;
    display: block;
    height: auto;
    width: min(68%, 300px);
    margin: 1.3rem 0 0 auto;
    filter: none;
  }
}

.cta-card h2 {
  color: var(--navy);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.cta-card p {
  color: var(--muted);
  max-width: 36rem;
}

.cta-card .cta-soft {
  color: var(--muted);
}

.site-footer {
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--border);
  background: var(--cream);
}

.footer-wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.blk-team-spotlight {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  overflow: hidden;
}

.blk-team-spotlight .tsp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.blk-team-spotlight .tsp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.blk-team-spotlight .tsp-headL {
  max-width: 42rem;
}

.blk-team-spotlight .tsp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1rem;
}

.blk-team-spotlight .tsp-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.blk-team-spotlight .tsp-title {
  font-weight: 600;
  color: var(--text);
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  margin: 0;
}

.blk-team-spotlight .tsp-title .em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent-ink);
}

.blk-team-spotlight .tsp-sub {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0.9rem 0 0;
  max-width: 34rem;
}

.blk-team-spotlight .tsp-navs {
  display: flex;
  gap: 0.6rem;
}

.blk-team-spotlight .tsp-nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.blk-team-spotlight .tsp-nav:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.blk-team-spotlight .tsp-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blk-team-spotlight .tsp-viewport {
  overflow: hidden;
  padding: 96px 20px;
  margin: -96px -20px;
}

.blk-team-spotlight .tsp-track {
  display: flex;
  gap: 10px;
  transition: transform 0.6s ease;
  will-change: transform;
}

.blk-team-spotlight .tsp-card {
  flex: 0 0 50px;
  position: relative;
  height: clamp(360px, 52vw, 470px);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--grey-card);
  box-shadow: 0 16px 38px -24px rgba(20, 26, 36, 0.4);
  transition: flex-basis 0.6s ease, box-shadow 0.6s ease;
}

.blk-team-spotlight .tsp-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(150deg, #e2e9df, #c8d5c4 55%, #a9bfa5);
  filter: grayscale(1) contrast(0.95) brightness(0.99);
  transition: filter 0.6s ease;
}

/* Absolute inset:0 rather than width/height 100% — a percentage height inside
   a centred grid resolves differently across engines, and on iOS it left the
   sage backing plate showing above the photo. */
.blk-team-spotlight .tsp-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.blk-team-spotlight .tsp-card.is-active .tsp-photo {
  filter: none;
}

.blk-team-spotlight .tsp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(20, 26, 36, 0.07);
  pointer-events: none;
}

.blk-team-spotlight .tsp-card.is-active {
  box-shadow: 0 40px 74px -30px rgba(20, 26, 36, 0.55);
  cursor: default;
  z-index: 2;
}

.blk-team-spotlight .tsp-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.4rem 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  background: linear-gradient(to top, rgba(12, 16, 24, 0.94) 6%, rgba(12, 16, 24, 0.5) 52%, rgba(12, 16, 24, 0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease 0.18s;
}

.blk-team-spotlight .tsp-card.is-active .tsp-meta {
  opacity: 1;
}

.blk-team-spotlight .tsp-role {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 0.35rem;
}

.blk-team-spotlight .tsp-nm {
  display: block;
  font-weight: 700;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.blk-team-spotlight .tsp-foot {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.blk-team-spotlight .tsp-dots {
  display: flex;
  gap: 7px;
}

.blk-team-spotlight .tsp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.blk-team-spotlight .tsp-dot.on {
  background: var(--accent);
  width: 22px;
  border-radius: 5px;
}

.stp {
  position: relative;
  padding: 4.25rem 0 5rem;
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
}

.stp__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.stp__head {
  max-width: 42rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ============================================================
   How it works — sticky brief on the left, a rail of steps on the
   right. Scale does the work: oversized numerals, one sage thread.
   ============================================================ */
.stp {
  position: relative;
  background: var(--paper);
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.stp__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.stp__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.stp__aside {
  position: sticky;
  top: clamp(4rem, 16vh, 8rem);
}

.stp__title {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.stp__title .em { font-style: italic; }

.stp__sub {
  margin: 1.1rem 0 0;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--muted);
}

.stp__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

.stp__cta p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* --- the rail --- */
.stp__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--border);
}

/* fills to the reading line; --p is written on scroll */
.stp__list.is-live::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: var(--p, 0px);
  background: var(--accent);
}

.stp__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
  padding: clamp(1.9rem, 3.6vw, 2.9rem) 0 clamp(1.9rem, 3.6vw, 2.9rem)
           clamp(1.5rem, 3vw, 2.4rem);
}

.stp__row + .stp__row { border-top: 1px solid var(--border); }

/* the node on the rail */
.stp__row::before {
  content: "";
  position: absolute;
  left: -4px;
  top: calc(clamp(1.9rem, 3.6vw, 2.9rem) + 0.85rem);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--border);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.stp__list.is-live .stp__row.is-on::before {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(143, 175, 139, 0.16);
}

.stp__n {
  font-size: clamp(2.3rem, 4.2vw, 3.5rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s ease;
}

.stp__list.is-live .stp__n { color: #dfe4da; }
.stp__list.is-live .stp__row.is-on .stp__n { color: var(--accent-ink); }

.stp__t {
  margin: 0;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.028em;
  color: var(--navy);
}

.stp__d {
  margin: 0.7rem 0 0;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

@media (max-width: 900px) {
  /* aside dissolves so the action can sit after the steps */
  .stp__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stp__aside { display: contents; }

  .stp__title { order: 1; max-width: 18ch; }
  .stp__sub { order: 2; max-width: 44ch; }
  .stp__list { order: 3; margin-top: clamp(2.2rem, 6vw, 3rem); }
  .stp__cta { order: 4; margin-top: clamp(2rem, 5vw, 2.6rem); }

  .stp__row {
    gap: 1rem;
    padding-left: 1.3rem;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }

  .stp__row::before { top: calc(1.6rem + 0.6rem); }

  .stp__n { font-size: 2rem; }
  .stp__d { font-size: 0.96rem; margin-top: 0.5rem; }
}

@media (max-width: 420px) {
  .stp__n { font-size: 1.7rem; }
  .stp__row { gap: 0.85rem; padding-left: 1.1rem; }
}

@media (max-width: 980px) {
  .hero-shell,
  .split-grid,
  .two-up {
    grid-template-columns: 1fr;
  }

  .three-up {
    grid-template-columns: 1fr;
  }

  .edit-list,
  .rule-grid,
  .rule-grid--3 {
    grid-template-columns: 1fr;
  }

  .uc-grid {
    grid-template-columns: 1fr;
  }

  .uc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .uc-card {
    min-height: 0;
  }

  .uc-card--hl {
    border-top-right-radius: 72px;
  }

  .fee-panel__grid {
    grid-template-columns: 1fr;
  }

  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hero-sxm {
    padding-top: 3rem;
  }

  .nav-wrap,
  .footer-wrap,
  .cta-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions {
    flex-direction: column;
  }

  .trust-strip {
    grid-template-columns: 1fr;
  }

  .blk-team-spotlight .tsp-nm {
    font-size: 1.18rem;
  }

  .blk-team-spotlight .tsp-meta {
    padding: 1.2rem 1.1rem 1.1rem;
  }
}

.hero__subline {
  max-width: 33rem;
  margin: 1.1rem 0 0;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.hero__soft {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

.hero__grev {
  display: none;
}

.shape-card h3 {
  margin-bottom: 1.1rem;
}

.viz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.viz__side {
  background: #f4f4ef;
  border-radius: 12px;
  padding: 0.95rem 1rem 0.85rem;
}

.viz__side--loan {
  background: #ecf1ea;
}

.viz__cap {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.viz__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 92px;
}

.viz__bars span {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  height: var(--h);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.viz.on .viz__bars span {
  transform: scaleY(1);
}

.viz__bars--card span {
  background: #b9c0c9;
}

.viz.on .viz__bars--card span {
  animation: vizWobble 3.2s ease-in-out infinite alternate;
}

.viz__bars--loan span {
  background: var(--accent);
}

.viz__bars--loan span.last {
  background: var(--accent-ink);
}

.viz__bars span:nth-child(2) { transition-delay: 0.06s; }
.viz__bars span:nth-child(3) { transition-delay: 0.12s; }
.viz__bars span:nth-child(4) { transition-delay: 0.18s; }
.viz__bars span:nth-child(5) { transition-delay: 0.24s; }
.viz__bars span:nth-child(6) { transition-delay: 0.3s; }
.viz__bars span:nth-child(7) { transition-delay: 0.36s; }
.viz__bars span:nth-child(8) { transition-delay: 0.42s; }

@keyframes vizWobble {
  from { transform: scaleY(1); }
  to { transform: scaleY(1.06); }
}

.viz__note {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .viz__bars span {
    transform: scaleY(1);
    transition: none;
  }

  .viz.on .viz__bars--card span {
    animation: none;
  }
}

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

.shape-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.shape-cols h4 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.7rem;
}

.shape-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.shape-cols li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.45;
}

.shape-cols li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.stat-band {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
}

.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-left: clamp(1.2rem, 2.5vw, 2rem);
  border-left: 1px solid var(--border);
}

.stat__n {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--navy);
}

.stat__n::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  margin-top: 0.7rem;
  background: var(--accent);
}

.stat__l {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 24rem;
}

@media (max-width: 760px) {
  .stat-band__grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker--light {
  color: rgba(255, 255, 255, 0.55);
}

.edit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.edit-list li {
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.8rem);
  padding: clamp(1.6rem, 2.6vw, 2.2rem) 0;
  border-top: 1px solid var(--border);
}

.edit-list .n {
  flex: 0 0 auto;
  padding-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
}

.edit-list h3 {
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.45rem;
  letter-spacing: -0.01em;
}

.edit-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.65;
}

.manifesto {
  background: var(--paper);
  text-align: center;
}

.manifesto__wrap {
  max-width: 54rem;
}

.manifesto .kicker {
  justify-content: center;
  margin-bottom: 1.6rem;
}

.mf {
  margin: 0;
  font-size: clamp(1.55rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.mf__soft {
  color: #9aa3ad;
}

.mf em {
  font-style: italic;
  color: var(--accent-ink);
}

.mf .chip {
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.32em;
  vertical-align: -0.18em;
  margin: 0 0.08em;
}

.mf .chip svg {
  width: 0.6em;
  height: 0.6em;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chip--check {
  background: #d9e1ea;
}

.chip--check svg {
  stroke: var(--navy);
}

.chip--bank {
  background: #e6eee4;
}

.chip--bank svg {
  stroke: var(--accent-ink);
}

.fee-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #1d3049 0%, #16243c 52%, #101b2f 100%);
  border-radius: 28px;
  padding: clamp(2rem, 4.5vw, 3.75rem);
  color: #fff;
}



.fee-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.16;
}

@keyframes aurora {
  0% { background-position: 0% 100%, 100% 0%; }
  100% { background-position: 40% 60%, 60% 35%; }
}

@media (prefers-reduced-motion: reduce) {
  .fee-panel::before,
  .cta-card::before {
    animation: none;
  }
}

.fee-panel__grid {
  position: relative;
  z-index: 1;
}

.fee-panel__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.fee-panel__copy h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 1.3rem;
}

.fee-panel__copy p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin: 0 0 1rem;
  max-width: 34rem;
}

.receipt {
  position: relative;
  max-width: 24rem;
  margin-top: 1.7rem;
  background: #fdfdfb;
  border-radius: 14px;
  padding: 1.5rem 1.4rem 1.2rem;
  color: var(--text);
  transform: rotate(-1.2deg);
  box-shadow: 0 30px 60px -25px rgba(6, 14, 26, 0.55);
}

.receipt__tag {
  position: absolute;
  top: -12px;
  left: 18px;
  background: var(--accent);
  color: var(--navy);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.receipt__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed #d8d5c9;
  font-size: 0.92rem;
}

.receipt__row span {
  color: var(--muted);
}

.receipt__row b {
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.receipt__row--zero b {
  color: var(--accent-ink);
}

.receipt__foot {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.fee-panel__side h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.4rem 0 0.4rem;
}

.fee-panel__side ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}

.fee-panel__side li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
}

.fee-panel__urgency {
  margin: 0 0 1rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.fee-panel__soft {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.btn-tangerine {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--accent);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.45rem 1.45rem 0.45rem 0.45rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.btn-tangerine .arr {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  transition: transform 0.2s ease;
}

.btn-tangerine .arr svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-tangerine:hover .arr {
  transform: translateX(3px);
}

.uc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.uc-head .section-intro {
  margin-bottom: 0;
}

.uc-note {
  max-width: 21rem;
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
}

.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.uc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(24, 42, 61, 0.05);
  border-radius: 12px;
  padding: 1.1rem 1.5rem 1.5rem;
  min-height: 0;
}

.uc-card--hl .ic {
  background: var(--navy);
}

.uc-card--hl .ic svg {
  stroke: #fff;
}

.uc-photo {
  position: relative;
  border-radius: 12px;
  border-top-right-radius: 64px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 1.9rem;
  isolation: isolate;
}

.uc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: saturate(0.78) contrast(1.05) brightness(1.01);
}

.uc-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #22384f;
  mix-blend-mode: color;
  opacity: 0.2;
}

.uc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: overlay;
  opacity: 0.22;
}

.uc-card .ic {
  z-index: 3;
}

.uc-card .ic {
  position: absolute;
  left: 12px;
  bottom: -14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px -10px rgba(24, 42, 61, 0.35);
}

.uc-card .ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uc-tag {
  display: block;
  margin-top: auto;
  margin-bottom: 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.uc-card h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.008em;
  margin: 0 0 0.5rem;
}

.uc-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
}

.uc-card .go {
  margin-top: 1.7rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.uc-card .go svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uc-card .go:hover {
  transform: translateY(-2px);
  background: var(--navy);
  border-color: var(--navy);
}

.uc-card .go:hover svg {
  stroke: #fff;
}

.uc-card--hl {
  background: #e9efe7;
  border-color: transparent;
  border-top-right-radius: 110px;
}

.uc-card--hl .go {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.uc-card--hl .go svg {
  stroke: #fff;
}

.rule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.rule-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1.6rem, 3.5vw, 3rem);
}

.rule-item {
  border-top: 1px solid var(--border);
  padding: clamp(1.5rem, 2.4vw, 2rem) 0;
}

.rule-item h3 {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.rule-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.cta-side {
  flex: 0 0 auto;
  text-align: center;
}

.cta-soft {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.footer-disc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 3rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.footer-logo {
  grid-column: 1 / -1;
  height: 34px;
  width: auto;
  justify-self: start;
  margin-bottom: 0.4rem;
}

.footer-col h4 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0.5rem;
}

.footer-col p {
  margin: 0;
}

@media (max-width: 760px) {
  .footer-disc {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }
}

.footer-links {
  margin-top: 0.6rem;
}

.footer-links a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .shape-cols {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blk-team-spotlight .tsp-track,
  .blk-team-spotlight .tsp-card,
  .blk-team-spotlight .tsp-photo,
  .blk-team-spotlight .tsp-meta {
    transition: none;
  }
}

/* ===== Services: full-bleed image cards ===== */
.uc-card,
.uc-card--hl {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 3.9;
  min-height: 0;
  padding: 1.5rem 1.4rem;
  border: 0;
  border-radius: 18px;
  background: var(--navy-2);
  color: #fff;
}

.uc-card--hl {
  border-top-right-radius: 110px;
}

.uc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.05);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-card:hover .uc-bg {
  transform: scale(1.05);
}

.uc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(13, 23, 38, 0.92) 0%, rgba(13, 23, 38, 0.48) 38%, rgba(16, 28, 46, 0.16) 66%, rgba(16, 28, 46, 0.08) 100%);
}

.uc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  mix-blend-mode: overlay;
  opacity: 0.26;
}

.uc-num {
  position: relative;
  z-index: 2;
  margin-bottom: auto;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
}

.uc-body {
  position: relative;
  z-index: 2;
  padding-right: 3rem;
}

.uc-body h3 {
  color: #fff;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 0.4rem;
}

.uc-body p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
  max-width: 32ch;
}

.uc-card .go,
.uc-card--hl .go {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 2;
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
}

.uc-card .go svg,
.uc-card--hl .go svg {
  stroke: #fff;
}

.uc-card .go:hover,
.uc-card--hl .go:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.uc-card .go:hover svg {
  stroke: var(--navy);
}

.uc-card--hl .go {
  background: var(--accent);
  border-color: var(--accent);
}

.uc-card--hl .go svg {
  stroke: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .uc-bg {
    transition: none;
  }
}


/* Mobile hero stage: notched photo card, ticker pill */
.hero__stage {
  display: none;
}

@media (max-width: 760px) {
  .hero__stage {
    position: relative;
    display: block;
    margin-top: 0.7rem;
    aspect-ratio: 1 / 0.9;
  }

  .hero__stage-ph {
    position: absolute;
    inset: 0;
  }

  .hero__stage-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    -webkit-mask-image: radial-gradient(circle at calc(100% - 31px) calc(100% - 31px), transparent 36px, #000 37px);
    mask-image: radial-gradient(circle at calc(100% - 31px) calc(100% - 31px), transparent 36px, #000 37px);
  }

  .hero__ticker {
    position: absolute;
    left: calc(1.5% + 16px);
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    font-size: 1.08rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(10, 14, 20, 0.55), 0 4px 16px rgba(10, 14, 20, 0.45);
  }

  .hero__ticker-in {
    display: inline-grid;
  }

  .hero__ticker-in > span {
    grid-area: 1 / 1;
    opacity: 0;
    animation: pillTick 9s linear infinite;
  }

  .hero__ticker-in > span:first-child { animation-name: pillTickFirst; }
  .hero__ticker-in > span:nth-child(2) { animation-delay: 4.5s; }

  .hero__stage-go {
    position: absolute;
    right: 8px;
    bottom: 8px;
    top: auto;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--navy);
  }

  .hero__stage-go svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* ===== Steps journey map ===== */
@media (max-width: 980px) {
  .uc-grid,
  .rule-grid,
  .rule-grid--3,
  .edit-list,
  .fee-panel__grid,
  .faq-split {
    grid-template-columns: 1fr;
  }

  .uc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* Sticky card deck: each use-case card slides up over the last */
@media (max-width: 760px) {
  .uc-grid {
    display: block;
  }

  .uc-card {
    position: sticky;
    margin-bottom: 1.1rem;
    border: 1px solid var(--border);
    box-shadow: 0 -14px 30px -18px rgba(24, 42, 61, 0.28);
  }

  .uc-card:nth-child(1) { top: 84px; }
  .uc-card:nth-child(2) { top: 102px; }
  .uc-card:nth-child(3) { top: 120px; }

  .uc-card--hl {
    border-color: transparent;
    border-top-right-radius: 84px;
  }

  .receipt {
    max-width: none;
    transform: rotate(0deg);
  }
}


@keyframes pillTick {
  0% { opacity: 0; transform: translateY(0.4em); }
  6% { opacity: 1; transform: translateY(0); }
  44% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(-0.4em); }
  100% { opacity: 0; }
}

@keyframes pillTickFirst {
  0% { opacity: 1; transform: translateY(0); }
  44% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(-0.4em); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__ticker-in > span {
    animation: none;
  }

  .hero__ticker-in > span:first-child {
    opacity: 1;
  }
}

/* ===== Scroll reveal ===== */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.rv-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ===== Comparison matrix ===== */
.cmp {
  position: relative;
  z-index: 0;
  margin-top: 0.5rem;
}

.cmp__head,
.cmp__row {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr 1fr 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 1.15rem 1.4rem;
}

.cmp__row { border-top: 1px solid var(--border); }

.cmp__head {
  padding-top: 0.75rem;
  padding-bottom: 0.85rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.cmp__row:last-child { border-bottom: 1px solid var(--border); }

.cmp__row span { font-size: 0.95rem; color: var(--muted); }

.cmp__l {
  font-weight: 600;
  color: var(--navy) !important;
}

/* highlighted column */
.cmp__us { position: relative; color: var(--navy) !important; }

.cmp__us b {
  font-weight: 600;
  color: var(--navy);
}

.cmp__head .cmp__us {
  color: var(--accent-ink) !important;
  font-weight: 700;
}

.cmp__us::before {
  content: "";
  position: absolute;
  inset: -1.15rem -1rem;
  z-index: -1;
  background: #e9efe7;
}

.cmp__head .cmp__us::before {
  inset: -0.75rem -1rem -0.85rem;
  border-radius: 14px 14px 0 0;
}

.cmp__row:last-child .cmp__us::before { border-radius: 0 0 14px 14px; }

.cmp__row .cmp__us b::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.5rem;
  vertical-align: -2px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182a3d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5L20 7'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.cmp__no { color: #a8aca3 !important; }

/* per-cell source labels: desktop uses the header instead */
.cmp__row i { display: none; }

.cmp__foot {
  margin: 1.4rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 46rem;
}

@media (max-width: 900px) {
  .cmp { display: grid; gap: 0.8rem; }
  .cmp__head { display: none; }

  .cmp__row {
    display: block;
    padding: 1.15rem 1.2rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
  }

  .cmp__row:last-child { border-bottom: 1px solid var(--border); }

  .cmp__l {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 0.68rem !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted) !important;
  }

  .cmp__row span:not(.cmp__l) {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .cmp__row span:not(.cmp__l) + span:not(.cmp__l) { margin-top: 0.3rem; }

  .cmp__row i {
    display: block;
    font-style: normal;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #a8aca3;
    margin-bottom: 0.2rem;
  }

  .cmp__us { background: #e9efe7; }
  .cmp__us::before { display: none; }
  .cmp__us i { color: var(--accent-ink); }
  .cmp__us b { display: block; font-weight: 700; }
}

/* ============================================================
   RESTORED BLOCK — chart balance, wayfinding, statement artifact
   ============================================================ */

/* ---------- Chart section balance ---------- */
#process { position: relative; z-index: 2; }

#process .split-grid {
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
}

#process .split-copy { max-width: 30rem; }

@media (max-width: 980px) { #process .split-grid { grid-template-columns: 1fr; } }

/* ---------- Compass rose ---------- */
.rose {
  position: absolute;
  right: -108px;
  bottom: -140px;
  width: 430px;
  height: 430px;
  z-index: 0;
  color: #fff;
  opacity: 0.085;
  pointer-events: none;
  animation: roseTurn 150s linear infinite;
}

.rose .rose-n { color: var(--accent); }
.rose text { font-family: var(--font-body); }

@keyframes roseTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rose { animation: none; } }

.manifesto__wrap { position: relative; }

.rose--mf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 88vw);
  height: min(560px, 88vw);
  transform: translate(-50%, -50%);
  right: auto;
  bottom: auto;
  color: var(--navy);
  opacity: 0.055;
  animation: roseTurnC 150s linear infinite;
}

.rose--mf .rose-n { color: var(--accent-ink); }

@keyframes roseTurnC {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) { .rose--mf { animation: none; } }

.manifesto .mf,
.manifesto .mf__mark,
.manifesto .mf__sig { position: relative; z-index: 1; }


/* ---------- Statement artifact ---------- */
.stmt-stack { position: relative; }

.stmt {
  position: relative;
  margin: 0;
  background: #fdfdfb;
  border-radius: 4px;
  padding: 1.9rem 1.9rem 1.6rem;
  transform: rotate(-1.1deg);
  box-shadow: 0 30px 60px -34px rgba(24, 42, 61, 0.42), 0 1px 0 rgba(24, 42, 61, 0.05);
}

.stmt__tag {
  position: absolute;
  top: -11px;
  left: 22px;
  background: var(--navy);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 3px;
}

.stmt__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1.5px solid var(--navy);
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
}

.stmt__apr { font-weight: 500; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); }

.stmt__row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px dotted #d9d5c8;
  font-size: 0.94rem;
  color: var(--muted);
}

.stmt__row b { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.stmt__row b.neg { color: var(--accent-ink); }
.stmt__row--hit { color: var(--navy); font-weight: 600; }
.stmt__row--hit b { font-size: 1.06rem; }

.stmt__row--tot {
  border-bottom: 0;
  border-top: 1.5px solid var(--navy);
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  color: var(--navy);
  font-weight: 700;
}

.stmt__row--tot b { font-size: 1.1rem; }

.stmt__amt { position: relative; display: inline-block; }

.stmt__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 48px;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

.stmt__ring path {
  fill: none;
  stroke: var(--accent-ink);
  vector-effect: non-scaling-stroke;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: 0.85;
}

.rv-in .stmt__ring path { animation: inkRing 1.1s cubic-bezier(0.55, 0, 0.35, 1) 0.35s forwards; }

@keyframes inkRing { to { stroke-dashoffset: 0; } }

.stmt__note {
  position: relative;
  margin: 1.5rem 0 0 3.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 600;
}

.stmt__note em { font-style: italic; font-weight: 500; color: var(--accent-ink); }

.stmt__arrow {
  position: absolute;
  left: -3.5rem;
  top: -0.9rem;
  width: 58px;
  height: 42px;
  overflow: visible;
}

.stmt__arrow path {
  fill: none;
  stroke: var(--accent-ink);
  vector-effect: non-scaling-stroke;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  opacity: 0.8;
}

.rv-in .stmt__arrow path { animation: inkRing 0.7s ease 1.25s forwards; }



@media (prefers-reduced-motion: reduce) {
  .stmt__ring path, .stmt__arrow path { stroke-dashoffset: 0; animation: none; }
  .payoff__line { stroke-dashoffset: 0; transition: none; }
}

@media (max-width: 640px) {
  .stmt { padding: 1.5rem 1.3rem 1.3rem; transform: none; }
  .stmt__note { margin-left: 3rem; font-size: 0.9rem; }
  .payoff { transform: none; margin-top: 1.6rem; }
}

html, body { overflow-x: clip; }

/* Manifesto: the two halves each own a line */
.mf__soft,
.mf__rest { display: block; }



/* ---------- Fee panel: cleaner information layout ---------- */
.fee-panel__grid {
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.fee-lede {
  max-width: 32rem;
  margin: 0 0 1.9rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
}

.fee-list {
  list-style: none;
  margin: 0 0 2.1rem;
  padding: 0;
  display: grid;
  gap: 0.72rem;
}

.fee-list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.96rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
}

.fee-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(143, 175, 139, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238faf8b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5L20 7'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.fee-act { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }

.fee-panel .fee-panel__soft {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}

.fee-panel__side { display: flex; justify-content: center; }

.fee-panel .receipt {
  max-width: none;
  width: 100%;
  margin-top: 0;
  transform: rotate(-1.4deg);
  padding: 1.7rem 1.6rem 1.4rem;
}

.fee-panel .receipt__row { padding: 0.72rem 0; font-size: 0.96rem; }
.fee-panel .receipt__row b { font-size: 1.02rem; }

@media (max-width: 980px) {
  .fee-panel__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .fee-panel .receipt { transform: none; }
  .fee-panel__side { justify-content: flex-start; }
}

/* ============================================================
   Fee band — full-bleed editorial ledger (no card, no chrome)
   ============================================================ */
.fee-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #16243c;
  color: #fff;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.fee-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.14;
}

.fee-band .rose {
  right: -140px;
  bottom: -180px;
  width: 520px;
  height: 520px;
  opacity: 0.06;
}

.fee-band__in { position: relative; z-index: 1; }

.fee-band__head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.fee-band__head h2 {
  margin: 0;
  max-width: none;
  color: #fff;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 500;
}

.fee-band__head p {
  margin: 0;
  color: rgba(255,255,255,0.62);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 30rem;
}

.fee-band__head p b { color: #fff; font-weight: 600; }

/* the ledger */
.ledger { border-top: 1px solid rgba(255,255,255,0.16); }

/* amount control — the first row of the ledger */
.ledger__ctl {
  padding: clamp(1.2rem, 2.4vw, 1.7rem) 0 clamp(1.3rem, 2.6vw, 1.8rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ledger__ctl label {
  display: block;
  margin-bottom: 1.15rem;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.58);
}

.ledger__ctl label b {
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#amt {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

#amt:focus { outline: none; }

/* --p is the fill percentage, written by the script on every input event. */
#amt::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) 0 var(--p, 21%),
    rgba(255, 255, 255, 0.16) var(--p, 21%) 100%
  );
}

#amt::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px; /* (track 4px - thumb 20px) / 2 */
  border: 0;
  border-radius: 50%;
  background: #fdfdfb;
  box-shadow: 0 0 0 4px rgba(143, 175, 139, 0.22), 0 4px 12px rgba(6, 14, 24, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#amt:hover::-webkit-slider-thumb { transform: scale(1.08); }

#amt:active::-webkit-slider-thumb {
  transform: scale(1.14);
  box-shadow: 0 0 0 7px rgba(143, 175, 139, 0.26), 0 4px 14px rgba(6, 14, 24, 0.5);
}

#amt:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(143, 175, 139, 0.85), 0 4px 12px rgba(6, 14, 24, 0.45);
}

#amt::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

#amt::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
}

#amt::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #fdfdfb;
  box-shadow: 0 0 0 4px rgba(143, 175, 139, 0.22), 0 4px 12px rgba(6, 14, 24, 0.45);
}

#amt:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(143, 175, 139, 0.85);
}

.ledger__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.ledger__scale i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  #amt::-webkit-slider-thumb { transition: none; }
}

.ledger__r {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ledger__r span {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.58);
}

.ledger__r span i {
  font-style: normal;
  margin-left: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.ledger__r b {
  font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.ledger__r--zero b { color: var(--accent); }

.ledger__fn {
  margin: 1.1rem 0 0;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.42);
}

/* terms, as a hairline row — no icons */
.fee-band__terms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(255,255,255,0.16);
}

.fee-band__terms span {
  padding: 1.3rem 1.7rem 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
  border-right: 1px solid rgba(255,255,255,0.1);
}

/* the outer edges align to the panel, the inner ones breathe off the rule */
.fee-band__terms span:first-child { padding-left: 0; }
.fee-band__terms span:last-child { padding-right: 0; border-right: 0; }

/* The 01-04 counter is gone. The page had four separate numbered sequences on
   it - bento, services, these terms, and the steps - and only the steps are an
   actual sequence. The rest were structure-cosplay. A sage rule does the
   marking here instead, without pretending to be an order. */
.fee-band__terms span::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 0.9rem;
  border-radius: 2px;
  background: var(--accent);
}

.fee-band__act {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.fee-band__act p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.48);
}

.fee-band .btn-tangerine { background: #fdfdfb; color: var(--navy); }
.fee-band .btn-tangerine .arr { background: var(--accent); }
.fee-band .btn-tangerine .arr svg { stroke: var(--navy); }

@media (max-width: 900px) {
  .fee-band__head { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
  .fee-band__terms { grid-template-columns: 1fr 1fr; }
  .fee-band__terms span {
    padding: 1.2rem 1.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .fee-band__terms span:nth-child(2n+1) { padding-left: 0; }
  .fee-band__terms span:nth-child(2n) { padding-right: 0; border-right: 0; }
  .fee-band__terms span:nth-last-child(-n+2) { border-bottom: 0; }
  .fee-band .rose { right: -180px; bottom: -220px; }
}

@media (max-width: 560px) {
  .ledger__r { gap: 1rem; }
  .ledger__r b { font-size: 1.75rem; }
}


.states__list li {
  cursor: default;
  transition: color 0.25s ease;
}

.states__list li.is-hi { color: var(--accent-ink); }

.states__list li span { transition: transform 0.25s ease, background 0.25s ease; }

.states__list li.is-hi span {
  background: var(--accent-ink);
  color: #fff;
  transform: scale(1.12);
}



/* ============================================================
   CTA button — compact, no inner circle
   ============================================================ */
.btn-tangerine,
.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.55rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn-tangerine .ico,
.hero__btn .ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-tangerine:hover .ico,
.hero__btn:hover .ico { transform: translateX(4px); }

/* light contexts */
.btn-tangerine { background: var(--navy); color: #fff; }
.btn-tangerine:hover { background: #0f1b2e; }

/* dark contexts */
.fee-band .btn-tangerine { background: #fdfdfb; color: var(--navy); }
.fee-band .btn-tangerine:hover { background: #fff; }

/* hero */
.hero__btn { background: var(--forest); color: #fff; box-shadow: 0 10px 30px -12px rgba(10, 20, 36, 0.55); }
.hero__btn:hover { background: #0f1b2e; }

@media (max-width: 760px) {
  .hero__btn { width: 100%; justify-content: center; }
  .fee-band .btn-tangerine { width: 100%; justify-content: center; }
}

/* ============================================================
   COLOUR DISCIPLINE
   Solid deep sage = interactive, and nothing else.
   Light sage tint = data / highlighted value.
   Everything decorative reverts to ink or neutral.
   ============================================================ */

/* --- 1. Actions own the sage --- */
.btn-tangerine { background: var(--accent-ink); color: #fff; }
.btn-tangerine:hover { background: #526c4f; }

.hero__btn { background: var(--accent-ink); color: #fff; box-shadow: 0 10px 30px -12px rgba(30, 52, 28, 0.6); }
.hero__btn:hover { background: #526c4f; }

/* on the dark band, the lighter sage keeps contrast while staying the action colour */
.fee-band .btn-tangerine { background: var(--accent); color: #10203a; }
.fee-band .btn-tangerine:hover { background: #a3c39d; }

.hero__pill { background: var(--accent-ink); color: #fff; }

/* small round arrow buttons are interactive too */
.uc-card .go,
.uc-card--hl .go { background: var(--accent-ink); border-color: var(--accent-ink); }
.uc-card .go svg,
.uc-card--hl .go svg { stroke: #fff; }
.uc-card .go:hover,
.uc-card--hl .go:hover { background: #fff; border-color: #fff; }
.uc-card .go:hover svg { stroke: var(--accent-ink); }

.hero__stage-go { background: var(--accent-ink); }

/* --- 2. Decoration gives the colour back --- */
.hero__headline em { color: rgba(255, 255, 255, 0.72); }
.stp__title .em,
.blk-team-spotlight .tsp-title .em { color: var(--navy); }
.mf em { color: var(--navy); }

.faq-pills .fp--sage { background: #dfe4dc; }

.rose .rose-n,


.mf__mark { background: var(--border); }

/* --- 3. Data keeps a lighter tint, never the solid action colour --- */
.ledger__r--zero b { color: var(--accent); }

/* ---------- Hero: one action, one colour ---------- */
/* nav becomes secondary — navigation, not the offer */
.hero__pill {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hero__pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.7);
  transform: none;
}

/* the hero sits on a dark surface, so it follows the dark-surface rule:
   lighter sage + ink text reads brighter than deep sage on a photo */
.hero__btn {
  background: var(--accent);
  color: #16243c;
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.6);
}

.hero__btn:hover { background: #a3c39d; }

/* mobile hero is on porcelain, not photo — deep sage is correct there */
@media (max-width: 760px) {
  .hero__pill {
    background: var(--accent-ink);
    color: #fff;
    border-color: transparent;
    backdrop-filter: none;
  }

  .hero__btn { background: var(--accent-ink); color: #fff; }
  .hero__btn:hover { background: #526c4f; }
}

@media (max-width: 760px) {
  /* nav is navigation, not the offer */
  .hero__pill {
    background: transparent;
    color: var(--navy);
    border: 1px solid rgba(24, 42, 61, 0.28);
  }

  .hero__pill:hover { background: rgba(24, 42, 61, 0.06); }

  /* decoration doesn't get the action colour */
  .hero .hero__headline em { color: var(--navy); }

  /* the single action */
  .hero__btn { background: var(--accent-ink); color: #fff; }
}

/* Hero photo corner button: a detail on the image, not a second offer.
   The labelled button below it is the action. */
.hero__stage-go {
  background: var(--navy);
}

.hero__stage-go svg { stroke: #fff; }

.hero__stage-go:hover { background: var(--accent-ink); }

/* ============================================================
   Refined rule:
   FILLED sage  = interactive (buttons, arrows)
   sage TYPE    = emphasis inside a headline — never mistaken for a button
   ============================================================ */
.hero__headline em { color: #a9c4a6; }
.stp__title .em,
.blk-team-spotlight .tsp-title .em { color: var(--accent-ink); }
.mf em { color: var(--accent-ink); }

@media (max-width: 760px) {
  .hero .hero__headline em { color: var(--accent-ink); }
}

/* FAQ: one action, with reassurance under it */
.faq-actions {
  display: block;
  margin-top: 1.9rem;
}

.faq-soft {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ==========================================================================
   Client stories — coverflow testimonial slider  (.vo)
   Cards all occupy the same grid cell (grid-area 1/1), so the stage height
   is set by the tallest card and no transform can affect layout.
   Position is expressed with translateX in % — percentages resolve against
   the element's own untransformed width, so scale() never compounds it.
   ========================================================================== */
.vo {
  position: relative;
  background: var(--cream);
  padding: clamp(4.5rem, 8vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
}

.vo__head {
  text-align: center;
}

.vo__head .section-title {
  max-width: 22ch;
  margin-inline: auto;
}

.vo__sub {
  max-width: 44ch;
  margin: 0.9rem auto 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Stage clips the receding cards at the viewport edge — and keeps the page
   from ever scrolling sideways because of them. */
.vo__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding: 14px 0 34px;
  touch-action: pan-y;
}

.vo__track {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  perspective: 1500px;
  perspective-origin: 50% 42%;
}

.vo__card {
  grid-area: 1 / 1;
  width: min(560px, 84vw);
  min-height: 250px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 3vw, 1.85rem);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 22px;
  text-align: left;
  cursor: pointer;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  transition:
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.42s ease,
    filter 0.42s ease,
    box-shadow 0.42s ease,
    background-color 0.42s ease,
    border-color 0.42s ease;
  will-change: transform, opacity;
}

/* Off-centre cards recede into a mist panel — no border, no shadow, so the
   only object that reads as "in front" is the one being spoken. */
.vo__card:not(.is-active) {
  background: var(--grey-card);
  border-color: transparent;
}

.vo__card.is-active {
  cursor: default;
  border-color: #dee2d7;
  box-shadow: 0 32px 64px -30px rgba(24, 42, 61, 0.3), 0 2px 0 rgba(24, 42, 61, 0.02);
}

/* --- card head --- */
.vo__top {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--border);
}

.vo__ava {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--accent);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.vo__ava img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vo__nm {
  color: var(--navy);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.25;
}

.vo__mt {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.855rem;
  line-height: 1.5;
}

.vo__stars {
  color: var(--accent-ink);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.vo__stars .dim {
  color: #c6ccc3;
}

/* --- the review itself --- */
.vo__body {
  margin-top: 1.15rem;
  color: var(--text);
  font-size: 1.01rem;
  line-height: 1.66;
}

/* --- thumbnail rail (the nav) --- */
.vo__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  margin-top: 0.25rem;
}

.vo__thumb {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 15px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.28s ease, filter 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}

.vo__thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vo__thumb:hover {
  opacity: 0.8;
}

.vo__thumb.on {
  opacity: 1;
  filter: none;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--accent);
}

.vo__thumb:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 4px;
}

.vo__disc {
  width: min(52rem, calc(100% - 2rem));
  margin: clamp(1.9rem, 4vw, 2.6rem) auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .vo__card {
    width: min(560px, 86vw);
    min-height: 240px;
    border-radius: 20px;
  }

  .vo__ava {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 0.94rem;
  }

  .vo__nm {
    font-size: 1.06rem;
  }

  .vo__body {
    font-size: 0.96rem;
  }

  .vo__thumb {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 0.78rem;
  }
}

@media (max-width: 400px) {
  .vo__nav {
    gap: 0.45rem;
  }

  .vo__thumb {
    width: 42px;
    height: 42px;
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vo__card {
    transition: none;
  }
}

/* ==========================================================================
   DESIGN PASS — August 2026
   Fixes from the design review, kept in one block so they are easy to audit
   or revert. Each rule states the problem it solves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Service cards — the numeral had no floor
   `.uc-num` is white at 0.8 over a gradient that is only 8% ink at the top of
   the card. On the home-improvement photo (a pale green wall) the "02"
   vanished completely. A short scrim behind the numeral fixes it without
   darkening the whole image.
   -------------------------------------------------------------------------- */
.uc-card::before {
  background:
    linear-gradient(to bottom, rgba(13, 23, 38, 0.42) 0%, rgba(13, 23, 38, 0.12) 16%, rgba(13, 23, 38, 0) 30%),
    linear-gradient(to top, rgba(13, 23, 38, 0.92) 0%, rgba(13, 23, 38, 0.48) 38%, rgba(16, 28, 46, 0.16) 66%, rgba(16, 28, 46, 0.08) 100%);
}

.uc-num {
  color: #fff;
  text-shadow: 0 1px 10px rgba(9, 16, 28, 0.55);
}

/* --------------------------------------------------------------------------
   2. Client stories — the shoulder cards were readable
   Off-centre cards sit behind the live one at 0.34 opacity with 2px of blur.
   At 390px that is two blocks of testimonial copy overlapping, which is the
   messiest moment on the page. Fading the *contents* leaves the paper shape
   doing its depth job while the text stops competing — and it costs nothing
   on the GPU, unlike raising the blur radius.
   -------------------------------------------------------------------------- */
.vo__card:not(.is-active) .vo__top,
.vo__card:not(.is-active) .vo__body {
  opacity: 0.3;
  transition: opacity 0.42s ease;
}

.vo__card.is-active .vo__top,
.vo__card.is-active .vo__body {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. A dark section in the back half
   From the steps rail to the footer, roughly 40% of the page, every section
   was cream or near-white. The navy fee band lands in the first half, so the
   page lost its spine exactly where attention thins out.
   The services block takes the ink treatment: its cards are photographs with
   their own dark overlays, so they gain separation on navy rather than lose
   it, and it sits at about two-thirds down — the right place for a break.
   -------------------------------------------------------------------------- */
.section-ink {
  position: relative;
  background: linear-gradient(168deg, var(--navy-2) 0%, var(--navy) 55%, #101b2f 100%);
}

.section-ink .section-title,
.section-ink h2 {
  color: #fff;
}

/* Scoped to the section's own intro copy. A bare `.section-ink p` has the same
   specificity as `.uc-body p` and, sitting later in the file, would quietly
   dim the copy inside the cards from 0.85 to 0.72. */
.section-ink .section-intro p {
  color: rgba(255, 255, 255, 0.72);
}

/* The mobile deck gives each card a light hairline so it separates from the
   cream page. On ink that border reads as a glow, so it flips to a dim one. */
@media (max-width: 760px) {
  .section-ink .uc-card {
    border-color: rgba(255, 255, 255, 0.1);
  }

  .section-ink .uc-card--hl {
    border-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   4. Sticky call bar
   The page runs 9,500px on desktop and 11,500px on mobile, with CTAs at fixed
   points. The bar carries the offer's two load-bearing facts with it: $0
   upfront, soft pull only. It is hidden while the hero, the fee band, or the
   footer is on screen — see the observer in index.html — so it never doubles
   up with a CTA the reader can already see.
   -------------------------------------------------------------------------- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  transform: translateY(100%);
  /* visibility, not [hidden]: it keeps the bar out of the accessibility tree
     and out of tab order while it is down, but it is delayed by the length of
     the slide so the exit animation still gets to run. */
  visibility: hidden;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.34s;
  background: rgba(247, 246, 241, 0.93);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -18px 40px -30px rgba(24, 42, 61, 0.5);
}

.callbar.is-up {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.callbar__in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.7rem clamp(1.25rem, 4vw, 3rem);
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.callbar__note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.callbar__note b {
  font-weight: 700;
  color: var(--navy);
}

.callbar__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  background: var(--accent-ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.callbar__btn:hover {
  background: #526f4f;
  transform: translateY(-1px);
}

.callbar__btn .ico {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* On a phone the button takes the width and the note sits under it, where it
   reads as the reassurance for the tap rather than a competing sentence. */
@media (max-width: 560px) {
  .callbar__in {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.5rem;
    padding-top: 0.6rem;
  }

  .callbar__btn {
    justify-content: center;
    padding: 0.85rem 1.35rem;
  }

  .callbar__note {
    text-align: center;
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .callbar {
    transition: none;
  }
}

/* ==========================================================================
   5. TWELVE MONTHS OF INTEREST — the ink spread
   Two revisions got here. The first stacked each $412 payment into interest
   and principal across twelve columns: every column the same height, and the
   only moving part shrinking month over month, so it read "nothing happens"
   and "this is getting better" — both the opposite of the point. The second
   plotted the running total, which climbs, but it sat on porcelain directly
   under the statement card's own sparkline: a graph under a graph.

   This one drops the sparkline upstairs and goes full-bleed ink. The rising
   line leaves the top-left of the frame empty, so the number lives there at
   display scale. The number is the graphic. The line is the evidence.
   ========================================================================== */
.pj {
  position: relative;
  overflow: hidden;
  /* extra headroom: the statement card from the section above hangs into
     the top-right of this panel */
  padding: clamp(4.5rem, 9vw, 9rem) 0 clamp(4rem, 7vw, 6rem);
  background: linear-gradient(168deg, var(--navy-2) 0%, var(--navy) 58%, #101b2f 100%);
  color: #fff;
}

.pj__lead {
  max-width: 40rem;
}

.pj__h {
  margin: 0;
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  color: #fff;
  text-wrap: balance;
}

.pj__lead p {
  margin: 0.9rem 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.02rem;
  line-height: 1.6;
}

.pj__fig {
  position: relative;
  margin: clamp(2.6rem, 5vw, 4rem) 0 0;
}

/* the display number, sitting in the void under the climb */
.pj__hero {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  max-width: 15ch;
  pointer-events: none;
}

.pj__hero b {
  display: block;
  font-size: clamp(3.6rem, 11vw, 9rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.pj__hero span {
  display: block;
  margin-top: 0.7rem;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  color: rgba(255, 255, 255, 0.6);
}

.pj__plot {
  position: relative;
}

.pj__canvas {
  position: relative;
  height: clamp(230px, 30vw, 380px);
}

.pj__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pj__area { fill: url(#pjFade); }

.pj__line {
  fill: none;
  stroke: var(--sky);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pj__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 3px var(--navy);
}

/* --- hover layer: crosshair + tooltip, no JS --- */
.pj__hits { position: absolute; inset: 0; }

.pj__hit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 9.09%;
  margin-left: -4.545%;
}

.pj__hit--last { margin-left: -9.09%; }

.pj__hit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.28);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.pj__hit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--y);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 3px var(--navy);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.pj__hit--last::before,
.pj__hit--last::after { left: 100%; }

.pj__hit:hover::before,
.pj__hit:hover::after { opacity: 1; }

.pj__tip {
  position: absolute;
  left: 50%;
  top: var(--y);
  transform: translate(-50%, -150%);
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.pj__tip b {
  display: block;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.pj__hit--last .pj__tip { left: 100%; transform: translate(-90%, -150%); }
.pj__hit:first-child .pj__tip { transform: translate(-24%, -150%); }
.pj__hit:hover .pj__tip { opacity: 1; }

/* endpoints of the x scale, not twelve tick marks */
.pj__months {
  position: relative;
  height: 1.4rem;
  margin-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 0.6rem;
}

.pj__months span {
  position: absolute;
  top: 0.6rem;
  left: var(--x);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.pj__months span:last-child { left: auto; right: 0; }

/* the ledger row — same hairline language as the fee band's terms */
.pj__tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pj__t {
  padding: 1.4rem 1.8rem 0 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.pj__t:last-child { border-right: 0; }
.pj__t:not(:first-child) { padding-left: 1.8rem; }

.pj__t span {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5rem;
}

.pj__t b {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.pj__end {
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  max-width: 46rem;
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.pj__end em {
  font-style: italic;
  color: var(--accent-soft);
}

.pj__note {
  margin: 1.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.38);
}

.pj__data {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .pj__hero {
    position: static;
    margin-bottom: 1.6rem;
  }

  .pj__canvas { height: 210px; }
  .pj__tally { grid-template-columns: 1fr; }

  .pj__t {
    padding: 1.1rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .pj__t:not(:first-child) { padding-left: 0; }
  .pj__t:last-child { border-bottom: 0; }
  .pj__t b { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pj__hit::before,
  .pj__hit::after,
  .pj__tip { transition: none; }
}

/* --------------------------------------------------------------------------
   The statement, treated as an object
   With the sparkline gone the card is the only artifact in its section, so it
   gets to be one: bigger, tilted a little further, and overlapped by the
   headline instead of politely sharing a column with it.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .stmt-spread {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .stmt-spread .split-copy {
    position: relative;
    z-index: 2;
    max-width: 26rem;
  }

  /* Two rejected attempts before this one. Overlapping the copy put the
     card's shadow across live text. Bleeding it off the right edge clipped
     the dollar amounts, and the amounts are the entire artifact.
     What it does instead: hangs past the bottom of its own section and into
     the ink panel below. Nothing gets covered, nothing gets cut, and the
     card stops being an illustration in a column and becomes an object
     sitting on the page. */
  .stmt-spread {
    grid-template-columns: 0.92fr 1.08fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  /* -13rem, not -7: the section's own 6rem bottom padding eats the first
     part of the pull, so anything under about -8rem never clears the edge. */
  .stmt-spread .stmt-stack {
    margin-bottom: -13rem;
  }

  .stmt-spread .split-copy {
    padding-top: 2.5rem;
  }

  .stmt-spread .stmt {
    transform: rotate(-1.6deg);
    padding: 2.4rem 2.4rem 2rem;
    box-shadow: 0 54px 90px -46px rgba(24, 42, 61, 0.55), 0 1px 0 rgba(24, 42, 61, 0.05);
  }

  .stmt-spread .split-copy .section-title {
    font-size: clamp(2.1rem, 3.7vw, 3.2rem);
  }
}

/* ==========================================================================
   6. ONE PHOTO GRADE
   The page ran three treatments: a warm full-colour hero, full-colour service
   cards under an ink scrim, and grayscale team portraits. Three treatments
   read as three brands. The rule now: situational photography (hero, service
   cards) shares one grade — pulled back off full saturation and warmed
   slightly toward the porcelain — and portraits stay grayscale as a separate,
   deliberate convention.
   ========================================================================== */
.hero__stage-ph img,
.uc-bg {
  filter: saturate(0.78) contrast(1.04) brightness(1.01) sepia(0.06);
}

/* The hero already sits under a heavy gradient; a touch less pull-back keeps
   the subject from going flat behind it. */
.hero__stage-ph img {
  filter: saturate(0.85) contrast(1.03) sepia(0.05);
}

.uc-card:hover .uc-bg {
  filter: saturate(0.9) contrast(1.04) brightness(1.02) sepia(0.04);
}

/* ===== apply.css ===== */
/* ==========================================================================
   apply.css — intake + booking
   Rides on the brand tokens in styles.css (Porcelain & Sage). Nothing here
   redefines a brand colour; if the palette moves, it moves there.

   Design notes, so the next person doesn't undo them by accident:
   · Von Restorff — sage appears on exactly two things, the selected state and
     the primary action. Everything else is navy, porcelain, or paper. The
     moment sage shows up on a third element, the CTA stops being findable.
   · Fitts — every tappable thing clears 48px, and the primary action on
     narrow screens lives in a fixed dock inside thumb reach.
   · Law of Common Region — each question's options sit in one bounded field;
     the rail, the calendar and the times are three separate cards, so the eye
     never has to work out what belongs to what.
   · Doherty — nothing animates longer than 320ms. Selection feedback is 200ms.
   ========================================================================== */

/* Several classes below set `display`, which outranks the user agent's
   [hidden] rule. The step machine hides everything with the attribute, so it
   has to win here or half the form shows at once. */
[hidden] { display: none !important; }

:root {
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --line: #e6e5dd;
  --line-soft: #eeece4;
  --ink-2: #3d4a57;
  --lift: 0 1px 2px rgba(24, 42, 61, 0.04), 0 8px 24px -12px rgba(24, 42, 61, 0.16);
  --lift-lg: 0 1px 2px rgba(24, 42, 61, 0.04), 0 24px 60px -28px rgba(24, 42, 61, 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.ap-body {
  background: var(--cream);
  min-height: 100svh;
  color: var(--text);
  /* clip, not hidden — overflow-x:hidden computes overflow-y to auto, which
     turns the body into the scroll container and quietly breaks the
     scroll-to-top between questions */
  overflow-x: clip;
}

.shell {
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  min-height: 100svh;
  /* the rail is sticky and one viewport tall, so the column behind it gets
     painted here — otherwise a long page shows bare background under it */
  background-image: linear-gradient(var(--navy), var(--navy));
  background-size: 336px 100%;
  background-repeat: no-repeat;
}

/* ==========================================================================
   LEFT RAIL
   ========================================================================== */

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.1rem 2rem 2rem;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

/* the compass rose, barely there, so the panel reads as brand not chrome */
.rail::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -130px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 60px rgba(255, 255, 255, 0.02),
              inset 0 0 0 61px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.rail__brand img {
  height: 30px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.mtg { position: relative; }

.mtg__kind {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(143, 175, 139, 0.18);
  color: var(--accent-soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mtg__h {
  margin: 0 0 0.9rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
}

.mtg__meta {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
}

.mtg__meta li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mtg__meta svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- stepper ---- */

.steps {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.25s var(--ease);
}

.steps li i {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* the connecting line — Law of Uniform Connectedness: they read as one path */
.steps li + li i::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  translate: -50% 0;
  width: 1px;
  height: 0.95rem;
  background: rgba(255, 255, 255, 0.14);
}

.steps li.did { color: rgba(255, 255, 255, 0.6); }
.steps li.did i { background: var(--accent-soft); }

.steps li.on {
  color: #fff;
  font-weight: 600;
}

.steps li.on i {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(143, 175, 139, 0.22);
}

/* ---- recap: their own answers ---- */

.recap {
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.recap__lab {
  margin: 0 0 0.6rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.recap__l {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recap__l li {
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.82);
  animation: pop 0.3s var(--ease) both;
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: none; }
}

.rail__trust {
  margin: auto 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
  display: grid;
  gap: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  position: relative;
}

.rail__trust li { padding-left: 1.1rem; position: relative; }

.rail__trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ==========================================================================
   STAGE
   ========================================================================== */

.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar { display: none; }

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 3px;
  background: rgba(24, 42, 61, 0.08);
}

.bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}

.stage__in {
  flex: 1 0 auto;
  width: min(680px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(2.4rem, 5vw, 4rem) 0 4rem;
}

/* 680px is a reading measure and it is right for a question and for the
   confirmation. The calendar is not reading — it is a two-column app screen,
   and squeezing it into a paragraph width is what made the old layout need a
   third column it could not afford. Browsers without :has() keep 680px and the
   grid still fits; nothing breaks, it is just tighter. */
.stage__in:has(.scr.book:not([hidden])) {
  width: min(880px, calc(100% - 3rem));
}

.tick {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.q { animation: qin 0.32s var(--ease) both; }

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

@media (prefers-reduced-motion: reduce) {
  .q, .recap__l li { animation: none; }
  .bar i, .steps li, .steps li i { transition: none; }
}

.q__h {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.11;
  color: var(--navy);
  text-wrap: balance;
}

.q__help {
  margin: 0;
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

.q__body { margin-top: 1.8rem; }

.q__sub {
  margin: 1.7rem 0 0.8rem;
  font-weight: 600;
  color: var(--navy);
}

.q__act {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.9rem;
  flex-wrap: wrap;
}

.q__foot {
  margin: 1.2rem 0 0;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--muted);
}

.q__foot a { color: var(--navy); font-weight: 600; }

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

/* ==========================================================================
   OPTIONS
   ========================================================================== */

.opts {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
  /* fieldsets ship with min-inline-size: min-content, which makes a long row
     of options push the page sideways instead of staying in its column */
  min-inline-size: 0;
}

.opts--tight { gap: 0.45rem; }

.opts--pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* position:relative matters — the real input is visually hidden but still
   focusable and clickable, and without an anchor it escapes the label to the
   top of the document, where sticky chrome can sit on top of it. */
.opt { display: block; position: relative; cursor: pointer; }

.opt input {
  position: absolute;
  inset: 50% auto auto 1.2rem;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.opt__box {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 62px;
  padding: 0.85rem 1.15rem 0.85rem 1.2rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
              transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

/* the radio mark */
.opt__box::before {
  content: "";
  order: 3;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1.5px solid #cdd3c9;
  border-radius: 50%;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.opt--chk .opt__box::before { border-radius: 7px; }

/* the label and its note stack; the mark and the key hint sit beside them */
.opt__c {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.opt__t {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--navy);
  line-height: 1.3;
}

.opt__d {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--muted);
}

/* the number-key hint */
.opt__k {
  order: 2;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1f2ec;
  color: #97a08f;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.16s var(--ease);
}

/* only surface the shortcut once they're clearly using a keyboard/pointer */
@media (hover: hover) and (min-width: 900px) {
  .opt:hover .opt__k { opacity: 1; }
  .opts[data-keys]:focus-within .opt__k { opacity: 1; }
}

.opt:hover .opt__box {
  border-color: var(--accent-soft);
  box-shadow: var(--lift);
}

.opt:active .opt__box { transform: scale(0.994); }

.opt input:focus-visible + .opt__box {
  outline: 2.5px solid var(--navy);
  outline-offset: 2px;
}

.opt input:checked + .opt__box {
  border-color: var(--accent-ink);
  background: #edf3ec;
  box-shadow: 0 0 0 3px rgba(143, 175, 139, 0.16);
}

.opt input:checked + .opt__box::before {
  border-color: var(--accent-ink);
  background: var(--accent-ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}

.opt input:checked + .opt__box .opt__k { opacity: 0; }

/* compact pills for the APR row */
.opt--pill .opt__box {
  min-height: 0;
  gap: 0;
  padding: 0.62rem 1.1rem;
  border-radius: 999px;
}

.opt--pill .opt__box::before { display: none; }
.opt--pill .opt__t { font-size: 0.9rem; }
.opt--pill input:checked + .opt__box { background: var(--navy); border-color: var(--navy); box-shadow: none; }
.opt--pill input:checked + .opt__box .opt__t { color: #fff; }

.opts.bad .opt__box { border-color: #b4544a; }
.opts.bad { animation: shake 0.32s var(--ease); }

@keyframes shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ==========================================================================
   FIELDS
   ========================================================================== */

.fld { display: block; margin-bottom: 1rem; }

.fld__lab {
  display: block;
  margin-bottom: 0.42rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--navy);
}

.fld__in {
  width: 100%;
  min-height: 54px;
  padding: 0.9rem 1.05rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.fld__in::placeholder { color: #a7aea3; }

.fld__in:focus {
  outline: 0;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3.5px rgba(143, 175, 139, 0.22);
}


.fld__sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182a3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 17px;
  padding-right: 2.8rem;
  cursor: pointer;
}


.fld--tuck { margin-top: 0.7rem; }

.fld.bad .fld__in { border-color: #b4544a; }
.fld.bad { animation: shake 0.32s var(--ease); }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

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

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.7rem;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s var(--ease), transform 0.14s var(--ease),
              box-shadow 0.18s var(--ease), opacity 0.18s var(--ease);
}

.btn:hover { background: #0f1b2e; box-shadow: var(--lift); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2.5px solid var(--accent-ink); outline-offset: 2px; }

/* Von Restorff: the one action that finishes the job is the only sage thing
   on the screen. */
.btn--go {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.btn--go:hover { background: #55704f; }

.btn--back {
  min-height: 44px;
  padding: 0 0.4rem;
  color: var(--muted);
  background: none;
  border-color: transparent;
  order: -1;
}

.btn--back:hover { color: var(--navy); background: none; box-shadow: none; }

.btn--ghost {
  min-height: 46px;
  padding: 0 1.15rem;
  font-size: 0.87rem;
  color: var(--navy);
  background: var(--paper);
  border-color: var(--line);
}

.btn--ghost:hover { background: #fff; border-color: var(--navy); }

.btn--ghost svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--sm { min-height: 44px; padding: 0 1.2rem; font-size: 0.86rem; }

.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.btn__kbd {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.3rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1;
}

.btn--back .btn__kbd { background: rgba(24, 42, 61, 0.07); }

@media (max-width: 900px) {
  .btn__kbd { display: none; }
}

.iconbtn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), opacity 0.16s var(--ease);
}

.iconbtn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iconbtn:hover { border-color: var(--navy); }
.iconbtn[disabled] { opacity: 0.28; cursor: not-allowed; }
.iconbtn:focus-visible { outline: 2.5px solid var(--accent-ink); outline-offset: 2px; }

/* ==========================================================================
   THE FEE BLOCK (Gate B)
   ========================================================================== */

/* ==========================================================================
   GATE B — the fee, then the consents, inside one border because they are one
   gate. The fee used to be a navy panel about three times this tall, which put
   the consent boxes below the fold on a phone: you tapped the button, the
   error fired somewhere you couldn't see, and it read as a broken form.
   ========================================================================== */

.fee {
  margin: 1.7rem 0 0.4rem;
  padding: 1rem 1.1rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}

.fee__lab {
  margin: 0 0 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}

.fee__p {
  margin: 0;
  font-size: 0.845rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.fee__p b {
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fee__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin: 0.75rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-soft);
}

.fee__row i {
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.fee__row i + i::before {
  content: "·";
  margin-right: 0.6rem;
  color: var(--line);
  font-weight: 400;
}

/* ==========================================================================
   AGREEMENT LINE
   Consent is captured by the submit action now, which puts the whole legal
   weight on this paragraph being read. So it does not get the 11px grey
   treatment that fine print usually gets: same size as the fee copy, normal
   contrast, sitting directly against the button. Shrink it and it stops being
   conspicuous, which is the word the statute uses.
   ========================================================================== */

.agree {
  margin: 1.1rem 0 0;
  max-width: 62ch;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.agree b { color: var(--navy); font-weight: 600; }

.agree a {
  color: var(--navy);
  font-weight: 600;
  text-underline-offset: 2px;
}

/* ==========================================================================
   AMOUNT SLIDER (question 1)
   The landing page's fee ledger runs the same --p fill trick on a dark ground.
   This is its light-ground sibling, scaled up, because here the slider is the
   question rather than a calculator sitting beside one.
   ========================================================================== */

.amt {
  padding: 1.7rem 1.5rem 1.4rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  text-align: center;
}

.amt__lab {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Tabular figures, or the number jitters sideways under the thumb while they
   drag and the whole card reads as cheap. */
.amt__val {
  display: block;
  margin: 0.3rem 0 1.4rem;
  font-size: clamp(2.6rem, 11vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Fitts: the input is 44px tall so the whole strip is the target, while the
   painted track stays 6px. --p is the fill percentage, written on every input
   event. touch-action keeps a vertical swipe scrolling the page instead of
   being eaten by the slider. */
.amt__range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

.amt__range:focus { outline: none; }

.amt__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent-ink) 0 var(--p, 17%),
    var(--line) var(--p, 17%) 100%
  );
}

.amt__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -12px; /* (track 6px - thumb 30px) / 2 */
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow:
    0 0 0 1.5px var(--accent-ink) inset,
    0 2px 10px rgba(24, 42, 61, 0.22);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.amt__range:hover::-webkit-slider-thumb { transform: scale(1.06); }

.amt__range:active::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow:
    0 0 0 1.5px var(--accent-ink) inset,
    0 0 0 9px rgba(143, 175, 139, 0.18),
    0 2px 12px rgba(24, 42, 61, 0.24);
}

.amt__range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 1.5px var(--accent-ink) inset,
    0 0 0 4px rgba(143, 175, 139, 0.9),
    0 2px 10px rgba(24, 42, 61, 0.22);
}

.amt__range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
}

.amt__range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent-ink);
}

.amt__range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow:
    0 0 0 1.5px var(--accent-ink) inset,
    0 2px 10px rgba(24, 42, 61, 0.22);
}

.amt__range:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 1.5px var(--accent-ink) inset,
    0 0 0 4px rgba(143, 175, 139, 0.9);
}

.amt__scale {
  display: flex;
  justify-content: space-between;
  margin: 0.1rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.amt__scale i { font-style: normal; font-variant-numeric: tabular-nums; }

.amt__quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}

.chip {
  min-height: 44px;
  padding: 0 0.95rem;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}

.chip:hover { border-color: #c6cfc2; }
.chip:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 2px; }

.chip.on {
  border-color: var(--accent-ink);
  background: var(--accent-ink);
  color: #fff;
}

.chip--num { min-width: 4.5rem; font-variant-numeric: tabular-nums; }

.amt__fee {
  margin: 1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  text-align: center;
  color: var(--muted);
}

.amt__fee b {
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.amt__out {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.5rem;
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.linkb {
  min-height: 44px;
  padding: 0 0.2rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--navy);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(24, 42, 61, 0.3);
  transition: text-decoration-color 0.16s var(--ease);
}

.linkb:hover { text-decoration-color: var(--navy); }
.linkb:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 2px; }

@media (max-width: 560px) {
  .amt { padding: 1.4rem 1.05rem 1.15rem; }
  .amt__val { margin-bottom: 1.15rem; }
  .amt__dot { display: none; }
  .amt__out { flex-direction: column; gap: 0; }
  .linkb { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .amt__range::-webkit-slider-thumb { transition: none; }
  .amt__range:hover::-webkit-slider-thumb,
  .amt__range:active::-webkit-slider-thumb { transform: none; }
}

/* ==========================================================================
   BOOKING
   ========================================================================== */

/* The meeting details used to be a third column, which squeezed the calendar
   into the middle and, stacked on a phone, put a tall card between the reader
   and the first open day. One strip on top, two columns underneath, and the
   calendar gets the room it should have had. */

.book__hd { margin-bottom: 1rem; }

.mtgbar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
  padding: 0.85rem 1.1rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}

/* the team as a cluster of circles: "one of these people", which is the true
   claim while nobody is named */
.mtgbar__who { display: flex; flex: 0 0 auto; }

.mtgbar__who img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--paper);
  margin-left: -13px;
  background: var(--cream);
}

.mtgbar__who img:first-child { margin-left: 0; }

.mtgbar__one {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream);
}

.mtgbar__t {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.mtgbar__nm {
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--navy);
}

.mtgbar__role { font-size: 0.74rem; color: var(--accent-ink); font-weight: 600; }

.mtgbar__note {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.mtgbar__meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line-soft);
}

.mtgbar__meta i {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-2);
}

.mtgbar__meta i + i::before {
  content: "·";
  margin-right: 0.55rem;
  color: var(--line);
  font-weight: 400;
}

.mtgbar__hedge {
  margin: -0.35rem 0 0.9rem;
  padding: 0 0.2rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 640px) {
  .book__hd { margin-bottom: 0.85rem; }
  .mtgbar {
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
  }
  .mtgbar__meta {
    flex: 1 0 100%;
    padding: 0.6rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
}

.book__grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 250px;
  gap: 0.9rem;
  align-items: start;
}

.card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.35rem;
  box-shadow: var(--lift);
}

/* ---- calendar ---- */

.card--cal { padding: 1.2rem 1.25rem 1.35rem; }

.cal__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cal__mon {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.cal__navs { display: flex; gap: 0.4rem; }

.cal__dow,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal__dow {
  margin-bottom: 0.45rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a3aa9d;
  text-align: center;
}

.day {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: #b9beb4;
  cursor: default;
  transition: background 0.14s var(--ease), color 0.14s var(--ease), transform 0.14s var(--ease);
}

.day--pad { visibility: hidden; }

.day--open {
  color: var(--navy);
  font-weight: 600;
  background: #eef1ea;
  cursor: pointer;
}

/* the dot is what says "there are times here" without a legend hunt */
.day--open::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  translate: -50% 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-ink);
  opacity: 0.55;
}

.day--open:hover { background: #e3e9e0; transform: translateY(-1px); }
.day--open:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 2px; }

.day--today { box-shadow: inset 0 0 0 1.5px #c9cfc4; }

.day--on,
.day--on:hover {
  background: var(--navy);
  color: #fff;
  transform: none;
}

.day--on::after { background: var(--accent-soft); opacity: 1; }

.cal__legend {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.cal__legend .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-ink);
  opacity: 0.55;
}

/* ---- times ---- */

/* height is set from the calendar card at paint time so the two columns end on
   the same line whether the month runs five rows or six */
.card--times {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 0.9rem 1rem 1.15rem;
  max-height: 486px;
}

.times__hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding-right: 0.25rem;
  margin-bottom: 0.9rem;
}

.times__day {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--navy);
  line-height: 1.25;
}

.times__day span {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--muted);
}

.seg {
  display: flex;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 999px;
  background: #eef0ea;
}

.seg__b {
  padding: 0.28rem 0.55rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.seg__b.on { background: var(--paper); color: var(--navy); box-shadow: var(--lift); }

.times__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* the fade sits over this padding, never over a slot you're trying to tap */
  padding: 0 0.55rem 1.9rem 0;
  scrollbar-width: thin;
  scrollbar-color: #d6d9d0 transparent;
  /* the fade is the affordance that says "keep scrolling" */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), transparent);
}

.times__scroll::-webkit-scrollbar { width: 6px; }
.times__scroll::-webkit-scrollbar-thumb { background: #d6d9d0; border-radius: 3px; }

.times__empty {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

.times__grp {
  margin: 0.9rem 0 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a3aa9d;
}

.times__grp:first-child { margin-top: 0; }

.slot {
  display: flex;
  gap: 4px;
  margin-bottom: 5px;
}

.slot__b {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 0 0.5rem;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease), flex-basis 0.2s var(--ease);
}

.slot__b:hover { border-color: var(--accent-ink); background: #f2f6f1; }
.slot__b:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 2px; }

/* Cal.com pattern: choosing a time splits the row and puts Confirm right
   where the thumb already is. */
.slot__go {
  flex: 0 0 0;
  width: 0;
  min-height: 46px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  background: var(--accent-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: flex-basis 0.2s var(--ease), width 0.2s var(--ease), opacity 0.18s var(--ease);
}

.slot--on .slot__b {
  flex: 0 0 44%;
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.slot--on .slot__go {
  flex: 1 1 auto;
  width: auto;
  padding: 0 0.5rem;
  opacity: 1;
}

.slot__go:hover { background: #55704f; }
.slot__go:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 2px; }

.tz {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.8rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
}

.tz svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
}

.tz select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}

.tz select:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   CONFIRMATION — Peak-End. This is the last thing they see, so it carries the
   most craft, and every device on it is aimed at the call actually happening.
   ========================================================================== */

.done__top { margin-bottom: 1.6rem; }

.done__tick {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--accent);
  animation: tickin 0.45s var(--ease) both;
}

@keyframes tickin {
  from { opacity: 0; transform: scale(0.6); }
  60%  { transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

.done__tick svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ticket {
  display: flex;
  align-items: stretch;
  gap: 1.3rem;
  padding: 1.2rem 1.5rem;
  background: var(--navy);
  border-radius: var(--r-xl);
  color: #fff;
  box-shadow: var(--lift-lg);
}

.ticket__l {
  display: grid;
  place-content: center;
  justify-items: center;
  padding-right: 1.3rem;
  border-right: 1px dashed rgba(255, 255, 255, 0.22);
  min-width: 84px;
}

.ticket__mon {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-soft);
}

.ticket__day {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.ticket__dow {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.58);
}

.ticket__r {
  display: grid;
  align-content: center;
  gap: 0.15rem;
}

.ticket__time {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.ticket__tz {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.62);
}

.ticket__cd {
  margin: 0.4rem 0 0;
  display: inline-block;
  justify-self: start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(143, 175, 139, 0.2);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-soft);
}

@media (max-width: 560px) {
  .ticket { gap: 1rem; padding: 1.1rem 1.2rem; }
  .ticket__l { min-width: 68px; padding-right: 1rem; }
  .ticket__day { font-size: 2.1rem; }
  .ticket__time { font-size: 1.35rem; }
}

/* ---- add to calendar: the single biggest thing that turns a booking into
        an attendance, so it sits immediately under the ticket ---- */

.addcal__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* the ticket stays position:relative and wrapping — the confirmation used to
   stamp a "you said you'll be there" seal into it, and the layout is still the
   better one without it */
.ticket { position: relative; flex-wrap: wrap; }

/* ---- who's calling ---- */

.whocard {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 1.25rem 1.35rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
}

.whocard__lab {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.whocard__top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.whocard__img {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream);
}

.whocard__t { display: grid; min-width: 0; }

.whocard__nm {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--navy);
}

.whocard__role { font-size: 0.78rem; color: var(--muted); }

.whocard__p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.whocard__hedge {
  margin: 0.15rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- the two things worth a tap ----
   This was a counted ladder: commit button, "where will you take it", progress
   meter. Someone who has already booked should not be handed more work, so
   what's left is a calendar file and, once it's wired, the number to save. */

.acts {
  margin-top: 1.1rem;
  padding: 1.1rem 1.25rem;
  background: #edf3ec;
  border-radius: var(--r-lg);
}

.acts__lab {
  margin: 0 0 0.75rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--navy);
}

.acts__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.acts__note {
  margin: 0.75rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted);
}

#saveNum span { font-variant-numeric: tabular-nums; }

.done__h2 {
  margin: 0 0 0.4rem;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--navy);
}

.prep {
  margin-top: 0.9rem;
  padding: 1.25rem 1.3rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
}

.prep__note {
  margin: 0 0 0.85rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--muted);
}

/* A list, not a checklist. Ticking these off was a completion state nobody
   asked for on a page that is already finished. */
.prep__l {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.prep__l li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.prep__l li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-ink);
}

.nxt {
  display: grid;
  gap: 0.55rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: n;
}

.nxt li {
  counter-increment: n;
  position: relative;
  padding: 1rem 1.2rem 1rem 3.3rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
}

.nxt li::before {
  content: "0" counter(n);
  position: absolute;
  left: 1.2rem;
  top: 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
}

.nxt b {
  display: block;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.12rem;
}

.nxt span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}

.done__resched {
  margin: 1.3rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.done__resched a { color: var(--navy); font-weight: 600; }

.scr__ok {
  margin: 0.5rem 0 0;
  font-weight: 600;
  color: var(--accent-ink);
}

.wait {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.wait .fld { margin-bottom: 0; flex: 1 1 16rem; }

/* ==========================================================================
   DISCLOSURE FOOTER
   ========================================================================== */

.disc {
  margin-top: auto;
  padding: 2rem 0 2.6rem;
  border-top: 1px solid var(--line);
}

.disc__g {
  width: min(680px, calc(100% - 3rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 2.4rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.6;
}

.disc h3 {
  margin: 0 0 0.35rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

.disc p { margin: 0; }

.disc__links {
  width: min(680px, calc(100% - 3rem));
  margin: 0.9rem auto 0;
  font-size: 0.76rem;
}

.disc__links a { color: var(--navy); font-weight: 600; text-decoration: none; }
.disc__links a:hover { text-decoration: underline; }

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

/* ==========================================================================
   THUMB DOCK — the primary action within reach on a phone, so nobody has to
   stretch to the top of a tall screen to move forward.
   ========================================================================== */

.dock { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  .book__grid { grid-template-columns: minmax(280px, 1fr) 236px; }
}

@media (max-width: 1040px) {
  .shell { grid-template-columns: 1fr; background-image: none; }

  .rail { display: none; }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(680px, calc(100% - 3rem));
    margin: 0 auto;
    padding: 0.85rem 0;
  }

  .topbar__brand img { height: 26px; width: auto; display: block; }

  .topbar__meta {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--muted);
  }

  .bar { position: sticky; top: 0; }

  .stage__in { padding-top: 1.8rem; }
}

@media (max-width: 780px) {
  .book__grid { grid-template-columns: 1fr; }
  .card--times { max-height: none; padding: 1.2rem 1.15rem; }
  .times__scroll { mask-image: none; overflow: visible; padding: 0; }

  /* two across, so eighteen times is a glance rather than a scroll. The
     chosen one takes the full width to make room for Confirm. */
  #timesList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .times__grp { grid-column: 1 / -1; margin: 0.7rem 0 0.1rem; }
  .times__grp:first-child { margin-top: 0; }
  .slot { margin-bottom: 0; }
  .slot--on { grid-column: 1 / -1; }
  .slot__b, .slot__go { min-height: 52px; }
  .slot--on .slot__b { flex: 0 0 40%; }
}

@media (max-width: 640px) {
  .stage__in { width: calc(100% - 2.2rem); padding-bottom: 7rem; }
  .topbar, .disc__g, .disc__links { width: calc(100% - 2.2rem); }

  .q__h { font-size: 1.5rem; }
  .opt__box { min-height: 58px; padding: 0.8rem 1rem; }
  .opt__t { font-size: 0.96rem; }

  /* the Back link moves out of the flow; the dock carries the forward action */
  .q__act { margin-top: 1.4rem; }
  .q__act .btn:not(.btn--back) { display: none; }

  .dock {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 0.7rem 1.1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(247, 246, 241, 0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }

  .dock__note {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--muted);
  }

  .dock .btn { flex: 0 0 auto; min-height: 50px; padding: 0 1.5rem; }

  .cal__dow, .cal__grid { gap: 3px; }
  .day { min-height: 42px; border-radius: 10px; }
  .addcal__row .btn { flex: 1 1 auto; }
}

.api-message{margin:1rem 0;padding:.8rem 1rem;border-left:3px solid #b58e55;background:#f5f0e8;color:#312c24;font-size:1rem;line-height:1.5}.api-message[hidden]{display:none}button:disabled{cursor:wait;opacity:.6}