/* ==========================================================================
   RVNS Home — Claude Design integration layer.
   Faithful production re-creation of the approved "Travel Nurse Contract
   Intelligence" homepage (design_handoff_rvns_v1 / RV Nurse Systems.dc.html).
   Built on the LEOS token layer declared in contract-intelligence.css
   (--leos-void / cyan / violet / emerald / amber / red / magenta / edge).
   No external requests. Maintainable static CSS — no bundler runtime.
   ========================================================================== */

/* ---- ground: deep void with the intelligence glow (matches approved) ---- */
body.home-ci{
  /* Both intelligence glows are unchanged. Their base was `var(--leos-void)` (opaque #070912),
     which painted over html's wallpaper; it is now the SAME colour at 65% so the wallpaper reads
     through while body text keeps >=4.5:1 contrast. See contract-intelligence.css for the
     measurement behind 65%. */
  background:
    radial-gradient(1100px 620px at 92% -10%, color-mix(in srgb,var(--leos-violet) 15%,transparent), transparent 60%),
    radial-gradient(760px 460px at 4% 8%, color-mix(in srgb,var(--leos-cyan) 10%,transparent), transparent 66%);
  color:var(--color-text);
}

/* ============================ PUBLIC NAV ================================= */
/* §2.1 — sticky, blur, void 88%. Drop, don't shrink. */
.ci-nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--leos-void) 88%, transparent);
  border-bottom:1px solid var(--leos-edge);
}
.ci-nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--pad);
  display:flex; align-items:center; gap:26px;
}
.ci-brand{
  display:inline-flex; align-items:center; gap:11px; flex-shrink:0;
  font-weight:600; font-size:15.5px; letter-spacing:-.01em; color:var(--color-text);
  text-decoration:none;
}
.ci-orb{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; position:relative;
  background:radial-gradient(circle at 38% 34%, #fff 0%, var(--leos-cyan) 30%, var(--leos-violet) 70%, #2a2f6b 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--leos-cyan) 40%,transparent), 0 0 18px color-mix(in srgb,var(--leos-cyan) 45%,transparent);
  animation:rv-core 6s ease-in-out infinite;
}
@keyframes rv-core{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.ci-nav-links{
  display:flex; align-items:center; gap:22px; margin-right:auto;
  overflow-x:auto; scrollbar-width:none;
}
.ci-nav-links::-webkit-scrollbar{display:none}
.ci-nav-links a{
  flex-shrink:0; color:var(--leos-label); text-decoration:none; font-size:14px;
  padding:6px 2px; transition:color .16s ease; white-space:nowrap;
}
.ci-nav-links a:hover,.ci-nav-links a[aria-current="page"]{color:var(--color-text)}
.ci-nav-links a[aria-current="page"]{position:relative}
.ci-nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--leos-cyan),var(--leos-violet));
}
.ci-fy-pill{
  flex-shrink:0; display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:var(--radius-pill); white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--leos-emerald) 34%,transparent);
  background:color-mix(in srgb,var(--leos-emerald) 9%,transparent);
  color:var(--leos-emerald); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; transition:border-color .16s ease, background .16s ease;
}
a.ci-fy-pill:hover{ border-color:var(--leos-emerald); background:color-mix(in srgb,var(--leos-emerald) 16%,transparent); }
a.ci-fy-pill:focus-visible{ outline:2px solid var(--leos-emerald); outline-offset:2px; }
.ci-fy-pill::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--leos-emerald);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--leos-emerald) 60%,transparent);
  animation:rv-ring 3s ease-out infinite;
}
@keyframes rv-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--leos-emerald) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
.ci-nav .btn-check{
  flex-shrink:0; white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--leos-cyan) 50%,transparent);
  background:color-mix(in srgb,var(--leos-cyan) 10%,transparent);
  color:var(--color-text); padding:9px 16px; border-radius:var(--radius-pill);
  font-size:14px; text-decoration:none; transition:border-color .16s ease, transform .16s ease;
}
.ci-nav .btn-check:hover{border-color:var(--leos-cyan); transform:translateY(-1px)}

/* drop, don't shrink (§6 thresholds) */
@media (max-width:1120px){ .ci-fy-pill{display:none} }
@media (max-width:1010px){ .ci-nav .btn-check{display:none} }
@media (max-width:760px){ .ci-brand-word{display:none} }

