/* ============================================================
   Swiss Gradus — public website
   Implements Website.dc.html from the Claude Design project.

   Styles live in this file rather than inline so the Content-Security-Policy
   can be style-src 'self' with no 'unsafe-inline' anywhere. Same reason the
   behaviour lives in site.js: script-src 'self', no inline script, no nonce
   needed (these are flat files, so there is no per-request render to stamp).
   ============================================================ */

/* Brand faces, self-hosted from the application's own build output so the site
   and the portal render identically and nothing is fetched from a third party. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/montserrat.woff2") format("woff2")}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:400 600;font-display:swap;src:url("/fonts/noto-serif.woff2") format("woff2")}
@font-face{font-family:"Noto Sans Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url("/fonts/noto-mono.woff2") format("woff2")}

/* Design-system tokens, verbatim from the project's tokens/colors.css. */
:root{
  --gr-navy-900:#00263a; --gr-navy-800:#003049; --gr-navy-700:#16405b;
  --gr-navy-600:#2b5878; --gr-navy-500:#3d6a9a; --gr-navy-300:#7fa3c4; --gr-navy-150:#b6c0d4;
  --gr-red-800:#810303; --gr-red-700:#a30d17; --gr-red-600:#c1121f; --gr-red-500:#d8232f;
  --gr-ink-950:#0c111b; --gr-ink-900:#141822; --gr-ink-800:#1d2434; --gr-ink-700:#272f41;
  --gr-ink-500:#4a5468; --gr-ink-400:#7a849a; --gr-ink-300:#9aa4b8; --gr-ink-200:#c6cdda;
  --gr-ink-150:#d8dce4; --gr-ink-100:#e0e3ea; --gr-ink-75:#eceef3; --gr-ink-50:#f5f6f8; --gr-ink-25:#f6f7fa;
  --gr-bone-100:#eeede9; --gr-bone-50:#f6f5f2;
  --gr-green-600:#1e7b50; --gr-gold-500:#a98942;

  --surface-page:var(--gr-ink-25); --surface-card:#fff; --surface-sunken:var(--gr-ink-50);
  --surface-paper:var(--gr-bone-100); --surface-overlay:rgba(12,17,27,.55);
  --text-primary:var(--gr-ink-900); --text-secondary:var(--gr-ink-500);
  /* Not --gr-ink-400 (#7a849a): 3.50:1 on the page wash, 3.75:1 on card white,
     both below the 4.5:1 AA floor for body text. This measures 4.75-5.14:1 on
     every light surface here and still reads as secondary. */
  --text-muted:#626e85;
  --text-link:var(--gr-navy-700);
  --border-default:var(--gr-ink-100); --border-strong:var(--gr-ink-200); --border-hairline:var(--gr-ink-150);
  --status-positive:var(--gr-green-600); --status-negative:var(--gr-red-600);

  --shadow-card:0 1px 2px rgba(13,27,42,.05);
  --shadow-overlay:0 12px 32px rgba(13,27,42,.16),0 2px 8px rgba(13,27,42,.08);
  --ease-standard:cubic-bezier(.2,0,0,1); --duration-fast:120ms;

  --font-sans:"Montserrat","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --font-serif:"Noto Serif","Iowan Old Style",Georgia,serif;
  --font-mono:"Noto Sans Mono","SF Mono",Menlo,monospace;

  --wrap:1320px;
  --pad:clamp(16px,4vw,40px);
  --sec-y:clamp(52px,7vw,104px);
}

