:root{
  /* Brand */
  --brand-primary:#00457C;
  --brand-secondary:#5DBFC0;
  --brand-hover:#68717a;
  --on-primary:#ffffff;
  --on-secondary:#083145;

  /* Base palette */
  --color-dark:#0B2A4A;
  --color-text:#2a2a2a;
  --color-muted:#6f7785;
  --color-bg:#f6f8fb;
  --color-card:#ffffff;

  /* Layout & effects */
  --radius:10px;
  --border-soft:#e6edf5;
  --shadow-soft:0 6px 20px rgba(0,45,90,.06);
  --shadow-tiny:0 2px 8px rgba(0,0,0,.06);

  /* Banners */
  --site-banner-top-h:56px;
  --site-banner-bottom-h:48px;

  /* BOM column widths */
  --sku-w:120px;
  --qty-min:3.5ch;
}

/* ========== Base ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--brand-primary);text-decoration:none}
a:hover{color:var(--brand-hover);text-decoration:underline}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid color-mix(in srgb, var(--brand-primary) 60%, white);
  outline-offset:2px;border-radius:8px;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.section{padding:56px 0}
h1,h2,h3{color:var(--color-dark);letter-spacing:.2px}
h1{font-weight:700}

/* ========== Cards / Surfaces ========== */
.card{
  background:var(--color-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:20px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,45,90,.08)}
.results-surface{
  background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);padding:24px;
  background:radial-gradient(1200px 420px at 85% -180px,
             color-mix(in srgb,var(--brand-primary) 10%,white) 0%,
             transparent 70%),#fff;
}

/* ========== Hero ========== */
.hero{
  background:radial-gradient(1300px 500px at 80% -200px,rgba(17,114,222,.15),transparent),#fff;
  padding:72px 24px;border-radius:var(--radius);box-shadow:var(--shadow-soft);
}
.hero h1{margin:0 0 12px;font-size:clamp(28px,4.5vw,44px);line-height:1.2}
.hero p{color:var(--color-muted);max-width:60ch;margin:0 0 24px}

/* ========== Buttons (unified heights) ========== */
.btn{
  appearance:none;border:2px solid transparent;border-radius:var(--radius);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;line-height:1;padding:12px 18px;cursor:pointer;text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
  color:inherit;
}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn--block{min-width:100%;height:56px;padding:14px 40px}
.btn--wide{height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.hero-actions .btn{height:44px}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.4rem;
}

.btn--primary {
  border-width: 1px;
  border-style: solid;
}

/* Primary */
.btn--primary{
  background:var(--brand-primary);border-color:var(--brand-primary);color:var(--on-primary);
  box-shadow:0 8px 18px rgba(0,69,124,.18);
}
.btn--primary:hover,.btn--primary:focus-visible{
  background:var(--brand-hover);border-color:var(--brand-hover);color:#fff;transform:translateY(-1px);
}
.btn--primary[aria-pressed="true"], .btn--primary.is-active{
  background:var(--brand-secondary);border-color:var(--brand-secondary);color:var(--on-secondary);
}

/* Outline */
.btn--outline{background:#fff;color:var(--brand-primary);border-color:var(--brand-primary)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff}
.btn--outline.is-active{background:var(--brand-secondary);border-color:var(--brand-secondary);color:var(--on-secondary)}

/* ========== Forms ========== */
form{
  background:#fff;padding:24px;border-radius:var(--radius);
  box-shadow:var(--shadow-soft);border:1px solid var(--border-soft)
}
label{display:block;margin-top:14px;font-weight:600;color:var(--color-dark)}
input,select,textarea{
  width:100%;min-height:44px;padding:12px 14px;margin-top:8px;border-radius:var(--radius);
  border:1px solid #dbe5ef;background:#fbfdff;color:var(--color-text);
}
input::placeholder{color:#9aa3b2}
input:hover,select:hover,textarea:hover{border-color:#c9d6e6}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-secondary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-secondary) 25%, white);
}

/* Checkboxes */
label.checkbox, label.mt-3{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:600}
label.checkbox input[type="checkbox"], label.mt-3 input[type="checkbox"]{
  width:16px;height:16px;margin:0;accent-color:var(--brand-primary);border-radius:3px;vertical-align:middle;
}
.form-actions label.checkbox input[type="checkbox"]{width:16px;height:16px}
@media (max-width:560px),(pointer:coarse){
  label.checkbox, label.mt-3{gap:10px}
  label.checkbox input[type="checkbox"], label.mt-3 input[type="checkbox"]{width:22px;height:22px}
}

/* Actions row */
.form-actions{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;flex-wrap:wrap;
}
.form-actions .btn{flex:0 0 auto}
@media (max-width:560px){
  .form-actions{flex-direction:column;align-items:flex-start}
  .form-actions .btn{width:100%}
}

/* ========== Mode switch (segmented) ========== */
.view-modes{
  --vm-bg:#f3f6f9;
  --vm-border:#e6edf5;
  --vm-active-bg:var(--brand-primary);
  --vm-active-fg:#fff;
  --vm-fg:#0f172a;
  --vm-h:24px;

  position:relative;
  display:inline-grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  padding:2px 0px;
  border:1px solid var(--vm-border);
  background:var(--vm-bg);
  border-radius:999px;
  user-select:none;
  margin-inline:auto;
}

.view-modes::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:6px;
  inset:2px 0;
  width:calc(100%/3);
  transform:translateX(calc(var(--i,0)*100%));
  background:var(--vm-active-bg);
  border-radius:999px;
  box-shadow:var(--shadow-tiny);
  transition:transform 220ms ease, background 120ms ease, width 220ms ease;
  z-index:0;
}

.view-modes input[type="radio"]{
  position:absolute!important;
  opacity:0;
  pointer-events:none;
}

.view-modes label{
  position:relative;
  z-index:1;
  display:flex;
  align-items:baseline;
  justify-content:center;
  height:var(--vm-h);
  padding:0 12px;
  min-width:0;
  text-align:center;
  cursor:pointer;
  border-radius:999px;
  background:transparent;
  color:var(--vm-fg);
  font-weight:600;
  font-size:0.95rem;
  line-height:1;
  transition:color 150ms ease;
}

.view-modes label:hover{
  color:var(--brand-hover);
}

.view-modes input:checked + label{
  color:var(--vm-fg);
}

.view-modes.vm-ready input:checked + label{
  color:var(--vm-active-fg);
}

/* Mobile: stacked, full-width */
@media (max-width:560px){
  .view-modes{
    display:grid;
    width:100%;
    margin:8px 0 12px;
    padding:4px;
    --vm-h:40px;
    --vm-bg:#eef2f7;
    --vm-border:#dbe5ef;
  }

  .view-modes::before{
    top:4px;
    bottom:4px;
    left:4px;
    width:calc((100% - 8px)/3);
  }

  .view-modes label{
    min-width:0;
    padding:0 10px;
    font-size:.95rem;
  }
}

@media (max-width:360px){
  .view-modes{--vm-h:36px}
  .view-modes label{font-size:.9rem}
}
/* ========== Banners & anchors ========== */
.site-banner--top{
  position:fixed;left:0;right:0;top:0;z-index:999;
  background:#fff;color:#0B2A4A;border-bottom:1px solid var(--border-soft);
}
.site-banner__inner{
  max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.site-banner__brand img.brand-logo{height:32px;width:auto;display:block}
@media (max-width:480px){.site-banner__brand img.brand-logo{height:28px}}
.site-banner__links{display:flex;gap:16px;flex-wrap:wrap}
.site-banner__cta{border-radius:999px;height:40px;padding:0 20px;font-weight:700;color:#fff;background:#00457C;border:2px solid #00457C}
.site-banner__cta:hover{background:#68717a;border-color:#68717a}

.site-banner--bottom{
  position:fixed;left:0;right:0;bottom:0;z-index:999;background:var(--brand-primary);color:var(--on-primary);
  border-top:1px solid color-mix(in srgb, var(--brand-primary), black 15%);box-shadow:0 -8px 20px rgba(0,0,0,.06);
  height:var(--site-banner-bottom-h);
}
#form{scroll-margin-top:calc(var(--site-banner-top-h) + 8px)}
main,.container{padding-bottom:calc(var(--site-banner-bottom-h) + 16px)}
@supports (padding: max(0px)){
  main,.container{padding-bottom:max(calc(var(--site-banner-bottom-h) + 16px), env(safe-area-inset-bottom))}
}
.site-banner--bottom a{color:var(--on-primary);text-decoration:underline;text-underline-offset:2px}
.site-banner--bottom .site-banner__cta{background:#fff;color:var(--brand-primary);border-color:#fff}
.site-banner--bottom .site-banner__cta:hover{background:color-mix(in srgb, #fff 90%, var(--brand-primary));border-color:transparent}

/* ========== BOM list ========== */
.bom-head{
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;
  color:#6b778a;padding:4px 0 8px;border-bottom:1px solid #eef2f7;margin-bottom:4px;
}
.bom-list{list-style:none;margin:0;padding:0}

/* Align columns: Product | SKU | QTY */
.results .bom-head, .results .bom-list li,
.results-surface .bom-head, .results-surface .bom-list li{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--sku-w) minmax(var(--qty-min),auto);
  gap:16px;align-items:start;
}
.bom-list li{padding:10px 0;border-bottom:1px solid #eef2f7}
.bom-head span:nth-child(2){text-align:left}
.bom-head span:nth-child(3), .bom-list .qty{text-align:right}
.bom-list .qty{font-weight:700;min-width:3ch}
.bom-list .sku{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  text-transform:uppercase;color:#6b778a;font-size:.9rem;margin:0;display:block
}

/* Collapse SKU column on narrow */
@media (max-width:820px){
  .results .bom-head, .results .bom-list li,
  .results-surface .bom-head, .results-surface .bom-list li{
    grid-template-columns:1fr auto;
  }
  .bom-head span:nth-child(2){display:none}
  .bom-list .sku{grid-column:1 / -1;margin-top:2px;color:#6b778a}
  .bom-list li > :first-child{min-width:0;overflow-wrap:anywhere}
}

/* ========== Summary list ========== */
.summary-dl{display:grid;grid-template-columns:180px 1fr;gap:6px 16px;margin:12px 0 0}
.summary-dl dt{color:var(--color-muted);font-weight:700}
.summary-dl dd{margin:0}

/* ========== Results / BOM grid (single source of truth) ========== */
.results{max-width:1200px}
.results .bom-grid, .results-surface .bom-grid{
  display:grid;gap:24px;grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:1199px){
  .results .bom-grid, .results-surface .bom-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:759px){
  .results .bom-grid, .results-surface .bom-grid{grid-template-columns:1fr}
}
.bom-grid > .card{
  margin:0;width:auto;grid-column:auto;display:flex;flex-direction:column;padding:16px;overflow:hidden;
}
.bom-note {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* ========== Utilities ========== */
.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.center{text-align:center}
.hidden{display:none}
.is-hidden,[aria-hidden="true"]{display:none !important}
.mt-2{margin-top:8px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,1px,1px);white-space:nowrap;border:0}

/* ========== Error card ========== */
:root{--err:#b42318;--err-bg:#fef2f2;--err-border:#fecaca}
.card--error{
  border-color:var(--err-border);
  background:radial-gradient(700px 240px at 85% -120px, rgba(180,35,24,.06), transparent),#fff;
}
.error-title{margin:0 0 8px;color:var(--err)}
.error-list{margin:10px 0 0 18px}
.error-actions{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.error-help{margin-top:12px}
.error-help summary{cursor:pointer}
.field-error{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.15)!important}
.field-hint{color:var(--err);font-size:.9rem;margin-top:6px}

/* ========== Terms modal (above fixed footer) ========== */
.terms-modal,.terms-dialog,.modal--terms{
  position:fixed;inset:0;z-index:3000;
}
.terms-modal__footer{
  position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border-soft);padding:12px 16px;
}

/* ========== Print (compact 1-page) ========== */
@page{size:A4 portrait;margin:8mm}
@media print{
  html,body{background:#fff!important;font-size:11px;line-height:1.25}
  .container{max-width:none;padding:0!important}
  .section{padding:6px 0!important}
  .hero,.results-surface{background:none!important;box-shadow:none!important;border:0!important;padding:8px!important}
  .card{padding:8px!important;border:1px solid #e5e7eb;box-shadow:none!important;border-radius:8px}
  .site-banner,.site-banner--top,.site-banner--bottom,.hero .btn,nav,.btn,.banner,.footer,#request-pricing{display:none!important}

  .card, ul, li{break-inside:avoid;page-break-inside:avoid}

  .summary-dl{
    grid-template-columns:120px 1fr 120px 1fr;
    column-gap:12px;row-gap:4px;margin:6px 0 0;
  }

  .results .bom-grid, .results-surface .bom-grid{
    display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;
  }
  .bom-grid > .card{margin:0;padding:8px;break-inside:avoid;page-break-inside:avoid}
  .bom-grid > .card h2{font-size:12px;margin:0 0 4px}
  .bom-head{font-size:10px;padding:2px 0 4px;margin-bottom:2px}
  .bom-list li{padding:4px 0}
  .bom-list .sku{font-size:10px}

  :root{--sku-w:90px;--qty-min:3ch}
  .bom-head,.bom-list li{grid-template-columns:1fr var(--sku-w) minmax(var(--qty-min),auto)}
  body.print-fit{transform-origin:top left;transform:scale(var(--print-scale,1));width:calc(100% / var(--print-scale,1))}
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion:reduce){
  .btn,.card,.view-modes::before{transition:none}
  .btn--primary:hover{transform:none}
}

/* ========== Mobile polish (summary/buttons) ========== */
@media (max-width:560px){
  .hero{padding:16px 14px;border-radius:12px}
  .hero h1{font-size:22px;margin-bottom:6px}
  .hero p{margin:0 0 10px}
  .summary-dl{
    grid-template-columns:110px 1fr;column-gap:10px;row-gap:3px;margin-top:6px;font-size:.95rem;
  }
  .summary-dl dt{color:#475569}
  .hero-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
  .hero-actions .btn{width:100%;height:44px}
  .hero-actions{position:sticky;bottom:0;background:linear-gradient(to bottom, transparent, #fff 30%);padding-top:8px}
}

/* Force rounded corners on both index + process pages */
@media screen {
  /* Index page wrapper + the form itself */
  #form,
  #form form {
    border-radius: var(--radius) !important;
    overflow: hidden; /* prevents inner backgrounds/borders looking square */
  }

  /* Process page results surface */
  .results-surface {
    border-radius: var(--radius) !important;
    overflow: hidden;
  }
}