/* Nauman Shahid: commercial product print stylesheet (A4, print-to-PDF ready) */
:root{
  --charcoal:#1C1C1E; --charcoal-2:#121214; --ink:#1E2230;
  --white:#FFFFFF; --paper:#FFFFFF; --silver:#5B6472; --line:#E2E6EC;
  --cyan:#0E7FB0; --cyan-bright:#38BDF8;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── Screen ── */
@media screen{
  body{background:#CDD4DC;font-family:'Inter',Arial,sans-serif;font-size:10.5pt;line-height:1.62;color:var(--ink);padding:24px 0;}
  .sheet{width:210mm;margin:0 auto 20px;background:var(--paper);box-shadow:0 4px 24px rgba(0,0,0,0.18);padding:18mm 20mm;}
}
@media screen and (max-width:820px){ .sheet{width:100%;padding:24px;} }

/* ── Print ── */
@media print{
  /* A non-zero @page margin gives a real, reserved safe zone on the top and bottom of EVERY page,
     so break-inside never lets a block touch the page edge. (To suppress the browser's own URL/date
     breadcrumb, untick "Headers and footers" once in the print dialog: the CSS margins below stay.) */
  @page{ size:A4; margin:16mm 16mm; }
  body{background:#fff;font-family:'Inter',Arial,sans-serif;font-size:10.5pt;line-height:1.6;color:var(--ink);-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .sheet{width:auto;margin:0;padding:0;box-shadow:none;}
  a{color:inherit !important;text-decoration:none !important;}
  a[href]::after{content:"" !important;display:none !important;}
  h1,h2,h3{break-after:avoid;page-break-after:avoid;}
  .axis,.band,.scorecard,table,.hero,.result,.flag,.callout,.group,pre,.endnote{break-inside:avoid;page-break-inside:avoid;}
  p,li{orphans:2;widows:2;}
  .page-break{break-before:page;page-break-before:always;}
}

/* ── Hero card ── */
.hero{background:var(--charcoal);color:var(--white);border-radius:14px;padding:30mm 16mm 16mm;margin-bottom:14mm;position:relative;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--cyan-bright),transparent 80%);}
.hero .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:8pt;letter-spacing:2.4px;text-transform:uppercase;color:var(--cyan-bright);margin-bottom:14px;}
.hero h1{font-family:'Outfit',sans-serif;font-weight:700;font-size:30pt;line-height:1.06;letter-spacing:-0.4px;margin-bottom:14px;}
.hero .sub{font-size:11.5pt;color:rgba(255,255,255,0.74);max-width:150mm;line-height:1.5;margin-bottom:22mm;}
.hero .meta{display:flex;gap:30px;border-top:1px solid rgba(255,255,255,0.12);padding-top:14px;}
.hero .meta div{display:flex;flex-direction:column;gap:3px;}
.hero .meta .lbl{font-family:'IBM Plex Mono',monospace;font-size:6.6pt;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,0.42);}
.hero .meta .val{font-size:9.5pt;color:rgba(255,255,255,0.9);}

/* ── Body type ── */
h2{font-family:'Outfit',sans-serif;font-weight:700;font-size:17pt;color:var(--ink);margin:9mm 0 3mm;padding-top:5mm;border-top:1px solid var(--line);letter-spacing:-0.2px;}
h2:first-of-type{border-top:none;padding-top:0;}
h3{font-family:'Outfit',sans-serif;font-weight:600;font-size:12pt;color:var(--ink);margin:6mm 0 2mm;}
h3 .q{display:block;font-family:'Inter',sans-serif;font-style:italic;font-weight:400;font-size:10pt;color:var(--cyan);margin-top:2px;}
p{margin-bottom:3.2mm;}
.lead{font-size:11.5pt;color:var(--ink);}
.rule{height:1px;background:var(--line);border:0;margin:7mm 0;}
em{color:var(--ink);}
strong{color:var(--ink);font-weight:600;}

