/* ===========================================================
   INNO DIAGNOSIS — design tokens
   Derived from the supplied mockups (Innoaesthetics brand system)
   =========================================================== */
:root{
  --ink:#14150f;
  --ink-soft:#4f594f;
  --paper:#f6f5f1;
  --card:#ffffff;
  --line:#dde4dc;
  --line-soft:#edf2ee;
  --green:#065741;
  --green-dark:#043a2c;
  --green-tint:#e8f1ed;
  --amber:#b99357;
  --blue:#355a58;
  --radius:10px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(6,87,65,.05), 0 12px 32px rgba(6,87,65,.08);
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
a{color:inherit}

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

/* ---------- Top nav ---------- */
.topnav{
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(92deg, #062a24 0%, #08453a 46%, #0b6951 100%);
  background-size:24px 24px, 24px 24px, auto;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
  font-size:13px;
  letter-spacing:.04em;
  gap:24px;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(6,42,36,.16);
}
.topnav__brand{display:flex;align-items:center}
.topnav__brand img{display:block;height:24px;width:auto;filter:brightness(0) invert(1);opacity:.96}
.topnav__stepper{margin-left:auto}
@media (max-width:900px){
  .topnav{
    padding:14px 20px;
    align-items:flex-start;
  }
  .topnav__stepper{
    margin-left:0;
    justify-content:flex-start;
  }
}
@media (max-width:720px){
  .topnav{
    flex-direction:column;
  }
  .topnav__brand{
    width:100%;
  }
}

/* ---------- Layout shell ---------- */
.shell{max-width:1280px;margin:0 auto;padding:0 32px}
.app-frame{
  background:linear-gradient(180deg,#f7f8f5 0%,#f2f5f2 100%);
  border:1px solid var(--line);
  min-height:100vh;
}

/* ---------- Hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:56px;
  align-items:center;
  padding:72px 32px 78px;
  max-width:1280px;
  margin:0 auto;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  inset:26px 18px auto auto;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(6,87,65,.14) 0%, rgba(6,87,65,0) 68%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto auto 26px 0;
  width:280px;
  height:1px;
  background:linear-gradient(90deg, rgba(6,87,65,.22), rgba(6,87,65,0));
  pointer-events:none;
}
.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#0d5f48;
  font-weight:700;margin:0 0 18px;
  padding:0 0 10px;
  border-bottom:1px solid rgba(6,87,65,.14);
}
.hero__eyebrow::before{content:"";width:26px;height:1px;background:currentColor}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.9rem, 5vw, 4.3rem);
  line-height:.95;
  margin:0 0 10px;
  font-weight:600;
  letter-spacing:-.05em;
  max-width:9ch;
}
.hero h1 .accent{color:var(--green);font-style:italic}
.hero__sub{
  font-size:11px;color:#5c6962;text-transform:uppercase;letter-spacing:.2em;
  margin:0 0 24px;font-weight:700;
}
.hero__lead{
  font-size:17px;line-height:1.75;color:#546159;max-width:44ch;margin:0 0 32px;
}
.hero-intake{
  max-width:46ch;
  margin:0 0 28px;
  padding:22px 20px 18px;
  border:1px solid #d2dfd7;
  border-radius:22px;
  background:
    linear-gradient(90deg, rgba(6,87,65,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(6,87,65,.03) 1px, transparent 1px),
    linear-gradient(180deg,#ffffff 0%,#f4f8f5 100%);
  background-size:20px 20px, 20px 20px, auto;
  box-shadow:0 18px 34px rgba(6,87,65,.08);
}
.hero-intake__head{
  display:grid;
  gap:6px;
  margin-bottom:14px;
}
.hero-intake__head strong{
  font-size:11px;
  color:var(--green-dark);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero-intake__head span{
  font-size:13px;
  line-height:1.65;
  color:#5a665f;
}
.hero-intake__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 128px;
  gap:12px;
}
.hero-intake__field{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.hero-intake__field span{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.hero-intake__field input{
  width:100%;
  border:1px solid #d1dad4;
  border-radius:14px;
  background:#fff;
  padding:13px 14px;
  font:inherit;
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.hero-intake__field input:focus{
  outline:3px solid rgba(75,93,58,.18);
  border-color:var(--green);
}
@media (max-width:640px){
  .hero-intake__grid{grid-template-columns:1fr}
}
.hero__disclaimer{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--green-tint);
  border:1px solid #dde3d2;
  border-radius:var(--radius);
  padding:14px 16px;
  font-size:13px;
  color:var(--green-dark);
  max-width:46ch;
  margin-bottom:28px;
}
.hero__disclaimer svg{flex:0 0 auto;margin-top:2px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border:none;border-radius:999px;
  padding:14px 26px;font-size:14.5px;font-weight:700;letter-spacing:.03em;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,#0a6a50 0%, #065741 100%);color:#fff;box-shadow:0 16px 30px rgba(6,87,65,.18)}
.btn-primary:hover{background:linear-gradient(135deg,#0b7558 0%, #054c39 100%);box-shadow:0 20px 34px rgba(6,87,65,.22)}
.btn-secondary{background:rgba(255,255,255,.68);color:var(--ink);border:1.5px solid #d4dfd8;backdrop-filter:blur(8px)}
.btn-secondary:hover{border-color:#9db9ae;color:var(--green-dark);background:#f8fbf9}
.btn-ghost{background:transparent;color:var(--ink-soft);padding:10px 4px}
.btn-block{width:100%;justify-content:center}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}

.hero__visual{position:relative}
.hero__portrait{
  position:relative;
  aspect-ratio:4/5;
  border-radius:30px;
  overflow:hidden;
  border:1px solid #d5e0da;
  background:
    radial-gradient(circle at 30% 20%, #e9e6db, transparent 55%),
    linear-gradient(160deg, #ded9c9, #c9c2ac 60%, #b9b096);
  box-shadow:0 30px 60px rgba(6,87,65,.14);
}
.hero__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__steps{
  position:absolute;
  right:-18px;bottom:22px;
  background:rgba(250,252,250,.9);
  border:1px solid rgba(6,87,65,.12);
  border-radius:22px;
  padding:16px 18px;
  box-shadow:0 20px 42px rgba(6,87,65,.12);
  display:grid;gap:10px;
  font-size:12px;font-weight:700;color:#55635b;
  backdrop-filter:blur(10px);
}
.hero__steps div{display:flex;align-items:center;gap:8px}
.hero__steps svg{color:var(--green)}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding:40px 20px}
  .hero__steps{position:static;margin-top:16px}
}

/* ---------- Wizard shell ---------- */
.wizard{
  max-width:1280px;margin:0 auto;padding:0 32px 80px;
}
.stepper{display:flex;align-items:center;gap:6px}
.stepper__item{display:flex;align-items:center;gap:6px}
.stepper__circle{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
  border:1.5px solid var(--line);
  color:var(--ink-soft);background:#fff;
}
.stepper__label{font-size:11.5px;color:var(--ink-soft);display:none}
@media (min-width:760px){ .stepper__label{display:inline} }
.stepper__item.done .stepper__circle{background:var(--green);border-color:var(--green);color:#fff}
.stepper__item.current .stepper__circle{border-color:var(--green);color:var(--green);background:var(--green-tint)}
.stepper__item.current .stepper__label{color:var(--ink);font-weight:700}
.stepper__bar{width:26px;height:1.5px;background:var(--line)}
.stepper__item.done + .stepper__bar{background:var(--green)}
.topnav__stepper .stepper__circle{
  border-color:rgba(255,255,255,.42);
  color:#fff;
  background:transparent;
}
.topnav__stepper .stepper__label{color:rgba(255,255,255,.78)}
.topnav__stepper .stepper__bar{background:rgba(255,255,255,.24)}
.topnav__stepper .stepper__item.done .stepper__circle{
  background:rgba(255,255,255,.16);
  border-color:#fff;
  color:#fff;
}
.topnav__stepper .stepper__item.current .stepper__circle{
  background:#fff;
  border-color:#fff;
  color:var(--green-dark);
}
.topnav__stepper .stepper__item.current .stepper__label,
.topnav__stepper .stepper__item.done .stepper__label{color:#fff}
.topnav__stepper .stepper__item.done + .stepper__bar{background:rgba(255,255,255,.6)}
@media (max-width:720px){
  .topnav__stepper .stepper__label{font-size:11px}
  .topnav__stepper .stepper__bar{width:18px}
}

.panel{
  background:
    linear-gradient(90deg, rgba(6,87,65,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(6,87,65,.03) 1px, transparent 1px),
    linear-gradient(180deg,#ffffff 0%,#f6faf8 100%);
  background-size:22px 22px, 22px 22px, auto;
  border:1px solid #cfddd5;
  border-radius:24px;
  padding:34px;
  box-shadow:0 18px 40px rgba(6,87,65,.06);
}
.panel__header{
  background:linear-gradient(135deg, #eff5f2 0%, #e4eee9 100%);
  border:1px solid #d4e2db;
  border-radius:18px;
  padding:22px 24px;
  margin:0 0 30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.panel__eyebrow{font-size:11px;color:#0d5f48;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px}
.panel h2{font-family:var(--font-display);font-size:1.9rem;margin:0;font-weight:600;line-height:.95;color:var(--green-dark);text-transform:uppercase;white-space:nowrap;letter-spacing:-.03em}
.panel__hint{color:var(--ink-soft);font-size:15px;line-height:1.55;margin:0 0 30px;max-width:58ch}

.q-block{margin-bottom:32px}
.q-block:last-of-type{margin-bottom:0}
.q-block__label{font-size:15px;font-weight:700;margin:0 0 8px;line-height:1.45;color:#20322c}
.q-block__helper{font-size:13px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
.q-block.is-locked{opacity:.58}
.q-block.is-locked .q-block__label{color:var(--ink-soft)}
.q-block.is-locked [data-question]{pointer-events:none}

/* card-style option grid (area / tissue need) */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.opt-card{
  border:1.5px solid #d5e0da;
  border-radius:16px;
  padding:18px 12px 14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbf9 100%);text-align:center;font-size:12px;font-weight:700;color:#59675f;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.opt-card svg{width:30px;height:30px;color:#5c6962}
.opt-card:hover{border-color:#a9c3b8;transform:translateY(-2px);box-shadow:0 14px 24px rgba(6,87,65,.08)}
.opt-card[aria-pressed="true"]{
  border-color:#0d5f48;background:linear-gradient(180deg,#f0f7f3 0%,#e3efe8 100%);color:var(--green-dark);box-shadow:0 16px 28px rgba(6,87,65,.09);
}
.opt-card[aria-pressed="true"] svg{color:var(--green)}
.opt-card:disabled,.opt-pill:disabled,.opt-check:disabled{
  cursor:not-allowed;
  opacity:.72;
  transform:none;
  box-shadow:none;
}

/* pill-style option list (concern / result / severity...) */
.opt-pills{display:flex;flex-wrap:wrap;gap:8px}
.opt-pill{
  border:1.5px solid #d5e0da;border-radius:999px;background:rgba(255,255,255,.86);
  padding:10px 16px;font-size:12.5px;font-weight:700;color:#5a675f;
}
.opt-pill:hover{border-color:#a9c3b8;background:#f8fbf9}
.opt-pill[aria-pressed="true"]{border-color:#0d5f48;background:linear-gradient(180deg,#eef6f2 0%,#e1eee6 100%);color:var(--green-dark);box-shadow:0 10px 18px rgba(6,87,65,.06)}

/* checkbox list (clinical signs) */
.opt-checks{display:flex;flex-wrap:wrap;gap:8px}
.opt-check{
  display:flex;align-items:center;gap:8px;
  border:1.5px solid #d5e0da;border-radius:14px;background:rgba(255,255,255,.88);
  padding:10px 14px;font-size:12.5px;font-weight:700;color:#5b675f;
}
.opt-check:hover{border-color:#a9c3b8;background:#f8fbf9}
.opt-check[aria-pressed="true"]{border-color:#0d5f48;background:linear-gradient(180deg,#eef6f2 0%,#e1eee6 100%);color:var(--green-dark);box-shadow:0 10px 18px rgba(6,87,65,.06)}
.opt-check .box{width:16px;height:16px;border-radius:4px;border:1.5px solid #cfddd5;flex:0 0 auto;position:relative}
.opt-check[aria-pressed="true"] .box{background:var(--green);border-color:var(--green)}
.opt-check[aria-pressed="true"] .box::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.q-block__counter{font-size:11.5px;color:var(--ink-soft);margin-left:6px}

.panel__footer{display:flex;justify-content:space-between;align-items:center;margin-top:36px;gap:12px;padding-top:18px;border-top:1px solid rgba(6,87,65,.08)}

/* ---------- Method selection (step 3) ---------- */
.method{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:0;
  border:1px solid #cad8d0;
  border-radius:28px;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(6,87,65,.04), transparent 34%),
    linear-gradient(180deg,#f9fbfa 0%,#f2f6f3 100%);
  box-shadow:0 28px 64px rgba(6,87,65,.09);
}
.method__main{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,247,.98)),
    linear-gradient(90deg, rgba(6,87,65,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(6,87,65,.03) 1px, transparent 1px);
  background-size:auto, 24px 24px, 24px 24px;
  color:var(--ink);
  padding:40px 38px 34px;
}
.method__main::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:1px;
  background:linear-gradient(180deg, rgba(6,87,65,.2) 0%, rgba(6,87,65,0) 100%);
}
.method__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#0d5f48;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
  margin:0 0 16px;
  padding:0 0 10px;
  border-radius:0;
  background:transparent;
  border-bottom:1px solid rgba(6,87,65,.14);
}
.method__name{
  font-family:var(--font-display);
  font-size:clamp(2.7rem, 4.5vw, 3.55rem);
  margin:0 0 16px;
  line-height:.9;
  color:var(--green-dark);
  letter-spacing:-.045em;
  max-width:10ch;
}
.method__positioning{
  color:#5b675f;
  font-size:15px;
  line-height:1.8;
  margin:0 0 26px;
  max-width:44ch;
}
.method__media-wrap{margin:0 0 26px}
.method__media{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid #d3e0d8;
  background:#eef3ef;
  text-decoration:none;
  box-shadow:0 24px 44px rgba(6,87,65,.1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.method__media img{
  width:100%;
  aspect-ratio:16/6.7;
  object-fit:cover;
}
.method__media:hover{
  transform:translateY(-2px);
  border-color:#b9cec3;
  box-shadow:0 30px 52px rgba(6,87,65,.15);
}
.method__media-badge{
  position:absolute;
  left:14px;
  bottom:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(248,250,248,.96);
  border-radius:999px;
  padding:9px 13px;
  min-height:42px;
  max-width:min(220px, calc(100% - 28px));
  border:1px solid rgba(6,87,65,.08);
  box-shadow:0 10px 22px rgba(20,21,15,.08);
}
.method__media-badge img{
  width:auto;
  max-width:100%;
  max-height:26px;
  aspect-ratio:auto;
  object-fit:contain;
}
.method__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--green-dark);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 22px;
  text-decoration:none;
  padding:0 0 8px;
  border-radius:0;
  background:transparent;
  border-bottom:1px solid rgba(6,87,65,.14);
}
.method__link:hover{color:var(--green);border-color:rgba(6,87,65,.28)}
.method__components{
  display:grid;
  gap:14px;
  margin-bottom:26px;
  padding:22px 0 0;
  border:none;
  border-top:1px solid #d9e3dd;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.method__component{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:13.5px;
  color:#4e5b53;
  line-height:1.7;
  padding-bottom:14px;
  border-bottom:1px solid rgba(6,87,65,.08);
}
.method__component:last-child{padding-bottom:0;border-bottom:none}
.method__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  margin-top:7px;
  flex:0 0 auto;
  box-shadow:0 0 0 6px rgba(6,87,65,.05);
}
.method__disclaimer{
  font-size:12.5px;
  color:#6a746d;
  border-top:1px solid #d6e0da;
  padding-top:18px;
  margin-top:10px;
  line-height:1.72;
}

.method__side{
  position:relative;
  background:
    linear-gradient(180deg,#eef3ef 0%, #e6eeea 100%);
  padding:34px 30px;
  border-left:1px solid #d2dfd7;
}
.method__side::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:1px;
  background:linear-gradient(180deg, rgba(6,87,65,.16), rgba(6,87,65,0));
}
.method__side h3{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--green-dark);
  margin:0 0 22px;
  font-weight:700;
}
.method-products-summary{
  margin-bottom:24px;
  padding:0 0 16px;
  border-left:none;
  border-bottom:1px solid rgba(6,87,65,.12);
}
.method-products-summary__lead{
  margin:0;
  font-size:12px;
  line-height:1.75;
  color:#4a5a52;
  font-weight:700;
  max-width:34ch;
}
.product-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:24px}
.product-card{
  border:none;
  border-radius:0;
  padding:0 0 18px;
  text-align:left;
  background:transparent;
  text-decoration:none;
  color:inherit;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:20px;
  align-items:center;
  border-bottom:1px solid rgba(6,87,65,.12);
  transition:transform .18s ease, opacity .18s ease, border-color .18s ease;
}
.product-card__swatch{
  aspect-ratio:1;border-radius:18px;margin-bottom:0;
  background:rgba(255,255,255,.72);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
  overflow:hidden;
  border:1px solid rgba(6,87,65,.08);
  padding:10px;
}
.product-card__swatch img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
}
.product-card__body{display:grid;gap:10px;align-content:center;min-width:0}
.product-card__name{font-size:15px;font-weight:700;line-height:1.1;color:var(--green-dark);letter-spacing:-.01em}
.product-card__desc{margin:0;font-size:13px;line-height:1.68;color:#56625b}
.product-card__meta{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(6,87,65,.07);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green-dark);
}
.product-card.is-primary{
  grid-template-columns:112px minmax(0,1fr);
  padding-bottom:18px;
}
.product-card.is-primary .product-card__name{font-size:1.18rem;letter-spacing:-.02em}
.product-card.is-primary .product-card__desc{font-size:13.2px}
.product-card.is-primary .product-card__swatch{padding:12px;background:rgba(255,255,255,.84)}
.product-card.is-secondary{
  grid-template-columns:112px minmax(0,1fr);
  padding-bottom:18px;
}
.product-card.is-secondary .product-card__name{font-size:1.02rem}
.product-card.is-secondary .product-card__desc{font-size:12.8px}
.product-card.is-secondary .product-card__swatch{padding:10px;opacity:1}
.product-card:last-child{border-bottom:none;padding-bottom:0}
.product-card:hover{transform:translateX(4px);opacity:1;border-color:rgba(6,87,65,.24)}

@media (max-width:720px){
  .product-card,
  .product-card.is-primary,
  .product-card.is-secondary{
    grid-template-columns:1fr;
  }
  .product-card__swatch{
    max-width:180px;
  }
}

.alt-box{
  border:none;
  border-top:1px solid #dbe5df;
  border-radius:0;
  padding:18px 0 0;
  font-size:13.5px;
  color:var(--ink-soft);
  background:transparent;
  line-height:1.65;
}
.alt-box strong{color:var(--green-dark);display:block;margin-bottom:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

@media (max-width:960px){
  .method{grid-template-columns:1fr}
  .method__side{border-left:none;border-top:1px solid #e7e2d7}
}

.method-protocol{
  margin-top:26px;
  border:1px solid #d1ddd6;
  border-radius:28px;
  padding:28px;
  background:
    linear-gradient(90deg, rgba(6,87,65,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(6,87,65,.03) 1px, transparent 1px),
    linear-gradient(180deg,#fbfdfc 0%,#f3f7f4 100%);
  background-size:22px 22px, 22px 22px, auto;
  box-shadow:0 18px 40px rgba(6,87,65,.05);
}
.method-protocol__head{margin:0 0 20px}
.method-protocol__head h3{margin:0 0 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;color:#0d5f48}
.method-protocol__head p{margin:0;color:#59665e;font-size:14px;line-height:1.7;max-width:44ch}

/* ---------- Clinical journey (step 4) ---------- */
.journey{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.journey-card{
  border:1px solid #d7e1db;
  border-radius:20px;
  padding:20px 20px 18px;
  background:linear-gradient(180deg,#ffffff,#f7faf8);
  position:relative;
  min-height:188px;
  box-shadow:0 14px 28px rgba(6,87,65,.05);
}
.journey-card__icon{
  width:40px;height:40px;border-radius:12px;background:#edf5f0;color:var(--green);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.journey-card__eyebrow{font-size:10px;text-transform:uppercase;color:#0d5f48;letter-spacing:.16em;font-weight:700}
.journey-card__title{font-size:16px;font-weight:700;margin:4px 0 10px;color:var(--green-dark);line-height:1.15}
.journey-card__desc{font-size:13px;color:#59665e;line-height:1.7}
@media (max-width:860px){ .journey{grid-template-columns:1fr} }
@media (max-width:860px){ .method__media-badge{max-width:calc(100% - 24px)} }

.resources{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.resource-card{
  position:relative;
  overflow:hidden;
  border:1px solid #dde4d1;border-radius:18px;padding:14px 14px;background:linear-gradient(180deg,#ffffff 0%,#f8f8f3 100%);
  display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;column-gap:12px;font-size:12px;
  text-decoration:none;color:inherit;min-height:84px;
  box-shadow:0 10px 28px rgba(20,21,15,.04);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.resource-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(75,93,58,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(238,241,232,.55) 100%);
  pointer-events:none;
}
.resource-card:hover{border-color:#bcc8ac;transform:translateY(-3px);box-shadow:0 18px 34px rgba(20,21,15,.08);background:linear-gradient(180deg,#ffffff 0%,#f4f7ee 100%)}
.resource-card:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.resource-card.is-disabled{opacity:.6;cursor:default;pointer-events:none;box-shadow:none;transform:none}
.resource-card__icon{
  width:36px;height:36px;color:var(--green);
  padding:8px;
  border-radius:10px;
  background:#eef3e6;
  border:1px solid #dce5ce;
  position:relative;
  z-index:1;
}
.resource-card__title{
  font-weight:700;color:var(--green-dark);font-size:13px;line-height:1.3;
  position:relative;
  z-index:1;
}
@media (max-width:900px){ .resources{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .resources{grid-template-columns:1fr} }

/* ---------- Summary ---------- */
.summary-head{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.06) 1px, transparent 1px),
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 24%),
    linear-gradient(118deg, #0d2c27 0%, #08453a 44%, #0a6550 100%);
  background-size:24px 24px, 24px 24px, auto, auto;
  color:#fff;border-radius:28px 28px 0 0;
  padding:30px 34px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:0 24px 56px rgba(6,87,65,.16);
}
.summary-head::after{
  content:"";
  position:absolute;
  right:34px;
  top:22px;
  width:120px;
  height:1px;
  border-radius:0;
  background:linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,0));
  pointer-events:none;
}
.summary-head__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.summary-head h2{margin:0;position:relative;z-index:1}
.summary-title{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.summary-title__logo{
  display:block;
  height:26px;
  width:auto;
  filter:brightness(0) invert(1);
}
.summary-title__text{
  font-family:var(--font-display);
  font-size:2.15rem;
  font-weight:600;
  line-height:.96;
  letter-spacing:-.035em;
}
.summary-head__status{
  width:100%;
  margin:2px 0 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:13px;
  line-height:1.5;
  position:relative;
  z-index:1;
}
.summary-head__status.is-error{background:rgba(123,21,21,.22);border-color:rgba(255,205,205,.36)}
.summary-head .btn{
  position:relative;
  z-index:1;
  border-color:rgba(255,255,255,.26);
  box-shadow:none;
}
.summary-head .btn:hover{background:#f4fbf7;color:var(--green-dark)}
.summary-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.95fr);gap:0;
  border:1px solid #cfdcd5;border-top:none;background:#f1f5f2;
  box-shadow:0 20px 44px rgba(6,87,65,.06);
}
.summary-col{padding:30px;border-right:1px solid #d9e3dd;background:linear-gradient(180deg,#fbfcfb 0%,#f6faf8 100%);position:relative}
.summary-col:last-child{border-right:none}
.summary-col::before{
  content:"";
  position:absolute;
  inset:24px auto 24px 0;
  width:1px;
  background:linear-gradient(180deg, rgba(6,87,65,.18), rgba(6,87,65,0));
}
.summary-col h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:#0d5f48;margin:0 0 20px;font-weight:700}
.summary-clinical{
  background:
    linear-gradient(90deg, rgba(6,87,65,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(6,87,65,.03) 1px, transparent 1px),
    linear-gradient(180deg,#f8fbf9 0%,#f2f7f4 100%);
  background-size:22px 22px, 22px 22px, auto;
}
.summary-clinical__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:start;
}
.summary-section{
  min-width:0;
}
.summary-section__eyebrow{
  margin:0 0 16px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#0d5f48;
}
.summary-section--assessment{
  display:grid;
  gap:16px;
}
.summary-clinical__facts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px 28px;
}
.summary-clinical__facts .summary-field:last-child{
  grid-column:1 / -1;
}
.summary-patient-meta{
  margin:0 0 10px;
}
.summary-patient-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(6,87,65,.05);
  color:var(--green-dark);
  font-size:11.5px;
  line-height:1.4;
  font-weight:600;
}
.summary-tissue{
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.34));
  position:relative;
  border-radius:0;
  padding:16px 0 0;
  border:none;
  box-shadow:none;
}
.summary-tissue__facts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px 24px;
  margin-bottom:18px;
}
.summary-tissue__facts .summary-field:nth-child(2),
.summary-tissue__facts .summary-field:nth-child(5){
  grid-column:1 / -1;
}
.summary-tissue__lead{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:1.55rem;
  line-height:1.05;
  color:var(--green-dark);
}
.summary-field{
  margin-bottom:0;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.summary-field label{display:block;font-size:10px;color:#0d5f48;margin-bottom:5px;text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.summary-field div{font-size:14px;font-weight:600;line-height:1.55;color:var(--green-dark)}
.summary-field[hidden]{display:none}
.summary-reco strong{font-family:var(--font-display);font-size:1.2rem;display:block;color:var(--green-dark);font-weight:600}
.summary-reco{
  background:
    linear-gradient(180deg,#fcfdfc 0%,#f5f8f6 100%);
}
.summary-reco .prod{font-size:10.5px;color:#58665e;margin:14px 0 0;text-transform:uppercase;letter-spacing:.18em;font-weight:700}
.summary-technique-link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  text-decoration:none;
  color:var(--green-dark);
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.summary-technique-link:hover{color:var(--green)}
.summary-technique-link__media{
  width:100%;
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(180deg,#eff5f1 0%,#dde9e2 100%);
  border:1px solid rgba(6,87,65,.08);
  box-shadow:0 20px 40px rgba(6,87,65,.08);
}
.summary-technique-link__media img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
.summary-technique-link strong{font-size:2.65rem;line-height:.9;color:var(--green-dark);letter-spacing:-.045em}
.summary-technique-link span{
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#0d5f48;
  padding:0 0 8px;
  border-radius:999px;
  background:transparent;
  border-bottom:1px solid rgba(6,87,65,.14);
}
.summary-product-list{
  display:grid;
  gap:0;
  margin-top:14px;
}
.summary-product-list[hidden]{display:none}
.summary-product-list__item{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:20px;
  align-items:center;
  text-decoration:none;
  color:inherit;
  padding:20px 0;
  border-top:1px solid rgba(6,87,65,.1);
}
.summary-product-list__item:first-child{border-top:none;padding-top:6px}
.summary-product-list__media{
  aspect-ratio:1;
  border-radius:18px;
  border:1px solid rgba(6,87,65,.06);
  background:rgba(255,255,255,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.summary-product-list__media img{width:100%;height:100%;object-fit:contain}
.summary-product-list__badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(6,87,65,.08);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:12px;
}
.summary-product-list__name{
  font-size:2rem;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
  color:var(--green-dark);
}
.summary-product-list__desc{
  margin:12px 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:#58665e;
}
@media (max-width:900px){
  .summary-grid{grid-template-columns:1fr}
  .summary-col{border-right:none;border-bottom:1px solid var(--line-soft)}
  .summary-clinical__facts{grid-template-columns:1fr}
  .summary-clinical__facts .summary-field:last-child{grid-column:auto}
  .summary-tissue__facts{grid-template-columns:1fr}
  .summary-tissue__facts .summary-field:nth-child(2),
  .summary-tissue__facts .summary-field:nth-child(5){grid-column:auto}
  .summary-product-list__item{grid-template-columns:88px minmax(0,1fr)}
  .summary-product-list__name{font-size:1.6rem}
}

/* ---------- Modal ---------- */
.modal{
  position:fixed;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:24px;
}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,21,15,.48);
  backdrop-filter:blur(4px);
}
.modal__dialog{
  position:relative;
  z-index:1;
  width:min(560px, 100%);
  border-radius:22px;
  border:1px solid #d9dfcc;
  background:linear-gradient(180deg,#fdfdf9 0%, #f5f6ef 100%);
  box-shadow:0 24px 60px rgba(20,21,15,.18);
  padding:28px;
}
.modal__close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#fff;
  color:var(--green-dark);
  box-shadow:0 6px 18px rgba(20,21,15,.08);
}
.modal__eyebrow{
  margin:0 0 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
}
.modal__dialog h3{
  margin:0 0 10px;
  font-size:1.9rem;
  line-height:1;
  color:var(--green-dark);
  text-transform:uppercase;
}
.modal__lead{
  margin:0 0 22px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:48ch;
}
.modal-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.modal-form__field{display:flex;flex-direction:column;gap:7px}
.modal-form__field span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.modal-form__field input{
  width:100%;
  border:1px solid #d8ddcf;
  border-radius:12px;
  background:#fff;
  padding:13px 14px;
  font:inherit;
  color:var(--ink);
}
.modal-form__field input:focus{
  outline:3px solid rgba(75,93,58,.18);
  border-color:var(--green);
}
.modal-form__field--full{grid-column:1 / -1}
.modal-form__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.modal-form__status{
  margin:2px 0 0;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #d6e2c8;
  background:#eef4e6;
  color:var(--green-dark);
  font-size:13px;
  line-height:1.5;
}
.modal-form__status.is-error{background:#f7e8e8;border-color:#e5c6c6;color:#7a2020}
@media (max-width:640px){
  .modal{padding:16px}
  .modal__dialog{padding:24px 18px 18px}
  .modal-form{grid-template-columns:1fr}
  .modal-form__actions{justify-content:stretch;flex-direction:column-reverse}
  .summary-head__actions{width:100%}
  .summary-title{align-items:flex-start;gap:14px}
  .summary-title__logo{height:22px}
  .summary-title__text{font-size:1.8rem}
}
.summary-why{margin-top:2px;padding:16px 0 0;border-top:1px solid rgba(6,87,65,.12);background:transparent;box-shadow:none}
.summary-why h4{font-size:11px;text-transform:uppercase;color:var(--green-dark);margin:0 0 12px;letter-spacing:.14em}
.summary-why ul{margin:0;padding-left:18px;font-size:12px;color:#56625b;line-height:1.8}
.summary-note{font-size:13px;color:var(--ink-soft);background:transparent;border:none;border-radius:0;padding:0;line-height:1.75}
.summary-support{border:1px solid #cfdcd5;border-top:none;padding:28px 30px;background:linear-gradient(180deg,#fbfcfb 0%,#f5f8f6 100%);box-shadow:0 20px 40px rgba(6,87,65,.05)}
.summary-support h4{font-size:10.5px;text-transform:uppercase;color:#0d5f48;margin:0 0 14px;letter-spacing:.18em}
.summary-support__grid{margin-top:0}
.summary-reminder-block{margin-top:20px;padding-top:20px;border-top:1px solid #dde8e2}

.radar-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:266px;
  padding:8px 0 0;
}
.summary-tissue .radar-wrap{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(6,87,65,.08);
  border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---------- Bottom CTA ---------- */
.bottom-cta{
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(118deg, #0d2c27 0%, #08453a 44%, #0a6550 100%);
  background-size:24px 24px, 24px 24px, auto;
  color:#fff;border-radius:24px;
  margin-top:36px;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:0 22px 48px rgba(6,87,65,.14);
}
.bottom-cta p{margin:0;font-size:13px;color:rgba(255,255,255,.76);max-width:52ch;line-height:1.7}
.bottom-cta .btn-primary{background:#fff;color:var(--green-dark);box-shadow:none}
.bottom-cta .btn-primary:hover{background:#f1f6f3;color:var(--green-dark)}

/* ---------- QA banner (dev only) ---------- */
.qa-banner{
  background:#fff4e5;border:1px solid #eccf9c;color:#7a4c12;
  font-size:12.5px;border-radius:14px;padding:12px 14px;margin-bottom:20px;
  display:flex;gap:8px;align-items:flex-start;
}

.helper-text{font-size:11px;color:#617068;letter-spacing:.14em;text-transform:uppercase;font-weight:700}

[hidden]{display:none !important}

/* ---------- Embed mode (Elementor iframe: ?embed=1) ---------- */
html.is-embedded body{background:transparent}
html.is-embedded .app-frame{border:none}
html.is-embedded .hero,
html.is-embedded .wizard{padding-top:24px}