/* ============================ HERO ====================================== */
.ci-home-hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(52px,7vw,96px) var(--pad) clamp(40px,5vw,64px);
  display:grid; grid-template-columns:minmax(min(520px,100%),1.05fr) minmax(min(400px,100%),.95fr);
  gap:clamp(32px,4vw,64px); align-items:center;
}
.ci-home-hero .ci-kicker{margin-bottom:18px}
.ci-home-hero h1{
  font-size:clamp(38px,5.4vw,64px); line-height:1.02; letter-spacing:-.03em; font-weight:500;
  max-width:15ch; margin:0 0 22px;
}
.ci-home-hero h1 .grad{
  background:linear-gradient(104deg,var(--leos-cyan) 2%,#fff 40%,var(--leos-magenta) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ci-lede{font-size:clamp(16px,1.4vw,18.5px); line-height:1.62; color:color-mix(in srgb,var(--color-text) 82%,transparent); max-width:52ch; margin:0}
.ci-lede b{color:var(--color-text); font-weight:600}
.ci-free{margin:20px 0 0; font-size:14.5px; color:var(--leos-label)}
.ci-hero-actions{display:flex; gap:13px; flex-wrap:wrap; margin:30px 0 22px}
.ci-trust{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:12.5px; color:var(--leos-label)}
.ci-trust span{display:inline-flex; align-items:center; gap:8px}
.ci-trust span::before{content:"■"; color:var(--leos-cyan); font-size:8px}
.ci-trust span:nth-child(2)::before{color:var(--leos-violet)}
.ci-trust span:nth-child(3)::before{color:var(--leos-emerald)}

/* buttons — intelligence variants */
.btn-cyan{
  display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 22px;
  border-radius:var(--radius-pill); text-decoration:none; font-size:15px; font-weight:600;
  color:#04121a; border:1px solid transparent;
  background:linear-gradient(120deg,var(--leos-cyan),#7ee7ff);
  box-shadow:0 10px 30px color-mix(in srgb,var(--leos-cyan) 22%,transparent);
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn-cyan:hover{transform:translateY(-2px); box-shadow:0 16px 40px color-mix(in srgb,var(--leos-cyan) 30%,transparent)}
.btn-ghost{
  display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 20px;
  border-radius:var(--radius-pill); text-decoration:none; font-size:15px; color:var(--color-text);
  border:1px solid var(--leos-edge); background:color-mix(in srgb,var(--color-surface) 30%,transparent);
  transition:border-color .16s ease, transform .16s ease;
}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--leos-cyan) 50%,transparent); transform:translateY(-2px)}

/* ---- SampleContractCard (§2.3) — the hero proof object ---- */
.sample-card{
  min-width:0; position:relative; border-radius:var(--radius-lg);
  padding:clamp(22px,2vw,28px);
  border:1px solid var(--leos-edge);
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--leos-cyan) 8%,transparent),
    color-mix(in srgb,var(--color-surface) 42%,transparent));
  box-shadow:0 26px 62px rgba(7,9,18,.55);
}
.sample-card .sc-tag{
  display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--leos-label); margin-bottom:18px;
}
.sample-card .sc-tag .dot{color:var(--leos-emerald)}
.sample-card .sc-micro{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--leos-label)}
.sample-card .sc-big{
  font-variant-numeric:tabular-nums; font-size:clamp(38px,4.6vw,48px); font-weight:500;
  letter-spacing:-.03em; margin:4px 0 4px; color:var(--color-text);
}
.sample-card .sc-sub{font-size:13px; color:var(--leos-label); margin:0 0 20px; font-variant-numeric:tabular-nums}
.split-bar{
  display:flex; height:12px; border-radius:6px; overflow:hidden; margin:0 0 18px;
  background:color-mix(in srgb,var(--color-text) 6%,transparent);
}
.split-bar span{display:block; height:100%}
.split-bar .seg-tax{background:linear-gradient(90deg,var(--leos-cyan),color-mix(in srgb,var(--leos-cyan) 70%,#2b6))}
.split-bar .seg-stip{background:linear-gradient(90deg,var(--leos-violet),var(--leos-magenta))}
.split-bar .seg-room{position:relative; background:linear-gradient(90deg,color-mix(in srgb,var(--leos-emerald) 55%,transparent),var(--leos-emerald))}
.split-bar .seg-room::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,#fff 45%,transparent) 50%,transparent 70%);
  transform:translateX(-100%); animation:rv-sweep 4.5s linear infinite;
}
@keyframes rv-sweep{to{transform:translateX(100%)}}
.sc-legend{display:grid; gap:11px; margin:0 0 18px}
.sc-legend .row{display:flex; align-items:center; justify-content:space-between; font-size:13.5px}
.sc-legend .row .lab{display:inline-flex; align-items:center; gap:9px; color:color-mix(in srgb,var(--color-text) 88%,transparent)}
.sc-legend .row .lab::before{content:""; width:9px; height:9px; border-radius:2px}
.sc-legend .row.tax .lab::before{background:var(--leos-cyan)}
.sc-legend .row.stip .lab::before{background:var(--leos-violet)}
.sc-legend .row.room .lab::before{background:var(--leos-emerald)}
.sc-legend .row .val{font-variant-numeric:tabular-nums; font-weight:600}
.sc-callout{
  display:flex; align-items:center; gap:9px; padding-top:16px; margin-top:2px;
  border-top:1px solid var(--leos-edge); color:var(--leos-emerald); font-size:14px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sc-note{margin:12px 0 0; font-size:12.5px; line-height:1.55; color:var(--leos-label)}

/* ============================ VALUE CARDS =============================== */
.ci-band{max-width:var(--maxw); margin:0 auto; padding:clamp(40px,5vw,72px) var(--pad)}
.ci-value-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:16px;
}
.value-card{
  min-width:0; position:relative; padding:26px 24px 28px; border-radius:var(--radius-lg);
  border:1px solid var(--leos-edge); overflow:hidden;
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--vc-hue,var(--leos-cyan)) 11%,transparent),
    color-mix(in srgb,var(--color-surface) 42%,transparent));
}
.value-card::before{content:""; position:absolute; left:0; top:16px; bottom:16px; width:2px;
  background:linear-gradient(180deg,var(--vc-hue,var(--leos-cyan)),transparent)}
