/* ==========================================================================
   NurseRoster AI — Landing page stylesheet
   Plain CSS, no build step. Load order matters: later layers refine earlier ones.

   1. Base, layout and page sections
      (Header, Hero, What is, Problem, How it works, AI engine, Compliance,
       Product tour, Care settings, Reports, Features, Before/After, Fit,
       Security, Roles, FAQ, Pilot / Contact form, Footer, Responsive styles)
   2. Theme layer
   3. Hero roster mock-up
   4. Polish and transitions
   5. PHP conversion additions (no-JS fallbacks, focus states)
   ========================================================================== */

/* ==========================================================================
   Base, layout and all page sections (original design system)
   ========================================================================== */

:root {
  --bg:oklch(98.6% .004 150);
  --bg2:oklch(96.6% .008 155);
  --card:#fff;
  --ink:oklch(21% .02 165);
  --ink2:oklch(36% .015 165);
  --mut:oklch(52% .012 165);
  --hair:oklch(90.5% .008 160);
  --hair2:oklch(94% .006 160);
  --brand:oklch(47% .1 162);
  --brand-d:oklch(33% .075 165);
  --brand-w:oklch(95.5% .03 160);
  --brand-l:oklch(78% .11 160);
  --amber:oklch(74% .14 70);
  --amber-w:oklch(96% .04 80);
  --red:oklch(58% .19 25);
  --red-w:oklch(96% .025 20);
  --blue:oklch(55% .12 245);
  --violet:oklch(55% .17 295);
  --disp:'Instrument Serif',Georgia,serif;
  --sans:'Geist',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
}

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

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

body {
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a {
  color:var(--brand-d);
  text-decoration:none;
}

a:hover {
  color:var(--brand);
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

button {
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
}

.wrap {
  max-width:1280px;
  margin:0 auto;
  padding:0 40px;
}

@media(max-width:720px) {
  .wrap {
    padding:0 20px;
  }
}

.skip {
  position:absolute;
  left:-999px;
}

.skip:focus {
  left:12px;
  top:12px;
  z-index:999;
  background:#fff;
  padding:8px 12px;
  border-radius:8px;
}

/* type */
.eyebrow {
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--brand-d);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}

.eyebrow::before {
  content:"";
  width:22px;
  height:1px;
  background:currentColor;
}

.h2 {
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(36px,4.6vw,62px);
  line-height:1.02;
  letter-spacing:-.022em;
  text-wrap:balance;
}

.h2 em, .h1 em {
  font-style:italic;
  color:var(--brand);
}

.lede {
  font-size:clamp(16.5px,1.4vw,19px);
  color:var(--ink2);
  max-width:640px;
  text-wrap:pretty;
  margin-top:20px;
}

.shead {
  max-width:820px;
  margin-bottom:64px;
}

.shead.center {
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.shead.center .eyebrow {
  justify-content:center;
}

.shead.center .lede {
  margin-left:auto;
  margin-right:auto;
}

section {
  padding:130px 0;
  position:relative;
}

@media(max-width:720px) {
  section {
    padding:84px 0;
  }
  .shead {
    margin-bottom:44px;
  }
}

.tint {
  background:var(--bg2);
  border-block:1px solid var(--hair);
}

/* buttons */
.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  transition:transform .25s var(--ease),background .2s,box-shadow .25s;
  white-space:nowrap;
}

.btn:hover {
  transform:translateY(-2px);
}

.btn-p {
  background:var(--ink);
  color:#fff;
}

.btn-p:hover {
  color:#fff;
  background:var(--brand-d);
  box-shadow:0 12px 30px -12px var(--brand);
}

.btn-g {
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--hair);
}

.btn-g:hover {
  color:var(--ink);
  border-color:var(--ink2);
}

.btn-b {
  background:var(--brand);
  color:#fff;
}

.btn-b:hover {
  color:#fff;
  background:var(--brand-d);
}

.btn .ar {
  transition:transform .25s var(--ease);
}

.btn:hover .ar {
  transform:translateX(4px);
}

/* nav */
.nav {
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}

.nav.s {
  background:color-mix(in oklch,var(--bg) 80%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-color:var(--hair);
}

.nav .wrap {
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:16px;
  color:var(--ink);
  letter-spacing:-.01em;
}

.logo:hover {
  color:var(--ink);
}

.logo i {
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--brand);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  padding:6px;
}

.logo i b {
  background:#fff;
  border-radius:1px;
  opacity:.95;
}

.logo i b:nth-child(2), .logo i b:nth-child(4) {
  opacity:.4;
}

.logo em {
  font-family:var(--disp);
  font-weight:400;
  font-size:19px;
  color:var(--brand);
}

.nav ul {
  display:flex;
  gap:30px;
  list-style:none;
  font-size:14px;
}

.nav ul a {
  color:var(--ink2);
}

.nav ul a:hover {
  color:var(--ink);
}

.nav .btn {
  padding:10px 18px;
  font-size:14px;
}

@media(max-width:1020px) {
  .nav ul {
    display:none;
  }
}

.prog {
  position:absolute;
  left:0;
  bottom:-1px;
  height:2px;
  background:var(--brand);
  width:0;
  transition:width .1s linear;
}

/* hero */
.hero {
  padding:150px 0 40px;
  overflow:hidden;
}

.hero-top {
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
}

.pill {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 14px 6px 6px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--hair);
  font-size:13px;
  color:var(--ink2);
  box-shadow:0 4px 14px -8px rgba(20,60,45,.2);
}

.pill b {
  font-family:var(--mono);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.06em;
  background:var(--brand-w);
  color:var(--brand-d);
  padding:4px 9px;
  border-radius:999px;
}

.h1 {
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(50px,7.6vw,112px);
  line-height:.94;
  letter-spacing:-.032em;
  margin:28px 0 26px;
  max-width:1100px;
  text-wrap:balance;
}

.h1 .w {
  display:inline-block;
  opacity:0;
  transform:translateY(.4em);
  filter:blur(8px);
  animation:wIn 1s var(--ease) forwards;
}

@keyframes wIn {
  to {
    opacity:1;
    transform:none;
    filter:none;
  }
}

.hero-sub {
  font-size:clamp(17px,1.5vw,20px);
  color:var(--ink2);
  max-width:700px;
  text-wrap:pretty;
}

.hero-cta {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin:36px 0 18px;
}

.hero-cta .btn {
  padding:16px 26px;
  font-size:15.5px;
}

.hero-note {
  font-size:13px;
  color:var(--mut);
}

.fade-up {
  opacity:0;
  transform:translateY(18px);
  animation:fu 1s var(--ease) forwards;
}

@keyframes fu {
  to {
    opacity:1;
    transform:none;
  }
}

.stage {
  position:relative;
  margin:70px auto 0;
  max-width:1180px;
  perspective:1800px;
}

.browser {
  position:relative;
  border-radius:18px;
  background:var(--card);
  border:1px solid var(--hair);
  box-shadow:0 1px 0 #fff inset,0 60px 120px -50px rgba(15,60,40,.35),0 20px 40px -24px rgba(15,60,40,.18);
  overflow:hidden;
  transform:rotateX(14deg) scale(.96);
  transform-origin:50% 0;
  opacity:0;
  animation:bIn 1.6s .5s var(--ease) forwards;
}

@keyframes bIn {
  to {
    transform:none;
    opacity:1;
  }
}

.bar {
  height:40px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 16px;
  border-bottom:1px solid var(--hair2);
  background:oklch(98.5% .003 160);
}

.bar i {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--hair);
}

.bar span {
  margin:0 auto;
  font-family:var(--mono);
  font-size:11px;
  color:var(--mut);
  background:var(--bg2);
  padding:4px 14px;
  border-radius:6px;
}

.browser .shot {
  position:relative;
  aspect-ratio:2218/1240;
  overflow:hidden;
}

.browser .shot img {
  width:100%;
}

.scan {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in oklch,var(--brand-l) 35%,transparent),transparent);
  width:18%;
  left:-20%;
  animation:scan 3.4s 2.4s var(--ease) infinite;
}

@keyframes scan {
  0% {
    left:-20%;
  }
  55%, 100% {
    left:110%;
  }
}

.float {
  position:absolute;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:16px;
  box-shadow:0 30px 60px -28px rgba(15,60,40,.35);
  padding:14px 16px;
  font-size:13px;
  opacity:0;
  animation:fl 1s var(--ease) forwards;
}

@keyframes fl {
  from {
    opacity:0;
    transform:translateY(20px) scale(.96);
  }
  to {
    opacity:1;
    transform:none;
  }
}

.float .k {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mut);
}

.f-ai {
  left:-34px;
  top:22%;
  width:270px;
  animation-delay:1.6s;
}

.f-ai .row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

.f-ai .sp {
  width:30px;
  height:30px;
  border-radius:9px;
  background:var(--brand);
  display:grid;
  place-items:center;
  color:#fff;
  flex-shrink:0;
}

.f-ai .sp svg {
  width:16px;
  height:16px;
  animation:spin 2.4s linear infinite;
}

@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}

.f-ai b {
  display:block;
  font-weight:500;
  font-size:13.5px;
}

.f-ai small {
  color:var(--mut);
  font-size:11.5px;
}

.meter {
  height:5px;
  border-radius:3px;
  background:var(--hair2);
  margin-top:12px;
  overflow:hidden;
}

.meter i {
  display:block;
  height:100%;
  background:var(--brand);
  width:0;
  border-radius:3px;
}

.f-gate {
  right:-30px;
  top:12%;
  width:250px;
  animation-delay:2s;
}

.gl {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:10px;
}

.gl div {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--ink2);
  opacity:.35;
  transition:opacity .4s;
}

.gl div.on {
  opacity:1;
}

.gl div::before {
  content:"✓";
  width:17px;
  height:17px;
  border-radius:50%;
  background:var(--brand-w);
  color:var(--brand-d);
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:700;
}

.f-alert {
  right:6%;
  bottom:-28px;
  width:300px;
  animation-delay:2.4s;
  display:flex;
  gap:12px;
  align-items:center;
}

.f-alert .ic {
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--red-w);
  color:var(--red);
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-weight:700;
}

.f-alert b {
  font-weight:500;
  display:block;
}

.f-alert small {
  color:var(--mut);
  font-size:11.5px;
}

@media(max-width:1100px) {
  .f-ai {
    left:10px;
    top:auto;
    bottom:-40px;
  }
  .f-gate {
    right:10px;
    top:-30px;
  }
  .f-alert {
    display:none;
  }
}

@media(max-width:640px) {
  .float {
    transform:scale(.85);
  }
  .f-gate {
    display:none;
  }
  .f-ai {
    left:50%;
    margin-left:-135px;
    bottom:-60px;
  }
}

.trust {
  margin-top:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.trust p {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--mut);
}

.marq {
  width:100%;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

.marq-in {
  display:flex;
  gap:14px;
  width:max-content;
  animation:mq 40s linear infinite;
}

.marq:hover .marq-in {
  animation-play-state:paused;
}

@keyframes mq {
  to {
    transform:translateX(-50%);
  }
}

.chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--hair);
  background:var(--card);
  font-size:13.5px;
  color:var(--ink2);
  white-space:nowrap;
}

.chip::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--brand);
}

/* definition */
.def {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:start;
}

@media(max-width:960px) {
  .def {
    grid-template-columns:1fr;
    gap:44px;
  }
}

.def p.big {
  font-family:var(--disp);
  font-size:clamp(26px,2.6vw,36px);
  line-height:1.22;
  letter-spacing:-.012em;
  color:var(--ink);
  text-wrap:pretty;
}

.def p.big em {
  color:var(--brand);
  font-style:italic;
}

.facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--hair);
  border-radius:22px;
  overflow:hidden;
  background:var(--hair);
}

.facts>div {
  background:var(--card);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.facts dt {
  font-family:var(--disp);
  font-size:46px;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
}

.facts dt small {
  font-family:var(--sans);
  font-size:15px;
  color:var(--mut);
  margin-left:4px;
}

.facts dd {
  font-size:13.5px;
  color:var(--ink2);
  line-height:1.45;
}

.facts>div {
  gap:10px;
}

/* problem */
.prob {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

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

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

.pc {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:20px;
  padding:28px 26px 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}

.pc:hover {
  transform:translateY(-4px);
  box-shadow:0 30px 50px -34px rgba(15,60,40,.35);
  border-color:color-mix(in oklch,var(--red) 25%,var(--hair));
}

.pc .n {
  font-family:var(--mono);
  font-size:11px;
  color:var(--red);
  letter-spacing:.06em;
}

.pc h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:25px;
  line-height:1.08;
  letter-spacing:-.01em;
}

.pc p {
  font-size:14px;
  color:var(--ink2);
}

.honest {
  margin-top:40px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px;
  align-items:center;
  padding:30px 34px;
  border-radius:22px;
  background:var(--ink);
  color:#fff;
}

.honest b {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand-l);
  font-weight:500;
}

.honest p {
  font-family:var(--disp);
  font-size:clamp(20px,2vw,26px);
  line-height:1.3;
  text-wrap:pretty;
}

@media(max-width:700px) {
  .honest {
    grid-template-columns:1fr;
    gap:12px;
  }
}

/* pipeline sticky */
.pipe {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:start;
}

.steps {
  display:flex;
  flex-direction:column;
}

.st {
  padding:34px 0 34px 34px;
  border-left:1px solid var(--hair);
  position:relative;
  opacity:.38;
  transition:opacity .5s var(--ease);
}

.st::before {
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  bottom:0;
  width:2px;
  background:var(--brand);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .6s var(--ease);
}

.st.on {
  opacity:1;
}

.st.on::before {
  transform:scaleY(1);
}

.st .n {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--brand-d);
}

.st h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:30px;
  line-height:1.08;
  margin:8px 0 10px;
  letter-spacing:-.012em;
}

.st p {
  font-size:15px;
  color:var(--ink2);
  max-width:460px;
}

.st .where {
  margin-top:12px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--mut);
}

.st .mshot {
  display:none;
}

.pview {
  position:sticky;
  top:110px;
  height:min(640px,calc(100vh - 150px));
  border-radius:24px;
  background:linear-gradient(160deg,var(--brand-w),var(--bg2));
  border:1px solid var(--hair);
  overflow:hidden;
}

.pv {
  position:absolute;
  inset:24px 24px 64px;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(24px) scale(.98);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
  pointer-events:none;
}

.pv.on {
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.pv .scr {
  flex:1;
  min-height:0;
}

.pv .cap {
  position:absolute;
  left:0;
  right:0;
  bottom:-44px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--brand-d);
}

.pv .cap em {
  font-style:normal;
  color:var(--mut);
}

@media(max-width:960px) {
  .pipe {
    grid-template-columns:1fr;
  }
  .pview {
    display:none;
  }
  .st {
    opacity:1;
  }
  .st::before {
    transform:scaleY(1);
  }
  .st .mshot {
    display:block;
    margin-top:20px;
    max-height:380px;
  }
}

.formula {
  font-family:var(--mono);
  font-size:13px;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:12px;
  padding:12px 14px;
  margin-top:14px;
  color:var(--ink);
  display:inline-block;
}

.formula b {
  color:var(--brand-d);
  font-weight:500;
}

/* AI engine dark band */
.engine {
  background:oklch(19% .025 165);
  color:#fff;
  border-radius:36px;
  margin:0 20px;
  overflow:hidden;
  position:relative;
}

.engine::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(60% 50% at 80% 0%,color-mix(in oklch,var(--brand) 45%,transparent),transparent 70%),radial-gradient(40% 40% at 0% 100%,color-mix(in oklch,var(--brand) 25%,transparent),transparent 70%);
  opacity:.7;
  pointer-events:none;
}

.engine .wrap {
  position:relative;
}

.engine .eyebrow {
  color:var(--brand-l);
}

.engine .h2 em {
  color:var(--brand-l);
}

.engine .lede {
  color:oklch(82% .02 160);
}

.flow {
  display:grid;
  grid-template-columns:1fr 60px 1.2fr 60px 1.2fr 60px 1fr;
  align-items:stretch;
}

