/* sooobusy.com. Colors and type from the app (CLAUDE.md §2): night background, hot pink, subway-slot bullets, the
   LED sign palette from StripMapView. */
:root {
  --bg: #0B0B0F; --panel: #17171F; --band: #111116; --text: #F4F4F6; --muted: #A3A3B2; --muted2: #C9CBD1;
  --line: #2C2E33; --pink: #FF3D8B; --pepper: #FF48B0; --ink: #1D1D1F;
  --led-red: #FF3B30; --led-amber: #FF9F1C; --led-green: #39E75F; --led-dim: #5E5E68; --rail: #BFC2C8; --proposed: #FFD23F;
  --display: 'Big Shoulders Display', Impact, sans-serif; --body: Archivo, system-ui, sans-serif;
  --led: Doto, 'Space Mono', ui-monospace, monospace; --mono: 'Space Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Nothing may make the page wider than the screen: a card flung off the deck used to, and phones zoomed the whole
   page out to fit it. clip (not hidden) so the pinned sign still sticks. */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--pink); }
a:hover { color: #FF6FA8; }
img, svg { display: block; }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--pink); color: var(--bg); padding: 10px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* Header */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.mark { text-decoration: none; font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; color: var(--text); }
.mark b, .word b { color: var(--pink); font-weight: 900; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; }
.top nav a:not(.pill) { color: var(--muted2); text-decoration: none; }
.top nav a:not(.pill):hover { color: var(--text); }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--pink); color: var(--bg); text-decoration: none; font-weight: 800; }
.pill:hover { color: var(--bg); background: #FF5C9E; }
.pill.big { min-height: 50px; padding: 0 26px; font-size: 16px; }
.ghost { display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; font-size: 16px; }
.ghost:hover { color: var(--text); border-color: var(--muted); }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; padding-top: 24px; padding-bottom: 32px; }
/* The wordmark in the app's display face: white "SOOO" over hot-pink "BUSY" (three O's for branding). */
.word { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(84px, 12.5vw, 184px); line-height: 0.84; letter-spacing: -1px; }
.word span, .word b { display: block; }
.word span { color: var(--text); }
/* Pepper's morning brief between the wordmark and the pitch: the app's sticky note, about the same Saturday the line
   below shows. Wide screens only; the Pepper section further down carries her on a phone. */
.hero-note { flex: 0 1 330px; align-self: center; margin: 0; background: var(--pepper); color: var(--ink); font-family: var(--mono); padding: 24px 26px; transform: rotate(-2deg); box-shadow: 0 24px 60px rgba(255, 72, 176, 0.22), 8px 8px 0 #000; display: flex; flex-direction: column; gap: 12px; }
.hero-note figcaption { font-size: 12px; font-weight: 700; letter-spacing: 3px; }
.hero-note ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
.hero-note .sig { font-size: 13px; }
@media (max-width: 1100px) { .hero-note { display: none; } }
.hero-copy { flex: 0 1 460px; display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }
.hero-copy p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--muted2); }
.hero-copy .lede { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.25; color: var(--text); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Today's Line: the sign sticks while the tall track scrolls past; app.js slides the strip. */
.track { height: 6900px; padding-bottom: 64px; position: relative; z-index: 0; overflow: clip; }   /* set from the speed knob in app.js */
.sticky { position: sticky; top: 16px; transform-origin: 50% 30%; will-change: opacity, transform; }
.sign { border-radius: 18px; border: 1px solid var(--line); background-color: #050507; background-image: radial-gradient(#101015 1px, transparent 1.6px); background-size: 6px 6px; overflow: hidden; }
/* Fixed rows: the Next Stop text changes length as the line moves, so it gets a row of its own that never wraps.
   (Sharing a row with the title made the header grow a line mid-scroll and everything below it jumped.) */
.sign-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 18px 24px; border-bottom: 1px solid #1A1A20; }
.sign-title { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: 1px; }
.sign-meta { font-size: 14px; color: var(--muted); text-align: right; }
.sign-next { grid-column: 1 / -1; display: flex; gap: 12px; height: 24px; align-items: center; font-size: 18px; white-space: nowrap; overflow: hidden; }
.led { font-family: var(--led); font-weight: 900; }
.led.red { color: var(--led-red); text-shadow: 0 0 8px rgba(255, 59, 48, 0.6); }
.led.amber { color: var(--led-amber); text-shadow: 0 0 8px rgba(255, 159, 28, 0.55); }
.strip-window { position: relative; overflow: hidden; }
.strip { position: absolute; left: 24px; top: 0; will-change: transform; }
.rail { position: absolute; border-radius: 3px; background: var(--rail); }
.stop { position: absolute; top: 0; transition: opacity .4s, filter .4s; }
.notch { position: absolute; border-radius: 3px; background: var(--rail); transform-origin: 0 50%; transform: rotate(-45deg); }
.stop.next .notch { background: var(--led-red); }
.label { position: absolute; transform-origin: 0 100%; transform: rotate(-45deg); display: flex; flex-direction: column; align-items: flex-start; }
.next-word { display: none; font-family: var(--led); font-weight: 900; line-height: 1; white-space: nowrap; color: var(--led-red); text-shadow: 0 0 10px rgba(255, 59, 48, 0.65); }
.stop.next .next-word { display: block; }
.box { display: flex; flex-direction: column; border: solid transparent; border-radius: 2px; }
.stop.next .box { border-color: var(--led-red); }
.name { font-family: var(--led); font-weight: 900; line-height: 1; white-space: nowrap; color: var(--led-amber); text-shadow: 0 0 8px rgba(255, 159, 28, 0.5); }
.stop.next .name { color: var(--led-red); text-shadow: 0 0 8px rgba(255, 59, 48, 0.6); }
.xfer { display: flex; align-items: center; white-space: nowrap; }
.bullet { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--body); font-weight: 800; flex-shrink: 0; }
.status { font-family: var(--led); font-weight: 900; line-height: 1; color: var(--led-green); text-shadow: 0 0 6px rgba(57, 231, 95, 0.45); white-space: pre; }
.status.proposed { color: var(--proposed); text-shadow: 0 0 6px rgba(255, 210, 63, 0.45); }
.hop { position: absolute; display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--text); white-space: nowrap; }
.train { position: absolute; font-family: var(--led); font-weight: 700; color: var(--led-dim); white-space: nowrap; }
.last { position: absolute; font-family: var(--led); font-weight: 900; color: var(--led-dim); white-space: nowrap; }
.note { margin: 14px 4px 0; font-size: 14px; color: var(--muted); }
.hint { color: var(--muted2); }

/* Under the sign, moving with it: the deck for the stop the train is heading to (one card swiped left, the pick
   swiped right just as that stop lights up), and Pepper's push for that stop. Shown only when the screen is tall
   enough to keep it in view with the sign. */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 20px; overflow-x: clip; overflow-y: visible; }
.demo-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.demo-label { font-size: 12px; font-weight: 800; letter-spacing: 3px; color: var(--muted); }
.deck { position: relative; height: 176px; }
.card { position: absolute; left: 0; top: 0; width: min(100%, 460px); height: 168px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; overflow: hidden; will-change: transform; }
.c-photo { width: 38%; height: 100%; object-fit: cover; flex-shrink: 0; background: #22222A; }
.c-body { flex: 1; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--slot, var(--pink)); z-index: 1; }
.card .c-kind { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--slot, var(--pink)); }
.card .c-title { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 0.95; }
.card .c-meta { font-size: 14px; color: var(--muted2); }
.card .c-why { margin-top: auto; font-family: var(--mono); font-size: 12px; line-height: 1.35; color: #FF7BC0; }
.card.under { transform: translate(10px, 8px) scale(0.97); opacity: .65; }
.stamp { position: absolute; top: 16px; right: 16px; z-index: 2; padding: 4px 10px; border: 3px solid; border-radius: 6px; background: rgba(11, 11, 15, 0.7); font-weight: 900; font-size: 18px; letter-spacing: 2px; transform: rotate(12deg); opacity: 0; }
.stamp.pass { color: var(--led-red); border-color: var(--led-red); left: auto; }
.stamp.keep { color: var(--led-green); border-color: var(--led-green); right: auto; left: 18px; transform: rotate(-12deg); }
.nag { max-width: 420px; border-radius: 18px; background: rgba(36, 36, 44, 0.92); border: 1px solid #34343E; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; will-change: transform, opacity; }
.nag-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--muted2); }
.nag-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--pink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-size: 15px; }
.nag-time { margin-left: auto; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.nag p { margin: 0; font-size: 16px; line-height: 1.4; }
.nag-sig { font-size: 13px; color: var(--muted); }
.demo.fit-hide { display: none; }
/* Phones: a smaller deck card under the sign, and Pepper's push as a notification dropping over the top of the sign. */
@media (max-width: 640px) {
  .demo { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .deck { height: 128px; }
  .card { height: 122px; }
  .card .c-body { padding: 12px 14px; gap: 3px; }
  .card .c-title { font-size: 22px; }
  .card .c-meta { font-size: 12px; }
  .card .c-why { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .stamp { font-size: 14px; top: 10px; }
  .nag-col { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 5; pointer-events: none; }
  .nag-col .demo-label { display: none; }
  .nag { max-width: none; background: rgba(40, 40, 50, 0.96); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); padding: 11px 13px; }
  .nag p { font-size: 14px; }
  .nag-sig { display: none; }
  .note { font-size: 13px; }
}

/* Sections after the sign rise in as they arrive. */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; } .reveal.d2 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Lines */
.band { position: relative; z-index: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--band); box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.55); }
.block { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 40px; }
.split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.split > div { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6vw, 80px); line-height: 0.92; }
.kicker { font-size: 13px; font-weight: 800; letter-spacing: 3px; }
.pink { color: var(--pink); } .yellow { color: var(--proposed); } .blue { color: #4F7DFF; } .green { color: #2DB34A; }
.muted { margin: 0; max-width: 440px; font-size: 17px; line-height: 1.6; color: var(--muted2); }
/* The eight lines as a service chart: each line's hours as a bar across one day (5 a.m. to 9 a.m. the next morning),
   a NOW marker at New York time, and a working switch per line (off = dashed bar, NO SERVICE, and Pepper has notes). */
.chart { display: flex; flex-direction: column; gap: 10px; --cols: 230px minmax(0, 1fr) 56px; }
.chart-axis { display: grid; grid-template-columns: var(--cols); gap: 18px; padding: 0 16px; }
.axis-track { position: relative; height: 22px; }
.tick { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.now-tag { position: absolute; top: -6px; transform: translateX(-50%); font-family: var(--led); font-weight: 900; font-size: 14px; color: var(--pink); text-shadow: 0 0 8px rgba(255, 61, 139, 0.6); white-space: nowrap; }
.chart-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.row { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 18px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.row.running { border-color: var(--c); box-shadow: 0 0 24px -6px var(--c); }
.row-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.row-name .bullet { width: 40px; height: 40px; font-size: 18px; }
.row-name strong { display: block; font-size: 16px; font-weight: 800; }
.row-name small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-name .off-tag { display: none; font-family: var(--led); font-weight: 900; font-size: 13px; color: var(--led-red); text-shadow: 0 0 6px rgba(255, 59, 48, 0.5); }
.row.off .row-name small { display: none; }
.row.off .row-name .off-tag { display: block; margin-top: 3px; }
.days { margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--muted2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.track-bar { position: relative; height: 16px; border-radius: 8px; background-color: #1E1E26; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(300% / 28 - 1px), #2C2E33 calc(300% / 28 - 1px), #2C2E33 calc(300% / 28)); }
.bar { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: var(--c); width: 0; transition: width .9s cubic-bezier(.2, .8, .2, 1), background-color .3s, opacity .3s; }
.chart.live .bar { width: var(--w); }
.row.off .bar { background: transparent; border: 2px dashed var(--c); opacity: .55; box-sizing: border-box; }
.now-line { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--pink); box-shadow: 0 0 8px var(--pink); border-radius: 1px; }
.switch { justify-self: end; width: 50px; height: 30px; border-radius: 999px; border: 0; padding: 3px; background: var(--pink); cursor: pointer; transition: background .2s; }
.switch span { display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; transform: translateX(20px); transition: transform .2s; }
.switch[aria-checked="false"] { background: #3A3A44; }
.switch[aria-checked="false"] span { transform: translateX(0); }
.snark { margin: 0; min-height: 26px; font-family: var(--mono); font-size: 16px; color: #FF8CC8; }
.snark span { color: var(--muted); }
@media (max-width: 760px) {
  .chart { --cols: minmax(0, 1fr) 56px; }
  .chart-axis { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) 56px; }
  .row .track-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* Cards */
.cards { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.cards article { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 20px; background: var(--panel); }
.cards h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 0.95; }
.cards p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted2); }

/* Pepper */
.pepper { background: var(--pink); color: var(--bg); }
.pepper-in { padding-top: 96px; padding-bottom: 96px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.pepper-copy { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pepper h2 { font-size: clamp(48px, 7vw, 96px); line-height: 0.88; }
.pepper-copy p { margin: 0; font-size: 18px; line-height: 1.6; max-width: 560px; }
.sticky-note { flex: 1 1 340px; max-width: 380px; margin: 0 auto; background: var(--pepper); border: 2px solid var(--bg); box-shadow: 10px 10px 0 var(--bg); transform: rotate(-1.2deg); padding: 28px; font-family: var(--mono); color: var(--ink); display: flex; flex-direction: column; gap: 14px; }
.sticky-note figcaption { font-size: 13px; font-weight: 700; letter-spacing: 3px; }
.sticky-note p { margin: 0; font-size: 16px; line-height: 1.5; }
.sig { font-size: 14px; font-weight: 700; }

/* Beta */
.beta { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
/* The closing line as an LED sign: "Stop" in the sign's red, "staying in." in white, both dot-matrix. */
.led-headline .led { font-size: 0.86em; letter-spacing: -0.02em; }
.led-headline .led.red { text-shadow: 0 0 18px rgba(255, 59, 48, 0.55); }
.led.white { color: var(--text); text-shadow: 0 0 16px rgba(244, 244, 246, 0.35); }
.beta h2 { font-size: clamp(56px, 9vw, 128px); line-height: 0.86; }
.beta .muted { max-width: 540px; font-size: 18px; }
#beta-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; max-width: 520px; }
#beta-form input[type=email] { flex: 1 1 260px; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-family: var(--body); font-size: 16px; }
#beta-form input::placeholder { color: #8C8C99; }
#beta-form button { min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; background: var(--pink); color: var(--bg); font-family: var(--body); font-weight: 800; font-size: 16px; cursor: pointer; }
#beta-form button[disabled] { opacity: .6; cursor: default; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: 0; min-height: 24px; font-size: 16px; color: var(--muted2); }
.form-msg.ok { color: var(--led-green); }
.form-msg.err { color: #FF8A80; }

/* Footer */
footer { border-top: 1px solid var(--line); }
.foot { padding-top: 32px; padding-bottom: 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; font-size: 14px; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.foot a { color: var(--muted2); }

@media (max-width: 640px) {
  .top nav { gap: 16px; }
  .top nav a:not(.pill) { display: none; }
  .sign-head { padding: 14px 16px; grid-template-columns: minmax(0, 1fr); }
  .sign-meta { text-align: left; }
  .sign-next { font-size: 15px; }
  .sign-title { font-size: 24px; }
}