/* ProjectSG UI Language — tokens (light, dark) and component classes.
   Source of truth: https://claude.ai/artifact/EM2VQSPVHy2LsgAUMbirdD (ProjectSG Design System).
   Inline this file in a page's <style>; Sales mode for client-facing pages, Desk mode for internal tools. */
:root {
  --bg: #f3f4f6;
  --panel: #ffffff;
  --ink: #16181d;
  --ink-2: #4b505a;
  --muted: #676d78;
  --line: #eceef2;
  --line-2: #dcdfe5;
  --chip: #eef0f3;
  --sun: #ffe03a;
  --sun-deep: #ffc400;
  --sun-wash: #fff8d4;
  --sun-ink: #6b5200;
  --on-sun: #16181d;
  --band-1: #ffe02e;
  --band-2: #ffe65c;
  --band-3: #fff1ad;
  --flame-1: #f05410;
  --flame-2: #c9290a;
  --on-flame: #ffffff;
  --price: #ff3d17;
  --price-text: #c4300b;
  --peach: #fff2e8;
  --trust: #0d7f37;
  --trust-wash: #e6f6ea;
  --teal: #087570;
  --teal-wash: #e0f5f3;
  --deal: #e5231b;
  --plum: #5a2d91;
  --on-tag: #ffffff;
  --danger: #c81e16;
  --gold-1: #f7e1a6;
  --gold-2: #d4a648;
  --gold-ink: #4a2d06;
  --chrome-1: #eef2f7;
  --chrome-2: #a9b8cb;
  --chrome-ink: #1e2a38;
  --sheen: rgba(255, 255, 255, 0.5);
  --beige: #f3dcc0;
  --beige-hi: #fbeedd;
  --beige-ink: #8a5a26;
  --link: #4f56d9;
  --cert-bg: #f5f7ff;
  --cert-line: rgba(79, 86, 217, 0.24);
  --cert-ink: #2443b5;
  --bar: rgba(255, 255, 255, 0.97);
  --shadow-bar: 0 -6px 18px rgba(22, 24, 29, 0.08);
  --shadow-dialog: 0 14px 34px rgba(22, 24, 29, 0.16);
  --shadow-flame: 0 6px 14px rgba(201, 41, 10, 0.28);
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-24: 24px;
  --radius-tag: 4px;
  --radius-chip: 6px;
  --radius-field: 8px;
  --radius-ticket: 12px;
  --radius-card: 18px;
  --radius-pill: 9999px;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121418;
    --panel: #1c1f25;
    --ink: #eceef2;
    --ink-2: #b4b9c3;
    --muted: #959ba6;
    --line: #2a2e36;
    --line-2: #3a3f49;
    --chip: #2a2e36;
    --sun: #ffe03a;
    --sun-deep: #ffc400;
    --sun-wash: #332c12;
    --sun-ink: #f0d36a;
    --on-sun: #16181d;
    --band-1: #3b3008;
    --band-2: #2e280f;
    --band-3: #201e17;
    --flame-1: #f05410;
    --flame-2: #c9290a;
    --on-flame: #ffffff;
    --price: #ff5a2e;
    --price-text: #ff8a63;
    --peach: #2e221b;
    --trust: #45c972;
    --trust-wash: #13291b;
    --teal: #3cc7bf;
    --teal-wash: #12312f;
    --deal: #e5231b;
    --plum: #8a5ad0;
    --on-tag: #ffffff;
    --danger: #ff7a6e;
    --gold-1: #e9cf8a;
    --gold-2: #b58a35;
    --gold-ink: #3a2304;
    --chrome-1: #d9e1ea;
    --chrome-2: #8597ad;
    --chrome-ink: #16202c;
    --sheen: rgba(255, 255, 255, 0.25);
    --beige: #3a2c1c;
    --beige-hi: #4a3925;
    --beige-ink: #e8bd8c;
    --link: #9ea4ff;
    --cert-bg: #1a1f33;
    --cert-line: rgba(158, 164, 255, 0.24);
    --cert-ink: #aab4ff;
    --bar: rgba(28, 31, 37, 0.97);
    --shadow-bar: 0 -6px 18px rgba(0, 0, 0, 0.4);
    --shadow-dialog: 0 14px 34px rgba(0, 0, 0, 0.5);
    --shadow-flame: 0 6px 14px rgba(240, 84, 16, 0.25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121418;
  --panel: #1c1f25;
  --ink: #eceef2;
  --ink-2: #b4b9c3;
  --muted: #959ba6;
  --line: #2a2e36;
  --line-2: #3a3f49;
  --chip: #2a2e36;
  --sun: #ffe03a;
  --sun-deep: #ffc400;
  --sun-wash: #332c12;
  --sun-ink: #f0d36a;
  --on-sun: #16181d;
  --band-1: #3b3008;
  --band-2: #2e280f;
  --band-3: #201e17;
  --flame-1: #f05410;
  --flame-2: #c9290a;
  --on-flame: #ffffff;
  --price: #ff5a2e;
  --price-text: #ff8a63;
  --peach: #2e221b;
  --trust: #45c972;
  --trust-wash: #13291b;
  --teal: #3cc7bf;
  --teal-wash: #12312f;
  --deal: #e5231b;
  --plum: #8a5ad0;
  --on-tag: #ffffff;
  --danger: #ff7a6e;
  --gold-1: #e9cf8a;
  --gold-2: #b58a35;
  --gold-ink: #3a2304;
  --chrome-1: #d9e1ea;
  --chrome-2: #8597ad;
  --chrome-ink: #16202c;
  --sheen: rgba(255, 255, 255, 0.25);
  --beige: #3a2c1c;
  --beige-hi: #4a3925;
  --beige-ink: #e8bd8c;
  --link: #9ea4ff;
  --cert-bg: #1a1f33;
  --cert-line: rgba(158, 164, 255, 0.24);
  --cert-ink: #aab4ff;
  --bar: rgba(28, 31, 37, 0.97);
  --shadow-bar: 0 -6px 18px rgba(0, 0, 0, 0.4);
  --shadow-dialog: 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-flame: 0 6px 14px rgba(240, 84, 16, 0.25);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 500 15px/1.5 var(--font-body); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.psg-ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.psg-ic--solid { fill: currentColor; stroke: none; }
.psg-stage { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-10); }
.psg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.psg-card { background: var(--panel); border-radius: var(--radius-card); padding: var(--space-14); }
.psg-muted { color: var(--muted); }
.psg-lbl { font: 600 13px/1.3 var(--font-body); color: var(--muted); }

/* ---------- HeaderBand (Sales mode only)
<header class="psg-band">
  <div class="psg-band__nav"><svg class="psg-ic">…back…</svg><span>Your ProjectSG quote</span><span></span></div>
  <div class="psg-card psg-order">
    <div class="psg-order__top"><span class="psg-order__plan">12 months <span class="psg-order__ring">Promo</span></span><span class="psg-more">Plan details ›</span></div>
    <div class="psg-order__meta"><span>Subscription</span><span>Free iPad</span></div>
    <div class="psg-chips"><span class="psg-chip psg-chip--teal">Prices include 9% GST</span></div>
  </div>
</header> */
.psg-band { background: linear-gradient(180deg, var(--band-1), var(--band-2) 55%, var(--bg)); padding: var(--space-16) var(--space-12) var(--space-4); }
.psg-band__nav { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; text-align: center; font: 700 17px/1.2 var(--font-body); margin-bottom: var(--space-12); }
.psg-band__nav .psg-ic { font-size: 22px; }
.psg-order { display: flex; flex-direction: column; gap: 9px; }
.psg-order__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.psg-order__plan { font: 800 22px/1 var(--font-num); display: inline-flex; align-items: center; gap: var(--space-8); }
.psg-order__ring { font: 700 13px/1 var(--font-body); box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: var(--radius-pill); padding: 3px 8px; }
.psg-order__meta { display: flex; flex-wrap: wrap; row-gap: var(--space-4); font: 600 14px/1.3 var(--font-body); }
.psg-order__meta span + span { border-left: 1px solid var(--line-2); margin-left: var(--space-8); padding-left: var(--space-8); }
.psg-more { display: inline-flex; align-items: center; gap: 2px; font: 600 13px/1 var(--font-body); color: var(--muted); }

/* ---------- Button
<button type="button" class="psg-btn psg-btn--flame psg-btn--block">Accept quote</button>
variants: --flame (one per screen) · --sun · --line · --rect · size: --big · width: --block */
.psg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); border: 0; border-radius: var(--radius-pill); padding: 13px 22px; font: 700 16px/1 var(--font-body); white-space: nowrap; cursor: pointer; color: var(--ink); background: var(--chip); transition: transform 0.12s ease; }
.psg-btn:active { transform: scale(0.97); }
.psg-btn:disabled { opacity: 0.45; cursor: default; }
.psg-btn--flame { background: linear-gradient(90deg, var(--flame-1), var(--flame-2) 70%); color: var(--on-flame); box-shadow: var(--shadow-flame); font-weight: 800; }
.psg-btn--sun { background: var(--sun); color: var(--on-sun); }
.psg-btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.psg-btn--rect { border-radius: var(--radius-ticket); background: var(--flame-2); color: var(--on-flame); padding: 11px 18px; font-size: 15px; }
.psg-btn--block { width: 100%; }
.psg-btn--big { padding: 15px 24px; font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .psg-btn { transition: none; } .psg-btn:active { transform: none; } }

