/* ============================================================
   Shared design system for the English marketing site: "/",
   "/assessment", "/programs", "/faq", and the legal pages
   (terms/privacy/disclaimer). NOT linked from /lv, which keeps
   its own separate stylesheet untouched.

   Base canvas (oklch dark navy) is unchanged - kept deliberately,
   per the brand guideline pass: the guideline's own light/paper
   palette governs colour recipes (mark, accent gradient) and
   type, not the site's overall dark/light balance.
     - --warm-grad / --warm-ink: a deepened, more muted version
       of the accent gradient with warm-ivory text, used on the
       primary button only - kept as its own distinct token since
       it was approved separately for button legibility, not
       merged into --gradient-signal.
     - --paper family: already existed for light accent bands;
       now also used for ONE featured card per page, so a warm
       surface can sit inside an otherwise-dark section.
   Every font, everywhere on this page, is now either Instrument
   Sans (--font-ui/--font-display, body through headlines) or IBM
   Plex Mono (--font-mono, figures/labels/eyebrows only) - the
   guideline's exact two-typeface system. --gradient-signal is the
   guideline's exact accent gradient: 125deg, #29C1E1 -> #5298EF ->
   #7A5CF8.
   ============================================================ */
:root{
  --background: oklch(0.17 0.035 280);
  --foreground: oklch(0.97 0.005 285);
  --surface: oklch(0.215 0.038 280);
  --surface-2: oklch(0.255 0.04 280);
  --teal: oklch(0.78 0.14 178);
  --violet: oklch(0.70 0.15 285);
  --signal: oklch(0.83 0.15 88);
  --primary: var(--teal);
  --primary-foreground: oklch(0.17 0.035 280);
  --muted: oklch(0.255 0.04 280);
  --muted-foreground: oklch(0.78 0.035 75);
  --border: oklch(0.97 0.005 285 / 12%);
  --input: oklch(0.97 0.005 285 / 18%);
  --ring: var(--teal);
  --paper: oklch(0.975 0.01 90);
  --paper-foreground: oklch(0.20 0.03 280);
  --paper-muted: oklch(0.46 0.02 280);
  --paper-border: oklch(0.20 0.03 280 / 12%);
  --paper-surface: oklch(0.995 0.006 90);
  --destructive: oklch(0.63 0.2 24);
  --warm-teal: oklch(0.58 0.11 175);
  --warm-violet: oklch(0.54 0.12 285);
  --warm-grad: linear-gradient(100deg, var(--warm-teal), var(--warm-violet));
  --warm-ink: oklch(0.975 0.012 85);
  --gradient-signal: linear-gradient(125deg, #29C1E1, #5298EF, #7A5CF8);
  --gradient-canvas: radial-gradient(120% 90% at 12% -15%, color-mix(in oklab, var(--violet) 22%, transparent), transparent 62%);
  --shadow-lift: 0 28px 60px -30px oklch(0.05 0.03 285 / .75);
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--teal) 30%, transparent), 0 18px 50px -22px color-mix(in oklab, var(--teal) 40%, transparent);
  --font-display:'Instrument Sans',system-ui,sans-serif;
  --font-ui:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-ui);background:var(--background);color:var(--foreground);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--violet);text-decoration:none;transition:color .15s}
a:hover{color:var(--teal)}
input,select,textarea,button{font-family:var(--font-ui)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
p{text-wrap:pretty}
.max{max-width:1152px;margin:0 auto;padding-left:24px;padding-right:24px}
.label-mono{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase}
h1,h2,.section-heading,.hero-card h2{font-family:var(--font-display)}
.section-heading{font-size:1.875rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
@media (min-width:640px){.section-heading{font-size:2.25rem}}
.bg-grid-fine{position:absolute;inset:0;pointer-events:none;opacity:.3;background-image:linear-gradient(to right, var(--border) 1px, transparent 1px),linear-gradient(to bottom, var(--border) 1px, transparent 1px);background-size:72px 72px;mask-image:radial-gradient(80% 60% at 30% 0%, black, transparent 75%);-webkit-mask-image:radial-gradient(80% 60% at 30% 0%, black, transparent 75%)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
header.scrolled{background:color-mix(in oklab, var(--background) 85%, transparent);backdrop-filter:blur(16px);border-bottom-color:var(--border)}
.masthead{max-width:1152px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:400;font-size:17px;letter-spacing:-.02em;color:var(--foreground)}
.mark{flex:none;border-radius:9px;filter:drop-shadow(0 3px 8px oklch(0.55 0.13 260 / 35%))}
.wordmark-text{white-space:nowrap}
.wordmark em{font-style:normal;font-weight:600}
.nav-right{display:flex;align-items:center;gap:4px}
.nav-link{font-family:var(--font-ui);font-size:13.5px;font-weight:500;color:var(--muted-foreground);padding:8px 12px;border-radius:8px;transition:background .15s,color .15s}
.nav-link:hover{color:var(--foreground);background:color-mix(in oklab, var(--surface-2) 60%, transparent)}
.nav-link.on{color:var(--foreground)}
.nav-cta{font-family:var(--font-ui);font-size:13.5px;font-weight:600;color:var(--foreground);background:var(--warm-grad);border:0;border-radius:99px;padding:9px 18px;white-space:nowrap;cursor:pointer}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer}
.nav-toggle span{display:block;width:16px;height:1px;background:var(--foreground);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:16px;height:1px;background:var(--foreground)}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}
.mobile-nav{display:none;border-top:1px solid var(--border);background:var(--background)}
.mobile-nav.show{display:block}
.mobile-nav-inner{max-width:1152px;margin:0 auto;padding:14px 24px 20px;display:grid;gap:2px}
.mobile-nav-inner a{font-family:var(--font-ui);padding:10px 4px;font-size:14px;color:var(--muted-foreground)}
.mobile-nav-inner a:hover{color:var(--foreground)}
@media (max-width:820px){.nav-right>.nav-link{display:none}.nav-toggle{display:flex}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--gradient-canvas);pointer-events:none}
.hero::after{content:"";position:absolute;right:-8rem;top:22%;width:28rem;height:28rem;border-radius:50%;background:color-mix(in oklab, var(--teal) 12%, transparent);filter:blur(120px);pointer-events:none}
.hero-inner{position:relative;padding:72px 0 88px}
.hero-inner.tight{padding:56px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-grid.single{grid-template-columns:1fr;max-width:760px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--teal);margin-bottom:16px}
.hero h1{font-size:3.1rem;line-height:1.08;font-weight:700;letter-spacing:-.02em}
/* The accent clause is its own LINE, not a continuation of the one above.
   As an inline span it wrapped mid-clause, so "Earn" was stranded at the
   end of line one with "more because of them." dropping below it. A block
   keeps each clause whole. text-wrap:balance then stops a long clause
   leaving a single orphaned word on its own line if it does have to wrap. */
