/* ============================================================
   DeclineShield — Use Cases shared stylesheet
   Mirrors the inari tokens + components inlined in /index.html so the
   /use-cases pages match the homepage. Keep visual changes in sync.
   ============================================================ */

/* ---------------- Tokens ---------------- */
:root {
  --inari-white:#FFFFFF; --inari-black:#030303;
  --inari-primary:#00DD8E; --inari-secondary:#3CE5D5; --inari-background:#103B3D; --inari-lite:#B6F2DC;
  --black-80:rgba(3,3,3,.80); --black-60:rgba(3,3,3,.60); --black-40:rgba(3,3,3,.40);
  --black-20:rgba(3,3,3,.20); --black-10:rgba(3,3,3,.10); --black-05:rgba(3,3,3,.05);
  --white-80:rgba(255,255,255,.80); --white-60:rgba(255,255,255,.60); --white-40:rgba(255,255,255,.40);
  --white-20:rgba(255,255,255,.20); --white-10:rgba(255,255,255,.10);
  --font-sans:"Manrope",system-ui,-apple-system,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,sans-serif;
  --tracking:-0.02em;
  --shadow-sm:0 1px 2px rgba(3,3,3,.06),0 1px 3px rgba(3,3,3,.04);
  --shadow-md:0 4px 12px rgba(3,3,3,.08);
  --shadow-glow:0 8px 32px rgba(0,221,142,.25);
  --ease:cubic-bezier(.2,.7,.2,1);
  --accent:#0E5C46; --accent-h:#0a7a55; --accent-bright:#00DD8E; --accent-text:#fff;
}

