/* Built by tools/landing.py: tokens and drawing styles from web/css/styles.css, then landing/site.css. */
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#ECEEF1; --ink:#15181C; --muted:#59616A; --line:#DFE2E6; --line-strong:#868E97;
  --strength:#2E343B; --on-strength:#FFFFFF; --strength-soft:#E9EBEE;
  --jump:#E8620F; --jump-ink:#2B0F00; --soft:#8A929B; --focus:#2E343B; --danger:#B3261E; --star:#B4470A;
  --partner:#3D6FB6; --fig-far:#A0A8B0; --fig2-far:#A9C0E3; --prop-fill:#E7EAEE; --arrow:#C2510F; --floor:#E3E6EA;
  --shadow:0 1px 2px rgba(16,20,24,.06),0 4px 16px rgba(16,20,24,.06); --shadow-lg:0 12px 40px rgba(16,20,24,.18);
  --scrim:rgba(10,12,16,.5);

  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,sans-serif;
  /* type scale: size / line height; weights 400 text, 500 controls, 600 labels and names, 700 headings */
  --fs-xs:13px; --fs-sm:14px; --fs-base:16px; --fs-md:17px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:32px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --tap:40px;           /* minimum control height; 44px on touch screens */
  --top-h:56px;         /* header bar */
  --z-top:5; --z-dock:6; --z-follow:10;
  --t-fast:.12s; --t:.2s; --ease:cubic-bezier(.2,.7,.2,1);
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1013; --surface:#16191D; --surface-2:#1E2227; --ink:#ECEEF0; --muted:#9CA4AD; --line:#262B31; --line-strong:#646C75;
    --strength:#D9DDE2; --on-strength:#0E1013; --strength-soft:#23272C;
    --jump:#FF8A3D; --jump-ink:#2B0F00; --soft:#5F6771; --focus:#D9DDE2; --danger:#F2B8B5; --star:#FF8A3D;
    --partner:#86AAE6; --fig-far:#5E6770; --fig2-far:#3A5680; --prop-fill:#252A30; --arrow:#FF8A3D; --floor:#1C2025;
    --shadow:none; --shadow-lg:0 12px 40px rgba(0,0,0,.5); --scrim:rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1013; --surface:#16191D; --surface-2:#1E2227; --ink:#ECEEF0; --muted:#9CA4AD; --line:#262B31; --line-strong:#646C75;
  --strength:#D9DDE2; --on-strength:#0E1013; --strength-soft:#23272C;
  --jump:#FF8A3D; --jump-ink:#2B0F00; --soft:#5F6771; --focus:#D9DDE2; --danger:#F2B8B5; --star:#FF8A3D;
  --partner:#86AAE6; --fig-far:#5E6770; --fig2-far:#3A5680; --prop-fill:#252A30; --arrow:#FF8A3D; --floor:#1C2025;
  --shadow:none; --shadow-lg:0 12px 40px rgba(0,0,0,.5); --scrim:rgba(0,0,0,.6);
}
.fg-limb,.fg-torso,.fg-eqs,.fg-arr,.fg-guide,.fg-hi,.fg-strap{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fg-limb{stroke-width:7}
.fg-torso{stroke-width:12}
.fg-n1{stroke:var(--ink)} .fg-f1{stroke:var(--fig-far)} .fg-n2{stroke:var(--partner)} .fg-f2{stroke:var(--fig2-far)}
.fg-head.fg-n1,.fg-me{fill:var(--ink);stroke:none} .fg-head.fg-n2{fill:var(--partner);stroke:none}
.fg-hi{stroke:var(--jump);stroke-width:17;opacity:.5}
.fg-ghost{opacity:.2}
.fg-eq{fill:var(--prop-fill);stroke:var(--muted);stroke-width:2.5;stroke-linejoin:round}
.fg-eqs{stroke:var(--muted);stroke-width:4}
.fg-eqf{fill:var(--muted)}
.fg-edge{fill:none;stroke:var(--muted);stroke-width:5;stroke-linecap:round}
.fg-strap{fill:none;stroke:var(--muted);stroke-width:2.2}
.fg-thin{stroke-width:2}
.fg-tire{stroke-width:3.5}
.fg-vest{fill:none;stroke:var(--muted);stroke-width:19;stroke-linecap:round;opacity:.85}
.fg-arr{stroke:var(--arrow);stroke-width:3.2}
.fg-arrh{fill:var(--arrow)}
.fg-dash .fg-arr{stroke-dasharray:7 6}
.fg-faint{opacity:.35}
.fg-guide{stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 5}
.fg-floor{stroke:var(--line-strong);stroke-width:2}
.fg-floorband{fill:var(--floor)}
.fg-lab{font-family:var(--font);font-weight:600;fill:var(--muted)}
/* The landing site's own rules (tools/landing.py puts the app's colour tokens and drawing styles before these).
   Plain, readable, the app's look; no scripts needed except landing/lang.js on the English home page. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-latin-var.woff2") format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-base)/1.55 var(--font)}
a{color:inherit;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.top{display:flex;align-items:center;gap:var(--s4);max-width:1040px;margin:0 auto;padding:var(--s3) var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:700;text-decoration:none;font-size:var(--fs-md);margin-right:auto}
.brand .logo{width:32px;height:32px}
.langs a{font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.login,.btn{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s4);border-radius:var(--r-sm);font-weight:600;text-decoration:none}
.login{border:1.5px solid var(--line-strong);background:var(--surface)}
.btn{background:var(--strength);color:var(--on-strength);min-height:48px;padding:0 var(--s6);font-size:var(--fs-md)}

main{max-width:1040px;margin:0 auto;padding:0 var(--s4) var(--s8)}
section{margin:var(--s8) 0}
h1{font-size:clamp(30px,6vw,48px);line-height:1.1;letter-spacing:-.025em;margin:0 0 var(--s4)}
h2{font-size:var(--fs-xl);letter-spacing:-.015em;line-height:1.2;margin:0 0 var(--s3)}
h3{font-size:var(--fs-md);margin:0 0 var(--s1)}
p{margin:0 0 var(--s3)}
.hero{margin-top:var(--s7);max-width:760px}
.lead{font-size:clamp(17px,2.4vw,20px);color:var(--muted);max-width:640px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-top:var(--s5)}
.cta span{color:var(--muted);font-size:var(--fs-sm)}

.features ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.features li,.figs figure{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow)}
.features p{color:var(--muted);margin:0}
.moves > p{color:var(--muted)}
.figs{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.figs figure{margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.figs svg{width:100%;height:auto;max-height:220px}
.figs figcaption{font-weight:600;font-size:var(--fs-sm)}
.phones{display:flex;flex-wrap:wrap;gap:var(--s5)}
.phones picture{flex:1 1 140px;max-width:260px;min-width:0}
.phones img{display:block;width:100%;height:auto;border-radius:28px;border:6px solid var(--ink);box-shadow:var(--shadow-lg);background:var(--surface)}
.invite{background:var(--surface);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--shadow);max-width:760px}

.doc{max-width:720px;margin-top:var(--s6)}
.doc h1{font-size:clamp(28px,5vw,40px)}
.doc h2{font-size:var(--fs-lg);margin-top:var(--s6)}
.doc ul,.doc ol{padding-left:1.3em;margin:0 0 var(--s4)}
.doc li{margin-bottom:var(--s2)}
.small{font-size:var(--fs-sm);color:var(--muted)}

footer{max-width:1040px;margin:0 auto;padding:var(--s6) var(--s4) var(--s7);border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm)}
footer nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-bottom:var(--s3)}
footer nav a{color:var(--ink);font-weight:600}
footer [aria-current]{text-decoration:none}

.contact{display:grid;gap:var(--s3);max-width:560px;margin:var(--s5) 0}
.contact label{display:grid;gap:6px;font-weight:600;font-size:var(--fs-sm)}
.contact small{font-weight:400;color:var(--muted)}
.contact input,.contact textarea{font:inherit;font-weight:400;font-size:var(--fs-base);padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);width:100%}
.contact textarea{resize:vertical;min-height:140px}
.contact input:focus-visible,.contact textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.contact .btn{justify-self:start;border:0;cursor:pointer;font:inherit;font-weight:600}
.contact .btn:disabled{opacity:.55}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.formmsg{min-height:1.5em;margin:0;font-size:var(--fs-sm)}
.formmsg.err{color:var(--danger)}
.formmsg.ok{font-weight:600}