/* ---------- BottomBar
<div class="psg-bar"><div class="psg-bar__total"><span class="psg-price psg-price--lg">…</span><span class="psg-bar__save">Saved S$2,854.71 ›</span></div><button class="psg-btn psg-btn--flame psg-btn--big">Accept quote</button></div>
Desk mode: add psg-bar--desk, a count on the left and a psg-btn--sun on the right. */
.psg-bar { position: sticky; bottom: 0; background: var(--bar); box-shadow: var(--shadow-bar); padding: var(--space-10) var(--space-12) calc(var(--space-14) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-12); }
.psg-bar__total { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }
.psg-bar__save { display: inline-flex; align-items: center; gap: 1px; font: 600 12.5px/1 var(--font-body); color: var(--muted); }
.psg-bar--desk { justify-content: space-between; }

/* ---------- Price
<span class="psg-price psg-price--xl"><span class="psg-price__cur">S$</span>13,908<span class="psg-price__dec">.40</span></span>
<span class="psg-off">17% OFF</span>  <span class="psg-was"><s>S$16,763.11</s></span> */
.psg-price { font-family: var(--font-num); font-weight: 800; color: var(--price); line-height: 1; display: inline-flex; align-items: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; }
.psg-price__cur { font-size: 0.55em; margin-right: 1px; }
.psg-price__dec { font-size: 0.58em; }
.psg-price--xl { font-size: 46px; }
.psg-price--lg { font-size: 30px; }
.psg-price--md { font-size: 22px; }
.psg-price--ink { color: var(--ink); }
.psg-price--save { color: var(--price-text); }
.psg-was { color: var(--muted); font: 600 14px/1 var(--font-num); }
.psg-was s { text-decoration-thickness: 1.5px; }
.psg-off { box-shadow: inset 0 0 0 1.5px var(--price-text); color: var(--price-text); font: 800 13px/1 var(--font-num); padding: 3px 6px; border-radius: var(--radius-tag); letter-spacing: 0.02em; white-space: nowrap; }
.psg-figure { font: 800 28px/1 var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- Instalments
<p class="psg-inst-head">Or 12 × <b>S$1,159.03</b> at 0%</p>
<div class="psg-inst"><div class="psg-inst__c is-paid"><b>S$1,159.03</b><span>Today</span></div> … <div class="psg-inst__c"><b>+9</b><span>more</span></div></div> */
.psg-inst-head { margin: 0; font: 500 13.5px/1.35 var(--font-body); }
.psg-inst-head b { font: 700 16px/1 var(--font-num); }
.psg-inst { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: var(--radius-field); padding: var(--space-10); }
.psg-inst__c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.psg-inst__c b { font: 700 15px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.psg-inst__c span { font-size: 11.5px; color: var(--muted); }
.psg-inst__c::after { content: ""; height: 5px; border-radius: 3px; background: var(--trust-wash); margin-top: var(--space-4); }
.psg-inst__c.is-paid::after { background: var(--trust); }

/* ---------- CouponTicket (sits on a panel card: the notches are panel-coloured)
<div class="psg-tickets"><div class="psg-ticket"><span class="psg-ticket__corner">Gift</span><div class="psg-ticket__top"><span class="psg-price">…S$649…</span><small>iPad</small></div><div class="psg-ticket__bot"><span>12-month plans</span><span class="psg-ticket__pill">Included</span></div></div></div> */
.psg-tickets { display: flex; gap: var(--space-8); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.psg-tickets::-webkit-scrollbar { display: none; }
.psg-ticket { position: relative; flex: 0 0 104px; border-radius: var(--radius-ticket); background: linear-gradient(180deg, var(--flame-1), var(--flame-2) 45%); color: var(--on-flame); padding: 3px; display: flex; flex-direction: column; }
.psg-ticket::before, .psg-ticket::after { content: ""; position: absolute; top: 64%; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); }
.psg-ticket::before { left: -6px; }
.psg-ticket::after { right: -6px; }
.psg-ticket__top { background: var(--panel); border-radius: 10px 10px 4px 4px; padding: 12px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); color: var(--price-text); }
.psg-ticket__top .psg-price { font-size: 21px; color: var(--price-text); }
.psg-ticket__top small { font: 600 11.5px/1.2 var(--font-body); }
.psg-ticket__bot { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: 8px 4px 7px; font: 700 11.5px/1.2 var(--font-body); text-align: center; }
.psg-ticket__pill { background: var(--panel); color: var(--price-text); border-radius: var(--radius-pill); padding: 4px 12px; font: 800 12px/1 var(--font-body); }
.psg-ticket__corner { position: absolute; top: 3px; right: 3px; z-index: 1; background: var(--sun-wash); color: var(--sun-ink); font: 700 10px/1 var(--font-body); padding: 3px 5px; border-radius: 0 9px 0 6px; }

/* ---------- Strip: savings banner, trust strip, trust pill
<div class="psg-save"><span class="psg-tag-new">New client</span><span>You save S$2,854.71 on this quote!</span></div>
<div class="psg-trust"><span><svg class="psg-ic">…check…</svg>0% instalments</span>…</div>
<span class="psg-pill-trust"><svg class="psg-ic">…check…</svg>Free iPad</span> */
.psg-save { background: var(--peach); border-radius: var(--radius-field); padding: var(--space-8) var(--space-10); display: flex; align-items: center; gap: var(--space-8); color: var(--price-text); font: 700 13.5px/1.3 var(--font-body); }
.psg-tag-new { background: var(--flame-2); color: var(--on-flame); font: italic 800 13px/1 var(--font-num); padding: 4px 8px; border-radius: 7px 2px 7px 2px; letter-spacing: 0.02em; white-space: nowrap; }
.psg-trust { box-shadow: inset 0 0 0 1.5px var(--trust); color: var(--trust); background: var(--panel); border-radius: var(--radius-field); padding: var(--space-8) var(--space-10); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); font: 700 13px/1.3 var(--font-body); }
.psg-trust span { display: inline-flex; align-items: center; gap: var(--space-4); }
.psg-pill-trust { display: inline-flex; align-items: center; gap: 5px; box-shadow: inset 0 0 0 1.5px var(--trust); color: var(--trust); border-radius: var(--radius-pill); padding: 6px 12px; font: 800 12.5px/1 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Tag: selling tags, info chips, status chips
<span class="psg-tag psg-tag--deal">PROMO</span> · <span class="psg-chip psg-chip--teal">Prices include 9% GST</span> · <span class="psg-status psg-status--accepted">Accepted</span> */
.psg-tag { display: inline-flex; align-items: center; gap: var(--space-4); font: 800 12px/1 var(--font-body); padding: 4px 7px; border-radius: var(--radius-tag); letter-spacing: 0.03em; white-space: nowrap; }
.psg-tag--deal { background: var(--deal); color: var(--on-tag); }
.psg-tag--plum { background: var(--plum); color: var(--on-tag); }
.psg-tag--laurel { background: var(--beige-hi); color: var(--beige-ink); padding: 4px 6px; letter-spacing: 0.01em; }
.psg-tag--laurel .psg-ic:last-child { transform: scaleX(-1); }
.psg-chips { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.psg-chip { display: inline-flex; align-items: center; gap: var(--space-4); font: 600 12.5px/1 var(--font-body); padding: 5px 8px; border-radius: var(--radius-chip); white-space: nowrap; }
.psg-chip--grey { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.psg-chip--teal { box-shadow: inset 0 0 0 1px var(--teal); background: var(--teal-wash); color: var(--teal); }
.psg-chip--sun { background: var(--sun-wash); color: var(--sun-ink); }
.psg-chip--free { background: var(--teal-wash); color: var(--teal); font-weight: 700; }
.psg-chip--ex { background: var(--chip); color: var(--muted); font-size: 11px; padding: 4px 6px; }
.psg-status { font: 700 11.5px/1 var(--font-body); padding: 4px 7px; border-radius: var(--radius-tag); white-space: nowrap; }
.psg-status--opened { background: var(--teal-wash); color: var(--teal); }
.psg-status--accepted { background: var(--trust-wash); color: var(--trust); }
.psg-status--new { background: var(--chip); color: var(--muted); }
.psg-status--due { background: var(--peach); color: var(--price-text); }

/* ---------- TierCard
<div class="psg-tier psg-tier--gold"><div class="psg-tier__badge"><span class="psg-tier__big">12</span><span class="psg-tier__unit">months</span></div><div class="psg-tier__body"><span class="psg-tier__name">Standard</span><span class="psg-tier__price">S$16,763.11</span><span class="psg-tier__note">S$1,396.92 a month</span></div></div> */
.psg-tiers { display: flex; flex-direction: column; gap: var(--space-8); }
.psg-tier { position: relative; overflow: hidden; border-radius: var(--radius-ticket); padding: var(--space-12) var(--space-14); display: flex; align-items: center; gap: var(--space-14); }
.psg-tier::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, var(--sheen) 50%, transparent 62%); }
.psg-tier--chrome { background: linear-gradient(135deg, var(--chrome-1), var(--chrome-2)); color: var(--chrome-ink); }
.psg-tier--gold { background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); }
.psg-tier--sun { background: linear-gradient(135deg, var(--sun), var(--sun-deep)); color: var(--on-sun); }
.psg-tier__badge { display: flex; flex-direction: column; align-items: center; width: 44px; }
.psg-tier__big { font: italic 800 36px/0.9 var(--font-num); }
.psg-tier__unit { font: 700 10.5px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.psg-tier__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.psg-tier__name { display: flex; align-items: center; gap: var(--space-6); font: 700 13px/1.2 var(--font-body); }
.psg-tier__price { font: 800 20px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.psg-tier__note { font: 600 12px/1.3 var(--font-body); }

/* ---------- BenefitIcon
<div class="psg-perks"><div class="psg-perk"><span class="psg-disk"><svg class="psg-ic">…</svg></span><b>Roundrobin</b><span>Lead sharing</span></div>…</div> */
.psg-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-14) var(--space-6); }
.psg-perks--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.psg-perk { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; min-width: 0; }
.psg-disk { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--beige-hi), var(--beige)); color: var(--beige-ink); display: grid; place-items: center; font-size: 23px; }
.psg-perk b { font: 700 13px/1.15 var(--font-body); }
.psg-perk span { font: 500 11.5px/1.15 var(--font-body); color: var(--muted); }