.fn {
  border:1px solid oklch(100% 0 0/.13);
  background:oklch(100% 0 0/.04);
  border-radius:20px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  backdrop-filter:blur(4px);
}

.fn .k {
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand-l);
}

.fn h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:24px;
  line-height:1.1;
}

.fn p {
  font-size:13.5px;
  color:oklch(80% .02 160);
}

.fn.hl {
  background:oklch(100% 0 0/.08);
  border-color:color-mix(in oklch,var(--brand-l) 50%,transparent);
}

.fa {
  position:relative;
  display:flex;
  align-items:center;
}

.fa::before {
  content:"";
  height:1px;
  width:100%;
  background:oklch(100% 0 0/.18);
}

.fa i {
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brand-l);
  box-shadow:0 0 12px var(--brand-l);
  animation:dot 2.2s linear infinite;
}

@keyframes dot {
  from {
    left:0;
    opacity:0;
  }
  15% {
    opacity:1;
  }
  85% {
    opacity:1;
  }
  to {
    left:calc(100% - 8px);
    opacity:0;
  }
}

@media(max-width:1080px) {
  .flow {
    grid-template-columns:1fr;
    gap:0;
  }
  .fa {
    height:40px;
    justify-content:center;
  }
  .fa::before {
    width:1px;
    height:100%;
  }
  .fa i {
    animation:dotv 2.2s linear infinite;
    left:auto;
  }
  @keyframes dotv {
    from {
      top:0;
      opacity:0;
    }
    15% {
      opacity:1;
    }
    85% {
      opacity:1;
    }
    to {
      top:calc(100% - 8px);
      opacity:0;
    }
  }
}

.gchips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}

.gchips span {
  font-size:11.5px;
  padding:5px 9px;
  border-radius:999px;
  background:oklch(100% 0 0/.07);
  border:1px solid oklch(100% 0 0/.12);
  color:oklch(88% .02 160);
}

.gchips span.ok {
  background:color-mix(in oklch,var(--brand) 40%,transparent);
  border-color:transparent;
  color:#fff;
}

.weights {
  margin-top:56px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  align-items:center;
}

@media(max-width:960px) {
  .weights {
    grid-template-columns:1fr;
    gap:30px;
  }
}

.weights h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:32px;
  line-height:1.1;
}

.weights p {
  color:oklch(80% .02 160);
  margin-top:12px;
  font-size:15px;
}

.wbars {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.wb {
  display:grid;
  grid-template-columns:120px 1fr 44px;
  align-items:center;
  gap:14px;
  font-size:14px;
}

.wb .t {
  height:10px;
  border-radius:5px;
  background:oklch(100% 0 0/.08);
  overflow:hidden;
}

.wb .t i {
  display:block;
  height:100%;
  border-radius:5px;
  background:linear-gradient(90deg,var(--brand),var(--brand-l));
  width:0;
  transition:width 1.4s var(--ease);
}

.wb b {
  font-family:var(--mono);
  font-weight:500;
  text-align:right;
  color:var(--brand-l);
}

.diag {
  margin-top:56px;
  padding:26px 30px;
  border-radius:20px;
  border:1px dashed oklch(100% 0 0/.2);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:center;
}

.diag .k {
  font-family:var(--mono);
  font-size:11px;
  color:var(--amber);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.diag p {
  font-family:var(--disp);
  font-size:clamp(19px,1.8vw,24px);
  line-height:1.35;
}

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

/* gates */
.gates {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
  border-radius:24px;
  overflow:hidden;
}

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

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

.gate {
  background:var(--card);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:background .3s;
}

.gate:hover {
  background:var(--brand-w);
}

.gate .i {
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--brand-w);
  color:var(--brand-d);
  display:grid;
  place-items:center;
  margin-bottom:6px;
}

.gate .i svg {
  width:17px;
  height:17px;
}

.gate h3 {
  font-size:16px;
  font-weight:600;
  letter-spacing:-.005em;
}

.gate p {
  font-size:13.5px;
  color:var(--ink2);
}

.law {
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

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

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

.lc {
  border-radius:20px;
  padding:24px;
  background:var(--card);
  border:1px solid var(--hair);
}

.lc .k {
  font-family:var(--mono);
  font-size:11px;
  color:var(--brand-d);
  background:var(--brand-w);
  padding:4px 9px;
  border-radius:6px;
  display:inline-block;
}

.lc h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:22px;
  margin:14px 0 6px;
  line-height:1.1;
}

.lc p {
  font-size:13.5px;
  color:var(--ink2);
}

/* product tour */
.tour-tabs {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:34px;
}

.tt {
  position:relative;
  padding:11px 18px;
  border-radius:999px;
  font-size:14px;
  color:var(--ink2);
  background:var(--card);
  border:1px solid var(--hair);
  overflow:hidden;
  transition:color .2s,border-color .2s;
}

.tt:hover {
  color:var(--ink);
}

.tt.on {
  color:#fff;
  background:var(--ink);
  border-color:var(--ink);
}

.tt .pb {
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  background:var(--brand-l);
  width:0;
}

.tour-stage {
  display:grid;
  grid-template-columns:330px 1fr;
  gap:44px;
  align-items:center;
}

@media(max-width:960px) {
  .tour-stage {
    grid-template-columns:1fr;
    gap:24px;
  }
  .tour-tabs {
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    margin:0 -20px 24px;
    padding:0 20px;
  }
  .tt {
    flex-shrink:0;
  }
}

.tour-txt h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:34px;
  line-height:1.06;
  letter-spacing:-.015em;
}

.tour-txt p {
  color:var(--ink2);
  margin-top:14px;
  font-size:15.5px;
}

.tour-txt ul {
  list-style:none;
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tour-txt li {
  font-size:14px;
  color:var(--ink2);
  display:flex;
  gap:10px;
}

.tour-txt li::before {
  content:"";
  flex-shrink:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--brand);
  margin-top:8px;
}

.tour-img {
  position:relative;
  border-radius:24px;
  background:linear-gradient(150deg,var(--brand-w),var(--bg2) 70%);
  border:1px solid var(--hair);
  padding:clamp(12px,2.2vw,28px);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.tour-img .scr {
  height:clamp(360px,46vw,560px);
}

.tour-img .hint {
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:11px;
  color:var(--mut);
}

.tour-img .hint b {
  color:var(--brand-d);
  font-weight:500;
}

.tour-img .scr {
  animation:tIn .8s var(--ease);
}

@keyframes tIn {
  from {
    opacity:0;
    transform:translateY(16px) scale(.985);
  }
  to {
    opacity:1;
    transform:none;
  }
}

.tour-txt>* {
  animation:tIn .7s var(--ease) both;
}

/* care settings */
.care {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

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

.cs {
  border-radius:24px;
  background:var(--card);
  border:1px solid var(--hair);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  overflow:hidden;
}

.cs .big {
  font-family:var(--disp);
  font-size:64px;
  line-height:.9;
  color:var(--brand-w);
  position:absolute;
  right:20px;
  top:14px;
  font-style:italic;
}

.cs .k {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-d);
}

.cs h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:30px;
  line-height:1.05;
}

.cs p {
  font-size:14.5px;
  color:var(--ink2);
}

.cs .drv {
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--hair2);
  font-size:13px;
  color:var(--mut);
}

.cs .drv b {
  color:var(--ink);
  font-weight:500;
}

/* reports */
.rgrid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
}

.rc {
  grid-column:span 4;
  border-radius:22px;
  background:var(--card);
  border:1px solid var(--hair);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-align:left;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}

.rc.w {
  grid-column:span 6;
}

.rc:hover {
  transform:translateY(-5px);
  box-shadow:0 40px 70px -40px rgba(15,60,40,.45);
}

.rc .im {
  aspect-ratio:16/11;
  overflow:hidden;
  background:var(--bg2);
  border-bottom:1px solid var(--hair2);
  position:relative;
}

.rc .im img {
  width:100%;
  height:auto;
  transform-origin:top center;
  transition:transform 1.2s var(--ease);
}

.rc:hover .im img {
  transform:translateY(-8%);
}

.rc .im::after {
  content:"View report ↗";
  position:absolute;
  right:12px;
  bottom:12px;
  font-size:12px;
  background:var(--ink);
  color:#fff;
  padding:6px 11px;
  border-radius:999px;
  opacity:0;
  transform:translateY(6px);
  transition:all .3s var(--ease);
}

.rc:hover .im::after {
  opacity:1;
  transform:none;
}

.rc .tx {
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rc .cat {
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-d);
}

.rc h3 {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
}

.rc p {
  font-size:13.5px;
  color:var(--ink2);
}

@media(max-width:1000px) {
  .rc, .rc.w {
    grid-column:span 6;
  }
}

@media(max-width:620px) {
  .rc, .rc.w {
    grid-column:span 12;
  }
}

.more {
  margin-top:40px;
  padding:30px;
  border-radius:22px;
  border:1px solid var(--hair);
  background:var(--card);
}

.more h3 {
  font-size:15px;
  font-weight:600;
  margin-bottom:16px;
}

.more .cl {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.more .cl span {
  font-size:13px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--bg2);
  color:var(--ink2);
}

.lb {
  position:fixed;
  inset:0;
  z-index:300;
  background:oklch(18% .02 165/.75);
  backdrop-filter:blur(10px);
  display:none;
  overflow:auto;
  padding:40px 20px;
}

.lb.on {
  display:block;
  animation:fu .3s ease forwards;
}

.lb-in {
  max-width:900px;
  margin:0 auto;
  position:relative;
}

.lb img {
  width:100%;
  border-radius:16px;
  box-shadow:0 40px 80px -30px #000;
}

.lb-x {
  position:fixed;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  font-size:20px;
  z-index:2;
}

/* inventory */
.inv {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:50px;
  align-items:start;
}

@media(max-width:900px) {
  .inv {
    grid-template-columns:1fr;
    gap:20px;
  }
}

.inv-nav {
  position:sticky;
  top:100px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

@media(max-width:900px) {
  .inv-nav {
    position:static;
    flex-direction:row;
    overflow-x:auto;
    scrollbar-width:none;
    margin:0 -20px;
    padding:0 20px;
  }
}

.inv-nav button {
  text-align:left;
  padding:11px 14px;
  border-radius:10px;
  font-size:14px;
  color:var(--ink2);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-shrink:0;
  transition:background .2s,color .2s;
}

.inv-nav button:hover {
  background:var(--bg2);
}

.inv-nav button.on {
  background:var(--ink);
  color:#fff;
}

.inv-nav button small {
  font-family:var(--mono);
  font-size:11px;
  opacity:.6;
}

.inv-panel {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:24px;
  padding:clamp(24px,3.5vw,44px);
  min-height:460px;
}

.inv-panel h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:34px;
  line-height:1.05;
}

.inv-panel>p {
  color:var(--ink2);
  margin-top:10px;
  max-width:640px;
}

.fl {
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--hair2);
  border:1px solid var(--hair2);
  border-radius:16px;
  overflow:hidden;
}

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

.fl div {
  background:#fff;
  padding:18px 20px;
  animation:tIn .5s var(--ease) both;
}

.fl b {
  display:block;
  font-size:14.5px;
  font-weight:600;
  margin-bottom:4px;
  letter-spacing:-.005em;
}

.fl span {
  font-size:13.5px;
  color:var(--ink2);
}

/* before after */
.ba {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

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

.bac {
  border-radius:24px;
  padding:clamp(24px,3vw,38px);
  border:1px solid var(--hair);
  background:var(--card);
}

.bac.b4 {
  background:var(--bg2);
}

.bac .tag {
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.05em;
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:18px;
}

.b4 .tag {
  background:var(--red-w);
  color:var(--red);
}

.af .tag {
  background:var(--brand-w);
  color:var(--brand-d);
}

.bac h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:30px;
  line-height:1.05;
  margin-bottom:22px;
}

.bac ul {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.bac li {
  display:grid;
  grid-template-columns:22px 1fr;
  gap:12px;
  font-size:14.5px;
  color:var(--ink2);
}

.bac li::before {
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:700;
}

.b4 li::before {
  content:"✕";
  background:var(--red-w);
  color:var(--red);
}

.af li::before {
  content:"✓";
  background:var(--brand-w);
  color:var(--brand-d);
}

/* fits */
.fits {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

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

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

.fit {
  padding:26px;
  border-radius:20px;
  border:1px solid var(--hair);
  background:var(--card);
}

.fit .n {
  font-family:var(--disp);
  font-size:40px;
  color:var(--brand);
  line-height:1;
  font-style:italic;
}

.fit h3 {
  font-size:16px;
  font-weight:600;
  margin:14px 0 6px;
}

.fit p {
  font-size:13.5px;
  color:var(--ink2);
}

/* security */
.sec {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

@media(max-width:960px) {
  .sec {
    grid-template-columns:1fr;
    gap:40px;
  }
}

.slist {
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--hair);
}

.slist div {
  display:grid;
  grid-template-columns:200px 1fr;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--hair);
  font-size:14.5px;
}

.slist b {
  font-weight:600;
}

.slist span {
  color:var(--ink2);
}

@media(max-width:560px) {
  .slist div {
    grid-template-columns:1fr;
    gap:4px;
  }
}

.chain {
  display:flex;
  flex-direction:column;
  gap:10px;
  font-family:var(--mono);
  font-size:11.5px;
}

.blk {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:12px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 14px;
  position:relative;
}

.blk::after {
  content:"";
  position:absolute;
  left:28px;
  bottom:-11px;
  width:1px;
  height:10px;
  background:var(--brand);
}

.blk:last-child::after {
  display:none;
}

.blk i {
  grid-row:span 2;
  width:26px;
  height:26px;
  border-radius:7px;
  background:var(--brand-w);
  color:var(--brand-d);
  display:grid;
  place-items:center;
  font-style:normal;
}

.blk b {
  color:var(--ink);
  font-weight:500;
}

.blk span {
  color:var(--mut);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* roles */
.roles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

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

.rl {
  border-radius:24px;
  padding:32px;
  background:var(--card);
  border:1px solid var(--hair);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.rl.main {
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}

.rl .k {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-d);
}

.rl.main .k {
  color:var(--brand-l);
}

.rl h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:28px;
  line-height:1.08;
}

.rl ul {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}

.rl li {
  font-size:14px;
  color:var(--ink2);
  display:flex;
  gap:10px;
}

.rl.main li {
  color:oklch(84% .02 160);
}

.rl li::before {
  content:"✓";
  color:var(--brand);
  font-weight:700;
  flex-shrink:0;
}

.rl.main li::before {
  color:var(--brand-l);
}

/* faq */
.faq {
  max-width:900px;
  margin:0 auto;
  border-top:1px solid var(--hair);
}

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

.faq summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:26px 4px;
  font-family:var(--disp);
  font-size:clamp(19px,1.8vw,23px);
  letter-spacing:-.01em;
  transition:color .2s;
}

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

.faq summary:hover {
  color:var(--brand-d);
}

.faq summary i {
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--hair);
  position:relative;
  transition:all .3s var(--ease);
}

.faq summary i::before, .faq summary i::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:1.5px;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease);
}

.faq summary i::after {
  transform:translate(-50%,-50%) rotate(90deg);
}

.faq details[open] summary i {
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}

.faq details[open] summary i::after {
  transform:translate(-50%,-50%) rotate(0);
}

.faq .a {
  padding:0 4px 26px;
  color:var(--ink2);
  max-width:760px;
  font-size:15.5px;
}

/* cta */
.cta {
  border-radius:36px;
  background:var(--ink);
  color:#fff;
  padding:clamp(32px,6vw,80px);
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(32px,5vw,70px);
  position:relative;
  overflow:hidden;
}

.cta::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(50% 60% at 100% 0%,color-mix(in oklch,var(--brand) 55%,transparent),transparent 70%);
  pointer-events:none;
}

.cta>* {
  position:relative;
}

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

.badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  padding:7px 13px;
  border-radius:999px;
  background:var(--brand-l);
  color:var(--brand-d);
  font-weight:500;
}

