/* ================================================================
   PAPER PRINT SERVICES — Master Stylesheet v3.1
   Mobile-first · Shared article components · PageSpeed optimised
   FIXED: svg overflow causing horizontal scroll on mobile
   ================================================================ */

:root {
  --navy:       #0D1B2A;
  --navy-mid:   #1C2E40;
  --orange:     #E85C0D;
  --orange-dk:  #C44A08;
  --orange-bg:  #FEF3EC;
  --gray-900:   #111827;
  --gray-700:   #374151;
  --gray-500:   #6B7280;
  --gray-300:   #D1D5DB;
  --gray-200:   #E5E7EB;
  --gray-100:   #F3F4F6;
  --gray-50:    #F9FAFB;
  --white:      #FFFFFF;
  --font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-w:      1100px;
  --max-text:   700px;
  --ease:       cubic-bezier(.25,.46,.45,.94);
  --t:          170ms var(--ease);
  --sidebar-w:  260px;
}

/* ----------------------------------------------------------------
   Reset & base — CRITICAL mobile fixes here
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Prevent horizontal scroll at root level */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* overflow-x is NOT set here — grid min-width:0 is the correct fix */
}
body {
  font-family: var(--font);
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* overflow-x:hidden clips content — not used, min-width:0 on grid items is the fix */
  /* Ensure text wraps — prevents single long words from overflowing */
  /* overflow-wrap only — NOT word-break (that breaks table cells mid-word) */
  overflow-wrap: break-word;
}

img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }

/* SVG: DO NOT use overflow:visible globally — it causes SVG content
   to render outside the element box and breaks mobile layout.
   Individual SVGs that need overflow:visible can opt in with a class. */
svg { overflow: hidden; }
/* Icon SVGs (small, inline) are fine with visible overflow */
svg[width="12"], svg[width="16"], svg[width="20"], svg[width="24"] { overflow: visible; }

/* ----------------------------------------------------------------
   Typography — fluid, mobile-first
   ---------------------------------------------------------------- */
h1 { font-size: clamp(1.6rem,4.5vw,3rem);    font-weight:700; line-height:1.18; color:var(--navy); letter-spacing:-.02em; overflow-wrap:break-word; }
h2 { font-size: clamp(1.25rem,3vw,2.2rem);   font-weight:700; line-height:1.22; color:var(--navy); letter-spacing:-.015em; overflow-wrap:break-word; }
h3 { font-size: clamp(1rem,2vw,1.3rem);      font-weight:600; line-height:1.3;  color:var(--navy); overflow-wrap:break-word; }
h4 { font-size:1rem; font-weight:600; color:var(--navy); }
p  { font-size:1rem; line-height:1.7; color:var(--gray-700); overflow-wrap:break-word; }
.lead { font-size:clamp(.9rem,1.8vw,1.1rem); color:var(--gray-500); line-height:1.75; }
.label-tag { font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); display:block; margin-bottom:8px; }
.caption { font-size:.875rem; color:var(--gray-500); line-height:1.6; }

/* ----------------------------------------------------------------
   Layout
   ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(16px,4vw,40px);
  /* Prevent any child from breaking out */
  overflow-x: hidden;
}
.section    { padding-block: clamp(48px,8vw,80px); }
.section--sm{ padding-block: clamp(32px,6vw,56px); }
.section--gray { background:var(--gray-50); }
.section--navy { background:var(--navy); }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:960px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:6px; font-size:.9rem; font-weight:600; transition:background var(--t),box-shadow var(--t),transform var(--t); white-space:nowrap; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--orange); color:#fff; }
.btn-primary:hover { background:var(--orange-dk); box-shadow:0 4px 14px rgba(232,92,13,.25); }
.btn-dark { background:var(--navy); color:#fff; }
.btn-dark:hover { background:var(--navy-mid); }
.btn-outline { background:transparent; color:var(--navy); border:1.5px solid var(--gray-300); }
.btn-outline:hover { border-color:var(--navy); background:var(--gray-50); }
.btn-outline-white { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.3); }
.btn-outline-white:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.5); }
.btn-sm { padding:9px 18px; font-size:.82rem; }
.btn-lg { padding:15px 32px; font-size:.95rem; }
@media(max-width:480px){ .btn-lg{padding:13px 22px;font-size:.88rem;} }

