/* Look: Wise (popular-web-designs/templates/wise.md), the pick in evidence/wow/design-choice.md.
   A light, finance-native canvas, heavy compressed display type, pill buttons and large soft corners, with the
   Wise lime and forest green standing in for the brand's own lime and deep green. Every value the page's look
   depends on is a token here; wow.css holds only structure. Swap this file to change the look, no rebuild. */
:root {
  /* Colour: ground, surfaces, ink, lines, accent. Text pairs are hex so tests/looks.test.mjs can check them. */
  --bg: #ffffff; --panel: #f2f4ef; --surface: #e8ebe6; --raised: #eef1ea; --surface-2: #dde2d8; --deep: #163300;
  --ui-bg: #ffffff;
  --ink: #0e0f0c; --ink-2: #3c3e3b; --muted: #5d5f5c; --deep-ink: #e2f6d5;
  --line: rgba(14, 15, 12, .1); --line-2: rgba(14, 15, 12, .2); --tint: rgba(14, 15, 12, .05);
  --accent: #9fe870; --accent-hi: #cdffad; --on-accent: #163300; --accent-text: #2b5b0c; --accent-soft: rgba(43, 91, 12, .28);
  --focus: #163300;

  /* Type: one variable face, heavy and tight for display, regular for reading. */
  --font: "Inter Var", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --face-display: var(--font);
  --features: "calt";
  --display-weight: 820; --display-leading: .92; --display-tracking: -.035em;
  --heading-weight: 800; --heading-leading: .98; --heading-tracking: -.03em;
  --ui-weight: 560; --strong-weight: 650;
  --t1: clamp(42px, 6vw, 92px); --t2: clamp(30px, 3.4vw, 50px); --t3: clamp(20px, 1.7vw, 24px); --t4: 18px; --t5: 14px;

  /* Space and shape. */
  --m: clamp(18px, 3vw, 40px); --gap: 24px; --space: clamp(96px, 12vw, 168px);
  --r: 28px; --r-ui: 20px; --r-control: 12px;
  --btn-radius: 999px; --btn-clip: none; --btn-pad: 0 26px; --btn-hover: scale(1.04);
}

/* P0 colour pass: preserve the v2 layout and use distinct colour fields to frame each demonstration. */
.wow .w-hero { background: linear-gradient(130deg, #f0f3ff 0%, #fff9ed 70%); }
.wow .w-stage::before { background: #bcc9ff; }
.wow .w-demo { background: #eff7ee; }
.wow .tile-head { background: #ffe0cf; }
.wow .tile-site { background: #e0e8ff; }
.wow .tone-raised { background: #ffe9b9; }
.wow .w-spot { background: #e9e3fa; }
.wow .w-stage-bar li:first-child .s-bar { background: #c9dcfb; }
.wow .w-works { background: #fff9ed; }
.wow .w-mark span:nth-child(2n) { background: #b8c9f6; color: #163300; }
.wow .w-mark span:nth-child(4) { background: #ffcfb9; }
.wow .w-proof-slot { padding: 16px; border: 1px dashed var(--line-2); border-radius: 12px; margin-top: 20px; font-size: 14px; color: var(--muted); }
.wow .w-project-copy > .w-small { margin-top: 16px; }
.wow .w-project-copy > .w-link { margin-top: 12px; }
.wow .demo-lead-receipt { scroll-margin-top: 88px; padding: 24px; background: #eff7ee; border: 1px solid #9fbd90; border-radius: 16px; }
.wow .demo-lead-receipt h2 { font-size: 24px; line-height: 1.2; }
.wow .demo-lead-receipt dl { margin-block: 20px; display: grid; gap: 4px; }
.wow .demo-lead-receipt dt { margin-top: 12px; font-weight: 650; }
.wow .demo-lead-receipt dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.wow .demo-lead-receipt p { overflow-wrap: anywhere; }
.wow .demo-lead-receipt .button { margin-top: 20px; }