:root { --navy:#082f51; --blue:#0d4e7d; --blue2:#0874b9; --sky:#eaf6fd; --ink:#142331; --muted:#5c6f7f; --line:#d7e2ea; --paper:#fff; --wash:#f4f8fb; --gold:#b86c00; --green:#147a5b; --radius:16px; --shadow:0 14px 40px rgba(13,55,85,.09); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 8% 2%,#e4f3fb 0,transparent 24rem),var(--wash); font:16px/1.52 system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { max-width:1180px; margin:auto; padding:36px 22px 72px; }
.hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(250px,.72fr); gap:48px; align-items:end; background:linear-gradient(135deg,var(--navy),#086ca7); color:#fff; padding:48px 52px; border-radius:24px; box-shadow:0 20px 50px rgba(8,47,81,.2); }
.hero::after { content:""; position:absolute; width:420px; height:420px; right:-180px; top:-210px; border:70px solid rgba(255,255,255,.055); border-radius:50%; }
.hero-copy,.hero-points { position:relative; z-index:1; }
.hero h1, .hero .hero-title { margin:5px 0 16px; font-size:clamp(2.35rem,5.2vw,4.35rem); letter-spacing:-.045em; line-height:.98; }
.hero h1 span, .hero .hero-title span { color:#a8dcf7; }
.eyebrow { margin:0; font-weight:750; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; }
.lede { max-width:690px; margin:0; font-size:1.12rem; color:#e5f4fc; }
.offline { display:inline-block; margin:20px 0 0; padding:8px 13px; border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.07); border-radius:999px; font-size:.84rem; }
.hero-points { display:grid; gap:0; border:1px solid rgba(255,255,255,.19); border-radius:14px; background:rgba(3,33,56,.25); backdrop-filter:blur(5px); }
.hero-points span { display:flex; gap:11px; align-items:center; padding:14px 16px; border-top:1px solid rgba(255,255,255,.13); font-size:.9rem; font-weight:650; }.hero-points span:first-child{border-top:0}.hero-points b{color:#9fd9f7;font-size:.74rem;letter-spacing:.08em}
.advisor { margin-top:30px; }
.step { display:grid; grid-template-columns:48px 1fr; gap:20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; margin:16px 0; box-shadow:0 5px 22px rgba(13,55,85,.045); }
.step-number { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg,var(--blue),var(--blue2)); color:white; font-weight:850; box-shadow:0 5px 12px rgba(8,116,185,.22); }
h2 { margin:0 0 6px; font-size:1.38rem; letter-spacing:-.018em; } h3 { margin:0 0 8px; }
.hint,.fineprint,.sku { color:var(--muted); font-size:.9rem; }
label,legend { display:block; font-weight:700; margin:14px 0 6px; }
.field-note { display:block; margin-top:5px; color:var(--muted); }
select,input { width:100%; min-height:48px; padding:10px 12px; border:1px solid #aebfcb; border-radius:10px; font:inherit; background:white; color:var(--ink); transition:border-color .16s,box-shadow .16s; }
select:hover,input:hover { border-color:#7e9aae; } select:focus,input:focus { border-color:var(--blue2); box-shadow:0 0 0 4px rgba(8,116,185,.11); outline:0; } select:disabled { color:#314858; background:#eef4f7; border-color:#d5e1e8; opacity:1; }
.calculated { display:flex; align-items:center; width:100%; min-height:46px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--wash); font-weight:750; }
fieldset { border:0; padding:0; margin:0; } fieldset legend { margin-top:14px; }
.choice-row { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; }
.choice { display:flex; gap:9px; align-items:center; font-weight:650; margin:0; padding:11px 14px; background:var(--wash); border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:.16s ease; }
.choice:has(input:checked) { color:var(--blue); background:#eaf6fd; border-color:#75b7dd; box-shadow:inset 0 0 0 1px #75b7dd; }
.choice input { width:18px; min-height:18px; }
.grid-2,.grid-3 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.details { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:14px; padding:16px 18px; background:linear-gradient(90deg,#eaf6fd,#f5fbfe); border-left:4px solid var(--blue2); border-radius:8px; }
.details strong { width:100%; }.details span { color:#304758; font-size:.9rem; }
.technical-guide { margin-top:12px; border:1px solid var(--line); border-radius:8px; background:#fbfcfd; }.technical-guide summary { cursor:pointer; padding:12px 14px; font-weight:750; color:var(--blue); }.technical-guide>div { padding:0 14px 14px; }
.guide-facts { margin:0; }.guide-facts div { display:grid; grid-template-columns:minmax(11rem,1fr) 2fr; gap:12px; padding:7px 0; border-top:1px solid #e8edf1; }.guide-facts dt { font-weight:700; color:var(--muted); }.guide-facts dd { margin:0; }
.summary { margin:16px 0 0; padding:12px 14px; background:#fff8e9; border-left:4px solid var(--gold); border-radius:8px; }
.existing { margin-top:16px; padding-top:8px; border-top:1px solid var(--line); }
button { margin-top:22px; min-height:50px; padding:11px 24px; border:0; border-radius:10px; background:linear-gradient(135deg,var(--blue2),var(--blue)); color:#fff; font:750 1rem inherit; cursor:pointer; box-shadow:0 8px 18px rgba(8,116,185,.2); transition:transform .15s,box-shadow .15s; }
button::after{content:"  →"} button:hover { transform:translateY(-1px); box-shadow:0 11px 24px rgba(8,80,130,.25); } :focus-visible { outline:3px solid #f4a340; outline-offset:3px; }
.results,.promise { margin-top:26px; background:white; border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; box-shadow:var(--shadow); }
.buying-guide { margin-top:26px; padding:34px 36px; background:white; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.buying-guide>h2 { margin:4px 0 10px; font-size:1.65rem; color:var(--navy); }
.guide-intro { max-width:900px; margin:0; color:var(--muted); font-size:1.02rem; line-height:1.7; }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px; }
.guide-grid article { padding:20px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(180deg,#fff,#f8fbfd); }
.guide-grid h3 { margin:0 0 8px; color:var(--navy); font-size:1.04rem; }
.guide-grid p { margin:0; color:var(--muted); line-height:1.6; }
.families { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.families a { padding:7px 10px; border-radius:999px; background:var(--pale); color:var(--navy); font-weight:700; font-size:.82rem; text-decoration:none; }
.families a:hover,.families a:focus-visible { color:var(--blue2); text-decoration:underline; }
.faq { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.faq h2 { margin:0 0 12px; font-size:1.3rem; color:var(--navy); }
.faq details { border-top:1px solid var(--line); padding:14px 2px; }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; color:var(--navy); font-weight:800; }
.faq details p { margin:10px 0 2px; max-width:920px; color:var(--muted); line-height:1.65; }
.results-head { display:flex; justify-content:space-between; gap:20px; align-items:start; }
.speed-chip { margin:0; white-space:nowrap; padding:8px 12px; border-radius:999px; background:#e9f4fb; color:var(--blue); font-weight:700; }
.result-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; align-items:stretch; }
.result-card { position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; padding:20px; background:linear-gradient(180deg,#fff,#fbfdff); transition:transform .16s,box-shadow .16s; }.result-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(13,55,85,.1)}.result-card.recommended { border:2px solid var(--blue2); box-shadow:0 10px 28px rgba(8,116,185,.1); }
.badges { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; min-height:20px; }.badge { padding:3px 7px; border-radius:999px; background:#e7f3fb; color:var(--blue); font-size:.68rem; font-weight:800; text-transform:uppercase; }
dl { margin:12px 0; } dl div { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #edf0f2; padding:6px 0; } dt { color:var(--muted); } dd { margin:0; font-weight:700; }
.total { margin-top:auto; color:var(--blue); font-weight:850; font-size:1.55rem; }.total small { display:block; color:var(--muted); font-size:.75rem; font-weight:500; }
.speed-note { padding:8px 10px; border-radius:6px; background:#fff7e8; color:#614000; font-size:.82rem; }
.headroom-note { padding:8px 10px; border-radius:6px; background:#f3f6f8; color:#394b59; font-size:.82rem; }.confidence { color:var(--muted); font-size:.78rem; border-top:1px solid var(--line); padding-top:9px; }
.advisor-summary { position:relative; overflow:hidden; margin-top:18px; padding:20px 22px; color:white; background:linear-gradient(135deg,var(--navy),var(--blue)); border-radius:13px; }.advisor-summary::after{content:"✓";position:absolute;right:18px;top:5px;font-size:5rem;font-weight:900;color:rgba(255,255,255,.07)}.advisor-summary h2 { margin:3px 0 5px; font-size:1.55rem; }.advisor-summary p:last-child { position:relative;z-index:1;margin:0;max-width:850px;color:#e5f3fb; }
.why { margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#f8fafb; }.why h3 { margin-bottom:4px; }.why p { margin:0; }
.equation { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }.equation span { padding:7px 9px; background:white; border:1px solid var(--line); border-radius:6px; font-weight:700; }
.notice { margin-top:16px; padding:16px; background:#fff7e8; border:1px solid #e8c98e; border-radius:8px; }.notice p { margin-bottom:0; }.notice--stop { border-color:#c86f6f; background:#fff1f1; }
.replacement { margin-top:24px; padding-top:20px; border-top:2px solid var(--line); }.replacement h2 { margin-top:4px; }
.promise { display:grid; grid-template-columns:54px 1fr; gap:18px; align-items:start; }.promise-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#e8f7f1;color:var(--green);font-size:1.45rem;font-weight:900}.promise .eyebrow{color:var(--blue2);margin-bottom:4px}.promise h2 { margin-top:0; }.promise p:last-child { margin-bottom:0; }.promise a{color:var(--blue2);font-weight:750;text-underline-offset:3px}
[hidden] { display:none !important; }
@media (max-width:860px) { .hero{grid-template-columns:1fr;gap:28px}.hero-points{grid-template-columns:repeat(3,1fr)}.hero-points span{display:grid;gap:3px;align-content:start}.hero-points span{border-top:0;border-left:1px solid rgba(255,255,255,.13)}.hero-points span:first-child{border-left:0}.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px) { .shell{padding:16px 12px 48px}.hero{padding:30px 24px;border-radius:18px}.hero h1,.hero .hero-title{font-size:2.7rem}.hero-points{grid-template-columns:1fr}.hero-points span{display:flex;border-left:0;border-top:1px solid rgba(255,255,255,.13)}.hero-points span:first-child{border-top:0}.step{grid-template-columns:38px 1fr;gap:13px;padding:22px 18px}.step-number{width:34px;height:34px;border-radius:10px}.grid-2,.grid-3,.result-grid,.guide-grid{grid-template-columns:1fr}.results,.promise,.buying-guide{padding:22px 18px}.results-head{display:block}.speed-chip{display:inline-block;margin-top:8px}.guide-facts div{grid-template-columns:1fr;gap:2px}.promise{grid-template-columns:42px 1fr}.promise-mark{width:40px;height:40px;border-radius:11px}.choice-row{display:grid;grid-template-columns:1fr}.choice{width:100%} }
@media (max-width:430px) { .hero h1,.hero .hero-title{font-size:2.25rem}.step{grid-template-columns:1fr}.step-number{margin-bottom:2px}.results-head h2{font-size:1.25rem}.advisor-summary h2{font-size:1.3rem}.equation{align-items:stretch}.equation span{flex:1 1 100%;text-align:center}.equation b{text-align:center}.promise{grid-template-columns:1fr}.result-card{padding:18px} }

/* Purchasing controls */
.add-to-cart {
  margin-top: 1rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 8px;
  background: #0b4f8a;
  color: #fff;
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
}
.add-to-cart:hover { background: #083c69; }
.add-to-cart:disabled { background: #7b8c9b; cursor: default; }
.add-to-cart:focus-visible { outline: 3px solid #16202a; outline-offset: 2px; }

.cart-confirmation {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #b7d3c2;
  border-left: 4px solid #1d7a4c;
  border-radius: 8px;
  background: #f2fbf6;
}
.cart-confirmation h3 { margin: 0.25rem 0 0.5rem; font-size: 1rem; line-height: 1.35; }
.cart-confirmation .total { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 700; }
.cart-confirmation ul { margin: 0 0 0.75rem; padding-left: 1.1rem; }
.cart-confirmation li { font-size: 0.9rem; line-height: 1.45; }
.cart-link { font-weight: 650; }

.cart-error {
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  background: #fdf0f0;
  border-left: 4px solid #b3261e;
  font-size: 0.9rem;
}

/* Hero family sentence and the results instruction */
.lede--families {
  margin-top: -0.35rem;
  font-size: 0.95rem;
  opacity: 0.9;
}
.results-instruction {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid #0b4f8a;
  background: #eef5fb;
  border-radius: 6px;
  font-weight: 600;
}

/* Embedded on tekboost.com (?host-guide=1)
   The host page renders the buying guide, the five FAQs and the four family links
   in its own server HTML, so the app hides its copies and the customer sees each
   exactly once. A standalone visit to this URL keeps everything. */
.host-guide .buying-guide,
.host-guide .promise {
  display: none;
}