/* SEMIX Website UI (CSS) */
/* Brand palette derived from SEMIX profile + 4-color X identity */
:root{
  --brand-blue:#4285F6;
  --brand-yellow:#FABE07;
  --brand-green:#33A955;
  --brand-red:#EA4335;

  --ink:#0B1220;
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --surface:#f6f7fb;
  --surface-2:#eef2ff;
  --line:#e2e8f0;

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 16px 44px rgba(2, 6, 23, .14);
  --shadow-soft:0 10px 26px rgba(2, 6, 23, .10);

  --max:1180px;
  --gpos:0%;
  --gsize:320%;

  --gutter:1.25rem;
  --space:clamp(2.5rem, 4vw, 4.5rem);

  --focus: 0 0 0 4px rgba(66,133,246,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

img{max-width:100%; height:auto; display:block}

a{color:inherit}
a:hover{color:var(--brand-blue)}
a:focus{outline:none; box-shadow: var(--focus); border-radius: 10px}

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.75rem 1rem;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  z-index:9999;
}

.container{
  width:min(100% - (var(--gutter) * 2), var(--max));
  margin-inline:auto;
}

.site-header{

  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(226,232,240,.7);
}

.site-header::after{
  content:"";
  display:block;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green), var(--brand-yellow), var(--brand-red));
  background-size: var(--gsize) 100%;
  background-position: var(--gpos) 50%;
}
.site-header .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
}
.brand img{
  height:56px;
  width:auto;
  max-width:240px;
}
.brand strong{
  display:block;
  letter-spacing:.04em;
}
.brand span{
  display:block;
  font-size:.85rem;
  color:var(--muted);
}

.nav{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.nav a, .nav summary{
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  font-size:.95rem;
}
.nav a[aria-current="page"]{
  color:var(--brand-blue);
}

.nav .cta{
  display:flex;
  gap:.5rem;
  align-items:center;
}
.btn{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  justify-content:center;
  padding:.78rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  text-decoration:none;
  font-weight:700;
}
.btn-primary{
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green), var(--brand-yellow), var(--brand-red));
  
  background-size: var(--gsize) 100%;
  background-position: var(--gpos) 50%;color:#fff;
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover{filter:brightness(1.02)}
.btn-ghost{
  background:transparent;
}

.nav details{
  position:relative;
}
.nav summary{
  list-style:none;
  cursor:pointer;
}
.nav summary::-webkit-details-marker{display:none}
.nav details[open] summary{color:var(--brand-blue)}
.nav details ul{
  position:absolute;
  top:calc(100% + .75rem);
  left:0;
  margin:0;
  padding:.75rem;
  list-style:none;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 18rem;
}
.nav details ul a{
  display:block;
  padding:.55rem .6rem;
  border-radius:12px;
}
.nav details ul a:hover{
  background:var(--surface);
}

.mobile-menu{
  display:none;
}

.hero{
  position:relative;
  padding: calc(var(--space) * 1.05) 0 var(--space);
  overflow:hidden;
  background: radial-gradient(1200px 500px at 20% 10%, rgba(66,133,246,.18), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(51,169,85,.16), transparent 60%),
              radial-gradient(900px 500px at 60% 90%, rgba(250,190,7,.12), transparent 55%),
              linear-gradient(180deg, rgba(11,18,32,.04), rgba(11,18,32,0));
}
.hero .grid{
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items:center;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background:rgba(66,133,246,.10);
  border:1px solid rgba(66,133,246,.18);
  color:var(--ink);
  font-weight:700;
  font-size:.9rem;
}
.kicker em{
  font-style:normal;
  color:var(--brand-blue);
}

.hero h1{
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height:1.08;
  margin:.9rem 0 .9rem;
  letter-spacing:-.02em;
}
.hero p{
  margin:0 0 1rem;
  color:var(--muted);
  font-size: 1.08rem;
  max-width: 60ch;
}
.hero .actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.25rem;
}
.hero figure{
  margin:0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  border:1px solid rgba(226,232,240,.8);
}
.hero figure img{
  width:100%;
  height:auto;
}
.hero figcaption{
  padding:.85rem 1rem;
  background: rgba(255,255,255,.92);
  color: var(--muted);
  font-size:.95rem;
}

/* Program details table spacing */
.program-details{margin-top:1rem}


/* Taxonomy: risk themes (filters + tags) */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1rem 0 .5rem;
}
.filter-chip{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  border-radius:999px;
  padding:.55rem .85rem;
  font: inherit;
  font-weight:750;
  cursor:pointer;
}
.filter-chip:hover{background: var(--surface);}
.filter-chip.is-active,
.filter-chip[aria-pressed="true"]{
  background: var(--surface);
  border-color: rgba(2,6,23,.22);
  box-shadow: var(--shadow-soft);
}
.filter-chip:focus-visible{outline:none; box-shadow: var(--focus);}

.tag-row{
  margin-top:.85rem;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.32rem .6rem;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(148,163,184,.12);
  font-weight:700;
  font-size:.82rem;
  color: var(--text);
  text-decoration:none;
}
.tag:hover{background: rgba(148,163,184,.18);}
.tag .dot{
  width:.55rem;
  height:.55rem;
  border-radius:999px;
  display:inline-block;
}
.dot-measurement{background: var(--brand-blue);}
.dot-thermal{background: var(--brand-yellow);}
.dot-cleanliness{background: var(--brand-green);}
.dot-packaging{background: var(--brand-red);}
.dot-wear{background: var(--brand-blue);}
.dot-fiveaxis{background: var(--brand-green);}

/* Breadcrumbs */
.breadcrumb{
  margin:.85rem 0 0;
  color:var(--muted);
  font-size:.92rem;
}
.breadcrumb ol{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  align-items:center;
}
.breadcrumb li{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.breadcrumb li + li::before{
  content:"›";
  color: rgba(71,85,105,.6);
  margin-right:.35rem;
}
.breadcrumb a{
  color:var(--muted);
  text-decoration:none;
  font-weight:650;
}
.breadcrumb a:hover{color: var(--brand-blue);}


.trust{
  margin-top:1.1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .8rem;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--bg);
  font-weight:650;
  font-size:.92rem;
}
.pill i{
  width:.65rem;
  height:.65rem;
  border-radius:999px;
  display:inline-block;
}
.pill .b{background:var(--brand-blue)}
.pill .g{background:var(--brand-green)}
.pill .y{background:var(--brand-yellow)}
.pill .r{background:var(--brand-red)}

main section{
  padding: var(--space) 0;
}
section .eyebrow{
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand-blue);
  font-size:.85rem;
  margin:0 0 .65rem;
}
section h2{
  margin:.1rem 0 1rem;
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
  letter-spacing:-.01em;
}
section p{
  margin:.6rem 0;
  color:var(--muted);
}

.grid{
  display:grid;
  gap:1rem;
}
.grid.cards{
  grid-template-columns: repeat(12, 1fr);
}
.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1.2rem 1.2rem;
  box-shadow: var(--shadow-soft);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card strong{
  display:block;
  font-size:1.05rem;
  margin-bottom:.35rem;
}
.card p{margin:.35rem 0 0}
.card a{font-weight:700}
.card .meta{
  margin-top:.75rem;
  font-size:.92rem;
  color:var(--muted);
}

.card .flag{
  position:absolute;
  top:1.05rem;
  right:1.05rem;
  width:12px;
  height:12px;
  border-radius:999px;
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(66,133,246,.12);
}

.span-2{grid-column: span 2}
.span-3{grid-column: span 3}
.span-4{grid-column: span 4}
.span-6{grid-column: span 6}
.span-5{grid-column: span 5}
.span-7{grid-column: span 7}
.span-8{grid-column: span 8}
.span-12{grid-column: span 12}

.surface{
  background: linear-gradient(180deg, var(--surface), rgba(246,247,251,0));
  border-top:1px solid rgba(226,232,240,.65);
  border-bottom:1px solid rgba(226,232,240,.65);
}
.surface-2{
  background: radial-gradient(900px 400px at 20% 10%, rgba(66,133,246,.12), transparent 60%),
              radial-gradient(900px 400px at 80% 20%, rgba(51,169,85,.10), transparent 60%),
              var(--surface);
  border-top:1px solid rgba(226,232,240,.65);
  border-bottom:1px solid rgba(226,232,240,.65);
}