/* ---------------- Reset / base ---------------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-body); font-size:16px; line-height:140%;
  letter-spacing:var(--tracking); color:var(--inari-black); background:var(--inari-white);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
a { text-decoration:none; color:inherit; }
img,svg { display:block; }

/* ---------------- Type scale ---------------- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family:var(--font-sans); font-weight:600; letter-spacing:var(--tracking); margin:0; color:var(--inari-black);
}
.h3 { font-size:48px; line-height:114%; }
.h4 { font-size:40px; line-height:116%; }
.h5 { font-size:32px; line-height:118%; }
.h6 { font-size:24px; line-height:118%; }
.body-22{font-size:22px;line-height:130%;} .body-20{font-size:20px;line-height:130%;}
.body-18{font-size:18px;line-height:140%;} .body-16{font-size:16px;line-height:140%;}
.body-14{font-size:14px;line-height:150%;} .body-12{font-size:12px;line-height:150%;}
.fw-regular{font-weight:400;} .fw-medium{font-weight:500;} .fw-semibold{font-weight:600;}
.label { font-family:var(--font-sans); font-weight:600; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; }
.surface-dark{background:var(--inari-background); color:#fff;}
.surface-dark h2,.surface-dark h3{color:#fff;}
.surface-black{background:var(--inari-black); color:#fff;}

/* ---------------- Buttons / CTAs ---------------- */
.rf-cta { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:600; letter-spacing:var(--tracking); border-radius:9999px; border:none; cursor:pointer; transition:all 200ms var(--ease); white-space:nowrap; }
.rf-cta-primary { background:var(--accent); color:var(--accent-text); }
.rf-cta-primary:hover { background:var(--accent-h); }
.rf-cta-primary-bright { background:var(--accent-bright); color:#030303; }
.rf-cta-primary-bright:hover { background:#3CE5D5; }
.rf-cta-ghost-dark { background:transparent; color:#fff; border:1px solid var(--white-20); }
.rf-cta-ghost-dark:hover { border-color:var(--accent-bright); color:var(--accent-bright); }
.rf-cta-ghost-light { background:transparent; color:#030303; border:1px solid var(--black-20); }
.rf-cta-ghost-light:hover { border-color:var(--accent); color:var(--accent); }
.rf-hcta { display:inline-flex; align-items:center; gap:10px; font-weight:600; letter-spacing:var(--tracking); border-radius:9999px; border:none; cursor:pointer; transition:all 200ms var(--ease); white-space:nowrap; background:var(--accent-bright); color:#030303; }
.rf-hcta:hover { background:#3CE5D5; }
.rf-hghost { display:inline-flex; align-items:center; gap:10px; font-weight:600; letter-spacing:var(--tracking); border-radius:9999px; cursor:pointer; transition:all 200ms var(--ease); white-space:nowrap; background:transparent; color:#fff; border:1px solid var(--white-20); }
.rf-hghost:hover { border-color:var(--accent-bright); color:var(--accent-bright); }

/* ---------------- Cards ---------------- */
.rf-card { background:#fff; border:1px solid var(--black-05); border-radius:16px; box-shadow:var(--shadow-sm); transition:box-shadow 300ms var(--ease), transform 300ms var(--ease); }
.rf-card-hover:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
a.rf-card { color:inherit; display:block; }

/* ---------------- Layout helpers ---------------- */
.wrap { max-width:1200px; margin:0 auto; padding-left:24px; padding-right:24px; }
.wrap-sm { max-width:1080px; margin:0 auto; padding-left:24px; padding-right:24px; }
.sec { padding-top:72px; padding-bottom:72px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }

/* ---------------- Nav ---------------- */
nav.site { position:sticky; top:0; z-index:50; height:72px; background:var(--white-80); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--black-05); transition:box-shadow 200ms var(--ease); }
nav.site.scrolled { box-shadow:0 1px 0 rgba(3,3,3,.06), 0 8px 24px rgba(3,3,3,.05); }
.nav-inner { max-width:1200px; margin:0 auto; height:100%; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo .mark { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--accent); }
.nav-logo .name { font-family:var(--font-sans); font-weight:600; font-size:21px; letter-spacing:var(--tracking); }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a { color:var(--black-60); }
.nav-links a:hover { color:var(--inari-black); }
.nav-actions { display:flex; align-items:center; gap:12px; }

/* ---------------- Breadcrumb ---------------- */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px; }
.crumbs a, .crumbs span { font-size:13px; font-weight:500; color:var(--white-60); }
.crumbs a:hover { color:var(--accent-bright); }
.crumbs .sep { color:var(--white-40); }
.crumbs .cur { color:var(--inari-lite); }

/* ---------------- Hero (dark) ---------------- */
.uc-hero { position:relative; overflow:hidden; background:radial-gradient(120% 90% at 80% 0%, #14494a 0%, #103B3D 55%, #0c2e2f 100%); }
.uc-hero-glow { position:absolute; inset:0; background:radial-gradient(60% 50% at 88% 18%, rgba(0,221,142,.16), transparent 70%); pointer-events:none; }
.uc-hero-inner { max-width:1200px; margin:0 auto; padding:48px 24px 64px; position:relative; }
.uc-badge { display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:9999px; background:var(--white-10); border:1px solid var(--white-20); margin-bottom:22px; }
.uc-hero h1 { font-size:48px; line-height:112%; margin-bottom:20px; color:#fff; max-width:760px; }
.uc-hero h1 .accent { color:var(--accent-bright); }
.uc-hero .sub { color:var(--white-80); max-width:620px; margin:0 0 30px; }
.uc-hero .cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.uc-hero .fine { color:var(--white-60); margin:0; }
@keyframes uc-pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--accent-bright); animation:uc-pulse 2s var(--ease) infinite; }

/* ---------------- Content blocks ---------------- */
.uc-lead { max-width:760px; }
.tick-list { display:flex; flex-direction:column; gap:14px; }
.tick { display:flex; gap:12px; align-items:flex-start; }
.tick .ck { flex:none; margin-top:2px; color:var(--accent-h); }
.feat-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; background:var(--inari-lite); color:#0a5c40; margin-bottom:18px; }
.uc-cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.uc-cards-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.audit-row { display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--black-05); }
.audit-ico { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:var(--inari-lite); color:#0a5c40; flex:none; }

/* ---------------- Story / scenario ---------------- */
.uc-story { position:relative; border-radius:16px; padding:34px 36px 34px 40px; background:#0d3132; border:1px solid var(--white-10); overflow:hidden; }
.uc-story::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent-bright); }
.uc-story .who { display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; color:var(--inari-lite); }
.uc-story p { color:var(--white-80); margin:0 0 14px; }
.uc-story p:last-child { margin-bottom:0; }
.uc-story strong { color:#fff; font-weight:600; }
.uc-story .kicker { color:var(--accent-bright); }

/* ---------------- Symptom checklist ---------------- */
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.check-item { display:flex; gap:13px; align-items:flex-start; padding:18px 20px; background:#fff; border:1px solid var(--black-05); border-radius:14px; box-shadow:var(--shadow-sm); }
.check-item .box { flex:none; width:24px; height:24px; border-radius:7px; background:var(--inari-lite); color:#0a5c40; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.check-item span.t { color:var(--black-80); }

/* ---------------- Failure reasons ---------------- */
.reason-list { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.reason { display:flex; gap:14px; align-items:flex-start; }
.reason .ico { flex:none; width:40px; height:40px; border-radius:11px; background:var(--inari-lite); color:#0a5c40; display:inline-flex; align-items:center; justify-content:center; }
.reason h3 { font-size:17px; text-transform:none; margin:0 0 4px; }
.reason p { margin:0; color:var(--black-60); }

/* ---------------- Cost callout ---------------- */
.cost { display:flex; gap:28px; align-items:center; flex-wrap:wrap; padding:30px 34px; border-radius:16px; background:var(--inari-lite); border:1px solid rgba(0,221,142,.25); }
.cost .big { font-family:var(--font-sans); font-weight:700; font-size:54px; line-height:1; letter-spacing:var(--tracking); color:#0a5c40; flex:none; }
.cost .txt { color:#0c2e2f; max-width:620px; }
.cost .txt strong { color:#0a5c40; }

/* ---------------- Before / after compare ---------------- */
.cmp { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cmp-col { border-radius:16px; padding:28px 28px 30px; }
.cmp-bad { background:#fff; border:1px solid var(--black-10); }
.cmp-good { background:#103B3D; border:1px solid transparent; }
.cmp-col h3 { text-transform:none; font-size:18px; margin:0 0 18px; }
.cmp-bad h3 { color:var(--black-60); }
.cmp-good h3 { color:var(--accent-bright); }
.cmp-row { display:flex; gap:11px; align-items:flex-start; margin-bottom:13px; }
.cmp-row:last-child { margin-bottom:0; }
.cmp-row .m { flex:none; margin-top:2px; }
.cmp-bad .cmp-row .m { color:var(--black-20); }
.cmp-good .cmp-row .m { color:var(--accent-bright); }
.cmp-bad .cmp-row span.t { color:var(--black-60); }
.cmp-good .cmp-row span.t { color:#fff; }

/* ---------------- FAQ ---------------- */
.faq-item button { width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-body); letter-spacing:var(--tracking); }
.faq-chev { color:var(--black-40); flex:none; transition:transform 200ms var(--ease); }
.faq-ans { padding:0 24px 0; max-height:0; overflow:hidden; transition:max-height 250ms var(--ease), padding 250ms var(--ease); }
.faq-item[open-state="1"] .faq-chev { transform:rotate(180deg); }
.faq-item[open-state="1"] .faq-ans { max-height:500px; padding:0 24px 22px; }

/* ---------------- Footer ---------------- */
footer.site { background:#103B3D; color:#fff; }
footer.site a:hover { color:var(--accent-bright); }

/* ---------------- Responsive ---------------- */
@media (max-width:900px) {
  .nav-links { display:none; }
  .two-col { grid-template-columns:1fr !important; gap:36px; }
  .uc-cards-3 { grid-template-columns:1fr 1fr; }
  .check-grid { grid-template-columns:1fr; }
  .reason-list { grid-template-columns:1fr; }
  .cmp { grid-template-columns:1fr; }
  .cost .big { font-size:44px; }
  .uc-hero h1 { font-size:38px; }
  .sec { padding-top:52px; padding-bottom:52px; }
  .h3{font-size:36px;} .h4{font-size:32px;} .h5{font-size:26px;}
}
@media (max-width:560px) {
  .uc-cards-3 { grid-template-columns:1fr; }
  .nav-actions .ghost-hide { display:none; }
  .uc-hero h1 { font-size:32px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html { scroll-behavior:auto; }
}