/* Ssabi marketing site: shared stylesheet for every public page.
   Loaded AFTER each page's own <style>, so it wins where it overlaps.

   Three parts:
     1. --v7-* tokens, light and dark. Dark applies when <html data-theme="dark">
        (set by ssabi-site.js), or, with scripts off, when the system asks for it.
     2. Pieces every page shares: the theme toggle, and the V7 header and footer
        the inner pages use (.v7-*; the homepage styles its own).
     3. body.v7-sub: re-points the inner pages' older token names at the V7
        palette and type, so their content restyles without being rewritten. */

:root{
  --v7-bg:#F4F5F8; --v7-surface:#FFFFFF; --v7-ink:#0D1117; --v7-ink2:#3B4250; --v7-mut:#5F6775; --v7-faint:#8A919E;
  --v7-line:#E3E6EC; --v7-line2:#ECEEF2; --v7-line-strong:#D5DAE2; --v7-soft:#F1F3F6;
  --v7-blue:#2F5BEA; --v7-blue-h:#1E44C4; --v7-blue-text:#2F5BEA; --v7-blue-soft:#E8EEFF; --v7-red:#E0312B;
  --v7-nav-bg:rgba(244,245,248,.86); --v7-cta-bg:#0D1117; --v7-cta-fg:#FFFFFF; --v7-cta-h:#262D38;
  --v7-display:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --v7-body:'Barlow',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --v7-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --v7-ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"]{
  --v7-bg:#0B0E13; --v7-surface:#131821; --v7-ink:#EEF1F6; --v7-ink2:#C3CAD6; --v7-mut:#98A1B0; --v7-faint:#6E7686;
  --v7-line:#242C39; --v7-line2:#1D2430; --v7-line-strong:#333D4D; --v7-soft:#1A2029;
  --v7-blue:#3D66F0; --v7-blue-h:#5B7FFF; --v7-blue-text:#7E9BFF; --v7-blue-soft:#18223D; --v7-red:#F0443D;
  --v7-nav-bg:rgba(11,14,19,.82); --v7-cta-bg:#EEF1F6; --v7-cta-fg:#0B0E13; --v7-cta-h:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --v7-bg:#0B0E13; --v7-surface:#131821; --v7-ink:#EEF1F6; --v7-ink2:#C3CAD6; --v7-mut:#98A1B0; --v7-faint:#6E7686;
    --v7-line:#242C39; --v7-line2:#1D2430; --v7-line-strong:#333D4D; --v7-soft:#1A2029;
    --v7-blue:#3D66F0; --v7-blue-h:#5B7FFF; --v7-blue-text:#7E9BFF; --v7-blue-soft:#18223D; --v7-red:#F0443D;
    --v7-nav-bg:rgba(11,14,19,.82); --v7-cta-bg:#EEF1F6; --v7-cta-fg:#0B0E13; --v7-cta-h:#FFFFFF;
  }
}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* ------------------------------------------------------------ theme toggle */
.theme-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--v7-surface);border:1px solid var(--v7-line)}
.theme-switch button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:28px;border:0;border-radius:999px;background:transparent;color:var(--v7-mut);cursor:pointer;transition:background .2s,color .2s}
.theme-switch button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-switch button:hover{color:var(--v7-ink)}
.theme-switch button[aria-pressed="true"]{background:var(--v7-soft);color:var(--v7-ink);box-shadow:inset 0 0 0 1px var(--v7-line)}
.theme-switch button:focus-visible{outline:3px solid var(--v7-blue);outline-offset:2px}
.fbar-right{display:flex;align-items:center;gap:18px}

/* --------------------------------------------- V7 header (inner pages) */
.v7-wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.v7-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--v7-nav-bg);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s;font-family:var(--v7-body);line-height:1.5}
.v7-nav.scrolled{border-bottom-color:var(--v7-line)}
.v7-nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.v7-logo,.v7-logo:hover{font-family:var(--v7-display);font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--v7-ink);text-decoration:none}
.v7-dot{color:var(--v7-red)}
.v7-nvl{display:flex;align-items:center;gap:56px}
.v7-links{display:flex;gap:32px;font-size:16px;font-weight:500}
.v7-links a{position:relative;color:var(--v7-ink2);text-decoration:none}
.v7-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--v7-blue);transform:scaleX(0);transition:transform .25s var(--v7-ease)}
.v7-links a:hover{color:var(--v7-ink)}
.v7-links a:hover::after{transform:scaleX(1)}
.v7-actions{display:flex;align-items:center;gap:14px}
.v7-actions::before{content:"";width:1px;height:24px;margin-right:10px;background:var(--v7-line-strong)}
/* Log in: "arrow reveal" - a white pill with a hairline edge appears and an
   arrow slides out after the words. Same as the homepage. */