.list-check{
  padding-left: 1.1rem;
}
.list-check li{margin:.55rem 0; color:var(--muted)}
.list-check li strong{color:var(--text)}
.list-check li::marker{color: var(--brand-green)}

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items:start;
}

.figure-card{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background:var(--bg);
}
.figure-card figcaption{
  padding:1rem 1rem 1.1rem;
  color:var(--muted);
}
.figure-card figcaption strong{
  display:block;
  color:var(--text);
  margin-bottom:.35rem;
}

.timeline{
  display:grid;
  gap:1rem;
}
.step{
  display:grid;
  grid-template-columns: 70px 1fr;
  gap:1rem;
  align-items:start;
  padding:1.1rem;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.step .num{
  width:54px;
  height:54px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-green));
}
.step h3{
  margin:.1rem 0 .35rem;
  font-size:1.1rem;
}
.step p{margin:.25rem 0 0}

.faq details{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  background: var(--bg);
  box-shadow:none;
}
.faq details + details{margin-top:.75rem}
.faq summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:.6rem 0 0}

.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:.8rem;
}

footer{
  background: var(--ink);
  color: rgba(255,255,255,.88);
  padding: 3.2rem 0 2.2rem;
}
footer a{color:#fff}
footer a:hover{color: var(--brand-yellow)}
footer .grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  gap: 1.5rem;
}
footer h2{
  color:#fff;
  font-size:1.1rem;
  margin:0 0 .65rem;
}
footer h3{
  color:#fff;
  font-size:1rem;
  margin:1.1rem 0 .55rem;
}
footer address{font-style:normal}

footer p, footer li{color: rgba(255,255,255,.72)}
footer ul{padding-left: 1.1rem; margin:.4rem 0}
footer li{margin:.4rem 0}
footer .sub{
  margin-top:1.5rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:space-between;
  align-items:center;
  color: rgba(255,255,255,.65);
  font-size:.95rem;
}

/* Motion: reveal on scroll */
html.js [data-reveal]{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .7s ease}
html.js [data-reveal].is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal]{opacity:1; transform:none; transition:none}
}

/* Responsive */
@media (max-width: 980px){
  .hero .grid{grid-template-columns: 1fr}
  footer .grid{grid-template-columns: 1fr}
  .two-col{grid-template-columns: 1fr}
  .nav{display:none}
  .mobile-menu{display:block; position:relative}
  .brand img{height:44px; width:auto}

  .mobile-menu details{position:relative}

  .mobile-menu summary{
    cursor:pointer;
    list-style:none;
    font-weight:800;
    display:flex;
    align-items:center;
    gap:.5rem;
    line-height:1;
    padding:.48rem .95rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.74);
    backdrop-filter:saturate(160%) blur(12px);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
  }
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu summary::after{
    content:"▾";
    font-size:.9rem;
    opacity:.75;
    transform: translateY(-1px);
  }
  .mobile-menu details[open] summary{
    color:var(--brand-blue);
    border-color: rgba(66,133,246,.35);
  }
  .mobile-menu details[open] summary::after{
    transform: rotate(180deg) translateY(1px);
  }

  .mobile-menu details nav{
    position:absolute;
    right:0;
    top:calc(100% + .65rem);
    width:min(88vw, 360px);
    max-height:70vh;
    overflow:auto;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:.6rem;
  }
  .mobile-menu nav ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:.35rem;
  }
  .mobile-menu nav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.72rem .85rem;
    border-radius:12px;
    text-decoration:none;
    color:var(--text);
    background: var(--surface);
    border:1px solid rgba(226,232,240,.9);
  }
  .mobile-menu nav a:hover{
    background: rgba(66,133,246,.08);
    border-color: rgba(66,133,246,.18);
  }
  .mobile-menu nav a[href="rfq.html"]{
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-green), var(--brand-yellow), var(--brand-red));
    background-size: var(--gsize) 100%;
    background-position: var(--gpos) 50%;
    color:#fff;
    border-color: transparent;
    font-weight:800;
  }

  .grid.cards{grid-template-columns: 1fr}
  .span-4, .span-6, .span-8, .span-12{grid-column: 1 / -1}
}

