/* ============================================================================
   CT Signal — web design layer, phase 1 (v1.0.0, 2026-09-30, author: Reya)
   ----------------------------------------------------------------------------
   Load AFTER brand/ct-signal/tokens.css. The brand pack still owns every
   documented value (#231F20, #ED1C24, #FFFFFF, Roboto Condensed, the pack's
   space/radius ramps). This file adds what a web page needs and what the pack
   does not carry: a mobile-first type ramp, control/status colours that PASS
   WCAG 2.2 AA, and the component set the five launch pages use.

   Why each --w-* value exists (all measured — see measure_contrast.py,
   probe_candidates.py and the live report from verify_website.py):

   * .cts-btn in the pack is brand red behind white text = 4.38:1, under the
     4.5:1 floor for small text (pack README item 5). The primary CTA is
     therefore brand BLACK ground + white label = 16.30:1, with brand red used
     as a signal bar on the button's leading edge (non-text, needs 3:1: red on
     black measures 3.72:1). Red stays a signal, never a text ground.
   * brand red as text on white measures 4.38:1 -> permitted only at >=24px, or
     >=18.66px bold. Red is a MARK in this layer, not a text colour.
   * the pack's --cts-border #E1DEDF is 1.34:1 against white: fine as a
     decorative rule, FAILS 1.4.11 (3:1) as a control boundary. Control
     boundaries use #847F80 (3.94:1); hover/active #6B6768 (5.58:1).
   * the pack's provisional warning #B26A00 is 4.24:1 on white and 3.96:1 on
     #F8F7F7 — it cannot carry text. Pending/unconfirmed status uses #A05F00
     (5.08:1 white / 4.75:1 surface / 3.21:1 on the dark band).
   * body copy: pack --cts-body is 16px. Roboto Condensed is a narrow face and
     the reader is a GC on a phone in a truck, so the web ramp runs 17px at
     390px and 18px at >=1024px. DERIVED deviation, listed in NOTES.md.
   * status is never carried by colour alone: every status/pending state ships
     a word ("PENDING", "DRAFT", "PLACEHOLDER") plus a dashed border, so it
     survives greyscale and colour-blindness.

   Ground rules carried over from the pack: one primary CTA per screen, no
   gradients, no glassmorphism, no decorative shadows, whitespace is a design
   element.
   ========================================================================= */

/* --- 1 · tokens: the web layer -------------------------------------------- */
:root{
  /* colour, resolved roles (see the header comment for the measurements) */
  --w-fg:var(--cts-fg);                 /* #231F20 */
  --w-fg-muted:var(--cts-fg-muted);     /* #6B6768 · 5.58:1 on white */
  --w-bg:var(--cts-bg);                 /* #FFFFFF */
  --w-surface:var(--cts-surface);       /* #F8F7F7 */
  --w-dark:var(--cts-black);            /* #231F20 · dark band + footer */
  --w-on-dark:#FFFFFF;                  /* 16.30:1 on the dark ground */
  --w-on-dark-muted:var(--cts-neutral-30); /* #CCC8C9 · 9.84:1 on dark */
  --w-border-decor:var(--cts-border);   /* #E1DEDF · 1.34:1 — decorative only */
  --w-border-control:var(--cts-neutral-60); /* #847F80 · 3.94:1 — control edge */
  --w-border-control-hover:var(--cts-fg-muted); /* 5.58:1 */
  --w-accent:var(--cts-accent);         /* #ED1C24 · MARK only, >=3:1 anywhere */
  --w-focus:#231F20;                    /* focus ring on light grounds */
  --w-focus-on-dark:#FFFFFF;            /* focus ring on the dark band/footer */
  --w-pending:#A05F00;                  /* derived · 5.08 / 4.75 / 3.21 */
  --w-success:var(--cts-success);       /* #1E7A3C · 5.38:1 on white */
  --w-error:var(--cts-error);           /* #C41E22 · 5.91:1 on white */
  --w-btn-hover:#000000;                /* derived, NOT a pack value (pack's darkest is #231F20) · 21:1 */
                                        /* named in NOTES.md; the palette check must see it declared */

  /* mobile-first type ramp (derived; replaces the pack's fixed px sizes) */
  --w-font:var(--cts-font);
  --w-display:clamp(1.875rem,1.2rem + 2.2vw,3rem);        /* 30 -> 48px (phone hero must not eat the fold) */
  --w-h1:clamp(1.875rem,1.5rem + 1.7vw,2.25rem);         /* 30 -> 36px */
  --w-h2:clamp(1.5rem,1.32rem + 0.85vw,1.75rem);         /* 24 -> 28px */
  --w-h3:clamp(1.1875rem,1.12rem + 0.4vw,1.375rem);      /* 19 -> 22px */
  --w-body:clamp(1.0625rem,1rem + 0.25vw,1.125rem);      /* 17 -> 18px */
  --w-small:1rem;                                        /* 16px */
  --w-caption:0.8125rem;                                 /* 13px */
  --w-label:0.8125rem;                                   /* 13px, uppercase */
  --w-track-label:var(--cts-track-label);                /* 0.18em */
  --w-lh-tight:1.15; --w-lh-heading:1.25; --w-lh-body:1.55;

  /* layout */
  --w-measure:62ch;
  --w-page:1120px;
  --w-gutter:clamp(1rem,4vw,2rem);                       /* 16 -> 32px */
  --w-section:clamp(3rem,7vw,6rem);                      /* 48 -> 96px */
  --w-radius:var(--cts-radius-sm);                       /* 2px, angular */
  --w-tap:44px;                                          /* field minimum */
}

