/* Transit page styles for the features shell (layout "custom"), drawn by
   /features/_shared/transit.js. Pages: qrm-vs-webeoc, qrm-vs-odoo, qrm-vs-veoci, rallypoint.
   2026-10-30 redesign: colors come from the shared theme tokens in features.css (dark by
   default, light mode on the toggle). The hero, closing band, role banner and lightbox sit on
   photographs, so they keep the night palette in both themes (see the island rule below). */
:root{
  --l-response:#f0594b; --l-recovery:#f39a3a; --l-airfield:#4d8ff7; --l-comms:#a97cf5; --l-platform:#93a1b8; --l-new:#33c48e;
  --wrap:1240px;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}#fx-custom *{transition:none;animation:none}}
html,body{background:var(--bg)}
#fx-custom .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-text)}
#fx-custom :is(h1,h2,h3,h4){letter-spacing:-.03em}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--amber);color:#16110A}
.btn.primary:hover{background:#FFC255}
.btn.ghost{border-color:var(--line-2);color:var(--fg);background:rgba(var(--ov),.04)}
.shot{border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line-2);box-shadow:0 30px 70px -30px rgba(0,0,0,.6);background:var(--bg-2);cursor:zoom-in}
.shot img{width:100%;height:auto}

/* night palette on photographs, in both themes */
#fx-custom .hero,#fx-custom .close,#fx-custom .role-hero,.lb{
  --bg:#0A0B0D; --bg-2:#0E1013; --bg-3:#13161A; --ov:255,255,255;
  --panel:rgba(255,255,255,.022); --panel-2:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.15);
  --fg:#ECEDEF; --fg-2:#B7BBC2; --fg-3:#9096A0; --amber-text:#FFB224;
  color:var(--fg);
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;padding:120px 0 72px}
.hero .bg{position:absolute;inset:0;background:var(--hero-bg) center/cover no-repeat;transform:scale(1.04)}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,17,30,.55) 0%,rgba(10,17,30,.72) 45%,var(--bg) 100%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:end;width:100%}
.hero h1{font-size:clamp(44px,6.4vw,84px);line-height:.98;font-weight:500}
.hero h1 em{font-style:normal;color:var(--amber-text)}
.hero p.lead{font-size:clamp(18px,1.6vw,21px);color:var(--fg-2);margin:24px 0 32px;max-width:560px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .frame{transform:perspective(1600px) rotateY(-9deg) rotateX(3deg);transform-origin:left center}
.hero .tag{position:absolute;top:24px;inset-inline-start:28px;font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:.02em}
.hero .tag span{color:var(--amber-text)}
@media(max-width:960px){.hero .wrap{grid-template-columns:1fr}.hero .frame{transform:none}.hero{min-height:auto;padding-top:88px}}

/* ---------- strip of truths ---------- */
.truths{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.truths .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.truth{padding:24px 24px;border-inline-end:1px solid var(--line)}
.truth:last-child{border-inline-end:0}
.truth b{display:block;font-family:var(--sans);font-size:30px;line-height:1.05;color:var(--fg)}
.truth span{font-size:14px;color:var(--fg-3)}
@media(max-width:860px){.truths .wrap{grid-template-columns:1fr 1fr}.truth:nth-child(2){border-inline-end:0}.truth:nth-child(-n+2){border-bottom:1px solid var(--line)}}

section.sec{padding:112px 0 32px}
.sec-head{max-width:780px;margin-bottom:40px}
.sec-head h2{font-size:clamp(34px,4.4vw,56px);line-height:1.02;margin-top:12px}
.sec-head p{color:var(--fg-2);font-size:18px;margin:16px 0 0}

/* ---------- transit map ---------- */
.map-card{background:radial-gradient(1200px 500px at 10% 0%,rgba(var(--ov),.05),transparent 60%),var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-l);padding:24px 24px 16px;position:relative}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 6px 4px;font-family:var(--mono);font-size:12px;color:var(--fg-2)}
.map-legend span{display:inline-flex;align-items:center;gap:8px}
.map-legend i{width:22px;height:6px;border-radius:3px;display:inline-block}
.map-legend i.dash{background:repeating-linear-gradient(90deg,var(--l-new) 0 6px,transparent 6px 10px)}
.map-hint{font-size:13px;color:var(--fg-3);margin:0 0 4px 4px}
svg.transit{width:100%;height:auto;display:block}
.transit .track{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.transit .track.dashed{stroke-dasharray:14 10}
.transit .stop{cursor:pointer;outline:none}
.transit .stop circle.o{fill:var(--bg-2);stroke-width:4;transition:r .15s}
.transit .stop circle.i{fill:var(--fg);transition:r .15s}
.transit .stop:hover circle.o,.transit .stop:focus circle.o{r:13}
.transit .stop.on circle.o{r:14;fill:var(--fg)}
.transit .stop.on circle.i{fill:var(--bg);r:5}
.transit .stop:focus-visible circle.o{stroke:var(--fg)}
.transit .q{font-family:var(--sans);font-weight:600;font-size:15px;fill:var(--fg)}
.transit .v{font-family:var(--mono);font-size:11px;fill:var(--fg-3)}
.transit .stop.on .q{fill:var(--amber-text)}
.transit .term{font-family:var(--sans);font-weight:600;font-size:17px;fill:var(--fg)}
.transit .term-sub{font-family:var(--mono);font-size:11px;fill:var(--fg-3);letter-spacing:.06em}
.transit .linename{fill:var(--c);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.transit .bar{fill:var(--bg-2);stroke:var(--fg);stroke-width:3}

.stop-detail{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;margin-top:24px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-l);padding:24px;min-height:320px}
.stop-detail .chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.stop-detail .chip i{width:12px;height:12px;border-radius:50%}
.stop-detail .from{margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--fg-3)}
.stop-detail .from s{text-decoration:none;color:var(--fg-2)}
.stop-detail h3{font-size:34px;line-height:1.05;margin:6px 0 16px}
.stop-detail p{color:var(--fg-2);margin:0 0 12px;font-size:16px}
.stop-detail .you{background:var(--panel-2);border-radius:12px;padding:16px 16px;margin-top:16px}
.stop-detail .you b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-text);margin-bottom:4px}
.stop-detail .noshot{height:100%;min-height:260px;border-radius:12px;border:1px dashed var(--line-2);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--fg-3);font-size:14px;background:repeating-linear-gradient(135deg,var(--bg-2) 0 12px,var(--bg-3) 12px 24px)}
.stop-detail .nav{display:flex;gap:8px;margin-top:16px}
.stop-detail .nav button{appearance:none;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);border-radius:999px;padding:7px 12px;font:600 13px var(--sans);cursor:pointer}
.stop-detail .nav button:hover{color:var(--fg);border-color:var(--fg-3)}
@media(max-width:900px){.stop-detail{grid-template-columns:1fr}}