/* Print (optional) */
@media print{
  .site-header, .btn, .mobile-menu, .filter-bar{display:none !important}
  footer{page-break-inside:avoid}
}



/* Tables */
table{
  width:100%;
  border-collapse: collapse;
  background: var(--bg);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
thead th{
  text-align:left;
  font-weight:800;
  background: var(--surface);
  padding:.85rem .9rem;
  border-bottom:1px solid var(--line);
}
tbody td{
  padding:.85rem .9rem;
  border-bottom:1px solid var(--line);
  color: var(--muted);
  vertical-align:top;
}
tbody tr:last-child td{border-bottom:none}
caption{
  text-align:left;
  padding:.85rem .9rem;
  font-weight:800;
  color: var(--text);
}
/* Inline code */
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.95em;
  background: rgba(148,163,184,.18);
  padding:.15rem .35rem;
  border-radius:8px;
}
/* Article */
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  color: var(--muted);
  font-weight:650;
  font-size:.95rem;
}
.toc{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1rem 1.1rem;
  background: var(--surface);
}
.toc ul{margin:.6rem 0 0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}



/* Forms */
input, textarea, select{
  width:100%;
  max-width: 640px;
  padding:.75rem .9rem;
  border:1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  font: inherit;
}
textarea{max-width: 860px}
select{max-width: 520px}
input:focus, textarea:focus, select:focus{
  outline:none;
  box-shadow: var(--focus);
  border-color: rgba(66,133,246,.45);
}
button.btn{
  cursor:pointer;
}


/* Heading accent */
h2[data-reveal]::after{
  content:"";
  display:block;
  width: 82px;
  height: 5px;
  margin-top:.75rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green), var(--brand-yellow), var(--brand-red));
  background-size: var(--gsize) 100%;
  background-position: var(--gpos) 50%;
  opacity:.95;
}


/* Card accent */
.card{position:relative}
.card::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  height:4px;
  width:calc(100% + 2px);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--brand-yellow);
  opacity: .95;
}

/* Brand strip under header (4-color identity) */
.brand-strip{
  height: 2px;
  background: linear-gradient(90deg,var(--brand-blue),var(--brand-green),var(--brand-yellow),var(--brand-red));
  background-size: var(--gsize) 100%;
  background-position: var(--gpos) 50%;
}

@media (max-width: 520px){
  .brand img{height:40px;width:auto;max-width:200px}
  .bar{padding:.65rem 0}
}

/* Stronger, still professional accents */
h2{
  position: relative;
}
h2::after{
  content:"";
  display:block;
  width: 86px;
  height: 4px;
  border-radius: 999px;
  margin-top: .55rem;
  background: linear-gradient(90deg,var(--brand-blue),var(--brand-green),var(--brand-yellow),var(--brand-red));
  background-size: var(--gsize) 100%;
  background-position: var(--gpos) 50%;
  opacity: .9;
}
.card{
  border: 1px solid rgba(226,232,240,.9);
}
.card:hover{
  transform: translateY(-2px);
}


/* Embedded media */
object{max-width:100%; width:100%; display:block}


/* Core values meaning image */
.meaning-figure{max-width: 820px; margin-inline:auto}
@media (max-width: 900px){.meaning-figure{max-width:100%}}


/* Scroll-driven gradient overlay (moves with scroll, stops when scrolling stops) */
.hero--scroll{
  position:relative;
}
.hero--scroll::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green), var(--brand-yellow), var(--brand-red), var(--brand-blue));
  background-size: var(--gsize) 300%;
  background-position: var(--gpos) 50%;
  opacity:.18;
  pointer-events:none;
  z-index:0;
}
.hero--scroll .container{
  position:relative;
  z-index:1;
}


/* Clickable card links (box is the link) */
.card--link{cursor:pointer; padding:0;}
.card--link > a.card-link{
  display:block;
  height:100%;
  padding:1.2rem 1.2rem;
  color:inherit;
  text-decoration:none;
}
.card--link:hover,
.card--link:focus-within{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(66,133,246,.25);
}
.card--link:focus-within{outline:none; box-shadow: var(--shadow), var(--focus);}