/* --- 2 · base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--w-bg);color:var(--w-fg);font-family:var(--w-font);
  font-size:var(--w-body);line-height:var(--w-lh-body)}
img,svg{max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:var(--w-lh-heading);letter-spacing:var(--cts-track-tight);
  text-wrap:balance}
p{margin:0 0 var(--cts-space-4);max-width:var(--w-measure)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--w-focus);outline-offset:2px;border-radius:var(--w-radius)}
.w-dark :focus-visible{outline-color:var(--w-focus-on-dark)}
ul,ol{margin:0 0 var(--cts-space-4);padding-left:1.15em}
li{margin-bottom:var(--cts-space-2);max-width:var(--w-measure)}
.w-container{width:100%;max-width:var(--w-page);margin-inline:auto;padding-inline:var(--w-gutter)}
.w-section{padding-block:var(--w-section)}
.w-section--surface{background:var(--w-surface)}
.w-section--tight{padding-block:calc(var(--w-section) * .6)}
.w-skip{position:absolute;left:-9999px;top:0;background:var(--w-dark);color:var(--w-on-dark);
  padding:var(--cts-space-3) var(--cts-space-4);z-index:10}
.w-skip:focus{left:0}
.w-display{font-size:var(--w-display);line-height:var(--w-lh-tight)}
.w-h1{font-size:var(--w-h1)} .w-h2{font-size:var(--w-h2)} .w-h3{font-size:var(--w-h3)}
.w-lead{font-size:clamp(1.125rem,1.05rem + .35vw,1.25rem);line-height:1.45;color:var(--w-fg)}
.w-small{font-size:var(--w-small)} .w-caption{font-size:var(--w-caption);color:var(--w-fg-muted)}
.w-muted{color:var(--w-fg-muted)}
.w-measure{max-width:var(--w-measure)}
.w-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.w-stack>*+*{margin-top:var(--cts-space-4)}
.w-rule{border:0;border-top:1px solid var(--w-border-decor);margin:0}

/* eyebrow: black text (red would be 4.38:1 at 13px), red 2px signal rule above */
.w-eyebrow{display:block;font-size:var(--w-label);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--w-track-label);color:var(--w-fg)}
.w-eyebrow::before{content:"";display:block;width:32px;height:2px;background:var(--w-accent);
  margin-bottom:var(--cts-space-3)}
.w-dark .w-eyebrow{color:var(--w-on-dark)}

/* --- 3 · status chips: word + shape, never colour alone ------------------- */
.w-chip{display:inline-block;font-size:var(--w-caption);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;padding:2px var(--cts-space-2);border:1px solid var(--w-fg-muted);
  border-radius:var(--w-radius);color:var(--w-fg)}
.w-chip--pending{border-style:dashed;border-width:2px;border-color:var(--w-pending);color:var(--w-pending)}
.w-chip--draft{border-color:var(--w-fg-muted);color:var(--w-fg-muted)}
.w-chip--placeholder{border-style:dashed;border-width:2px;border-color:var(--w-pending);color:var(--w-pending)}
.w-dark .w-chip{border-color:var(--w-on-dark-muted);color:var(--w-on-dark)}
.w-dark .w-chip--pending{border-color:var(--w-on-dark-muted);color:var(--w-on-dark)}

