/* =========================================================
   Helixon Chemicals — reference document styling
   Shares the interference palette with the main site.
   ========================================================= */

:root{
  --film-violet:#6D2BE8;
  --film-blue:#1560F0;
  --film-cyan:#00C4DE;
  --film-green:#12C270;
  --film-gold:#FFB302;
  --film-orange:#FF6A1F;
  --film-orange-ink:#B34206;   /* orange as text on a light surface */
  --film-magenta:#DB1466;

  --si-900:#080B14;
  --bg:#FFFFFF;
  --haze:#F1F4FA;
  --line:#DFE5F0;
  --ink:#080D1A;
  --body:#4A5573;
  --muted:#616C89;

  --display:'Archivo',system-ui,sans-serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:100%;max-width:860px;margin:0 auto;padding:0 24px;}

h1,h2,h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 800;
  color:var(--ink);line-height:1.1;letter-spacing:-.022em;margin:0 0 .5em;
}
h1{font-size:clamp(2rem,4.6vw,3rem);}
h2{font-size:clamp(1.4rem,2.8vw,1.9rem);}
h3{font-size:1.06rem;font-variation-settings:'wdth' 100,'wght' 700;}
p{margin:0 0 1.05em;}
ol,ul{margin:0;padding:0;list-style:none;}
sub{font-size:.72em;}
a{color:var(--film-blue);}

:focus-visible{outline:3px solid var(--film-cyan);outline-offset:3px;border-radius:3px;}

.rail{display:flex;height:5px;width:100%;}
.rail i{flex:1;}
.rail i:nth-child(1){background:var(--film-violet);}
.rail i:nth-child(2){background:var(--film-blue);}
.rail i:nth-child(3){background:var(--film-cyan);}
.rail i:nth-child(4){background:var(--film-green);}
.rail i:nth-child(5){background:var(--film-gold);}
.rail i:nth-child(6){background:var(--film-orange);}
.rail i:nth-child(7){background:var(--film-magenta);}

/* ---------- Header ---------- */
.doc-header{border-bottom:1px solid var(--line);background:#fff;}
.doc-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;height:70px;
}
.brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;}
.brand-mark{
  width:28px;height:28px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    var(--film-gold) 0 18%, var(--film-green) 18% 36%, var(--film-cyan) 36% 54%,
    var(--film-blue) 54% 72%, var(--film-violet) 72% 88%, var(--film-magenta) 88% 100%);
  box-shadow:0 0 0 1px rgba(8,13,26,.12) inset;
}
.brand-text{
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 800;
  font-size:1.06rem;letter-spacing:-.02em;color:var(--ink);
}
.brand-text em{font-style:normal;font-variation-settings:'wdth' 100,'wght' 600;color:var(--muted);}
.back{
  font-size:.88rem;font-weight:600;color:var(--body);
  text-decoration:none;padding:10px 14px;border:1px solid var(--line);border-radius:6px;
  min-height:44px;display:inline-flex;align-items:center;
}
.back:hover{border-color:var(--ink);color:var(--ink);background:var(--haze);}

/* ---------- Document body ---------- */
.doc{padding:clamp(40px,6vw,68px) 24px 60px;}

.kicker{
  font-family:var(--mono);font-size:.76rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--film-orange-ink);
  margin:0 0 16px;
}
.standfirst{font-size:1.1rem;color:var(--body);max-width:62ch;margin-bottom:36px;}

.toc{
  padding:24px 26px;background:var(--haze);
  border:1px solid var(--line);border-radius:12px;margin-bottom:48px;
}
.toc h2{
  font-family:var(--mono);font-size:.76rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:0 0 14px;
}
.toc ol{counter-reset:toc;display:grid;gap:8px;}
.toc li{counter-increment:toc;display:flex;gap:12px;font-size:.95rem;}
.toc li::before{
  content:counter(toc);flex:none;
  font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--film-orange-ink);
}
.toc a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
}
.toc a:hover{border-bottom-color:var(--film-orange);}