.value-card.hue-cyan{--vc-hue:var(--leos-cyan)}
.value-card.hue-violet{--vc-hue:var(--leos-violet)}
.value-card.hue-emerald{--vc-hue:var(--leos-emerald)}
.value-card h2, .value-card h3{font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0 0 10px}
.value-card p{font-size:14.5px; line-height:1.62; color:color-mix(in srgb,var(--color-text) 80%,transparent); margin:0}

/* ============================ HOW IT WORKS ============================= */
.ci-how-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:16px; margin-top:34px}
.how-step{min-width:0; padding:24px 22px; border-radius:var(--radius-lg); border:1px solid var(--leos-edge);
  background:color-mix(in srgb,var(--color-surface) 34%,transparent)}
.how-step .num{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  font-variant-numeric:tabular-nums; font-size:14px; font-weight:600; margin-bottom:14px;
  color:var(--leos-cyan); border:1px solid color-mix(in srgb,var(--leos-cyan) 40%,transparent);
  background:color-mix(in srgb,var(--leos-cyan) 8%,transparent);
}
.how-step h3{font-size:16.5px; font-weight:600; margin:0 0 8px}
.how-step p{font-size:14px; line-height:1.6; color:color-mix(in srgb,var(--color-text) 78%,transparent); margin:0}
.ci-section-head .ci-kicker{margin-bottom:14px}
.ci-section-head h2{font-size:clamp(24px,3vw,38px); font-weight:500; letter-spacing:-.02em; max-width:22ch; margin:0}
.ci-section-head p.sub{font-size:16px; line-height:1.6; color:color-mix(in srgb,var(--color-text) 78%,transparent); max-width:60ch; margin:14px 0 0}

/* ============================ PRODUCT BRIDGE ($39) ====================== */
.ci-bridge{
  max-width:var(--maxw); margin:0 auto; padding:clamp(40px,5vw,72px) var(--pad);
  display:grid; grid-template-columns:minmax(min(440px,100%),1.2fr) minmax(min(300px,100%),.8fr);
  gap:clamp(24px,3vw,44px); align-items:start;
}
.bridge-copy h2{font-size:clamp(24px,3vw,38px); font-weight:500; letter-spacing:-.02em; margin:14px 0 12px; max-width:20ch}
.bridge-copy .sub{font-size:16px; line-height:1.65; color:color-mix(in srgb,var(--color-text) 82%,transparent); max-width:54ch}
.bridge-deliver{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:12px; margin-top:24px}
.bridge-deliver li{list-style:none; padding:16px 18px; border-radius:12px; border:1px solid var(--leos-edge);
  background:color-mix(in srgb,var(--color-surface) 34%,transparent); font-size:14px; line-height:1.5}
