:root{
    --abyss:#01040D;       /* page base */
    --deep:#04091A;        /* raised sections */
    --surface:#070D1D;     /* cards */
    --elevated:#0B1326;    /* lifted fields / hover */
    --signal:#4A9BFF;      /* primary accent */
    --royal:#2E72E6;       /* borders / outline */
    --core-white:#CFE3FF;  /* lit core point */
    --cool-white:#F0F4FD;  /* headlines */
    --ink:#CFD7E6;         /* body */
    --mute:#8A95AB;        /* secondary */
    --faint:#5A647B;       /* labels / disabled */
    --line:rgba(120,150,205,.12);
    --line-2:rgba(120,150,205,.24);
    --glow:rgba(74,155,255,.55);
    --radius:18px;
    --pill:999px;
    --display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
    --body:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--abyss);color:var(--ink);
    font-family:var(--body);font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;min-height:100vh;
  }
  #netfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
  .glow{position:fixed;z-index:0;left:50%;top:-220px;transform:translateX(-50%);width:780px;height:780px;
    background:radial-gradient(circle, var(--glow), rgba(74,155,255,0) 60%);filter:blur(12px);opacity:.45;pointer-events:none}
  .wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:48px 20px 60px}

  /* hero */
  .hero{text-align:center;margin:6px 0 36px}
  .hero-logo{display:block;width:198px;max-width:64%;height:auto;margin:0 auto 24px}
  .kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--signal);margin-bottom:16px}
  .kicker .d{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(74,155,255,.16)}
  .hero h1{font-family:var(--display);font-weight:500;font-size:clamp(30px,5vw,46px);line-height:1.1;margin:0 0 14px;letter-spacing:-.01em;color:var(--cool-white)}
  .hero p{max-width:570px;margin:0 auto;color:var(--mute);font-size:16px}

  /* cards */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin:18px 0;box-shadow:0 24px 70px rgba(0,0,0,.45)}
  .card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
  .card-head h2{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:0;color:var(--cool-white)}
  .card-head .hint{font-size:12.5px;color:var(--mute)}

  /* price list */
  .price-grid{width:100%;border-collapse:collapse;font-size:14.5px}
  .price-grid th{font-family:var(--display);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:right;padding:8px 10px;border-bottom:1px solid var(--line)}
  .price-grid th:first-child{text-align:left}
  .price-grid td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
  .price-grid td:first-child{text-align:left;font-weight:700;color:var(--cool-white);font-variant-numeric:normal}
  .price-grid tr:last-child td{border-bottom:none}
  .price-grid .na{color:var(--faint)}
  .fees{margin-top:14px;font-size:12.5px;color:var(--mute);line-height:1.7}
  .fees b{color:var(--ink);font-weight:700}

  /* form */
  form{margin:0}
  .section-head{display:flex;align-items:center;gap:11px;margin:6px 0 16px}
  .idx{font-family:var(--display);font-weight:300;font-size:14px;letter-spacing:.1em;color:var(--signal)}
  .section-label{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cool-white)}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .grid .full{grid-column:1 / -1}
  .field{display:flex;flex-direction:column;gap:6px}
  label{font-size:12px;color:var(--mute);font-weight:400;letter-spacing:.02em}
  label .req{color:var(--signal)}
  input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
    width:100%;background:var(--elevated);border:1px solid var(--line-2);border-radius:12px;
    color:var(--cool-white);font-family:var(--body);font-size:15px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
  textarea{min-height:92px;resize:vertical}
  input::placeholder,textarea::placeholder{color:var(--faint)}
  input:focus,select:focus,textarea:focus{border-color:var(--signal);box-shadow:0 0 0 3px rgba(74,155,255,.18)}
  select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 20px) 19px,calc(100% - 14px) 19px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
  .divider{height:1px;background:var(--line);margin:24px 0}

  /* order grid */
  .order-table{width:100%;border-collapse:collapse}
  .order-table th{font-family:var(--display);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:right;padding:6px 8px 12px}
  .order-table th:first-child{text-align:left}
  .order-table td{padding:9px 8px;border-top:1px solid var(--line);vertical-align:middle;text-align:right}
  .order-table td:first-child{text-align:left}
  .pname{font-weight:700;color:var(--cool-white)}
  .psize{color:var(--mute);font-size:13px}
  .pprice{color:var(--mute);font-variant-numeric:tabular-nums}
  .qty{width:74px;text-align:center;padding:9px 8px}
  .line-total{font-variant-numeric:tabular-nums;color:var(--ink);min-width:84px;display:inline-block}

  .toggle-row{display:flex;gap:10px;flex-wrap:wrap}
  .pill-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:var(--pill);padding:9px 16px;cursor:pointer;font-size:14px;color:var(--mute);user-select:none;transition:.15s;position:relative}
  .pill-btn input{position:absolute;opacity:0;pointer-events:none}
  .pill-btn:hover{border-color:var(--royal)}
  .pill-btn.on{border-color:var(--signal);color:var(--cool-white);background:rgba(74,155,255,.10)}

  .estimate{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:16px 18px;background:var(--elevated);border:1px solid var(--line-2);border-radius:14px}
  .estimate .lab{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  .estimate .val{font-family:var(--display);font-weight:400;font-size:26px;color:var(--cool-white);font-variant-numeric:tabular-nums;letter-spacing:.01em}
  .estimate small{display:block;font-family:var(--body);font-weight:400;font-size:11px;letter-spacing:0;text-transform:none;color:var(--mute);margin-top:3px}

  .consent{display:flex;gap:12px;align-items:flex-start;margin:22px 0 4px;font-size:12px;color:var(--mute);line-height:1.55}
  .consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--signal);flex:0 0 auto}

  .submit{width:100%;margin-top:18px;background:var(--signal);color:var(--abyss);border:none;border-radius:var(--pill);
    font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
    padding:17px 20px;cursor:pointer;transition:transform .12s,box-shadow .2s,filter .2s;box-shadow:0 14px 34px rgba(74,155,255,.32)}
  .submit:hover{filter:brightness(1.07);box-shadow:0 18px 46px rgba(74,155,255,.44)}
  .submit:active{transform:translateY(1px)}
  .footnote{text-align:center;color:var(--mute);font-size:11.5px;margin-top:18px;line-height:1.7}

  footer{position:relative;z-index:1;text-align:center;color:var(--mute);font-size:12px;padding:28px 20px 8px;letter-spacing:.02em}
  footer .sep{opacity:.4;margin:0 8px}
  footer a{color:var(--signal);text-decoration:none}
  .compliance{max-width:620px;margin:10px auto 0;color:var(--faint);font-size:10.5px;line-height:1.6;letter-spacing:.02em}

  /* confirmation */
  .confirm{display:none;text-align:center;padding:34px 24px}
  .confirm.show{display:block;animation:rise .45s ease}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .confirm .clogo{width:150px;height:auto;margin:0 auto 20px;display:block;opacity:.96}
  .confirm h2{font-family:var(--display);font-weight:600;font-size:25px;margin:6px 0 8px;color:var(--cool-white)}
  .confirm p{color:var(--mute);max-width:480px;margin:0 auto}

  @media (max-width:620px){
    .grid{grid-template-columns:1fr}
    .card{padding:22px 18px}
    .order-table th:nth-child(2),.order-table td:nth-child(2){display:none}
  }

