/* Shared page shell: header, buttons, language chooser, footer.
   =========================================================================
   Lives in web/static/ beside tokens.css, NOT in an app, because the marketing
   entrances do not install apps.portal and so can never collect anything under
   it (DECISIONS.md §15). Loaded by the portal AND by both www sites, after
   tokens.css and before that entrance's own component sheet.

   Anything here must be genuinely common. Account-specific chrome — .acct-chip,
   .acct-ava — deliberately stayed in portal.css.
   ========================================================================= */

html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(120% 60% at 50% -10%,#eef0fe 0%,transparent 55%),var(--ink);
  color:var(--txt);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--disp);letter-spacing:-.02em;font-weight:700}
a{color:var(--accent);text-decoration:none}

/* Sticky footer, the other half of body's flex column above: whatever <main> a
   page has absorbs the slack, so on a page too short to scroll the footer sits
   at the bottom of the VIEWPORT rather than floating under the last section.
   Belongs here, not in one entrance's sheet — the portal had it and the
   marketing sites silently did not. */
main{flex:1}
.mono{font-family:var(--mono)} .tnum{font-variant-numeric:tabular-nums}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* header */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:72px}
.brand{justify-self:start;display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:1.2rem;color:var(--txt)}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,var(--accent),var(--accent-d));
  display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:700;font-size:1.1rem;box-shadow:0 6px 16px var(--glow)}
.nav-links{justify-self:center;display:flex;gap:26px}
.nav-links a{color:var(--sub);font-weight:500;font-size:1rem}
.nav-links a:hover{color:var(--txt)}
.nav-right{justify-self:end;display:flex;align-items:center;gap:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:600;font-size:.92rem;
  border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;padding:11px 18px;font-size:.95rem;text-decoration:none;transition:filter .15s,background .15s,border-color .15s}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 8px 20px var(--glow)}
.btn-accent:hover{filter:brightness(1.06)}
.btn-outline{background:#fff;color:var(--txt);border-color:var(--line2)}
.btn-outline:hover{background:var(--surface)}
.btn-lg{padding:13px 22px;font-size:1rem} .btn-sm{padding:7px 13px;font-size:.85rem}

/* ---------------- language chooser ----------------
   Sits first in .nav-right, so it mirrors for free: .nav-right is already
   justify-self:end and the panel is inset-inline-end. No [dir] rule.
   <details>/<summary> so it works with JavaScript off. */
.lang{display:flex;align-items:center}
.lang-d{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--sub);
  background:transparent;border:1px solid var(--line);border-radius:var(--r-btn);
  padding:9px 12px;list-style:none;
  transition:background .15s,border-color .15s,color .15s}
.lang-btn::-webkit-details-marker{display:none}
.lang-btn::marker{content:""}
.lang-btn:hover{color:var(--txt);background:var(--surface);border-color:var(--line2)}
.lang-d[open] > .lang-btn{color:var(--txt);background:var(--surface);border-color:var(--line2)}
.lang-d[open] .chev{transform:rotate(180deg)}
.lang-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lang-btn .globe{width:17px;height:17px;flex:none;color:var(--sub2)}
/* Points down, so unlike &rsaquo; it needs no mirroring. */
.lang-btn .chev{width:13px;height:13px;flex:none;color:var(--sub2);transition:transform .15s}
.lang-btn .lab{font-family:var(--script)}
.lang-btn .lab-short{display:none;font-family:var(--mono);font-size:.82rem}

.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;
  min-width:212px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:6px;
  box-shadow:0 4px 10px rgba(12,22,42,.05),0 18px 44px rgba(12,22,42,.14)}
.lang-menu button{display:flex;width:100%;align-items:center;
  justify-content:space-between;gap:12px;cursor:pointer;background:transparent;
  border:0;border-radius:10px;padding:10px 12px;font-family:var(--script);
  font-weight:500;font-size:14px;color:var(--txt);text-align:start}
.lang-menu button:hover{background:var(--surface)}
.lang-menu button[aria-current="true"]{background:var(--surface);font-weight:600}
.lang-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lang-menu .ck{width:15px;height:15px;flex:none;color:var(--accent)}

/* Brand + chooser + the page's own CTA must fit at 92vw once .nav-links is
   hidden, so the label collapses to a code. The globe carries the meaning. */
@media (max-width:820px){
  .lang-btn .lab{display:none}
  .lang-btn .lab-short{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .lang-btn,.lang-btn .chev{transition:none}
}

/* footer */
footer{border-top:1px solid var(--line)}
.foot-in{width:min(1180px,92vw);margin:0 auto;padding:22px 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:var(--sub2);font-size:13px}
.foot-in .audit{font-family:var(--mono)}