.cta h2 {
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(38px,4.6vw,60px);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:22px 0 18px;
}

.cta h2 em {
  color:var(--brand-l);
}

.cta>div>p {
  color:oklch(82% .02 160);
  font-size:16.5px;
  max-width:480px;
}

.perks {
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.perks div {
  display:grid;
  grid-template-columns:24px 1fr;
  gap:12px;
  font-size:14.5px;
  color:oklch(84% .02 160);
}

.perks div::before {
  content:"✓";
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
}

.perks b {
  color:#fff;
  font-weight:500;
}

.form {
  background:oklch(100% 0 0/.05);
  border:1px solid oklch(100% 0 0/.13);
  border-radius:24px;
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.fg {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

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

.fd {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.fd label {
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:oklch(75% .02 160);
}

.fd input, .fd select {
  background:transparent;
  border:0;
  border-bottom:1px solid oklch(100% 0 0/.22);
  color:#fff;
  padding:10px 2px;
  font:inherit;
  font-size:16px;
  outline:none;
  transition:border-color .2s;
  border-radius:0;
}

.fd input:focus, .fd select:focus {
  border-color:var(--brand-l);
}

.fd input::placeholder {
  color:oklch(100% 0 0/.35);
}

.fd select option {
  color:var(--ink);
}

.form .btn {
  justify-content:center;
  margin-top:8px;
  padding:16px;
}

.form small {
  text-align:center;
  color:oklch(70% .02 160);
  font-size:12px;
}

/* footer */
footer {
  padding:80px 0 40px;
}

.fgrid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid var(--hair);
}

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

.fgrid p {
  font-size:13.5px;
  color:var(--mut);
  margin-top:14px;
  max-width:300px;
}

.fgrid .fh {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink2);
  margin-bottom:14px;
  font-weight:500;
}

.fgrid ul {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.fgrid li a, .fgrid address {
  font-size:14px;
  color:var(--ink2);
  font-style:normal;
}

.fbot {
  padding-top:28px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:12.5px;
  color:var(--mut);
}

/* reveal */
.rv {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}

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

@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .rv, .h1 .w, .fade-up, .browser, .float {
    opacity:1;
    transform:none;
    filter:none;
  }
}

.scr {
  position:relative;
  overflow:auto;
  scrollbar-width:none;
  background:#fff;
  border-radius:14px;
  border:1px solid var(--hair);
  box-shadow:0 30px 60px -34px rgba(15,60,40,.45);
  cursor:grab;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}

.scr::-webkit-scrollbar {
  display:none;
}

.scr.drag {
  cursor:grabbing;
  user-select:none;
}

.scr img {
  max-width:none;
  display:block;
  -webkit-user-drag:none;
  user-select:none;
  image-rendering:auto;
}

.scr.fit img {
  width:100%;
}

.nav-r {
  display:flex;
  align-items:center;
  gap:8px;
}

.mbtn {
  display:none;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--hair);
  background:var(--card);
  position:relative;
}

.mbtn i {
  position:absolute;
  left:14px;
  right:14px;
  height:1.5px;
  background:var(--ink);
  transition:transform .3s var(--ease);
}

.mbtn i:first-child {
  top:18px;
}

.mbtn i:last-child {
  top:25px;
}

.mbtn[aria-expanded="true"] i:first-child {
  transform:translateY(3.5px) rotate(45deg);
}

.mbtn[aria-expanded="true"] i:last-child {
  transform:translateY(-3.5px) rotate(-45deg);
}

.mmenu {
  display:none;
}

@media(max-width:1020px) {
  .mbtn {
    display:block;
  }
  .mmenu {
    display:grid;
    position:absolute;
    top:70px;
    left:12px;
    right:12px;
    background:var(--card);
    border:1px solid var(--hair);
    border-radius:20px;
    padding:10px;
    box-shadow:0 30px 60px -30px rgba(15,60,40,.4);
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:all .3s var(--ease);
  }
  .mmenu.on {
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .mmenu a {
    padding:14px 16px;
    border-radius:12px;
    color:var(--ink);
    font-size:16px;
  }
  .mmenu a:hover {
    background:var(--bg2);
  }
}

@media(max-width:520px) {
  .nav .btn {
    display:none;
  }
}

.rx {
  display:grid;
  grid-template-columns:340px 1fr;
  gap:28px;
  align-items:start;
}

.rx-list {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rx-i {
  text-align:left;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid transparent;
  display:grid;
  gap:3px;
  transition:background .25s,border-color .25s,transform .25s var(--ease);
}

.rx-i:hover {
  background:var(--card);
  border-color:var(--hair);
}

.rx-i.on {
  background:var(--card);
  border-color:color-mix(in oklch,var(--brand) 40%,var(--hair));
  box-shadow:0 18px 40px -30px rgba(15,60,40,.45);
}

.rx-i .cat {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--brand-d);
}

.rx-i b {
  font-size:15px;
  font-weight:600;
  letter-spacing:-.005em;
}

.rx-i .q {
  font-size:13px;
  color:var(--mut);
  line-height:1.4;
  display:none;
}

.rx-i.on .q {
  display:block;
}

.rx-view {
  position:sticky;
  top:96px;
  background:linear-gradient(150deg,var(--brand-w),var(--card) 70%);
  border:1px solid var(--hair);
  border-radius:24px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.rx-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-d);
}

.rx-full {
  font-family:var(--sans);
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
}

.rx-full:hover {
  background:var(--brand-d);
}

#rxScr {
  height:min(680px,calc(100vh - 220px));
  min-height:420px;
}

#rxScr img {
  animation:tIn .6s var(--ease);
}

.rx-hint {
  font-family:var(--mono);
  font-size:11px;
  color:var(--mut);
  text-align:right;
}

@media(max-width:1000px) {
  .rx {
    grid-template-columns:1fr;
  }
  .rx-list {
    flex-direction:row;
    overflow-x:auto;
    scrollbar-width:none;
    margin:0 -20px;
    padding:0 20px 4px;
    scroll-snap-type:x mandatory;
  }
  .rx-list::-webkit-scrollbar {
    display:none;
  }
  .rx-i {
    flex:0 0 240px;
    scroll-snap-align:start;
    background:var(--card);
    border-color:var(--hair);
  }
  .rx-i .q {
    display:block;
  }
  .rx-view {
    position:static;
  }
  #rxScr {
    height:520px;
    min-height:0;
  }
}

.rmore {
  margin-top:28px;
}

.rmore-in {
  border-radius:24px;
  padding:clamp(26px,3.5vw,40px);
  background:var(--ink);
  color:#fff;
}

.rmore-in>div {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.rmore-in .chip::before {
  background:var(--brand-l);
}

.rmore-in h3 {
  max-width:640px;
}

@media(max-width:1080px) and (min-width:761px) {
  .rl, .cs {
    padding:24px;
  }
  .rl h3, .cs h3 {
    font-size:23px;
  }
  .cs .big {
    font-size:44px;
  }
}

.mcta {
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px 10px 18px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.45);
  transform:translateY(140%);
  transition:transform .45s var(--ease);
}

.mcta.on {
  transform:none;
}

.mcta span {
  font-size:13.5px;
  line-height:1.3;
}

.mcta span b {
  display:block;
  font-weight:600;
}

.mcta .btn {
  padding:11px 18px;
  font-size:14px;
}

@media(max-width:760px) {
  .mcta {
    display:flex;
  }
}

.fd input:user-invalid, .fd select:user-invalid {
  border-color:var(--red);
}

.fd .err {
  font-size:12px;
  color:oklch(75% .14 25);
  min-height:0;
}

.done {
  display:none;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:10px 0;
}

.form.sent>* {
  display:none;
}

.form.sent .done {
  display:flex;
}

.done .ok {
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--brand);
  display:grid;
  place-items:center;
  font-size:24px;
  color:#fff;
}

.done h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:32px;
  line-height:1.1;
}

.done p {
  color:oklch(82% .02 160);
  font-size:15px;
}

.stage {
  max-width:1060px;
  margin-top:64px;
}

.browser {
  border-radius:20px;
}

.browser .shot {
  height:clamp(320px,52vh,540px);
  overflow:hidden;
  position:relative;
}

.browser .shot img {
  width:1109px;
  max-width:none;
}

.browser .shot::after {
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  background:linear-gradient(transparent,#fff 92%);
  pointer-events:none;
}

.stage::before {
  content:"";
  position:absolute;
  inset:8% -6% -10%;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in oklch,var(--brand-l) 30%,transparent),transparent 70%);
  filter:blur(30px);
  z-index:-1;
}

.float {
  padding:12px 14px;
  border-radius:14px;
  font-size:12px;
  box-shadow:0 24px 50px -24px rgba(15,60,40,.4);
}

.f-ai {
  left:-72px;
  top:auto;
  bottom:16%;
  width:236px;
}

.f-ai b {
  font-size:12.5px;
}

.f-ai small {
  font-size:11px;
}

.f-gate {
  right:-72px;
  top:18%;
  width:212px;
}

.gl div {
  font-size:11.5px;
}

.f-alert {
  display:none;
}

@media(max-width:1240px) {
  .f-ai {
    left:-16px;
  }
  .f-gate {
    right:-16px;
  }
}

@media(max-width:1100px) {
  .f-ai {
    left:16px;
    bottom:16px;
    top:auto;
    margin:0;
  }
  .f-gate {
    right:16px;
    top:auto;
    bottom:16px;
  }
}

@media(max-width:760px) {
  .f-gate {
    display:none;
  }
  .f-ai {
    left:50%;
    margin-left:-118px;
    transform:none;
  }
  .browser .shot {
    height:360px;
  }
  .browser .shot img {
    width:900px;
  }
}

@media(max-width:1100px) {
  .stage {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-items:start;
  }
  .browser {
    grid-column:1/-1;
  }
  .float {
    position:relative;
    inset:auto!important;
    width:auto!important;
    margin:-56px 18px 0!important;
    z-index:2;
  }
  .f-gate {
    margin-left:0!important;
  }
  .f-ai {
    margin-right:0!important;
  }
}

@media(max-width:760px) {
  .stage {
    grid-template-columns:1fr;
  }
  .f-ai {
    margin:-48px 14px 0!important;
  }
}

/* what-is visual */
#what {
  background:radial-gradient(60% 50% at 50% 55%,var(--brand-w),transparent 70%);
}

.wi {
  display:grid;
  grid-template-columns:minmax(0,1fr) 90px minmax(0,1.15fr) 90px minmax(0,1fr);
  align-items:stretch;
}

.wi-col {
  display:grid;
  gap:14px;
  position:relative;
  padding-top:30px;
}

.wi-in {
  grid-template-rows:repeat(4,1fr);
}

.wi-out {
  grid-template-rows:repeat(3,1fr);
}

.wi-lbl {
  position:absolute;
  top:0;
  left:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mut);
}

.wi-card {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:18px;
  padding:14px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 14px 30px -24px rgba(15,60,40,.35);
  transition:transform .35s var(--ease),border-color .3s;
}

.wi-card:hover {
  transform:translateY(-3px);
  border-color:color-mix(in oklch,var(--brand) 35%,var(--hair));
}

.wi-card b {
  display:block;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.2;
}

.wi-card small {
  font-size:12.5px;
  color:var(--mut);
}

.wi-card.big {
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}

.wi-ic {
  flex-shrink:0;
  width:64px;
  height:56px;
  border-radius:12px;
  background:var(--bg2);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.wi-ic.wide {
  width:100%;
  height:64px;
  padding:10px;
}

.beds {
  display:grid;
  grid-template-columns:repeat(6,6px);
  gap:3px;
}

.beds i {
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--hair);
}

.beds i.on {
  background:var(--brand);
}

.avs {
  display:flex;
}

.avs i {
  width:22px;
  height:22px;
  border-radius:50%;
  margin-left:-6px;
  border:2px solid var(--bg2);
  background:var(--brand-d);
  color:#fff;
  font-size:8px;
  font-style:normal;
  font-weight:600;
  display:grid;
  place-items:center;
}

.avs i:first-child {
  margin-left:0;
}

.avs i:nth-child(2) {
  background:var(--brand);
}

.avs i:nth-child(3) {
  background:var(--blue);
}

.avs i:nth-child(4) {
  background:var(--card);
  color:var(--ink);
}

.lic {
  position:relative;
  width:38px;
  height:28px;
  border-radius:5px;
  background:var(--card);
  border:1px solid var(--hair);
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  color:var(--brand-d);
}

.lic em {
  position:absolute;
  right:-7px;
  bottom:-7px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-style:normal;
  font-size:9px;
  display:grid;
  place-items:center;
}

.cal {
  display:grid;
  grid-template-columns:repeat(7,5px);
  gap:3px;
}

.cal i {
  width:5px;
  height:5px;
  border-radius:1.5px;
  background:var(--hair);
}

.cal i.lv {
  background:var(--amber);
}

.ros {
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:3px;
}

.ros i {
  border-radius:3px;
}

.ros .d {
  background:var(--brand);
}

.ros .n {
  background:var(--brand-d);
}

.ros .o {
  background:var(--hair);
}

.alr {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.alr span {
  font-size:11px;
  font-weight:500;
  padding:4px 8px;
  border-radius:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.alr .r {
  background:var(--red-w);
  color:var(--red);
}

.alr .a {
  background:var(--amber-w);
  color:oklch(48% .12 60);
}

.chart {
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  gap:5px;
}

.chart i {
  flex:1;
  border-radius:3px 3px 1px 1px;
  background:color-mix(in oklch,var(--brand) 35%,var(--hair));
}

.chart i:last-child {
  background:var(--brand);
}

.wi-link {
  display:block;
  width:100%;
  height:calc(100% - 30px);
  margin-top:30px;
  overflow:visible;
}

.wi-link .ln {
  fill:none;
  stroke:color-mix(in oklch,var(--brand) 30%,var(--hair));
  stroke-width:1.5;
}

.wi-link .nd {
  fill:#fff;
  stroke:color-mix(in oklch,var(--brand) 55%,var(--hair));
  stroke-width:1.5;
}

.wi-link .pk {
  fill:var(--brand);
  filter:drop-shadow(0 0 4px color-mix(in oklch,var(--brand-l) 80%,transparent));
}

.wi-hub {
  position:relative;
  margin-top:30px;
  border-radius:28px;
  background:oklch(20% .03 165);
  color:#fff;
  padding:clamp(22px,2.4vw,32px);
  display:flex;
  align-items:center;
  box-shadow:0 40px 80px -40px rgba(15,60,40,.6);
  overflow:hidden;
}

.hub-ring {
  position:absolute;
  inset:-40%;
  background:conic-gradient(from 0deg,transparent 0 70%,color-mix(in oklch,var(--brand-l) 55%,transparent) 85%,transparent 100%);
  animation:spin 6s linear infinite;
  opacity:.5;
}

.wi-hub::after {
  content:"";
  position:absolute;
  inset:1.5px;
  border-radius:27px;
  background:oklch(20% .03 165);
}

.hub-in {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
}

.hub-in .logo {
  font-size:17px;
}

.hub-step {
  display:grid;
  grid-template-columns:28px 1fr;
  gap:12px;
  align-items:start;
}

.hub-step .n {
  width:28px;
  height:28px;
  border-radius:50%;
  background:oklch(100% 0 0/.08);
  border:1px solid oklch(100% 0 0/.16);
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:12px;
  color:var(--brand-l);
}

.hub-step b {
  font-weight:500;
  font-size:14.5px;
  display:block;
  margin:4px 0 8px;
}

.hub-bar {
  height:6px;
  border-radius:3px;
  background:oklch(100% 0 0/.1);
  overflow:hidden;
}

.hub-bar i {
  display:block;
  height:100%;
  width:0;
  border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-l));
  animation:hb 3.6s var(--ease) infinite;
}

@keyframes hb {
  0% {
    width:0;
  }
  60%, 100% {
    width:100%;
  }
}