/* ---------- product pages ---------- */
.backlink{display:inline-block;color:var(--mute);font-size:13px;text-decoration:none;margin-bottom:8px;letter-spacing:.02em}
.backlink:hover{color:var(--signal)}
.lede{max-width:680px;margin:0 auto;color:var(--ink);font-size:16px;line-height:1.7}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcard{background:var(--elevated);border:1px solid var(--line);border-radius:12px;padding:16px}
.pcard h4{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.03em;margin:0 0 6px;color:var(--cool-white)}
.pcard p{margin:0;font-size:13px;color:var(--mute);line-height:1.6}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill-static{border:1px solid var(--line-2);border-radius:var(--pill);padding:7px 15px;font-size:13px;color:var(--cool-white);font-family:var(--display);font-weight:500;letter-spacing:.06em}
.tag{border:1px solid var(--line-2);border-radius:var(--pill);padding:7px 15px;font-size:13px;color:var(--ink)}
.note{font-size:12px;color:var(--mute);margin-top:14px;line-height:1.6}
.spec{width:100%;border-collapse:collapse;font-size:13.5px}
.spec th{font-family:var(--display);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.spec td{padding:11px 10px;border-bottom:1px solid var(--line);color:var(--ink);text-align:left;vertical-align:top}
.spec td:first-child{color:var(--cool-white);font-weight:600;white-space:nowrap}
.spec .price{color:var(--cool-white);font-variant-numeric:tabular-nums;font-weight:600}
.spec tr:last-child td{border-bottom:none}
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.badge{border:1px solid var(--line-2);border-radius:10px;padding:10px 18px;text-align:center}
.badge b{display:block;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--cool-white)}
.badge span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cta-row{text-align:center;margin-top:20px}
.cta-btn{display:inline-block;background:var(--signal);color:var(--abyss);border-radius:var(--pill);font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:16px 34px;text-decoration:none;box-shadow:0 14px 34px rgba(74,155,255,.30)}
.cta-btn:hover{filter:brightness(1.07)}
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.prod{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none;transition:border-color .15s,transform .15s}
.prod:hover{border-color:var(--signal);transform:translateY(-2px)}
.prod .cat{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal)}
.prod h3{font-family:var(--display);font-weight:600;font-size:22px;margin:8px 0;color:var(--cool-white)}
.prod p{margin:0 0 12px;font-size:13.5px;color:var(--mute);line-height:1.6}
.prod .more{font-size:13px;color:var(--signal);font-weight:600}
@media(max-width:620px){.pgrid{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}}