.doc section{margin-bottom:56px;scroll-margin-top:24px;}
.doc section h2{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;}
.num{
  flex:none;font-family:var(--mono);font-size:.9rem;font-weight:600;
  color:#fff;background:var(--si-900);
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:0;
}
.doc section h3{
  margin-top:32px;padding-bottom:8px;border-bottom:1px solid var(--line);
  font-size:.98rem;letter-spacing:.01em;
}

/* ---------- Tables ---------- */
.table-wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:12px;
  margin:22px 0;-webkit-overflow-scrolling:touch;
}
table{width:100%;border-collapse:collapse;min-width:620px;}
caption{
  text-align:left;padding:16px 20px 0;
  font-family:var(--mono);font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
th,td{padding:12px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top;}
thead th{
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid var(--line);white-space:nowrap;
}
tbody th{font-weight:600;color:var(--ink);white-space:nowrap;}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}
tbody .hi{background:rgba(255,179,2,.11);}
tbody .hi th{box-shadow:inset 4px 0 0 var(--film-gold);}

.note{
  padding:16px 20px;background:var(--haze);border-left:4px solid var(--film-cyan);
  border-radius:0 8px 8px 0;font-size:.9rem;margin:22px 0 0;
}

/* ---------- Checklist ---------- */
.check{counter-reset:item;display:grid;gap:12px;margin:18px 0 0;}
.check li{
  counter-increment:item;position:relative;
  padding:12px 16px 12px 52px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  font-size:.94rem;color:var(--body);
}
.check li::before{
  content:counter(item);position:absolute;left:16px;top:12px;
  font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--muted);
}
.flag{
  display:inline-block;margin-right:8px;padding:2px 8px;
  background:var(--film-magenta);color:#fff;border-radius:100px;
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;vertical-align:1px;
}

/* ---------- Clauses ---------- */
.clauses{counter-reset:clause;display:grid;gap:16px;margin-top:22px;}
.clauses li{
  counter-increment:clause;position:relative;
  padding:22px 24px 20px 24px;
  border:1px solid var(--line);border-left:4px solid var(--film-green);
  border-radius:0 10px 10px 0;background:#fff;
}
.clauses h3{margin:0 0 6px;padding:0;border:0;font-size:1rem;}
.clauses p{margin:0;font-size:.93rem;}

/* ---------- CTA ---------- */
.cta{
  padding:34px 30px;border-radius:16px;
  background:radial-gradient(500px 260px at 92% 6%, rgba(255,106,31,.14), transparent 62%), var(--haze);
  border:1px solid var(--line);
}
.cta h2{margin-bottom:10px;}
.cta p{margin-bottom:0;}
.cta p+p{margin-top:18px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:13px 26px;
  background:var(--film-orange);color:#07101F;
  font-weight:600;font-size:.96rem;text-decoration:none;border-radius:6px;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),background-color .18s;
}
.btn:hover{background:#FF7F3D;transform:translateY(-2px);}

/* ---------- Footer ---------- */
.doc-footer{
  background:var(--si-900);color:#AFBAD4;
  padding:30px 0;margin-top:20px;
}
.doc-footer p{margin:0 0 8px;font-size:.85rem;}
.doc-footer .disclaimer{font-size:.8rem;color:#96A4C2;margin:0;}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .doc-header-inner{height:auto;padding:14px 0;flex-wrap:wrap;gap:12px;}
  .check li{padding-left:48px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;}
}

@media print{
  .doc-header,.cta,.rail{display:none!important;}
  body{font-size:10.5pt;color:#000;}
  .doc{padding:0;}
  .doc section{margin-bottom:24pt;page-break-inside:avoid;}
  .table-wrap{overflow:visible;}
  table{min-width:0;}
  .doc-footer{background:#fff;color:#000;border-top:1px solid #000;}
}