/* ----------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------- */
.site-nav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--gray-100); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; max-width:var(--max-w); margin-inline:auto; padding-inline:clamp(16px,4vw,40px); gap:16px; }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:.9rem; color:var(--navy); flex-shrink:0; line-height:1.3; min-width:0; }
.nav-logo-box { width:32px; height:32px; background:var(--orange); border-radius:5px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; font-weight:700; flex-shrink:0; }
.nav-logo small { display:block; font-size:.7rem; font-weight:400; color:var(--gray-500); white-space:nowrap; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-size:.875rem; font-weight:500; color:var(--gray-700); transition:color var(--t); white-space:nowrap; }
.nav-links a:hover { color:var(--navy); }
.nav-hamburger { display:none; flex-direction:column; gap:5px; padding:8px; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--navy); border-radius:1px; }
@media(max-width:860px){ .nav-links{display:none;} .nav-hamburger{display:flex;} .nav-cta-desk{display:none;} }

/* Mobile drawer */
.nav-drawer { display:none; position:fixed; inset:0; z-index:200; background:#fff; padding:24px 20px; flex-direction:column; overflow-y:auto; overflow-x:hidden; }
.nav-drawer.open { display:flex; }
.nav-drawer-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.nav-drawer a.di { font-size:1.1rem; font-weight:600; color:var(--navy); padding:14px 0; border-bottom:1px solid var(--gray-100); display:block; }
.nav-close { width:44px; height:44px; border:1.5px solid var(--gray-300); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.95rem; color:var(--gray-700); cursor:pointer; flex-shrink:0; }

/* ----------------------------------------------------------------
   Chapter navigation bar
   ---------------------------------------------------------------- */
.chapter-nav { position:sticky; top:64px; background:#fff; border-bottom:1px solid var(--gray-100); z-index:50; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.chapter-nav::-webkit-scrollbar { display:none; }
.chapter-nav-inner { display:flex; max-width:var(--max-w); margin-inline:auto; padding-inline:clamp(16px,4vw,40px); }
.chapter-nav a { padding:12px 14px; font-size:.75rem; font-weight:500; color:var(--gray-500); white-space:nowrap; border-bottom:2px solid transparent; transition:color var(--t),border-color var(--t); flex-shrink:0; display:inline-flex; align-items:center; min-height:44px; }
.chapter-nav a:hover,.chapter-nav a.active { color:var(--orange); border-bottom-color:var(--orange); }
@media(max-width:480px){ .chapter-nav a{padding:10px 11px;font-size:.72rem;} }

/* ----------------------------------------------------------------
   Page hero
   ---------------------------------------------------------------- */
.page-hero { padding:clamp(32px,6vw,56px) 0 clamp(28px,5vw,48px); border-bottom:1px solid var(--gray-100); }
.page-hero h1 { max-width:760px; margin-bottom:16px; }
.page-hero .lead { max-width:680px; }

/* ----------------------------------------------------------------
   Article layout — 2-column with sidebar, stacks on tablet/mobile
   ---------------------------------------------------------------- */
.article-layout { display:grid; grid-template-columns:1fr var(--sidebar-w); gap:56px; align-items:start; }
@media(max-width:1024px){ .article-layout{grid-template-columns:1fr;gap:40px;} }

/* TOC sidebar */
.toc { position:sticky; top:100px; background:var(--gray-50); border:1px solid var(--gray-100); border-radius:10px; padding:20px; }
.toc h3 { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-500); margin-bottom:14px; }
.toc a { display:flex; align-items:center; font-size:.8rem; font-weight:500; color:var(--gray-700); padding:6px 0; min-height:36px; border-bottom:1px solid var(--gray-100); transition:color var(--t); }
.toc a:last-child { border-bottom:none; }
.toc a:hover,.toc a.active { color:var(--orange); }
.toc a.active { font-weight:600; }
@media(max-width:1024px){ .toc{position:static;} }

/* ----------------------------------------------------------------
   Article metadata row
   ---------------------------------------------------------------- */
.article-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:40px; padding-bottom:24px; border-bottom:1px solid var(--gray-100); }
.meta-tag { font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:3px; }
.meta-tag-section{background:#DBEAFE;color:#1D4ED8;}
.meta-tag-com{background:#EFF6FF;color:#1D4ED8;}
.meta-tag-pkg{background:var(--orange-bg);color:var(--orange-dk);}
@media(max-width:600px){ .article-meta > div:last-child{margin-left:0!important;width:100%;} }

/* ----------------------------------------------------------------
   Chapters
   ---------------------------------------------------------------- */
.chapter { margin-top:56px; padding-top:40px; border-top:1px solid var(--gray-100); scroll-margin-top:110px; }
.chapter:first-of-type { margin-top:0; border-top:none; padding-top:0; }
.chapter-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
/* Chapter h2 MUST wrap — long headings clip on mobile otherwise */
.chapter h2 { font-size:clamp(1.15rem,2.5vw,1.4rem); overflow-wrap:break-word; hyphens:auto; }
.chapter h3 { font-size:1.05rem; margin-top:28px; margin-bottom:10px; overflow-wrap:break-word; }
.chapter p  { margin-bottom:14px; line-height:1.75; font-size:.95rem; overflow-wrap:break-word; }
.chapter ul { padding-left:0; margin-bottom:14px; }
.chapter li { font-size:.9rem; color:var(--gray-700); line-height:1.7; margin-bottom:6px; padding-left:16px; position:relative; overflow-wrap:break-word; }
.chapter li::before { content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--orange); flex-shrink:0; }

/* ----------------------------------------------------------------
   Spec tables — always inside a scrollable wrapper
   ---------------------------------------------------------------- */
.spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--gray-100);
  margin: 20px 0;
  width: 100%;    /* wrapper fills the container */
  max-width: 100%; /* but never exceeds it */
}
.spec-table {
  width: 100%;           /* fill the wrapper on desktop — columns share available space */
  border-collapse: collapse;
  font-size: .82rem;
  min-width: 520px;      /* mobile: trigger scroll before columns become unreadably narrow */
}
.spec-table th { background:var(--navy); color:#fff; font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:10px 14px; text-align:left; white-space:nowrap; }
.spec-table td { padding:10px 14px; border-bottom:1px solid var(--gray-100); color:var(--gray-700); vertical-align:top; line-height:1.5; word-break:normal; overflow-wrap:normal; white-space:normal; }
.spec-table tr:last-child td { border-bottom:none; }
.spec-table tr:nth-child(even) td { background:var(--gray-50); }
.spec-table td:first-child { font-weight:600; color:var(--navy); }
@media(max-width:600px){ .spec-table{font-size:.78rem;} .spec-table th,.spec-table td{padding:8px 10px;} }

/* ----------------------------------------------------------------
   Callouts
   ---------------------------------------------------------------- */
.callout { padding:16px 20px; border-radius:8px; margin:20px 0; border-left:3px solid; }
.callout-title { font-size:.82rem; font-weight:600; margin-bottom:5px; }
.callout p { font-size:.875rem; margin:0; line-height:1.65; }
.callout-tip     { background:var(--orange-bg); border-color:var(--orange); }
.callout-tip .callout-title { color:var(--orange-dk); }
.callout-warning { background:#FFFBEB; border-color:#F59E0B; }
.callout-warning .callout-title { color:#92400E; }
.callout-info    { background:#EFF6FF; border-color:#3B82F6; }
.callout-info .callout-title { color:#1D4ED8; }
.callout-danger  { background:#FEF2F2; border-color:#EF4444; }
.callout-danger .callout-title { color:#991B1B; }

/* ----------------------------------------------------------------
   Dual (commercial / packaging) blocks
   ---------------------------------------------------------------- */
.dual { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
@media(max-width:600px){ .dual{grid-template-columns:1fr;} }
.dual-item { padding:16px 18px; border-radius:8px; }
.dual-item .dual-label { font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:6px; }
.dual-item p { font-size:.82rem; line-height:1.65; margin:0; }
.dual-com{background:#EFF6FF;} .dual-com .dual-label{color:#1D4ED8;}
.dual-pkg{background:var(--orange-bg);} .dual-pkg .dual-label{color:var(--orange-dk);}

/* ----------------------------------------------------------------
   Measure / test blocks
   ---------------------------------------------------------------- */
.measure-block { background:var(--gray-50); border:1px solid var(--gray-100); border-radius:10px; padding:20px 24px; margin:20px 0; }
.measure-block h3 { font-size:.9rem; margin-bottom:12px; margin-top:0; display:flex; align-items:center; gap:8px; }
.measure-block h3::before { content:''; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.measure-row { display:grid; grid-template-columns:160px 1fr; gap:8px 16px; font-size:.82rem; margin-bottom:8px; }
.measure-label { font-weight:600; color:var(--gray-500); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding-top:2px; }
.measure-value { color:var(--gray-700); line-height:1.55; }
@media(max-width:560px){ .measure-row{grid-template-columns:1fr;gap:4px;margin-bottom:12px;} }
.pass-criterion { display:inline-flex; align-items:center; gap:5px; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:4px; padding:2px 8px; font-size:.75rem; font-weight:600; color:#166534; margin-right:4px; margin-bottom:4px; }
.fail-criterion { background:#FEF2F2; border-color:#FECACA; color:#991B1B; }

/* ----------------------------------------------------------------
   Defect cards
   ---------------------------------------------------------------- */
.defect-card { border:1px solid var(--gray-100); border-radius:8px; overflow:hidden; margin-bottom:12px; }
.defect-head { display:grid; grid-template-columns:160px 1fr 1fr; background:var(--gray-50); border-bottom:1px solid var(--gray-100); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); }
.defect-head span { padding:8px 12px; border-right:1px solid var(--gray-100); }
.defect-head span:last-child { border-right:none; }
.defect-body { display:grid; grid-template-columns:160px 1fr 1fr; font-size:.82rem; }
.defect-body div { padding:12px; border-right:1px solid var(--gray-100); line-height:1.55; color:var(--gray-700); overflow-wrap:break-word; }
.defect-body div:last-child { border-right:none; }
.defect-name { font-weight:600; color:var(--navy); font-size:.875rem; display:block; margin-bottom:4px; }
/* Stack on mobile */
@media(max-width:640px){
  .defect-head,.defect-body{grid-template-columns:1fr;}
  .defect-head span,.defect-body div{border-right:none;border-bottom:1px solid var(--gray-100);}
  .defect-head span:last-child,.defect-body div:last-child{border-bottom:none;}
}

/* ----------------------------------------------------------------
   Diagram / SVG wrappers — KEY: overflow:hidden prevents SVG
   content from escaping and causing horizontal scroll
   ---------------------------------------------------------------- */
.diagram-wrap,.plate-diagram-wrap,.blanket-diagram-wrap,.coating-diagram-wrap,
.gsm-scale-wrap,.ph-scale-wrap,.tools-diagram-wrap,.process-diagram-wrap,
.ink-seq-wrap,.board-diagram-wrap,.grain-diagram-wrap,.powder-visual-wrap {
  background:var(--gray-50);
  border:1px solid var(--gray-100);
  border-radius:10px;
  overflow-x: auto;  /* horizontal scroll on mobile so labels stay readable */
  overflow-y: hidden;
  margin:20px 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.diagram-label,.plate-diagram-label,.blanket-diagram-label,.coating-diagram-label,
.gsm-scale-label,.ph-scale-label,.tools-diagram-label,.process-diagram-label,
.ink-seq-label,.board-diagram-label,.grain-diagram-label,.powder-visual-label {
  padding:12px 16px; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gray-500); border-bottom:1px solid var(--gray-100);
}
/* SVGs inside wrappers: fluid width, constrained */
.diagram-wrap svg,.plate-diagram-wrap svg,.blanket-diagram-wrap svg,.coating-diagram-wrap svg,
.gsm-scale-wrap svg,.ph-scale-wrap svg,.tools-diagram-wrap svg,.process-diagram-wrap svg,
.ink-seq-wrap svg,.board-diagram-wrap svg,.grain-diagram-wrap svg,.powder-visual-wrap svg {
  display: block;
  width: 100%;
  min-width: 600px; /* prevents text labels from overlapping as SVG scales down;
                         600px = 93.75% of 640px viewBox — keeps 9px fonts at ~8.4px */
  height: auto;
  overflow: visible; /* SVG text at edges needs to be visible */
}

/* ----------------------------------------------------------------
   Instrument blocks
   ---------------------------------------------------------------- */
.instrument-block { border:1px solid var(--gray-100); border-radius:10px; overflow:hidden; margin:28px 0; }
.instrument-head { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:14px 18px; background:var(--gray-50); border-bottom:1px solid var(--gray-100); }
.instrument-num { width:38px; height:38px; border-radius:8px; background:var(--navy); color:#fff; font-size:1rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.instrument-head h3 { font-size:.95rem; margin:0; overflow-wrap:break-word; min-width:0; }
.instrument-head .inst-standard { font-size:.7rem; font-weight:600; color:var(--gray-500); background:#fff; border:1px solid var(--gray-200); border-radius:4px; padding:2px 7px; white-space:nowrap; flex-shrink:0; }
.instrument-body { padding:16px 20px; }
.instrument-body p { font-size:.875rem; line-height:1.7; margin-bottom:10px; overflow-wrap:break-word; }
.instrument-body ul { margin-bottom:10px; }
.instrument-body li { font-size:.875rem; overflow-wrap:break-word; }
.inst-specs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--gray-100); }
@media(max-width:600px){ .inst-specs{grid-template-columns:1fr 1fr;} }
@media(max-width:400px){
  .instrument-head{grid-template-columns:38px 1fr;}
  .instrument-head .inst-standard{display:none;}
}
.inst-spec-item { background:var(--gray-50); border-radius:6px; padding:10px 12px; }
.inst-spec-label { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--gray-500); margin-bottom:3px; }
.inst-spec-value { font-size:.82rem; font-weight:600; color:var(--navy); }

/* ----------------------------------------------------------------
   Share strip + related cards
   ---------------------------------------------------------------- */
.share-strip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--gray-100); margin-top:20px; }
.share-strip span { font-size:.78rem; color:var(--gray-500); }
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:500px){ .related-grid{grid-template-columns:1fr;} }
.related-card { border:1px solid var(--gray-100); border-radius:8px; padding:16px; text-decoration:none; transition:box-shadow var(--t),border-color var(--t); display:block; }
.related-card:hover { border-color:var(--orange); box-shadow:0 4px 14px rgba(232,92,13,.07); }
.related-card .rc-section { font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--orange); margin-bottom:4px; }
.related-card .rc-title { font-size:.875rem; font-weight:600; color:var(--navy); line-height:1.35; }

/* ----------------------------------------------------------------
   Workflow steps
   ---------------------------------------------------------------- */
.workflow-step { display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--gray-100); }
.workflow-step:last-child { border-bottom:none; }
.workflow-num { width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; font-size:.85rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.workflow-content h3 { font-size:.95rem; font-weight:600; color:var(--navy); margin:0 0 6px; overflow-wrap:break-word; }
.workflow-content p { font-size:.85rem; color:var(--gray-700); line-height:1.65; margin:0; overflow-wrap:break-word; }

/* ----------------------------------------------------------------
   Grade / ink / pulp cards
   ---------------------------------------------------------------- */
.grade-grid,.ink-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
@media(max-width:640px){ .grade-grid,.ink-grid{grid-template-columns:1fr;} }
.grade-card,.ink-card,.pulp-card { border:1px solid var(--gray-100); border-radius:10px; overflow:hidden; }
.grade-card-head,.ink-card-head,.pulp-card-head { padding:14px 18px 10px; border-bottom:1px solid var(--gray-100); }
.grade-card-body,.ink-card-body,.pulp-card-body { padding:14px 18px; font-size:.82rem; color:var(--gray-700); line-height:1.6; }

/* Pantone swatches */
.swatch-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:20px 0; }
@media(max-width:640px){ .swatch-grid{grid-template-columns:repeat(3,1fr);} }
.swatch-item { border-radius:6px; overflow:hidden; border:1px solid var(--gray-100); }
.swatch-color { height:44px; }
.swatch-info { padding:6px 8px; background:#fff; }
.swatch-pms { font-size:.72rem; font-weight:700; color:var(--navy); }
.swatch-note { font-size:.65rem; color:var(--gray-500); margin-top:1px; }

/* App cards (GSM guide) */
.app-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
@media(max-width:860px){ .app-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:500px){ .app-grid{grid-template-columns:1fr;} }
.app-card { border:1px solid var(--gray-100); border-radius:8px; padding:16px; background:#fff; }
.app-gsm { font-size:1.2rem; font-weight:700; color:var(--navy); }
.app-name { font-size:.78rem; font-weight:600; color:var(--gray-500); margin-top:2px; }
.app-uses { font-size:.8rem; color:var(--gray-700); line-height:1.55; margin-top:8px; }

/* Test cards (grain direction) */
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0; }
@media(max-width:640px){ .test-grid{grid-template-columns:1fr;} }
.test-card { border:1px solid var(--gray-100); border-radius:8px; padding:16px; background:#fff; }
.test-card .tc-num { font-size:1.4rem; font-weight:700; color:var(--orange); }
.test-card .tc-name { font-size:.875rem; font-weight:600; color:var(--navy); margin-bottom:6px; }
.test-card .tc-desc { font-size:.8rem; color:var(--gray-700); line-height:1.55; }

/* Surface swatches (coatings page) */
.surface-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:20px 0; }
@media(max-width:700px){ .surface-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:420px){ .surface-grid{grid-template-columns:repeat(2,1fr);} }
.surface-card { border:1px solid var(--gray-100); border-radius:8px; padding:12px; text-align:center; }
.surface-swatch { height:44px; border-radius:5px; margin-bottom:8px; }
.surface-name { font-size:.78rem; font-weight:600; color:var(--navy); }
.surface-gu { font-size:.7rem; color:var(--gray-500); margin-top:2px; }

/* ----------------------------------------------------------------
   Section heading, Cards, Stats
   ---------------------------------------------------------------- */
.sec-head { margin-bottom:48px; }
.sec-head h2 { margin-top:6px; }
.sec-head p  { margin-top:12px; max-width:540px; }
.sec-head--center{text-align:center;} .sec-head--center p{margin-inline:auto;}

.card { background:#fff; border:1px solid var(--gray-100); border-radius:10px; overflow:hidden; transition:box-shadow var(--t),transform var(--t); }
.card:hover { box-shadow:0 8px 28px rgba(13,27,42,.07); transform:translateY(-3px); }
.card-body { padding:clamp(18px,3vw,28px); }

.stat-n { font-size:clamp(1.6rem,3.5vw,2.6rem); font-weight:700; color:var(--navy); line-height:1; }
.stat-n .unit { font-size:.9rem; font-weight:500; color:var(--gray-500); }
.stat-l { font-size:.78rem; color:var(--gray-500); margin-top:4px; }

/* ----------------------------------------------------------------
   Tables (homepage/services)
   ---------------------------------------------------------------- */
.pps-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:8px; border:1px solid var(--gray-100); max-width:100%; }
.pps-table { width:100%; border-collapse:collapse; font-size:.875rem; min-width:400px; }
.pps-table th { background:var(--navy); color:#fff; font-weight:600; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; padding:12px 16px; text-align:left; }
.pps-table td { padding:12px 16px; border-bottom:1px solid var(--gray-100); color:var(--gray-700); vertical-align:top; line-height:1.5; }
.pps-table tr:last-child td{border-bottom:none;} .pps-table tr:nth-child(even) td{background:var(--gray-50);}

/* ----------------------------------------------------------------
   Dual callout (homepage/services)
   ---------------------------------------------------------------- */
.dual-callout { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-block:24px; }
@media(max-width:600px){ .dual-callout{grid-template-columns:1fr;} }
.dual-callout-item { padding:18px; border-radius:8px; }
.dual-callout-item p { font-size:.875rem; margin:0; margin-top:6px; }
.dual-commercial{background:#EFF6FF;} .dual-commercial .label-tag{color:#1D4ED8;}
.dual-packaging{background:var(--orange-bg);} .dual-packaging .label-tag{color:var(--orange-dk);}

/* ----------------------------------------------------------------
   Share / Download buttons
   ---------------------------------------------------------------- */
.share-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1.5px solid var(--gray-300); border-radius:20px; font-size:.75rem; font-weight:500; color:var(--gray-500); background:#fff; cursor:pointer; transition:all var(--t); -webkit-tap-highlight-color:transparent; min-height:36px; }
.share-btn:hover { border-color:var(--orange); color:var(--orange); }
.download-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; background:var(--gray-50); border:1.5px solid var(--gray-300); border-radius:6px; font-size:.85rem; font-weight:500; color:var(--gray-700); transition:all var(--t); }
.download-btn:hover { background:var(--orange-bg); border-color:var(--orange); color:var(--orange-dk); }

/* ----------------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------------- */
.breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.breadcrumb a,.breadcrumb span{font-size:.78rem;color:var(--gray-500);}
.breadcrumb a:hover{color:var(--orange);} .breadcrumb .sep{color:var(--gray-300);}
.breadcrumb .current{color:var(--gray-700);font-weight:500;}

/* ----------------------------------------------------------------
   Article body (text-only pages)
   ---------------------------------------------------------------- */
.article-body { max-width:var(--max-text); margin-inline:auto; }
.article-body h2 { font-size:1.4rem; margin-top:60px; margin-bottom:14px; padding-top:36px; border-top:1px solid var(--gray-100); scroll-margin-top:130px; overflow-wrap:break-word; }
.article-body h3 { font-size:1.1rem; margin-top:28px; margin-bottom:10px; overflow-wrap:break-word; }
.article-body p{margin-bottom:14px;overflow-wrap:break-word;}
.article-body ul,.article-body ol{margin-block:14px;padding-left:20px;}
.article-body li{list-style:disc;font-size:1rem;color:var(--gray-700);line-height:1.7;margin-bottom:5px;overflow-wrap:break-word;}
.article-body ol li{list-style:decimal;}
.article-body strong{color:var(--navy);font-weight:600;}

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.site-footer { background:var(--navy); padding-top:64px; padding-bottom:40px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:56px; }
@media(max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;gap:32px;} }
@media(max-width:500px){ .footer-grid{grid-template-columns:1fr;gap:28px;} }
.footer-brand p{color:rgba(255,255,255,.45);font-size:.875rem;line-height:1.7;margin-top:14px;max-width:280px;}
.footer-brand .contact{color:rgba(255,255,255,.4);font-size:.8rem;margin-top:18px;line-height:2;}
.footer-col h5{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:16px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:.875rem;color:rgba(255,255,255,.55);transition:color var(--t);}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.footer-bottom p{font-size:.75rem;color:rgba(255,255,255,.28);}

/* ----------------------------------------------------------------
   Utilities
   ---------------------------------------------------------------- */
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-48{margin-top:48px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.text-center{text-align:center}.text-orange{color:var(--orange)}.text-navy{color:var(--navy)}.text-muted{color:var(--gray-500)}
.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ----------------------------------------------------------------
   Print
   ---------------------------------------------------------------- */
@media print{
  .site-nav,.site-footer,.share-btn,.chapter-nav,.nav-drawer{display:none!important;}
  body{font-size:11pt;color:#000;overflow-x:visible;}
  h1,h2,h3{color:#000;page-break-after:avoid;}
  .spec-table-wrap{overflow:visible;}
  .article-layout{display:block;}
  .toc{display:none;}
}

/* ----------------------------------------------------------------
   CRITICAL MOBILE FIX: Grid items default to min-width:auto which
   allows content (like wide tables) to expand the grid track beyond
   the viewport. min-width:0 overrides this for all grid children.
   ---------------------------------------------------------------- */

/* Article layout grid children */
.article-layout > * { min-width: 0; }

/* Any grid or flex container that might have overflowing children */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

/* Ensure the article element itself never exceeds its grid track */
article { min-width: 0; max-width: 100%; }
aside   { min-width: 0; max-width: 100%; }

/* All direct children of .container should be constrained */
.container > * { max-width: 100%; }


/* Chapter sections — prevent any child from blowing out */
.chapter > * { max-width: 100%; }

/* Remove overflow-x:hidden from html/body — it clips but doesn't fix.
   The fix is min-width:0 on grid children (above). */

/* ================================================================
   PERFORMANCE OPTIMISATIONS — added Phase 2 finalisation
   ================================================================ */

/* Reduce layout shift on font load */
body { font-display: swap; }

/* Hardware accelerate transitions */
.article-card, .tool-card, .audience-card {
  will-change: transform;
  transform: translateZ(0);
}

/* Content visibility for large page sections */
.hub-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Optimise image rendering */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* Print styles — prevent loading screen fonts */
@media print {
  * { font-family: Georgia, serif !important; }
  nav, .site-footer, .chapter-nav, .sidebar-block.sidebar-cta { display: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ── WhatsApp Float Button ─────────────────────────── */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:9999;display:flex;align-items:center;background:#25D366;border-radius:50px;box-shadow:0 4px 20px rgba(37,211,102,.4);text-decoration:none;overflow:hidden;transition:box-shadow .25s;}
.wa-float:hover{box-shadow:0 6px 28px rgba(37,211,102,.55);}
.wa-float-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-float-label{max-width:0;overflow:hidden;white-space:nowrap;font-family:inherit;font-size:13px;font-weight:600;color:#fff;transition:max-width .3s ease,padding-right .3s ease;padding-right:0;}
.wa-float:hover .wa-float-label{max-width:160px;padding-right:18px;}
@media(max-width:600px){.wa-float-label{display:none;}.wa-float{bottom:20px;right:20px;}}