/* ---------- confirmation receipt ---------- */
.receipt{max-width:460px;margin:26px auto 0;text-align:left;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:22px 22px 18px}
.receipt .r-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.receipt .r-title{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal)}
.receipt .r-ref{font-size:11.5px;letter-spacing:.06em;color:var(--faint);white-space:nowrap}
.receipt .r-items{width:100%;border-collapse:collapse;margin-top:4px}
.receipt .r-items td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.receipt .ri-p{color:var(--cool-white);font-weight:600;font-size:14px}
.receipt .ri-s{color:var(--mute);font-size:13px}
.receipt .ri-q{text-align:right;white-space:nowrap;color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.receipt .r-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 0}
.receipt .r-total span{color:var(--ink);font-size:14px}
.receipt .r-total strong{font-family:var(--display);font-weight:600;font-size:19px;color:var(--cool-white);
  font-variant-numeric:tabular-nums}
.receipt .r-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--line)}
.receipt .r-meta dt{color:var(--faint);font-size:12px;white-space:nowrap}
.receipt .r-meta dd{margin:0;color:var(--ink);font-size:12.5px;line-height:1.5}
.receipt .r-note{margin:14px 0 0!important;color:var(--faint)!important;font-size:11px;line-height:1.6;max-width:none!important}
.receipt .r-actions{margin-top:18px}
.receipt .r-btn{width:100%;background:transparent;color:var(--signal);border:1px solid var(--royal);
  border-radius:var(--pill);font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;padding:13px 18px;cursor:pointer;transition:background .15s,border-color .15s}
.receipt .r-btn:hover{background:rgba(74,155,255,.1);border-color:var(--signal)}

/* print-only letterhead + footer: never shown on screen */
.print-head,.print-foot{display:none}

/* ---------- print: branded one-page receipt on white ----------
   @page margin MUST stay 0 — Chrome draws its date/URL/page-number
   header and footer inside the page margin box, so any non-zero
   margin here puts "7/20/26 … 1/2 … order.bionn.io" back on the
   clinic's receipt. Page padding is applied to .confirm instead. */