/* Button lift + subtle shadow (text color stays the same) */
.btn{
  box-shadow: 0 10px 22px rgba(2, 6, 23, .10);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover,
.btn:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(2, 6, 23, .14);
}
.btn:focus-visible{outline:none; box-shadow: 0 16px 30px rgba(2, 6, 23, .14), var(--focus);}


/* Prevent hover color shift on buttons and clickable cards */
.btn{color: var(--ink);}
.btn:hover,
.btn:focus-visible{color: var(--ink);}
.btn-primary{color:#fff;}
.btn-primary:hover,
.btn-primary:focus-visible{color:#fff;}
.card-link{color:inherit;}
.card-link:hover,
.card-link:focus-visible{color:inherit;}


/* Remove heading underline accents (requested) */
h2::after,
h2[data-reveal]::after{
  content: none !important;
  display: none !important;
}


/* Footer button contrast (fix Why SEMIX button on dark footer) */
footer .btn{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.25);
}
footer .btn:hover,
footer .btn:focus-visible{
  color: rgba(255,255,255,.92); /* keep text color stable */
  border-color: rgba(255,255,255,.38);
}
footer .btn-primary{
  color:#fff;
}
footer .btn-primary:hover,
footer .btn-primary:focus-visible{
  color:#fff; /* keep text color stable */
}
footer .btn-ghost{
  background: rgba(255,255,255,.06);
}
footer .btn-ghost:hover,
footer .btn-ghost:focus-visible{
  background: rgba(255,255,255,.10);
}


/* Evidence pack templates: checkboxes/radios should not stretch full width */
input[type="checkbox"], input[type="radio"]{
  width:auto;
  max-width:none;
  padding:0;
  border:1px solid rgba(148,163,184,.6);
  background: transparent;
}
.checklist{
  list-style:none;
  padding-left:0;
  margin:0;
}
.checklist li{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  margin:.45rem 0;
}
.checklist li > input{margin-top:.22rem}
.form-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.form-grid .span-6{grid-column: span 6;}
.form-grid .span-4{grid-column: span 4;}
.form-grid .span-8{grid-column: span 8;}
.form-grid .span-12{grid-column: span 12;}
@media (max-width: 860px){
  .form-grid .span-6,
  .form-grid .span-4,
  .form-grid .span-8{grid-column: span 12;}
}


/* P3.5/P4: Copy buttons + sticky CTA */
.copy-row{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}
.btn.btn-copy{
  padding:.55rem .9rem;
  font-weight:800;
}
.copy-status{
  font-size:.92rem;
  color:var(--muted);
}
.sticky-cta{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:60;
  display:flex;
  gap:.75rem;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.sticky-cta.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
@media (max-width: 720px){
  .sticky-cta{
    left:1rem;
    right:1rem;
  }
  .sticky-cta .btn{
    flex:1;
  }
}


/* P1: Callout blocks (policy notes, curated pages, etc.) */
.callout{
  border:1px solid var(--line);
  border-left:6px solid var(--brand-blue);
  background:rgba(66,133,246,.06);
  padding:1rem 1.25rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}
.callout p{ margin:.35rem 0; }
.callout .note{ margin-top:.5rem; }

/* P1.5: Page freshness + proof blocks */
.meta-strip{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem 1.25rem;
  align-items:center;
  padding:.85rem 1rem;
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.meta-strip strong{ color: var(--text); }
.proof-block .grid.cards{ margin-top: .9rem; }
.proof-block .note{ margin-top:.35rem; }





.note{ color:var(--muted); font-size:.95rem; }


/* PATCH v12.5 — Mobile menu polish + form UX + iOS zoom guard */
html, body{overflow-x:hidden}

pre{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width:100%;
}

.form-grid input,
.form-grid select,
.form-grid textarea{max-width:100%}

.form-label{
  display:block;
  font-weight:800;
  margin:0 0 .35rem;
}
.form-hint{
  margin:.35rem 0 0;
  color:var(--muted);
  font-size:.95rem;
}
.form-status{
  margin:.75rem 0 0;
  font-weight:800;
}
.form-status.is-ok{color:var(--brand-green)}
.form-status.is-error{color:var(--brand-red)}

.hp-field{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.file-box{
  border:1px dashed rgba(226,232,240,.9);
  background: var(--surface);
  border-radius:14px;
  padding:.85rem;
}
.file-box input[type="file"]{max-width:100%}

@media (max-width: 980px){
  /* iOS Safari auto-zooms inputs under 16px; force >= 16px */
  input, textarea, select{font-size:16px}

  /* Mobile menu: align, padding, and prevent item overflow */
  .mobile-menu{margin-left:auto; flex:0 0 auto}
  .mobile-menu details{display:flex; justify-content:flex-end}
  .mobile-menu summary{
    justify-content:center;
    min-height:40px;
  }
  .mobile-menu details nav{
    width:min(92vw, 380px);
    padding:.85rem;
    border-radius:16px;
    box-sizing:border-box;
  }
  .mobile-menu nav ul{gap:.5rem}
  .mobile-menu nav a{
    width:100%;
    box-sizing:border-box;
    justify-content:flex-start;
    gap:.5rem;
    padding:.85rem 1rem;
    border-radius:14px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}


/* PATCH v12.6 — Mobile overflow + spacing hardening */

/* 1) Button clusters: consistent spacing when wrapping on small screens */
p.meta .btn{
  margin: .42rem .75rem .42rem 0;
}

@media (max-width: 720px){
  /* Stack CTA buttons for clean tap targets */
  .hero .actions{flex-direction:column; align-items:stretch;}
  .hero .actions .btn{width:100%;}

  p.meta .btn{
    width:100%;
    justify-content:center;
    margin-right:0;
  }
}

/* 2) Blue eyebrow labels: add breathing room after dense blocks */
.grid.cards + .eyebrow,
.grid.cards + p.eyebrow,
table + .eyebrow,
table + p.eyebrow,
ul + .eyebrow,
ul + p.eyebrow,
ol + .eyebrow,
ol + p.eyebrow{
  margin-top: 1.25rem;
}

/* 3) Tables: guarantee readable horizontal scroll on phones */
.table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus{outline:none; box-shadow: var(--focus); border-radius: var(--radius);}

/* Keep tables legible; JS will set a smarter min-width based on column count */
/* Only scroll-mode tables enforce a min width (matrix/spec tables) */
.table-shell.is-scroll .table-scroll table{min-width: 560px;}

/* Hard-stop long tokens inside tables (e.g., CMM/inspection, first‑article) */
table th, table td{overflow-wrap:anywhere; word-break: break-word;}

/* Safety: never allow media to overflow viewport */
svg, iframe{max-width:100%;}

/* RFQ timeline: avoid long-token overflow on very small screens */
.step, .step *{overflow-wrap:anywhere;}

@media (max-width: 420px){
  .step{grid-template-columns: 56px 1fr;}
  .step .num{width:48px; height:48px; border-radius:14px;}
}


/* PATCH v12.7 — Tables: no clipping + clean horizontal scroll on mobile */
.table-shell{
  position:relative;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow:hidden;
  margin: 1rem 0;
}
.table-shell .table-caption{
  padding:.85rem .9rem;
  font-weight:800;
  color: var(--text);
  background: var(--bg);
  border-bottom:1px solid var(--line);
}
.table-shell .table-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.table-shell .table-scroll:focus{outline:none; box-shadow: var(--focus);}

/* Remove the "moving frame" problem: border/radius live on the shell, not the table */
.table-shell table{
  width:100%;
  border:0;
  border-radius:0;
  overflow:visible;
  background: transparent;
}

/* Default: tables should fit container; JS may set a larger min-width for 3+ columns */
.table-shell .table-scroll table{min-width:100%;}

/* Make sure long tokens can wrap inside cells */
.table-shell th, .table-shell td{
  overflow-wrap:anywhere;
  word-break: break-word;
  hyphens:auto;
}

/* Mobile: tighten cell padding so content breathes */
@media (max-width: 720px){
  .table-shell .table-caption{padding:.75rem .8rem;}
  .table-shell thead th{padding:.72rem .75rem;}
  .table-shell tbody td{padding:.72rem .75rem;}
}

/* Eyebrow spacing: handle tables wrapped in .table-shell */
.table-shell + .eyebrow,
.table-shell + p.eyebrow{
  margin-top: 1.25rem;
}

/* Optional: visible scrollbar styling on supporting browsers */
.table-shell .table-scroll::-webkit-scrollbar{height:10px}
.table-shell .table-scroll::-webkit-scrollbar-track{background: rgba(148,163,184,.18); border-radius:999px}
.table-shell .table-scroll::-webkit-scrollbar-thumb{background: rgba(100,116,139,.45); border-radius:999px}


/* PATCH v12.8 — Responsive table modes (professional pattern)
   - is-scroll: matrices/spec tables → horizontal scroll + hint
   - is-cards: checklists/decision tables → row-cards on mobile
   - is-wrap: 2-col label/value → wrap, no scroll
*/

/* Scroll hint (fade edges) — only when overflow exists */
.table-shell.is-scroll .table-scroll{position:relative;}
@media (max-width: 900px){
  .table-shell.is-scroll.is-scrollable .table-scroll::after,
  .table-shell.is-scroll.is-scrollable .table-scroll::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:44px;
    pointer-events:none;
    z-index:2;
    opacity:1;
    transition: opacity .18s ease;
  }
  .table-shell.is-scroll.is-scrollable .table-scroll::after{
    right:0;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.96));
  }
  .table-shell.is-scroll.is-scrollable .table-scroll::before{
    left:0;
    background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,0));
  }
  .table-shell.is-scroll.at-end .table-scroll::after{opacity:0;}
  .table-shell.is-scroll.at-start .table-scroll::before{opacity:0;}
}