/* --- 4 · header + navigation (5 items, no dropdowns) ---------------------- */
.w-header{border-bottom:1px solid var(--w-border-decor);background:var(--w-bg)}
.w-header__inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cts-space-4);
  min-height:64px;padding-block:var(--cts-space-3)}
.w-logo{display:block;height:30px;width:auto}          /* scale from height only */
.w-header__inner>a,.w-footer a:has(.w-logo){display:inline-flex;align-items:center;min-height:var(--w-tap)}
code,kbd,samp{overflow-wrap:anywhere}
.w-nav{margin-left:auto}
.w-nav__list{display:flex;flex-wrap:wrap;gap:var(--cts-space-5);list-style:none;margin:0;padding:0}
.w-nav__list li{margin:0}
.w-nav a{display:inline-block;padding:var(--cts-space-2) 0;font-weight:700;font-size:var(--w-small);
  text-decoration:none;border-bottom:2px solid transparent}
.w-nav a:hover{border-bottom-color:var(--w-accent)}    /* red = the signal mark */
.w-nav a[aria-current="page"]{border-bottom-color:var(--w-fg)}
.w-navdisclosure{display:none}
@media (max-width:47.99rem){
  .w-nav{width:100%;margin-left:0}
  .w-navdisclosure{display:block;width:100%;order:3}
  .w-navdisclosure>summary{font-weight:700;text-transform:uppercase;letter-spacing:.14em;
    font-size:var(--w-label);min-height:var(--w-tap);display:flex;align-items:center;cursor:pointer}
  .w-navdisclosure>summary::-webkit-details-marker{display:none}
  .w-navdisclosure>summary::after{content:"";width:9px;height:9px;margin-left:var(--cts-space-2);
    border-right:2px solid var(--w-fg);border-bottom:2px solid var(--w-fg);transform:rotate(45deg) translateY(-2px)}
  .w-navdisclosure[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
  .w-nav{display:none}
  .w-navdisclosure[open] .w-nav{display:block;padding-top:var(--cts-space-3)}
  .w-nav__list{flex-direction:column;gap:0}
  .w-nav a{display:flex;align-items:center;min-height:var(--w-tap);border-bottom:1px solid var(--w-border-decor)}
}
@media (min-width:48rem){ .w-navdisclosure{display:none} }

/* --- 5 · buttons: one primary per screen --------------------------------- */
.w-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--cts-space-3);
  min-height:var(--w-tap);padding:var(--cts-space-3) var(--cts-space-5);
  font-family:var(--w-font);font-weight:700;font-size:var(--w-body);line-height:1.2;
  border-radius:var(--w-radius);text-decoration:none;cursor:pointer}
.w-btn--primary{background:var(--w-dark);color:var(--w-on-dark);border:1px solid var(--w-dark);      /* 16.30:1 */
  border-left:4px solid var(--w-accent)}                                                             /* red = signal mark */
.w-btn--primary:hover{background:var(--w-btn-hover);border-color:var(--w-btn-hover);border-left-color:var(--w-accent)}
.w-btn--secondary{background:var(--w-bg);color:var(--w-fg);border:1px solid var(--w-border-control)}  /* 3.94:1 edge */
.w-btn--secondary:hover{border-color:var(--w-border-control-hover);background:var(--w-surface)}
.w-btn--ondark{background:var(--w-bg);color:var(--w-fg);border:1px solid var(--w-bg);
  border-left:4px solid var(--w-accent)}
.w-btn[disabled],.w-btn[aria-disabled="true"]{background:var(--w-surface);color:var(--w-fg-muted);
  border:1px solid var(--w-border-decor);cursor:not-allowed}
.w-btns{display:flex;flex-flow:column;gap:var(--cts-space-3)}
@media (min-width:30rem){ .w-btns{flex-flow:row wrap;gap:var(--cts-space-4)} }

