/* ============================================================
   Alphalink Offer Document — brand + A4 page styles
   Verbatim from the approved offer template. Pair every
   document with renderOffer() output inside a .doc container.
   Fonts referenced relative to this file: ./fonts/*.woff
   ============================================================ */

/* ============================================================
   ALPHALINK SOLUTIONS — Offer & Contract Template
   Print-ready A4 document built on the website design system.
   ============================================================ */

@font-face{
  font-family:"Maison Neue";
  src:url("/fonts/offer/Maison-Neue-Book.woff") format("woff");
  font-weight:400 500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Maison Neue";
  src:url("/fonts/offer/Maison-Neue-Demi.woff") format("woff");
  font-weight:600 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Maison Neue Mono";
  src:url("/fonts/offer/Maison-Neue-Mono.woff") format("woff");
  font-weight:300 400; font-style:normal; font-display:swap;
}

:root{
  --bg:#ffffff;
  --bg-soft:#F4F7FC;
  --surface:#ffffff;
  --surface-2:#FAFBFE;
  --line:#E6EBF3;
  --line-strong:#D3DCEA;
  --text:#0B1326;
  --text-2:#4B566B;
  --text-3:#8B94A8;
  --accent:#3643F1;
  --accent-2:#02F2F1;
  --accent-deep:#1B1E6B;
  --accent-soft:#EEF0FE;
  --navy:#0A0F26;
  --navy-2:#070B1A;
  --font:"Maison Neue", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:"Maison Neue Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:#5A6072; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.06; letter-spacing:-.02em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }

/* ---------- Shared type helpers ---------- */
.eyebrow{
  font-family:var(--mono); font-weight:400; font-size:8.5pt; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); opacity:.6; }