.hub-gates {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.hub-gates span {
  font-size:10.5px;
  padding:3px 7px;
  border-radius:999px;
  background:oklch(100% 0 0/.07);
  color:oklch(85% .02 160);
  animation:gt 3.6s infinite;
}

@keyframes gt {
  0%, 8% {
    background:oklch(100% 0 0/.07);
    color:oklch(85% .02 160);
  }
  14%, 80% {
    background:var(--brand);
    color:#fff;
  }
  100% {
    background:oklch(100% 0 0/.07);
  }
}

.hub-ok {
  display:inline-flex;
  font-size:12px;
  font-weight:500;
  padding:5px 11px;
  border-radius:999px;
  background:var(--brand-l);
  color:var(--brand-d);
}

.wi-nums {
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hair);
}

.wi-nums div {
  display:flex;
  align-items:center;
  gap:14px;
  padding:26px 20px 0;
}

.wi-nums div+div {
  border-left:1px solid var(--hair);
}

.wi-nums b {
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(44px,4.4vw,64px);
  line-height:1;
  color:var(--brand);
  letter-spacing:-.02em;
}

.wi-nums span {
  font-size:13px;
  color:var(--ink2);
  line-height:1.35;
}

@media(max-width:1080px) {
  .wi {
    grid-template-columns:1fr;
    max-width:560px;
    margin:0 auto;
  }
  .wi-link {
    display:none;
  }
  .wi-hub {
    margin:22px 0;
  }
  .wi-col {
    padding-top:28px;
  }
  .wi-in {
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  .wi-out {
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:auto;
  }
  .wi-hub::before {
    content:"";
    position:absolute;
    left:50%;
    top:-22px;
    height:22px;
    border-left:1.5px dashed var(--brand);
  }
}

@media(max-width:1080px) {
  .wi-col.wi-out .wi-card small {
    display:none;
  }
  .wi-nums {
    grid-template-columns:1fr 1fr;
  }
  .wi-nums div:nth-child(3) {
    border-left:0;
  }
  .wi-nums div {
    padding-bottom:20px;
  }
}

@media(max-width:560px) {
  .wi-in {
    grid-template-columns:1fr;
  }
  .wi-out {
    grid-template-columns:1fr;
  }
  .wi-col.wi-out .wi-card small {
    display:block;
  }
  .wi-card {
    padding:12px;
  }
  .wi-nums div {
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:20px 14px;
  }
}

/* problem visuals */
.pbg {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

@media(max-width:1080px) {
  .pbg {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

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

.pbc {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:20px;
  padding:14px 14px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}

.pbc:hover {
  transform:translateY(-4px);
  box-shadow:0 30px 50px -34px rgba(15,60,40,.35);
}

.pbv {
  height:124px;
  border-radius:14px;
  background:var(--bg2);
  display:grid;
  place-items:center;
  margin-bottom:10px;
  position:relative;
  overflow:hidden;
  padding:14px;
}

.pbc .n {
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--red);
  padding:0 6px;
}

.pbc h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:23px;
  line-height:1.08;
  padding:0 6px;
}

.pbc p {
  font-size:13.5px;
  color:var(--mut);
  padding:0 6px;
}

.v-cal {
  display:grid;
  grid-template-columns:repeat(7,14px);
  gap:4px;
}

.v-cal i {
  height:14px;
  border-radius:3px;
  background:var(--hair);
}

.v-cal i.x {
  background:var(--red);
}

.v-big {
  position:absolute;
  right:14px;
  bottom:10px;
  font-family:var(--disp);
  font-size:28px;
  font-weight:400;
  color:var(--red);
}

.v-sheet {
  width:100%;
  display:grid;
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
  border-radius:6px;
  overflow:hidden;
  font-family:var(--mono);
  font-size:11px;
}

.v-sheet div {
  display:flex;
  justify-content:space-between;
  background:#fff;
  padding:6px 9px;
}

.v-sheet .bad {
  color:var(--red);
  font-weight:500;
}

.v-lic {
  display:flex;
  align-items:center;
  gap:12px;
}

.lc2 {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:8px;
  padding:9px 12px;
  position:relative;
}

.lc2 span {
  font-size:11px;
  color:var(--mut);
  display:block;
}

.lc2 b {
  font-family:var(--mono);
  font-size:12px;
  color:var(--red);
  border:1.5px solid var(--red);
  padding:1px 6px;
  border-radius:4px;
  display:inline-block;
  margin-top:4px;
  transform:rotate(-6deg);
}

.v-lic .sh {
  display:grid;
  gap:4px;
}

.v-lic .sh i {
  width:40px;
  height:10px;
  border-radius:3px;
  background:color-mix(in oklch,var(--red) 35%,var(--card));
}

.v-list {
  width:100%;
  display:grid;
  gap:5px;
  font-size:12px;
}

.v-list div {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:7px;
  padding:6px 10px;
  color:var(--brand-d);
}

.v-list .ghost {
  border-style:dashed;
  background:transparent;
  color:var(--mut);
  opacity:.75;
}

.v-q {
  position:relative;
}

.v-q .g {
  display:grid;
  grid-template-columns:repeat(7,16px);
  gap:4px;
}

.v-q i {
  height:16px;
  border-radius:3px;
  background:var(--hair);
}

.v-q i.lv {
  background:var(--amber);
}

.v-q b {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--disp);
  font-size:64px;
  font-weight:400;
  color:var(--ink);
  opacity:.85;
}

.v-note {
  background:oklch(95% .07 95);
  padding:14px 18px;
  border-radius:3px;
  transform:rotate(-4deg);
  box-shadow:0 10px 18px -10px rgba(0,0,0,.3);
  font-family:'Segoe Print','Bradley Hand',cursive;
}

.v-note b {
  display:block;
  font-size:20px;
  font-weight:600;
}

.v-note small {
  font-size:12px;
  color:var(--mut);
}

.v-prog {
  width:100%;
}

.v-prog .bar {
  height:10px;
  border-radius:5px;
  background:var(--hair);
  overflow:hidden;
}

.v-prog .bar i {
  display:block;
  height:100%;
  width:30%;
  background:var(--amber);
  border-radius:5px;
  animation:slow 6s ease-in-out infinite alternate;
}

@keyframes slow {
  to {
    width:42%;
  }
}

.v-prog small {
  display:block;
  margin-top:10px;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--mut);
}

.v-log {
  width:100%;
  display:grid;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
}

.v-log div {
  display:flex;
  justify-content:space-between;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:7px;
  padding:7px 10px;
}

.v-log b {
  color:var(--red);
  font-weight:500;
}

/* gate lanes */
.gt {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:24px;
  padding:clamp(16px,2.5vw,30px);
}

.gt-in {
  overflow-x:auto;
  scrollbar-width:thin;
}

.gt-row {
  display:grid;
  grid-template-columns:150px repeat(9,minmax(40px,1fr)) 108px;
  align-items:center;
  gap:4px;
  min-width:700px;
  padding:12px 0;
}

@media(max-width:1000px) {
  .gh {
    font-size:10px;
  }
  .gh i {
    width:28px;
    height:28px;
  }
  .who small {
    display:none;
  }
  .gt-row {
    grid-template-columns:110px repeat(9,minmax(40px,1fr)) 96px;
  }
  .res {
    font-size:12px;
    padding:6px 10px;
  }
}

.gt-row+.gt-row {
  border-top:1px solid var(--hair2);
}

.gh {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  color:var(--ink2);
  text-align:center;
}

.gh i {
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--brand-w);
  color:var(--brand-d);
  display:grid;
  place-items:center;
}

.gh svg {
  width:17px;
  height:17px;
}

.who {
  display:flex;
  align-items:center;
  gap:10px;
}

.who>i {
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--brand-d);
  color:#fff;
  font-style:normal;
  font-size:11px;
  font-weight:600;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.no .who>i {
  background:var(--mut);
}

.who b {
  display:block;
  font-size:14px;
  font-weight:600;
}

.who small {
  font-size:11.5px;
  color:var(--mut);
}

.c {
  justify-self:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--hair2);
  position:relative;
}

.ok .c {
  animation:pass 4.5s infinite;
  animation-delay:var(--d);
}

@keyframes pass {
  0%, 4% {
    background:var(--hair2);
  }
  10%, 85% {
    background:var(--brand);
  }
  100% {
    background:var(--hair2);
  }
}

.ok .c::after {
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.c.x {
  background:var(--red);
}

.c.x::after {
  content:"✕";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:11px;
  font-weight:700;
}

.c.off {
  opacity:.45;
}

.res {
  justify-self:end;
  font-size:13px;
  font-weight:600;
  padding:7px 12px;
  border-radius:999px;
  white-space:nowrap;
}

.ok .res {
  background:var(--brand-w);
  color:var(--brand-d);
}

.no .res {
  background:var(--red-w);
  color:var(--red);
}

.gt-cap {
  margin-top:14px;
  font-size:13.5px;
  color:var(--mut);
}

.law2 {
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

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

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

.lw {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:20px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.lw .k {
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.05em;
  color:var(--brand-d);
}

.lw h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:24px;
  line-height:1.05;
}

.lw-v {
  margin-top:auto;
  padding-top:12px;
  display:grid;
  gap:8px;
}

.lw-v small {
  font-size:12.5px;
  color:var(--mut);
}

.hb {
  display:grid;
  grid-template-columns:62px 1fr 34px;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--ink2);
}

.hb div {
  height:12px;
  border-radius:6px;
  background:var(--hair2);
  overflow:hidden;
}

.hb i {
  display:block;
  height:100%;
  background:var(--mut);
  border-radius:6px;
}

.hb.r i {
  background:var(--brand);
}

.hb b {
  font-family:var(--mono);
  font-size:12px;
  text-align:right;
}

.ot {
  display:flex;
  height:26px;
  border-radius:6px;
  overflow:hidden;
  font-style:normal;
  font-size:11px;
}

.ot i {
  display:grid;
  place-items:center;
  font-style:normal;
  color:#fff;
}

.ot .s {
  flex:8;
  background:var(--brand-d);
}

.ot .o {
  flex:2;
  background:var(--brand);
}

.ot .j {
  flex:2;
  background:repeating-linear-gradient(45deg,var(--amber) 0 4px,oklch(82% .12 75) 4px 8px);
  color:var(--ink);
}

.dots {
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:4px;
}

.dots i {
  aspect-ratio:1;
  border-radius:50%;
  background:var(--brand);
}

.sk {
  display:flex;
  height:26px;
  border-radius:6px;
  overflow:hidden;
  font-size:10.5px;
}

.sk i {
  display:grid;
  place-items:center;
  font-style:normal;
  white-space:nowrap;
}

.sk i:nth-child(1) {
  background:var(--brand);
  color:#fff;
}

.sk i:nth-child(2) {
  background:var(--brand-l);
  color:var(--brand-d);
}

.sk i:nth-child(3) {
  background:var(--hair);
  color:var(--ink2);
}

/* care visuals */
.csv {
  height:150px;
  border-radius:16px;
  background:var(--bg2);
  display:grid;
  place-items:center;
  padding:16px;
  margin-bottom:6px;
}

.cs {
  padding:16px 16px 26px;
}

.cs>.k, .cs>h3, .cs>.drv {
  margin-left:10px;
  margin-right:10px;
}

.cs .big {
  display:none;
}

.ward {
  display:grid;
  grid-template-columns:repeat(4,38px);
  gap:8px;
}

.ward i {
  height:30px;
  border-radius:7px;
  font-style:normal;
  font-size:10px;
  font-weight:600;
  display:grid;
  place-items:center;
}

.ward .bd {
  background:#fff;
  border:1px solid var(--hair);
}

.ward .bd::before {
  content:"";
  width:14px;
  height:6px;
  border-radius:3px;
  background:var(--brand-l);
}

.ward .nr {
  background:var(--brand);
  color:#fff;
}

.cases, .opd, .pay {
  width:100%;
  display:grid;
  gap:6px;
  font-size:12px;
}

.cases div {
  display:grid;
  grid-template-columns:44px 1fr auto 26px;
  gap:8px;
  align-items:center;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:8px;
  padding:6px 9px;
}

.cases span {
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--mut);
}

.cases i {
  font-style:normal;
  font-size:10.5px;
  color:var(--mut);
}

.cases em {
  font-style:normal;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--brand-d);
  color:#fff;
  font-size:9px;
  font-weight:600;
  display:grid;
  place-items:center;
}

.opd div {
  display:grid;
  grid-template-columns:64px 1fr;
  gap:8px;
  align-items:center;
}

.opd span {
  font-size:11.5px;
  color:var(--ink2);
}

.opd p {
  position:relative;
  height:20px;
  border-radius:5px;
  background:#fff;
  border:1px solid var(--hair);
}

.opd i {
  position:absolute;
  top:3px;
  bottom:3px;
  border-radius:3px;
  background:var(--brand);
}

.opd i.f {
  background:var(--violet);
}

.cs .drv {
  border-top:0;
  padding-top:4px;
  margin-top:4px;
}

/* before after rows */
.vs {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:24px;
  padding:clamp(14px,2.5vw,28px);
}

.vs-h, .vs-r {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 40px minmax(0,1fr);
  align-items:center;
  gap:12px;
}

.vs-h {
  padding:0 12px 14px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.vs-h .b4 {
  color:var(--red);
}

.vs-h .af {
  color:var(--brand-d);
}

.vs-r {
  padding:12px;
  border-radius:14px;
  transition:background .25s;
}

.vs-r:hover {
  background:var(--bg2);
}

.vs-r+.vs-r {
  border-top:1px solid var(--hair2);
}

.vs-r .l {
  font-size:15px;
  font-weight:600;
  letter-spacing:-.005em;
}

.vs-r .p {
  justify-self:start;
  font-size:14px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:500;
}

.vs-r .p.b4 {
  background:var(--red-w);
  color:var(--red);
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in oklch,var(--red) 50%,transparent);
}

.vs-r .p.af {
  background:var(--brand);
  color:#fff;
}

.vs-r .ar {
  color:var(--mut);
  text-align:center;
  font-size:18px;
}

@media(max-width:700px) {
  .vs-h {
    display:none;
  }
  .vs-r {
    grid-template-columns:1fr 24px 1fr;
    gap:8px 8px;
  }
  .vs-r .l {
    grid-column:1/-1;
    font-size:14px;
  }
  .vs-r .p {
    font-size:13px;
    padding:7px 12px;
    justify-self:stretch;
    text-align:center;
  }
}

/* fit visuals */
.fit {
  padding:14px 14px 22px;
}

.fit h3, .fit p {
  padding:0 8px;
}

.fit>.n {
  display:none;
}

.fv {
  height:120px;
  border-radius:14px;
  background:var(--bg2);
  display:grid;
  place-items:center;
  padding:12px;
  margin-bottom:12px;
}

.codes {
  display:grid;
  grid-template-columns:repeat(3,40px);
  gap:6px;
}

.codes i {
  height:30px;
  border-radius:7px;
  background:var(--brand);
  color:#fff;
  font-style:normal;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  display:grid;
  place-items:center;
}

.codes .n {
  background:var(--brand-d);
}

.codes .o {
  background:var(--amber);
  color:var(--ink);
}

.paper {
  width:120px;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:4px;
  padding:10px;
  display:grid;
  gap:5px;
  box-shadow:0 10px 20px -14px rgba(0,0,0,.3);
  transform:rotate(-2deg);
}

.paper b {
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:.04em;
}

.paper i {
  height:5px;
  border-radius:2px;
  background:var(--hair);
}

.paper em {
  font-style:normal;
  font-size:10px;
  color:var(--brand-d);
  justify-self:end;
}

.chainv {
  display:flex;
  align-items:center;
  gap:6px;
}

.chainv i {
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--hair);
  font-style:normal;
  font-size:10.5px;
  font-weight:600;
  display:grid;
  place-items:center;
}

.chainv i.ok {
  background:var(--brand);
  color:#fff;
  border:0;
  font-size:15px;
}

.chainv span {
  width:18px;
  height:1.5px;
  background:var(--brand);
}

.imp {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
}

