/* ==========================================================================
   ERP client proposal — print-first stylesheet (Aziz Saif house palette)
   Designed for A4 and for reading on screen. Same tokens as the blueprint.
   ========================================================================== */
:root{
  --cream:#F4F8FC; --cream-soft:#EDF4FA; --cream-deep:#D9E6F2; --paper:#FFFFFF;
  --terracotta:#1B2C86; --terracotta-d:#111E63;
  --sage:#0E7490; --sage-d:#0A5468; --gold:#35ACE3; --gold-d:#1E86BE;
  --charcoal:#16233F; --ink:#0B1220; --espresso:#060B14;
  --mute:#5A6B82; --mute-l:#8497AC; --line:#D7E2EE; --line-2:#E9F0F7;
  --ff-display:"Playfair Display",Georgia,serif;
  --ff-body:"Inter",-apple-system,Helvetica,Arial,sans-serif;
  --ff-grotesk:"Space Grotesk","Inter",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@page{ size:A4; margin:15mm 15mm 16mm }
/* the cover is rendered in its own pass with zero margins — see build.mjs */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff-body);color:var(--charcoal);background:var(--cream);
  font-size:9.5pt;line-height:1.56;-webkit-font-smoothing:antialiased}
strong,b{color:var(--ink);font-weight:600}
em{font-style:italic}
code,.mono{font-family:var(--ff-mono);font-size:8.4pt;color:var(--terracotta-d)}
.mut{color:var(--mute)}

/* ---------------------------------------------------------------- cover */
/* The warm glow is a background layer, not an absolutely-positioned element.
   A positioned child overflowing the page box makes Chromium paginate the
   cover onto a second sheet even when overflow is hidden. */
.cover{background:
    radial-gradient(58% 42% at 88% 12%,rgba(53,172,227,.34),transparent 64%),
    radial-gradient(46% 34% at 6% 92%,rgba(53,172,227,.14),transparent 62%),
    linear-gradient(165deg,#060B14 0%,#111E63 52%,#1B2C86 100%);
  color:#E6EFF8;padding:20mm 18mm;height:297mm;display:flex;flex-direction:column;
  break-after:page;position:relative;overflow:hidden}
/* when the cover is rendered on its own (build.mjs pass 1) a trailing page
   break would emit an empty second leaf */
section.cover:last-of-type{break-after:auto}
.cover__top{display:flex;align-items:center;gap:12px;position:relative;z-index:2}
.mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--terracotta),var(--gold-d));
  display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);
  font-weight:800;font-size:17pt;color:#fff;line-height:1}