/* --- 6 · fact strip (dark band) ------------------------------------------ */
.w-facts{background:var(--w-dark);color:var(--w-on-dark);border-top:4px solid var(--w-accent)}
.w-facts__list{display:grid;gap:var(--cts-space-5);list-style:none;margin:0;padding:var(--cts-space-6) 0}
.w-facts__list>li{margin:0;max-width:none}
.w-facts__label{display:block;font-size:var(--w-caption);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--w-track-label);color:var(--w-on-dark-muted);margin-bottom:var(--cts-space-2)}
.w-facts__value{display:block;font-weight:700;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem)}
.w-facts__note{display:block;margin-top:var(--cts-space-2);font-size:var(--w-caption);color:var(--w-on-dark-muted)}
.w-facts [data-state="pending"] .w-facts__value{font-weight:400}
.w-facts [data-state="pending"] .w-facts__label{text-decoration:underline;text-decoration-style:dashed;
  text-underline-offset:4px}
/* on a very narrow phone the pending badge moves under its sentence instead of trailing it */
@media (max-width:25rem){
  .w-facts__note .w-chip{display:block;width:fit-content;margin-top:var(--cts-space-2)}
}
@media (min-width:48rem){
  .w-facts__list{grid-template-columns:repeat(2,1fr);gap:var(--cts-space-6) var(--cts-space-7)}
}
@media (min-width:64rem){
  .w-facts__list{grid-template-columns:repeat(4,1fr);gap:0}
  .w-facts__list>li{padding-inline:var(--cts-space-6);border-left:1px solid var(--w-border-control)}
  .w-facts__list>li:first-child{padding-left:0;border-left:0}
  .w-facts__list>li:last-child{padding-right:0}
}

/* --- 7 · diagram figure (the RF illustration) ---------------------------- */
.w-figure{margin:0}
.w-figure__frame{border:1px solid var(--w-border-decor);background:var(--w-bg);
  padding:var(--cts-space-4)}
/* a landscape technical drawing on a 390px phone: bleed it to the viewport edges and drop the
   side padding, so the linework gets every pixel the screen has. The numbered key below carries
   the meaning at page text size, so the drawing never has to be zoomed to be read. */
@media (max-width:47.99rem){
  .w-figure--bleed{margin-inline:calc(var(--w-gutter) * -1)}
  .w-figure--bleed .w-figure__frame{border-inline:0;padding-inline:var(--cts-space-2)}
  .w-figure--bleed figcaption{padding-inline:var(--w-gutter)}
}
.w-figure figcaption{margin-top:var(--cts-space-3);font-size:var(--w-caption);color:var(--w-fg-muted);
  max-width:var(--w-measure)}
.w-diagram{display:block;width:100%;height:auto}
.w-diagram text{font-family:var(--w-font);fill:var(--w-fg)}
.w-diagram .dg-line{fill:none;stroke:var(--w-fg);stroke-width:1.6;stroke-linecap:square}
.w-diagram .dg-signal{fill:none;stroke:var(--w-accent);stroke-width:2.4}
.w-diagram .dg-ray{fill:none;stroke:var(--w-accent);stroke-width:1.6}
.w-diagram .dg-uplink{fill:none;stroke:var(--w-accent);stroke-width:1.6;stroke-dasharray:6 5}
.w-diagram .dg-hair{fill:none;stroke:var(--w-fg-muted);stroke-width:.9}
.w-diagram .dg-thin{fill:none;stroke:var(--w-fg-muted);stroke-width:1;stroke-dasharray:4 4}
.w-diagram .dg-box{fill:none;stroke:var(--w-fg);stroke-width:1.6}
.w-diagram .dg-solid{fill:var(--w-fg)}
.w-diagram .dg-fill{fill:var(--w-surface);stroke:var(--w-fg);stroke-width:1.6}
.w-diagram .dg-k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.w-diagram .dg-s{font-size:11px}
.w-diagram .dg-mark{fill:var(--w-accent)}

/* --- 8 · cards, steps, pillars ------------------------------------------- */
.w-grid{display:grid;gap:var(--cts-space-5);list-style:none;margin:0;padding:0}
.w-grid>li{margin:0;max-width:none}
@media (min-width:48rem){ .w-grid--2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:64rem){
  .w-grid--3{grid-template-columns:repeat(3,1fr)}
  .w-grid--4{grid-template-columns:repeat(4,1fr)}
}
.w-card{border:1px solid var(--w-border-decor);border-top:3px solid var(--w-fg);background:var(--w-bg);
  padding:var(--cts-space-5);height:100%;display:flex;flex-direction:column;gap:var(--cts-space-3)}
