/* tastemaker: structure=Feature Stack, journey-numbered (reference: pipedrive.com/en/gettingstarted-crm, layout only) | hero=centred claim + full product dashboard | nav=bare product bar | proof=security seals + comparison | footer=single-row legal | mood=technical, locked brand | palette=brand board 2026 | no people, dashboards carry every section */
/* ==========================================================================
   One layout grammar for every section: centred section head, then content
   in one container. Every feature row has the same shape (copy left,
   dashboard right). Dashboards are drawn at a fixed design width and scaled
   to fit, so they read like screenshots at any screen size.
   ========================================================================== */
:root {
  --orange-600: #D9571F; --orange-tint: #FEF0E6; --navy-glow: #1E3550; --mist-2: #E8EEF5;
  --line-2: #DCE3EC; --on-navy: #DBE4EE; --on-navy-soft: #C6D0DC; --line-strong: #CBD5E1; --side-ico: #8FA0B5;
  --lp-sec: 120px;
}
.lp { background: #fff; }
.lp .btn--lg { min-height: 56px; padding: 0 30px; font-size: 16.5px; border-radius: 14px; }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* top bar + nav */
.topbar { background: var(--navy-2); color: var(--on-navy); font-size: 14px; text-align: center; padding: 10px var(--pad); }
.topbar a { color: #fff; font-weight: 600; text-underline-offset: .2em; }
.lp-nav { position: sticky; top: 0; background: #fff; color: var(--navy); border-bottom: 1px solid var(--line); }
.lock--navy { color: var(--navy); }
.lp-nav .nav__trial { color: var(--navy); }
.lp-nav #navCta.is-quiet { background: #fff; color: var(--navy); border-color: var(--line-strong); }

/* hero */
.lp-hero { background: linear-gradient(to bottom, transparent 66%, #fff 66%), radial-gradient(1100px 520px at 50% 0%, var(--navy-glow) 0%, var(--navy) 62%); color: #fff; padding: 80px 0 96px; position: relative; overflow-x: clip; z-index: 1; }
.lp-hero > .wrap { position: relative; z-index: 1; }
.lp-hero__in { display: grid; justify-items: center; text-align: center; gap: 22px; padding-bottom: 56px; }
.eyebrow { display: inline-flex; padding: 7px 14px; border-radius: 99px; border: 1px solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .06); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy); }
.lp-hero h1 { font: 800 clamp(38px, 5.4vw, 70px)/1.04 var(--display); letter-spacing: -.04em; max-width: 15ch; text-wrap: balance; }
.lp-hero__sub { font-size: 19px; line-height: 1.5; color: var(--on-navy-soft); max-width: 54ch; }
.lp-hero__cta { display: grid; justify-items: center; gap: 12px; margin-top: 6px; }
.lp-hero__alt { color: var(--on-navy); font-size: 14.5px; text-underline-offset: .22em; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 8px; }
.trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--on-navy-soft); }
.trust .ico { width: 16px; height: 16px; color: var(--green-on-navy); }

/* screenshot frame: fixed design width, scaled by lp.js to the column */
.shot { margin: 0; min-width: 0; position: relative; overflow: clip; overflow-clip-margin: 180px; }
.shot__in { position: absolute; left: 0; top: 0; width: var(--dw); transform-origin: 0 0; scale: var(--s, 1); }
.shot__box { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line-2); background: #fff; box-shadow: 0 30px 70px -34px rgb(11 25 41 / .45), 0 2px 6px rgb(11 25 41 / .06); }
.lp-hero__shot .shot__box { box-shadow: 0 34px 70px -28px rgb(11 25 41 / .45), 0 2px 6px rgb(11 25 41 / .06); }

/* the dashboards (all sample data) */
.ui { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--mist); color: var(--navy); font-size: 14px; }
.ui--app { grid-template-columns: 220px minmax(0, 1fr); }
.ui-side { background: var(--navy); padding: 20px 14px; display: grid; align-content: start; gap: 4px; }
.ui-logo { display: block; padding: 4px 10px 18px; } .ui-logo svg { width: 32px; height: 32px; color: #fff; }
.ui-nav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--side-ico); font-weight: 500; }
.ui-nav.is-on { background: var(--navy-3); color: #fff; }
.ui-main { padding: 26px 28px 28px; display: grid; gap: 18px; align-content: start; }
.ui-top { display: flex; align-items: center; gap: 14px; }
.ui-top > :first-child { flex: 1; }
.ui-top h3 { font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
.ui-kicker { font: 600 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-600); }
.ui-search, .ui-select { border: 1px solid var(--line-strong); background: #fff; border-radius: 10px; padding: 9px 14px; color: var(--slate-600); min-width: 220px; }
.ui-select { min-width: 0; color: var(--navy); font-weight: 600; }
.ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ui-kpis > div, .ui-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.ui-kpis b { font: 600 30px/1 var(--mono); letter-spacing: -.03em; }
.ui-kpis span { color: var(--slate-600); font-size: 13px; }
b.ok, .ui-big.ok { color: var(--green-ink); } b.warn { color: var(--amber-ink); }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ui-table th { text-align: left; font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-600); background: #F8FAFC; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ui-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-who { display: inline-flex; align-items: center; gap: 10px; }
.ui-who b { font-weight: 600; }
.ui-who .av { width: 30px; height: 30px; font-size: 10.5px; }
.ui-who--lg .av { width: 44px; height: 44px; font-size: 14px; }
.ui-who--lg small { display: block; color: var(--slate-600); font-size: 13px; }
.ui-hrs { display: grid; gap: 6px; min-width: 150px; }
.ui-hrs .mono { font-size: 12.5px; }
.ui-bar { display: block; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ui-bar i { display: block; height: 100%; width: 100%; background: var(--navy); border-radius: 99px; transform-origin: left; transform: scaleX(var(--k, 1)); }
.ui-bar.ok i { background: var(--green); }
.ui-kan { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ui-col { background: var(--mist-2); border-radius: 14px; padding: 12px; display: grid; gap: 10px; align-content: start; grid-template-rows: auto; height: 330px; overflow: hidden; }
.ui-col__h { display: flex; justify-content: space-between; font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); padding: 4px 2px 6px; }
.ui-col__h span { background: #fff; border-radius: 99px; padding: 3px 8px; color: var(--navy); }
.ui-k { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; box-shadow: 0 1px 2px rgb(11 25 41 / .05); }
.ui-k .ui-who b { font-size: 13px; }
.ui-k__p { font-size: 12.5px; color: var(--slate-600); }
.ui-k__t { justify-self: start; font: 600 11px/1 var(--mono); padding: 5px 8px; border-radius: 99px; background: var(--green-tint); color: var(--green-ink); }
.ui-trk { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-auto-rows: auto; gap: 14px; }
.ui-ring { grid-row: span 2; justify-items: center; text-align: center; }
.ring { width: 160px; height: 160px; border-radius: 50%; background: conic-gradient(var(--navy) calc(var(--p) * 1%), var(--line) 0); display: grid; place-content: center; position: relative; margin-top: 10px; }
.ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; }
.ring b, .ring span { position: relative; }
.ring b { font: 600 34px/1 var(--mono); letter-spacing: -.03em; }
.ring span { font-size: 13px; color: var(--slate-600); margin-top: 4px; }
.ui-chart { display: flex; align-items: flex-end; gap: 12px; height: 130px; padding-top: 8px; }
.ui-chart span { flex: 1; height: var(--h); background: var(--navy); border-radius: 6px 6px 2px 2px; position: relative; }
.ui-chart span:nth-child(5) { background: var(--amber-tint); outline: 1px solid var(--amber-ink); }
.ui-chart i { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font: 500 11px/1 var(--mono); font-style: normal; color: var(--slate-600); }
.ui-cap { font-size: 12.5px; color: var(--slate-600); }
.ui-docs { display: grid; gap: 10px; }
.ui-docs li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.ui-docs li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none; }
.ui-docs li.ok::before { background: var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7A3E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ui-docs li.miss { color: var(--amber-ink); }
.ui-docs li.miss::before { background: var(--amber-tint); box-shadow: inset 0 0 0 2px var(--amber-ink); }
.ui-big { font: 800 20px/1.2 var(--display); letter-spacing: -.02em; }
.ui-trk .ui-card:nth-child(2) { grid-column: 2; }
.ui-trk .ui-card:nth-child(3), .ui-trk .ui-card:nth-child(4) { grid-column: auto; }
.ui-trk { grid-template-columns: 220px repeat(2, minmax(0, 1fr)); }
.ui-trk .ui-card:nth-child(2) { grid-column: 2 / span 2; }
.ui-toast { justify-self: end; display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; border-radius: 12px; padding: 12px 16px; font-weight: 500; box-shadow: 0 12px 30px -12px rgb(11 25 41 / .5); }
.ui-toast .ico { color: var(--green-on-navy); }

/* programs strip */
.strip { padding: 28px 0 0; }
.strip__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; }
.strip p { font-weight: 600; color: var(--slate-600); font-size: 15px; }
.strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.strip li { font: 800 20px/1 var(--display); letter-spacing: -.02em; color: var(--navy); }

/* sections: one rhythm, one head */
.lp-sec { padding-block: var(--lp-sec); }
.lp-sec--mist { background: var(--mist); }
.lp-sh { display: grid; gap: 14px; margin-bottom: 56px; }
.lp-sh h2, .sec2 h2, .lp-final h2 { font: 800 clamp(30px, 3.4vw, 46px)/1.08 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.lp-sh > p:not(.label) { font-size: 18px; color: var(--slate-600); max-width: 56ch; }
.lp-sh--c { justify-items: center; text-align: center; }
.lp-sh--c h2 { max-width: 24ch; }
.note--c { text-align: center; }

/* problem: tool logos, then today vs Completra */
.tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1040px; margin-inline: auto; gap: 12px; margin-bottom: 48px; }
.tools li { display: flex; justify-content: center; align-items: center; gap: 10px; height: 60px; white-space: nowrap; padding: 0 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font: 600 16px/1 var(--sc-font-text); color: var(--navy); }
.tools img { width: auto; display: block; }
.ba { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; gap: 0; }
.ba__side { border-radius: 20px; padding: 26px; display: grid; gap: 16px; align-content: start; }
.ba__side--before { background: var(--mist); border: 1px solid var(--line); }
.ba__side--after { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ba__arrow { display: grid; place-items: center; color: var(--orange-600); }
.ba__arrow .ico { width: 28px; height: 28px; }
.ba__tools { display: grid; gap: 10px; }
.ba__tools li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px dashed var(--line-strong); }
.ba__brand { display: inline-flex; align-items: center; gap: 10px; }
.ba__brand img { width: 22px; height: 22px; object-fit: contain; }
.ba__tools .mono { font-size: 13px; color: var(--slate-600); }
.ba__rec { display: grid; gap: 18px; }
.ba__rec .kv > div { grid-template-columns: 130px minmax(0, 1fr); padding: 12px 0; }

/* journey rows: identical shape */
.feats { display: grid; gap: 120px; }
.feat { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.feat__copy { display: grid; gap: 16px; justify-items: start; }
.feat__copy h3 { font: 800 clamp(26px, 2.6vw, 36px)/1.1 var(--display); letter-spacing: -.03em; }
.feat__copy > p:not(.step) { font-size: 17.5px; color: var(--slate-600); max-width: 40ch; }
.step { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-600); }
.step span { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; letter-spacing: 0; }
.ticks { display: grid; gap: 12px; margin-top: 4px; }
.ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 16px; font-weight: 500; }
.ticks li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7A3E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ticks--navy li { color: var(--on-navy); font-size: 15px; }
.ticks--navy li::before { background-color: rgb(52 211 153 / .14); }
.midcta { display: grid; justify-items: center; margin-top: 96px; }

/* security */
.sec2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.sec2__card { background: radial-gradient(500px 300px at 30% 20%, var(--navy-glow), var(--navy)); border-radius: 28px; padding: 56px 40px; }
.seals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.seals li { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgb(255 255 255 / .55); display: grid; place-content: center; justify-items: center; gap: 3px; color: #fff; text-align: center; }
.seals .ico { width: 20px; height: 20px; color: var(--green-on-navy); }
.seals b { font: 800 15px/1 var(--display); }
.seals span { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy-soft); }
.sec2__copy { display: grid; gap: 14px; }
.sec2__copy > p:not(.label) { font-size: 18px; color: var(--slate-600); max-width: 44ch; }

/* comparison */
.cmp-wrap { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: #fff; }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 18px 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--slate-600); text-align: left; vertical-align: middle; }
.cmp thead th { border-top: 0; font: 700 15px/1.3 var(--sc-font-text); color: var(--navy); }
.cmp tbody th { font-weight: 600; color: var(--navy); }
.cmp .cmp__us { background: var(--navy); color: #fff; font-weight: 600; }
.cmp .cmp__us svg { display: inline-block; vertical-align: -5px; margin-right: 8px; }
.cmp thead .cmp__us svg { width: 22px; height: 22px; }
.cmp td.cmp__us .ico { color: var(--green-on-navy); }

/* faq */
.faq2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: 1000px; margin-inline: auto; }
.faq2 > div { padding: 24px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.faq2 dt { font: 700 18px/1.3 var(--display); letter-spacing: -.015em; }
.faq2 dd { margin: 0; color: var(--slate-600); font-size: 16px; }

/* final */
.lp-final { background: radial-gradient(900px 420px at 50% 0%, var(--navy-glow), var(--navy) 70%); color: #fff; }
.lp-final__in { display: grid; justify-items: center; text-align: center; gap: 18px; padding-block: var(--lp-sec); }
.lp-final h2 { max-width: 18ch; }
.lp-final p { font-size: 18px; color: var(--on-navy-soft); }
.lp-foot { background: var(--navy); }

/* booking panel */
.book2 { padding: 0; border: 0; border-radius: 24px; width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: 0 40px 100px -30px rgb(0 0 0 / .6); }
.book2::backdrop { background: rgb(11 25 41 / .62); }
.book2__in { display: grid; grid-template-columns: 1fr 1fr; }
.book2__left { background: radial-gradient(500px 300px at 20% 0%, var(--navy-glow), var(--navy)); color: #fff; padding: 40px 36px; display: grid; gap: 20px; align-content: start; }
.book2__left h2 { font: 800 30px/1.1 var(--display); letter-spacing: -.03em; }
.book2__right { position: relative; padding: 48px 36px 36px; display: grid; gap: 14px; align-content: center; justify-items: start; }
.book2__right h3 { font: 800 24px/1.15 var(--display); letter-spacing: -.025em; }
.book2__right p { color: var(--slate-600); }
.book2__go { width: 100%; }
.book2__alt { font-weight: 600; color: var(--navy); text-underline-offset: .22em; }
.book2__fine { font-size: 13px; }
.book2__x { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--mist); display: grid; place-items: center; color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .book2__x:hover { background: var(--line); } }

/* tablet */
@media (max-width: 1023px) {
  :root { --lp-sec: 72px; }
  .feat, .sec2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feats { gap: 80px; }
  .faq2 { grid-template-columns: 1fr; }
  .ba { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ba__arrow { rotate: 90deg; height: 36px; }
}
/* phone */
@media (max-width: 699px) {
  :root { --lp-sec: 56px; }
  .topbar { font-size: 13px; }
  .lp-nav .nav__trial { display: none; }
  .lp-hero { padding-top: 48px; }
  .lp-hero__sub { font-size: 17px; }
  .lp-hero__cta, .lp-hero .btn--lg, .lp-final .btn--lg, .midcta .btn--lg { width: 100%; }
  .trust { flex-direction: column; align-items: center; }
  .strip li { font-size: 17px; }
  .tools li { font-size: 14.5px; padding: 0 12px; }
  .lp-sh { margin-bottom: 36px; }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba__side { padding: 18px; }
  .ba__rec .kv > div { grid-template-columns: 104px minmax(0, 1fr); }
  .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec2__card { padding: 32px 28px; }
  .cmp-wrap { overflow-x: auto; }
  .cmp { min-width: 620px; }
  .cmp th, .cmp td { padding: 14px; font-size: 14px; }
  .book2__in { grid-template-columns: 1fr; }
  .book2__left { padding: 28px; }
  .midcta { margin-top: 64px; }
}

/* ---- alternating rows and their buttons ---- */
.feat--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.feat--flip .feat__copy { order: 2; }
.feat__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 10px; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 2px; transition: border-color 140ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .more:hover { border-color: var(--navy); } }

/* ---- free-trial pop-up ---- */
.trial { padding: 0; border: 0; border-radius: 24px; width: min(880px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: 0 40px 100px -30px rgb(0 0 0 / .6); }
.trial::backdrop { background: rgb(11 25 41 / .62); }
.trial__in { display: grid; grid-template-columns: 5fr 6fr; }
.trial__pic { margin: 0; background: radial-gradient(420px 360px at 50% 30%, var(--orange-tint), var(--mist-2)); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; min-height: 100%; }
.trial__pic img { width: 100%; height: auto; display: block; }
.trial__copy { position: relative; padding: 48px 40px 36px; display: grid; gap: 14px; align-content: center; justify-items: start; }
.trial__copy h2 { font: 800 32px/1.1 var(--display); letter-spacing: -.03em; }
.trial__copy > p:not(.label):not(.book2__fine) { color: var(--slate-600); font-size: 16.5px; }
.trial__go { width: 100%; margin-top: 6px; }
.trial .book2__fine { font-size: 13px; color: var(--slate-600); }
@media (max-width: 699px) {
  .trial__in { grid-template-columns: 1fr; }
  .trial__pic { max-height: 220px; }
  .trial__pic img { width: 62%; }
  .trial__copy { padding: 28px 24px; }
  .trial__copy h2 { font-size: 26px; }
  .feat__cta .btn { flex: 1 1 100%; }
}
@media (max-width: 1023px) {
  .feat--flip { grid-template-columns: minmax(0, 1fr); }
  .feat--flip .feat__copy { order: 0; }
}

/* ---- motion: rows enter, then each dashboard plays its own small story ----
   Transform and opacity only. Without JavaScript, or with reduced motion,
   everything is simply shown in its finished state. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim] .feat__copy, .js [data-anim] .shot { opacity: 0; transition: opacity 600ms var(--sc-ease-out), transform 700ms var(--sc-ease-out); }
  .js [data-anim] .feat__copy { transform: translateX(-32px); }
  .js [data-anim].feat--flip .feat__copy { transform: translateX(32px); }
  .js [data-anim] .shot { transform: translateY(40px); transition-delay: 120ms; }
  .js [data-anim].is-in .feat__copy, .js [data-anim].is-in .shot { opacity: 1; transform: none; }

  .js [data-anim] .ticks li { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--sc-ease-out), transform 400ms var(--sc-ease-out); }
  .js [data-anim].is-in .ticks li { opacity: 1; transform: none; }
  .js [data-anim].is-in .ticks li:nth-child(1) { transition-delay: 350ms; }
  .js [data-anim].is-in .ticks li:nth-child(2) { transition-delay: 450ms; }
  .js [data-anim].is-in .ticks li:nth-child(3) { transition-delay: 550ms; }

  /* enroll: cards drop into their columns one by one */
  .js [data-anim] .ui-k { opacity: 0; transform: translateY(-14px); transition: opacity 360ms var(--sc-ease-out), transform 420ms var(--sc-ease-out); transition-delay: calc(500ms + var(--i, 0) * 110ms); }
  .js [data-anim].is-in .ui-k { opacity: 1; transform: none; }

  /* track: weekly bars grow, ring fills */
  .js [data-anim] .ui-chart span { transform: scaleY(.04); transform-origin: bottom; transition: transform 600ms var(--sc-ease-out); transition-delay: calc(500ms + var(--i, 0) * 70ms); }
  .js [data-anim].is-in .ui-chart span { transform: none; }
  .js [data-anim] .ring { transform: rotate(-90deg) scale(.9); opacity: 0; transition: transform 900ms var(--sc-ease-out), opacity 500ms var(--sc-ease-out); transition-delay: 450ms; }
  .js [data-anim] .ring b, .js [data-anim] .ring span { display: inline-block; }
  .js [data-anim].is-in .ring { transform: none; opacity: 1; }

  /* report: rows land, then the file-ready toast */
  .js [data-anim] .ui-table tbody tr { opacity: 0; transform: translateX(14px); transition: opacity 320ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); transition-delay: calc(500ms + var(--i, 0) * 80ms); }
  .js [data-anim].is-in .ui-table tbody tr { opacity: 1; transform: none; }
  .js [data-anim] .ui-toast { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out); transition-delay: 1300ms; }
  .js [data-anim].is-in .ui-toast { opacity: 1; transform: none; }

  /* problem: the five records fade back, the one record comes forward */
  .js .ba[data-anim] .ba__side--before, .js .ba[data-anim] .ba__side--after, .js .ba[data-anim] .ba__arrow { opacity: 0; transition: opacity 500ms var(--sc-ease-out), transform 600ms var(--sc-ease-out); }
  .js .ba[data-anim] .ba__side--before { transform: translateX(-24px); }
  .js .ba[data-anim] .ba__side--after { transform: translateX(24px); transition-delay: 300ms; }
  .js .ba[data-anim] .ba__arrow { transition-delay: 200ms; }
  .js .ba[data-anim].is-in > * { opacity: 1; transform: none; }

  /* hero dashboard: rows stagger in once on load */
  .js .lp-hero__shot .ui-table tbody tr { opacity: 0; animation: lp-row 420ms var(--sc-ease-out) forwards; animation-delay: calc(300ms + var(--i, 0) * 70ms); }
  .js .lp-hero__shot .ui-bar { transform: scaleX(.02); transform-origin: left; animation: lp-bar 800ms var(--sc-ease-out) forwards; animation-delay: calc(500ms + var(--i, 0) * 70ms); }
}
@keyframes lp-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lp-bar { to { transform: none; } }

/* live dashboards: a card moving between columns, counters ticking */
.ui-k.is-moving { z-index: 2; }
.ui-col__h span { transition: background-color 200ms var(--sc-ease-out); }
.ui-col__h span.is-bump { background: var(--green-tint); color: var(--green-ink); }
.ui-bar i { transition: transform 600ms var(--sc-ease-out); }
.ring { transition: background 600ms var(--sc-ease-out); }
.tick-up { animation: lp-tick 500ms var(--sc-ease-out); }
@keyframes lp-tick { 0% { color: var(--green-ink); } 100% { color: inherit; } }

/* footer: centred, matching the centred close above it */
.lp-foot .foot__in { flex-direction: column; justify-content: center; text-align: center; gap: 14px; padding-block: 8px; }
.lp-foot .foot__links { justify-content: center; }

/* ---------------------------------------------------------------- phone --
   One rule on small screens: everything sits on the same left edge, cards
   run full width and stack. Dashboards switch to a narrower drawing so their
   text stays readable. */
@media (max-width: 699px) {
  .lp-sh--c, .lp-sh { justify-items: start; text-align: left; }
  .lp-sh--c h2 { max-width: none; }
  .lp-final__in { justify-items: start; text-align: left; }
  .lp-final .lp-hero__cta, .lp-hero__cta { justify-items: stretch; }
  .lp-final .lp-hero__alt, .lp-hero .lp-hero__alt { justify-self: start; }
  .lp-hero__in { justify-items: start; text-align: left; }
  .lp-hero h1 { max-width: none; }
  .trust { align-items: flex-start; }
  .feat__cta { display: grid; justify-items: start; width: 100%; }
  .feat__cta .btn { width: 100%; }
  .midcta .btn { width: 100%; }
  .ui-k .ui-who { align-items: flex-start; }
  .ui-k .ui-who b { white-space: nowrap; font-size: 13.5px; }
  .ui-k .av, .ui-k__p { display: none; }
  .ui-k { padding: 10px; gap: 6px; }
  .ui-table td { white-space: nowrap; }
  .feats .feat:nth-child(3) .ui-table th:first-child, .feats .feat:nth-child(3) .ui-table td:first-child { display: none; }
  .feats .feat:nth-child(3) .ui-table th:nth-child(4), .feats .feat:nth-child(3) .ui-table td:nth-child(4) { display: table-cell; }
  .feats .feat:nth-child(3) .ui-table th:nth-child(3), .feats .feat:nth-child(3) .ui-table td:nth-child(3) { display: none; }
  .note--c { text-align: left; }
  .strip__in, .strip ul { justify-content: flex-start; }
  .strip li { font-size: 16px; }
  .tools { margin-bottom: 32px; }
  .ba__tools li { padding: 11px 12px; }
  .ba__tools .mono { font-size: 12px; }

  /* dashboards: simpler shells on the phone drawing */
  .ui--app { grid-template-columns: minmax(0, 1fr); }
  .ui--app .ui-side { display: none; }
  .ui-main { padding: 20px; }
  .ui-search { display: none; }
  .ui-kpis { gap: 10px; }
  .ui-kpis b { font-size: 26px; }
  .ui-table th:nth-child(4), .ui-table td:nth-child(4) { display: none; }
  .ui-kan { gap: 8px; }
  .ui-col { padding: 8px; height: 236px; }
  .ui-trk { grid-template-columns: 200px minmax(0, 1fr); }
  .ui-trk .ui-card:nth-child(2) { grid-column: 2; }
  .ui-trk .ui-card:nth-child(3), .ui-trk .ui-card:nth-child(4) { grid-column: 1 / -1; }
  .ui-trk .ui-ring { grid-row: auto; }
  .ui-trk .ui-card:nth-child(4) { display: none; }

  /* comparison: each task becomes its own card */
  .cmp-wrap { overflow: visible; border: 0; background: none; border-radius: 0; }
  .cmp { min-width: 0; }
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp tbody { display: grid; gap: 12px; }
  .cmp tr { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
  .cmp tbody th { border-top: 0; padding: 16px 16px 8px; font: 800 18px/1.2 var(--display); }
  .cmp td { border-top: 0; padding: 6px 16px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; font-size: 14.5px; }
  .cmp td::before { content: attr(data-label); font: 600 11px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--slate-600); padding-top: 2px; }
  .cmp td.cmp__us { margin-top: 8px; padding: 12px 16px 14px; }
  .cmp td.cmp__us::before { color: var(--on-navy-soft); }
  .cmp td.cmp__us .ico { display: none; }
}

/* ------------------------------------------------ what changes: ticker --
   One row of before/after cards drifting sideways. The set is drawn twice so
   the loop has no visible jump; the copy is hidden from screen readers. Hover, focus
   or touch pauses it. With reduced motion it becomes a plain scrollable row. */
.ticker { overflow: hidden; padding: 8px 0 28px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__track { display: flex; gap: 20px; width: max-content; padding-inline: 10px; animation: lp-ticker 46s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track, .ticker.is-paused .ticker__track { animation-play-state: paused; }
@keyframes lp-ticker { to { transform: translateX(calc(-50% - 10px)); } }
.tk { width: 300px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; display: grid; }
.tk p { margin: 0; }
.tk__t { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; font: 800 19px/1.2 var(--display); letter-spacing: -.02em; }
.tk__i { width: 40px; height: 40px; border-radius: 12px; background: var(--mist-2); display: grid; place-items: center; color: var(--navy); flex: none; }
.tk__b, .tk__a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 20px; }
.tk small { display: block; font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.tk__b { color: var(--slate-600); font-size: 16px; border-top: 1px solid var(--line); }
.tk__b s { text-decoration-color: var(--orange-600); text-decoration-thickness: 2px; }
.tk__x { width: 24px; height: 24px; border-radius: 50%; background: var(--amber-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392500A' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.tk__a { background: var(--navy); color: #fff; font: 700 17px/1.3 var(--sc-font-text); }
.tk__a small { color: var(--on-navy-soft); font-weight: 600; }
.tk__m { width: 26px; height: 26px; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; mask-image: none; scroll-snap-type: x mandatory; }
  .ticker__track { animation: none; padding-inline: var(--pad); }
  .ticker__track > [aria-hidden="true"] { display: none; }
  .tk { scroll-snap-align: start; }
}
@media (max-width: 699px) {
  .tk { width: 264px; }
  .ticker__track { gap: 14px; animation-duration: 38s; }
}

/* ---- spacing audit fixes (playwright, 1440 / 1024 / 768 / 390 / 360) ---- */
/* the journey section is the page's main beat: it gets more room */
#product { padding-block: calc(var(--lp-sec) + 24px); }
/* tablet joins the phone rule: one left edge once the layout is one column */
@media (max-width: 1023px) {
  .lp-sh--c, .lp-sh { justify-items: start; text-align: left; }
  .lp-sh--c h2 { max-width: 26ch; }
  .lp-hero__in { justify-items: start; text-align: left; }
  .lp-hero .lp-hero__cta { justify-items: start; }
  .trust { justify-content: flex-start; }
  .lp-final__in { justify-items: start; text-align: left; }
  .lp-final .lp-hero__cta { justify-items: start; }
  .note--c { text-align: left; }
  .strip__in, .strip ul { justify-content: flex-start; }
  .faq2 { margin-inline: 0; }
}
/* phone: card gaps at least as large as card padding; 44px touch targets */
@media (max-width: 699px) {
  .ticker__track { gap: 16px; }
  .lp .btn--sm { min-height: 44px; }
  .lock { min-height: 44px; }
  .more { padding-block: 12px 4px; }
  .lp-hero__alt { display: inline-block; padding-block: 11px; }
  .lp-hero .lp-hero__cta, .lp-final .lp-hero__cta { justify-items: stretch; }
}

/* cards: gap never smaller than card padding (24px) */
.lp .grid4, .lp .grid4:not(.secrow) { gap: 24px; }

/* security seals: compact badges once the section stacks (tablet, phone) */
@media (max-width: 1023px) {
  .sec2__card { padding: 20px; border-radius: 22px; }
  .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .seals li { aspect-ratio: auto; border-radius: 14px; border-width: 1px; border-color: rgb(255 255 255 / .22); background: rgb(255 255 255 / .04);
    display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; place-content: center start; justify-items: start; text-align: left; padding: 12px 14px; }
  .seals .ico { grid-row: span 2; align-self: center; }
  .seals b { font-size: 15px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .seals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) { .sec2__copy { order: -1; } }

/* ---- top bar: a ticker of the trial offer. The whole bar is one link. ---- */
.topbar { display: block; overflow: hidden; padding: 0; text-decoration: none; color: var(--on-navy); background: var(--navy-2); }
.topbar__track { display: flex; width: max-content; animation: lp-topbar 38s linear infinite; }
.topbar__set { display: flex; align-items: center; flex: none; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; padding: 11px 0; font-size: 14px; white-space: nowrap; }
.topbar__item b { color: #fff; font-weight: 600; }
.topbar__item .ico { width: 15px; height: 15px; color: var(--orange); }
.topbar__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); margin: 0 26px; flex: none; }
.topbar:hover .topbar__track, .topbar:focus-visible .topbar__track { animation-play-state: paused; }
.topbar:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@keyframes lp-topbar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .topbar__track { animation: none; width: auto; justify-content: center; }
  .topbar__set + .topbar__set, .topbar__set > :nth-child(n+5) { display: none; }
}
@media (max-width: 699px) { .topbar__item { font-size: 13px; padding: 10px 0; } .topbar__track { animation-duration: 30s; } }

/* ---- programs: a band of program chips drifting under the hero ---- */
.strip { padding: 28px 0 8px; }
.strip__in2 { max-width: 1160px; margin-inline: auto; padding-inline: var(--pad); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; }
.strip__lead { font-weight: 600; color: var(--slate-600); font-size: 15px; white-space: nowrap; }
.pticker { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pticker__track { display: flex; gap: 12px; width: max-content; animation: lp-pticker 40s linear infinite; }
.pticker:hover .pticker__track { animation-play-state: paused; }
@keyframes lp-pticker { to { transform: translateX(calc(-50% - 6px)); } }
.pchip { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 12px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); white-space: nowrap; }
.pchip b { font: 800 17px/1 var(--display); letter-spacing: -.02em; }
.pchip span:last-child { font-size: 13.5px; color: var(--slate-600); padding-left: 10px; border-left: 1px solid var(--line); }
.pchip__ck { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7A3E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 15px no-repeat; }
@media (prefers-reduced-motion: reduce) {
  .pticker { overflow-x: auto; mask-image: none; }
  .pticker__track { animation: none; }
  .pticker__track > [aria-hidden="true"] { display: none; }
}
@media (max-width: 1023px) {
  .strip__in2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pticker { margin-inline: calc(var(--pad) * -1); }
}
@media (max-width: 699px) {
  .pchip { height: 46px; }
  .pchip b { font-size: 15.5px; }
  .pchip span:last-child { font-size: 12.5px; }
  .pticker__track { animation-duration: 32s; }
}

/* ---- problem: the tools get crossed out, then the one record lights up ----
   Order on scroll: tiles struck one by one, the five records struck, the
   arrow, then the navy Completra record with its rows checking in. */
.tools li { position: relative; overflow: hidden; }
.tools li::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 2.5px; border-radius: 2px; background: var(--orange-600); transform: rotate(-8deg) scaleX(1); transform-origin: left center; }
.tools li img, .tools li span { transition: opacity 400ms var(--sc-ease-out), filter 400ms var(--sc-ease-out); }
.tools li img { filter: grayscale(1); opacity: .55; }
.tools li span { opacity: .55; }
.ba__tools li > * { opacity: .6; }
.ba__tools .mono { text-decoration: line-through; text-decoration-color: var(--orange-600); text-decoration-thickness: 2px; }

/* the one record: navy, so it is the thing to point at */
.ba__side--after { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 24px 60px -24px rgb(11 25 41 / .55), 0 0 0 6px rgb(52 211 153 / .14); }
.ba__side--after .label { color: var(--on-navy-soft); }
.ba__lab { display: inline-flex; align-items: center; gap: 8px; }
.ba__lab svg { width: 22px; height: 22px; color: #fff; }
.ba__side--after .ui-who b { color: #fff; }
.ba__side--after .ui-who small { color: var(--on-navy-soft); }
.ba__side--after .av { background: var(--orange); color: var(--navy); }
.ba__side--after .kv > div { border-top-color: rgb(255 255 255 / .12); }
.ba__side--after .kv dt { color: var(--on-navy-soft); }
.ba__side--after .kv dd { color: #fff; }
.ba__side--after .kv dd.ok::before { background: var(--green-on-navy); }

@media (prefers-reduced-motion: no-preference) {
  .js .tools[data-anim] li::after { transform: rotate(-8deg) scaleX(0); transition: transform 420ms var(--sc-ease-out); transition-delay: calc(250ms + var(--i, 0) * 180ms); }
  .js .tools[data-anim] li img { filter: none; opacity: 1; transition-delay: calc(350ms + var(--i, 0) * 180ms); }
  .js .tools[data-anim] li span { opacity: 1; transition-delay: calc(350ms + var(--i, 0) * 180ms); }
  .js .tools[data-anim].is-in li::after { transform: rotate(-8deg) scaleX(1); }
  .js .tools[data-anim].is-in li img { filter: grayscale(1); opacity: .55; }
  .js .tools[data-anim].is-in li span { opacity: .55; }

  .js .ba[data-anim] .ba__tools li > * { opacity: 1; transition: opacity 400ms var(--sc-ease-out); transition-delay: calc(500ms + var(--i, 0) * 150ms); }
  .js .ba[data-anim] .ba__tools .mono { text-decoration-color: transparent; transition: text-decoration-color 300ms var(--sc-ease-out), opacity 400ms var(--sc-ease-out); transition-delay: calc(500ms + var(--i, 0) * 150ms); }
  .js .ba[data-anim].is-in .ba__tools li > * { opacity: .6; }
  .js .ba[data-anim].is-in .ba__tools .mono { text-decoration-color: var(--orange-600); }

  .js .ba[data-anim] .ba__side--after { transition-delay: 1350ms; transform: translateY(18px) scale(.97); }
  .js .ba[data-anim] .ba__arrow { transition-delay: 1150ms; }
  .js .ba[data-anim].is-in > .ba__side--after { transform: none; }
  .js .ba[data-anim] .ba__side--after .kv > div { opacity: 0; transform: translateX(-8px); transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out); transition-delay: calc(1700ms + var(--i, 0) * 160ms); }
  .js .ba[data-anim].is-in .ba__side--after .kv > div { opacity: 1; transform: none; }
  .js .ba[data-anim].is-in .ba__arrow { animation: lp-nudge 900ms var(--sc-ease-out) 1300ms 2; }
}
@keyframes lp-nudge { 50% { transform: translateX(6px); } }
@media (max-width: 1023px) { @keyframes lp-nudge { 50% { transform: translateY(6px); } } }

/* stacked layouts: the Completra record waits for its own moment on screen */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .js .ba[data-anim].is-in > .ba__side--after:not(.is-in) { opacity: 0; transform: translateY(18px) scale(.97); }
  .js .ba[data-anim] .ba__side--after.is-in { transition-delay: 150ms; }
  .js .ba[data-anim].is-in .ba__side--after:not(.is-in) .kv > div { opacity: 0; transform: translateX(-8px); }
  .js .ba[data-anim] .ba__side--after.is-in .kv > div { transition-delay: calc(500ms + var(--i, 0) * 160ms); }
}

/* ---- tool tiles carry their price; the Completra record carries ours ---- */
.tools li { height: auto; min-height: 64px; padding: 10px 14px; justify-content: flex-start; }
.tools__n { display: grid; gap: 3px; text-align: left; }
.tools__p { font: 500 12px/1.2 var(--sc-font-text); color: var(--slate-600); white-space: nowrap; }
.tools__p b { font-family: var(--mono); font-weight: 600; color: var(--navy); }
.tools__note { max-width: 1040px; margin: -36px auto 48px; font-size: 12.5px; color: var(--slate-600); text-align: center; }
.ba__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; padding: 14px 16px; border-radius: 14px; background: var(--orange); color: var(--navy); }
.ba__price span { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ba__price b { font: 600 26px/1 var(--mono); letter-spacing: -.02em; }
.ba__price small { font-size: 14px; font-weight: 500; }
@media (max-width: 1023px) { .tools__note { text-align: left; margin: -20px 0 32px; } }
@media (max-width: 699px) { .tools li { padding: 10px 12px; } .tools__p { font-size: 11.5px; white-space: normal; } }
@media (prefers-reduced-motion: no-preference) {
  .js .ba[data-anim] .ba__price { opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); transition-delay: 2450ms; }
  .js .ba[data-anim].is-in .ba__price { opacity: 1; transform: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .js .ba[data-anim].is-in .ba__side--after:not(.is-in) .ba__price { opacity: 0; }
  .js .ba[data-anim] .ba__side--after.is-in .ba__price { transition-delay: 1200ms; }
}

/* tiles v2: name row is crossed out, price row stays readable */
.tools { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
.tools li { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 34px auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 14px 16px; min-height: 0; }
.tools li img { grid-row: 1; width: 34px; height: 34px !important; object-fit: contain; }
.tools__n { display: block; font: 600 16px/1.2 var(--sc-font-text); }
.tools li .tools__p { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-size: 12.5px; white-space: normal; opacity: 1 !important; filter: none !important; color: var(--slate-600); }
.tools li .tools__p b { font: 600 16px/1 var(--mono); color: var(--navy); }
.tools li::after { top: 31px; left: 12px; right: 12px; }
.js .tools[data-anim].is-in li span.tools__n { opacity: .55; }
.tools li span.tools__n { opacity: .55; }
@media (prefers-reduced-motion: no-preference) { .js .tools[data-anim] li span.tools__n { opacity: 1; } .js .tools[data-anim].is-in li span.tools__n { opacity: .55; } }
@media (max-width: 699px) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tools li { padding: 12px; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 28px auto; column-gap: 10px; }
  .tools li img { width: 28px; height: 28px !important; }
  .tools__n { font-size: 14.5px; }
  .tools li::after { top: 26px; }
  .tools li .tools__p { flex-direction: column; gap: 3px; font-size: 11.5px; }
  .tools li .tools__p b { font-size: 14px; }
}

/* ---- home: pick your program ---- */
.prog2s { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.prog2 { display: grid; gap: 12px; align-content: start; padding: 24px; height: 100%; text-decoration: none; transition: transform 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out); }
.prog2 b { font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
.prog2 > span:not(.icobox):not(.prog2__go) { color: var(--slate-600); font-size: 15px; }
.prog2__go { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); border-bottom: 2px solid var(--orange); justify-self: start; padding-bottom: 2px; }
@media (hover: hover) and (pointer: fine) { .prog2:hover { transform: translateY(-4px); border-color: var(--navy); } }
@media (max-width: 1023px) { .prog2s { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .prog2s { grid-template-columns: minmax(0, 1fr); gap: 16px; } .prog2 { padding: 20px; } }
.pchip a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; height: 100%; }

/* ---- program pages ---- */
.lp-hero--prog { padding-bottom: 96px; background: radial-gradient(1100px 520px at 50% 0%, var(--navy-glow) 0%, var(--navy) 62%); }
.lp-hero--prog .lp-hero__in { padding-bottom: 0; }
.scn { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.sc-steps { display: grid; gap: 8px; }
.sc-step { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--navy); transition: border-color 200ms var(--sc-ease-out), background-color 200ms var(--sc-ease-out); }
.sc-n { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--mist-2); font: 600 13px/1 var(--mono); }
.sc-t { font: 700 16px/1.25 var(--sc-font-text); }
.sc-bar { display: block; height: 3px; border-radius: 3px; background: var(--line); margin-top: 8px; overflow: hidden; }
.sc-bar i { display: block; height: 100%; width: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); }
.sc-step[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.sc-step[aria-pressed="true"] .sc-n { background: var(--orange); color: var(--navy); }
.sc-step[aria-pressed="true"] .sc-bar { background: rgb(255 255 255 / .16); }
.sc-step.is-done .sc-n { background: var(--green-tint); color: var(--green-ink); }
.sc-step.is-done .sc-bar i { transform: none; background: var(--green); }
@media (hover: hover) and (pointer: fine) { .sc-step:not([aria-pressed="true"]):hover { border-color: var(--navy); } }
.sc-stage { position: sticky; top: calc(var(--nav) + 24px); }
.sc-frame { position: relative; min-height: 440px; border-radius: 22px; background: var(--mist); border: 1px solid var(--line-2); box-shadow: 0 30px 70px -34px rgb(11 25 41 / .35); padding: 28px; overflow: hidden; }
.sc-panel { position: absolute; inset: 28px; display: grid; gap: 16px; align-content: start; opacity: 0; transform: translateY(12px); transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); pointer-events: none; }
.sc-panel.is-on { opacity: 1; transform: none; pointer-events: auto; position: relative; inset: auto; }
.sc-cap { font: 700 20px/1.3 var(--display); letter-spacing: -.015em; max-width: 34ch; }
.sc-card, .sc-form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: grid; gap: 14px; }
.sc-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sc-row span { font: 500 12.5px/1.3 var(--mono); color: var(--slate-600); }
.sc-row--top { align-items: start; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chips li, .sc-auto li { padding: 6px 10px; border-radius: 99px; background: var(--mist-2); font-size: 13px; font-weight: 500; }
.sc-toast { justify-self: start; }
.sc-list { display: grid; gap: 8px; }
.sc-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-strong); font-weight: 500; }
.sc-approve { display: flex; align-items: center; gap: 14px; padding-top: 6px; }
.sc-sign { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: var(--mist); font-weight: 500; }
.sc-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-opt { padding: 14px; border-radius: 12px; border: 1px solid var(--line-strong); text-align: center; font-weight: 600; }
.sc-opt.is-on { border-color: var(--navy); background: var(--navy); color: #fff; }
.sc-auto { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-auto li { background: var(--green-tint); color: var(--green-ink); }
.sc-track { grid-template-columns: 180px minmax(0, 1fr); align-items: center; }
.sc-track .ring { width: 150px; height: 150px; margin: 0; }
.sc-stats { display: grid; gap: 10px; }
.sc-stats div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sc-stats span { color: var(--slate-600); font-size: 14px; }
.sc-stats b.ok { color: var(--green-ink); }
.sc-done { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc-transcript ul { display: grid; gap: 10px; }
.sc-transcript li { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sc-cert { background: var(--navy); color: #fff; border-radius: 16px; padding: 20px; display: grid; gap: 6px; align-content: center; justify-items: center; text-align: center; box-shadow: 0 0 0 6px rgb(52 211 153 / .14); }
.sc-cert svg { width: 40px; height: 40px; color: #fff; }
.sc-cert .ui-kicker { color: var(--on-navy-soft); }
.sc-cert b { font: 800 20px/1.2 var(--display); }
.sc-cert span { color: var(--on-navy-soft); font-size: 14px; }
.wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.win { padding: 24px; display: grid; gap: 12px; align-content: start; }
.win h3 { font: 800 20px/1.2 var(--display); letter-spacing: -.02em; }
.win p { color: var(--slate-600); }
#walkthrough[hidden] { display: none; }
@media (max-width: 1023px) {
  .scn { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sc-steps { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .sc-steps li { flex: 0 0 auto; scroll-snap-align: start; }
  .sc-step { width: auto; min-width: 200px; }
  .sc-stage { position: static; }
  .wins { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .sc-frame { padding: 16px; min-height: 0; }
  .sc-panel { inset: 16px; }
  .sc-cap { font-size: 17px; }
  .sc-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sc-track, .sc-done { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .sc-step { min-width: 170px; padding: 12px; }
  .sc-t { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .sc-panel { transition: none; } }

/* prices removed: tiles back to one row, logo and name, crossed out */
.tools { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1040px; }
.tools li { display: flex; justify-content: center; align-items: center; gap: 10px; height: 60px; min-height: 0; padding: 0 14px; }
.tools li img { width: auto; height: 30px !important; }
.tools li::after { top: 50%; left: 10px; right: 10px; }
@media (max-width: 1023px) { .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tools li { padding: 0 12px; display: flex; }
  .tools li img { height: 26px !important; }
  .tools li::after { top: 50%; }
}
.sc-transcript li { gap: 12px; }

/* ---- scroll story: Meet Tiara ----
   The section is tall; its inner stage sticks to the screen while the reader
   scrolls, and scroll position picks the beat. */
.story { position: relative; height: calc(var(--beats) * 70vh + 30vh); background: linear-gradient(180deg, #fff, var(--mist) 30%, var(--mist) 70%, #fff); }
.story__pin { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); height: calc(100svh - var(--nav)); display: grid; align-items: center; overflow: hidden; }
.story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; width: 100%; }
.story__text { position: relative; min-height: 300px; }
.st-beat { position: absolute; inset: 0 0 auto 0; display: grid; gap: 14px; opacity: 0; transform: translateY(16px); transition: opacity 380ms var(--sc-ease-out), transform 380ms var(--sc-ease-out); pointer-events: none; }
.st-beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.st-beat h2 { font: 800 clamp(30px, 3.6vw, 48px)/1.06 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.st-beat p:not(.label) { font-size: 18px; color: var(--slate-600); max-width: 38ch; }
.st-beat[data-beat="0"] h2 { font-size: clamp(40px, 5vw, 64px); }
.st-dots { position: absolute; left: 0; bottom: -8px; display: flex; gap: 8px; }
.st-dots li { width: 28px; height: 4px; border-radius: 4px; background: var(--line); transition: background-color 300ms var(--sc-ease-out); }
.st-dots li.is-on { background: var(--orange); }
.st-dots li.is-done { background: var(--navy); }
.story__vis { position: relative; height: min(620px, calc(100svh - var(--nav) - 80px)); }
.st-glow { position: absolute; left: 4%; right: 34%; bottom: 0; height: 82%; border-radius: 28px; background: radial-gradient(420px 360px at 50% 30%, var(--orange-tint), var(--mist-2)); }
.st-person { position: absolute; left: 4%; right: 34%; bottom: 0; height: 100%; overflow: hidden; border-radius: 0 0 28px 28px; }
.st-look { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; translate: -50% 0; opacity: 0; transition: opacity 500ms var(--sc-ease-out), transform 600ms var(--sc-ease-out); transform: scale(.98); }
.st-look.is-on { opacity: 1; transform: none; }
.st-ui { position: absolute; right: 0; bottom: 8%; width: min(420px, 58%); }
.st-panel { position: absolute; right: 0; bottom: 0; width: 100%; opacity: 0; transform: translateY(20px); transition: opacity 380ms var(--sc-ease-out), transform 420ms var(--sc-ease-out); pointer-events: none; }
.st-panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.st-panel .sc-card, .st-panel .sc-done > * { box-shadow: 0 24px 60px -26px rgb(11 25 41 / .45); }
.st-panel .sc-done { grid-template-columns: minmax(0, 1fr); }
.st-panel .st-approved { opacity: 0; transition: opacity 300ms var(--sc-ease-out) 500ms; }
.st-panel.is-on .st-approved { opacity: 1; }
.st-ring { transition: none; }
@media (max-width: 1023px) {
  .story { height: calc(var(--beats) * 80svh + 20svh); }
  .story__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px; height: 100%; padding-block: 20px; align-items: stretch; }
  .story__text { min-height: 170px; }
  .st-beat h2, .st-beat[data-beat="0"] h2 { font-size: 30px; }
  .st-beat p:not(.label) { font-size: 16px; }
  .st-dots { bottom: 0; }
  .story__vis { height: auto; min-height: 0; }
  .st-glow, .st-person { left: 0; right: 30%; }
  .st-ui { width: 70%; bottom: 4%; }
}
@media (max-width: 699px) {
  .st-beat h2, .st-beat[data-beat="0"] h2 { font-size: 26px; }
  .st-beat p:not(.label) { font-size: 15px; }
  .story__text { min-height: 150px; }
  .st-glow, .st-person { right: 22%; }
  .st-ui { width: 82%; }
  .st-panel .sc-card { padding: 14px; gap: 10px; }
  .st-panel .sc-track { grid-template-columns: 110px minmax(0, 1fr); }
  .st-panel .sc-track .ring { width: 104px; height: 104px; }
  .st-panel .ring b { font-size: 24px; }
  .st-panel .sc-stats span, .st-panel .sc-stats b { font-size: 12.5px; }
  .st-panel .sc-list li { padding: 8px 10px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .st-beat, .st-look, .st-panel { transition: none; } }
/* story: roomier stat cards on wide screens */
@media (min-width: 1024px) {
  .st-ui { width: min(480px, 62%); }
  .st-panel .sc-track { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
  .st-panel .sc-track .ring { width: 140px; height: 140px; }
  .st-panel .sc-stats div { align-items: baseline; }
  .st-panel .sc-stats b { white-space: nowrap; }
}

/* ---- story on the home page; cards never cover her face ----
   Desktop: person on the left of the visual, cards in the right column, only
   the card's left edge overlapping her lower body.
   Tablet and phone: person on top, cards below, overlapping her waist at most. */
.lp-sec--how-head { padding-bottom: 0; }
.lp-sec--how-cta { padding-top: 24px; }
.story--home { background: #fff; }
@media (min-width: 1024px) {
  .story__vis { display: grid; grid-template-columns: minmax(0, 1fr); }
  .st-glow, .st-person { left: 0; right: 42%; }
  .st-ui { right: 0; bottom: 6%; width: 50%; min-width: 360px; }
  .st-panel .sc-done { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .st-panel .sc-cert { padding: 16px; }
  .st-panel .sc-transcript { padding: 16px; gap: 8px; }
  .st-panel .sc-transcript ul { gap: 6px; }
}
@media (max-width: 1023px) {
  .story__vis { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .st-glow, .st-person { position: relative; left: auto; right: auto; bottom: auto; grid-row: 1; grid-column: 1; width: min(100%, 360px); justify-self: center; height: 100%; min-height: 220px; }
  .st-ui { position: relative; right: auto; bottom: auto; grid-row: 2; width: 100%; margin-top: -36px; z-index: 2; }
  .st-panel { position: absolute; left: 0; right: 0; bottom: auto; top: 0; }
  .st-panel.is-on { position: relative; }
  .st-panel .sc-done { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 699px) {
  .st-glow, .st-person { width: min(100%, 300px); }
  .st-ui { margin-top: -28px; }
  .st-panel .sc-done { grid-template-columns: 1fr 1fr; }
  .st-panel .sc-transcript li, .st-panel .sc-transcript li b { font-size: 12px; }
  .st-panel .sc-cert b { font-size: 15px; }
  .st-panel .sc-cert svg { width: 28px; height: 28px; }
}
@media (min-width: 1024px) {
  .st-panel .sc-done { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .st-panel .sc-cert b { font-size: 16px; }
  .st-panel .sc-cert svg { width: 30px; height: 30px; }
  .st-panel .sc-transcript li { font-size: 13px; gap: 8px; }
  .st-ui { bottom: 4%; }
}

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.story__text { min-height: 0; }
.st-dots { bottom: 0; }
/* step dashes sit above the text as a progress bar */
.st-dots { top: 0; bottom: auto; }
.st-beat { inset: 32px 0 auto 0; }
.st-panel .sc-transcript li b { white-space: nowrap; } .st-panel .sc-transcript li span { white-space: nowrap; }

/* story: Tiara may break out of her frame at the top and sides (head, the
   scissors), only the bottom edge is clipped to the rounded frame */
.st-person { overflow: visible; clip-path: inset(-40% -40% 0 -40% round 0 0 28px 28px); }
.st-look { height: 104%; }

/* stat rows: label above value, so nothing wraps at any width */
.st-panel .sc-stats div { display: grid; gap: 2px; justify-content: stretch; }
.st-panel .sc-stats span { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); }
.st-panel .sc-stats b { font-size: 15px; white-space: normal; }
@media (min-width: 1024px) { .st-panel .sc-track { grid-template-columns: 150px minmax(0, 1fr); } }
@media (max-width: 699px) { .st-panel .sc-stats b { font-size: 13.5px; } .st-panel .sc-stats span { font-size: 10px; } }

/* trial pop-up: the graduate fills her panel (head to waist), anchored to the
   bottom, nudged right so her diploma stays in frame */
.trial__pic { position: relative; display: block; min-height: 460px; }
.trial__pic img { position: absolute; bottom: 0; left: 56%; translate: -50% 0; height: 106%; width: auto; max-width: none; }
@media (max-width: 699px) {
  .trial__pic { min-height: 240px; max-height: none; }
  .trial__pic img { height: 110%; width: auto; left: 55%; }
}
@media (max-width: 699px) { .trial__pic { min-height: 270px; } .trial__pic img { height: 100%; left: 54%; } }

/* the one-record card and certificate: the site's standard card shadow, no green ring */
.ba__side--after, .sc-cert { box-shadow: 0 30px 70px -34px rgb(11 25 41 / .45), 0 2px 6px rgb(11 25 41 / .06); }

/* ------------------------------------------ buyer nav + sign-in menu -- */
.nav__main { display: flex; align-items: center; gap: 2px; margin-left: 20px; }
.nav__login { color: var(--navy); text-decoration: none; font: 500 14.5px/1 var(--sc-font-text); padding: 12px 10px; border-radius: 8px; white-space: nowrap; }
.nav__signin { position: relative; }
.nav__signin summary { list-style: none; cursor: pointer; color: var(--navy); font: 500 14.5px/1 var(--sc-font-text); padding: 10px 10px; border-radius: 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.nav__signin summary::-webkit-details-marker { display: none; }
.nav__signin summary::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms var(--sc-ease-out); }
.nav__signin[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.nav__signin-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: flex; flex-direction: column; min-width: 210px; padding: 6px; background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 10px 28px rgba(11, 25, 41, .14); }
.nav__signin-menu a { color: var(--navy); text-decoration: none; font: 500 15px/1.2 var(--sc-font-text); padding: 12px 14px; border-radius: 8px; }
.nav__signin-h { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-600); padding: 14px 14px 6px; margin-top: 4px; border-top: 1px solid var(--line); }
.nav__more { display: none; }
.nav__more summary { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .nav__login:hover, .nav__signin summary:hover { text-decoration: underline; text-underline-offset: .3em; }
  .nav__signin-menu a:hover { background: #F1F5F9; }
}
@media (max-width: 1023px) {
  .nav__main, .nav__acct { display: none; }
  .nav__more { display: block; }
}

/* --------------------------------------------- contact prompt (FAQ) -- */
.faq-contact { display: grid; justify-items: center; gap: 18px; margin-top: 48px; text-align: center; }
.faq-contact p { font-size: 18px; color: var(--slate-600); max-width: 52ch; }
.faq-contact strong { color: var(--navy); }
@media (max-width: 699px) { .faq-contact .btn--lg { width: 100%; } }

/* ------------------------------------------------ schools (social proof) -- */
.lp-proof { padding-bottom: 0; }
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.proof__card { display: grid; gap: 8px; align-content: start; height: 100%; padding: 22px; text-decoration: none; transition: transform 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out); }
.proof__card b { font: 800 19px/1.2 var(--display); letter-spacing: -.02em; }
.proof__loc { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-600); }
.proof__url { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--navy); }
.proof__url .ico { width: 16px; height: 16px; }
.proof__quote { margin: 40px auto 0; max-width: 760px; text-align: center; display: grid; gap: 12px; }
.proof__quote blockquote p { font: 700 22px/1.4 var(--display); letter-spacing: -.01em; }
.proof__quote figcaption { color: var(--slate-600); }
@media (hover: hover) and (pointer: fine) { .proof__card:hover { transform: translateY(-3px); border-color: var(--navy); } }
@media (max-width: 1023px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .proof { grid-template-columns: minmax(0, 1fr); gap: 12px; } .proof__card { padding: 18px; } }

/* ------------------------------------------------- journey: 04 and 05 -- */
.ui-grad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ui-grad .sc-done { margin: 0; grid-template-columns: minmax(0, 1fr); }

/* -------------------------------------------- Tiara, condensed (home) -- */
.tj { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.tj__pic { margin: 0; border-radius: 28px; overflow: hidden; background: radial-gradient(420px 320px at 50% 30%, var(--mist-2), var(--mist)); aspect-ratio: 800 / 820; }
.tj__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tj__copy { display: grid; gap: 18px; justify-items: start; }
.tj__copy h2 { font: 800 clamp(30px, 3.4vw, 46px)/1.08 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.tj__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin: 6px 0 4px; }
.tj__steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.tj__n { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 600 12px/1 var(--mono); }
.tj__steps b { display: block; font: 700 17px/1.3 var(--display); letter-spacing: -.01em; margin-bottom: 4px; }
.tj__steps span:not(.tj__n) { color: var(--slate-600); font-size: 15px; }
.tj__note { font-size: 13px; color: var(--slate-600); }
@media (max-width: 1023px) { .tj { grid-template-columns: minmax(0, 1fr); gap: 32px; } .tj__pic { max-width: 360px; justify-self: center; width: 100%; } }
@media (max-width: 699px) { .tj__steps { grid-template-columns: minmax(0, 1fr); gap: 18px; } .tj__pic { max-width: 260px; } }

/* ------------------------------------------------ programs: six tiles -- */
.prog2s--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .prog2s--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .prog2s--6 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------- sponsored / workforce students -- */
.wf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.wf__copy { display: grid; gap: 16px; }
.wf__copy h2 { font: 800 clamp(30px, 3.4vw, 46px)/1.08 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.wf__copy > p:not(.label) { font-size: 18px; color: var(--slate-600); max-width: 48ch; }
.wf .sc-list b { font-weight: 600; }
@media (max-width: 1023px) { .wf { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ---------------------------------------------- pricing card actions -- */
.grid4 > .plan { display: flex; flex-direction: column; gap: 10px; }
.plan__list { flex: 1; align-content: start; }
.plan__go { margin-top: 14px; width: 100%; justify-content: center; }
.plan__fine { font-size: 12.5px; color: var(--slate-600); text-align: center; }
.lp-sh strong { color: var(--navy); font-weight: 600; }
/* the logo mark keeps its size when the header is tight on phones */
.lp-nav .lock svg { flex: none; }
@media (max-width: 380px) { .lp-nav .lock { font-size: 18px; gap: 8px; } .lp-nav .lock svg { width: 26px; height: 26px; } }

/* --------------------------------------- interest-form follow-up (home) -- */
.wf--flip .shot { order: -1; }
.nt li > span:first-child { display: grid; gap: 3px; }
.nt li b.mono { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); }
@media (max-width: 1023px) { .wf--flip .shot { order: 0; } }

/* ------------------------------------------- cost of separate tools -- */
.cost { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: stretch; margin-bottom: 20px; }
.cost__list { margin: 0; padding: 28px; display: grid; gap: 16px; align-content: start; }
.cost__lead { font-size: 15px; color: var(--slate-600); margin-top: 4px; }
.cost__list ul { display: grid; gap: 10px; }
.cost__row { display: grid; grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr) 4.6em; gap: 14px; align-items: center; }
.cost__name { display: grid; gap: 1px; min-width: 0; }
.cost__name b { font-weight: 600; font-size: 15px; }
.cost__name small { font-size: 12.5px; color: var(--slate-600); }
.cost__bar { height: 10px; border-radius: 99px; background: var(--mist-2); overflow: hidden; }
.cost__bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--slate-400); transform-origin: left; transform: scaleX(var(--w)); }
.cost__v { text-align: right; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.cost__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 2px solid var(--navy); font-weight: 600; }
.cost__total b { font-size: 26px; letter-spacing: -.02em; }

.cost__vs { border-radius: var(--r); padding: 32px; display: grid; gap: 16px; align-content: start; background: radial-gradient(520px 320px at 20% 0%, var(--navy-glow), var(--navy)); color: #fff; }
.cost__vs h3 { font: 800 clamp(24px, 2.4vw, 32px)/1.15 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.cost__sub { color: var(--on-navy-soft); font-size: 17px; }
.cmp { display: grid; gap: 18px; margin: 8px 0 4px; }
.cmp__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "bar bar" "y y"; gap: 6px 12px; }
.cmp__k { grid-area: k; font-weight: 600; color: var(--on-navy); }
.cmp__v { grid-area: v; font-weight: 600; font-size: 20px; }
.cmp__v small { font-size: 12px; color: var(--on-navy-soft); margin-left: 2px; }
.cmp__bar { grid-area: bar; height: 14px; border-radius: 99px; background: rgb(255 255 255 / .1); overflow: hidden; }
.cmp__bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--slate-400); transform-origin: left; transform: scaleX(var(--w)); }
.cmp__row.is-us .cmp__bar i { background: var(--orange); }
.cmp__y { grid-area: y; font-size: 13.5px; color: var(--on-navy-soft); }
.cost__save { font-size: 17px; color: var(--on-navy); }
.cost__save b { color: #fff; }
.more--navy { color: #fff; justify-self: start; }
.cost__note { max-width: 880px; margin: 0 auto 72px; text-align: center; font-size: 13px; line-height: 1.55; color: var(--slate-600); }
/* bars grow in when the block comes into view */
@media (prefers-reduced-motion: no-preference) {
  .js .cost[data-anim] .cost__bar i, .js .cost[data-anim] .cmp__bar i { transform: scaleX(0); transition: transform 900ms var(--sc-ease-out); }
  .js .cost[data-anim].is-in .cost__bar i, .js .cost[data-anim].is-in .cmp__bar i { transform: scaleX(var(--w)); }
}
@media (max-width: 1023px) { .cost { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) {
  .cost__list, .cost__vs { padding: 20px; }
  .cost__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "bar bar"; gap: 6px 12px; }
  .cost__name { grid-area: n; } .cost__v { grid-area: v; } .cost__bar { grid-area: bar; height: 8px; }
  .cost__note { text-align: left; }
}