.mark span{color:rgba(255,255,255,.66)}
.cover__id b{display:block;font-family:var(--ff-display);font-size:15pt;color:#fff;line-height:1.1}
.cover__id span{font-family:var(--ff-grotesk);font-size:7.6pt;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold)}
.cover__mid{margin-top:auto;position:relative;z-index:2}
.kicker{font-family:var(--ff-grotesk);font-size:8pt;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12mm;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:34px;height:2px;background:var(--terracotta)}
.cover h1{font-family:var(--ff-display);font-weight:800;font-size:41pt;line-height:1.02;
  letter-spacing:-.028em;color:#fff;margin-bottom:8mm}
.cover h1 em{color:var(--terracotta);font-style:italic}
.cover__sub{font-size:11.6pt;line-height:1.62;color:rgba(239,230,218,.82);max-width:118mm}
.cover__meta{display:grid;grid-template-columns:1.7fr 1fr .9fr .8fr;gap:6mm;margin-top:16mm;
  padding-top:7mm;border-top:1px solid rgba(239,230,218,.22);position:relative;z-index:2}
.cover__meta span{display:block;font-family:var(--ff-grotesk);font-size:7pt;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.cover__meta b{font-family:var(--ff-display);font-size:12pt;color:#fff;font-weight:700;
  line-height:1.2;overflow-wrap:anywhere;display:block}
.cover__meta i{display:block;font-family:var(--ff-body);font-style:normal;font-size:8.4pt;
  color:var(--gold);margin-top:2mm;letter-spacing:.02em}
.cover__foot{margin-top:9mm;display:flex;gap:8mm;font-family:var(--ff-grotesk);font-size:7.8pt;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(239,230,218,.6);position:relative;z-index:2}

/* --------------------------------------------------------------- pages */
.page{break-before:page;padding-top:2mm}
/* first section of a document starts on the page it is already on — stops the
   body-only render (build.mjs pass 2) from opening with a blank leaf */
section.page:first-of-type{break-before:auto}
h2.sec{font-family:var(--ff-display);font-weight:800;font-size:23pt;color:var(--ink);
  letter-spacing:-.022em;line-height:1.06;padding-bottom:3mm;margin-bottom:4.5mm;
  border-bottom:2.4px solid var(--terracotta)}
h3{font-family:var(--ff-display);font-weight:700;font-size:13.4pt;color:var(--ink);
  margin:5mm 0 2.4mm;letter-spacing:-.012em;break-after:avoid}
h4{font-family:var(--ff-display);font-weight:700;font-size:11.4pt;color:var(--ink);margin-bottom:2mm}
p{margin-bottom:2.6mm}
.lead{font-size:10.4pt;line-height:1.62;color:var(--charcoal);margin-bottom:4.5mm;max-width:162mm}
.fine{font-size:7.8pt;line-height:1.6;color:var(--mute-l);margin-top:8mm;
  border-top:1px solid var(--line);padding-top:3mm}
.note{font-size:8.4pt;color:var(--mute);font-style:italic;margin-top:2mm}

ul.ticks,ul.crosses{list-style:none;margin:0 0 4mm}
ul.ticks li,ul.crosses li{position:relative;padding:1.7mm 0 1.7mm 8mm;border-bottom:1px solid var(--line-2);
  font-size:9.5pt;line-height:1.55;break-inside:avoid}
ul.ticks li:last-child,ul.crosses li:last-child{border-bottom:none}
ul.ticks li::before{content:"✓";position:absolute;left:1.5mm;top:2mm;color:var(--sage-d);font-weight:700}
ul.crosses li::before{content:"—";position:absolute;left:1mm;top:2mm;color:var(--terracotta);font-weight:700}

/* ------------------------------------------------------------- contents */
.toc{border-top:1px solid var(--line)}
.toc__i{display:grid;grid-template-columns:13mm 1fr;gap:3mm;padding:2.5mm 0;
  border-bottom:1px solid var(--line);break-inside:avoid}
.toc__i b{font-family:var(--ff-display);font-size:15pt;color:var(--terracotta);font-weight:800;line-height:1}
.toc__i strong{display:block;font-family:var(--ff-display);font-size:12pt;color:var(--ink);font-weight:700}
.toc__i span{font-size:9pt;color:var(--mute)}

/* ---------------------------------------------------------------- boxes */
.box{background:var(--paper);border:1px solid var(--line);border-left:3.4px solid var(--terracotta);
  border-radius:5px;padding:3.6mm 4.6mm;margin:4mm 0;break-inside:avoid}
.box.sage{border-left-color:var(--sage)}
.box.gold{border-left-color:var(--gold-d)}
.box p{font-size:9.4pt;margin-bottom:2mm}
.box p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:3.4mm;margin:4mm 0 5mm}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3.4mm;break-inside:avoid}
.stat b{display:block;font-family:var(--ff-display);font-weight:800;font-size:24pt;color:var(--terracotta);
  line-height:1;letter-spacing:-.03em;margin-bottom:1.5mm}
.stat span{display:block;font-family:var(--ff-grotesk);font-size:7pt;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);margin-bottom:2mm}
.stat p{font-size:8.4pt;line-height:1.5;color:var(--mute);margin:0}

/* --------------------------------------------------------------- tables */
table.t{width:100%;border-collapse:collapse;font-size:8.9pt;margin:2.6mm 0 4mm;
  background:var(--paper);border:1px solid var(--line)}