@media print{
  @page{margin:0;size:letter portrait}
  /* body carries min-height:100vh for the screen layout. In print 100vh == one
     full page, so the body is padded out to exactly one page height and the
     slightest sub-pixel rounding spills a blank second page. Must be reset. */
  html,body{background:#fff!important;color:#111!important;margin:0!important;padding:0!important;
    min-height:0!important;height:auto!important;overflow:visible!important}
  #netfield,.glow,.hero,footer,.r-actions,#pricingCard,#orderForm{display:none!important}
  .wrap{padding:0!important;margin:0!important;max-width:none!important;min-height:0!important;height:auto!important}

  /* the confirmation block IS the printed document */
  .confirm{display:block!important;opacity:1!important;animation:none!important;transform:none!important;
    text-align:left!important;max-width:none!important;margin:0!important;
    padding:14mm 15mm 12mm!important;background:#fff!important;border:none!important;box-shadow:none!important}
  /* on-screen reassurance copy is noise on a printed receipt */
  .confirm .clogo,.confirm h2,.confirm p{display:none!important}

  /* letterhead */
  .print-head{display:flex!important;align-items:flex-end;justify-content:space-between;gap:16px;
    padding-bottom:9px;border-bottom:2px solid #2E72E6}
  /* brightness(0) forces every non-transparent pixel to solid black while
     preserving alpha — reliable for the white-on-transparent logo PNG.
     invert(1) rendered it washed-out grey on paper. */
  .print-head .ph-logo{width:124px;height:auto;filter:brightness(0)}
  .print-head .ph-meta{text-align:right;line-height:1.5}
  .print-head .ph-doc{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:10.5px;
    letter-spacing:.20em;text-transform:uppercase;color:#2E72E6}
  .print-head .ph-date{display:block;font-size:11px;color:#6b7688}

  /* receipt body — back into normal flow (absolute positioning used to
     overlay this on the letterhead and spill a blank second page) */
  .receipt{position:static!important;width:auto!important;max-width:none!important;margin:0!important;
    background:#fff!important;border:none!important;border-radius:0!important;
    padding:0!important;box-shadow:none!important}
  .receipt .r-head{margin-top:15px!important;padding-bottom:7px!important;border-bottom:1px solid #dbe2ee!important}
  .receipt .r-title{color:#111!important;font-size:11px!important;letter-spacing:.18em!important}
  .receipt .r-ref{color:#6b7688!important;font-size:11px!important}
  .receipt .r-items td{padding:9px 0!important;border-bottom:1px solid #e6ebf3!important}
  .receipt .ri-p{color:#111!important;font-size:13.5px!important}
  .receipt .ri-s{color:#5a647b!important;font-size:12.5px!important}
  .receipt .ri-q{color:#111!important;font-size:13.5px!important}
  .receipt .r-total{margin-top:2px!important;padding-top:11px!important;border-top:2px solid #111!important}
  .receipt .r-total span{color:#333!important;font-size:13px!important}
  .receipt .r-total strong{color:#111!important;font-size:19px!important}
  .receipt .r-meta{margin-top:16px!important;padding-top:14px!important;border-top:1px solid #e6ebf3!important}
  .receipt .r-meta dt{color:#6b7688!important;font-size:11px!important}
  .receipt .r-meta dd{color:#222!important;font-size:11.5px!important}
  .receipt .r-note{color:#8a95ab!important;font-size:10px!important;margin-top:14px!important}

  /* footer */
  .print-foot{display:block!important;margin-top:20px;padding-top:10px;border-top:1px solid #e6ebf3;
    font-size:10px;line-height:1.65;color:#6b7688}
  .print-foot strong{color:#111;font-weight:600}

  /* never split the receipt across pages */
  .print-head,.receipt,.print-foot{break-inside:avoid;page-break-inside:avoid}
}