.imp i {
  font-style:normal;
  font-family:var(--mono);
  background:#fff;
  border:1px solid var(--hair);
  padding:6px 8px;
  border-radius:7px;
}

.imp i.b {
  background:var(--brand);
  color:#fff;
  border:0;
  font-family:var(--sans);
  font-weight:600;
}

.imp span {
  color:var(--brand);
}

/* security tiles */
.sec2 {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

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

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

.st2 {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:20px;
  padding:14px 14px 22px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.st2.wide {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:8px 30px;
  align-items:center;
  padding:22px;
}

.st2.wide .chain {
  grid-row:span 2;
}

.st2.wide h3 {
  align-self:end;
}

.st2.wide p {
  align-self:start;
}

@media(max-width:800px) {
  .st2.wide {
    grid-template-columns:1fr;
  }
  .st2.wide .chain {
    grid-row:auto;
  }
}

.st2 h3 {
  font-size:16px;
  font-weight:600;
  padding:0 8px;
}

.st2 p {
  font-size:13.5px;
  color:var(--mut);
  padding:0 8px;
}

.st2.wide h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:28px;
}

.st2.wide p {
  font-size:15px;
}

.sv {
  height:110px;
  border-radius:14px;
  background:var(--bg2);
  display:grid;
  place-items:center;
  margin-bottom:10px;
  padding:12px;
}

.pin {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.pin i {
  width:22px;
  height:22px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--brand);
  box-shadow:0 0 0 8px color-mix(in oklch,var(--brand) 18%,transparent);
  animation:ping 2s infinite;
}

@keyframes ping {
  50% {
    box-shadow:0 0 0 14px color-mix(in oklch,var(--brand) 6%,transparent);
  }
}

.pin b {
  font-family:var(--mono);
  font-size:11px;
  color:var(--brand-d);
  font-weight:500;
}

.deid {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:12px;
}

.deid span {
  background:#fff;
  border:1px solid var(--hair);
  padding:5px 10px;
  border-radius:7px;
}

.deid s {
  filter:blur(2.5px);
}

.deid .ar {
  border:0;
  background:none;
  padding:0;
  color:var(--brand);
  transform:rotate(90deg);
}

.deid .m {
  font-family:var(--mono);
  color:var(--brand-d);
}

.lock {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:var(--brand-d);
}

.lock svg {
  width:34px;
  height:34px;
}

.lock b {
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
}

.cons {
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;
}

.tg {
  width:38px;
  height:22px;
  border-radius:11px;
  background:var(--brand);
  position:relative;
}

.tg::after {
  content:"";
  position:absolute;
  right:3px;
  top:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
}

/* roles visuals */
.rl {
  padding:14px 14px 26px;
}

.rl>.k, .rl>h3, .rl>ul {
  margin-left:12px;
  margin-right:12px;
}

.rv2 {
  min-height:140px;
  border-radius:16px;
  background:var(--bg2);
  display:grid;
  place-items:center;
  padding:14px;
  position:relative;
  margin-bottom:6px;
}

.rl.main .rv2 {
  background:oklch(100% 0 0/.06);
}

.kp {
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.kp div {
  background:oklch(100% 0 0/.07);
  border-radius:9px;
  padding:6px 10px;
}

.kp small {
  display:block;
  font-size:10px;
  color:oklch(78% .02 160);
}

.kp b {
  font-family:var(--disp);
  font-weight:400;
  font-size:20px;
  line-height:1.1;
  color:#fff;
}

.kp b.a {
  color:var(--amber);
}

.mini-ros {
  width:100%;
  height:80px;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:4px;
}

.mini-ros i {
  border-radius:4px;
}

.mini-ros .d {
  background:var(--brand);
}

.mini-ros .n {
  background:var(--brand-d);
}

.mini-ros .o {
  background:var(--hair);
}

.chk {
  position:absolute;
  right:12px;
  bottom:10px;
  font-size:11.5px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  background:#fff;
  color:var(--brand-d);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.25);
}

.pay div {
  display:flex;
  justify-content:space-between;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:8px;
  padding:7px 10px;
}

.pay b {
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
}

.pay em {
  font-style:normal;
  font-size:11.5px;
  color:var(--brand-d);
  font-weight:500;
  justify-self:end;
}

.rl ul {
  flex-direction:row;
  flex-wrap:wrap;
  gap:6px;
}

.rl li {
  font-size:12.5px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--bg2);
  color:var(--ink2);
}

.rl li::before {
  content:none;
}

.rl.main li {
  background:oklch(100% 0 0/.08);
  color:#fff;
}

/* features: titles only */
.fl {
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}

.fl div {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
}

.fl div::before {
  content:"✓";
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--brand-w);
  color:var(--brand-d);
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:700;
}

.fl b {
  margin:0;
  font-size:14px;
}

.fl span {
  display:none;
}

/* how stepper */
.hw {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:28px;
  padding:clamp(16px,2.6vw,32px);
  box-shadow:0 40px 80px -60px rgba(15,60,40,.4);
}

.hw-nav {
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
  margin-bottom:clamp(20px,3vw,32px);
}

.hw-t {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:6px 4px 10px;
  border-radius:14px;
  transition:background .2s;
}

.hw-t:hover {
  background:var(--bg2);
}

.hw-t .d {
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:13px;
  font-weight:500;
  background:var(--card);
  border:1.5px solid var(--hair);
  color:var(--mut);
  transition:all .3s var(--ease);
}

.hw-t .l {
  font-size:13.5px;
  font-weight:500;
  color:var(--mut);
  transition:color .2s;
}

.hw-t.done .d {
  background:var(--brand-w);
  border-color:var(--brand-l);
  color:var(--brand-d);
}

.hw-t.on .d {
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  box-shadow:0 0 0 6px color-mix(in oklch,var(--brand) 15%,transparent);
}

.hw-t.on .l, .hw-t.done .l {
  color:var(--ink);
}

.hw-t:focus-visible {
  outline:2px solid var(--brand);
  outline-offset:2px;
}

.hw-line {
  position:absolute;
  left:calc(100%/12);
  right:calc(100%/12);
  top:26px;
  height:2px;
  background:var(--hair2);
  border-radius:1px;
}

.hw-line i {
  display:block;
  height:100%;
  width:0;
  background:var(--brand);
  border-radius:1px;
  transition:width .5s var(--ease);
}

.hw-p {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
  gap:clamp(20px,3.5vw,48px);
  align-items:center;
}

.hw-p[hidden] {
  display:none;
}

.hw-p.on .hw-txt>*, .hw-p.on .hw-fig {
  animation:tIn .5s var(--ease) both;
}

.hw-p.on .hw-fig {
  animation-delay:.06s;
}

.hw-txt .n {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--brand-d);
}

.hw-txt h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(28px,2.8vw,38px);
  line-height:1.05;
  letter-spacing:-.015em;
  margin:10px 0 12px;
}

.hw-txt p {
  font-size:15.5px;
  color:var(--ink2);
}

.hw-txt ul {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:18px;
}

.hw-txt li {
  font-size:13px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--brand-w);
  color:var(--brand-d);
  font-weight:500;
}

.hw-ctrl {
  display:flex;
  gap:10px;
  margin-top:28px;
}

.hw-b {
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--hair);
  background:var(--card);
  font-size:18px;
  transition:border-color .2s,opacity .2s;
}

.hw-b:hover {
  border-color:var(--ink2);
}

.hw-b:disabled {
  opacity:.35;
  cursor:default;
}

.hw-ctrl .btn {
  padding:13px 22px;
}

.hw-fig {
  margin:0;
  border-radius:20px;
  background:linear-gradient(150deg,var(--brand-w),var(--bg2) 70%);
  border:1px solid var(--hair2);
  padding:clamp(10px,1.6vw,18px);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hw-scr {
  position:relative;
  height:clamp(300px,36vw,460px);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--hair);
  box-shadow:0 24px 50px -30px rgba(15,60,40,.4);
  cursor:zoom-in;
}

.hw-scr img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top left;
}

.hw-scr::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:56px;
  background:linear-gradient(transparent,#fff);
  pointer-events:none;
}

.hw-fig figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--brand-d);
  padding:0 4px;
}

.hw-zoom {
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  padding:7px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--hair);
}

.hw-zoom:hover {
  border-color:var(--ink2);
}

@media(max-width:900px) {
  .hw-p {
    grid-template-columns:1fr;
  }
  .hw-fig {
    order:-1;
  }
  .hw-scr {
    height:clamp(220px,60vw,380px);
  }
  .hw-ctrl {
    margin-top:20px;
  }
}

@media(max-width:640px) {
  .hw-nav {
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
    margin:0 -4px 20px;
    padding:0 4px;
  }
  .hw-nav::-webkit-scrollbar {
    display:none;
  }
  .hw-t {
    flex:0 0 auto;
    flex-direction:row;
    padding:6px 12px 6px 6px;
    border:1px solid var(--hair);
    border-radius:999px;
    gap:8px;
  }
  .hw-t .d {
    width:28px;
    height:28px;
    font-size:11px;
  }
  .hw-t.on {
    border-color:var(--brand);
  }
  .hw-t.on .d {
    box-shadow:none;
  }
  .hw-line {
    display:none;
  }
  .hw-ctrl .btn {
    flex:1;
    justify-content:center;
  }
}

.pbc h3 {
  font-size:20px;
  line-height:1.15;
  text-wrap:balance;
}

.fn h3 {
  font-size:20px;
  line-height:1.15;
}

.lw h3 {
  font-size:20px;
  line-height:1.15;
}

.hw-txt h3 {
  font-size:clamp(26px,2.4vw,34px);
  line-height:1.1;
  text-wrap:balance;
}

.cs h3 {
  font-size:24px;
  line-height:1.12;
  text-wrap:balance;
}

.rl h3 {
  font-size:24px;
  line-height:1.12;
  text-wrap:balance;
}

.tour-txt h3 {
  font-size:clamp(26px,2.4vw,30px);
  line-height:1.1;
  text-wrap:balance;
}

.inv-panel h3 {
  font-size:clamp(24px,2.4vw,30px);
  line-height:1.1;
}

.fit h3, .st2 h3 {
  line-height:1.3;
  text-wrap:balance;
}

.h2 {
  text-wrap:balance;
}

/* static screens */
.scr {
  overflow:hidden!important;
  cursor:zoom-in!important;
}

.scr img {
  width:100%!important;
  height:100%;
  object-fit:cover;
  object-position:top left;
}

.scr::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:60px;
  background:linear-gradient(transparent,#fff);
  pointer-events:none;
}

.scr:hover img {
  opacity:.96;
}

.tt .pb {
  display:none;
}

.scan {
  display:none;
}

.rx-i b {
  font-size:15px;
  line-height:1.3;
  text-wrap:balance;
}

.rx-i .q {
  display:block!important;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--mut);
  margin-top:2px;
}

.rx-i .cat {
  display:none;
}

.rx-i.on b {
  color:var(--brand-d);
}

/* more reports grid */
.mr-head {
  margin-top:72px;
  margin-bottom:28px;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:30px;
  align-items:end;
}

.mr-head h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(28px,3vw,40px);
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
}

.mr-head p {
  font-size:15px;
  color:var(--ink2);
}

@media(max-width:800px) {
  .mr-head {
    grid-template-columns:1fr;
    gap:10px;
  }
}

.mr-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

@media(max-width:1100px) {
  .mr-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:780px) {
  .mr-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

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

.mr {
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:20px;
  padding:12px 12px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}

.mr:hover {
  transform:translateY(-4px);
  box-shadow:0 30px 50px -34px rgba(15,60,40,.4);
  border-color:color-mix(in oklch,var(--brand) 30%,var(--hair));
}

.mr-v {
  height:140px;
  border-radius:14px;
  background:var(--bg2);
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  margin-bottom:8px;
  overflow:hidden;
}

.mr-c {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--brand-d);
  padding:0 6px;
}

.mr h3 {
  font-size:15.5px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.005em;
  padding:0 6px;
  text-wrap:balance;
}

.mr-n {
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--mut);
  padding:0 6px;
  margin-top:auto;
}

.mr-cta {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
  padding:22px;
}

.mr-cta:hover {
  color:#fff;
}

.mr-cta .mr-c {
  color:var(--brand-l);
  padding:0;
}

.mr-cta h3 {
  font-family:var(--disp);
  font-weight:400;
  font-size:24px;
  line-height:1.12;
  padding:0;
  margin:8px 0 16px;
}

.m-k {
  font-size:10.5px;
  color:var(--mut);
  display:flex;
  align-items:center;
  gap:6px;
}

.m-hb {
  display:grid;
  gap:7px;
}

.m-hb div {
  display:grid;
  grid-template-columns:54px 1fr 32px;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--ink2);
}

.m-hb p {
  height:9px;
  border-radius:5px;
  background:#fff;
  overflow:hidden;
}

.m-hb i {
  display:block;
  height:100%;
  background:var(--brand);
  border-radius:5px;
}

.m-hb b {
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  text-align:right;
}

.m-dots {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}

.m-dots i {
  aspect-ratio:1;
  border-radius:50%;
  background:var(--brand);
  max-width:20px;
}

.m-dots i.x {
  background:var(--red);
}

.m-stk {
  display:grid;
  gap:7px;
}

.m-stk div {
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--ink2);
}

.m-stk p {
  display:flex;
  height:14px;
  border-radius:4px;
  overflow:hidden;
  gap:1px;
}

.m-stk i:nth-child(1) {
  background:var(--brand-d);
}

.m-stk i:nth-child(2) {
  background:var(--brand);
}

.m-stk i:nth-child(3) {
  background:var(--brand-l);
}

.m-stk i:nth-child(4) {
  background:var(--hair);
}

.m-k b {
  width:9px;
  height:9px;
  border-radius:2px;
  display:inline-block;
}

.m-k .l4 {
  background:var(--brand-d);
}

.m-k .l1 {
  background:var(--hair);
  margin-left:8px;
}

.m-sc {
  width:100%;
  height:100%;
}

.m-sc circle {
  fill:var(--brand);
}

.m-sc circle.o {
  fill:var(--red);
}

.m-sc path {
  stroke:var(--brand-d);
  stroke-width:1;
  stroke-dasharray:3 3;
  fill:none;
}

.m-col {
  position:relative;
  flex:1;
  display:flex;
  align-items:flex-end;
  gap:5px;
  min-height:0;
}

.m-col i {
  flex:1;
  max-height:100%;
  border-radius:4px 4px 1px 1px;
  background:var(--brand);
}

.m-col em {
  position:absolute;
  left:0;
  right:0;
  bottom:var(--t);
  border-top:1.5px dashed var(--ink2);
  z-index:1;
}

.m-heat {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:3px;
}

.m-heat i {
  height:16px;
  border-radius:3px;
  background:var(--brand);
}

.m-don {
  display:flex;
  align-items:center;
  gap:14px;
}

.m-don .d {
  width:84px;
  height:84px;
  flex-shrink:0;
  border-radius:50%;
  background:conic-gradient(var(--brand-d) 0 58%,var(--brand) 0 80%,var(--brand-l) 0 92%,var(--hair) 0);
  display:grid;
  place-items:center;
  position:relative;
}

.m-don .d::before {
  content:"";
  position:absolute;
  inset:14px;
  border-radius:50%;
  background:var(--bg2);
}

.m-don .d b {
  position:relative;
  font-family:var(--disp);
  font-weight:400;
  font-size:20px;
}

.m-don ul {
  list-style:none;
  display:grid;
  gap:3px;
  font-size:10.5px;
  color:var(--ink2);
}

.m-don li {
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.m-don li i {
  width:8px;
  height:8px;
  border-radius:2px;
}

.m-eq {
  position:relative;
  flex:1;
}

.m-eq em {
  position:absolute;
  left:0;
  right:0;
  bottom:40%;
  height:22%;
  background:var(--brand-w);
  border-block:1px dashed var(--brand-l);
}

.m-eq i {
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--brand);
  transform:translate(-50%,50%);
}

.m-ln {
  width:100%;
  flex:1;
  min-height:0;
}