.hero-accent{display:block;font-size:1.06em;font-weight:400;text-wrap:balance;background:var(--gradient-signal);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Headlines never break a clause across lines when the line has room. */
h1,h2,h3{text-wrap:balance}
.hero-lede{margin-top:26px;max-width:520px;font-family:var(--font-ui);font-size:16.5px;line-height:1.65;color:var(--muted-foreground)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:99px;font-family:var(--font-ui);font-size:14.5px;font-weight:600;cursor:pointer;border:0;text-decoration:none;transition:transform .15s,border-color .15s,background .15s}
.btn-grad{background:var(--warm-grad);color:var(--warm-ink);box-shadow:var(--shadow-glow)}
.btn-grad:hover{transform:translateY(-2px);color:var(--warm-ink)}
.btn-outline-dark{color:var(--foreground);border:1px solid var(--border);background:var(--surface)}
.btn-outline-dark:hover{border-color:color-mix(in oklab, var(--teal) 50%, transparent);color:var(--foreground);background:var(--surface-2);transform:translateY(-2px)}
.btn-paper{background:var(--paper-foreground);color:var(--paper)}
.btn-paper:hover{transform:translateY(-2px);color:var(--paper)}
.hero-trust{margin-top:30px;padding-top:20px;border-top:1px solid var(--border);max-width:540px;font-family:var(--font-ui);font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.trust-list{margin-top:14px;display:grid;gap:9px}
.trust-list li{display:flex;align-items:center;gap:11px;font-family:var(--font-ui);font-size:13px;color:var(--muted-foreground)}
.trust-check{flex:none;display:grid;place-items:center;width:19px;height:19px;border-radius:99px;background:color-mix(in oklab, var(--teal) 15%, transparent);color:var(--teal);font-size:10px;font-weight:700}
.hero-card-wrap{position:relative}
.hero-card-glow{position:absolute;inset:-16px;border-radius:2rem;background:var(--gradient-signal);opacity:.08;filter:blur(40px)}
.hero-card{position:relative;border-radius:1.75rem;border:1px solid var(--border);background:var(--surface);padding:30px;box-shadow:var(--shadow-lift)}
.hero-card-head{display:flex;align-items:center;justify-content:space-between}
.chip{display:inline-flex;font-family:var(--font-ui);border-radius:99px;background:color-mix(in oklab, var(--teal) 10%, transparent);padding:4px 12px;font-size:11px;font-weight:600;color:var(--teal)}
.hero-card h2{margin-top:18px;font-size:22px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.hero-qa{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);display:grid;gap:15px}
.hero-qa-item{display:flex;gap:14px;border-radius:12px;padding:8px;transition:background .15s}
.hero-qa-item:hover{background:var(--surface-2)}
.hero-qa-dot{flex:none;margin-top:6px;width:8px;height:8px;border-radius:99px;background:var(--warm-grad)}
.hero-qa-q{display:block;font-family:var(--font-ui);font-size:14px;font-weight:600;line-height:1.4}
.hero-qa-tag{display:block;margin-top:3px;font-family:var(--font-ui);font-size:12px;color:var(--muted-foreground)}
.hero-card-foot{margin-top:24px;display:flex;align-items:center;gap:12px;border-radius:16px;border:1px solid var(--border);background:color-mix(in oklab, var(--surface-2) 60%, transparent);padding:14px}
.hero-card-foot-mark{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:99px;background:var(--warm-grad);color:var(--warm-ink);font-family:var(--font-ui);font-size:12px;font-weight:700}
.hero-card-foot p{font-family:var(--font-ui);font-size:12px;line-height:1.5;color:var(--muted-foreground)}

/* ---------- section rhythm ---------- */
section.block{max-width:1152px;margin:0 auto;padding:76px 24px 0}
.section-label{display:flex;align-items:center;gap:20px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:32px}
.section-label::after{content:"";flex:1;height:1px;background:var(--border)}
.section-label-paper::after{background:var(--paper-border)}
.band-paper{border-bottom:1px solid var(--paper-border);background:var(--paper);color:var(--paper-foreground)}

/* ---------- services grid (homepage) ---------- */
.services-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
.services-grid.pair{grid-template-columns:1fr 1fr}
.services-grid.programs{grid-template-columns:repeat(3,1fr)}
.svc-card{position:relative;width:100%;text-align:left;color:var(--foreground);font-family:var(--font-ui);border-radius:1.5rem;border:1px solid var(--border);background:var(--surface);padding:28px;display:flex;flex-direction:column;transition:transform .15s,border-color .15s,box-shadow .15s}
.svc-card:hover{transform:translateY(-4px);border-color:color-mix(in oklab, var(--teal) 40%, transparent);box-shadow:var(--shadow-lift)}
.svc-card.featured{background:var(--paper);border-color:transparent;grid-row:span 2}
.svc-card .kicker{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.svc-card.featured .kicker{color:var(--warm-teal)}
.svc-card .badge{display:inline-block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-teal);background:oklch(0.58 0.11 175 / 12%);border-radius:99px;padding:3px 9px;margin-top:12px}
.svc-card h3{margin-top:12px;font-family:var(--font-ui);font-size:17px;font-weight:600;letter-spacing:-.005em}
.svc-card.featured h3{color:var(--paper-foreground);font-size:22px}
.svc-card p{margin-top:9px;font-family:var(--font-ui);font-size:13.5px;line-height:1.6;color:var(--muted-foreground);flex:1}
.svc-card.featured p{color:var(--paper-muted)}
.svc-actions{margin-top:18px;display:flex;align-items:center;gap:20px}
.svc-card .go{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--teal);background:none;border:0;padding:0;cursor:pointer}
.svc-card.featured .go{color:var(--warm-teal)}
.svc-card .go i{transition:transform .15s}
.svc-card a.go:hover i{transform:translateX(3px)}
@media (max-width:900px){.services-grid,.services-grid.pair,.services-grid.programs{grid-template-columns:1fr}.svc-card.featured{grid-row:auto}}

/* ---------- quote-request modal ----------
   One modal, reused for all three advisory programs - which program is
   pre-selected travels via the trigger button's data-service, written into
   the (still-visible, editable) "service" select when the modal opens. Not
   using <dialog> - want a custom overlay/close pattern that matches the
   rest of the site's chrome instead of UA-styled dialog backdrops. */
.modal-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;background:oklch(0.05 0.02 280 / 72%);backdrop-filter:blur(4px)}
.modal-overlay.show{display:flex}
.modal-panel{position:relative;width:100%;max-width:920px;max-height:88vh;overflow-y:auto;border-radius:1.75rem;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-lift);display:grid;grid-template-columns:.85fr 1.15fr}
.modal-close{position:absolute;top:16px;right:16px;z-index:2;width:34px;height:34px;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);color:var(--foreground);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center}
.modal-close:hover{border-color:color-mix(in oklab, var(--teal) 40%, transparent)}
.modal-info{background:var(--surface-2);padding:36px 30px;border-radius:1.75rem 0 0 1.75rem;display:flex;flex-direction:column}
.modal-info h2{font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.modal-info .lead{margin-top:10px;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.modal-contact-list{margin-top:26px;display:grid;gap:16px}
.modal-contact-item{display:flex;align-items:flex-start;gap:12px}
.modal-contact-icon{flex:none;width:34px;height:34px;border-radius:.75rem;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;font-size:14px;color:var(--teal)}
.modal-contact-item .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}
.modal-contact-item .v{margin-top:3px;font-size:13.5px;font-weight:600;color:var(--foreground)}
.modal-contact-item .v a{color:var(--foreground)}
.modal-contact-item .v a:hover{color:var(--teal)}
.whatsapp-btn{margin-top:auto;padding-top:26px;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 20px;border-radius:99px;background:#25D366;color:#04120a;font-family:var(--font-ui);font-size:14px;font-weight:700;text-decoration:none;margin-top:26px}
.whatsapp-btn:hover{color:#04120a;filter:brightness(1.05)}
.modal-form-col{padding:36px 34px}
.modal-form-col h2{font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:-.01em;margin-bottom:22px}
.modal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.modal-form-grid .field-full{grid-column:1 / -1}
.modal-form-grid .field+.field{margin-top:0}
.opt{color:var(--muted-foreground);font-weight:400}
@media (max-width:720px){
  .modal-panel{grid-template-columns:1fr;max-height:92vh}
  .modal-info{border-radius:1.75rem 1.75rem 0 0}
  .modal-form-grid{grid-template-columns:1fr}
}

/* ---------- numbered/expandable list (how it works, what's delivered) ---------- */
.num-list{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:1.25rem;overflow:hidden}
.num-item{background:var(--surface)}
.num-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:18px;padding:20px 24px;font-family:var(--font-ui);color:var(--foreground)}
.num-n{flex:none;font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--teal);width:20px}
.num-t{flex:1;font-size:15px;font-weight:600}
.num-plus{flex:none;color:var(--teal);font-size:19px;font-weight:400;line-height:1;transition:transform .2s}
.num-item.on .num-plus{transform:rotate(45deg)}
.num-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.num-item.on .num-a{max-height:240px}
.num-a-in{padding:0 24px 22px 62px;font-family:var(--font-ui);font-size:13.5px;line-height:1.6;color:var(--muted-foreground);max-width:560px}

/* ---------- cards / stat tiles ---------- */
.stat-grid{margin-top:40px;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.stat-tile{border-radius:1.5rem;border:1px solid var(--paper-border);background:var(--paper-surface);padding:24px;transition:transform .15s}
.stat-tile:hover{transform:translateY(-4px)}
.stat-tile .value{font-family:var(--font-mono);font-size:2rem;font-weight:700;letter-spacing:-.01em}
.stat-tile .title{margin-top:10px;font-family:var(--font-ui);font-weight:600;font-size:14px}
.stat-tile .body{margin-top:6px;font-family:var(--font-ui);font-size:12.5px;line-height:1.55;color:var(--paper-muted)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:1.5rem;padding:28px;color:var(--foreground)}

/* ---------- forms ---------- */
label{display:block;font-family:var(--font-ui);font-weight:500;font-size:13px;color:var(--muted-foreground);margin:0 0 7px}
select,input[type="email"],input[type="tel"],input[type="text"],textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:.75rem;
  font-size:14px;font-family:var(--font-ui);background:var(--input);color:var(--foreground);
}
select option{color:#000}
::placeholder{color:var(--muted-foreground);opacity:1}
select:focus,input:focus,textarea:focus,button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.field+.field{margin-top:18px}
.hint{font-family:var(--font-ui);font-size:11.5px;color:var(--muted-foreground);margin-top:6px;line-height:1.45}
.form-error{font-family:var(--font-ui);font-size:12.5px;color:oklch(0.7 0.18 25);margin-top:6px;display:none}
.form-error.show{display:block}
.form-status{margin-top:16px;font-family:var(--font-ui);font-size:13.5px;line-height:1.6;padding:12px 14px;border-radius:.75rem;display:none}
.form-status.show{display:block}
.form-status.ok{background:color-mix(in oklab, var(--teal) 14%, transparent);color:var(--teal)}
.form-status.err{background:oklch(0.7 0.18 25 / 14%);color:oklch(0.78 0.16 25)}

/* ---------- FAQ / principles ---------- */
.principle-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:1.25rem;overflow:hidden}
.principle-card{background:var(--surface);padding:26px}
.principle-card h3{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:-.005em}
.principle-card p{margin-top:9px;font-family:var(--font-ui);font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.faq-item{border-bottom:1px solid var(--paper-border);padding:14px 0}
.faq-item:nth-of-type(-n+2){border-top:1px solid var(--paper-border)}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--paper-foreground)}
.faq-q .chev{flex:none;color:var(--warm-teal);transition:transform .15s;font-size:16px;font-weight:400}
.faq-item.open .faq-q .chev{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease}
.faq-item.open .faq-a{max-height:280px}
.faq-a p{font-family:var(--font-ui);color:var(--paper-muted);font-size:13px;line-height:1.6;padding-top:10px}
@media (max-width:720px){.faq-grid{grid-template-columns:1fr}.faq-item:nth-of-type(-n+2){border-top:0}.faq-item:first-of-type{border-top:1px solid var(--paper-border)}}