table.t th{background:var(--ink);color:#fff;text-align:left;padding:2.1mm 2.8mm;
  font-family:var(--ff-grotesk);font-size:7.4pt;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
table.t td{padding:1.8mm 2.8mm;border-bottom:1px solid var(--line-2);vertical-align:top;line-height:1.48}
table.t tr:last-child td{border-bottom:none}
table.t tr{break-inside:avoid}
table.t td.s{font-weight:600;color:var(--ink)}
table.t td.sm,table.t td .sm{font-size:8.6pt;color:var(--charcoal)}
table.t td.c,table.t th.c{text-align:center}
table.t td.b{font-weight:700;color:var(--ink)}
table.t tr.tot td{background:var(--cream-deep);font-weight:700;color:var(--ink);border-top:1.6px solid var(--ink)}
table.t tr.hi td{background:#E7F2F7}
table.t.money td.c{font-family:var(--ff-mono);font-size:8.8pt}

.chip{display:inline-block;font-family:var(--ff-grotesk);font-size:7pt;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:1mm 2.4mm;border-radius:20px;background:var(--cream-deep);
  color:var(--charcoal);border:1px solid var(--line);white-space:nowrap}
.chip.ok{background:#E2F1F4;color:var(--sage-d);border-color:#B9DDE4}
.chip.no{background:#E7EAF7;color:var(--terracotta-d);border-color:#C6CEEA}
.chip.warn{background:#E4F2FB;color:var(--gold-d);border-color:#BFE3F7}

/* --------------------------------------------------------- architecture */
.arch{display:flex;align-items:stretch;gap:2mm;margin:4mm 0 6mm}
.arch__col{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:4mm 3.4mm}
.arch__col.dark{background:var(--espresso);border-color:var(--espresso)}
.arch__col b{display:block;font-family:var(--ff-grotesk);font-size:7.4pt;letter-spacing:.15em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:2.6mm}
.arch__col.dark b{color:var(--gold)}
.arch__col span{display:block;font-size:8.4pt;line-height:1.5;color:var(--charcoal);
  padding:1.4mm 0;border-bottom:1px solid var(--line-2)}
.arch__col span:last-child{border-bottom:none}
.arch__col.dark span{color:#C3D3E6;border-bottom-color:#18233D}
.arch__ar{display:flex;align-items:center;color:var(--terracotta);font-size:13pt;font-weight:700}

/* ----------------------------------------------------------- data model */
.dm{margin-bottom:4mm;break-inside:avoid}
.dm__h{margin:0 0 1.5mm;font-size:12pt}
.dm__h code{font-size:11pt;color:var(--terracotta);font-weight:500}
.dm__h span{font-family:var(--ff-body);font-size:9pt;color:var(--mute);font-weight:400;font-style:italic}

/* ---------------------------------------------------------------- steps */
.steps{margin:4mm 0 6mm}
.step{display:grid;grid-template-columns:11mm 1fr;gap:3mm;padding:2.8mm 0;
  border-bottom:1px solid var(--line);break-inside:avoid}
.step:last-child{border-bottom:none}
.step>b{width:9mm;height:9mm;border-radius:50%;background:linear-gradient(135deg,var(--terracotta),var(--gold-d));
  color:#fff;font-family:var(--ff-display);font-weight:800;font-size:11pt;
  display:flex;align-items:center;justify-content:center}
.step strong{display:block;font-family:var(--ff-display);font-size:11.4pt;color:var(--ink);margin-bottom:1mm}
.step p{font-size:9.2pt;line-height:1.58;margin:0;color:var(--charcoal)}

/* ------------------------------------------------------- screen catalogue */
.legend{display:flex;gap:6mm;flex-wrap:wrap;margin:0 0 4.5mm;padding:2.6mm 3.4mm;background:var(--paper);
  border:1px solid var(--line);border-radius:6px;font-family:var(--ff-grotesk);
  font-size:7.6pt;letter-spacing:.05em;color:var(--mute)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:2mm}
.legend i.p1{background:var(--sage)} .legend i.p2{background:var(--gold-d)}
.legend i.p3{background:var(--mute-l)} .legend i.live{background:var(--terracotta)}

.modblock{break-inside:auto;margin-bottom:4mm}
h3.mod{font-family:var(--ff-display);font-weight:800;font-size:15pt;color:var(--ink);
  margin:5.5mm 0 2.6mm;padding-bottom:2mm;border-bottom:1.4px solid var(--cream-deep);
  display:flex;align-items:baseline;gap:3mm;break-after:avoid}
h3.mod i{font-family:var(--ff-grotesk);font-style:normal;font-size:7.6pt;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta)}

.scr{background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:3mm 3.6mm;margin-bottom:2.2mm;break-inside:avoid}
.scr__hd{display:flex;align-items:baseline;gap:2.6mm;margin-bottom:2mm;
  padding-bottom:1.8mm;border-bottom:1px solid var(--line-2)}
.scr__n{font-family:var(--ff-mono);font-size:8pt;color:var(--mute-l);font-weight:500}
.scr__hd h4{flex:1;margin:0;font-size:11.2pt}
.scr__ph{font-family:var(--ff-grotesk);font-size:6.8pt;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:.8mm 2.2mm;border-radius:20px;white-space:nowrap}
.scr__ph.p1{background:#E2F1F4;color:var(--sage-d)}
.scr__ph.p2{background:#E4F2FB;color:var(--gold-d)}
.scr__ph.p3{background:var(--cream-deep);color:var(--mute)}
.scr__live{font-family:var(--ff-grotesk);font-size:6.8pt;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:.8mm 2.2mm;border-radius:20px;
  background:#E7EAF7;color:var(--terracotta-d);white-space:nowrap}
.scr dl{display:grid;grid-template-columns:24mm 1fr;gap:.6mm 3mm;font-size:8.8pt;line-height:1.55}
.scr dt{font-family:var(--ff-grotesk);font-size:6.9pt;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);padding-top:.5mm}
.scr dd{color:var(--charcoal)}
.scr dt.why{color:var(--terracotta)}
.scr dd.why{color:var(--ink);border-top:1px solid var(--line-2);padding-top:1.4mm;margin-top:1mm}
.scr dt.why{border-top:1px solid var(--line-2);padding-top:1.6mm;margin-top:1mm}

/* -------------------------------------------------------------- hosting */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:3.4mm;margin:2.6mm 0 4mm}
.opt{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3.4mm;break-inside:avoid}
.opt.rec{border-color:var(--terracotta);border-width:1.6px}
.opt h4{margin-bottom:2mm}
.opt p{font-size:8.6pt;line-height:1.55;margin:2.4mm 0 0}
.opt p.tr{color:var(--mute)}

/* ---------------------------------------------------------- investment */
.tiers{display:grid;grid-template-columns:1fr;gap:2mm}
.tiers h4{margin:4mm 0 1mm;display:flex;align-items:center;gap:3mm}
.tiers p.mut{font-size:8.4pt;color:var(--mute);margin:-2mm 0 0}

/* ------------------------------------------------------------ signature */
.sign{display:grid;grid-template-columns:1fr 1fr;gap:8mm;margin:9mm 0 0;
  padding-top:6mm;border-top:2px solid var(--terracotta);break-inside:avoid}
.sign span{display:block;font-family:var(--ff-grotesk);font-size:7pt;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:1.5mm}
.sign b{display:block;font-family:var(--ff-display);font-size:15pt;color:var(--ink);margin-bottom:2mm}
.sign p{font-size:8.8pt;color:var(--mute);line-height:1.7;margin:0}

/* ------------------------------------------------------- screen preview */
@media screen{
  body{background:#DCE7F1;padding:0}
  .cover,.page{max-width:210mm;margin:0 auto 8mm;background:var(--cream);
    padding-left:15mm;padding-right:15mm;box-shadow:0 6px 26px rgba(22,17,13,.14)}
  .cover{padding:22mm 18mm}
  .page{padding-top:14mm;padding-bottom:14mm}
}
@media screen and (max-width:820px){
  .stats,.opts{grid-template-columns:1fr 1fr}
  .arch{flex-direction:column}.arch__ar{transform:rotate(90deg);justify-content:center}
  .cover__meta{grid-template-columns:1fr 1fr}
  .sign{grid-template-columns:1fr}
  .scr dl{grid-template-columns:1fr;gap:0}
  .scr dt{margin-top:1.4mm}
}

/* ---------------------------------------------------- screenshot gallery -- */
/* Section 4. Two figures land per A4 page; break-inside keeps a caption from
   being orphaned from its image. */
.shot{break-inside:avoid;page-break-inside:avoid;margin:0 0 8mm}
.shot__hd{display:flex;align-items:baseline;gap:8px;margin:0 0 2.5mm}
.shot__n{font-family:var(--ff-mono);font-size:8pt;font-weight:700;color:var(--gold-d);
  background:var(--cream-soft);border:1px solid var(--line);border-radius:99px;
  padding:1px 6px;flex:none}
.shot__hd h4{font-family:var(--ff-display);font-size:11.5pt;font-weight:700;
  color:var(--ink);margin:0;line-height:1.2}
.shot__mod{margin-left:auto;font-family:var(--ff-grotesk);font-size:7pt;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:3px;background:var(--paper)}
.shot__cap{margin:2.5mm 0 0;font-size:8.4pt;line-height:1.5;color:var(--mute)}