.w-card h3{font-size:var(--w-h3)}
.w-card p{margin:0}
.w-card__link{margin-top:auto;font-weight:700;font-size:var(--w-small);display:inline-flex;
  align-items:center;min-height:var(--w-tap)}
.w-card__scope{margin:0;padding-left:1.1em;font-size:var(--w-small);color:var(--w-fg-muted)}
.w-card__scope li{margin-bottom:var(--cts-space-1)}
.w-steps{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:var(--cts-space-5)}
.w-steps>li{margin:0;max-width:none;display:grid;grid-template-columns:auto 1fr;gap:var(--cts-space-4);
  border-top:1px solid var(--w-border-decor);padding-top:var(--cts-space-4)}
.w-steps>li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-weight:700;
  color:var(--w-fg-muted);font-size:var(--w-small)}
@media (min-width:64rem){ .w-steps{grid-template-columns:repeat(5,1fr);gap:var(--cts-space-5)} }
.w-pillar{border-top:3px solid var(--w-accent);padding-top:var(--cts-space-4)}
.w-pillar h3{font-size:var(--w-h3);margin-bottom:var(--cts-space-2)}
.w-proof{margin:0;padding-top:var(--cts-space-3);border-top:1px solid var(--w-border-decor);
  font-size:var(--w-small);color:var(--w-fg-muted)}

/* --- 9 · FAQ ------------------------------------------------------------- */
.w-faq{border-top:1px solid var(--w-border-decor)}
.w-faq details{border-bottom:1px solid var(--w-border-decor)}
.w-faq summary{display:flex;align-items:flex-start;gap:var(--cts-space-4);min-height:var(--w-tap);
  padding:var(--cts-space-4) 0;font-weight:700;font-size:var(--w-h3);cursor:pointer;list-style:none}
.w-faq summary::-webkit-details-marker{display:none}
.w-faq summary::after{content:"";flex:0 0 auto;width:10px;height:10px;margin-top:.45em;margin-left:auto;
  border-right:2px solid var(--w-fg);border-bottom:2px solid var(--w-fg);transform:rotate(45deg)}
.w-faq details[open] summary::after{transform:rotate(-135deg)}
.w-faq__a{padding-bottom:var(--cts-space-5)}
.w-faq__a p:last-child{margin-bottom:0}

/* --- 10 · forms (component set for the phase-2 pages) -------------------- */
.w-field{display:block;margin-bottom:var(--cts-space-5)}
.w-field__label{display:block;font-weight:700;font-size:var(--w-small);margin-bottom:var(--cts-space-2)}
.w-field__hint{display:block;font-size:var(--w-caption);color:var(--w-fg-muted);margin-bottom:var(--cts-space-2)}
.w-field__input{width:100%;min-height:var(--w-tap);padding:var(--cts-space-3);font-family:var(--w-font);
  font-size:var(--w-body);color:var(--w-fg);background:var(--w-bg);
  border:1px solid var(--w-border-control);border-radius:var(--w-radius)}
.w-field__input:hover{border-color:var(--w-border-control-hover)}
.w-field__input:focus-visible{outline:2px solid var(--w-focus);outline-offset:1px;border-color:var(--w-fg)}
.w-field__error{display:block;margin-top:var(--cts-space-2);font-size:var(--w-small);font-weight:700;
  color:var(--w-error)}
.w-field__error::before{content:"";display:inline-block;width:10px;height:10px;margin-right:var(--cts-space-2);
  border:2px solid var(--w-error);border-radius:50%}                     /* shape + word, not colour alone */
.w-field--invalid .w-field__input{border:2px solid var(--w-error);border-left-width:6px}
.w-field--ok .w-field__input{border-color:var(--w-success);border-left-width:6px}
.w-field__ok{display:block;margin-top:var(--cts-space-2);font-size:var(--w-small);font-weight:700;
  color:var(--w-success)}
.w-field__input[disabled]{background:var(--w-surface);color:var(--w-fg-muted);border-color:var(--w-border-decor)}

/* --- 11 · footer -------------------------------------------------------- */
.w-footer{background:var(--w-dark);color:var(--w-on-dark);padding-block:var(--w-section)}
.w-footer a{color:var(--w-on-dark);text-decoration:underline;display:inline-flex;align-items:center;
  min-height:var(--w-tap)}