/* ---------- closing / footer ---------- */
.closing{padding:88px 24px;text-align:center}
.closing-inner{max-width:640px;margin:0 auto}
.closing h2{font-family:var(--font-display);font-size:2rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.closing p{margin-top:14px;font-family:var(--font-ui);font-size:15px;color:var(--muted-foreground)}
.closing-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
footer{border-top:1px solid var(--border);padding:56px 24px 32px}
/* The brand block leads, then every other column takes an equal share.
   Written as auto-columns rather than a fixed four-track list because
   the assessment page carries an extra column, and a hardcoded count
   would push its social block onto a second row on that page alone. */
.footer-grid{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:1.4fr;grid-auto-flow:column;grid-auto-columns:1fr;gap:32px}
.footer-brand-row{display:flex;align-items:center;gap:9px}
.footer-brand-row .wordmark-txt{font-family:var(--font-display);font-weight:700;font-size:15px}
.footer-brand-row .wordmark-txt em{font-style:normal;color:var(--teal)}
footer p{margin-top:12px;font-family:var(--font-ui);font-size:12.5px;line-height:1.6;color:var(--muted-foreground);max-width:260px}
.footer-col h4{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:14px}
.footer-col ul{list-style:none;display:grid;gap:9px}
.footer-col a,.footer-col button{font-family:var(--font-ui);font-size:13px;color:var(--muted-foreground);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.footer-col a:hover,.footer-col button:hover{color:var(--foreground)}
.footer-bottom{max-width:1152px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--font-ui);font-size:12px;color:var(--muted-foreground)}
/* Below 820px the columns stack, so auto-flow returns to rows. */
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;grid-auto-flow:row;gap:28px 20px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;grid-auto-flow:row}}