.bridge-deliver li b{display:block; margin-bottom:4px; font-weight:600}
.price-card{
  position:sticky; top:88px; border-radius:var(--radius-lg); padding:28px 26px;
  border:1px solid color-mix(in srgb,var(--leos-emerald) 26%,transparent);
  background:linear-gradient(155deg,color-mix(in srgb,var(--leos-emerald) 10%,transparent),color-mix(in srgb,var(--color-surface) 44%,transparent));
  box-shadow:0 26px 62px rgba(7,9,18,.55);
}
.price-card .pc-price{font-variant-numeric:tabular-nums; font-size:44px; font-weight:500; letter-spacing:-.03em}
.price-card .pc-note{font-size:12.5px; color:var(--leos-label); margin:2px 0 20px}
.price-card .btn-cyan{width:100%; justify-content:center; margin-bottom:14px}
.price-card .pc-line{display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-top:1px solid var(--leos-edge); color:color-mix(in srgb,var(--color-text) 80%,transparent)}
.price-card .pc-line .none{color:var(--leos-emerald)}
.price-card .pc-reassure{margin-top:16px; font-size:12px; line-height:1.6; color:var(--leos-label)}

/* release list (Brevo) — belongs to the new experience */
.ci-release{margin-top:26px; padding:22px 22px 24px; border-radius:var(--radius-lg); border:1px solid var(--leos-edge);
  background:color-mix(in srgb,var(--color-surface) 32%,transparent)}
.ci-release .tag-soon{display:inline-block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--leos-magenta); padding:4px 9px; border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--leos-magenta) 12%,transparent); margin-bottom:12px}
.ci-release h3{font-size:19px; font-weight:600; margin:0 0 8px}
/* .ci-capture is the same capture form outside the homepage release band (e.g. the FY26 per-diem
   guide). Without it, .rl-form inputs on guide pages fall back to browser defaults — a ~21px
   unstyled box that breaks Nocturne and drops well under a usable mobile tap target. Additive:
   nothing else uses .ci-capture, so the homepage band is untouched. */
.ci-release .rl-form, .ci-capture .rl-form{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.ci-release .rl-form input, .ci-capture .rl-form input{flex:1; min-width:220px; min-height:48px; padding:0 14px; border-radius:var(--radius-md);
  border:1px solid var(--leos-edge); background:color-mix(in srgb,var(--leos-void) 40%,transparent); color:var(--color-text); font-size:15px}
.ci-release .rl-form input:focus-visible, .ci-capture .rl-form input:focus-visible{outline:2px solid var(--leos-cyan); outline-offset:2px}
.ci-release .rl-consent{font-size:12px; color:var(--leos-label); margin:12px 0 0; line-height:1.55}

/* ============================ CLOSING BAND ============================= */
.ci-close{
  max-width:var(--maxw); margin:0 auto clamp(40px,6vw,88px); padding:clamp(44px,6vw,80px) var(--pad);
  border-radius:var(--radius-lg); text-align:center; position:relative; overflow:hidden;
  border:1px solid var(--leos-edge);
  background:
    radial-gradient(700px 320px at 50% -20%, color-mix(in srgb,var(--leos-cyan) 12%,transparent), transparent 66%),
    linear-gradient(155deg,color-mix(in srgb,var(--leos-violet) 10%,transparent),color-mix(in srgb,var(--color-surface) 40%,transparent));
}
.ci-close h2{font-size:clamp(26px,3.4vw,42px); font-weight:500; letter-spacing:-.025em; margin:0 auto 14px; max-width:20ch}
.ci-close p{font-size:16.5px; line-height:1.6; color:color-mix(in srgb,var(--color-text) 82%,transparent); max-width:56ch; margin:0 auto 26px}

/* ============================ FOOTER =================================== */
.ci-footer{border-top:1px solid var(--leos-edge); margin-top:clamp(24px,4vw,40px)}
.ci-footer .fwrap{max-width:var(--maxw); margin:0 auto; padding:34px var(--pad) 20px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)); gap:24px}
.ci-footer h3, .ci-footer h4{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--leos-label); margin:0 0 12px}
.ci-footer a{display:block; color:color-mix(in srgb,var(--color-text) 78%,transparent); text-decoration:none; font-size:14px; padding:4px 0}
.ci-footer a:hover{color:var(--leos-cyan)}
.ci-foot-legal{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) 40px}
.ci-foot-legal .src{font-size:12.5px; color:var(--leos-label); margin:0 0 12px}
.ci-disclaimer-full{font-size:12px; line-height:1.65; color:var(--leos-label); max-width:none}

/* ============================ RESPONSIVE =============================== */
@media (max-width:900px){
  .ci-home-hero{grid-template-columns:1fr; gap:34px}
  .ci-bridge{grid-template-columns:1fr}
  .price-card{position:static}
}
@media (max-width:760px){
  .ci-hero-actions .btn-cyan,.ci-hero-actions .btn-ghost{width:100%; justify-content:center}
}