.m-ln path {
  fill:none;
  stroke:var(--brand);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

.m-ln path.a {
  fill:color-mix(in oklch,var(--brand) 18%,transparent);
  stroke:none;
}

.m-ln path.b {
  stroke:var(--ink2);
  stroke-dasharray:4 4;
  stroke-width:1;
}

.m-ln path.f {
  stroke:var(--amber);
  stroke-dasharray:5 4;
}

.m-cal {
  display:grid;
  grid-template-columns:16px repeat(7,1fr);
  gap:3px;
  font-size:9.5px;
  color:var(--mut);
  text-align:center;
  align-items:center;
}

.m-cal i {
  height:16px;
  border-radius:3px;
  background:var(--red);
}

.m-ring {
  display:flex;
  align-items:center;
  gap:14px;
}

.m-ring .r {
  width:90px;
  height:90px;
  border-radius:50%;
  background:conic-gradient(var(--brand) 0 91%,var(--hair) 0);
  display:grid;
  place-items:center;
  position:relative;
  flex-shrink:0;
}

.m-ring .r::before {
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:var(--bg2);
}

.m-ring b {
  position:relative;
  font-family:var(--disp);
  font-weight:400;
  font-size:24px;
  color:var(--brand-d);
}

.m-ring small {
  font-size:12px;
  color:var(--ink2);
}

/* single font: SF Pro (Apple system), Inter fallback */
:root {
  --disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif;
  --sans:var(--disp);
  --mono:var(--disp);
}

body {
  font-family:var(--sans);
  letter-spacing:-.011em;
}

em {
  font-style:normal;
}

.h1 {
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1;
}

.h2, .cta h2 {
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.06;
}

.h1 em, .h2 em, .cta h2 em, .def p.big em {
  font-style:normal;
}

h3, h3, .pbc h3, .st h3, .hw-txt h3, .tour-txt h3, .cs h3, .rl h3, .inv-panel h3, .bac h3, .weights h3, .fn h3, .lw h3, .mr-head h3, .mr-cta h3, .st2.wide h3, .done h3, .lc h3, .mr-head h3, .rmore-in h3 {
  font-weight:600!important;
  letter-spacing:-.025em;
  font-style:normal;
}

.faq summary {
  font-weight:600;
  letter-spacing:-.02em;
}

.logo em {
  font-weight:600;
  font-style:normal;
  font-size:16px;
}

.eyebrow, .pill b, .n, .k, .cat, .mr-c, .mr-n, .cap, .formula, .badge, .tag, .rx-top, .rx-hint, .wi-lbl, .hw-txt .n, .res, .vs-h, .fd label, .chain, .blk, .fgrid .fh, .hint, .cs .k, .gt-cap {
  font-family:var(--sans)!important;
  letter-spacing:.02em;
}

.eyebrow, .wi-lbl, .vs-h, .fd label, .fgrid .fh, .mr-c, .rx-top {
  font-weight:600;
  font-size:12px;
}

.mr-n, .rx-i .q {
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}

.facts dt, .wi-nums b, .v-big, .kp b, .m-don .d b, .m-ring b, .fit .n, .cs .big {
  font-weight:600;
  letter-spacing:-.03em;
  font-style:normal;
}

.v-note {
  font-family:var(--sans);
}

.v-big {
  white-space:nowrap;
  font-size:22px;
}

.mr-head {
  margin-bottom:40px;
}

.h1 em {
  font-style:italic!important;
}

button.mr {
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:zoom-in;
}

.mr-img {
  padding:0;
  position:relative;
  display:block;
  height:170px;
  border:1px solid var(--hair2);
  background:#fff;
}

.mr-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top left;
  transition:transform .6s var(--ease);
}

.mr:hover .mr-img img {
  transform:scale(1.03);
}

.mr-img::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:40px;
  background:linear-gradient(transparent,#fff);
}

.mr-open {
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:1;
  font-size:12px;
  font-weight:500;
  padding:6px 11px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  opacity:0;
  transform:translateY(4px);
  transition:all .3s var(--ease);
}

.mr:hover .mr-open, .mr:focus-visible .mr-open {
  opacity:1;
  transform:none;
}

@media(hover:none) {
  .mr-open {
    opacity:1;
    transform:none;
  }
}

/* footer */
.ft {
  background:oklch(19% .025 165);
  color:#fff;
  padding:80px 0 36px;
  margin-top:40px;
  border-radius:36px 36px 0 0;
}

.ft .logo {
  color:#fff;
}

.ft .logo em {
  color:var(--brand-l);
}

.ft-top {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:30px;
  align-items:center;
  padding-bottom:48px;
  border-bottom:1px solid oklch(100% 0 0/.12);
}

.ft-top p {
  color:oklch(78% .02 160);
  font-size:14.5px;
  max-width:420px;
}

@media(max-width:800px) {
  .ft-top {
    grid-template-columns:1fr;
    gap:16px;
  }
  .ft-top .btn {
    justify-self:start;
  }
}

.ft-off {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  padding:48px 0;
}

@media(max-width:900px) {
  .ft-off {
    grid-template-columns:1fr;
  }
}

.of {
  font-style:normal;
  padding:28px;
  border-radius:22px;
  background:oklch(100% 0 0/.04);
  border:1px solid oklch(100% 0 0/.1);
}

.of .cc {
  display:block;
  font-size:clamp(44px,5vw,64px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--brand-l);
}

.of .cn {
  display:block;
  font-size:13px;
  color:oklch(72% .02 160);
  margin:8px 0 22px;
}

.of ul {
  list-style:none;
  display:grid;
  gap:14px;
}

.of li {
  display:grid;
  grid-template-columns:20px 1fr;
  gap:12px;
  font-size:14.5px;
  line-height:1.5;
  color:oklch(90% .01 160);
}

.of svg {
  width:18px;
  height:18px;
  margin-top:2px;
  color:var(--brand-l);
}

.of a {
  color:#fff;
  word-break:break-word;
}

.of a:hover {
  color:var(--brand-l);
}

.ft-soc {
  display:flex;
  justify-content:center;
  gap:12px;
  padding-bottom:40px;
}

.ft-soc a {
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid oklch(100% 0 0/.16);
  color:oklch(88% .01 160);
  transition:all .25s var(--ease);
}

.ft-soc a:hover {
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  transform:translateY(-2px);
}

.ft-soc svg {
  width:20px;
  height:20px;
}

.ft-bot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px 30px;
  flex-wrap:wrap;
  padding-top:28px;
  border-top:1px solid oklch(100% 0 0/.12);
  font-size:13.5px;
  color:oklch(72% .02 160);
}

.ft-bot nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
}

.ft-bot a {
  color:oklch(82% .01 160);
}

.ft-bot a:hover {
  color:#fff;
}

@media(max-width:760px) {
  .ft {
    padding-bottom:96px;
  }
  .ft-bot {
    flex-direction:column;
    align-items:flex-start;
  }
}

/* pilot cta v2 */
.pl {
  position:relative;
  overflow:hidden;
  border-radius:36px;
  padding:clamp(32px,5.5vw,76px);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
  color:#fff;
  isolation:isolate;
  background:radial-gradient(70% 90% at 0% 0%,oklch(52% .13 168) 0%,transparent 60%),radial-gradient(60% 80% at 100% 100%,oklch(58% .12 200) 0%,transparent 60%),radial-gradient(50% 60% at 80% 10%,oklch(70% .13 150/.55) 0%,transparent 70%),oklch(28% .06 175);
}

.pl::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,oklch(100% 0 0/.06),transparent 40%);
  pointer-events:none;
}

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

.pl-badge {
  display:inline-flex;
  font-size:13px;
  font-weight:600;
  padding:7px 14px;
  border-radius:999px;
  background:oklch(100% 0 0/.14);
  border:1px solid oklch(100% 0 0/.22);
  backdrop-filter:blur(8px);
}

.pl h2 {
  font-size:clamp(36px,4.4vw,58px);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.04;
  margin:22px 0 16px;
  text-wrap:balance;
}

.pl h2 em {
  font-style:normal;
  color:oklch(90% .1 160);
}

.pl-l>p {
  font-size:clamp(16px,1.3vw,18px);
  color:oklch(92% .02 170);
  max-width:440px;
}

.pl-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}

.pl-chips span {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:500;
  padding:9px 14px;
  border-radius:999px;
  background:oklch(100% 0 0/.1);
}

.pl-chips span::before {
  content:"✓";
  font-size:11px;
  font-weight:700;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  color:var(--brand-d);
  display:grid;
  place-items:center;
}

.pl-f {
  background:#fff;
  color:var(--ink);
  border-radius:26px;
  padding:clamp(22px,3vw,34px);
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:0 40px 80px -40px rgba(0,30,20,.55);
}

.pl-g {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media(max-width:520px) {
  .pl-g {
    grid-template-columns:1fr;
  }
}

.pl-i {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px 10px;
  border-radius:14px;
  background:var(--bg2);
  border:1.5px solid transparent;
  transition:border-color .2s,background .2s;
  cursor:text;
}

.pl-i:focus-within {
  background:#fff;
  border-color:var(--brand);
}

.pl-i span {
  font-size:12px;
  font-weight:600;
  color:var(--mut);
}

.pl-i input {
  border:0;
  background:transparent;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  outline:none;
  padding:0;
  min-width:0;
}

.pl-i:has(input:user-invalid) {
  border-color:var(--red);
}

.pl-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:4px;
  padding:17px;
  border-radius:14px;
  background:var(--ink);
  color:#fff;
  font-size:16px;
  font-weight:600;
  transition:background .2s,transform .2s var(--ease);
}

.pl-btn:hover {
  background:var(--brand-d);
  transform:translateY(-1px);
}

.pl-btn:hover .ar {
  transform:translateX(4px);
}

.pl-btn .ar {
  transition:transform .25s var(--ease);
}

.pl-f>small {
  text-align:center;
  font-size:13px;
  color:var(--mut);
}

.pl-f.sent>* {
  display:none;
}

.pl-f.sent .done {
  display:flex;
}

.pl-f .done p {
  color:var(--ink2);
}

.mr-img {
  height:180px;
  background:#f7f8f7;
  display:grid;
  place-items:center;
  padding:8px;
}

.mr-img img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:8px;
}

.mr-img::after {
  display:none;
}

.mr-img {
  padding:0;
  place-items:stretch;
}

.mr-img img {
  object-fit:cover;
  object-position:left center;
  border-radius:13px;
}


/* ==========================================================================
   Theme layer: colours, typography, header, hero gradient, cards, dark sections, pilot, footer
   ========================================================================== */

:root {
  --bg:#fff;
  --bg2:oklch(96.8% .003 165);
  --ink:oklch(29% .045 168);
  --ink2:oklch(40% .025 168);
  --mut:oklch(56% .012 168);
  --hair:oklch(92.5% .004 165);
  --hair2:oklch(95.5% .003 165);
  --brand:oklch(56% .1 168);
  --brand-d:oklch(31% .055 168);
  --brand-w:oklch(95.5% .028 168);
  --brand-l:oklch(87% .11 168);
  --night:oklch(15.5% .024 168);
  --night2:oklch(21% .035 168);
  --glass:oklch(100% 0 0/.06);
  --glassb:oklch(100% 0 0/.13);
}

body {
  background:#fff;
}

a {
  color:var(--brand-d);
}

a:hover {
  color:var(--brand);
}

/* type */
.h1 {
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.02;
  color:var(--ink);
  font-size:clamp(46px,6.6vw,100px);
}

.h2, .cta h2, .pl h2 {
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.04;
  color:var(--ink);
}

.h2 em, .h1 em {
  color:var(--brand);
}

.lede {
  color:var(--mut);
  font-size:clamp(16.5px,1.35vw,19px);
}

.pbc h3, .cs h3, .rl h3, .tour-txt h3, .inv-panel h3, .lw h3, .fn h3, .weights h3, .mr-head h3, .st2.wide h3, .bac h3 {
  font-weight:500;
  letter-spacing:-.02em;
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  border:1px solid color-mix(in oklch,var(--brand) 55%,transparent);
  border-radius:999px;
  padding:7px 15px;
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--brand-d);
  margin-bottom:24px;
}

.eyebrow::before {
  display:none;
}

.shead.center .eyebrow {
  display:inline-flex;
}

/* buttons: pill + circle arrow */
.btn {
  border-radius:999px;
  font-weight:500;
  padding:14px 26px;
  font-size:15px;
  gap:14px;
}

.btn:has(.ar) {
  padding:7px 7px 7px 26px;
}

.btn .ar {
  width:40px;
  height:40px;
  border-radius:50%;
  background:#fff;
  color:var(--night);
  display:grid;
  place-items:center;
  font-size:16px;
  flex-shrink:0;
}

.btn-p, .btn-b {
  background:var(--night);
  color:#fff;
}

.btn-p:hover, .btn-b:hover {
  background:var(--night2);
  color:#fff;
  box-shadow:0 14px 30px -14px oklch(30% .06 168/.7);
}

.btn-g {
  background:transparent;
  color:var(--ink);
  border:1px solid var(--hair);
}

.btn-g .ar {
  background:var(--night);
  color:#fff;
}

/* nav: centered pill */
.nav .wrap {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  height:84px;
}

.nav .logo {
  justify-self:start;
}

.nav nav[aria-label="Primary"] {
  background:var(--bg2);
  border-radius:999px;
  padding:6px;
}

.nav ul {
  gap:2px;
}

.nav ul a {
  display:block;
  padding:11px 20px;
  border-radius:999px;
  color:var(--ink2);
  font-size:14.5px;
  transition:background .25s,color .25s;
}

.nav ul a:hover {
  background:#fff;
  color:var(--ink);
}

.nav-r {
  justify-self:end;
}

.nav.s {
  background:oklch(100% 0 0/.82);
}

.nav .btn:has(.ar) {
  padding:5px 5px 5px 20px;
  font-size:14px;
}

.nav .btn .ar {
  width:34px;
  height:34px;
}

.logo i {
  background:var(--night);
  border-radius:9px;
}

.logo em {
  font-family:var(--sans);
  font-style:normal;
  font-weight:500;
  color:var(--brand);
}

.prog {
  background:var(--brand);
}

@media(max-width:1020px) {
  .nav .wrap {
    grid-template-columns:1fr auto;
  }
  .nav nav[aria-label="Primary"] {
    display:none;
  }
}