/* ---------- assessment page: paid flow (quick check, checkout, upload) ---------- */
.check-grid{display:grid;grid-template-columns:1.05fr .9fr;gap:24px;align-items:start}
.qc-field+.qc-field{margin-top:24px}
.qc-field-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.qc-field-head label{margin:0}
.qc-value{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--teal)}
.qc-hint{margin-top:7px;font-family:var(--font-ui);font-size:11.5px;color:var(--muted-foreground)}
input[type="range"].range-signal{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--input);outline:none;margin-top:10px;cursor:pointer}
input[type="range"].range-signal::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:18px;width:18px;border-radius:999px;background:var(--teal);border:3px solid var(--surface);box-shadow:0 0 0 1px color-mix(in oklab, var(--teal) 45%, transparent)}
input[type="range"].range-signal::-moz-range-thumb{height:18px;width:18px;border-radius:999px;background:var(--teal);border:3px solid var(--surface);box-shadow:0 0 0 1px color-mix(in oklab, var(--teal) 45%, transparent);cursor:pointer}
input[type="range"].range-signal::-moz-range-track{height:6px;border-radius:999px;background:var(--input)}
.qc-label-row{display:flex;align-items:baseline;justify-content:space-between}
.qc-result{border-radius:1.5rem;border:1px solid var(--border);background:var(--surface);color:var(--foreground);padding:28px;box-shadow:var(--shadow-lift)}
.qc-result-head{display:flex;align-items:center;justify-content:space-between}
.qc-score-row{margin-top:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.qc-score{font-family:var(--font-mono);font-size:2.8rem;font-weight:700;color:var(--signal)}
.qc-score .of100{font-size:1.1rem;color:var(--muted-foreground)}
.qc-band-name{font-family:var(--font-ui);font-size:16px;font-weight:700;letter-spacing:-.005em;text-align:right}
.qc-band-cap{margin-top:2px;text-align:right}
.qc-bands{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.qc-band-bar{height:6px;border-radius:99px;background:var(--surface-2);transition:background .2s}
.qc-band-bar.on{background:var(--signal)}
.qc-band-bar.done{background:color-mix(in oklab, var(--teal) 50%, transparent)}
.qc-band-label{margin-top:8px;text-align:center;font-family:var(--font-ui);font-size:9px;color:var(--muted-foreground)}
.qc-band-label.on{color:var(--foreground)}
.qc-drivers{margin-top:26px;padding-top:20px;border-top:1px solid var(--border);display:grid;gap:16px}
.qc-driver-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--font-ui);font-size:13px}
.qc-driver-row .val{font-family:var(--font-mono);font-weight:700}
.qc-driver-track{margin-top:7px;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.qc-driver-fill{height:100%;border-radius:99px;transition:width .3s}
.qc-drag{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);font-family:var(--font-ui);font-size:12.5px;line-height:1.6;color:var(--muted-foreground)}
.qc-disclaimer{margin-top:14px;padding:0 2px;font-family:var(--font-ui);font-size:11px;line-height:1.55;color:var(--muted-foreground)}
.stack-col{display:grid;gap:20px}
.pricing-card{background:var(--surface);color:var(--foreground);border:1px solid color-mix(in oklab, var(--teal) 25%, transparent);border-radius:1.75rem;padding:30px;box-shadow:var(--shadow-glow)}
.pricing-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.pricing-row{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.pricing-price{font-family:var(--font-display);font-size:38px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.pricing-sub{font-family:var(--font-ui);font-size:12px;color:var(--muted-foreground)}
.pricing-body{font-family:var(--font-ui);font-size:13.5px;color:var(--muted-foreground);line-height:1.6;margin-bottom:20px}
.pricing-note{font-family:var(--font-ui);font-size:11px;color:var(--muted-foreground);line-height:1.55;margin-top:12px}
.consult-card h3{font-family:var(--font-ui);font-size:15.5px;font-weight:700;margin-bottom:8px}
.consult-card{padding:24px 26px}
.consult-card p{font-family:var(--font-ui);font-size:13px;color:var(--muted-foreground);line-height:1.6;margin-bottom:14px}
.consult-card a{font-family:var(--font-ui);font-size:13px;font-weight:600}
#complete-section{display:none}
#complete-section.show{display:block}
.instrument{background:var(--surface);color:var(--foreground);border:1px solid var(--border);border-radius:1.75rem;padding:26px 32px;margin-bottom:20px}
.instrument p{font-family:var(--font-ui);font-size:14px;color:var(--muted-foreground)}
.price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.price{font-family:var(--font-display);font-size:34px;font-weight:700}
.price-sub{font-family:var(--font-ui);font-size:12px;color:var(--muted-foreground)}
.eq-override{margin-top:12px;margin-bottom:0;font-family:var(--font-ui);font-size:11.5px;color:var(--muted-foreground)}
.eq-override a{color:var(--muted-foreground);text-decoration:underline}
.eq-override a:hover{color:var(--foreground)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:99px;font-family:var(--font-ui);font-size:14px;font-weight:600;text-decoration:none;background:var(--warm-grad);color:var(--warm-ink);border:0;cursor:pointer}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:disabled{opacity:.5;cursor:default;transform:none}
.btn-dark{margin-top:22px;width:100%;padding:14px;border:0;border-radius:99px;background:var(--warm-grad);color:var(--warm-ink);font-family:var(--font-ui);font-size:14px;font-weight:600;cursor:pointer;transition:transform .15s;box-shadow:var(--shadow-glow)}
.btn-dark:hover:not(:disabled){transform:translateY(-2px)}
.btn-dark:disabled{opacity:.5;cursor:not-allowed;transform:none}
.status{margin-top:18px;padding:14px 16px;border-radius:.75rem;font-family:var(--font-ui);font-size:13px;line-height:1.55;display:none}
.status.show{display:block}
.status.info{background:color-mix(in oklab, var(--teal) 12%, transparent);color:var(--foreground);border:1px solid color-mix(in oklab, var(--teal) 30%, transparent)}
.status.success{background:color-mix(in oklab, var(--teal) 16%, transparent);color:var(--foreground);border:1px solid color-mix(in oklab, var(--teal) 35%, transparent)}
.status.error{background:color-mix(in oklab, var(--destructive) 16%, transparent);color:var(--foreground);border:1px solid color-mix(in oklab, var(--destructive) 35%, transparent)}
.book-card{display:none;margin-top:18px;padding:20px 22px;border-radius:1.5rem;background:var(--surface);border:1px solid var(--border);color:var(--foreground)}
.book-card.show{display:block}
.book-card h3{font-family:var(--font-ui);font-size:14.5px;font-weight:700;margin-bottom:6px}
.book-card p{font-family:var(--font-ui);font-size:12.5px;color:var(--muted-foreground);margin-bottom:14px;line-height:1.5}
.doc-guide{margin-top:14px;border:1px solid var(--border);border-radius:1rem;overflow:hidden;background:color-mix(in oklab, var(--surface-2) 45%, transparent)}
.doc-guide summary{cursor:pointer;list-style:none;padding:13px 16px;font-family:var(--font-ui);font-size:12.5px;font-weight:600;color:var(--foreground);display:flex;align-items:center;justify-content:space-between;gap:10px}
.doc-guide summary::-webkit-details-marker{display:none}
.doc-guide summary::after{content:"+";color:var(--teal);font-size:16px;font-weight:400}
.doc-guide[open] summary::after{content:"−"}
.doc-guide-body{padding:2px 16px 16px}
.doc-tier{margin-top:12px}
.doc-tier-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:7px}
.doc-tier ul{list-style:none;display:grid;gap:6px}
.doc-tier li{display:flex;gap:9px;font-family:var(--font-ui);font-size:12px;line-height:1.5;color:var(--muted-foreground)}
.doc-tier li b{color:var(--foreground);font-weight:600}
.doc-tier li::before{content:"";flex:none;margin-top:7px;width:5px;height:5px;border-radius:99px;background:var(--teal);opacity:.7}
.doc-guide-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-family:var(--font-ui);font-size:11px;line-height:1.55;color:var(--muted-foreground)}
.report-items{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.report-items.wide{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.report-items.wide{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.report-items.wide{grid-template-columns:1fr}}
.report-item{border-radius:1rem;border:1px solid var(--border);background:var(--surface);padding:20px;transition:transform .15s,border-color .15s}
.report-item:hover{transform:translateY(-2px);border-color:color-mix(in oklab, var(--teal) 40%, transparent)}
.report-item .title{font-family:var(--font-ui);font-weight:600;font-size:13.5px}
.report-item .body{margin-top:6px;font-family:var(--font-ui);font-size:12px;line-height:1.5;color:var(--muted-foreground)}
.report-card{padding:30px;display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:center;margin-top:24px}
.report-card h2{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.report-card p{font-family:var(--font-ui);font-size:13.5px;color:var(--muted-foreground);line-height:1.6;margin-bottom:16px}
.report-card .sample-link{font-family:var(--font-ui);font-size:13.5px;font-weight:600}
.report-preview{position:relative;border:1px solid var(--border);border-radius:1rem;overflow:hidden;background:var(--surface-2);height:320px;box-shadow:var(--shadow-lift);display:flex;align-items:center;justify-content:center}
.report-preview-badge{position:absolute;left:14px;top:14px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--foreground);background:color-mix(in oklab, var(--background) 80%, transparent);border-radius:99px;padding:5px 10px}
.report-preview-mock{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 24px}
.rpm-gauge{position:relative;display:grid;place-items:center}
.rpm-gauge-num{position:absolute;font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--foreground)}
.rpm-band{margin-top:6px;font-family:var(--font-ui);font-size:13.5px;font-weight:600;color:var(--foreground)}
.rpm-rows{margin-top:18px;width:100%;max-width:280px;display:grid;gap:9px}
.rpm-row{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-ui);font-size:12px;color:var(--muted-foreground)}
.rpm-row b{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;font-weight:600}
.rpm-row b.ok{color:var(--teal)}
.rpm-row b.mid{color:var(--signal)}
@media (max-width:1024px){
  .check-grid{grid-template-columns:1fr}
  .report-card{grid-template-columns:1fr}
}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .services-grid,.services-grid.pair{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .principle-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hero-inner{padding:52px 0 60px}
  section.block{padding:52px 20px 0}
  .hero h1{font-size:2.15rem}
  .services-grid,.services-grid.pair,.stat-grid{grid-template-columns:1fr}
  .closing{padding:64px 20px}
}