.w-footer__grid{display:grid;gap:var(--cts-space-6)}
.w-footer__title{font-size:var(--w-caption);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--w-track-label);color:var(--w-on-dark-muted);margin-bottom:var(--cts-space-3)}
.w-footer ul{list-style:none;margin:0;padding:0}
.w-footer li{margin-bottom:var(--cts-space-2);max-width:none}
.w-footer__legal{margin-top:var(--cts-space-6);padding-top:var(--cts-space-5);
  border-top:1px solid var(--w-border-control);font-size:var(--w-caption);color:var(--w-on-dark-muted)}
.w-footer__legal ul{display:flex;flex-wrap:wrap;gap:var(--cts-space-4);margin-top:var(--cts-space-3)}
@media (min-width:48rem){ .w-footer__grid{grid-template-columns:2fr 1fr 1fr} }
.w-logo--footer{height:26px}

/* --- 12 · mockup-only review chrome (never part of the built page) ------- */
.rv-banner{background:var(--w-surface);border-bottom:1px solid var(--w-border-decor);
  font-size:var(--w-caption);color:var(--w-fg)}
.rv-banner__inner{padding-block:var(--cts-space-4)}
.rv-banner strong{font-weight:700}
.rv-key{display:flex;flex-wrap:wrap;gap:var(--cts-space-4);margin-top:var(--cts-space-3)}
.rv-note{border:2px dashed var(--w-pending);background:#FFFBF4;padding:var(--cts-space-4);
  margin:var(--cts-space-6) auto;max-width:var(--w-page)}
.rv-note__title{font-size:var(--w-label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--w-pending);margin-bottom:var(--cts-space-2)}
.rv-note p,.rv-note li{font-size:var(--w-caption);max-width:96ch}
.rv-note table{border-collapse:collapse;font-size:var(--w-caption);width:100%}
.rv-note th,.rv-note td{border:1px solid var(--w-border-decor);padding:var(--cts-space-2);
  text-align:left;vertical-align:top}
.rv-note th{background:var(--w-bg);font-weight:700}
.rv-slot{display:flex;align-items:center;justify-content:center;text-align:center;
  border:2px dashed var(--w-pending);background:#FFFBF4;padding:var(--cts-space-5);
  font-size:var(--w-caption);font-weight:700;color:var(--w-pending)}

/* --- 13 · page-level composition (hero, two-column bands, figure key) ---- */
.w-hero{padding-block:var(--cts-space-6) var(--cts-space-7)}
@media (min-width:48rem){ .w-hero{padding-block:var(--cts-space-7) var(--cts-space-8)} }
.w-hero__grid{display:grid;gap:var(--cts-space-7)}
@media (min-width:64rem){
  .w-hero__grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--cts-space-8)}
}
.w-hero h1{margin-block:var(--cts-space-4) var(--cts-space-5)}
.w-hero__sub{font-size:clamp(1.125rem,1.05rem + .35vw,1.25rem);line-height:1.45;margin-bottom:var(--cts-space-6)}
.w-sechead{max-width:var(--w-measure);margin-bottom:var(--cts-space-6)}
.w-sechead h2{margin-block:var(--cts-space-4) var(--cts-space-4)}
.w-twocol{display:grid;gap:var(--cts-space-6)}
@media (min-width:48rem){ .w-twocol{grid-template-columns:1fr 1fr;gap:var(--cts-space-8)} }
.w-key{counter-reset:k;list-style:none;margin:var(--cts-space-5) 0 0;padding:0;
  display:grid;gap:var(--cts-space-2)}
.w-key li{counter-increment:k;margin:0;padding-left:var(--cts-space-6);position:relative;
  font-size:var(--w-caption);line-height:1.45;max-width:none}
.w-key li::before{content:counter(k);position:absolute;left:0;top:0;width:18px;height:18px;
  border:1px solid var(--w-fg);border-radius:50%;text-align:center;line-height:17px;font-size:11px;font-weight:700}
@media (min-width:64rem){ .w-key{grid-template-columns:1fr 1fr;column-gap:var(--cts-space-5)} }
.w-note{margin-top:var(--cts-space-4);font-size:var(--w-small);color:var(--w-fg-muted)}
.w-contactline{display:grid;gap:var(--cts-space-3);margin-top:var(--cts-space-6)}
@media (min-width:48rem){ .w-contactline{grid-template-columns:repeat(2,minmax(0,1fr))} }
.w-contactline p{margin:0;font-size:var(--w-small)}