/* hero: white -> mint -> forest -> night */
.hero {
  padding:150px 0 90px;
  background:linear-gradient(180deg,#fff 0%,#fff 17%,oklch(94% .028 168) 29%,oklch(80% .06 168) 40%,oklch(56% .075 168) 54%,oklch(30% .05 168) 70%,oklch(17% .028 168) 86%,var(--night) 100%);
}

.hero-top {
  display:block;
  text-align:left;
  justify-items:start;
}

.hero-top .pill {
  background:var(--bg2);
  border:0;
  box-shadow:none;
  color:var(--ink2);
}

.hero-top .pill b {
  background:var(--night);
  color:#fff;
}

.h1 {
  margin:26px 0 0;
  max-width:900px;
}

.stage {
  margin-top:64px;
  max-width:1120px;
}

.browser {
  background:oklch(100% 0 0/.28);
  border:1px solid oklch(100% 0 0/.55);
  border-radius:30px;
  padding:10px;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 60px 120px -50px oklch(15% .03 168/.6);
}

.browser .bar {
  background:transparent;
  border:0;
  height:34px;
}

.browser .bar i {
  background:oklch(100% 0 0/.7);
}

.browser .bar span {
  background:oklch(100% 0 0/.55);
  color:var(--ink2);
}

.browser .shot {
  border-radius:20px;
  overflow:hidden;
}

.float {
  background:oklch(100% 0 0/.8);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid oklch(100% 0 0/.7);
  border-radius:22px;
}

.f-ai .sp {
  background:var(--night);
}

.hero-bot {
  text-align:center;
  margin-top:90px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-bot .hero-sub {
  color:oklch(93% .015 168);
  max-width:640px;
  font-size:clamp(17px,1.5vw,20.5px);
}

.hero-bot .hero-cta {
  margin:34px 0 16px;
}

.hero-bot .btn-p {
  background:#fff;
  color:var(--night);
}

.hero-bot .btn-p .ar {
  background:var(--night);
  color:#fff;
}

.hero-bot .btn-p:hover {
  background:var(--brand-l);
  color:var(--night);
}

.hero-bot .btn-g {
  color:#fff;
  border-color:oklch(100% 0 0/.35);
}

.hero-bot .btn-g .ar {
  background:#fff;
  color:var(--night);
}

.hero-bot .btn-g:hover {
  border-color:#fff;
  color:#fff;
}

.hero-bot .hero-note {
  color:oklch(78% .03 168);
}

.trust {
  margin-top:80px;
}

.trust p {
  color:oklch(75% .03 168);
  font-family:var(--sans);
  letter-spacing:.16em;
  font-weight:500;
}

.trust .chip {
  background:var(--glass);
  border-color:var(--glassb);
  color:oklch(90% .02 168);
}

.trust .chip::before {
  background:var(--brand-l);
}

@media(max-width:1100px) {
  .hero-bot {
    margin-top:100px;
  }
}

/* sections */
section {
  padding:140px 0;
}

@media(max-width:720px) {
  section {
    padding:88px 0;
  }
}

.tint {
  background:#fff;
  border:0;
}

.tint::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,oklch(86% .012 168) 1.1px,transparent 1.5px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 45%,#000 10%,transparent 75%);
  mask-image:radial-gradient(75% 65% at 50% 45%,#000 10%,transparent 75%);
  opacity:.7;
  pointer-events:none;
}

.tint>.wrap {
  position:relative;
  z-index:1;
}

#what {
  background:#fff;
}

/* cards: big radius, soft shadow, hairline */
.pbc, .cs, .rl, .fit, .st2, .lw, .mr, .gt, .vs, .inv-panel, .wi-card, .rx-view, .tour-img, .pview, .bac, .lc, .gate, .more, .rmore-in {
  border-radius:30px;
}

.pbc, .cs, .rl:not(.main), .fit, .st2, .lw, .mr:not(.mr-cta), .gt, .vs, .inv-panel, .wi-card, .rx-view, .tour-img {
  background:#fff;
  border:1px solid var(--hair);
  box-shadow:0 1px 0 oklch(100% 0 0) inset,0 30px 60px -44px oklch(25% .05 168/.35);
}

.pbv, .csv, .fv, .sv, .rv2, .mr-v, .wi-ic {
  background:linear-gradient(160deg,var(--bg2),#fff);
  border-radius:22px;
}

.mr-img {
  border-radius:20px;
}

.rx-view, .tour-img, .pview {
  background:linear-gradient(165deg,var(--brand-w),#fff 60%);
}

.rx-i.on {
  border-color:var(--hair);
  box-shadow:0 20px 40px -30px oklch(25% .05 168/.4);
}

.rx-full {
  background:var(--night);
}

.tt.on {
  background:var(--night);
  border-color:var(--night);
}

.tt {
  border-radius:999px;
  background:var(--bg2);
  border-color:transparent;
}

.inv-nav button.on {
  background:var(--night);
}

.rl.main, .mr-cta, .rmore-in {
  background:var(--night) radial-gradient(circle,oklch(100% 0 0/.07) 1px,transparent 1.4px) 0 0/18px 18px;
  border-color:var(--night);
}

.rl.main li {
  background:var(--glass);
}

.mr-c, .rx-i .q, .cs .k, .rl .k, .lw .k, .pbc .n, .fn .k {
  font-family:var(--sans);
  letter-spacing:.12em;
  font-weight:500;
}

/* status-pill feel for small tags */
.lw .k, .cs .k, .rl .k, .mr-c {
  display:inline-flex;
  align-self:flex-start;
  padding:5px 11px;
  border-radius:999px;
  background:var(--bg2);
  font-size:10.5px;
}

.rl.main .k, .mr-cta .mr-c {
  background:var(--glass);
}

.cs>.k {
  margin-top:6px;
}

/* what-is hub */
.wi-hub {
  background:var(--night);
  border-radius:32px;
}

.wi-hub::after {
  background:linear-gradient(170deg,var(--night2),var(--night));
  border-radius:30.5px;
}

.hub-ring {
  opacity:.65;
}

/* engine: night -> forest band */
.engine {
  background:linear-gradient(180deg,var(--night) 0%,oklch(19% .032 168) 45%,oklch(27% .05 168) 100%);
  border-radius:40px;
  margin:0 16px;
}

.engine::before {
  background:radial-gradient(circle,oklch(100% 0 0/.06) 1px,transparent 1.4px) 0 0/22px 22px;
  opacity:1;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);
}

.engine .h2 {
  color:#fff;
}

.engine .h2 em {
  color:var(--brand-l);
}

.engine .eyebrow {
  color:var(--brand-l);
  border-color:oklch(87% .11 168/.45);
}

.engine .lede {
  color:oklch(80% .02 168);
}

.wb .t i {
  background:linear-gradient(90deg,var(--brand),var(--brand-l));
}

.diag {
  border-color:oklch(100% 0 0/.16);
  border-style:solid;
  border-radius:28px;
  background:var(--glass);
}

/* glass stack (engine) */
.stk {
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px minmax(0,1fr);
  gap:28px;
  align-items:center;
}

.sk-col {
  display:grid;
  gap:22px;
}

.sk-col.r {
  text-align:right;
}

.sk-col.r .gchips {
  justify-content:flex-end;
}

.sk-c {
  position:relative;
  padding:26px 28px;
  border-radius:28px;
  background:linear-gradient(160deg,oklch(100% 0 0/.08),oklch(100% 0 0/.02));
  border:1px solid var(--glassb);
  backdrop-filter:blur(6px);
  display:grid;
  gap:8px;
}

.sk-c .k {
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-l);
  font-weight:500;
}

.sk-c h3 {
  font-size:20px;
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.2;
  color:#fff;
}

.sk-c p {
  font-size:14px;
  color:oklch(80% .02 168);
}

.sk-n {
  position:absolute;
  top:22px;
  right:24px;
  font-size:12px;
  color:oklch(100% 0 0/.35);
  font-variant-numeric:tabular-nums;
}

.sk-col.r .sk-n {
  right:auto;
  left:24px;
}

.sk-2, .sk-3 {
  background:linear-gradient(160deg,oklch(87% .11 168/.16),oklch(100% 0 0/.03));
  border-color:oklch(87% .11 168/.32);
}

.sk-v {
  position:relative;
  height:440px;
  display:grid;
  place-items:center;
}

.pls {
  position:relative;
  width:300px;
  height:400px;
}

.pls i {
  position:absolute;
  left:50%;
  width:210px;
  height:210px;
  margin-left:-105px;
  border-radius:40px;
  transform:rotateX(58deg) rotateZ(45deg);
  transition:top .8s var(--ease);
}

.pls .p1 {
  top:20px;
  background:linear-gradient(135deg,oklch(96% .03 168/.85),oklch(86% .07 168/.45));
  border:1.5px solid oklch(100% 0 0/.75);
  box-shadow:inset 0 0 24px oklch(100% 0 0/.35);
}

.pls .p2 {
  top:95px;
  background:linear-gradient(135deg,oklch(84% .13 168/.85),oklch(62% .12 168/.55));
  border:1.5px solid oklch(90% .1 168/.8);
  box-shadow:0 0 60px oklch(75% .14 168/.45),inset 0 0 30px oklch(100% 0 0/.25);
}

.pls .p2 b {
  position:absolute;
  inset:30%;
  border-radius:50%;
  background:oklch(95% .06 168/.7);
  box-shadow:0 0 30px oklch(90% .12 168);
}

.pls .p3 {
  top:170px;
  background:linear-gradient(135deg,oklch(26% .035 168),oklch(10% .02 168));
  border:1.5px solid oklch(60% .08 168/.6);
  box-shadow:0 30px 50px -20px #000;
}

.pls .p4 {
  top:245px;
  background:linear-gradient(135deg,oklch(80% .06 168/.45),oklch(55% .06 168/.2));
  border:1.5px solid oklch(100% 0 0/.35);
}

.stk:hover .p1 {
  top:0;
}

.stk:hover .p2 {
  top:85px;
}

.stk:hover .p3 {
  top:170px;
}

.stk:hover .p4 {
  top:255px;
}

@media(max-width:1080px) {
  .stk {
    grid-template-columns:1fr;
    gap:20px;
  }
  .sk-v {
    order:-1;
    height:400px;
    overflow:visible;
  }
  .pls {
    transform:scale(.82);
    transform-origin:top center;
    margin-top:-10px;
  }
  .sk-col.r {
    text-align:left;
  }
  .sk-col.r .gchips {
    justify-content:flex-start;
  }
  .sk-col.r .sk-n {
    left:auto;
    right:24px;
  }
}

/* compliance, before/after accents */
.c.x, .ok .res {
}

.vs-r .p.af {
  background:var(--night);
}

/* pilot: night -> mint gradient */
.pl {
  background:linear-gradient(160deg,var(--night) 0%,oklch(20% .034 168) 38%,oklch(38% .075 168) 72%,oklch(68% .09 168) 100%);
  border-radius:40px;
}

.pl::after {
  background:radial-gradient(circle,oklch(100% 0 0/.06) 1px,transparent 1.4px) 0 0/20px 20px;
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 60%);
  mask-image:linear-gradient(160deg,#000,transparent 60%);
}

.pl h2 {
  color:#fff;
}

.pl h2 em {
  color:var(--brand-l);
}

.pl-badge {
  background:transparent;
  border:1px solid oklch(87% .11 168/.5);
  color:var(--brand-l);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}

.pl-chips span {
  background:var(--glass);
  border:1px solid var(--glassb);
}

.pl-f {
  border-radius:30px;
}

.pl-i {
  border-radius:16px;
}

.pl-btn {
  border-radius:999px;
  background:var(--night);
  justify-content:space-between;
  padding:7px 7px 7px 26px;
}

.pl-btn .ar {
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  color:var(--night);
  display:grid;
  place-items:center;
}

/* faq */
.faq summary {
  font-weight:500;
  letter-spacing:-.015em;
}

.faq details[open] summary i {
  background:var(--night);
  border-color:var(--night);
}

/* footer: night */
footer {
  background:var(--night);
  color:oklch(80% .02 168);
  border-radius:40px 40px 0 0;
  margin-top:40px;
}

footer .logo {
  color:#fff;
}

footer .logo i {
  background:var(--brand);
}

footer .logo em {
  color:var(--brand-l);
}

.fgrid {
  border-color:var(--glassb);
}

.fgrid p, .fbot {
  color:oklch(70% .02 168);
}

.fgrid .fh {
  color:var(--brand-l);
  font-family:var(--sans);
  letter-spacing:.14em;
}

.fgrid li a, .fgrid address, .fgrid address a {
  color:oklch(88% .015 168);
}

.fgrid li a:hover, .fgrid address a:hover {
  color:#fff;
}

.mcta {
  background:var(--night);
}

@media(max-width:560px) {
  .sk-v {
    height:360px;
  }
  .pls {
    transform:scale(.72);
  }
}


/* ==========================================================================
   Hero Section: animated roster mock-up
   ========================================================================== */

.hx-stage {
  position:relative;
  max-width:1180px;
  margin:64px auto 0;
  perspective:none;
}

.hx-deco {
  position:absolute;
  width:300px;
  height:300px;
  border-radius:64px;
  transform:rotateX(58deg) rotateZ(45deg);
  pointer-events:none;
  z-index:0;
}

.hx-deco.d1 {
  right:-90px;
  top:-120px;
  background:linear-gradient(135deg,oklch(97% .03 168/.9),oklch(84% .08 168/.35));
  border:1.5px solid oklch(100% 0 0/.8);
  box-shadow:inset 0 0 40px oklch(100% 0 0/.5);
}

.hx-deco.d2 {
  left:-110px;
  bottom:-40px;
  width:340px;
  height:340px;
  background:linear-gradient(135deg,oklch(70% .1 168/.55),oklch(40% .07 168/.25));
  border:1.5px solid oklch(90% .08 168/.45);
  filter:blur(1px);
}

@media(max-width:900px) {
  .hx-deco {
    display:none;
  }
}

.hx-frame {
  position:relative;
  z-index:1;
  border-radius:34px;
  padding:12px;
  background:linear-gradient(160deg,oklch(100% 0 0/.55),oklch(100% 0 0/.18));
  border:1px solid oklch(100% 0 0/.7);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 80px 140px -60px oklch(14% .03 168/.75),0 1px 0 oklch(100% 0 0/.8) inset;
  opacity:0;
  transform:translateY(40px) scale(.97);
  animation:hxIn 1.4s .45s var(--ease) forwards;
}

@keyframes hxIn {
  to {
    opacity:1;
    transform:none;
  }
}

.hx {
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  font-size:13px;
  color:var(--ink);
}

/* toolbar */
.hx-tb {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  border-bottom:1px solid var(--hair2);
}

.hx-unit {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:14.5px;
  letter-spacing:-.01em;
  white-space:nowrap;
}

.hx-unit i {
  width:30px;
  height:30px;
  border-radius:10px;
  background:var(--brand-w);
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:11px;
  font-weight:700;
  color:var(--brand-d);
}

.hx-unit small {
  display:block;
  font-weight:500;
  font-size:11.5px;
  color:var(--mut);
}

.hx-mo {
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:8px;
  font-weight:600;
  font-size:13.5px;
  white-space:nowrap;
}

.hx-mo span {
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--hair);
  display:grid;
  place-items:center;
  color:var(--mut);
  font-size:11px;
}

.hx-seg {
  display:flex;
  background:var(--bg2);
  border-radius:999px;
  padding:3px;
  margin-left:auto;
}

.hx-seg b {
  padding:6px 14px;
  border-radius:999px;
  font-weight:500;
  font-size:12.5px;
  color:var(--mut);
}

.hx-seg b.on {
  background:#fff;
  color:var(--ink);
  box-shadow:0 2px 6px -2px oklch(20% .03 168/.2);
}

.hx-btn {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 16px 9px 12px;
  border-radius:999px;
  background:var(--night);
  color:#fff;
  font-weight:600;
  font-size:12.5px;
  white-space:nowrap;
  transition:background .4s,box-shadow .4s;
}

.hx-btn i {
  width:18px;
  height:18px;
  border-radius:50%;
  background:conic-gradient(from 0deg,var(--brand-l),oklch(70% .12 200),var(--brand-l));
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:10px;
  color:var(--night);
}

.hx.run .hx-btn {
  box-shadow:0 0 0 4px oklch(87% .11 168/.35),0 0 30px oklch(75% .14 168/.5);
}

.hx.run .hx-btn i {
  animation:spin 1.4s linear infinite;
}

.hx.fin .hx-btn {
  background:var(--brand);
}

/* grid */
.hx-main {
  position:relative;
  padding:6px 8px 0 20px;
  min-width:0;
}

.hx-g {
  position:relative;
  display:grid;
  grid-template-columns:186px repeat(14,minmax(0,1fr)) 70px;
  align-items:center;
}

.hx-h {
  height:48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:12.5px;
  font-weight:600;
  line-height:1.15;
  color:var(--ink);
  border-bottom:1px solid var(--hair2);
}

.hx-h small {
  font-size:10px;
  font-weight:500;
  color:var(--mut);
}

.hx-h.we {
  color:var(--brand-d);
}

.hx-h.we small {
  color:var(--brand);
}

.hx-h.nm {
  align-items:flex-start;
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--mut);
  font-weight:500;
}

.hx-h.hr {
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--mut);
  font-weight:500;
}

.hx-n {
  height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--hair2);
  min-width:0;
}

.hx-av {
  width:32px;
  height:32px;
  border-radius:50%;
  flex-shrink:0;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:600;
  color:#fff;
}