/* Wrap mode (2 columns): prevent accidental horizontal scroll */
.table-shell.is-wrap .table-scroll{overflow-x:visible;}
.table-shell.is-wrap table{table-layout:fixed; width:100%;}
.table-shell.is-wrap th{width:40%;}

/* Cards mode: tables become row-cards on mobile (keeps desktop table) */
.table-shell.is-cards .table-scroll{overflow-x:visible;}
@media (max-width: 720px){
  .table-shell.is-cards .table-scroll{padding:.7rem;}
  .table-shell.is-cards table{min-width:100% !important;}

  /* Keep header accessible but visually hidden */
  .table-shell.is-cards thead{
    border:0;
    clip: rect(0 0 0 0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
  }

  .table-shell.is-cards tbody,
  .table-shell.is-cards tr,
  .table-shell.is-cards td,
  .table-shell.is-cards th{
    display:block;
    width:100%;
  }

  .table-shell.is-cards tbody tr{
    border:1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    box-shadow: var(--shadow-soft);
    padding: .9rem .95rem;
    margin: 0 0 .85rem 0;
  }
  .table-shell.is-cards tbody tr:last-child{margin-bottom:0;}

  .table-shell.is-cards tbody td,
  .table-shell.is-cards tbody th{
    border:0;
    padding: .55rem 0;
    color: var(--muted);
    overflow-wrap:anywhere;
    word-break: break-word;
  }

  /* Dividers between fields inside a card */
  .table-shell.is-cards tbody td + td,
  .table-shell.is-cards tbody th + td,
  .table-shell.is-cards tbody td + th,
  .table-shell.is-cards tbody th + th{
    border-top:1px solid rgba(226,232,240,.75);
  }

  /* First column becomes the card title */
  .table-shell.is-cards .row-title{
    font-weight:850;
    color: var(--text);
    padding-top:0;
    border-top:0 !important;
  }
  .table-shell.is-cards .row-title::before{content:none;}

  /* Field labels */
  .table-shell.is-cards tbody td::before,
  .table-shell.is-cards tbody th::before{
    content: attr(data-label);
    display:block;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.78rem;
    color: var(--brand-blue);
    margin-bottom:.25rem;
  }
}


/* PATCH v12.9 — Mobile polish + header auto-hide + table hint cleanup */

/* 1) Header auto-hide on scroll (down hides, up shows) */
.site-header{
  transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease;
  will-change: transform;
}
.site-header.is-hidden{
  transform: translateY(-110%);
}
@media (prefers-reduced-motion: reduce){
  .site-header{transition:none}
}

/* 2) Fix "stuck" button clusters on mobile (applies only when meta contains buttons) */
.meta.meta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem .75rem;
  align-items:center;
}
.meta.meta-actions .btn{ margin:0 !important; }
@media (max-width: 980px){
  .meta.meta-actions{
    flex-direction:column;
    align-items:stretch;
    gap:.7rem;
  }
  .meta.meta-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* 3) Evidence pattern cards / grid lists: remove default UL indentation so cards are centered in container */