/* ---------- legal pages (terms / privacy / disclaimer) ---------- */
.legal-wrap{max-width:720px;margin:0 auto;padding:0 24px}
.legal-wrap h1{font-family:var(--font-display);font-size:2rem;font-weight:700;letter-spacing:-.01em}
.legal-wrap .updated{margin-top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.legal-wrap h2{margin-top:40px;font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--foreground)}
.legal-wrap p{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--muted-foreground)}
.legal-wrap ul{margin-top:12px;padding-left:20px;display:grid;gap:10px}
.legal-wrap li{font-size:14.5px;line-height:1.65;color:var(--muted-foreground)}
.legal-wrap li strong{color:var(--foreground)}
.legal-wrap a{color:var(--teal)}
.legal-wrap a:hover{color:var(--foreground)}

/* Legal pages reuse the FAQ accordion, with two differences that matter:
   a single column, because legal text in two columns is unreadable, and
   no height cap, because a clause clipped at 280px is a clause nobody
   can rely on. Sections here run far longer than an FAQ answer. */
.legal-grid{grid-template-columns:1fr;max-width:820px}
.legal-grid .faq-item:nth-of-type(-n+2){border-top:0}
.legal-grid .faq-item:first-of-type{border-top:1px solid var(--paper-border)}
.legal-grid .faq-q{font-size:15px;padding:4px 0}
.legal-grid .faq-item.open .faq-a{max-height:none}
.legal-grid .faq-a p{font-size:13.5px;line-height:1.7;padding-top:10px}
.legal-grid .faq-a p+p{padding-top:12px}
.legal-grid .faq-a ul{margin:10px 0 0 18px;font-family:var(--font-ui);color:var(--paper-muted);font-size:13.5px;line-height:1.7}