.hx-n b {
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.005em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hx-n small {
  display:block;
  font-size:11px;
  color:var(--mut);
}

.hx-c {
  height:52px;
  display:grid;
  place-items:center;
  border-bottom:1px solid var(--hair2);
  position:relative;
}

.hx-c.we {
  background:oklch(98% .012 168);
}

.hx-c em {
  width:calc(100% - 8px);
  max-width:40px;
  height:30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:11.5px;
  font-weight:600;
  border:1px dashed var(--hair);
  color:transparent;
  transition:background .3s,border-color .3s,color .3s;
}

.hx-c.on em {
  border:0;
  animation:hxPop .5s var(--ease) both;
}

@keyframes hxPop {
  0% {
    transform:scale(.5);
    opacity:0;
  }
  60% {
    transform:scale(1.08);
  }
  100% {
    transform:none;
    opacity:1;
  }
}

.hx-c.s-D em {
  background:oklch(94.5% .05 168);
  color:oklch(36% .08 168);
}

.hx-c.s-E em {
  background:oklch(94.5% .035 235);
  color:oklch(42% .1 245);
}

.hx-c.s-N em {
  background:oklch(25% .04 168);
  color:oklch(88% .11 168);
}

.hx-c.s-O em {
  background:transparent;
  color:var(--mut);
}

.hx-c.s-O em::before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--hair);
}

.hx-c.s-O em {
  font-size:0;
}

.hx-c.s-L em {
  background:oklch(95.5% .05 80);
  color:oklch(50% .11 65);
}

.hx-c.bad em {
  background:var(--red-w)!important;
  color:var(--red)!important;
  box-shadow:0 0 0 2px var(--red);
  animation:hxShake .45s;
}

@keyframes hxShake {
  25% {
    transform:translateX(-3px);
  }
  75% {
    transform:translateX(3px);
  }
}

.hx-c.fix em {
  box-shadow:0 0 0 2px var(--brand),0 0 18px oklch(75% .14 168/.7);
}

.hx-tip {
  position:absolute;
  z-index:5;
  bottom:calc(100% - 4px);
  left:50%;
  transform:translate(-50%,6px);
  white-space:nowrap;
  font-size:11.5px;
  font-weight:600;
  padding:7px 11px;
  border-radius:10px;
  background:var(--night);
  color:#fff;
  opacity:0;
  transition:opacity .3s,transform .3s var(--ease);
  pointer-events:none;
  box-shadow:0 10px 24px -10px oklch(10% .02 168/.6);
}

.hx-tip.red {
  background:var(--red);
}

.hx-tip::after {
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  margin-left:-5px;
  border:5px solid transparent;
  border-top-color:inherit;
  border-top-color:var(--night);
}

.hx-tip.red::after {
  border-top-color:var(--red);
}

.hx-tip.show {
  opacity:1;
  transform:translate(-50%,0);
}

.hx-hr {
  height:52px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  border-bottom:1px solid var(--hair2);
  padding-right:8px;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.hx-hr p {
  width:30px;
  height:5px;
  border-radius:3px;
  background:var(--hair);
  overflow:hidden;
}

.hx-hr p i {
  display:block;
  height:100%;
  width:0;
  background:var(--brand);
  border-radius:2px;
  transition:width .6s var(--ease);
}

.hx-hr .ck {
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-size:9px;
  display:grid;
  place-items:center;
  transform:scale(0);
  transition:transform .35s var(--ease);
}

.hx-hr.pass .ck {
  transform:none;
}

.hx-hr span {
  opacity:0;
  transition:opacity .4s;
}

.hx-hr.f span {
  opacity:1;
}

.hx-beam {
  position:absolute;
  top:48px;
  bottom:0;
  width:70px;
  margin-left:-35px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,oklch(87% .11 168/.55),transparent);
  opacity:0;
  transition:opacity .3s;
}

.hx-beam::after {
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  margin-left:-1px;
  background:var(--brand);
  box-shadow:0 0 14px var(--brand-l);
}

.hx.run .hx-beam {
  opacity:1;
}

.hx-ft {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 20px;
  border-top:1px solid var(--hair2);
  font-size:11.5px;
  color:var(--mut);
  flex-wrap:wrap;
}

.hx-ft span {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.hx-ft i {
  width:14px;
  height:10px;
  border-radius:3px;
}

.hx-ft .r {
  margin-left:auto;
}

/* safety panel */
.hx-p {
  border-left:1px solid var(--hair2);
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:linear-gradient(180deg,oklch(98.5% .008 168),#fff);
}

.hx-p .hx-pt {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.005em;
}

.hx-p .hx-pt span {
  font-size:11px;
  font-weight:600;
  color:var(--brand-d);
  background:var(--brand-w);
  padding:3px 9px;
  border-radius:999px;
  font-variant-numeric:tabular-nums;
}

.hx-gl {
  display:flex;
  flex-direction:column;
  gap:3px;
}

.hx-gi {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:10px;
  font-size:12.5px;
  color:var(--ink2);
  transition:background .3s;
}

.hx-gi i {
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid var(--hair);
  flex-shrink:0;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:9px;
  color:#fff;
  font-weight:700;
  transition:all .3s var(--ease);
}

.hx-gi.pass i {
  background:var(--brand);
  border-color:var(--brand);
}

.hx-gi.pass i::before {
  content:"✓";
}

.hx-gi.bad {
  background:var(--red-w);
  color:var(--red);
}

.hx-gi.bad i {
  background:var(--red);
  border-color:var(--red);
}

.hx-gi.bad i::before {
  content:"!";
}

.hx-gi.act {
  background:var(--bg2);
}

.hx-gi em {
  margin-left:auto;
  font-style:normal;
  font-size:10.5px;
  font-weight:600;
}

.hx-sum {
  margin-top:auto;
  border-radius:16px;
  padding:14px;
  background:var(--night);
  color:#fff;
  display:grid;
  gap:2px;
}

.hx-sum small {
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--brand-l);
  font-weight:500;
}

.hx-sum b {
  font-size:28px;
  font-weight:600;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}

.hx-sum span {
  font-size:11.5px;
  color:oklch(80% .02 168);
}

/* floating */
.hx-ai, .hx-toast {
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px 14px 14px;
  border-radius:22px;
  background:oklch(100% 0 0/.86);
  border:1px solid oklch(100% 0 0/.9);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 60px -26px oklch(14% .03 168/.6);
}

.hx-ai {
  left:-34px;
  bottom:-46px;
  width:300px;
  opacity:0;
  animation:fl 1s 1.6s var(--ease) forwards;
}

.hx-sp {
  width:42px;
  height:42px;
  border-radius:14px;
  background:var(--night);
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.hx-sp i {
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid oklch(100% 0 0/.25);
  border-top-color:var(--brand-l);
  animation:spin 1s linear infinite;
}

.hx-ai div {
  flex:1;
  min-width:0;
}

.hx-ai small {
  font-size:10px;
  letter-spacing:.12em;
  color:var(--mut);
  font-weight:500;
}

.hx-ai b {
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin:2px 0 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hx-m {
  height:5px;
  border-radius:3px;
  background:var(--hair2);
  overflow:hidden;
}

.hx-m i {
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-l));
  border-radius:3px;
  transition:width .8s var(--ease);
}

.hx-toast {
  right:-28px;
  bottom:-40px;
  opacity:0;
  transform:translateY(16px) scale(.96);
  transition:opacity .5s,transform .6s var(--ease);
}

.hx-toast.show {
  opacity:1;
  transform:none;
}

.hx-toast>span {
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
  flex-shrink:0;
}

.hx-toast b {
  display:block;
  font-size:13.5px;
  font-weight:600;
}

.hx-toast small {
  font-size:11.5px;
  color:var(--mut);
}

/* responsive */
@media(max-width:1100px) {
  .hx {
    grid-template-columns:1fr;
  }
  .hx-p {
    border-left:0;
    border-top:1px solid var(--hair2);
    display:grid;
    grid-template-columns:1fr 200px;
    gap:14px;
  }
  .hx-p .hx-pt {
    grid-column:1/-1;
  }
  .hx-gl {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .hx-sum {
    margin:0;
  }
}

@media(max-width:820px) {
  .hx-g {
    grid-template-columns:150px repeat(7,minmax(0,1fr)) 56px;
  }
  .hx-g .x8 {
    display:none;
  }
  .hx-seg, .hx-mo {
    display:none;
  }
  .hx-p {
    grid-template-columns:1fr;
  }
  .hx-gl {
    grid-template-columns:1fr 1fr;
  }
  .hx-ai {
    left:10px;
    bottom:-60px;
  }
  .hx-toast {
    display:none;
  }
}

@media(max-width:560px) {
  .hx-g {
    grid-template-columns:112px repeat(5,minmax(0,1fr)) 0;
  }
  .hx-g .x6, .hx-g .hx-hr, .hx-g .hx-h.hr {
    display:none;
  }
  .hx-n small, .hx-av {
    display:none;
  }
  .hx-main {
    padding-left:12px;
  }
  .hx-unit small {
    display:none;
  }
  .hx-btn {
    padding:8px 12px 8px 10px;
  }
  .hx-ft .r {
    display:none;
  }
  .hx-gl {
    grid-template-columns:1fr;
  }
  .hx-ai {
    width:auto;
    right:10px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hx-frame, .hx-ai {
    opacity:1;
    transform:none;
    animation:none;
  }
}

.hx-ai {
  bottom:-58px;
}

.hx-toast {
  bottom:-52px;
}

.hx-gi em {
  white-space:nowrap;
}

.hx-ai {
  bottom:auto;
  top:calc(100% + 22px);
  left:24px;
}

.hx-toast {
  bottom:auto;
  top:calc(100% + 22px);
  right:24px;
}

.hx-stage {
  margin-bottom:110px;
}

@media(max-width:1100px) {
  .hx-gl {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hx-gi {
    white-space:nowrap;
  }
}

@media(max-width:820px) {
  .hx-ai {
    left:12px;
    right:12px;
    width:auto;
  }
}

@property --v {
  syntax:'<number>';
  inherits:true;
  initial-value:0;
}

.hx-g {
  grid-template-columns:186px repeat(14,minmax(0,1fr)) 62px;
}

.hx-h.hr {
  align-items:center;
  font-size:10.5px;
  letter-spacing:.1em;
}

.hx-h.hr small {
  letter-spacing:0;
  font-size:10px;
}

.hx-hr {
  justify-content:center;
  padding:0;
  --v:0;
  transition:--v 1s var(--ease);
}

.hx-hr .rg {
  position:relative;
  width:38px;
  height:38px;
  border-radius:50%;
  background:conic-gradient(from -90deg,var(--brand) calc(var(--v)*1%),var(--hair2) 0);
  display:flex;
  align-items:baseline;
  justify-content:center;
  padding-top:11px;
  opacity:.35;
  transition:opacity .4s;
}

.hx-hr .rg::before {
  content:"";
  position:absolute;
  inset:3.5px;
  border-radius:50%;
  background:#fff;
}

.hx-hr .rg b, .hx-hr .rg small {
  position:relative;
  font-variant-numeric:tabular-nums;
  line-height:1;
}

.hx-hr .rg b {
  font-size:12px;
  font-weight:700;
  letter-spacing:-.02em;
}

.hx-hr .rg small {
  font-size:8.5px;
  font-weight:600;
  color:var(--mut);
  margin-left:1px;
}

.hx-hr.f .rg {
  opacity:1;
}

.hx-hr .ck {
  position:absolute;
  right:-4px;
  bottom:-3px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-style:normal;
  font-size:8px;
  font-weight:700;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  transform:scale(0);
  transition:transform .4s var(--ease) .5s;
}

.hx-hr.pass .ck {
  transform:none;
}

@media(max-width:820px) {
  .hx-g {
    grid-template-columns:150px repeat(7,minmax(0,1fr)) 56px;
  }
}


/* ==========================================================================
   Polish: section headers, reveal transitions, hover effects, back-to-top
   ========================================================================== */

/* two-column section headers (reference: "A Suite Built for…") */
@media(min-width:1000px) {
  .shead:not(.center) {
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:72px;
    align-items:end;
  }
  .shead:not(.center)>.eyebrow {
    grid-column:1;
    justify-self:start;
  }
  .shead:not(.center)>.h2 {
    grid-column:1;
  }
  .shead:not(.center)>.lede {
    grid-column:2;
    grid-row:2;
    margin:0;
    padding-bottom:8px;
    max-width:520px;
  }
}

/* softer, deeper reveal */
.rv {
  opacity:0;
  transform:translateY(36px);
  filter:blur(10px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease);
}

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

.shead .h2 {
  transition:letter-spacing 1.4s var(--ease);
}

.shead.rv:not(.in) .h2 {
  letter-spacing:-.01em;
}

/* buttons: circle grows on hover */
.btn .ar {
  transition:transform .35s var(--ease),background .3s,color .3s;
}

.btn:hover .ar {
  transform:translateX(3px) scale(1.06);
}

.btn-p:hover .ar, .btn-b:hover .ar {
  background:var(--brand-l);
}

/* nav scrollspy */
.nav ul a.on {
  background:#fff;
  color:var(--ink);
  box-shadow:0 2px 8px -3px oklch(20% .03 168/.25);
}

/* card hover polish */
.pbc, .cs, .rl, .fit, .st2, .lw, .mr, .wi-card, .sk-c {
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}

.cs:hover, .rl:not(.main):hover, .fit:hover, .st2:hover, .lw:hover {
  transform:translateY(-5px);
  box-shadow:0 40px 70px -46px oklch(25% .06 168/.5);
  border-color:color-mix(in oklch,var(--brand) 28%,var(--hair));
}

.sk-c:hover {
  transform:translateY(-3px);
  border-color:oklch(87% .11 168/.45);
}

/* glass stack gentle float */
@keyframes plf {
  50% {
    translate:0 -6px;
  }
}

.pls i {
  animation:plf 6s ease-in-out infinite;
}

.pls .p2 {
  animation-delay:-1.5s;
}

.pls .p3 {
  animation-delay:-3s;
}

.pls .p4 {
  animation-delay:-4.5s;
}

.hx-deco {
  animation:plf 8s ease-in-out infinite;
}

.hx-deco.d2 {
  animation-delay:-4s;
}

/* back to top (reference) */
.totop {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:80;
  width:52px;
  height:52px;
  border-radius:50%;
  background:oklch(100% 0 0/.85);
  border:1px solid var(--hair);
  backdrop-filter:blur(12px);
  display:grid;
  place-items:center;
  color:var(--ink);
  font-size:18px;
  box-shadow:0 14px 30px -16px oklch(20% .04 168/.5);
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:all .4s var(--ease);
}

.totop.on {
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.totop:hover {
  background:var(--night);
  color:#fff;
  border-color:var(--night);
}

@media(max-width:760px) {
  .totop {
    display:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .rv {
    filter:none;
  }
  .pls i, .hx-deco {
    animation:none;
  }
}


/* ==========================================================================
   PHP conversion additions
   ========================================================================== */

/* Visible focus states */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero-bot :focus-visible, .engine :focus-visible, .pl :focus-visible, footer :focus-visible {
  outline-color: var(--brand-l);
}

/* Content stays visible when JavaScript is off */
html:not(.js) .rv {
  opacity: 1;
  transform: none;
  filter: none;
}
html:not(.js) .wb .t i {
  width: var(--w);
}

/* Tabs: panels stack when JavaScript is off, one at a time when it is on */
.tour-panels, .inv-panels {
  display: grid;
  gap: 28px;
}
.js .tour-panel:not(.on), .js .inv-panel:not(.on), .js .hw-p:not(.on) {
  display: none;
}
html:not(.js) .tour-tabs, html:not(.js) .inv-nav, html:not(.js) .hw-nav, html:not(.js) .hw-ctrl {
  display: none;
}
html:not(.js) .hw-p {
  margin-bottom: 28px;
}

/* Image buttons (open full-size preview) */
button.scr {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

/* Pilot form labels (was span, now label) */
.pl-i label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
  cursor: pointer;
}

/* Lightbox uses the hidden attribute when closed */
.lb[hidden] {
  display: none;
}

/* Hero safety panel title (was h5) */
.hx-p .hx-pt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
}