/* strip maps on phones */
.strips{display:none}
@media(max-width:820px){
  svg.transit{display:none}
  .strips{display:block}
  .strip{margin:16px 0 24px}
  .strip h4{color:var(--c);margin:0 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
  .strip ol{list-style:none;margin:0;padding:0;position:relative}
  .strip ol::before{content:"";position:absolute;inset-inline-start:11px;top:10px;bottom:10px;width:6px;border-radius:3px;background:var(--c)}
  .strip.new ol::before{background:repeating-linear-gradient(180deg,var(--c) 0 8px,transparent 8px 13px)}
  .strip li button{appearance:none;background:none;border:0;color:inherit;text-align:start;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;width:100%;padding:8px 0;cursor:pointer;font:inherit}
  .strip li .dot{width:22px;height:22px;border-radius:50%;background:var(--bg-2);border:4px solid var(--c);position:relative;z-index:1}
  .strip li.on .dot{background:var(--fg)}
  .strip li .t b{display:block;font-family:var(--sans);font-size:17px}
  .strip li .t small{font-family:var(--mono);font-size:11.5px;color:var(--fg-3)}
  .map-card{padding:16px 16px}
}

/* ---------- roles ---------- */
.roles-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.roles-tabs button{appearance:none;border:1px solid var(--line-2);background:var(--panel);color:var(--fg-2);border-radius:14px;padding:12px 16px;cursor:pointer;text-align:start;display:flex;gap:12px;align-items:center;font:inherit;transition:border-color .15s,background .15s}
.roles-tabs button b{display:block;font-family:var(--sans);font-size:18px;color:var(--fg)}
.roles-tabs button small{font-size:13px;color:var(--fg-3)}
.roles-tabs button .em{font-size:18px;color:var(--fg-2);width:40px;height:40px;border-radius:12px;background:var(--panel-2);display:flex;align-items:center;justify-content:center}
.roles-tabs button[aria-selected=true]{border-color:var(--amber-line);background:var(--amber-soft)}
.role{display:none}
.role.on{display:block}
.role-hero{position:relative;border-radius:20px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;padding:32px;margin-bottom:24px;border:1px solid var(--line)}
.role-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.role-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,17,30,.92) 0%,rgba(10,17,30,.6) 55%,rgba(10,17,30,.2) 100%)}
.role-hero div.t{position:relative;max-width:620px}
.role-hero h3{font-size:clamp(28px,3.4vw,42px);line-height:1.05}
.role-hero p{color:var(--fg-2);margin:10px 0 0;font-size:17px}
.day{position:relative;display:grid;gap:16px}
.moment{display:grid;grid-template-columns:110px 1fr 1.15fr;gap:24px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-l);padding:16px}
.moment .when{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--amber-text);line-height:1}
.moment .when small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-top:6px;font-weight:500}
.moment h4{margin:0 0 6px;font-family:var(--sans);font-size:22px;line-height:1.15}
.moment p{margin:0;color:var(--fg-2);font-size:15.5px}
.moment .where{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--fg-3);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px}
.moment .shot{max-height:300px}
.moment .shot img{object-fit:cover;object-position:top left;max-height:300px}
@media(max-width:900px){.moment{grid-template-columns:1fr}.moment .when{font-size:18px}}

