:root{--bg:#07111f;--panel:#0e1a2d;--cyan:#00d5ff;--green:#70ff9d;--amber:#ffd166;--text:#eaf7ff;--muted:#9fb5c8;--line:rgba(0,213,255,.25)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 20% 0,rgba(0,213,255,.18),transparent 30%),linear-gradient(135deg,#02040b,#07111f 55%,#03040a);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial;color:var(--text);line-height:1.55}
.wrap{max-width:1120px;margin:0 auto;padding:28px;padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(40px,env(safe-area-inset-bottom));padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
.hero{padding:60px 0 36px}
.eyebrow{color:var(--cyan);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
h1{font-size:clamp(34px,5.5vw,64px);line-height:.96;letter-spacing:-.05em;margin:12px 0}
h2{font-size:24px;letter-spacing:-.02em;margin-top:28px;margin-bottom:8px}
h3{font-size:18px;margin-top:18px;margin-bottom:6px}
.lead{font-size:19px;color:#cfeeff;max-width:780px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 4;background:rgba(14,26,45,.78);border:1px solid var(--line);border-radius:22px;padding:22px}
.wide{grid-column:span 8}
.full{grid-column:span 12}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;padding:14px 18px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(0,213,255,.2),rgba(112,255,157,.12));color:var(--text);font-weight:800;text-decoration:none}
.btn.secondary{background:rgba(255,255,255,.04)}
.muted{color:var(--muted)}
.price{font-size:44px;font-weight:900;letter-spacing:-.05em}
.pill{display:inline-block;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);padding:5px 9px;border-radius:999px;font-size:12px;color:#dff8ff}
.warn{border-color:rgba(255,209,102,.35);background:rgba(255,209,102,.08)}
ul,ol{margin:8px 0 8px 18px}
li{margin:6px 0}
.footer{color:var(--muted);font-size:13px;margin:36px 0 12px;text-align:center;line-height:1.6}
.footer a,.footer .current{color:var(--muted);display:inline-block;padding:6px 6px;margin:2px 0}
.notice{background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.28);border-radius:18px;padding:16px}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
@media(max-width:850px){.card,.wide{grid-column:span 12}.wrap{padding:18px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(48px,env(safe-area-inset-bottom));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}h1{font-size:42px}}
.footer .current{color:var(--cyan);font-weight:700;border-bottom:1px dotted var(--cyan)}

/* Tables (sample-report.html) */
table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--cyan);font-weight:700;letter-spacing:.02em}

/* Mobile: stack 5-column findings table as labeled blocks, no HTML changes needed.
   Hardcoded labels match sample-report.html's <thead> order. */
@media(max-width:700px){
  table thead{display:none}
  table,table tbody,table tr,table td{display:block;width:100%}
  table tr{padding:12px 0;border-bottom:1px solid var(--line)}
  table tr:last-child{border-bottom:0}
  table td{padding:3px 0;border:none}
  table td:nth-of-type(1)::before{content:"Priority: ";color:var(--cyan);font-weight:700}
  table td:nth-of-type(2)::before{content:"Area: ";color:var(--cyan);font-weight:700}
  table td:nth-of-type(3)::before{content:"Finding: ";color:var(--cyan);font-weight:700}
  table td:nth-of-type(4)::before{content:"Why it matters: ";color:var(--cyan);font-weight:700}
  table td:nth-of-type(5)::before{content:"Next step: ";color:var(--cyan);font-weight:700}

  /* Footer: bigger tap targets, more line-height so wrapped items don't sit
     immediately below the previous line. Mitigates Home→Authorization mistap. */
  .footer{line-height:2.4}
  .footer a,.footer .current{padding:8px 8px;margin:3px 0}
}