/* ---------- GiftCertificate (a real gift or credit only)
<div class="psg-cert"><div class="psg-cert__in"><div class="psg-cert__hd"><div><span class="psg-cert__l">Gift for</span><b>Client</b></div><div><span class="psg-cert__l">Date</span><b>29 Oct 2026</b></div></div><div class="psg-cert__amt"><span>S$</span>649</div><div class="psg-cert__ft"><span>iPad, included…</span><span class="psg-cert__sig">ProjectSG</span></div></div></div> */
.psg-cert { padding: 7px; border-radius: 6px; background: repeating-linear-gradient(45deg, var(--cert-line) 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(-45deg, var(--cert-line) 0 1.5px, transparent 1.5px 6px), var(--cert-bg); }
.psg-cert__in { background: var(--cert-bg); box-shadow: inset 0 0 0 1.5px var(--cert-line); border-radius: 3px; padding: var(--space-14) var(--space-16); display: flex; flex-direction: column; gap: var(--space-6); color: var(--cert-ink); }
.psg-cert__hd { display: flex; justify-content: space-between; gap: var(--space-12); }
.psg-cert__hd div { display: flex; flex-direction: column; gap: 3px; }
.psg-cert__hd div:last-child { align-items: flex-end; }
.psg-cert__l { font: 800 10.5px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.psg-cert__hd b { font: 700 15px/1.1 var(--font-body); color: var(--ink); }
.psg-cert__amt { font: italic 800 62px/1 var(--font-num); text-shadow: 3px 3px 0 var(--sun); }
.psg-cert__amt span { font-size: 0.55em; }
.psg-cert__ft { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-10); font: 600 12.5px/1.3 var(--font-body); }
.psg-cert__sig { font: italic 800 18px/1 var(--font-num); color: var(--ink); }

/* ---------- FormField
<div class="psg-fld"><label class="psg-flabel" for="name">Client full name <i class="psg-req">*</i></label><input id="name" class="psg-field psg-field--err" aria-invalid="true" aria-describedby="name-err"><p class="psg-ferr" id="name-err">Enter the client's full name.</p></div>
<div class="psg-fw"><span class="psg-fw__pre">SG +65</span><input id="phone" placeholder="Enter an 8-digit number"></div> */
.psg-fld { display: flex; flex-direction: column; gap: 7px; }
.psg-flabel { font: 600 14.5px/1 var(--font-body); color: var(--ink); }
.psg-req { color: var(--price-text); font-style: normal; }
.psg-field { width: 100%; font: 500 15px/1.2 var(--font-body); color: var(--ink); background: var(--panel); border: 1px solid var(--ink-2); border-radius: var(--radius-field); padding: var(--space-12); }
.psg-field--err { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.psg-ferr { display: flex; align-items: center; gap: var(--space-6); margin: 0; font: 600 13px/1.3 var(--font-body); color: var(--danger); }
.psg-fw { display: flex; align-items: center; border: 1px solid var(--ink-2); border-radius: var(--radius-field); background: var(--panel); }
.psg-fw:focus-within { box-shadow: 0 0 0 2px var(--link); }
.psg-fw__pre { padding: 0 10px 0 12px; border-right: 1px solid var(--line-2); font-weight: 600; white-space: nowrap; }
.psg-fw input { border: 0; flex: 1; min-width: 0; padding: var(--space-12); background: transparent; font: 500 15px/1.2 var(--font-body); color: var(--ink); }
.psg-fw input:focus { outline: none; }
.psg-field::placeholder, .psg-fw input::placeholder { color: var(--muted); }

/* ---------- Tabs: underline tabs switch views, grey chips filter
<div class="psg-tabs" role="tablist"><button role="tab" aria-selected="true">12 months</button>…</div>
<div class="psg-fchips"><button class="psg-fchip" aria-pressed="true">Promo</button>…</div> */
.psg-tabs { display: flex; gap: 22px; }
.psg-tabs button { position: relative; background: none; border: 0; padding: 8px 0 10px; font: 600 15.5px/1 var(--font-body); color: var(--muted); cursor: pointer; }
.psg-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 800; }
.psg-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 3.5px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); }
.psg-fchips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.psg-fchip { background: var(--chip); border: 1px solid transparent; border-radius: var(--radius-field); padding: 8px 12px; font: 600 13.5px/1 var(--font-body); color: var(--ink); cursor: pointer; }
.psg-fchip[aria-pressed="true"] { background: var(--sun-wash); border-color: var(--sun-deep); color: var(--sun-ink); }

/* ---------- ConfirmDialog (a real decision only; never on leaving a page)
<div class="psg-dlg" role="dialog" aria-labelledby="t"><p class="psg-dlg__t" id="t">Leave without accepting? …</p><div class="psg-dlg__icons">…</div><button class="psg-btn psg-btn--flame psg-btn--block">Accept quote</button><button class="psg-btn psg-btn--line psg-btn--block">Come back later</button></div> */
.psg-dlg { background: var(--panel); border-radius: var(--radius-card); padding: 20px 18px var(--space-16); box-shadow: var(--shadow-dialog), inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: var(--space-14); text-align: center; }
.psg-dlg__t { margin: 0; font: 700 17px/1.35 var(--font-body); text-wrap: balance; }
.psg-dlg__t em { font-style: normal; color: var(--price-text); }
.psg-dlg__icons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.psg-dlg__icons > div { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); font: 600 13px/1.3 var(--font-body); }
.psg-dlg__icons span:not(.psg-dot) { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.psg-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; }
.psg-dot--trust { background: var(--trust-wash); color: var(--trust); }
.psg-dot--save { background: var(--peach); color: var(--price-text); }