/* ---------- everyday collage ---------- */
.collage{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:90px;gap:16px}
.collage .shot{position:relative}
.collage .shot img{width:100%;height:100%;object-fit:cover;object-position:top left}
.collage .shot figcaption{position:absolute;inset-inline-start:10px;bottom:10px;background:var(--nav-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;font-family:var(--mono);font-size:11.5px;color:var(--fg)}
.c1{grid-column:1/span 7;grid-row:span 4}.c2{grid-column:8/span 5;grid-row:span 2}.c3{grid-column:8/span 5;grid-row:span 2}
.c4{grid-column:1/span 4;grid-row:span 3}.c5{grid-column:5/span 5;grid-row:span 3}.c6{grid-column:10/span 3;grid-row:span 3}
@media(max-width:820px){.collage{grid-template-columns:1fr 1fr;grid-auto-rows:150px}#fx-custom .collage .shot{grid-column:auto;grid-row:span 1}#fx-custom .collage .c1{grid-column:1/span 2;grid-row:span 2}}

/* ---------- move plan ---------- */
.plan{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:10px}
.plan::before{content:"";position:absolute;left:4%;right:4%;top:27px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--l-platform),var(--amber))}
.leg{position:relative;padding:0 16px}
.leg .pin{width:60px;height:60px;border-radius:50%;background:var(--bg-2);border:5px solid var(--amber);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:13px;position:relative;z-index:1}
.leg h4{font-family:var(--sans);font-size:22px;margin:16px 0 6px}
.leg p{color:var(--fg-2);font-size:15px;margin:0}
.brings{margin-top:44px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.brings div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-m);padding:16px}
.brings b{display:block;font-family:var(--sans);font-size:18px}
.brings span{font-size:13.5px;color:var(--fg-3)}
@media(max-width:860px){.plan{grid-template-columns:1fr 1fr;row-gap:28px}.plan::before{display:none}.brings{grid-template-columns:1fr 1fr}}

/* ---------- close ---------- */
.close{position:relative;margin:112px 0 0;min-height:520px;display:flex;align-items:center;overflow:hidden}
.close .bg{position:absolute;inset:0;background:var(--close-bg) center/cover}
.close .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,17,30,.95) 0%,rgba(10,17,30,.75) 50%,rgba(10,17,30,.35) 100%)}
.close .wrap{position:relative}
.close h2{font-size:clamp(36px,5vw,64px);line-height:1;max-width:760px}
.close p{color:var(--fg-2);font-size:18px;max-width:560px;margin:16px 0 28px}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(5,9,16,.92);display:none;align-items:center;justify-content:center;z-index:50;padding:40px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:min(1500px,96vw);max-height:88vh;border-radius:12px;border:1px solid var(--line-2)}
.lb button{position:absolute;top:18px;inset-inline-end:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-3);color:var(--fg);font-size:20px;cursor:pointer}

/* ---------- shell integration ---------- */
#fx-custom p{margin:0}
#fx-custom .hero p.lead{margin:24px 0 32px}
#fx-custom .sec-head p{margin:16px 0 0}
#fx-custom .stop-detail p{margin:0 0 12px}
#fx-custom .close p{margin:16px 0 28px}
svg.transit{direction:ltr}
[dir=rtl] .hero .frame{transform:perspective(1600px) rotateY(9deg) rotateX(3deg);transform-origin:right center}
[dir=rtl] .hero .bg::after,[dir=rtl] .role-hero .bg::after,[dir=rtl] .close .bg::after{transform:scaleX(-1)}
[dir=rtl] .plan::before{background:linear-gradient(270deg,var(--l-platform),var(--amber))}
@media(max-width:960px){[dir=rtl] .hero .frame{transform:none}}
/* Arabic letters join: letter-spacing and uppercase tracking break the words. */
[dir="rtl"] #fx-custom *,[dir="rtl"] #fx-custom .transit text{letter-spacing:0}
[dir="rtl"] #fx-custom{--mono:var(--sans)}
[dir="rtl"] #fx-custom .kick,[dir="rtl"] #fx-custom .transit .linename{font-size:13px}

/* line colors as text: darken them on the light page so they stay readable */
[data-theme="light"] .transit .linename{fill:color-mix(in srgb,var(--c) 55%,#000)}
[data-theme="light"] .strip h4{color:color-mix(in srgb,var(--c) 55%,#000)}