.v7-login{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;font-size:16px;font-weight:600;color:var(--v7-ink2);text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s,transform .15s var(--v7-ease)}
.v7-login::after{content:"";flex-shrink:0;width:0;height:16px;margin-left:0;opacity:0;transform:translateX(-6px);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/16px 16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/16px 16px no-repeat;transition:width .3s var(--v7-ease),margin-left .3s var(--v7-ease),opacity .25s,transform .3s var(--v7-ease)}
.v7-login:is(:hover,:focus-visible){background:var(--v7-surface);color:var(--v7-ink);box-shadow:inset 0 0 0 1px var(--v7-line),0 2px 6px rgba(13,17,23,.06)}
.v7-login:is(:hover,:focus-visible)::after{width:16px;margin-left:8px;opacity:1;transform:none}
.v7-login:active{transform:scale(.95)}
.v7-cta{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;background:var(--v7-cta-bg);color:var(--v7-cta-fg);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s,transform .15s}
.v7-cta:hover{background:var(--v7-cta-h);color:var(--v7-cta-fg)}
.v7-cta:active{transform:scale(.97)}
.v7-nav a:focus-visible,.v7-nav button:focus-visible,.v7-foot a:focus-visible{outline:3px solid var(--v7-blue);outline-offset:3px;border-radius:10px}
.lang-slot{display:flex;align-items:center}
.v7-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--v7-line);background:var(--v7-surface);color:var(--v7-ink);align-items:center;justify-content:center;cursor:pointer}
.v7-burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.v7-burger .i-x{display:none}
.v7-nav.open .v7-burger .i-x{display:block}.v7-nav.open .v7-burger .i-menu{display:none}

/* --------------------------------------------- V7 footer (inner pages) */
.v7-foot{border-top:1px solid var(--v7-line);background:var(--v7-surface);font-family:var(--v7-body);line-height:1.5;color:var(--v7-mut)}
.v7-fgrid{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr));gap:40px;padding-block:56px 40px}
.v7-fbrand{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.v7-fbrand p{color:var(--v7-mut);font-size:15px;margin:0}
.v7-socials{display:flex;gap:10px;margin-top:6px}
.v7-soc{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--v7-line);background:var(--v7-surface);transition:transform .2s var(--v7-ease),box-shadow .2s}
.v7-soc svg{width:17px;height:17px;fill:currentColor;stroke:none}
.v7-soc-li,.v7-soc-li:hover{color:#0A66C2}
.v7-soc-x,.v7-soc-x:hover{color:var(--v7-ink)}
.v7-soc:hover{transform:translateY(-3px);box-shadow:0 8px 16px rgba(13,17,23,.10)}
.v7-fcol{display:flex;flex-direction:column;gap:12px;font-size:15px}
.v7-fh{font-family:var(--v7-mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--v7-faint);margin-bottom:4px}
.v7-fcol a{color:var(--v7-ink2);width:fit-content;text-decoration:none}
.v7-fcol a:hover{color:var(--v7-blue-text)}
.v7-fbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px 28px;border-top:1px solid var(--v7-line);font-size:14px;color:var(--v7-mut)}
.v7-foot .flinks{display:flex;align-items:center;margin:0}
.v7-fbar .copy{margin:0}
.v7-foot .sib-lang{margin-left:0}

/* flags drawn by ssabi-i18n.js, same on every page */
.sib-lang .flag{width:20px;height:14px;border-radius:3px;box-shadow:0 0 0 1px rgba(13,17,23,.14)}
.sib-lang .flag svg{stroke:none}
.sib-lang .langbtn{gap:7px}
.v7-nav .sib-lang .langbtn,.v7-foot .sib-lang .langbtn{color:var(--v7-mut)}
.v7-nav .sib-lang .langmenu,.v7-foot .sib-lang .langmenu{background:var(--v7-surface);border-color:var(--v7-line)}
.v7-nav .sib-lang .langopt,.v7-foot .sib-lang .langopt{color:var(--v7-mut)}
.v7-nav .sib-lang .langopt:hover,.v7-foot .sib-lang .langopt:hover,.v7-nav .sib-lang .langopt[aria-selected=true],.v7-foot .sib-lang .langopt[aria-selected=true]{color:var(--v7-ink);background:var(--v7-soft)}