/* ── Axis question lists ── */
.axis{margin-bottom:5mm;}
ol.qs{list-style:none;counter-reset:q;margin:2mm 0 0;}
ol.qs li{counter-increment:q;position:relative;padding-left:9mm;margin-bottom:2.4mm;font-size:9.8pt;color:var(--ink);}
ol.qs li::before{content:counter(q);position:absolute;left:0;top:0;width:6mm;height:6mm;background:var(--charcoal);color:var(--cyan-bright);border-radius:50%;font-family:'IBM Plex Mono',monospace;font-size:7.5pt;display:flex;align-items:center;justify-content:center;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
ol.qs li .anchor{color:var(--silver);font-size:8.8pt;}

/* ── Red-flag items ── */
.flag{position:relative;padding:3mm 4mm 3mm 12mm;margin-bottom:2.6mm;border:1px solid var(--line);border-radius:7px;background:#FCFDFE;}
.flag .n{position:absolute;left:4mm;top:3mm;font-family:'IBM Plex Mono',monospace;font-size:10pt;font-weight:600;color:var(--cyan);}
.flag .sign{font-weight:600;color:var(--ink);}
.flag .means{color:var(--silver);}
.group{font-family:'Outfit',sans-serif;font-weight:600;font-size:11pt;color:var(--cyan);text-transform:uppercase;letter-spacing:0.06em;margin:6mm 0 3mm;}

/* ── Bands / callouts ── */
.band{border-left:3px solid var(--cyan);background:#F6FAFC;padding:4mm 5mm;margin-bottom:3.5mm;border-radius:0 6px 6px 0;}
.band .t{font-family:'Outfit',sans-serif;font-weight:700;font-size:11pt;margin-bottom:1.5mm;color:var(--ink);}
.band.warn{border-left-color:#C2410C;background:#FCF6F2;}
.callout{border:1px solid var(--line);border-radius:8px;padding:5mm;margin:4mm 0;background:#FAFBFC;}

/* ── Tables ── */
table{width:100%;border-collapse:collapse;margin:2mm 0 5mm;font-size:9.2pt;}
table caption{text-align:left;font-family:'Outfit',sans-serif;font-weight:600;font-size:11pt;margin-bottom:2mm;color:var(--ink);}
th,td{border:1px solid var(--line);padding:2mm 3mm;text-align:left;vertical-align:top;}
th{background:var(--charcoal);color:#fff;font-weight:600;font-size:8.4pt;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
td.s{width:22mm;text-align:center;color:var(--silver);font-family:'IBM Plex Mono',monospace;}
td.num{text-align:right;font-family:'IBM Plex Mono',monospace;}
tr.total td{background:#F0F4F8;font-weight:700;}
.fillrow td{height:7mm;}

/* ── Code ── */
pre{background:var(--charcoal);color:#E6EDF3;border-radius:8px;padding:4mm 5mm;margin:3mm 0;font-family:'IBM Plex Mono',monospace;font-size:8.6pt;line-height:1.5;overflow-x:auto;white-space:pre-wrap;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
code{font-family:'IBM Plex Mono',monospace;font-size:9pt;background:#EEF2F6;padding:0.5mm 1.5mm;border-radius:3px;color:var(--ink);}
pre code{background:none;padding:0;color:inherit;font-size:8.6pt;}
/* Syntax highlighting (dev guide). Brand-tuned: cyan keywords, amber strings, soft accents. */
.tok-com{color:#6B7686;font-style:italic;}
.tok-kw{color:#56C7F5;}
.tok-str{color:#E0B265;}
.tok-num{color:#A8C5A0;}
.tok-fn{color:#C3A6FF;}
.tok-tag{color:#56C7F5;}
.tok-attr{color:#A8C5A0;}

/* ── Lists ── */
ul.plain{list-style:none;margin:2mm 0 4mm;}
ul.plain li{position:relative;padding-left:7mm;margin-bottom:2.4mm;font-size:10pt;}
ul.plain li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;background:var(--cyan);border-radius:50%;}

/* ── Footer ── */
.endnote{margin-top:9mm;padding-top:5mm;border-top:1px solid var(--line);font-size:9pt;color:var(--silver);font-family:'IBM Plex Mono',monospace;}
.endnote a{color:var(--cyan);}

/* ── Screen-only: table scroll, breadcrumb, page CTAs ── */
@media screen{
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .breadcrumb{max-width:210mm;margin:0 auto;padding:20px 24px 0;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--silver);}
  .breadcrumb a{color:var(--cyan);text-decoration:none;}
  .breadcrumb a:hover{text-decoration:underline;}
  .page-ctas{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:16px;}
  .cta-primary{display:flex;flex-direction:column;gap:12px;}
  .cta-primary p{font-size:14px;color:var(--silver);margin:0;}
  .cta-secondary{display:flex;gap:12px;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:12px;}
  .cta-secondary a{color:var(--cyan);text-decoration:none;}
  .cta-secondary a:hover{text-decoration:underline;}
  .cta-secondary .divider{color:var(--silver);}
  
  .cta-btn{display:inline-block;background:var(--cyan);color:#fff;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;padding:9px 18px;border-radius:6px;text-decoration:none;}
  .cta-btn:hover{opacity:0.88;}
}