*{box-sizing:border-box}
/* An explicit `display` on a class beats the `hidden` attribute, which silently
   showed every capability panel at once and both states of the contact form.
   This reset makes hidden mean hidden regardless of what a class sets. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--surface-page);font-family:var(--font-sans);
  color:var(--text-primary);-webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column;
}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--gr-navy-900)}
input::placeholder,textarea::placeholder{color:var(--gr-ink-300)}
:focus-visible{outline:2px solid var(--gr-navy-500);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* A skip link that can never be seen is not a skip link. Reveal it on focus. */
a.sr:focus{
  position:fixed;top:10px;left:10px;z-index:100;width:auto;height:auto;margin:0;
  clip:auto;overflow:visible;padding:10px 16px;border-radius:3px;
  background:#fff;color:var(--gr-ink-900);font-size:13px;font-weight:600;
  box-shadow:var(--shadow-overlay);
}
@keyframes gwFade{from{opacity:0}to{opacity:1}}
@keyframes gwUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ── Masthead ─────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:40;background:var(--gr-ink-900);border-bottom:1px solid rgba(255,255,255,.08)}
.hdr-in{height:68px;display:flex;align-items:center;gap:28px}
.brand{appearance:none;background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:12px}
.brand svg{width:34px;height:34px;display:block;flex:none}
.lockup{line-height:1;text-align:left}
.lockup b{display:block;font-weight:700;letter-spacing:.18em;font-size:18px;color:#fff}
.lockup i{display:block;font-style:normal;font-weight:400;letter-spacing:.34em;font-size:10px;color:var(--gr-red-600);margin-top:3px}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin-left:auto}
.nav button{
  appearance:none;background:none;border:none;padding:6px 0;font-family:var(--font-sans);
  font-size:12.5px;font-weight:500;letter-spacing:.02em;color:#b8c4d0;cursor:pointer;
  border-bottom:1px solid transparent;transition:color var(--duration-fast) var(--ease-standard);
}
.nav button:hover{color:#fff}
.nav button[aria-current="true"]{color:#fff;border-bottom-color:var(--gr-red-600)}
/* The gold Deals emphasis button — same in-page target as the nav link, in
   the design's gilt outline. Scrolls to #deals; it never links off-site. */
.deals-btn{
  appearance:none;display:inline-flex;align-items:center;gap:8px;height:36px;
  padding:0 15px;border:1px solid rgba(169,137,66,.6);border-radius:3px;
  background:none;color:#d8c290;font-family:var(--font-sans);font-size:12.5px;
  font-weight:600;letter-spacing:.02em;cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-standard);
}
.deals-btn:hover{background:rgba(169,137,66,.14)}
.menu .deals-btn{margin-top:10px;justify-content:center;height:42px;font-size:13px}
.login{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;
  border:1px solid rgba(255,255,255,.28);border-radius:3px;color:#e6edf2;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
}
.login:hover{background:rgba(255,255,255,.08);color:#fff}
.burger{
  appearance:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.28);
  border-radius:3px;width:38px;height:38px;display:none;align-items:center;justify-content:center;
  cursor:pointer;color:#e6edf2;
}
.menu{border-top:1px solid rgba(255,255,255,.08);padding:10px var(--pad) 18px;display:none;flex-direction:column;gap:2px;animation:gwFade .16s var(--ease-standard)}
.menu.open{display:flex}
.menu button{
  appearance:none;background:none;border:none;padding:11px 0;text-align:left;
  font-family:var(--font-sans);font-size:13.5px;font-weight:500;color:#b8c4d0;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.menu .login{margin-top:10px;justify-content:center;height:42px;font-size:13px}
@media(max-width:899px){
  .nav{display:none}
  .burger{display:flex}
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* The hero owns its own vertical rhythm (.hero-in below); the generic section
   padding is scoped with :not(.hero) so the two cannot stack. They did: 104px
   of section padding on top of 120px of hero padding put a 224px void above
   the headline and made the hero over-tall on every desktop width. */
/* DAY-ADAPTIVE. The stylesheet carries the DAY state; site.js (paintSky) mixes
   every [data-sky] element toward the night palette between 18:00 and 08:00 and
   fades .sky-night in over the light background. CSS-first matters twice over:
   with scripts blocked the page is simply the daytime site, and the 340ms color
   transitions below are what turn an 18:00 flip from a repaint into a scene
   change. The trust strip moved to Governance (the design's placement), so the
   hero no longer needs to guarantee a below-the-fold strip on small laptops —
   padding-driven height replaces the 100dvh flex frame. */
/* The first page IS the first screen: fill the viewport below the sticky
   masthead on every device, so Approach never peeks in before a scroll.
   min-height, not height — if the copy is taller than a small landscape
   viewport the hero grows and scrolls instead of clipping. dvh, not vh, so
   iOS Safari's collapsing chrome resizes the hero with it. */
.hero{
  position:relative;overflow:hidden;background:var(--gr-ink-100);
  min-height:calc(100dvh - 68px);display:flex;flex-direction:column;
}
.sky-night{
  position:absolute;inset:0;background:var(--gr-ink-900);opacity:0;
  pointer-events:none;transition:opacity .8s var(--ease-standard);
}
.hero-img{
  /* Flipped so the summit rises toward the copy, per the design; the radial
     mask fades every edge well inside the box, so no hard photo edge can show
     (the lesson the old bottom:-7% offset existed to enforce). */
  position:absolute;right:-4%;bottom:0;width:min(84%,1180px);
  /* height:auto is load-bearing. The <img> carries width/height attributes so
     the browser can reserve space before it loads; overriding only the width in
     CSS leaves the height attribute in force, and the picture is squashed to a
     fraction of its aspect ratio. It measured 281x768 from a natural 1376x768. */
  height:auto;
  opacity:.72;pointer-events:none;transform:scaleX(-1);
  -webkit-mask-image:radial-gradient(105% 115% at 12% 92%,#000 40%,transparent 82%);
  mask-image:radial-gradient(105% 115% at 12% 92%,#000 40%,transparent 82%);
}
.hero-in{
  /* width:100% matters: as a flex ITEM this would shrink to its content and
     .wrap's `margin:0 auto` would centre that box, indenting the hero off the
     masthead's shared left edge. Filling the line keeps the gutters aligned.
     flex + align-items centres the copy in whatever height the viewport
     grants, so the full-screen hero never reads as top-heavy. */
  position:relative;flex:1 1 auto;width:100%;display:flex;align-items:center;
  padding-top:clamp(40px,min(9vw,10vh),120px);
  padding-bottom:clamp(36px,min(7vw,9vh),96px);
}
.hero-col{max-width:720px;display:flex;flex-direction:column;gap:clamp(14px,min(2.4vw,2.6vh),28px)}
.kicker{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#2b3947;transition:color 340ms var(--ease-standard)}
h1{margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(30px,min(5.4vw,8.4vh),62px);line-height:1.1;letter-spacing:-.015em;color:#0d1b2a;text-wrap:pretty;transition:color 340ms var(--ease-standard)}
.hero-lede{margin:0;font-size:clamp(14px,1.35vw,17px);line-height:1.65;color:#2b3947;max-width:600px;text-wrap:pretty;transition:color 340ms var(--ease-standard)}
/* The rotating mandate line: four phrases sharing one 36px window, one visible
   at a time; site.js advances every 3.8s and the dots jump/restart. Without
   JS (or under prefers-reduced-motion) the first phrase simply stands. */
.rotor{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:2px}
.rotor-line{position:relative;width:100%;max-width:540px;height:36px;overflow:hidden;color:#0d1b2a;transition:color 340ms var(--ease-standard)}
.rotor-item{
  position:absolute;left:0;top:0;display:flex;align-items:center;height:36px;
  font-family:var(--font-serif);font-size:clamp(17px,2vw,23px);line-height:1.2;white-space:nowrap;
  opacity:0;transition:opacity 620ms var(--ease-standard),transform 700ms var(--ease-standard);
}
.rotor-item.on{opacity:1;transform:translateX(0)}
.rotor-item.before{transform:translateX(-34px)}
.rotor-item.after{transform:translateX(34px)}
.rotor-dots{display:flex;align-items:center;gap:7px;color:#0d1b2a;transition:color 340ms var(--ease-standard)}
.rotor-dot{
  appearance:none;padding:0;border:none;cursor:pointer;width:7px;height:3px;
  border-radius:999px;background:currentColor;opacity:.3;
  transition:width 340ms var(--ease-standard),opacity 340ms var(--ease-standard);
}
.rotor-dot.on{width:18px;opacity:1}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.btn-sky1,.btn-sky2,.btn-n{
  appearance:none;height:48px;border-radius:3px;font-family:var(--font-sans);
  font-size:13.5px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
/* Hero CTAs in their day state; paintSky inverts them at night (solid white /
   light outline). Hovers brighten whatever the current mix is. */
.btn-sky1{padding:0 26px;border:none;background:#003049;color:#fff;transition:background-color 340ms var(--ease-standard),color 340ms var(--ease-standard);filter:brightness(1)}
.btn-sky1:hover{filter:brightness(1.14)}
.btn-sky2{padding:0 24px;border:1px solid rgba(0,48,73,.32);background:none;color:#003049;transition:border-color 340ms var(--ease-standard),color 340ms var(--ease-standard)}
.btn-sky2:hover{border-color:currentColor}
/* Solid navy CTA for light sections. */
.btn-n{padding:0 24px;border:none;background:var(--gr-navy-800);color:#fff}
.btn-n:hover{background:var(--gr-navy-900)}
.hero-note{margin:8px 0 0;font-size:11.5px;line-height:1.6;color:#2b3947;max-width:560px;transition:color 340ms var(--ease-standard)}
/* The four facts that used to close the hero now open Governance (light theme,
   so the k/v colors are scoped — the shared classes carried hero-dark colors). */
.gov-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  column-gap:clamp(18px,2.6vw,40px);row-gap:18px;
  border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);
  padding:clamp(18px,2.4vw,26px) 0;
}
.gov-facts>div{display:flex;flex-direction:column;gap:6px}
.trust-k{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.trust-v{font-size:13px;line-height:1.55;color:var(--text-secondary)}

/* Phone: the desktop crop puts a narrow slice of rock straight through the
   lede and the legal notice, which both sit on it and become hard to read. Give
   the mountain the full width of the foot of the hero instead, well below the
   text, and fade it out upward so nothing competes with the copy. */
@media(max-width:719px){
  .hero-img{
    right:auto;left:50%;transform:translateX(-50%);
    bottom:0;width:132%;max-width:none;opacity:.42;
    -webkit-mask-image:linear-gradient(to top,#000 34%,transparent 92%);
    mask-image:linear-gradient(to top,#000 34%,transparent 92%);
  }
  /* Keep the copy legible over it regardless of how the photo crops.
     site.js knows this breakpoint too: no flip, no parallax, and the img
     reveal falls back to a plain fade so it never fights translateX(-50%). */
  .hero-lede,.hero-note{position:relative}
}

/* ── Section furniture ────────────────────────────────────────────────── */
section:not(.hero){padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.s-page{background:var(--surface-page)}
.s-sunken{background:var(--surface-sunken);border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.s-navy{position:relative;overflow:hidden;background:var(--gr-navy-800)}
.s-paper{background:var(--surface-paper);border-top:1px solid var(--border-hairline)}
.s-line{border-top:1px solid var(--border-hairline)}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
h2{margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(26px,3.4vw,40px);line-height:1.2;letter-spacing:-.01em;color:var(--gr-ink-900);text-wrap:pretty}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,64px);align-items:start}
.col{display:flex;flex-direction:column;gap:16px}
.body{margin:0;font-size:14px;line-height:1.7;color:var(--text-secondary);max-width:460px;text-wrap:pretty}
.fine{margin:0;font-size:11.5px;line-height:1.6;color:var(--text-muted);max-width:460px}
.stack{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}

/* ── Approach ─────────────────────────────────────────────────────────── */
.obj{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.obj-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:5px;box-shadow:var(--shadow-card);padding:20px;display:flex;flex-direction:column;gap:10px}
.obj-card .ic{width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--gr-navy-800)}
.obj-card .ic svg{width:100%;height:100%}
.obj-card h3{margin:0;font-family:var(--font-serif);font-size:17px;font-weight:400;color:var(--gr-ink-900)}
.obj-card p{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-secondary)}

/* ── Capabilities ─────────────────────────────────────────────────────── */
.tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.tab{
  appearance:none;text-align:left;background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:3px;padding:13px 15px;cursor:pointer;font-family:var(--font-sans);
  display:flex;flex-direction:column;gap:4px;
  transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
}
.tab .n{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.tab .l{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.35}
.tab[aria-selected="true"]{background:var(--gr-ink-900);border-color:var(--gr-ink-900)}
.tab[aria-selected="true"] .n{color:#8fa0b0}
.tab[aria-selected="true"] .l{color:#fff}
.panel{
  background:var(--surface-card);border:1px solid var(--border-default);border-radius:8px;
  box-shadow:var(--shadow-card);padding:clamp(20px,3vw,34px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,44px);
  animation:gwFade .18s var(--ease-standard);
}
.panel h3{margin:0;font-family:var(--font-serif);font-size:clamp(20px,2.2vw,26px);font-weight:400;line-height:1.25;color:var(--gr-ink-900)}
.panel p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text-secondary);text-wrap:pretty}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags span{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:3px;background:var(--gr-ink-75);color:var(--gr-ink-500);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pts{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}
.pts li{display:flex;align-items:flex-start;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border-hairline);font-size:12.5px;line-height:1.6;color:var(--text-secondary)}
.pts li:last-child{border-bottom:none;padding-bottom:0}
.pts svg{flex:none;margin-top:3px;width:13px;height:13px}
.risk{display:flex;align-items:flex-start;gap:9px;background:var(--surface-sunken);border-radius:3px;padding:11px 13px;margin-top:2px;font-size:11.5px;line-height:1.6;color:var(--text-secondary)}
.risk svg{flex:none;margin-top:1px;width:14px;height:14px}
.disc{margin:0;font-size:11.5px;line-height:1.65;color:var(--text-muted);max-width:820px}

/* ── Structures accordion ─────────────────────────────────────────────── */
.acc{display:flex;flex-direction:column;gap:10px}
.acc-item{background:var(--surface-card);border:1px solid var(--border-default);border-radius:5px;box-shadow:var(--shadow-card);overflow:hidden}
.acc-item[open]{border-color:var(--gr-navy-600)}
.acc-btn{appearance:none;width:100%;text-align:left;background:none;border:none;padding:17px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;font-family:var(--font-sans)}
.acc-btn:hover{background:var(--gr-ink-50)}
.acc-btn .t{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.acc-btn .t b{font-size:14px;font-weight:600;color:var(--gr-ink-900)}
.acc-btn .t span{font-size:11.5px;color:var(--text-muted)}
.acc-btn svg{flex:none;width:16px;height:16px;transition:transform var(--duration-fast) var(--ease-standard)}
.acc-item[open] .acc-btn svg{transform:rotate(180deg)}
.acc-body{border-top:1px solid var(--border-hairline);padding:16px 18px;display:none;flex-direction:column;gap:12px;background:var(--surface-sunken)}
.acc-item[open] .acc-body{display:flex}
.acc-body>p{margin:0;font-size:12.5px;line-height:1.7;color:var(--text-secondary)}
.uses-h{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.uses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.uses li{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.6;color:var(--text-secondary)}
.uses li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gr-navy-600);flex:none;margin-top:7px}
.acc-note{font-size:11px;line-height:1.6;color:var(--text-muted);border-top:1px solid var(--border-hairline);padding-top:10px}
.callout{background:var(--surface-card);border:1px solid var(--border-default);border-radius:5px;padding:16px;display:flex;flex-direction:column;gap:8px;max-width:460px}
.callout span:last-child{font-size:12px;line-height:1.65;color:var(--text-secondary)}

/* ── Switzerland ──────────────────────────────────────────────────────── */
.sw-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,48px);align-items:end}
.s-navy h2{color:#fff}
.sw-eyebrow{color:#8fb0c4}
.sw-lede{margin:0;font-size:13.5px;line-height:1.7;color:#c2d3de;text-wrap:pretty}
.sw-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:rgba(255,255,255,.14)}
.sw-cards>div{background:var(--gr-navy-800);padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:11px}
.sw-cards .ic{width:24px;height:24px;color:#8fb0c4}
.sw-cards .ic svg{width:100%;height:100%}
.sw-cards h3{margin:0;font-family:var(--font-serif);font-size:18px;font-weight:400;color:#fff}
.sw-cards p{margin:0;font-size:12.5px;line-height:1.7;color:#c2d3de}
.presence{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(20px,2.6vw,32px)}
.presence>div{display:flex;flex-direction:column;gap:5px}
.presence .k{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8fb0c4}
.presence .v{font-size:13px;color:#e6edf2}

/* ── Process ──────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.step{background:var(--surface-card);border:1px solid var(--border-default);border-radius:5px;box-shadow:var(--shadow-card);padding:20px;display:flex;flex-direction:column;gap:11px}
.step .rule{display:flex;align-items:center;gap:9px}
.step .rule b{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--gr-navy-700)}
.step .rule i{flex:1;height:1px;background:var(--border-default)}
.step h3{margin:0;font-family:var(--font-serif);font-size:17px;font-weight:400;color:var(--gr-ink-900);line-height:1.3}
.step p{margin:0;font-size:12.5px;line-height:1.65;color:var(--text-secondary)}
.terms{background:var(--surface-card);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-card);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:18px}
.terms-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.terms-head span:last-child{font-size:11px;color:var(--text-muted);margin-left:auto}
.terms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border-hairline)}
.terms-grid>div{background:var(--surface-card);padding:16px 18px 16px 0;display:flex;flex-direction:column;gap:7px}
.terms-grid>div+div{padding-left:clamp(16px,2vw,24px)}
.terms-grid .k{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.terms-grid .v{font-family:var(--font-serif);font-size:clamp(20px,2.2vw,26px);color:var(--gr-ink-900);line-height:1.1}
.terms-grid .d{font-size:11.5px;line-height:1.6;color:var(--text-secondary)}
.terms>span:last-child{font-size:11px;line-height:1.65;color:var(--text-muted)}

/* ── Safeguards ───────────────────────────────────────────────────────── */
.s-paper .eyebrow{color:#7c6430}
.s-paper h2{color:var(--gr-navy-800);font-size:clamp(24px,3vw,34px)}
.safe{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,2.6vw,34px)}
.safe>div{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--gr-navy-800);padding-top:14px}
.safe b{font-size:13.5px;font-weight:600;color:var(--gr-ink-900)}
.safe span{font-size:12.5px;line-height:1.7;color:var(--text-secondary)}

/* ── Contact ──────────────────────────────────────────────────────────── */
.facts{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--border-hairline);padding-top:18px;max-width:440px}
.facts>div{display:flex;gap:12px}
.facts .k{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);width:100px;flex:none;padding-top:2px}
.facts .v{font-size:12.5px;line-height:1.6;color:var(--text-secondary);flex:1}
.formcard{background:var(--surface-card);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-card);padding:clamp(20px,3vw,32px)}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.field input,.field select,.field textarea{
  border:1px solid var(--border-default);border-radius:3px;font-family:var(--font-sans);
  color:var(--text-primary);outline:none;background:var(--surface-card);
}
.field input,.field select{height:44px;padding:0 12px;font-size:13.5px}
.field select{cursor:pointer}
.field textarea{padding:11px 13px;font-size:13px;line-height:1.6;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gr-navy-500)}
.field.bad input,.field.bad textarea{border-color:var(--status-negative)}
.ack{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.ack input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--gr-navy-800);flex:none}
.ack span{font-size:11.5px;line-height:1.6;color:var(--text-secondary)}
.f-err{font-size:11.5px;font-weight:500;color:var(--status-negative)}
.f-hint{font-size:11.5px;line-height:1.5;color:var(--text-muted)}
.submit{
  appearance:none;height:48px;border:none;border-radius:3px;background:var(--gr-navy-800);
  color:#fff;font-family:var(--font-sans);font-size:13.5px;font-weight:600;letter-spacing:.01em;cursor:pointer;
}
.submit:hover{background:var(--gr-navy-900)}
.submit:disabled{background:var(--gr-ink-200);color:var(--gr-ink-700);cursor:not-allowed}
.sent{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:24px 8px;animation:gwUp .2s var(--ease-standard)}
.sent b{font-family:var(--font-serif);font-size:20px;font-weight:400;color:var(--gr-ink-900)}
.sent span{font-size:12.5px;line-height:1.65;color:var(--text-secondary);max-width:340px}
.ghost{appearance:none;background:none;border:1px solid var(--border-strong);border-radius:3px;height:38px;padding:0 18px;font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--text-secondary);cursor:pointer}
.ghost:hover{background:var(--gr-ink-50)}

/* ── Footer ───────────────────────────────────────────────────────────── */
footer{background:var(--gr-ink-900);margin-top:auto}
.f-in{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:clamp(28px,3.5vw,44px)}
.f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(22px,3vw,40px)}
.f-cols>div{display:flex;flex-direction:column;gap:11px}
.f-cols .f-h{margin:0;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8fa0b0}
.f-cols button,.f-cols a{appearance:none;background:none;border:none;padding:0;text-align:left;font-family:var(--font-sans);font-size:12.5px;color:#c2d3de;cursor:pointer}
.f-cols button:hover,.f-cols a:hover{color:#fff}
.f-about{font-size:12px;line-height:1.7;color:#8fa0b0;max-width:260px}
.f-dom{font-family:var(--font-mono);font-size:11.5px;color:#b8c4d0}
.f-imp{border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:12px}
.f-imp .f-h{margin:0;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8fa0b0}
.f-imp p{margin:0;font-size:11px;line-height:1.7;color:#8fa0b0;max-width:1000px}
.f-base{display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-top:1px solid rgba(255,255,255,.1);padding-top:18px}
.f-base span{font-size:11px;color:#7d8b99}
.f-base span:last-child{margin-left:auto}

/* ── Jurisdiction gate + legal panel ──────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:90;background:rgba(10,17,24,.82);display:flex;align-items:center;justify-content:center;padding:20px;animation:gwFade .2s var(--ease-standard)}
.gate[hidden]{display:none}
.gate-box{background:var(--surface-card);border-radius:8px;box-shadow:var(--shadow-overlay);width:100%;max-width:520px;max-height:92dvh;overflow-y:auto;animation:gwUp .24s var(--ease-standard)}
.gate-hd{background:var(--gr-ink-900);padding:22px 24px}
.gate-bd{padding:24px;display:flex;flex-direction:column;gap:16px}
.gate-bd h2{font-size:21px;line-height:1.3}
.gate-bd .lead{font-size:12.5px;line-height:1.7;color:var(--text-secondary)}
.gate-terms{background:var(--surface-sunken);border-radius:3px;padding:13px;font-size:11.5px;line-height:1.65;color:var(--text-secondary)}
.gate-btns{display:flex;flex-wrap:wrap;gap:10px}
.gate-btns .submit{flex:1;min-width:170px;height:46px;font-size:13px}
.gate-btns .ghost{height:46px;font-size:13px}
.legal-scrim{position:fixed;inset:0;z-index:80;background:rgba(10,17,24,.7);animation:gwFade .16s var(--ease-standard)}
.legal-scrim[hidden],.legal[hidden]{display:none}
.legal{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);z-index:81;background:var(--surface-page);box-shadow:var(--shadow-overlay);display:flex;flex-direction:column;animation:gwFade .2s var(--ease-standard)}
.legal-hd{flex:none;height:64px;background:var(--surface-card);border-bottom:1px solid var(--border-default);display:flex;align-items:center;gap:12px;padding:0 22px}
.legal-hd b{font-size:13.5px;font-weight:600;color:var(--gr-ink-900);flex:1}
.legal-hd button{appearance:none;background:none;border:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.legal-bd{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:14px}
.legal-bd p{margin:0;font-size:12.5px;line-height:1.75;color:var(--text-secondary)}
body.locked{overflow:hidden}

/* Utility classes replacing the last inline style attributes, so the policy can
   stay style-src 'self' with no style-src-attr 'unsafe-inline' escape hatch. */
.col.narrow{max-width:640px}
.col.tight{gap:7px}
.col.tight2{gap:12px}
.brand.static{cursor:default}
.gate-back{align-self:flex-start;height:42px}
.fstack{display:flex;flex-direction:column;gap:14px}

/* ── Short viewports ──────────────────────────────────────────────────────
   A laptop with a bookmarks bar, or any window that isn't full height, can
   leave under 500px of page. The hero is the tallest thing on the site, so it
   compresses rather than pushing the trust strip off the first screen. Nothing
   is hidden — the legal note stays, it just sets tighter. */
@media (max-height:820px){
  .hero-in{padding-top:clamp(18px,4vh,64px);padding-bottom:clamp(14px,3vh,48px)}
  .hero-col{gap:clamp(10px,1.6vh,20px)}
  .hero-lede{font-size:clamp(13px,1.9vh,15px);line-height:1.55}
  .hero-note{margin-top:2px;font-size:10.5px;line-height:1.5}
  .btn-sky1,.btn-sky2,.btn-n{height:clamp(40px,5.4vh,48px)}
  .rotor-line,.rotor-item{height:30px}
}
@media (max-height:620px){
  .kicker{font-size:9.5px;letter-spacing:.16em}
  .hero-lede{max-width:560px}
}
@media (max-height:500px){
  .btn-sky1,.btn-sky2,.btn-n{height:36px;font-size:12px;padding:0 18px}
  .hero-note{font-size:10px;margin-top:0}
  /* Below ~440px of page there is genuinely not room for a three-line serif
     headline, the lede, two buttons, the notice AND the trust strip. Rather
     than shrink type past legibility, let the hero size to its content and
     scroll — the strip is then one short scroll away instead of squashed. */
}
@media (max-height:440px){
  .hero{min-height:0}
}


/* ── Private markets (§ deals) ─────────────────────────────────────────────
   Deal teasers and the eligibility path. Deliberately no per-deal pricing or
   terms beyond an indicative ticket: the copy states that details follow
   onboarding and an individual suitability assessment. */
.deal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,2vw,20px);margin-top:4px}
.deal-card{display:flex;flex-direction:column;gap:10px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:5px;padding:18px}
.deal-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.deal-struct{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.deal-stage{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:600}
.deal-stage::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.deal-stage.is-open{background:rgba(45,122,74,.10);color:var(--status-positive)}
.deal-stage.is-review{background:rgba(31,90,140,.10);color:var(--status-info)}
.deal-stage.is-short{background:var(--surface-sunken);color:var(--text-secondary)}
.deal-sector{font-family:var(--font-serif);font-size:18px;line-height:1.3;color:var(--gr-ink-900)}
.deal-d{font-size:12.5px;line-height:1.6;color:var(--text-secondary);flex:1}
.deal-ticket{display:flex;align-items:baseline;gap:8px;border-top:1px solid var(--border-hairline);padding-top:11px}
.deal-ticket b{margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-primary)}
.deal-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(18px,2.6vw,34px);border-top:1px solid var(--border-hairline);padding-top:clamp(20px,2.6vw,30px);margin-top:4px}
/* The CTA and the Important note are separate thoughts, and the design's
   section stack puts its full gap between the blocks here. The 4px shim the
   button inherited from .cta-row left it sitting ON the note's box — reported
   from a phone, where the two read as one glued widget. Scoped to #deals: the
   hero's .cta-row keeps its tight rhythm. */
#deals .cta-row{margin-top:clamp(20px,2.6vw,32px)}
#deals .callout{margin-top:clamp(18px,2.4vw,28px)}
.deal-step{display:flex;flex-direction:column;gap:7px}
.deal-step .n{font-family:var(--font-mono);font-size:11px;font-weight:600;color:#7c6430}
.deal-step .t{font-size:13.5px;font-weight:600;color:var(--gr-ink-900)}
.deal-step .d{font-size:12.5px;line-height:1.65;color:var(--text-secondary)}