/* ---------- book-a-call modal ---------- */
/* Same panel as the quote modal, so the two read as one system. The fields
   column is narrower here because the calendar needs the room. */
.booking-fields{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.booking-fields .field label{display:block;font-family:var(--font-ui);font-size:12px;font-weight:600;margin-bottom:5px;color:var(--foreground)}
.booking-fields .field input{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--border);background:var(--surface);font-family:var(--font-ui);font-size:13.5px;color:var(--foreground)}
.booking-fields .field input:focus{outline:2px solid var(--teal);outline-offset:1px}
.booking-note{margin-top:12px;font-family:var(--font-ui);font-size:11.5px;line-height:1.5;color:var(--muted-foreground)}
.calendly-btn{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 20px;border-radius:99px;background:var(--warm-grad);color:var(--warm-ink);font-family:var(--font-ui);font-size:14px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-glow)}
.calendly-btn:hover{color:var(--warm-ink);filter:brightness(1.03)}
/* A reserved height, so opening the modal does not reflow the panel when the
   third-party widget finally paints. */
.calendly-embed{min-height:520px;height:520px;overflow:hidden;border-radius:14px}
#booking-modal .modal-form-col{padding:30px 26px}
@media (max-width:860px){
  #booking-modal .modal-panel{grid-template-columns:1fr}
  .calendly-embed{min-height:440px;height:440px}
}

