/* FlowTransit design system: the Line language.
   Replaces the paper system archived at archive/2026-09-10-stylesheet-paper.css.
   Pages consume these tokens; page files keep only their own component styles. */

:root {
  --paper:   #e9eef7;              /* cool porcelain ground */
  --ink:     #101828;
  --muted:   #42506b;
  --faint:   #5d6880;
  --line:    rgba(16, 40, 99, .15);
  --hair:    rgba(16, 40, 99, .09);
  --accent:  #1d56d8;              /* actions and the drawn line */
  --accent-bright: #2563eb;        /* strokes and larger graphics */
  --accent-soft: #dde7fb;
  --yellow:  #f5b301;              /* highlights, underlines, the bus */
  --navy:    #12234f;              /* dark bands and map panels */
  --surface: rgba(255, 255, 255, .78);
  --surface-2: rgba(255, 255, 255, .55);
  --panel:   #ffffff;
  --cardline: rgba(255, 255, 255, .9);
  --shadow:  0 8px 28px -12px rgba(16, 42, 99, .22);
  --shadow-sm: 0 2px 10px -4px rgba(16, 42, 99, .18);
  --shadow-hover: 0 18px 40px -16px rgba(16, 42, 99, .32);
  --radius:  20px;
  --up:   #1b6f46;
  --down: #a4402c;
  --t-xs: 12px; --t-sm: 14px; --t-base: 16px; --t-lg: 19px;
  --sans:  "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
  --serif: "IBM Plex Sans", system-ui, sans-serif; /* the serif era is over; legacy rules resolve to sans */
}

*{ margin:0; padding:0; box-sizing:border-box }
html{ overflow-x:clip }
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 34% at 16% 10%, rgba(125,178,255,.45), transparent 70%),
    radial-gradient(34% 28% at 86% 26%, rgba(255,211,92,.28), transparent 70%),
    radial-gradient(46% 36% at 58% 94%, rgba(160,200,255,.38), transparent 70%);
}
body > *{ position:relative; z-index:1 }
::selection{ background:var(--accent); color:#fff }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }

/* brand row */
.brand{ display:inline-flex; align-items:center; gap:13px; text-decoration:none;
  color:var(--ink); font-weight:700; font-size:17px; letter-spacing:-.02em }
.brand .logo-img{ height:24px; width:auto; display:block }

/* primary action: the blue pill */
.btn{ display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:var(--accent); color:#fff; border:0; border-radius:999px;
  padding:15px 28px; font-size:15px; font-weight:600; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(29,86,216,.65);
  transition:transform .18s, box-shadow .18s }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(29,86,216,.6) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn .arrow{ transition:transform .18s }
.btn:hover .arrow{ transform:translate(2px,-2px) }
.btn-quiet, .btn.quiet{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);
  backdrop-filter:blur(10px) }
.btn-quiet:hover, .btn.quiet:hover{ box-shadow:var(--shadow) }

/* cards */
.card{ background:var(--surface); border:1px solid var(--cardline);
  border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter:blur(10px) }

/* footer */
.foot{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:18px }
.foot a{ color:var(--muted); text-decoration:none }
.foot a:hover{ color:var(--ink) }
@media (max-width:640px){ .foot{ flex-direction:column; gap:8px; text-align:center } }

/* ============================================================
   Shared page chrome: header, brand lockup, footer.
   Values mirror the homepage exactly; home is the reference.
   ============================================================ */
.L-top{display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,52px);position:relative;z-index:2;
  max-width:1080px;margin:0 auto}
.L-brand{display:inline-flex;align-items:center;font-weight:700;font-size:17px;
  letter-spacing:-.02em;text-decoration:none;color:inherit}
.L-logo{height:24px;width:auto;display:inline-block;margin-right:13px;vertical-align:-5px}
.L-wordmark{height:17px;width:auto;display:block;margin-left:1px}
.L-cta-sm{font-size:13.5px;font-weight:600;color:#101828;text-decoration:none;
  border-radius:999px;padding:9px 16px;background:rgba(255,255,255,.78);
  box-shadow:0 2px 10px -4px rgba(16,42,99,.18);transition:transform .18s,box-shadow .18s}
.L-cta-sm:hover{transform:translateY(-1px);box-shadow:0 8px 28px -12px rgba(16,42,99,.22)}
.L-foot{max-width:1080px;margin:0 auto;padding:22px clamp(20px,4vw,52px) 36px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid rgba(16,40,99,.14);font-size:13px;color:#42506b;font-family:inherit}
.L-brand-sm{font-size:14.5px;font-weight:700}
.L-brand-sm .L-logo{height:18px;margin-right:10px;vertical-align:-4px}
.L-brand-sm .L-wordmark{height:13px}
.L-foot a{color:#42506b;text-decoration:none}
.L-foot a:hover{color:#101828}
@media (max-width:640px){ .L-foot{flex-direction:column;gap:6px} }

.L-nav{display:flex;align-items:center;gap:18px}
.L-navlink{font-size:14px;font-weight:600;color:#42506b;text-decoration:none}
.L-navlink:hover{color:#101828}

.L-footlinks a{color:#42506b;text-decoration:none}
.L-footlinks a:hover{color:#101828}