@media (max-width:980px){
  .v7-nav-in{height:68px}
  .v7-burger{display:inline-flex}
  .v7-nvl{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:18px;padding:18px clamp(16px,4vw,48px) 24px;background:var(--v7-bg);border-bottom:1px solid var(--v7-line);box-shadow:0 24px 40px rgba(13,17,23,.08)}
  .v7-nav.open .v7-nvl{display:flex}
  .v7-links{flex-direction:column;gap:0}
  .v7-links a{padding:12px 0;border-bottom:1px solid var(--v7-line2);font-size:18px}
  .v7-links a::after{display:none}
  .v7-actions{justify-content:space-between}
  .v7-actions::before{display:none}
  .v7-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v7-fbrand{grid-column:1/-1}
}
@media (max-width:720px){
  .v7-fgrid{gap:32px 24px;padding-block:44px 32px}
  .v7-fbar{flex-direction:column-reverse;align-items:flex-start}
}

/* ------------------------------ inner pages: older tokens -> V7 palette */
body.v7-sub{
  --bg:#F4F5F8; --bg2:#FFFFFF; --panel:#FFFFFF; --hover:#F1F3F6;
  --stroke:#E3E6EC; --stroke2:#D5DAE2;
  --txt:#0D1117; --mut:#3B4250; --dim:#6B7382;
  --acc:#2F5BEA; --acc-ink:#FFFFFF; --glow:47,91,234;
  --node:#FFFFFF; --nstroke:#D5DAE2; --nvbg:244,245,248;
  --ok:#1F9D55; --warn:#B7791F; --dot:#E0312B;
  --sans:var(--v7-body); --disp:var(--v7-display); --mono:var(--v7-mono);
  background:var(--bg);color:var(--txt);font-family:var(--v7-body);font-size:17px
}
:root[data-theme="dark"] body.v7-sub{
  --bg:#0B0E13; --bg2:#11151C; --panel:#131821; --hover:#1A2029;
  --stroke:#242C39; --stroke2:#2E3746;
  --txt:#EEF1F6; --mut:#B4BCC8; --dim:#7D8696;
  --acc:#7E9BFF; --acc-ink:#0B0E13; --glow:126,155,255;
  --node:#131821; --nstroke:#2E3746; --nvbg:11,14,19;
  --ok:#4BD08A; --warn:#E8B33D; --dot:#F0443D;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) body.v7-sub{
    --bg:#0B0E13; --bg2:#11151C; --panel:#131821; --hover:#1A2029;
    --stroke:#242C39; --stroke2:#2E3746;
    --txt:#EEF1F6; --mut:#B4BCC8; --dim:#7D8696;
    --acc:#7E9BFF; --acc-ink:#0B0E13; --glow:126,155,255;
    --node:#131821; --nstroke:#2E3746; --nvbg:11,14,19;
    --ok:#4BD08A; --warn:#E8B33D; --dot:#F0443D;
  }
}
/* The inner pages were sized for Inter; Barlow's letters are smaller at the
   same px. Matching Inter's x-height keeps every existing size readable. */
body.v7-sub{font-size-adjust:.545}
body.v7-sub h1,body.v7-sub h2,body.v7-sub h3,.v7-nav,.v7-foot{font-size-adjust:none}
body.v7-sub h1{font-family:var(--v7-display);font-weight:800;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
body.v7-sub h2,body.v7-sub h3{font-family:var(--v7-display);font-weight:700;letter-spacing:-.02em}
/* Content buttons: the V7 blue, in both themes. */
body.v7-sub .btn{background:var(--v7-blue);color:#fff;border-radius:12px;font-weight:600;font-family:var(--v7-body)}
body.v7-sub .btn:hover{background:var(--v7-blue-h);color:#fff;filter:none}
body.v7-sub ::selection{background:var(--v7-blue-soft)}