/* ---------- footer social ---------- */
/* Icons only, as asked: no labels beside them. Each still carries an
   aria-label and a title, so the link is announced to a screen reader and
   named on hover - an unlabelled icon is otherwise unidentifiable to anyone
   who cannot see it. */
.social-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);color:var(--muted-foreground);background:none;transition:color .15s,border-color .15s,transform .15s,background .15s}
.social-link:hover{color:var(--foreground);border-color:var(--teal);background:color-mix(in oklab, var(--teal) 8%, transparent);transform:translateY(-2px)}
.social-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.social-link svg{display:block}

/* ---------- components first built for the Latvian site ----------
   The Latvian page carried its own 31KB copy of this stylesheet, which is
   why it drifted: every fix made here since had to be made there too, and
   was not. These are the components it had and this file did not, lifted
   across so BOTH language sites now render from one stylesheet. Nothing
   here is Latvian-specific in itself; the English pages may use it too. */
.stat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.stat-head h2{max-width:640px;line-height:1.2}
.stat-head-note{max-width:340px;font-size:13.5px;line-height:1.6;color:var(--paper-muted)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.how-card{border-radius:1.5rem;border:1px solid var(--border);background:var(--surface);padding:26px;transition:transform .15s,border-color .15s,box-shadow .15s}
.how-card:hover{transform:translateY(-4px);border-color:color-mix(in oklab, var(--teal) 40%, transparent);box-shadow:var(--shadow-lift)}
.step-pill{display:inline-flex;border-radius:99px;border:1px solid color-mix(in oklab, var(--teal) 30%, transparent);background:color-mix(in oklab, var(--teal) 10%, transparent);padding:4px 12px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.how-card h3{margin-top:16px;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.005em}
.how-card p{margin-top:9px;font-size:13.5px;color:var(--muted-foreground);line-height:1.6}
.how-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.how-tag{border-radius:99px;background:var(--surface-2);padding:5px 11px;font-size:11.5px;color:var(--muted-foreground)}
.qc-lead{margin-top:26px;padding-top:24px;border-top:1px solid var(--border)}
.qc-lead-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.report-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}
.report-card,.report-grid{grid-template-columns:1fr}
.how-grid,.stat-grid,.report-items,.principle-grid,.qc-lead-row{grid-template-columns:1fr}
.proof-strip{margin-top:22px;padding-top:20px;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.proof-strip div{display:grid;gap:3px}
.proof-n{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--teal);line-height:1}
.proof-l{font-size:11.5px;line-height:1.35;color:var(--muted-foreground)}
.why-panel{position:relative;border-radius:1.75rem;border:1px solid var(--border);background:var(--surface);padding:26px;box-shadow:var(--shadow-lift)}
.why-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.why-list{display:grid;gap:8px}
.why-item{border:1px solid var(--border);border-radius:1rem;overflow:hidden;transition:border-color .15s,background .15s}
.why-item.on{border-color:color-mix(in oklab, var(--teal) 45%, transparent);background:color-mix(in oklab, var(--teal) 7%, transparent)}
.why-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;font-family:var(--font-display);font-size:14.5px;font-weight:700;color:var(--foreground);line-height:1.3}
.why-n{flex:none;width:24px;height:24px;border-radius:99px;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;font-weight:600;background:color-mix(in oklab, var(--teal) 16%, transparent);color:var(--teal);transition:background .15s,color .15s}
.why-item.on .why-n{background:var(--teal);color:#04121a}
.why-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.why-item.on .why-a{max-height:200px}
.why-a p{padding:0 16px 14px 52px;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.why-foot{margin-top:16px;font-size:12px;line-height:1.5;color:var(--muted-foreground)}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);transition:transform .25s ease;background:color-mix(in oklab, var(--surface) 92%, transparent);backdrop-filter:blur(12px);border-top:1px solid var(--border);box-shadow:0 -8px 30px rgba(0,0,0,.28)}
.buybar.on{transform:translateY(0)}
.buybar-in{max-width:1152px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.buybar-txt{display:grid;gap:2px;min-width:0}
.buybar-txt strong{font-family:var(--font-display);font-size:14.5px;font-weight:700;color:var(--foreground)}
.buybar-txt span{font-size:12px;color:var(--muted-foreground)}
.buybar .btn{flex:none;padding:11px 22px;font-size:14px}

/* ---------- programme cards ----------
   Lifted out of programs.html's inline <style>. It had to move: the
   Latvian programmes page needs the same components, and a second copy
   is how the Latvian site drifted from this one in the first place. */
.prog-hero{padding:120px 0 56px}
  .prog-list{display:grid;gap:2px;background:var(--border);border:1px solid var(--border);border-radius:1.5rem;overflow:hidden;margin-top:8px}
  .prog-item{background:var(--surface);padding:48px 40px;display:grid;grid-template-columns:64px 1fr;gap:28px}
  .prog-n{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--teal);padding-top:4px}
  .prog-kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}
  .prog-item h2{margin-top:8px;font-family:var(--font-display);font-size:1.7rem;font-weight:700;letter-spacing:-.015em}
  .prog-item .lede{margin-top:14px;max-width:640px;font-size:15px;line-height:1.65;color:var(--muted-foreground)}
  .prog-body{margin-top:28px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
  .prog-includes{display:grid;gap:12px}
  .prog-includes .row{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;line-height:1.55;color:var(--foreground)}
  .prog-includes .row .dot{flex:none;margin-top:7px;width:6px;height:6px;border-radius:99px;background:var(--gradient-signal)}
  .prog-side{border:1px solid var(--border);border-radius:1rem;padding:22px;background:var(--surface-2)}
  .prog-side .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:6px}
  .prog-side .v{font-size:13.5px;color:var(--foreground);line-height:1.55}
  .prog-side .v+.k{margin-top:16px}
  .prog-side .go{margin-top:20px;display:inline-flex;width:100%;justify-content:center}
  @media (max-width:820px){
    .prog-item{grid-template-columns:1fr;padding:36px 24px}
    .prog-n{padding-top:0}
    .prog-body{grid-template-columns:1fr}
  }