.eyebrow.on-dark{ color:var(--accent-2); }
.eyebrow.on-dark::before{ background:var(--accent-2); }
.mono{ font-family:var(--mono); }
.muted{ color:var(--text-2); }
.grad-text{
  background:linear-gradient(108deg,var(--accent) 0%, var(--accent-2) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* fill-in placeholders — easy to spot & replace */
.fill{
  background:var(--accent-soft); color:var(--accent-deep);
  padding:0 .28em; border-radius:4px; font-weight:500;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* ============================================================
   PAGE SYSTEM — A4
   ============================================================ */
.doc{ padding:34px 0 60px; }
.page{
  width:210mm; min-height:297mm; background:var(--bg);
  margin:0 auto 26px; position:relative; overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(13,24,64,.55);
  display:flex; flex-direction:column;
}
.page-pad{ padding:24mm 22mm; flex:1; display:flex; flex-direction:column; }

/* running header / footer for interior pages */
.run-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:30px;
}
.run-head .rh-mark{ display:flex; align-items:center; gap:10px; }
.run-head .rh-mark svg{ height:22px; width:auto; display:block; }
.rh-logo{ height:22px; width:24px; display:block; flex:none; }
.run-head .rh-meta{ font-family:var(--mono); font-size:8pt; letter-spacing:.06em; color:var(--text-3); text-align:right; text-transform:uppercase; }
.run-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:13px; border-top:1px solid var(--line); margin-top:auto;
  font-family:var(--mono); font-size:7.6pt; letter-spacing:.04em; color:var(--text-3);
}
.run-foot .ch{ display:inline-flex; align-items:center; gap:7px; }
.ch-flag{ width:13px; height:13px; border-radius:3px; background:#D8232A; position:relative; flex:none; }
.ch-flag::before,.ch-flag::after{ content:""; position:absolute; background:#fff; border-radius:1px; }
.ch-flag::before{ width:7px; height:2.2px; left:3px; top:5.4px; }
.ch-flag::after{ width:2.2px; height:7px; left:5.4px; top:3px; }

/* ============================================================
   COVER
   ============================================================ */
.cover{ background:var(--navy); color:#ECF1FF; }
.cover .page-pad{ padding:22mm 22mm 20mm; position:relative; z-index:2; }
.cover-grid{
  position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 18%,#000 20%,transparent 72%);
  mask-image:radial-gradient(ellipse 90% 70% at 70% 18%,#000 20%,transparent 72%);
}
.cover-glow{ position:absolute; border-radius:50%; filter:blur(85px); z-index:0; pointer-events:none; }
.cover-glow.a{ width:300px; height:300px; left:-80px; top:-60px; background:radial-gradient(circle,rgba(54,67,241,.55),transparent 70%); }
.cover-glow.b{ width:330px; height:330px; right:-110px; top:120px; background:radial-gradient(circle,rgba(2,242,241,.30),transparent 70%); }
.cover-top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.cover-top svg{ height:30px; width:auto; }
.cover-loc{ font-family:var(--mono); font-size:8pt; letter-spacing:.16em; text-transform:uppercase; color:#9DB0D6; display:inline-flex; align-items:center; gap:8px; }

.cover-mid{ margin-top:auto; position:relative; z-index:2; }
.cover-label{
  font-family:var(--mono); font-size:9pt; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent-2); display:inline-flex; align-items:center; gap:12px; margin-bottom:24px;
}
.cover-label::before{ content:""; width:34px; height:1px; background:var(--accent-2); }
.cover h1{ font-size:46pt; font-weight:700; letter-spacing:-.035em; line-height:.98; max-width:15ch; }
.cover .sub{ margin-top:22px; font-size:13pt; color:#9DB0D6; max-width:46ch; line-height:1.5; }

.cover-meta{
  margin-top:46px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); overflow:hidden;
}
.cover-meta .cell{ background:rgba(255,255,255,.03); padding:16px 18px; }
.cover-meta .k{ font-family:var(--mono); font-size:7.6pt; letter-spacing:.16em; text-transform:uppercase; color:#7E90B8; }
.cover-meta .v{ margin-top:6px; font-size:11pt; font-weight:500; color:#ECF1FF; }

.cover-foot{ margin-top:34px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.12); padding-top:20px; }
.cover-foot .cf-block .k{ font-family:var(--mono); font-size:7.4pt; letter-spacing:.14em; text-transform:uppercase; color:#7E90B8; }
.cover-foot .cf-block .v{ margin-top:5px; font-size:9.5pt; color:#C7D3EC; }

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */
.sec-title{ font-size:25pt; font-weight:700; letter-spacing:-.03em; line-height:1.04; margin-top:12px; }
.sec-intro{ color:var(--text-2); font-size:11pt; line-height:1.6; max-width:60ch; margin-top:14px; }
.block{ margin-top:30px; }

/* intro letter */
.letter p{ color:var(--text-2); font-size:10.5pt; line-height:1.7; margin-bottom:13px; }
.letter p.lead-line{ color:var(--text); font-size:12pt; font-weight:500; line-height:1.55; }
.sign-off{ margin-top:26px; }
.sign-off .nm{ font-weight:600; font-size:10.5pt; }
.sign-off .rl{ font-family:var(--mono); font-size:8pt; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-top:3px; }

/* about strip */
.about-strip{
  margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.about-card{ border:1px solid var(--line); border-radius:var(--r-md); padding:18px; background:var(--surface-2); }
.about-card .ac-k{ font-family:var(--mono); font-size:7.4pt; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.about-card .ac-h{ font-size:11pt; font-weight:600; margin-top:9px; }
.about-card .ac-p{ font-size:8.8pt; color:var(--text-2); line-height:1.5; margin-top:6px; }

/* scope items */
.scope-list{ display:flex; flex-direction:column; margin-top:6px; }
.scope-item{ display:grid; grid-template-columns:42px 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--line); }
.scope-item:last-child{ border-bottom:1px solid var(--line); }
.scope-item .idx{ font-family:var(--mono); font-size:9pt; color:var(--accent); padding-top:3px; }
.scope-item h4{ font-size:13pt; font-weight:600; letter-spacing:-.01em; }
.scope-item p{ color:var(--text-2); font-size:10pt; line-height:1.6; margin-top:7px; }
.scope-item .tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.scope-item .tags span{ font-size:8pt; padding:5px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:500; }

/* pricing table */
.ptable{ width:100%; border-collapse:collapse; margin-top:8px; font-size:10pt; }
.ptable thead th{
  font-family:var(--mono); font-size:7.8pt; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
  text-align:left; padding:0 12px 12px; border-bottom:1px solid var(--line-strong); font-weight:400;
}
.ptable thead th.num{ text-align:right; }
.ptable tbody td{ padding:15px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.ptable tbody td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ptable tbody .it-name{ font-weight:600; font-size:10.5pt; }
.ptable tbody .it-desc{ color:var(--text-3); font-size:8.8pt; line-height:1.45; margin-top:4px; }
.ptable tbody td.num.line{ font-weight:600; }
.ptotals{ margin-top:18px; margin-left:auto; width:54%; }
.ptotals .row{ display:flex; justify-content:space-between; padding:9px 12px; font-size:10pt; }
.ptotals .row .lbl{ color:var(--text-2); }
.ptotals .row .val{ font-variant-numeric:tabular-nums; font-weight:500; }
.ptotals .row.sub{ border-bottom:1px solid var(--line); }
.ptotals .row.grand{
  margin-top:8px; background:var(--navy); color:#fff; border-radius:var(--r-md); padding:16px 18px;
}
.ptotals .row.grand .lbl{ color:#C7D3EC; font-weight:500; }
.ptotals .row.grand .val{ font-size:14pt; font-weight:700; letter-spacing:-.02em; }

.pay-note{
  margin-top:26px; border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-md); padding:18px 20px; background:var(--surface-2);
}
.pay-note .pn-k{ font-family:var(--mono); font-size:7.6pt; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.pay-note p{ font-size:9.2pt; color:var(--text-2); line-height:1.6; margin-top:9px; }

/* timeline */
.timeline{ margin-top:10px; }
.tl-step{ display:grid; grid-template-columns:46px 1fr auto; gap:18px; align-items:start; padding:15px 0; border-top:1px solid var(--line); }
.tl-step:last-child{ border-bottom:1px solid var(--line); }
.tl-dot{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; font-family:var(--mono); font-size:9pt; color:var(--accent); }
.tl-step h4{ font-size:11.5pt; font-weight:600; }
.tl-step p{ color:var(--text-2); font-size:9pt; line-height:1.5; margin-top:5px; }
.tl-when{ font-family:var(--mono); font-size:8.4pt; color:var(--text-3); text-align:right; padding-top:4px; white-space:nowrap; }

/* terms */
.terms-grid{ columns:2; column-gap:34px; margin-top:8px; }
.term{ break-inside:avoid; margin-bottom:17px; }
.term h4{ font-size:9.6pt; font-weight:600; letter-spacing:-.01em; display:flex; gap:9px; }
.term h4 .n{ font-family:var(--mono); font-size:8.4pt; color:var(--accent); }
.term p{ color:var(--text-2); font-size:8.4pt; line-height:1.55; margin-top:5px; padding-left:23px; }

/* legal / general project conditions */
.legal{ column-count:2; column-gap:28px; margin-top:10px; }
.legal-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:28px; margin-top:10px; align-items:start; }
.legal-grid.tight{ margin-top:4px; }
.legal-grid .lg-col{ min-width:0; }
.legal .lg-lead{ font-size:7.8pt; line-height:1.55; color:var(--text-2); margin-bottom:13px; }
.lg-clause{ margin-bottom:12px; break-inside:avoid; -webkit-column-break-inside:avoid; }
.lg-clause h4{ font-size:8.8pt; font-weight:600; letter-spacing:-.01em; margin-bottom:5px; break-after:avoid; }
.lg-clause h4 .n{ color:var(--accent); font-family:var(--mono); font-size:8pt; margin-right:6px; }
.lg-clause p{ font-size:7.6pt; line-height:1.5; color:var(--text-2); margin-bottom:5px; }
.lg-clause p .sn{ color:var(--text-3); font-family:var(--mono); font-size:6.9pt; margin-right:4px; letter-spacing:.02em; }
.lg-sub{ font-weight:600 !important; color:var(--text) !important; font-size:7.8pt !important; margin-top:7px; }
.lg-close{ font-size:7.8pt; line-height:1.55; color:var(--text); font-weight:500; margin-top:6px; break-inside:avoid; }

/* signature / acceptance */
.accept-intro{ color:var(--text-2); font-size:10pt; line-height:1.65; max-width:64ch; margin-top:14px; }
.sign-grid{ margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.sign-box .sb-role{ font-family:var(--mono); font-size:7.8pt; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.sign-box .sb-co{ font-size:13pt; font-weight:600; margin-top:8px; }
.sign-line{ margin-top:54px; border-top:1.4px solid var(--text); padding-top:9px; }
.sign-line .sl-k{ font-family:var(--mono); font-size:7.6pt; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.sign-meta{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sign-meta .sm-cell{ border-bottom:1px solid var(--line-strong); padding-bottom:7px; }
.sign-meta .sm-k{ font-family:var(--mono); font-size:7.4pt; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.sign-meta .sm-v{ font-size:9pt; color:var(--text-3); margin-top:14px; }

.accept-cta{
  margin-top:auto; border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:linear-gradient(140deg,var(--accent-deep) 0%, var(--accent) 70%, var(--accent-2) 135%);
  color:#fff; padding:30px 34px;
}
.accept-cta .ac-mesh{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:40px 40px; -webkit-mask-image:radial-gradient(circle at 70% 50%,#000,transparent 75%); mask-image:radial-gradient(circle at 70% 50%,#000,transparent 75%); }
.accept-cta .ac-in{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.accept-cta h3{ font-size:18pt; font-weight:700; letter-spacing:-.02em; max-width:18ch; }
.accept-cta p{ font-size:9pt; color:rgba(255,255,255,.85); margin-top:8px; max-width:34ch; line-height:1.5; }
.accept-cta .ac-mark svg{ height:46px; width:auto; opacity:.95; }

@media print{
  *,*::before,*::after{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  html,body{ background:#fff !important; margin:0 !important; padding:0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  @page{ size:210mm 297mm; margin:0; }
  .doc, #viewport{ transform:none !important; zoom:1 !important; width:auto !important; height:auto !important; }
  .doc > *:not(.page){ transform:none !important; width:auto !important; height:auto !important; }
  .doc{ padding:0 !important; margin:0 !important; }
  .page{
    box-sizing:border-box;
    margin:0 !important; box-shadow:none !important; border-radius:0 !important;
    width:210mm !important; height:297mm !important; min-height:297mm !important; max-height:297mm !important;
    overflow:hidden;
    page-break-after:always; break-after:page;
    page-break-inside:avoid; break-inside:avoid;
  }
  .page:last-child{ page-break-after:auto; break-after:auto; }
  .fill{ background:transparent; color:inherit; padding:0; }
}