/* Space Pidgin — shared base for sub-pages (/join /signin /thanks /privacy).
   Extracted from space-balloon.html (tokens, frame, header, scaffold, form, footer).
   Keep in sync with index.html when the base design changes. */
  /* ============================================================
     "TETHER" — Space Pidgin homepage
     Brand palette locked to logo: #121212 / #F5F5F5 / cyan #00DCFB
     Signature: a single cyan line (elevator + logo underline) as the
     page's spine; sections dock onto it. Blueprint precision retained.
     ============================================================ */
  :root{
    /* light (optional day mode) */
    --paper:#E8EAEA; --paper-2:#E0E3E2; --panel:#EEF0EF;
    --ink:#101418; --ink-2:#48535B; --ink-3:#6B757C;
    --line:rgba(16,22,28,0.16); --line-soft:rgba(16,22,28,0.08); --line-hard:rgba(16,22,28,0.34);
    --accent:#00C6E6; --accent-txt:#067A8E; --accent-dim:rgba(0,198,230,0.14);
    --on-accent:#04252B; --grid:rgba(16,22,28,0.045);
    --maxw:1180px; --frame:clamp(14px,3.4vw,40px);
    --mono:ui-monospace,"SF Mono","SFMono-Regular","Menlo","Consolas",monospace;
    --sans:"Helvetica Neue","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
    --step--1:0.8125rem; --step-0:1rem; --step-1:1.1875rem; --step-2:1.5rem;
    --step-3:2rem; --step-4:clamp(2.2rem,4.4vw,3.4rem); --hero:clamp(2.9rem,7.8vw,6rem);
  }
  @media (prefers-color-scheme: dark){ :root{
    --paper:#101316; --paper-2:#141A1E; --panel:#161C21;
    --ink:#F1F3F4; --ink-2:#9FB0BA; --ink-3:#6C7B85;
    --line:rgba(203,224,235,0.13); --line-soft:rgba(203,224,235,0.07); --line-hard:rgba(203,224,235,0.30);
    --accent:#00DCFB; --accent-txt:#54E7FF; --accent-dim:rgba(0,220,251,0.16);
    --on-accent:#04252B; --grid:rgba(203,224,235,0.04);
  }}
  :root[data-theme="light"]{ --paper:#E8EAEA;--paper-2:#E0E3E2;--panel:#EEF0EF;--ink:#101418;--ink-2:#48535B;--ink-3:#6B757C;--line:rgba(16,22,28,0.16);--line-soft:rgba(16,22,28,0.08);--line-hard:rgba(16,22,28,0.34);--accent:#00C6E6;--accent-txt:#067A8E;--accent-dim:rgba(0,198,230,0.14);--on-accent:#04252B;--grid:rgba(16,22,28,0.045); }
  :root[data-theme="dark"]{ --paper:#101316;--paper-2:#141A1E;--panel:#161C21;--ink:#F1F3F4;--ink-2:#9FB0BA;--ink-3:#6C7B85;--line:rgba(203,224,235,0.13);--line-soft:rgba(203,224,235,0.07);--line-hard:rgba(203,224,235,0.30);--accent:#00DCFB;--accent-txt:#54E7FF;--accent-dim:rgba(0,220,251,0.16);--on-accent:#04252B;--grid:rgba(203,224,235,0.04); }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
  body{ margin:0; position:relative; background:var(--paper); color:var(--ink); font-family:var(--sans);
    font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:46px 46px; }
  ::selection{ background:var(--accent); color:var(--on-accent); }

  /* frame + ticks + titleblock */
  .frame{ position:fixed; inset:var(--frame); border:1px solid var(--line-hard); pointer-events:none; z-index:60; }
  .frame::before,.frame::after{ content:""; position:absolute; width:13px; height:13px; border:1px solid var(--accent); }
  .frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
  .frame::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
  .tick-tr,.tick-bl{ position:fixed; z-index:60; pointer-events:none; width:13px; height:13px; }
  .tick-tr{ top:calc(var(--frame) - 1px); right:calc(var(--frame) - 1px); border-top:1px solid var(--accent); border-left:1px solid var(--accent); }
  .tick-bl{ bottom:calc(var(--frame) - 1px); left:calc(var(--frame) - 1px); border-bottom:1px solid var(--accent); border-right:1px solid var(--accent); }
  .titleblock{ position:fixed; z-index:61; pointer-events:none; right:calc(var(--frame) + 10px); bottom:calc(var(--frame) + 10px);
    font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--ink-3); text-align:right; line-height:1.5; }
  .titleblock b{ color:var(--ink-2); font-weight:600; }
  @media (max-width:720px){ .titleblock{ display:none; } }

  /* ---- THE TETHER: page spine (elevator + logo underline) ---- */
  .tether{ position:absolute; top:0; bottom:0; z-index:1; pointer-events:none; width:2px;
    left: max(calc(var(--frame) + 6px), calc(50% - min(50vw,590px) + clamp(18px,4vw,40px) - 18px));
    background:linear-gradient(180deg, transparent 0, var(--accent) 76px, var(--accent) calc(100% - 220px), var(--accent-dim) 100%);
    opacity:.55; }
  @media (max-width:520px){ .tether{ opacity:.4; } }

  /* header */
  header{ position:sticky; top:0; z-index:50; backdrop-filter:blur(8px); background:color-mix(in srgb,var(--paper) 82%,transparent); border-bottom:1px solid var(--line); }
  .nav{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,40px); height:62px; display:flex; align-items:center; gap:22px; }
  .brand{ text-decoration:none; display:flex; flex-direction:column; gap:5px; }
  .brand .wm{ font-family:var(--display,var(--sans)); font-weight:700; letter-spacing:.14em; font-size:.82rem; color:var(--ink); white-space:nowrap; }
  .brand .ttrule{ height:3px; width:100%; border-radius:2px; background:linear-gradient(90deg,var(--accent) 0 26%, var(--ink) 26% 100%); }
  .nav .spacer{ flex:1; }
  .nav a.link{ color:var(--ink-2); text-decoration:none; font-size:.82rem; letter-spacing:.02em; white-space:nowrap; }
  /* narrow desktop: tighten the bar before it has to collapse */
  @media (max-width:1240px){ .nav{ gap:12px; padding-inline:18px; } .nav-links{ gap:13px; } .nav a.link{ font-size:.74rem; } .cta{ padding:8px 11px; } .u-btn{ padding:7px 8px; } }
  .nav a.link:hover{ color:var(--accent-txt); }
  .nav-links{ display:flex; gap:20px; }
  /* ---- mobile menu: below 1000px the links become a drop panel ---- */
  .menu-btn{ display:none; }
  @media (max-width:1000px){
    .menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:32px; padding:0; }
    .nav-links{
      display:flex; flex-direction:column; gap:0;
      position:absolute; left:0; right:0; top:100%;
      background:var(--paper);
      border-bottom:1px solid var(--line);
      padding:2px clamp(18px,4vw,40px) 10px;
      max-height:0; opacity:0; visibility:hidden; overflow:hidden;
      transition:max-height .24s ease, opacity .18s ease;
    }
    header.menu-open .nav-links{ max-height:min(70vh,520px); opacity:1; visibility:visible; overflow-y:auto; }
    .nav-links a.link{ font-size:.95rem; padding:15px 2px; border-bottom:1px solid var(--line-soft); }
    .nav-links a.link:last-child{ border-bottom:0; }
  }
  @media (prefers-reduced-motion:reduce){ .nav-links{ transition:none; } }
  .menu-btn .bars{ position:relative; display:block; color:var(--ink-2); }
  .menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after{ width:16px; height:1.5px; background:currentColor; border-radius:1px; }
  .menu-btn .bars::before, .menu-btn .bars::after{ content:""; position:absolute; left:0; transition:transform .2s ease; }
  .menu-btn .bars::before{ top:-5px; }
  .menu-btn .bars::after{ top:5px; }
  .menu-btn:hover .bars{ color:var(--accent-txt); }
  header.menu-open .menu-btn .bars{ background:transparent; }
  header.menu-open .menu-btn .bars::before{ transform:translateY(5px) rotate(45deg); }
  header.menu-open .menu-btn .bars::after{ transform:translateY(-5px) rotate(-45deg); }
  @media (prefers-reduced-motion:reduce){ .menu-btn .bars::before, .menu-btn .bars::after{ transition:none; } }
  .u-btn{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; cursor:pointer; background:transparent; color:var(--ink-2); border:1px solid var(--line-hard); padding:7px 10px; border-radius:2px; }
  .u-btn:hover{ border-color:var(--accent); color:var(--accent-txt); }
  .cta{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-decoration:none; background:var(--accent); color:var(--on-accent); padding:9px 15px; border-radius:2px; border:1px solid var(--accent); white-space:nowrap; transition:transform .12s, box-shadow .12s; font-weight:600; }
  .cta:hover{ transform:translateY(-1px); box-shadow:0 6px 20px -8px var(--accent); }
  .lang{ display:inline-flex; flex:0 0 auto; border:1px solid var(--line-hard); border-radius:2px; overflow:hidden; }
  .lang button{ font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; border:0; cursor:pointer; background:transparent; color:var(--ink-3); padding:6px 8px; white-space:nowrap; }
  .lang button.on{ background:var(--ink); color:var(--paper); }
  .u-btn{ flex:0 0 auto; }
  .cta{ flex:0 0 auto; }
  /* mobile header: no room for one row → wrap controls onto a second, right-aligned row */
  @media (max-width:560px){
    .nav{ flex-wrap:wrap; height:auto; padding-top:11px; padding-bottom:11px; row-gap:11px; column-gap:12px; align-items:center; }
    .nav .spacer{ display:none; }
    .brand{ flex:1 1 100%; }        /* brand owns the first row */
    .lang{ margin-left:auto; }       /* push the control cluster to the right on row 2 */
    .lang button{ padding:7px 10px; }
  }

  /* scaffold */
  main{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,40px); position:relative; z-index:2; }
  section{ padding:clamp(76px,13vh,140px) 0; border-bottom:1px solid var(--line-soft); position:relative; }
  section:last-of-type{ border-bottom:0; }
  .eyebrow{ position:relative; font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-txt); display:block; margin:0 0 30px; padding-left:2px; }
  .eyebrow::before{ content:""; position:absolute; left:-18px; top:.28em; width:9px; height:9px; margin-left:-4px;
    border:2px solid var(--accent); border-radius:50%; background:var(--paper); transition:box-shadow .35s, background .35s; }
  .eyebrow.tether-on::before{ background:var(--accent); box-shadow:0 0 0 4px var(--accent-dim), 0 0 16px var(--accent); }
  .eyebrow .idx{ color:var(--ink-3); margin-right:8px; }
  @media (max-width:520px){ .eyebrow::before{ display:none; } }
  h1,h2,h3{ font-family:var(--display,var(--sans)); font-weight:700; letter-spacing:-.02em; text-wrap:balance; margin:0; }
  .accent{ color:var(--accent-txt); }
  .lead{ color:var(--ink-2); font-size:var(--step-1); max-width:54ch; }
  .ttrule2{ height:3px; width:120px; border-radius:2px; background:linear-gradient(90deg,var(--accent) 0 26%, currentColor 26% 100%); opacity:.9; }

  form.contact{ border:1px solid var(--line); border-radius:3px; padding:clamp(22px,3vw,32px); background:var(--panel); }
  .field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
  .field label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
  .field input,.field textarea,.field select{ font-family:var(--sans); font-size:.95rem; color:var(--ink); background:var(--paper); border:1px solid var(--line-hard); border-radius:2px; padding:11px 12px; width:100%; }
  .field textarea{ resize:vertical; min-height:88px; }
  .field input:focus,.field textarea:focus,.field select:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  form.contact button[type="submit"]{ font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; cursor:pointer; background:var(--accent); color:var(--on-accent); border:0; padding:13px 22px; border-radius:2px; font-weight:600; }
  .formnote{ font-family:var(--mono); font-size:.74rem; color:var(--ink-3); margin-top:14px; }
  .formnote a{ color:var(--accent-txt); }

  /* footer */
  footer{ border-top:1px solid var(--line); padding:clamp(48px,8vh,80px) 0 30px; position:relative; z-index:2; }
  .foot-grid{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,40px); display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; }
  @media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:24px; } }
  .foot-brand{ font-family:var(--mono); font-weight:700; letter-spacing:.14em; font-size:.82rem; }
  .foot-brand .ttrule{ height:3px; width:120px; margin-top:8px; border-radius:2px; background:linear-gradient(90deg,var(--accent) 0 26%, var(--ink) 26% 100%); }
  .foot-tag{ font-family:var(--mono); color:var(--ink-3); margin-top:12px; font-size:.72rem; letter-spacing:.1em; }
  .foot-col h4{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; font-weight:600; }
  .foot-col a,.foot-col p{ display:block; color:var(--ink-2); text-decoration:none; font-size:.88rem; margin-bottom:7px; }
  .foot-col a:hover{ color:var(--accent-txt); }
  .foot-bar{ max-width:var(--maxw); margin:40px auto 0; padding:18px clamp(18px,4vw,40px) 0; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:.7rem; color:var(--ink-3); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; letter-spacing:.03em; }

  .anim .rv{ opacity:0; transform:translateY(14px); transition:opacity .7s ease,transform .7s ease; }
  .anim .rv.in{ opacity:1; transform:none; }
  #toast{ position:fixed; z-index:80; left:50%; bottom:calc(var(--frame) + 20px); transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:.78rem; padding:12px 18px; border-radius:3px; opacity:0; pointer-events:none; transition:opacity .3s,transform .3s; }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }