/* ==========================================================================
   STUDIO — Product & website mockups
   Every mock is laid out in `em`, where 1em = 1% of its container width
   (container query units). Mocks therefore scale perfectly from a phone
   to a 4K screen without JS and without blurry screenshots.
   To replace a mock with a real screenshot, set SITE_CONFIG.media.<key>.
   ========================================================================== */

.site { font-size: 1cqw; width: 100%; font-family: var(--font-text); line-height: 1.35; position: relative; }
/* showcase demos are drawn at a slightly larger design scale, then normalised */
.site--resto, .site--dental, .site--trades { font-size: .72cqw; }
.media-shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ==========================================================================
   HERO — Atelier Halden (architecture)
   ========================================================================== */
.site--arch { background: #EEEAE3; color: #1C1A17; height: 100%; min-height: 56.25cqw; }
.ar-nav { display: flex; align-items: center; gap: 3em; padding: 2.2em 4em; font-size: 1.15em; }
.ar-logo { font-family: var(--font-serif); font-size: 1.5em; letter-spacing: -0.01em; }
.ar-links { display: flex; gap: 2.4em; margin-left: auto; color: #6B655C; }
.ar-btn { padding: .7em 1.4em; border-radius: 99em; background: #1C1A17; color: #EEEAE3; }
.ar-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: 3em; padding: 2em 4em 4em; }
.ar-copy { display: grid; align-content: center; gap: 1.6em; }
.ar-kicker { font-size: 1.05em; letter-spacing: .14em; text-transform: uppercase; color: #8A8276; }
.ar-h { font-family: var(--font-serif); font-weight: 400; font-size: 6.4em; line-height: .98; letter-spacing: -0.035em; }
.ar-h em { font-style: italic; color: #9B6B43; }
.ar-p { font-size: 1.45em; color: #6B655C; max-width: 30em; line-height: 1.5; }
.ar-row { display: flex; gap: 1.6em; align-items: center; font-size: 1.2em; }
.ar-cta { padding: 1em 1.8em; border-radius: 99em; background: #1C1A17; color: #EEEAE3; }
.ar-ghost { color: #1C1A17; }
.ar-stats { display: flex; gap: 3.6em; margin-top: 1.2em; padding-top: 2em; border-top: 1px solid rgba(28,26,23,.12); }
.ar-stats b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 2.8em; letter-spacing: -0.02em; }
.ar-stats span { font-size: 1em; color: #8A8276; }

.ar-visual { position: relative; border-radius: 1.6em; overflow: hidden; aspect-ratio: 1 / 1.02; background: #C9C0B3; }
.ar-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #2B3240 0%, #5B5466 38%, #C98E6A 72%, #E8B88F 100%); }
.ar-sky::after { content: ""; position: absolute; left: 62%; top: 52%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFE3C2 0%, rgba(255,210,170,.5) 40%, transparent 70%); }
.ar-building { position: absolute; bottom: 14%; background: linear-gradient(90deg, #1F1D1B, #2C2925 60%, #23211F); }
.ar-b1 { left: 10%; width: 44%; height: 58%; border-radius: .4em .4em 0 0; }
.ar-b2 { left: 50%; width: 30%; height: 40%; background: linear-gradient(90deg, #2A2724, #37332E); }
.ar-b3 { left: 76%; width: 14%; height: 24%; background: #35312C; }
.ar-b1::before { content: ""; position: absolute; left: -6%; right: -6%; top: -3%; height: 3.5%; background: #3A3631; }
.ar-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(180deg, #4A433B, #2C2824); }
.ar-ground::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,200,150,.18), transparent 60%); }
.ar-windows { position: absolute; inset: 8% 10% 6%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7% 10%; }
.ar-b2 .ar-windows { grid-template-columns: repeat(4, 1fr); }
.ar-windows i { background: rgba(255,255,255,.06); border-radius: .15em; transition: background 1.6s ease, box-shadow 1.6s ease; }
.ar-windows i.on { background: #FFD9A0; box-shadow: 0 0 1.2em rgba(255,200,120,.55); }
.ar-caption { position: absolute; left: 1.6em; right: 1.6em; bottom: 1.4em; display: flex; justify-content: space-between; font-size: 1.05em; color: rgba(255,255,255,.75); }
.ar-caption span:first-child { color: #fff; }

/* mobile variant inside the phone */
.site--arch-m { font-size: 1cqw; min-height: 100%; padding-bottom: 8em; display: grid; align-content: start; gap: 4em; }
.site--arch-m .ar-nav { padding: 14em 7em 2em; font-size: 4em; }
.site--arch-m .ar-nav { font-size: 1em; padding: 16em 7em 0; }
.site--arch-m .ar-logo { font-size: 5.6em; }
.ar-burger { margin-left: auto; display: grid; gap: 1.6em; }
.ar-burger i { display: block; width: 7em; height: .7em; background: #1C1A17; border-radius: 1em; }
.ar-m-visual { position: relative; margin: 0 7em; aspect-ratio: 1 / 1.05; border-radius: 6em; overflow: hidden; }
.site--arch-m .ar-kicker { font-size: 3.6em; margin: 0 2em; letter-spacing: .1em; }
.site--arch-m .ar-h { font-size: 13em; margin: 0 .55em; line-height: 1; }
.site--arch-m .ar-cta { font-size: 4.6em; justify-self: start; margin-left: 1.5em; }

/* ==========================================================================
   SHOWCASE 01 — Maison Laurent (restaurant)
   ========================================================================== */
.site--resto { background: #110F0D; color: #EFE6D8; }
.rs-nav { display: flex; align-items: center; gap: 3em; padding: 3.4em 5em; font-size: 2.1em; }
.rs-nav { font-size: 1em; }
.rs-logo { font-family: var(--font-serif); font-size: 3.4em; letter-spacing: .02em; }
.rs-links { display: flex; gap: 3em; margin-left: auto; color: rgba(239,230,216,.6); font-size: 2.1em; }
.rs-btn { font-size: 2.1em; padding: .7em 1.4em; border: 1px solid rgba(200,164,106,.5); color: #C8A46A; border-radius: 99em; }
.rs-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3em; padding: 3em 5em 7em; align-items: center; }
.rs-copy { display: grid; gap: 3em; }
.rs-kicker { font-size: 2em; letter-spacing: .18em; text-transform: uppercase; color: #C8A46A; }
.rs-h { font-family: var(--font-serif); font-weight: 400; font-size: 10.5em; line-height: .95; letter-spacing: -0.03em; }
.rs-h em { color: #C8A46A; }
.rs-p { font-size: 2.6em; line-height: 1.5; color: rgba(239,230,216,.62); max-width: 22em; }
.rs-reserve { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; border: 1px solid rgba(239,230,216,.14); border-radius: 1.4em; overflow: hidden; font-size: 2.1em; }
.rs-reserve span { padding: .9em 1.1em; border-right: 1px solid rgba(239,230,216,.1); white-space: nowrap; }
.rs-reserve small { display: block; font-size: .72em; color: rgba(239,230,216,.45); letter-spacing: .08em; text-transform: uppercase; }
.rs-reserve b { font-weight: 500; background: #C8A46A; color: #110F0D; padding: 1.55em 1.2em; white-space: nowrap; }
.rs-plate { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3A332C, #1A1714 70%); box-shadow: 0 4em 8em rgba(0,0,0,.6), inset 0 0 0 .6em rgba(255,255,255,.02); }
.rs-plate__rim { position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F4EEE4, #D9D0C2 70%, #B9AE9E); box-shadow: inset 0 .8em 2em rgba(0,0,0,.15); }
.rs-plate__food { position: absolute; inset: 26%; border-radius: 50%; }
.rs-plate__food i { position: absolute; border-radius: 50%; }
.rs-plate__food i:nth-child(1) { inset: 18% 22% 26% 18%; background: radial-gradient(circle at 40% 40%, #E39B4C, #B5631F 70%); box-shadow: 0 .8em 1.6em rgba(80,40,10,.35); }
.rs-plate__food i:nth-child(2) { width: 22%; height: 22%; left: 58%; top: 12%; background: radial-gradient(circle at 40% 40%, #6E8B3D, #3F5A22); }
.rs-plate__food i:nth-child(3) { width: 14%; height: 14%; left: 64%; top: 62%; background: #7A1F2B; }
.rs-plate__food i:nth-child(4) { width: 10%; height: 10%; left: 12%; top: 70%; background: #7A1F2B; opacity: .8; }
.rs-plate__food i:nth-child(5) { width: 60%; height: 4%; left: 10%; top: 86%; border-radius: 1em; background: #3F2A1E; opacity: .5; rotate: -12deg; }
.rs-menu { padding: 6em 5em; border-top: 1px solid rgba(239,230,216,.08); display: grid; gap: 2.6em; }
.rs-menu__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5em; font-family: var(--font-serif); font-size: 3.4em; }
.rs-menu__row i { height: 1px; border-bottom: 1px dotted rgba(239,230,216,.25); }
.rs-menu__row span:last-child { color: #C8A46A; font-size: .7em; }
.rs-band { padding: 7em 5em 9em; background: #1A1714; display: grid; gap: 1.6em; }
.rs-band p { font-family: var(--font-serif); font-style: italic; font-size: 6em; letter-spacing: -0.02em; }
.rs-band span { font-size: 2.2em; color: rgba(239,230,216,.5); }

/* ==========================================================================
   SHOWCASE 02 — Zahnwerk (dental)
   ========================================================================== */
.site--dental { background: #F7FAF9; color: #0E2A27; }
.dn-nav { display: flex; align-items: center; gap: 3em; padding: 3.2em 5em; }
.dn-logo { display: flex; align-items: center; gap: .5em; font-size: 3.2em; font-weight: 650; letter-spacing: -0.03em; }
.dn-logo small { font-weight: 400; color: #5E7A76; font-size: .7em; letter-spacing: 0; }
.dn-logo i { width: 1.1em; height: 1.1em; border-radius: .35em .35em .6em .6em; background: linear-gradient(160deg, #2BB5A0, #0F766E); }
.dn-links { display: flex; gap: 2.6em; margin-left: auto; font-size: 2.1em; color: #5E7A76; }
.dn-btn { font-size: 2.1em; padding: .75em 1.4em; border-radius: 99em; background: #0F766E; color: #fff; font-weight: 550; }
.dn-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4em; padding: 3em 5em 6em; align-items: center; }
.dn-copy { display: grid; gap: 3em; }
.dn-badge { justify-self: start; display: inline-flex; align-items: center; gap: .6em; padding: .6em 1.2em; border-radius: 99em; background: #DDF1EC; color: #0F766E; font-size: 2em; font-weight: 550; }
.dn-badge i { width: .6em; height: .6em; border-radius: 50%; background: #14B8A6; }
.dn-h { font-size: 9.6em; font-weight: 650; line-height: .98; letter-spacing: -0.045em; }
.dn-p { font-size: 2.6em; color: #4F6B67; line-height: 1.5; max-width: 22em; }
.dn-row { display: flex; gap: 2em; align-items: center; font-size: 2.3em; }
.dn-cta { padding: 1em 1.8em; border-radius: 99em; background: #0E2A27; color: #fff; font-weight: 550; }
.dn-ghost { color: #0F766E; font-weight: 550; }
.dn-book { background: #fff; border-radius: 3em; padding: 3.4em; box-shadow: 0 0 0 1px rgba(14,42,39,.06), 0 3em 6em -2em rgba(14,42,39,.18); display: grid; gap: 2.8em; }
.dn-book__head b { display: block; font-size: 3em; letter-spacing: -0.02em; }
.dn-book__head span { font-size: 2.1em; color: #5E7A76; }
.dn-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2em; }
.dn-days span { display: grid; justify-items: center; padding: 1em 0; border-radius: 1.6em; background: #F1F6F5; font-size: 2.8em; font-weight: 600; }
.dn-days small { font-size: .6em; font-weight: 400; color: #5E7A76; }
.dn-days .is-on { background: #0F766E; color: #fff; }
.dn-days .is-on small { color: rgba(255,255,255,.75); }
.dn-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.dn-slots span { text-align: center; padding: .8em 0; border-radius: 1.2em; box-shadow: inset 0 0 0 1px rgba(14,42,39,.12); font-size: 2.3em; }
.dn-slots .is-off { opacity: .35; text-decoration: line-through; }
.dn-slots .is-on { box-shadow: inset 0 0 0 2px #0F766E; color: #0F766E; font-weight: 600; background: #ECF7F4; }
.dn-confirm { text-align: center; padding: 1.1em; border-radius: 99em; background: #0E2A27; color: #fff; font-size: 2.3em; font-weight: 550; }
.dn-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4em; padding: 4em 5em 6em; }
.dn-features div { padding: 3.2em; border-radius: 2.6em; background: #fff; box-shadow: 0 0 0 1px rgba(14,42,39,.06); display: grid; gap: 1em; }
.dn-features b { font-size: 2.8em; letter-spacing: -0.02em; margin-top: .6em; }
.dn-features span { font-size: 2.1em; color: #5E7A76; }
.dn-ic { width: 6em; height: 6em; border-radius: 1.8em; background: #DDF1EC; position: relative; }
.dn-ic::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: .5em solid #0F766E; }
.dn-ic--2::after { border-radius: .6em; }
.dn-ic--3::after { border-radius: 50% 50% .4em .4em; }
.dn-band { margin: 0 5em 8em; padding: 4em; border-radius: 2.6em; background: #0E2A27; color: #fff; display: flex; justify-content: space-between; font-size: 2.4em; }
.dn-band span { color: rgba(255,255,255,.7); }

/* ==========================================================================
   SHOWCASE 03 — Brandt Elektrotechnik (trades)
   ========================================================================== */
.site--trades { background: #F3F2EE; color: #111; }
.hw-nav { display: flex; align-items: center; gap: 3em; padding: 3.2em 5em; background: #111; color: #fff; }
.hw-logo { display: flex; align-items: center; gap: .4em; font-size: 3.4em; font-weight: 800; letter-spacing: .02em; }
.hw-logo i { width: .9em; height: .9em; background: #FFD60A; clip-path: polygon(55% 0, 10% 58%, 45% 58%, 35% 100%, 90% 38%, 55% 38%); }
.hw-links { display: flex; gap: 2.8em; margin-left: auto; font-size: 2.1em; color: rgba(255,255,255,.65); }
.hw-btn { display: flex; align-items: center; gap: .5em; font-size: 2.1em; font-weight: 700; padding: .75em 1.3em; border-radius: .5em; background: #FFD60A; color: #111; }
.hw-btn i { width: .6em; height: .6em; border-radius: 50%; background: #DC2626; box-shadow: 0 0 0 .25em rgba(220,38,38,.25); }
.hw-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4em; padding: 6em 5em; align-items: center; }
.hw-copy { display: grid; gap: 3em; }
.hw-kicker { justify-self: start; font-size: 1.9em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .5em 1em; border: 2px solid #111; }
.hw-h { font-size: 9.4em; font-weight: 800; line-height: .94; letter-spacing: -0.045em; text-transform: none; }
.hw-h mark { background: linear-gradient(transparent 58%, #FFD60A 58%, #FFD60A 92%, transparent 92%); color: inherit; padding: 0 .05em; }
.hw-p { font-size: 2.5em; color: #4A4A48; line-height: 1.5; max-width: 22em; }
.hw-row { display: flex; gap: 2em; align-items: center; font-size: 2.3em; font-weight: 700; }
.hw-cta { padding: 1em 1.6em; background: #111; color: #FFD60A; border-radius: .4em; }
.hw-ghost { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: .12em; }
.hw-panel { position: relative; padding: 4em 3em; border-radius: 1.2em; background: #FFD60A; display: grid; gap: 1.8em; overflow: hidden; }
.hw-stripes { position: absolute; right: -10%; top: -10%; width: 60%; height: 40%; background: repeating-linear-gradient(-45deg, #111 0 1.4em, transparent 1.4em 2.8em); opacity: .9; rotate: 0deg; }
.hw-service { position: relative; display: flex; gap: 1.6em; align-items: center; padding: 2.2em; border-radius: .8em; background: #fff; box-shadow: .6em .6em 0 #111; }
.hw-service i { font-style: normal; width: 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: .4em; background: #111; color: #FFD60A; font-size: 2.6em; }
.hw-service b { display: block; font-size: 2.6em; letter-spacing: -0.02em; }
.hw-service span { font-size: 2em; color: #5A5A58; }
.hw-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid #111; border-bottom: 2px solid #111; margin: 0 5em; }
.hw-stats div { padding: 3em 0; text-align: center; border-left: 1px solid rgba(0,0,0,.12); }
.hw-stats div:first-child { border-left: 0; }
.hw-stats b { display: block; font-size: 5em; font-weight: 800; letter-spacing: -0.04em; }
.hw-stats span { font-size: 2em; color: #5A5A58; }
.hw-form { margin: 5em 5em 8em; padding: 3.4em; background: #111; color: #fff; border-radius: 1em; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr auto; gap: 1.4em; align-items: center; font-size: 2.1em; }
.hw-form b { font-size: 1.3em; }
.hw-form span { padding: .9em 1em; border-radius: .4em; background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
.hw-form em { font-style: normal; font-weight: 700; padding: .9em 1.2em; border-radius: .4em; background: #FFD60A; color: #111; }

/* ==========================================================================
   LIGHTBOX (full-size demo preview)
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); visibility: hidden; }
.lightbox__scrim { position: absolute; inset: 0; background: rgba(11,11,13,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity 400ms var(--ease-out); }
.lightbox__panel { position: relative; width: min(1240px, 100%); max-height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 14px; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.lightbox.is-open { visibility: visible; }
.lightbox.is-open .lightbox__scrim { opacity: 1; }
.lightbox.is-open .lightbox__panel { opacity: 1; transform: none; }
.lightbox__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #fff; }
.lightbox__head b { display: block; font-family: var(--font-sans); font-size: 20px; letter-spacing: -0.02em; font-weight: 600; }
.lightbox__ind { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.lightbox__actions { display: flex; gap: 10px; align-items: center; }
.lightbox__actions .btn { --btn-bg: #fff; --btn-fg: var(--ink); }
.lightbox__close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; font-size: 14px; transition: background var(--t-fast); }
.lightbox__close:hover { background: rgba(255,255,255,.24); }
.lightbox__browser { min-height: 0; display: grid; grid-template-rows: auto 1fr; }
.lightbox__viewport { overflow-y: auto; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); overscroll-behavior: contain; }
@media (max-width: 640px) { .lightbox__actions .btn { display: none; } }

/* ==========================================================================
   ATC SIMULATOR — Radar pill
   Colours mirror the real app (web/style.css): scope #050c12, green #59e680,
   selected cyan #8cf2ff, caution #ffb82e, critical #ff4538.
   ========================================================================== */
.atc-pill {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 2.45 / 1; border-radius: var(--r-pill);
  background: #050C12;
  box-shadow: 0 0 0 1px rgba(11,11,13,.9), 0 0 0 9px rgba(11,11,13,.04), 0 60px 120px -40px rgba(5,12,18,.6), 0 30px 60px -30px rgba(5,12,18,.5);
}
.atc-pill__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.atc-pill__vignette { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse 75% 95% at 50% 50%, transparent 55%, rgba(2,6,10,.85) 100%); box-shadow: inset 0 0 0 1px rgba(140,242,255,.08); }
.atc-hud { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .08em; color: rgba(140,242,255,.7); padding: 8px 14px; border-radius: 4px; background: rgba(5,12,18,.6); border: 1px solid rgba(89,230,128,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; }
.atc-hud b { color: #59E680; font-weight: 600; }
.atc-hud__sep { opacity: .3; }
.atc-hud__dot { width: 6px; height: 6px; border-radius: 50%; background: #59E680; box-shadow: 0 0 10px #59E680; animation: pulse-g 2s infinite; }
@keyframes pulse-g { 50% { opacity: .35; } }
.atc-hud--tl { left: 12%; top: 12%; }
.atc-hud--tr { right: 12%; top: 12%; }
.atc-hud--bl { left: 12%; bottom: 12%; color: rgba(220,240,255,.85); min-width: 0; max-width: 62%; overflow: hidden; }
.atc-hud--br { right: 12%; bottom: 12%; color: #FF4538; border-color: rgba(255,69,56,.35); background: rgba(40,6,6,.55); opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 400ms var(--ease-out); }
.atc-hud--br.is-on { opacity: 1; transform: none; }
.atc-hud__warn { width: 8px; height: 8px; background: #FF4538; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: pulse-g .8s infinite; }
.atc-hud__prompt { color: #59E680; }
.atc-hud__caret { width: 7px; height: 13px; background: #8CF2FF; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 900px) {
  .atc-pill { aspect-ratio: 1.5 / 1; border-radius: 120px; }
  .atc-hud { font-size: 9.5px; padding: 6px 10px; }
  .atc-hud--tl { left: 10%; top: 9%; } .atc-hud--tr { right: 10%; top: 9%; }
  .atc-hud--bl { display: none; } .atc-hud--br { right: 50%; translate: 50% 0; bottom: 9%; }
}
@media (max-width: 560px) {
  .atc-pill { aspect-ratio: 1 / 1.08; border-radius: 64px; }
  .atc-hud--tr { display: none; } .atc-hud--tl { left: 50%; translate: -50% 0; top: 7%; }
  .atc-hud--br { bottom: 7%; }
}

/* ==========================================================================
   LEADSCOPE — dashboard pill (LeadScope's own brand: #0a0c10 / lime #c5f24a)
   ========================================================================== */
.proj--ls .ls-word { font-weight: 650; }
.proj--ls .ls-word b { font-weight: inherit; background: linear-gradient(90deg, #8DB82A, #6E9A12); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ls-btn { --btn-bg: #0A0C10; --btn-fg: #C5F24A; }
.ls-btn:hover { box-shadow: 0 14px 40px -12px rgba(140,184,42,.55); }

.ls-pill {
  --ls-bg: #0A0C10; --ls-panel: #11141A; --ls-panel-2: #171B23; --ls-line: rgba(255,255,255,.07);
  --ls-text: #E7EAF0; --ls-dim: #8A93A3; --ls-accent: #C5F24A; --ls-good: #34D3B4; --ls-warn: #F5B544; --ls-bad: #F2685A;
  position: relative; overflow: hidden; border-radius: clamp(28px, 4.2vw, 72px);
  background: radial-gradient(120% 80% at 80% 0%, rgba(197,242,74,.10), transparent 50%), var(--ls-bg);
  padding: clamp(10px, 1.6vw, 24px);
  box-shadow: 0 0 0 1px rgba(11,11,13,.9), 0 60px 120px -40px rgba(10,12,16,.55);
  container-type: inline-size;
}
.lsd { font-size: 1cqw; display: grid; grid-template-columns: 15em 1fr; min-height: 44em; border-radius: clamp(18px, 3vw, 52px); overflow: hidden; background: var(--ls-panel); color: var(--ls-text); box-shadow: inset 0 0 0 1px var(--ls-line); font-family: "Geist", var(--font-text); }
.lsd i[class^="ic-"] { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-search { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
.ic-pin { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.ic-grid { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.5'/%3E%3C/svg%3E"); }
.ic-list { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E"); }
.ic-mail { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ic-phone { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.ic-up { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M12 16V4m0 0-5 5m5-5 5 5M4 20h16'/%3E%3C/svg%3E"); }
.ic-globe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }

.lsd-side { padding: 2.2em 1.4em; border-right: 1px solid var(--ls-line); display: flex; flex-direction: column; gap: .5em; background: rgba(0,0,0,.18); }
.lsd-logo { display: flex; align-items: center; gap: .5em; font-size: 1.5em; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 1.2em .4em; }
.lsd-logo b { color: var(--ls-accent); font-weight: inherit; }
.lsd-logo > i { width: .9em; height: .9em; border-radius: 50%; border: .18em solid var(--ls-accent); position: relative; }
.lsd-logo > i::after { content: ""; position: absolute; right: -.35em; bottom: -.35em; width: .35em; height: .18em; background: var(--ls-accent); rotate: 45deg; }
.lsd-nav { display: flex; align-items: center; gap: .7em; padding: .65em .8em; border-radius: .7em; font-size: 1.05em; color: var(--ls-dim); }
.lsd-nav em { margin-left: auto; font-style: normal; font-size: .85em; color: var(--ls-dim); }
.lsd-nav.is-on { background: rgba(197,242,74,.1); color: var(--ls-accent); }
.lsd-usage { margin-top: auto; padding: 1em; border-radius: .9em; background: var(--ls-panel-2); font-size: .85em; color: var(--ls-dim); display: grid; gap: .6em; }
.lsd-usage > div { height: .4em; border-radius: 1em; background: rgba(255,255,255,.08); overflow: hidden; }
.lsd-usage > div i { display: block; height: 100%; background: var(--ls-accent); border-radius: inherit; }
.lsd-usage small { font-size: 1em; color: var(--ls-text); }

.lsd-main { padding: 2em 2.2em; display: grid; grid-template-rows: auto auto 1fr; gap: 1.4em; min-width: 0; }
.lsd-search { display: grid; grid-template-columns: 1.6fr 1fr auto auto; gap: .8em; }
.lsd-field { display: flex; align-items: center; gap: .7em; height: 3.4em; padding: 0 1.1em; border-radius: .9em; background: var(--ls-panel-2); box-shadow: inset 0 0 0 1px var(--ls-line); font-size: 1.1em; color: var(--ls-text); white-space: nowrap; }
.lsd-field i { color: var(--ls-dim); }
.lsd-field--q { box-shadow: inset 0 0 0 1px rgba(197,242,74,.45), 0 0 0 .3em rgba(197,242,74,.08); }
.lsd-field--sm { color: var(--ls-dim); }
.lsd-caret { width: .1em; height: 1.2em; background: var(--ls-accent); margin-left: -.5em; animation: blink 1s steps(1) infinite; }
.lsd-go { display: grid; place-items: center; padding: 0 1.6em; border-radius: .9em; background: var(--ls-accent); color: #0A0C10; font-weight: 600; font-size: 1.1em; }
.lsd-filters { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; font-size: .95em; }
.lsd-filters span { padding: .45em .9em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--ls-line); color: var(--ls-dim); }
.lsd-filters span.is-on { background: rgba(197,242,74,.1); box-shadow: inset 0 0 0 1px rgba(197,242,74,.3); color: var(--ls-accent); }
.lsd-filters em { margin-left: auto; font-style: normal; color: var(--ls-dim); font-family: "Geist Mono", var(--font-mono); }
.lsd-body { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.4em; min-height: 0; }
.lsd-list { border-radius: 1em; box-shadow: inset 0 0 0 1px var(--ls-line); overflow: hidden; align-self: start; }
.lsd-row { display: grid; grid-template-columns: 1fr 6.5em 6.5em 7em; align-items: center; gap: 1em; padding: .95em 1.2em; font-size: 1em; border-top: 1px solid var(--ls-line); transition: background 400ms, opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.lsd-row--head { border-top: 0; font-size: .82em; color: var(--ls-dim); text-transform: uppercase; letter-spacing: .06em; background: rgba(0,0,0,.15); }
.lsd-row b { display: block; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsd-row small { display: block; color: var(--ls-dim); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsd-row > span:nth-child(2) { color: var(--ls-dim); }
.lsd-row.is-new { opacity: 0; transform: translateY(.6em); }
.lsd-row.is-sel { background: rgba(197,242,74,.06); box-shadow: inset .25em 0 0 var(--ls-accent); }
.lsd-bar { display: flex; align-items: center; gap: .5em; font-family: "Geist Mono", var(--font-mono); font-size: .95em; }
.lsd-bar i { flex: 1; height: .35em; border-radius: 1em; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.lsd-bar i::after { content: ""; position: absolute; inset: 0; width: var(--v); background: var(--c, var(--ls-accent)); border-radius: inherit; }
.lsd-st { justify-self: start; font-size: .85em; padding: .3em .75em; border-radius: 99em; background: rgba(255,255,255,.06); color: var(--ls-dim); white-space: nowrap; }
.lsd-st--new { color: #9CC3FF; background: rgba(120,170,255,.1); }
.lsd-st--ready { color: var(--ls-accent); background: rgba(197,242,74,.1); }
.lsd-st--sent { color: var(--ls-good); background: rgba(52,211,180,.1); }
.lsd-st--meet { color: #E4B8FF; background: rgba(200,140,255,.12); }

.lsd-detail { border-radius: 1em; padding: 1.6em; background: var(--ls-panel-2); box-shadow: inset 0 0 0 1px var(--ls-line); display: grid; gap: 1.2em; align-content: start; transition: opacity 300ms; }
.lsd-detail.is-swap { opacity: .25; }
.lsd-d-head { display: flex; justify-content: space-between; gap: 1em; }
.lsd-d-head b { display: block; font-size: 1.4em; letter-spacing: -0.02em; font-weight: 600; }
.lsd-d-head span { font-size: .95em; color: var(--ls-dim); }
.lsd-score { position: relative; width: 4.6em; height: 4.6em; flex: none; }
.lsd-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lsd-score circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3.4; }
.lsd-score .lsd-score__v { stroke: var(--ls-accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--score, 0)); transition: stroke-dashoffset 900ms var(--ease-out); }
.lsd-score b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.4em; font-family: "Geist Mono", var(--font-mono); }
.lsd-d-contact { display: grid; gap: .55em; font-size: 1em; color: var(--ls-text); }
.lsd-d-contact span { display: flex; align-items: center; gap: .7em; }
.lsd-d-contact i { color: var(--ls-dim); }
.lsd-d-contact em { font-style: normal; }
.lsd-d-label { font-size: .8em; text-transform: uppercase; letter-spacing: .08em; color: var(--ls-dim); margin-top: .3em; }
.lsd-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .5em .8em; font-size: .95em; }
.lsd-check { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .55em .8em; border-radius: .6em; background: rgba(0,0,0,.2); }
.lsd-check span { color: var(--ls-dim); }
.lsd-check b { font-weight: 550; font-family: "Geist Mono", var(--font-mono); font-size: .95em; }
.lsd-check .ok { color: var(--ls-good); } .lsd-check .bad { color: var(--ls-bad); } .lsd-check .warn { color: var(--ls-warn); }
.lsd-d-foot { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; margin-top: .3em; }
.lsd-status { font-size: .9em; padding: .4em .9em; border-radius: 99em; background: rgba(197,242,74,.1); color: var(--ls-accent); }
.lsd-btn { margin-left: auto; font-size: .95em; padding: .55em 1.1em; border-radius: .7em; background: var(--ls-accent); color: #0A0C10; font-weight: 600; }
.lsd-btn--ghost { margin-left: 0; background: transparent; color: var(--ls-text); box-shadow: inset 0 0 0 1px var(--ls-line); }

@container (max-width: 760px) {
  .lsd { font-size: 2.1cqw; grid-template-columns: 1fr; min-height: 0; }
  .lsd-side, .lsd-row > span:nth-child(2), .lsd-row--head span:nth-child(2), .lsd-filters span:nth-child(n+4) { display: none; }
  .lsd-main { padding: 1.4em; }
  .lsd-search { grid-template-columns: 1fr 1fr; }
  .lsd-field--sm { display: none; }
  .lsd-go { grid-column: 1 / -1; height: 3.2em; }
  .lsd-body { grid-template-columns: 1fr; }
  .lsd-row { grid-template-columns: 1fr 7em 7.5em; }
  .lsd-row:nth-child(n+6) { display: none; }
}

/* ==========================================================================
   ONBOARDING PLATFORM — workflow pill (its own light paper/indigo brand)
   ========================================================================== */
.ob-pill {
  --ob-paper: #F7F6F3; --ob-card: #FFFFFF; --ob-ink: #191815; --ob-dim: #77736B; --ob-line: rgba(25,24,21,.08);
  --ob-accent: #3B4CCB; --ob-good: #1F8A5F; --ob-warn: #C98A16; --ob-bad: #C2412D;
  position: relative; overflow: hidden; border-radius: clamp(28px, 4.2vw, 72px);
  background: linear-gradient(135deg, #E9E7F7 0%, #F1EFEA 50%, #E7EEF0 100%);
  padding: clamp(10px, 1.6vw, 24px);
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow-float);
  container-type: inline-size;
}
.obd { font-size: 1cqw; background: var(--ob-paper); color: var(--ob-ink); border-radius: clamp(18px, 3vw, 52px); padding: 2.2em 2.6em 2.6em; display: grid; gap: 1.8em; box-shadow: 0 0 0 1px var(--ob-line), 0 2em 4em -2em rgba(59,76,203,.15); }
.obd-top { display: flex; align-items: center; gap: 2em; }
.obd-org { display: flex; align-items: center; gap: .6em; font-family: var(--font-serif); font-size: 1.5em; letter-spacing: -0.01em; }
.obd-org i { font-style: normal; width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: .45em; background: var(--ob-accent); color: #fff; font-family: var(--font-text); font-size: .8em; font-weight: 600; }
.obd-tabs { display: flex; gap: .4em; margin-left: 1em; font-size: 1.05em; color: var(--ob-dim); }
.obd-tabs span { padding: .5em 1em; border-radius: 99em; }
.obd-tabs .is-on { background: var(--ob-ink); color: #fff; }
.obd-tabs em { font-style: normal; font-size: .8em; padding: .1em .5em; border-radius: 99em; background: rgba(201,138,22,.15); color: var(--ob-warn); margin-left: .3em; }
.obd-avatar { margin-left: auto; width: 2.6em; height: 2.6em; display: grid; place-items: center; border-radius: 50%; background: #E3E1F5; color: var(--ob-accent); font-size: .95em; font-weight: 600; }
.obd-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em; }
.obd-tiles div { padding: 1.3em 1.4em; border-radius: 1.1em; background: var(--ob-card); box-shadow: 0 0 0 1px var(--ob-line); display: grid; gap: .3em; }
.obd-tiles span { font-size: .95em; color: var(--ob-dim); }
.obd-tiles b { font-family: var(--font-serif); font-size: 2.8em; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.obd-tiles .is-warn b { color: var(--ob-warn); }
.obd-tiles .is-err b { color: var(--ob-bad); }
.obd-grid { display: grid; grid-template-columns: 1fr 1.25fr 1.45fr; gap: 1.2em; }
.obd-card { padding: 1.6em; border-radius: 1.3em; background: var(--ob-card); box-shadow: 0 0 0 1px var(--ob-line); display: grid; gap: 1.2em; align-content: start; }
.obd-card__title { display: flex; justify-content: space-between; font-size: 1.15em; font-weight: 600; }
.obd-card__title em { font-style: normal; font-weight: 500; color: var(--ob-dim); font-family: var(--font-mono); font-size: .9em; }
.obd-person__head { display: flex; gap: .9em; align-items: center; }
.obd-person__head b { display: block; font-size: 1.15em; }
.obd-person__head span { font-size: .95em; color: var(--ob-dim); }
.obd-face { width: 3em; height: 3em; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #C9CFF6, #E8E0F5); color: var(--ob-accent); font-weight: 600; font-size: 1em; }
.obd-ring { position: relative; width: 11em; height: 11em; justify-self: center; display: grid; place-content: center; text-align: center; }
.obd-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.obd-ring circle { fill: none; stroke: #ECEAF6; stroke-width: 5; }
.obd-ring .obd-ring__v { stroke: var(--ob-accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--pct, 0)); transition: stroke-dashoffset 800ms var(--ease-out); }
.obd-ring b { font-family: var(--font-serif); font-size: 2.6em; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.obd-ring span { font-size: .9em; color: var(--ob-dim); }
.obd-meta { display: grid; grid-template-columns: auto 1fr; gap: .4em 1em; font-size: .95em; padding-top: 1em; border-top: 1px solid var(--ob-line); }
.obd-meta span { color: var(--ob-dim); } .obd-meta b { text-align: right; font-weight: 550; }
.obd-tasks ul { display: grid; gap: .3em; }
.obd-tasks li { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; gap: .7em; padding: .65em .4em; border-radius: .7em; font-size: 1.02em; transition: background 400ms; }
.obd-tasks li em { font-style: normal; font-size: .82em; color: var(--ob-dim); }
.obd-tasks li i { width: 1.4em; height: 1.4em; border-radius: .45em; box-shadow: inset 0 0 0 1.5px rgba(25,24,21,.2); position: relative; transition: background 300ms, box-shadow 300ms; }
.obd-tasks li i::after { content: ""; position: absolute; left: .42em; top: .25em; width: .35em; height: .65em; border: solid #fff; border-width: 0 .14em .14em 0; rotate: 45deg; scale: 0; transition: scale 400ms var(--ease-spring); }
.obd-tasks li.is-done i { background: var(--ob-good); box-shadow: none; }
.obd-tasks li.is-done i::after { scale: 1; }
.obd-tasks li.is-done span { color: var(--ob-dim); text-decoration: line-through; text-decoration-color: rgba(25,24,21,.25); }
.obd-tasks li.is-active { background: #F2F1FB; }
.obd-flow__nodes { display: flex; align-items: center; justify-content: space-between; position: relative; padding: .4em 0 .6em; }
.obd-flow__nodes::before { content: ""; position: absolute; left: 1em; right: 1em; top: 1.6em; height: 2px; background: repeating-linear-gradient(90deg, rgba(25,24,21,.14) 0 .4em, transparent .4em .8em); }
.obd-flow__nodes::after { content: ""; position: absolute; left: 1em; top: calc(1.6em - 1px); height: 4px; width: var(--flow, 0%); max-width: calc(100% - 2em); border-radius: 4px; background: var(--ob-accent); transition: width 800ms var(--ease-out); box-shadow: 0 0 1em rgba(59,76,203,.4); }
.obd-flow__nodes span { position: relative; z-index: 1; display: grid; justify-items: center; gap: .5em; font-size: .9em; color: var(--ob-dim); }
.obd-flow__nodes i { font-style: normal; width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: 50%; background: var(--ob-card); box-shadow: inset 0 0 0 1.5px rgba(25,24,21,.14); font-size: .95em; font-weight: 600; transition: background 400ms, color 400ms, box-shadow 400ms; }
.obd-flow__nodes span.is-on { color: var(--ob-ink); }
.obd-flow__nodes span.is-on i { background: var(--ob-accent); color: #fff; box-shadow: 0 0 0 .4em rgba(59,76,203,.12); }
.obd-review { display: grid; gap: .8em; }
.obd-doc { display: flex; align-items: center; gap: .9em; padding: 1em; border-radius: 1em; background: #FAFAF8; box-shadow: inset 0 0 0 1px var(--ob-line); }
.obd-doc > i { font-style: normal; width: 2.8em; height: 3.2em; display: grid; place-items: end center; padding-bottom: .5em; border-radius: .4em; background: #FBE9E5; color: var(--ob-bad); font-size: .75em; font-weight: 700; }
.obd-doc b { display: block; font-size: .98em; font-weight: 550; }
.obd-doc span { font-size: .85em; color: var(--ob-dim); }
.obd-approve { margin-left: auto; padding: .5em 1em; border-radius: .7em; background: var(--ob-ink); color: #fff; font-size: .92em; font-weight: 550; transition: background 300ms; white-space: nowrap; }
.obd-approve.is-done { background: var(--ob-good); }
.obd-remind { display: flex; align-items: center; gap: .7em; padding: .8em 1em; border-radius: .9em; background: #FDF6E8; color: #7A5A12; font-size: .92em; }
.obd-remind i { width: .7em; height: .7em; border-radius: 50%; background: var(--ob-warn); flex: none; }
.obd-remind b { font-weight: 600; }

@container (max-width: 760px) {
  .obd { font-size: 2.2cqw; padding: 1.6em; }
  .obd-tabs { display: none; }
  .obd-tiles { grid-template-columns: repeat(3, 1fr); }
  .obd-tiles div:nth-child(n+4) { display: none; }
  .obd-grid { grid-template-columns: 1fr; }
  .obd-person { display: none; }
  .obd-tasks li:nth-child(n+5) { display: none; }
}

/* ==========================================================================
   CREW SWAP — duty-swap stage (night sky → dawn, its own palette)
   ========================================================================== */
.crew-pill {
  position: relative; overflow: hidden; isolation: isolate; container-type: inline-size;
  aspect-ratio: 1.18 / 1; border-radius: clamp(36px, 6vw, 96px);
  background: #0B1630;
  box-shadow: 0 0 0 1px rgba(11,22,48,.9), 0 0 0 9px rgba(11,11,13,.04), 0 60px 120px -40px rgba(11,22,48,.55);
}
.crw { --cs-accent: #4C8DFF; --cs-ink: #0F1A33; --cs-dim: #6A7690; --cs-line: rgba(15,26,51,.08);
  position: absolute; inset: 0; font-size: 1cqw; font-family: var(--font-text); color: var(--cs-ink); }
.crw-sky { position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 85% 105%, rgba(255,150,110,.55), transparent 70%),
    radial-gradient(70% 60% at 10% 0%, rgba(76,141,255,.25), transparent 60%),
    linear-gradient(170deg, #0A1430 0%, #13244F 55%, #3A3A6A 85%, #8A5A6A 100%); }
.crw-sky::before { content: ""; position: absolute; inset: 0; opacity: .7;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 58% 14%, #fff, transparent),
    radial-gradient(1px 1px at 76% 28%, #fff, transparent), radial-gradient(1px 1px at 90% 10%, #fff, transparent), radial-gradient(1px 1px at 22% 40%, #fff, transparent), radial-gradient(1px 1px at 46% 32%, #fff, transparent); }
.crw-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.crw-route path { fill: none; stroke: rgba(255,255,255,.18); stroke-width: .35; stroke-dasharray: 1 1.4; vector-effect: none; }
.crw-plane { position: absolute; width: 2em; height: 2em; left: -5%; top: 82%; translate: -50% -50%; background: #fff; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z' transform='rotate(90 12 12)'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z' transform='rotate(90 12 12)'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: crw-fly 22s linear infinite; }
@keyframes crw-fly { 0% { left: -5%; top: 82%; rotate: -52deg; } 25% { left: 22%; top: 53%; rotate: -38deg; } 50% { left: 48%; top: 35.5%; rotate: -10deg; } 75% { left: 75%; top: 34%; rotate: 8deg; } 100% { left: 105%; top: 42%; rotate: 24deg; } }

/* phone */
.crw-phone { position: absolute; left: 7%; top: 9%; width: 37%; aspect-ratio: 9 / 18.6; padding: 1.3em; border-radius: 5.4em; background: #0A0C12;
  box-shadow: inset 0 0 0 .25em #22252D, 0 3em 6em -1em rgba(0,0,0,.55); }
.crw-notch { position: absolute; left: 50%; top: 2.4em; width: 9em; height: 2.4em; translate: -50% 0; border-radius: 2em; background: #000; z-index: 2; }
.crw-screen { position: relative; height: 100%; border-radius: 4.2em; overflow: hidden; background: #F5F7FB; padding: 6.4em 2.2em 2em; display: grid; align-content: start; gap: 1.5em; }
.crw-top { display: flex; justify-content: space-between; align-items: center; }
.crw-logo { display: flex; align-items: center; gap: .6em; font-weight: 700; font-size: 2.3em; letter-spacing: -0.03em; }
.crw-logo i { width: 1em; height: 1em; border-radius: .3em; background: linear-gradient(135deg, #4C8DFF, #7B5CFF); position: relative; }
.crw-logo i::after { content: "⇄"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .62em; font-style: normal; }
.crw-month { font-size: 1.7em; color: var(--cs-dim); }
.crw-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5em; }
.crw-week span { display: grid; justify-items: center; gap: .1em; padding: .7em 0 .9em; border-radius: 1.4em; font-size: 1.9em; font-weight: 600; position: relative; }
.crw-week small { font-size: .62em; font-weight: 500; color: var(--cs-dim); }
.crw-week i { position: absolute; bottom: .3em; width: .3em; height: .3em; border-radius: 50%; background: var(--cs-accent); }
.crw-week .is-sel { background: var(--cs-ink); color: #fff; }
.crw-week .is-sel small { color: rgba(255,255,255,.6); } .crw-week .is-sel i { background: #fff; }
.crw-label { font-size: 1.6em; font-weight: 600; color: var(--cs-dim); text-transform: uppercase; letter-spacing: .08em; margin-top: .4em; }
.crw-row { display: grid; grid-template-columns: 4.6em 1fr auto; align-items: center; gap: 1.2em; padding: 1.3em 1.4em; border-radius: 1.8em; background: #fff; box-shadow: 0 0 0 1px var(--cs-line); font-size: 1.05em; transition: box-shadow 500ms var(--ease-out), background 500ms; }
.crw-date { display: grid; justify-items: center; font-size: 1.5em; color: var(--cs-dim); line-height: 1.1; }
.crw-date b { font-size: 1.6em; color: var(--cs-ink); }
.crw-row > div b { display: block; font-size: 2em; letter-spacing: -0.02em; }
.crw-row > div small { font-size: 1.55em; color: var(--cs-dim); }
.crw-row > em { font-style: normal; font-size: 1.6em; color: var(--cs-dim); font-family: var(--font-mono); }
.crw-row--off { background: #EEF1F7; box-shadow: none; }
.crw-tag { padding: .3em .7em; border-radius: 99em; background: #EAF1FF; color: var(--cs-accent) !important; font-family: var(--font-text) !important; font-weight: 600; opacity: 0; transform: scale(.8); transition: all 400ms var(--ease-spring); }
.crw-row.is-on { box-shadow: 0 0 0 .25em var(--cs-accent), 0 1.4em 2.6em -1em rgba(76,141,255,.45); }
.crw-row.is-on .crw-tag { opacity: 1; transform: none; }
.crw-match { position: absolute; left: 1.6em; right: 1.6em; bottom: 1.8em; display: flex; align-items: center; gap: 1em; padding: 1.6em; border-radius: 2em; background: var(--cs-ink); color: #fff;
  transform: translateY(140%); transition: transform 700ms var(--ease-out); }
.crw-match.is-on { transform: none; }
.crw-match small { display: block; font-size: 1.35em; color: #9FC2FF; }
.crw-match > div { min-width: 0; }
.crw-match b { font-size: 1.6em; letter-spacing: -0.02em; white-space: nowrap; }
.crw-btn { margin-left: auto; padding: .7em .9em; border-radius: 1.2em; background: var(--cs-accent); font-size: 1.35em; font-weight: 600; white-space: nowrap; transition: transform 200ms, background 300ms; }
.crw-btn.is-press { transform: scale(.92); background: #3B74E0; }

/* crew cards */
.crw-card { position: absolute; right: 7%; width: 41%; padding: 2.2em; border-radius: 3em; display: grid; gap: 1.8em;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 3em 6em -2em rgba(0,0,0,.45);
  opacity: .55; transform: translateY(1em) scale(.97); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), box-shadow 700ms; }
.crw-card.is-on { opacity: 1; transform: none; }
.crw-card--a { top: 12%; }
.crw-card--b { top: 55%; }
.crw-card.is-match { box-shadow: 0 0 0 .3em rgba(76,141,255,.9), 0 3em 6em -2em rgba(0,0,0,.45); }
.crw-who { display: flex; align-items: center; gap: 1.2em; }
.crw-who b { display: block; font-size: 2.1em; letter-spacing: -0.02em; }
.crw-who small { font-size: 1.5em; color: var(--cs-dim); }
.crw-av { width: 4.4em; height: 4.4em; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #CFE0FF, #E7DEFF); color: #3B5BD9; font-weight: 700; font-size: 1.5em; }
.crw-av--b { background: linear-gradient(135deg, #FFE1D4, #FFD3E2); color: #C2410C; }
.crw-duty { display: grid; grid-template-columns: auto 1fr; gap: .3em 1em; align-items: baseline; padding: 1.5em 1.7em; border-radius: 2em; background: #F3F6FC; }
.crw-duty em { grid-column: 1 / -1; font-style: normal; font-size: 1.35em; text-transform: uppercase; letter-spacing: .1em; color: var(--cs-accent); font-weight: 600; }
.crw-duty b { font-size: 2.6em; letter-spacing: -0.03em; }
.crw-duty span { font-size: 1.9em; color: var(--cs-ink); }
.crw-duty small { grid-column: 1 / -1; font-size: 1.5em; color: var(--cs-dim); }
.crw-link { position: absolute; right: 27.5%; top: 41.5%; height: 13.5%; width: 0; display: grid; place-items: center; }
.crw-link i { position: absolute; top: 0; bottom: 0; left: -.1em; width: .2em; background: repeating-linear-gradient(rgba(255,255,255,.55) 0 .7em, transparent .7em 1.4em); background-size: 100% 1.4em; opacity: .4; transition: opacity 500ms; }
.crw-link span { position: relative; width: 5em; height: 5em; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.8em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); transition: all 600ms var(--ease-spring); }
.crw-link.is-on i { opacity: 1; animation: crw-flow 1s linear infinite; }
.crw-link.is-on span { background: var(--cs-accent); transform: rotate(180deg) scale(1.1); box-shadow: 0 0 0 .6em rgba(76,141,255,.25), 0 0 3em rgba(76,141,255,.6); }
@keyframes crw-flow { to { background-position: 0 1.4em; } }
.crw-toast { position: absolute; left: 72%; bottom: 5%; translate: -50% 0; display: flex; align-items: center; gap: 1.2em; padding: 1.4em 2.2em 1.4em 1.4em; border-radius: 99em;
  background: #fff; box-shadow: 0 2em 4em -1em rgba(0,0,0,.45); white-space: nowrap; opacity: 0; transform: translateY(1.5em); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.crw-toast.is-on { opacity: 1; transform: none; }
.crw-toast > i { width: 3.4em; height: 3.4em; display: grid; place-items: center; border-radius: 50%; background: #16A34A; color: #fff; font-style: normal; font-size: 1.4em; }
.crw-toast b { display: block; font-size: 1.9em; }
.crw-toast small { font-size: 1.45em; color: var(--cs-dim); }
@container (max-width: 520px) {
  .crw-phone { left: 5%; width: 46%; top: 7%; }
  .crw-card { width: 44%; right: 4%; padding: 1.8em; }
  .crw-card--a { top: 9%; } .crw-card--b { top: 52%; }
  .crw-link { right: 24%; }
}