ul.grid, ol.grid{
  list-style:none;
  padding-left:0;
  margin-left:0;
}
ul.grid.cards, ol.grid.cards{
  padding:0;
  margin:0;
}

/* 4) RFQ step timeline: prevent any horizontal overflow caused by grid min-width */
.step > div{ min-width:0; }
.timeline{ max-width:100%; }

/* 5) Table scroll hint: keep it subtle + remove the "smear" once user starts scrolling */
@media (max-width: 900px){
  /* Kill left fade entirely (it reads like a vertical stain on iOS when you scroll) */
  .table-shell.is-scroll.is-scrollable .table-scroll::before{ content:none !important; }

  /* Make right hint narrower + lighter */
  .table-shell.is-scroll.is-scrollable .table-scroll::after{
    width:28px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.78)) !important;
  }

  /* Once user scrolls horizontally, remove hint overlays completely for clean reading */
  .table-shell.is-scroll.hint-dismissed .table-scroll::after{
    opacity:0 !important;
  }
}


/* PATCH v12.9.1 — Header hide: remove blank gap by pulling content up using header height */
.site-header{
  transition: transform .12s ease, margin-bottom .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.site-header.is-hidden{
  margin-bottom: calc(-1 * var(--header-h, 0px));
}


/* ============================================================
   PATCH v13.1 — Mobile polish + navigation + table hint
   ============================================================ */

/* Global action button rows (used across pages, not only hero) */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top: 1rem;
}
@media (max-width: 720px){
  .actions{
    flex-direction:column;
    align-items:stretch;
  }
  .actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* Mobile menu: mirror desktop structure (accordion groups) */
@media (max-width: 980px){
  .mobile-menu nav details.m-group{
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 14px;
    background: rgba(255,255,255,.86);
    overflow: hidden;
  }
  .mobile-menu nav details.m-group summary{
    list-style:none;
    cursor:pointer;
    padding: .9rem .95rem;
    font-weight: 850;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
  }
  .mobile-menu nav details.m-group summary::-webkit-details-marker{ display:none; }
  .mobile-menu nav details.m-group summary::after{
    content:"›";
    font-weight: 900;
    opacity: .6;
    transform: rotate(90deg);
    transition: transform .15s ease;
  }
  .mobile-menu nav details.m-group[open] summary::after{
    transform: rotate(-90deg);
  }

  .mobile-menu nav details.m-group .m-sub{
    list-style:none;
    padding: .6rem .6rem .75rem;
    margin:0;
    display:grid;
    gap:.45rem;
  }
  .mobile-menu nav details.m-group .m-sub a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: .8rem .9rem;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255,255,255,.96);
  }
}

/* Table scroll hint: right-edge only (avoid "haze stripe" on iOS) */
@media (max-width: 900px){
  .table-shell.is-scroll.is-scrollable .table-scroll::before{ content:none !important; }
  .table-shell.is-scroll.is-scrollable .table-scroll::after{
    width: 28px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.96)) !important;
  }
  .table-shell.is-scroll.hint-dismissed .table-scroll::after{ opacity:0 !important; }
}


/* PATCH v13.3 — fixed header (no layout jump) + scroll-up reveal friendliness */
.site-header{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
body{
  padding-top: var(--header-h, 80px);
}
html{
  scroll-padding-top: calc(var(--header-h, 80px) + 12px);
}
/* Override older sticky-gap compensation */
.site-header.is-hidden{
  margin-bottom: 0 !important;
}

/* PATCH v13.3 — CTA button rows: consistent spacing + mobile stacking */
.cta{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
@media (max-width: 720px){
  .cta{
    flex-direction: column;
    align-items: stretch;
  }
  .cta .btn{
    width: 100%;
    justify-content: center;
  }
}