/* Lion Ride surface — intentionally scoped so it can sit beside the shared ItalyLions system. */
.lr-page { overflow-x: hidden; background: var(--s-0); }
.lr-page .navbar { z-index: 100; }
.lr-page .nav-logo img { width: 42px; height: 42px; object-fit: contain; }
.lr-page .nav-links .active { color: var(--g-200); }
.lr-page main { padding-top: var(--nav-h, 68px); }
.lr-page button, .lr-page input, .lr-page select { font-family: 'Inter', sans-serif; }
.lr-hero { position: relative; isolation: isolate; min-height: 640px; overflow: hidden; background: radial-gradient(circle at 75% 35%, rgba(201,162,39,.12), transparent 25%), linear-gradient(120deg, #090806 0%, #12100a 58%, #191507 100%); }
.lr-hero::before { content:''; position:absolute; inset:0; opacity:.42; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:52px 52px; mask-image:linear-gradient(90deg, #000 0%, transparent 80%); }
.lr-hero-orbit { position:absolute; border:1px solid rgba(201,162,39,.14); border-radius:50%; pointer-events:none; z-index:-1; }
.lr-orbit-one { width:690px;height:690px;right:-120px;top:-190px;transform:rotate(-18deg);box-shadow:0 0 0 30px rgba(201,162,39,.018), 0 0 0 78px rgba(201,162,39,.015); }
.lr-orbit-two { width:390px;height:390px;right:28px;top:-40px;border-color:rgba(255,255,255,.08); }
.lr-hero-grid { min-height:640px; display:grid; grid-template-columns:minmax(0,1fr) minmax(390px, .84fr); gap:clamp(35px,6vw,100px); align-items:center; position:relative; z-index:1; }
.lr-hero-copy { padding:65px 0 74px; max-width:670px; }
.lr-eyebrow,.lr-kicker { color:var(--g-300); font-size:.69rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.lr-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.lr-pulse,.lr-live-dot { width:8px;height:8px;display:inline-block;border-radius:50%;background:#7fd298;box-shadow:0 0 0 5px rgba(127,210,152,.11),0 0 18px rgba(127,210,152,.9); }
.lr-hero h1 { font-size:clamp(3.15rem,6.5vw,6.5rem)!important; line-height:.98; margin:0 0 28px; max-width:680px; letter-spacing:-.055em; }
.lr-hero-lede { max-width:550px; font-size:clamp(1rem,1.3vw,1.2rem); color:rgba(255,255,255,.64); line-height:1.75; margin-bottom:30px; }
.lr-hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.lr-hero-actions .btn { min-width:162px; }
.lr-trust-line { display:flex; gap:17px; flex-wrap:wrap; margin-top:26px; color:rgba(255,255,255,.46); font-size:.76rem; font-weight:700; }
.lr-trust-line span:first-child { color:var(--g-200); }
.lr-hero-card { border:1px solid rgba(201,162,39,.34); background:linear-gradient(155deg,rgba(35,29,12,.92),rgba(14,12,7,.97)); border-radius:26px; padding:24px; box-shadow:0 24px 70px rgba(0,0,0,.44),0 0 0 8px rgba(201,162,39,.025); transform:rotate(1.5deg); }
.lr-card-topline { color:var(--g-300);font-size:.65rem;font-weight:800;letter-spacing:.15em;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:17px; }
.lr-card-code { margin-left:auto; color:rgba(255,255,255,.38); font-size:.58rem; }
.lr-route { padding:29px 3px 22px; }
.lr-route-point { display:flex; align-items:center; gap:13px; }
.lr-route-point small { display:block; color:rgba(255,255,255,.37); font-size:.58rem; font-weight:800; letter-spacing:.15em; margin-bottom:3px; }
.lr-route-point strong { display:block;color:#fff;font-size:1.05rem;letter-spacing:-.02em; }
.lr-route-node { width:12px;height:12px;border:3px solid var(--g-300);border-radius:50%;display:block;box-shadow:0 0 0 5px rgba(201,162,39,.12); }
.lr-route-node.destination { background:var(--g-300); border-color:var(--g-300); border-radius:3px; transform:rotate(45deg); }
.lr-route-line { height:35px; border-left:1px dashed rgba(201,162,39,.52); margin:1px 0 1px 5px; display:flex;flex-direction:column;justify-content:space-around; }
.lr-route-line span { width:3px;height:3px;border-radius:50%;background:var(--g-400);margin-left:-2px; }
.lr-mini-meta { display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.54);font-size:.74rem;border-top:1px solid rgba(255,255,255,.08);padding:16px 0; }
.lr-chain { display:flex;align-items:flex-start;justify-content:space-between;gap:5px; padding:13px 0 22px; }
.lr-chain i { flex:1;height:1px;background:rgba(255,255,255,.12);margin-top:11px; }
.lr-chain-step { display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(255,255,255,.38);font-size:.62rem;font-weight:700;white-space:nowrap; }
.lr-chain-step b { width:22px;height:22px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;font-size:.59rem; }
.lr-chain-step.is-done { color:var(--g-200); }.lr-chain-step.is-done b { border-color:var(--g-300);background:rgba(201,162,39,.17); }
.lr-plate-strip { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 15px;border-radius:12px;background:rgba(255,255,255,.045);font-size:.71rem;color:rgba(255,255,255,.45); }.lr-plate-strip strong { color:rgba(255,255,255,.85);font-size:.72rem; }.lr-plate-strip em{font-style:normal;color:var(--g-200);}
.lr-stat-row { display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.09);border-top:0;border-radius:0 0 18px 18px;overflow:hidden;background:rgba(255,255,255,.018); }.lr-stat-row div { min-height:86px;padding:19px 22px;display:flex;align-items:center;gap:15px;border-right:1px solid rgba(255,255,255,.08); }.lr-stat-row div:last-child{border:0;}.lr-stat-row b{color:var(--g-300);font-family:Cinzel,serif;font-size:1.35rem;}.lr-stat-row span{font-size:.72rem;line-height:1.35;color:rgba(255,255,255,.6);font-weight:700;}
.lr-workspace { background:linear-gradient(180deg,rgba(255,255,255,.015),transparent); }
.lr-section-head { display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:27px; }.lr-section-head h2,.lr-live h2,.lr-safety h2,.lr-final-cta h2{font-size:clamp(1.9rem,3.8vw,3.2rem);margin:8px 0 0;line-height:1.05;letter-spacing:-.035em;}.lr-section-head p{max-width:450px;margin:0;color:rgba(255,255,255,.52);font-size:.86rem;line-height:1.7;}
.lr-tabs { display:flex;gap:5px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:18px; }.lr-tabs button { appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;color:rgba(255,255,255,.48);padding:11px 15px 14px;cursor:pointer;font-size:.78rem;font-weight:800;letter-spacing:.02em; }.lr-tabs button span { color:rgba(255,255,255,.32);margin-left:5px;font-size:.65rem; }.lr-tabs button.is-active{color:var(--g-200);border-color:var(--g-300);}.lr-tabs button.is-active span{color:var(--g-300);}
.lr-board-tools { display:flex;gap:9px;margin-bottom:16px; }.lr-search{display:flex;align-items:center;gap:9px;flex:1;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.025);padding:0 12px;color:var(--g-300);}.lr-search input{border:0!important;background:transparent!important;padding:11px 0!important;outline:0!important;min-width:0;width:100%;font-size:.82rem!important;}.lr-board-tools select,.lr-filter-btn{border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.025);color:rgba(255,255,255,.7);padding:0 12px;font-size:.75rem;font-weight:700;}.lr-filter-btn{cursor:pointer;}.lr-filter-btn span{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:6px;border-radius:50%;background:rgba(201,162,39,.2);color:var(--g-200);font-size:.64rem;}
.lr-board { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }.lr-ride-card { border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border-radius:16px;padding:18px;transition:.25s ease; }.lr-ride-card:hover{border-color:rgba(201,162,39,.45);transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,.25);}.lr-ride-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:18px;}.lr-tag{font-size:.59rem;font-weight:800;letter-spacing:.13em;color:#82ce9a;background:rgba(130,206,154,.1);padding:6px 8px;border-radius:5px;}.lr-ride-id{font-size:.6rem;color:rgba(255,255,255,.35);font-weight:700;}.lr-ride-route{display:grid;grid-template-columns:17px 1fr;gap:9px;margin-bottom:17px;}.lr-ride-route-rail{display:flex;flex-direction:column;align-items:center;padding:5px 0;}.lr-ride-route-rail span{width:8px;height:8px;border:2px solid var(--g-300);border-radius:50%;}.lr-ride-route-rail i{height:25px;border-left:1px dashed rgba(201,162,39,.5);}.lr-ride-route-rail span:last-child{border-radius:2px;background:var(--g-300);transform:rotate(45deg);}.lr-ride-route strong{display:block;font-size:.95rem;color:#fff;line-height:1.2;margin-bottom:19px;}.lr-ride-route strong:last-child{margin:0;}.lr-ride-route small{display:block;color:rgba(255,255,255,.4);font-size:.62rem;margin-bottom:4px;}.lr-ride-meta{display:flex;gap:10px;flex-wrap:wrap;color:rgba(255,255,255,.55);font-size:.68rem;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);}.lr-ride-host{display:flex;align-items:center;gap:9px;padding:13px 0 15px;}.lr-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--g-200),var(--g-600));color:#1a1508;font-size:.7rem;font-weight:900;}.lr-ride-host strong{font-size:.73rem;color:rgba(255,255,255,.82);}.lr-ride-host small{display:block;font-size:.61rem;color:var(--g-300);}.lr-ride-host .lr-rating{margin-left:auto;color:var(--g-200);font-size:.7rem;}.lr-card-btn{width:100%;border:1px solid rgba(201,162,39,.34);border-radius:8px;background:rgba(201,162,39,.08);color:var(--g-200);padding:10px;cursor:pointer;font-weight:800;font-size:.72rem;}.lr-card-btn:hover{background:rgba(201,162,39,.18);}.lr-card-btn.is-requested{color:#82ce9a;border-color:rgba(130,206,154,.35);background:rgba(130,206,154,.08);}
.lr-empty{grid-column:1/-1;padding:42px;border:1px dashed rgba(201,162,39,.22);border-radius:16px;text-align:center;color:rgba(255,255,255,.5);}.lr-empty strong{display:block;color:#fff;margin-bottom:6px;}.lr-empty button{margin-top:16px;}
.lr-flow{background:#0b0a07; }.lr-section-head-tight{align-items:end;}.lr-flow-grid{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr;align-items:center;gap:0;}.lr-flow-card{min-height:132px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025);}.lr-flow-card.is-active{border-color:rgba(201,162,39,.45);box-shadow:inset 0 2px 0 var(--g-300);}.lr-flow-card span{display:block;color:var(--g-300);font-size:.62rem;font-weight:800;letter-spacing:.1em;margin-bottom:24px;}.lr-flow-card b{font-family:Cinzel,serif;font-size:.92rem;color:#fff;}.lr-flow-card p{font-size:.66rem;line-height:1.5;margin:7px 0 0;color:rgba(255,255,255,.47);}.lr-flow-arrow{color:rgba(201,162,39,.5);text-align:center;font-size:1.1rem;}
.lr-live{background:linear-gradient(180deg,#0b0a07,#141108);}.lr-live-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,7vw,110px);align-items:center;}.lr-live h2{margin-bottom:20px;}.lr-live-panel p{max-width:450px;line-height:1.75;color:rgba(255,255,255,.56);font-size:.87rem;}.lr-live-guardrails{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}.lr-live-guardrails span{padding:7px 10px;border-radius:5px;background:rgba(201,162,39,.08);color:var(--g-200);font-size:.64rem;font-weight:800;}.lr-live-map{height:310px;position:relative;overflow:hidden;border:1px solid rgba(201,162,39,.3);border-radius:20px;background:#15150f;box-shadow:0 20px 55px rgba(0,0,0,.35);}.lr-map-grid{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:34px 34px;transform:rotate(9deg) scale(1.3);}.lr-map-road{position:absolute;height:1px;background:rgba(255,255,255,.18);transform-origin:left;}.road-a{width:110%;left:-4%;top:43%;transform:rotate(-18deg);}.road-b{width:100%;left:5%;top:59%;transform:rotate(23deg);}.road-c{width:78%;left:24%;top:16%;transform:rotate(75deg);}.lr-map-label{position:absolute;color:rgba(255,255,255,.37);font-size:.6rem;font-weight:800;letter-spacing:.15em;}.label-a{left:16%;top:26%;}.label-b{right:13%;top:62%;}.lr-map-route{position:absolute;left:17%;top:41%;width:68%;height:54px;border-bottom:2px solid var(--g-300);transform:rotate(10deg);}.lr-map-route span{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--g-200);bottom:-4px;}.lr-map-route span:nth-child(1){left:0}.lr-map-route span:nth-child(2){left:50%}.lr-map-route span:nth-child(3){right:0}.lr-map-route b{position:absolute;top:-25px;right:12%;font-size:.62rem;color:#82ce9a;letter-spacing:.13em;}.lr-map-car{position:absolute;left:47%;top:47%;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--g-300);box-shadow:0 0 0 8px rgba(201,162,39,.14),0 0 30px rgba(201,162,39,.5);font-size:1rem;transform:rotate(-10deg);}.lr-map-footer{position:absolute;bottom:0;left:0;right:0;padding:13px 16px;background:rgba(7,7,5,.84);display:flex;justify-content:space-between;color:rgba(255,255,255,.55);font-size:.65rem;font-weight:700;}.lr-map-footer i{display:inline-block;width:6px;height:6px;background:#82ce9a;border-radius:50%;margin-right:5px;}
.lr-safety{background:#0b0a07;}.lr-safety-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(40px,9vw,150px);align-items:center;}.lr-safety h2{margin-bottom:20px;}.lr-safety p{color:rgba(255,255,255,.55);font-size:.88rem;line-height:1.7;max-width:380px;}.lr-text-btn{border:0;background:transparent;color:var(--g-200);font-size:.76rem;font-weight:800;cursor:pointer;padding:0;margin-top:18px;}.lr-text-btn span{margin-left:8px;font-size:1rem;}.lr-safety-list{border-top:1px solid rgba(255,255,255,.09);}.lr-safety-list>div{display:flex;align-items:center;gap:17px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.09);}.lr-safety-list b{font-size:.64rem;color:var(--g-300);}.lr-safety-list span{flex:1;}.lr-safety-list strong{display:block;color:#fff;font-size:.82rem;}.lr-safety-list small{display:block;color:rgba(255,255,255,.43);font-size:.68rem;margin-top:3px;}.lr-safety-list i{font-style:normal;color:#82ce9a;border:1px solid rgba(130,206,154,.28);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;}
.lr-final-cta{background:radial-gradient(circle at 80% 50%,rgba(201,162,39,.13),transparent 38%),#0c0b08;}.lr-final-inner{display:flex;justify-content:space-between;align-items:center;gap:35px;border-top:1px solid rgba(201,162,39,.22);padding-top:45px;}.lr-final-actions{display:flex;align-items:center;gap:22px;}.lr-final-actions .lr-text-btn{margin:0;}
.lr-modal{position:fixed;inset:0;z-index:9990;display:none;align-items:center;justify-content:center;padding:18px;}.lr-modal.is-open{display:flex;}.lr-modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);}.lr-modal-box{position:relative;z-index:1;width:min(100%,570px);max-height:90dvh;overflow:auto;border:1px solid rgba(201,162,39,.32);border-radius:20px;background:linear-gradient(160deg,#1c170a,#0d0c08);padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.65);}.lr-modal-close{position:absolute;top:12px;right:15px;border:0;background:transparent;color:rgba(255,255,255,.54);font-size:1.8rem;cursor:pointer;}.lr-modal h3{font-size:1.6rem;margin:3px 0 7px;}.lr-modal p{font-size:.82rem;color:rgba(255,255,255,.56);}.lr-modal-note{display:flex;gap:10px;padding:12px;border-radius:10px;background:rgba(201,162,39,.08);color:var(--g-200);font-size:.69rem;line-height:1.5;margin:18px 0;}.lr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}.lr-form-grid label{font-size:.68rem;font-weight:800;color:rgba(255,255,255,.55);}.lr-form-grid input,.lr-form-grid select{display:block;width:100%;margin-top:6px;}.lr-form-grid .full{grid-column:1/-1;}.lr-form-submit{margin-top:18px;width:100%;}.lr-qr-box{display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:center;padding:20px 0;}.lr-qr-art{width:110px;height:110px;border:8px solid #fff;border-radius:6px;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 50%/12px 12px;image-rendering:pixelated;}.lr-qr-box strong{display:block;color:#fff;margin-bottom:7px;}.lr-qr-box p{margin:0;font-size:.75rem;}.lr-stage{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;}.lr-stage span{font-size:.64rem;padding:8px 9px;border-radius:7px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.43);}.lr-stage span.done{color:#82ce9a;background:rgba(130,206,154,.1);}.lr-active-card{border:1px solid rgba(130,206,154,.35);background:rgba(130,206,154,.06);border-radius:13px;padding:16px;margin-top:17px;}.lr-active-card strong{display:block;color:#b8f1c7;font-size:.76rem;}.lr-active-card p{margin:5px 0 0;font-size:.7rem;}.lr-modal-actions{display:flex;gap:10px;margin-top:16px;}.lr-modal-actions>*{flex:1;}
.lr-toast{position:fixed;z-index:10000;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#f1dda0;color:#17130a;padding:12px 18px;border-radius:10px;font-size:.76rem;font-weight:800;box-shadow:0 10px 32px rgba(0,0,0,.35);transition:.2s ease;white-space:nowrap;}.lr-toast.is-visible{opacity:1;transform:translate(-50%,0);}
@media(max-width:980px){.lr-hero-grid{grid-template-columns:1fr;min-height:auto;gap:15px}.lr-hero-copy{padding-bottom:30px}.lr-hero-card{max-width:580px;margin:0 auto 58px;width:100%;}.lr-board{grid-template-columns:repeat(2,1fr)}.lr-flow-grid{grid-template-columns:repeat(3,1fr);gap:12px}.lr-flow-arrow{display:none}.lr-live-grid,.lr-safety-grid{grid-template-columns:1fr}.lr-live-map{max-width:650px}.lr-safety-grid{gap:45px}.lr-stat-row{grid-template-columns:repeat(2,1fr)}.lr-stat-row div:nth-child(2){border-right:0}.lr-stat-row div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}}
@media(max-width:620px){.lr-page main{padding-top:60px}.lr-hero{min-height:0}.lr-hero h1{font-size:clamp(2.9rem,15vw,4.4rem)!important}.lr-hero-copy{padding-top:58px}.lr-hero-card{transform:none;padding:18px;margin-bottom:28px}.lr-mini-meta,.lr-plate-strip{align-items:flex-start;flex-direction:column;gap:6px}.lr-stat-row{margin-inline:16px}.lr-stat-row div{padding:15px 14px;min-height:76px}.lr-stat-row b{font-size:1.05rem}.lr-stat-row span{font-size:.64rem}.lr-section-head{display:block}.lr-section-head p{margin-top:14px}.lr-board-tools{flex-wrap:wrap}.lr-search{flex-basis:100%;height:48px}.lr-board-tools select,.lr-filter-btn{height:43px;flex:1}.lr-board{grid-template-columns:1fr}.lr-flow-grid{grid-template-columns:repeat(2,1fr)}.lr-flow-card{min-height:120px}.lr-live-map{height:250px}.lr-final-inner{display:block}.lr-final-actions{margin-top:25px;flex-wrap:wrap}.lr-modal-box{padding:23px 18px}.lr-form-grid{grid-template-columns:1fr}.lr-form-grid .full{grid-column:auto}.lr-qr-box{grid-template-columns:90px 1fr}.lr-qr-art{width:90px;height:90px}.lr-trust-line{gap:10px}.lr-hero-actions .btn{flex:1;min-width:0}.lr-card-topline{font-size:.55rem}.lr-chain-step{font-size:.56rem}}

/* ══════════════════════════════════════════════════════════════════════
   LION TRANSPORT — THE WORKING SCREENS

   Added on top of the landing styles above, which they reuse rather than
   duplicate: lr-hero, lr-board, lr-route, lr-plate-strip, lr-modal,
   lr-tabs and lr-toast are all defined once, further up this file, and
   the state names (is-open, is-active, is-visible) are that file's too.
   Everything new here is prefixed lt-.
   ══════════════════════════════════════════════════════════════════════ */

.lt-view[hidden]{display:none!important}
.lt-view .container{padding-top:26px;padding-bottom:56px}

.lt-head{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.lt-head h2{font-family:Cinzel,serif;font-size:clamp(1.7rem,6vw,2.4rem);margin:0}
.lt-back{align-self:flex-start;border:0;background:transparent;color:rgba(255,255,255,.5);font-size:.78rem;font-weight:700;cursor:pointer;padding:6px 0}
.lt-back:hover{color:var(--gold,#c9a227)}
.lt-sub{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42);margin:26px 0 10px}

.lt-note{font-size:.76rem;line-height:1.55;color:rgba(255,255,255,.52);margin:10px 0}
.lt-ok{font-size:.85rem;font-weight:700;color:#7fd39b;margin:12px 0;line-height:1.7}
.lt-bad{font-size:.85rem;font-weight:700;color:#e9806f;margin:12px 0;line-height:1.7}
.lt-linkish{border:0;background:transparent;color:var(--gold,#c9a227);font-size:.75rem;font-weight:800;cursor:pointer;padding:4px 0;text-decoration:underline}
.lt-danger{color:#e9806f}
.lr-toast.lt-bad-toast{background:#e9806f;color:#160b08}

.lt-panel{border:1px solid rgba(201,162,39,.2);border-radius:18px;background:linear-gradient(160deg,rgba(28,23,10,.9),rgba(13,12,8,.9));padding:22px;margin-bottom:18px}
.lt-panel h3{font-family:Cinzel,serif;font-size:1.2rem;margin:0 0 10px}
.lt-panel h4{font-size:.9rem;margin:0 0 8px}
.lt-emergency{border-color:rgba(233,128,111,.4)}

/* ── the two services, kept visually apart on purpose ─────────────── */
.lt-services{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:26px}
.lt-service{position:relative;border:1px solid rgba(201,162,39,.24);border-radius:20px;padding:26px 24px;background:linear-gradient(160deg,rgba(28,23,10,.92),rgba(13,12,8,.92))}
.lt-service-share{border-color:rgba(201,162,39,.45)}
.lt-service h2{font-family:Cinzel,serif;font-size:1.5rem;margin:0 0 10px}
.lt-service>p{font-size:.84rem;line-height:1.6;color:rgba(255,255,255,.66)}
.lt-service-tag{position:absolute;top:18px;right:20px;font-size:.64rem;font-weight:900;letter-spacing:.1em;color:rgba(201,162,39,.5)}
.lt-service-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

.lt-ticks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.lt-ticks li{position:relative;padding-left:22px;font-size:.78rem;color:rgba(255,255,255,.62)}
.lt-ticks li::before{content:"\2713";position:absolute;left:0;color:var(--gold,#c9a227);font-weight:900}
.lt-ticks-2{grid-template-columns:repeat(3,1fr)}

.lt-quicklinks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:50px}
.lt-quick{text-align:left;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.025);padding:16px;cursor:pointer;color:#fff}
.lt-quick b{display:block;font-size:.9rem;margin-bottom:4px}
.lt-quick span{font-size:.72rem;color:rgba(255,255,255,.45)}
.lt-quick:hover{border-color:rgba(201,162,39,.45)}

/* ── forms ────────────────────────────────────────────────────────── */
.lt-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.lt-form-tight{grid-template-columns:1fr 1fr;margin-top:10px}
.lt-form fieldset{grid-column:1/-1;border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0}
.lt-form legend{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold,#c9a227);padding:0 8px}
.lt-form label,.lt-filters label{display:flex;flex-direction:column;gap:6px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.44)}
.lt-form small{font-weight:500;letter-spacing:0;text-transform:none;font-size:.72rem;color:rgba(255,255,255,.4)}
.lt-form input,.lt-form select,.lt-form textarea,.lt-filters input{border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.03);color:#fff;padding:11px 12px;font-family:Inter,sans-serif;font-size:.86rem;font-weight:500;letter-spacing:0;text-transform:none;width:100%}
.lt-form input:focus,.lt-form select:focus,.lt-form textarea:focus,.lt-filters input:focus{outline:0;border-color:rgba(201,162,39,.6)}
.lt-form .lt-wide,.lt-form fieldset .lt-wide{grid-column:1/-1}
.lt-form button[type=submit]{grid-column:1/-1;justify-self:start}
.lt-checks{grid-template-columns:repeat(3,1fr)}
.lt-check{flex-direction:row!important;align-items:center;gap:9px!important;text-transform:none!important;letter-spacing:0!important;font-size:.8rem!important;font-weight:600!important;color:rgba(255,255,255,.7)!important}
.lt-check input{width:auto!important}

.lt-filters{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:11px;align-items:end;margin-bottom:22px}

.lt-vehicle-strip{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid rgba(201,162,39,.3);border-radius:12px;padding:12px 14px;font-size:.8rem;background:rgba(201,162,39,.06)}
.lt-vehicle-strip span{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.lt-vehicle-strip strong{color:#fff;font-weight:700}
.lt-vehicle-strip em{font-style:normal;color:var(--gold,#c9a227);letter-spacing:.08em}

/* ── ride cards ───────────────────────────────────────────────────── */
.lt-card{border:1px solid rgba(255,255,255,.09);border-radius:18px;background:linear-gradient(165deg,rgba(24,21,12,.9),rgba(12,11,7,.9));padding:18px;display:flex;flex-direction:column;gap:13px}
.lt-card:hover{border-color:rgba(201,162,39,.4)}
.lt-card-top{display:flex;align-items:center;gap:10px}
.lt-card-top>div{flex:1;min-width:0;display:flex;flex-direction:column}
.lt-card-top b{font-size:.88rem}
.lt-il{font-size:.68rem;color:var(--gold,#c9a227);letter-spacing:.08em;font-weight:800}
.lt-code{font-size:.62rem;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.34);white-space:nowrap}
.lt-card-actions{display:flex;gap:9px;margin-top:2px}
.lt-card-actions .btn{flex:1}

.lt-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;border:1px solid rgba(201,162,39,.35)}
.lt-av-blank{display:grid;place-items:center;background:rgba(201,162,39,.16);color:var(--gold,#c9a227);font-weight:900;font-size:.9rem}

.lt-state{font-size:.64rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--gold,#c9a227)}

/* ── my rides ─────────────────────────────────────────────────────── */
.lt-rides{display:grid;gap:9px}
.lt-rideline{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;text-align:left;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.02);padding:14px;cursor:pointer;color:#fff}
.lt-rideline:hover{border-color:rgba(201,162,39,.42)}
.lt-rideline b{font-size:.86rem}
.lt-rideline span{font-size:.72rem;color:rgba(255,255,255,.45)}
.lt-role{font-size:.6rem!important;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:rgba(201,162,39,.75)!important}

.lt-req{display:flex;align-items:flex-start;gap:12px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.02);padding:15px;margin-bottom:9px}
.lt-req>div{flex:1;min-width:0}
.lt-req p{font-size:.8rem;color:rgba(255,255,255,.68);margin:6px 0}
.lt-req small{font-size:.7rem;color:rgba(255,255,255,.4)}
.lt-req-ok{border-color:rgba(127,211,155,.32)}
.lt-req-actions{display:flex;flex-direction:column;gap:7px;flex:none}

/* ── one ride ─────────────────────────────────────────────────────── */
.lt-ridehead h2{font-family:Cinzel,serif;font-size:1.5rem;margin:14px 0 6px}
.lt-meet{font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.72);border-left:2px solid var(--gold,#c9a227);padding-left:12px;margin:14px 0}
.lt-flowbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}

/* §19 — the vehicle a passenger is asked to confirm. Big on purpose:
   this is read at a kerb, at night, in a hurry. */
.lt-confirm{border:1px solid rgba(201,162,39,.35);border-radius:14px;padding:18px;margin:16px 0;background:rgba(201,162,39,.05)}
.lt-bigvehicle{font-size:1.25rem;font-weight:800;line-height:1.5;margin:10px 0;color:#fff}
.lt-bigvehicle span{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.6)}
.lt-bigvehicle em{font-style:normal;font-size:1.5rem;letter-spacing:.16em;color:var(--gold,#c9a227)}
.lt-confirm-actions{display:flex;flex-direction:column;gap:9px;margin-top:14px}

/* ── vehicles ─────────────────────────────────────────────────────── */
.lt-vehicles{display:grid;gap:10px;margin-bottom:26px}
.lt-vehicle{display:flex;justify-content:space-between;gap:14px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.02);padding:16px}
.lt-vehicle.on{border-color:rgba(201,162,39,.45)}
.lt-vehicle>div{display:flex;flex-direction:column;gap:3px}
.lt-vehicle b{font-size:.95rem}
.lt-vehicle span{font-size:.74rem;color:rgba(255,255,255,.45)}
.lt-plate-full{font-family:ui-monospace,monospace;letter-spacing:.14em;color:#fff!important;font-size:.9rem!important}
.lt-plate-pub{font-size:.68rem!important;color:rgba(255,255,255,.34)!important}
.lt-vehicle-side{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:6px}
.lt-active{font-size:.66rem!important;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--gold,#c9a227)!important}
.lt-status{font-size:.66rem!important;font-weight:800;color:rgba(255,255,255,.5)!important}
.lt-status-verified{color:#7fd39b!important}
.lt-status-under_review{color:#e6b45e!important}
.lt-status-suspended,.lt-status-rejected{color:#e9806f!important}

/* ── QR, drawn and read ───────────────────────────────────────────── */
.lt-qr{display:grid;place-items:center;padding:20px;background:#fff;border-radius:16px;margin:14px 0;min-height:240px}
.lt-qr img,.lt-qr canvas{display:block}
.lt-scan{width:100%;max-width:340px;margin:14px auto;border-radius:16px;overflow:hidden;background:#000;min-height:220px}
.lt-scan video{width:100%!important;height:auto!important;display:block}

/* ── safety ───────────────────────────────────────────────────────── */
.lt-safety-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.lt-safety-tile{display:block;text-align:left;text-decoration:none;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.025);padding:17px;cursor:pointer;color:#fff}
.lt-safety-tile:hover{border-color:rgba(233,128,111,.5)}
.lt-safety-tile b{font-size:.84rem}

/* ── the phone, which is where this module is actually used ───────── */
@media(max-width:820px){
  .lt-services,.lt-quicklinks,.lt-safety-grid{grid-template-columns:1fr}
  .lt-ticks-2{grid-template-columns:repeat(2,1fr)}
  .lt-filters{grid-template-columns:1fr 1fr}
  .lt-filters .btn{grid-column:1/-1}
  .lt-form,.lt-form-tight,.lt-form fieldset,.lt-checks{grid-template-columns:1fr}
  .lt-rideline{grid-template-columns:1fr auto;row-gap:4px}
  .lt-req{flex-wrap:wrap}
  .lt-req-actions{flex-direction:row;width:100%}
  .lt-req-actions .btn{flex:1}
  .lt-vehicle{flex-direction:column}
  .lt-vehicle-side{align-items:flex-start;text-align:left}
  .lt-flowbar .btn{flex:1 1 100%}
}

/* The landing headline is three lines here, not two. Codex's hero clamp
   (15vw at <=620px) was sized for "Move together. / Travel safer." and
   with a third line it filled the whole first screen on a phone — the
   two services, which are the point of the page, were entirely below
   the fold. Scoped to this page's home hero so the rest of the module's
   headings are untouched. */
@media(max-width:620px){
  .lt-view[data-view="home"] .lr-hero h1{font-size:clamp(2rem,9.5vw,2.9rem)!important;line-height:1.08}
  .lt-view[data-view="home"] .lr-hero-copy{padding-top:34px}
}

/* `hidden` IS SET IN JAVASCRIPT AND MUST WIN.
   The attribute's display:none comes from the user-agent stylesheet and
   loses to any class that sets display — so `.lt-form{display:grid}`
   quietly kept the Offer form on screen underneath its own "sign in
   first" gate, and the Register-a-vehicle form the same way. Caught in
   the browser, not by a test: both looked hidden in the code. */
.lt-form[hidden],.lt-view[hidden],[hidden]{display:none!important}

/* SIX TABS DO NOT FIT ON A 320px PHONE, and .lr-tabs is a flex row that
   does not wrap — so My Rides pushed the whole document to 562px and the
   page scrolled sideways. Measured at 320x700, which is a real phone and
   not a hypothetical one.

   The strip scrolls, not the page. Wrapping to two rows was the other
   option and it is worse: the tab you want moves to a different line
   depending on how long the words are in the language you read. */
.lt-view[data-view="rides"] .lr-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lt-view[data-view="rides"] .lr-tabs::-webkit-scrollbar{display:none}
.lt-view[data-view="rides"] .lr-tabs button{flex:0 0 auto;white-space:nowrap}

.lt-blockrow{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}

/* The consequence, said plainly rather than buried in terms nobody
   opens. Warm red, not alarm red: this is a statement of policy, not a
   warning that something is wrong right now. */
.lt-warn{font-size:.8rem;line-height:1.6;color:#f0b49c;border-left:2px solid #d98b6a;padding-left:12px;margin:12px 0}
.lt-consequence{border-color:rgba(217,139,106,.38)}
.lt-consequence b{color:#f0b49c}

/* ── RIDE CONTRIBUTION (§10, §11, §14) ───────────────────────────────
   Money-adjacent wording gets its own quiet, non-commercial look: no
   price tags, no green "buy" colouring. A contribution is not a fare
   and it should not be styled like one. */
.lt-radio{flex-direction:row!important;align-items:flex-start;gap:11px!important;text-transform:none!important;letter-spacing:0!important;padding:13px;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer}
.lt-radio:hover{border-color:rgba(201,162,39,.4)}
.lt-radio input{width:auto!important;margin-top:3px}
.lt-radio span{display:flex;flex-direction:column;gap:3px}
.lt-radio b{font-size:.88rem;color:#fff;font-weight:700}
.lt-radio small{font-size:.76rem;color:rgba(255,255,255,.5);font-weight:500}

.lt-costs{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:6px;padding:16px;border:1px solid rgba(201,162,39,.24);border-radius:13px;background:rgba(201,162,39,.04)}
.lt-costcalc{border-top:1px solid rgba(255,255,255,.1);padding-top:12px;margin-top:2px}

.lt-costline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;font-size:.82rem;color:rgba(255,255,255,.66)}
.lt-costline b{color:#fff;font-weight:700;white-space:nowrap}
.lt-costline-big{border-top:1px solid rgba(255,255,255,.12);margin-top:6px;padding-top:10px;font-size:.92rem}
.lt-costline-big b{color:var(--gold,#c9a227);font-size:1.05rem}

.lt-contrib{display:flex;flex-direction:column;gap:2px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;border-radius:10px}
.lt-contrib-free{background:rgba(127,211,155,.1);border:1px solid rgba(127,211,155,.3);color:#7fd39b}
.lt-contrib-share{background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.3);color:var(--gold,#c9a227)}
.lt-contrib b{font-size:.78rem;letter-spacing:0;text-transform:none;color:#fff;font-weight:700}

.lt-contribpanel{border:1px solid rgba(201,162,39,.26);border-radius:13px;padding:16px;margin:14px 0;background:rgba(201,162,39,.04)}
.lt-contribpanel-free{border-color:rgba(127,211,155,.28);background:rgba(127,211,155,.04)}
.lt-contribpanel h4{margin:0 0 6px;font-size:.95rem}
.lt-contribpanel>p{font-size:.8rem;line-height:1.55;color:rgba(255,255,255,.62);margin:0 0 10px}

.lt-ack{border:1px solid rgba(201,162,39,.3);border-radius:11px;padding:12px;background:rgba(201,162,39,.05)}

/* §14 — a changed estimate is an interruption, so it looks like one. */
.lt-costchanged{border:1px solid #d98b6a;border-radius:13px;padding:16px;margin:14px 0;background:rgba(217,139,106,.07)}
.lt-costchanged h4{margin:0 0 8px;color:#f0b49c;font-size:.95rem}
.lt-costchanged p{font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.75);margin:0 0 8px}

@media(max-width:820px){ .lt-costs{grid-template-columns:1fr} }

/* A feature that is not open yet says so in a calm voice — this is not
   an error state, it is a "not yet". */
.lt-closed{border-left:2px solid rgba(201,162,39,.5);padding-left:11px;color:rgba(255,255,255,.62)}

/* ══════════════════════════════════════════════════════════
   JOIN LION TRANSPORT — THE TWO DOORS

   Two panels side by side on a wide screen, stacked on a phone. They
   are given the SAME weight on purpose: Pro is not a premium tier and
   Ride Share is not a consolation prize, they are two different things
   a member might want, and a layout that made one look like the
   upgrade would be arguing a case the product does not make.

   Appended, never inserted — Codex's landing styles above this line
   are untouched.
   ══════════════════════════════════════════════════════════ */

.lt-lede {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--white-muted, #9a9a9a);
}

.lt-doors {
  display: grid;
  gap: 18px;
  /* ONE COLUMN UNTIL THERE IS ROOM FOR TWO REAL ONES. 420px each is
     the width at which the Pro form's labels stop wrapping mid-phrase;
     below that, two columns is worse than one. */
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .lt-doors { grid-template-columns: 1fr 1fr; align-items: start; }
}

.lt-door {
  position: relative;
  padding: 24px 20px 22px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
}
.lt-door h3 { margin: 0 0 10px; font-size: 1.32rem; line-height: 1.25; }

/* The A / B marks, matching the two service cards on the landing so
   the same service is the same letter on both screens. */
.lt-door-tag {
  position: absolute; top: 16px; right: 18px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 900;
  color: var(--gold, #d4af37);
  border: 1px solid rgba(212, 175, 55, .35);
  background: rgba(212, 175, 55, .08);
}

.lt-door-lede {
  margin: 0 0 14px;
  font-size: .9rem; line-height: 1.6;
  color: var(--white-muted, #9a9a9a);
}

/* THE HONEST HEADLINE ON THE PRO PANEL. It is styled as a warning and
   not as a badge, because "not open yet" is information the reader
   needs before they read anything else — see PRO_STAGE. */
.lt-door-flag {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: .82rem; font-weight: 800; line-height: 1.45;
  color: #f0c674;
  background: rgba(240, 198, 116, .09);
  border: 1px solid rgba(240, 198, 116, .24);
}

/* "Active", "Submitted" — a state line with a dot that says which. */
.lt-active-line {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  font-size: .92rem;
  color: var(--white, #fff);
}
.lt-dot-live, .lt-dot-wait {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.lt-dot-live { background: #46c46b; box-shadow: 0 0 0 3px rgba(70, 196, 107, .16); }
.lt-dot-wait { background: #f0c674; box-shadow: 0 0 0 3px rgba(240, 198, 116, .16); }

/* The receipt: what we hold about you, in two columns. */
.lt-kv {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: .86rem;
}
.lt-kv dt {
  font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  font-size: .66rem; padding-top: 3px;
  color: var(--white-muted, #9a9a9a);
}
.lt-kv dd { margin: 0; color: var(--white, #fff); }

.lt-fieldset {
  margin: 4px 0 6px; padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
}
.lt-fieldset legend {
  padding: 0 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--white-muted, #9a9a9a);
}

/* The promise checkboxes are long sentences, not one-word labels, so
   the box stays at the top of the text instead of centring against a
   four-line paragraph. */
.lt-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 2px 0; font-size: .84rem; line-height: 1.55;
}
.lt-check input[type="checkbox"] {
  margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0;
  accent-color: var(--gold, #d4af37);
}

/* ══ THE RIDE POSTER, ON A PROFILE ════════════════════════════════
   il-transport-link.js draws this into the profile page, where none
   of the Transport stylesheet is loaded — so everything it needs is
   inline there, and this block exists only for the Transport page's
   own copy of the card. */
.lt-door .btn + .btn { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════
   LION TRANSPORT PRO — THE COMING SOON NOTICE

   Every string in here comes from PRO_STAGE in transport-core.js. The
   styling exists to make the regulatory position READ like the most
   important thing on the panel, because it is: somebody who skims this
   and stops must still come away knowing the service is not running.
   ══════════════════════════════════════════════════════════ */

/* "Interested in joining?" — a heading inside a panel, not a section
   title, so it sits below the notice rather than competing with it. */
.lt-door-sub {
  margin: 16px 0 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--white, #fff);
}

/* The closing strip. Gold, quiet, and always carrying BOTH lines —
   "Coming Soon" above and the tagline below — so the word "Verified"
   can never appear on its own. */
.lt-pro-strip {
  margin: 18px 0 0;
  padding: 13px 14px;
  display: grid;
  gap: 3px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, .22);
  background: linear-gradient(180deg, rgba(212, 175, 55, .08), rgba(212, 175, 55, .02));
}
.lt-pro-strip b {
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .4px;
  color: var(--gold, #d4af37);
}
.lt-pro-strip span {
  font-size: .74rem;
  line-height: 1.5;
  color: var(--white-muted, #9a9a9a);
}

/* ══════════════════════════════════════════════════════════
   DECLARATIONS — LICENCE, INSURANCE, REVISIONE

   These are the screens that decide whether somebody may carry a
   passenger, so the states have to be unmistakable at a glance: green
   is declared and in date, amber is running out, red has run out and
   publishing is already refused.
   ══════════════════════════════════════════════════════════ */

.lt-dot-stop {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: #e2574c; box-shadow: 0 0 0 3px rgba(226, 87, 76, .16);
}
.lt-warn { color: #f0c674; font-weight: 800; }

/* The list of things standing between a host and publishing. Not
   styled as an error — it is a to-do list, and every line has a fix. */
.lt-blockers {
  margin: 10px 0 14px; padding: 0 0 0 20px;
  display: grid; gap: 6px;
  font-size: .86rem; line-height: 1.55;
  color: var(--white, #fff);
}
.lt-blockers li::marker { color: #e2574c; }

/* A member's own appeal, read back to them. */
.lt-quote {
  margin: 10px 0; padding: 10px 14px;
  border-left: 3px solid rgba(212, 175, 55, .4);
  font-size: .86rem; line-height: 1.6;
  color: var(--white-muted, #9a9a9a);
}

/* A full-width row inside the two-column .lt-form grid — the long
   declaration checkboxes and their notes must not be squeezed into
   one half of it. */
.lt-form .lt-wide { grid-column: 1 / -1; }

/* Date inputs render as tiny unstyled boxes in a dark theme unless
   they are told otherwise, and a colour-scheme hint is what makes the
   native picker icon visible. */
.lt-form input[type="date"] {
  color-scheme: dark;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════
   THE COMMUNITY TRANSPORT FEED  (§22, §23, §31, §32)

   Two card types that must look RELATED and never be confused. They
   share a shape — identity row, badge, body, one action — and differ
   in exactly two places: the badge colour and the accent edge. That is
   deliberate; making them look like two different products would say
   Lion Transport is two websites, and making them identical would let
   somebody read a commercial advert as a neighbour's spare seat.
   ══════════════════════════════════════════════════════════ */

.lt-feedbar { margin: 18px auto 14px; display: grid; gap: 14px; }
.lt-feedactions { display: flex; flex-wrap: wrap; gap: 9px; }

/* The ALL / RIDE SHARE / TRANSPORT PRO strip. Scrollable rather than
   wrapping — three tabs wrap to two lines at 320px and a two-line tab
   strip reads as a broken layout. */
.lt-tabs {
  display: flex; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.lt-tabs::-webkit-scrollbar { display: none; }
.lt-tab {
  flex: 0 0 auto;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font-size: .82rem; font-weight: 800; white-space: nowrap;
  color: var(--white-muted, #9a9a9a);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
}
.lt-tab.is-active {
  color: #101010;
  background: var(--gold, #d4af37);
  border-color: var(--gold, #d4af37);
}

.lt-feed { display: grid; gap: 14px; margin-bottom: 30px; }

.lt-card {
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .025);
  /* THE ACCENT EDGE IS THE FASTEST SIGNAL of which kind this is —
     faster than the badge, because it is a shape not a word. */
  border-left-width: 3px;
}
.lt-card-share { border-left-color: rgba(212, 175, 55, .55); }
.lt-card-pro   { border-left-color: rgba(96, 165, 250, .55); }

.lt-cardtop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 11px;
}

.lt-feedactor { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.lt-feedav {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06);
}
.lt-feedav img { width: 100%; height: 100%; object-fit: cover; }
/* A BUSINESS IS NOT A FACE. A Pro logo sits in a rounded square, so a
   company is visually never mistaken for a member. */
.lt-feedav.is-pro { border-radius: 10px; }
.lt-av-blank { font-weight: 900; color: var(--gold, #d4af37); }

.lt-feedwho { display: grid; min-width: 0; }
.lt-feedwho b { font-size: .88rem; color: var(--white, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-feedwho span { font-size: .7rem; color: var(--white-muted, #9a9a9a); }

.lt-badge {
  flex-shrink: 0;
  padding: 4px 10px; border-radius: 999px;
  font-size: .6rem; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
  white-space: nowrap;
}
.lt-badge-share { background: rgba(212, 175, 55, .12); color: var(--gold, #d4af37); border: 1px solid rgba(212, 175, 55, .3); }
.lt-badge-pro   { background: rgba(96, 165, 250, .12); color: #8ab4f8; border: 1px solid rgba(96, 165, 250, .3); }

/* Firenze → Bologna. The single most important line on a Ride Share
   card, so it is the largest thing on it. */
.lt-route {
  font-size: 1.12rem; font-weight: 900; line-height: 1.3;
  margin: 0 0 9px; color: var(--white, #fff);
}
.lt-route i { font-style: normal; color: var(--gold, #d4af37); margin: 0 5px; }

.lt-protitle {
  font-size: 1.05rem; font-weight: 900; line-height: 1.35;
  margin: 0 0 9px; color: var(--white, #fff);
}

.lt-kv-tight { margin-bottom: 9px; gap: 4px 12px; }
.lt-cardnote {
  margin: 0 0 10px; font-size: .85rem; line-height: 1.6;
  color: var(--white-muted, #9a9a9a);
  /* Long adverts are clamped so one verbose post cannot own the feed. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ONE image, never a carousel. A fixed aspect keeps the feed's rhythm
   whatever shape somebody uploads. */
.lt-feedimg {
  margin: 0 0 12px; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 9;
}
.lt-feedimg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lt-cardactions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── HELP THE COMMUNITY (§30) ─────────────────────────────────────
   Two cards, visually separate, because they are two different things
   and the whole product depends on nobody confusing them. */
.lt-sectionhead { margin: 26px 0 14px; font-size: 1.4rem; }

.lt-helpgrid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 8px; }
@media (min-width: 820px) { .lt-helpgrid { grid-template-columns: 1fr 1fr; } }

.lt-help {
  padding: 20px 18px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .025);
  border-top-width: 3px;
}
.lt-help-share { border-top-color: rgba(212, 175, 55, .55); }
.lt-help-pro   { border-top-color: rgba(96, 165, 250, .55); }
.lt-help h3 { margin: 0 0 8px; font-size: 1.1rem; }
.lt-help p  { margin: 0 0 13px; font-size: .88rem; line-height: 1.6; color: var(--white-muted, #9a9a9a); }

/* ══════════════════════════════════════════════════════════
   THE FEED MUST BE THE FIRST THING (§22)

   MEASURED, not guessed: at 375 × 812 the hero alone filled the entire
   first screen and the community feed began below the fold. §22 is
   explicit that the first screen should show what the community is
   doing rather than a masthead — so on a phone the hero is compressed
   and the safety-chain card, which is reference material rather than a
   front door, stands down until there is room for it.

   NOTHING IS DELETED. On a laptop the hero and the chain card are
   exactly as Codex designed them; this only applies where the fold is
   actually a problem.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .lr-hero { padding-top: 26px; padding-bottom: 18px; }
  .lr-hero h1 { font-size: 1.85rem; line-height: 1.16; }
  .lr-hero-lede { font-size: .9rem; line-height: 1.55; margin-bottom: 0; }

  /* The safety chain is a promise worth keeping on the page, but it is
     four numbered steps somebody reads once. It moves below the feed
     on a phone rather than standing between a member and the journeys. */
  .lr-hero-card { display: none; }

  .lt-feedbar { margin-top: 12px; }
  .lt-sectionhead { font-size: 1.2rem; margin: 22px 0 11px; }
}

/* Very narrow phones: the three action buttons must not wrap to three
   lines. */
@media (max-width: 380px) {
  .lt-feedactions .btn { flex: 1 1 auto; padding-left: 12px; padding-right: 12px; font-size: .8rem; }
}

/* ══════════════════════════════════════════════════════════
   THE SCANNER SAYS WHAT HAPPENED

   Reported from the first live test: after a successful scan the
   camera stayed open and only a line of text changed, so the host
   could not tell whether it had worked and kept holding the phone up.

   The whole frame now changes colour. Green is spent-and-finished —
   the camera stops and the sheet closes itself, because a one-time
   token cannot be scanned twice and leaving the camera running can
   only produce a confusing second failure. Red is "try again" and the
   camera deliberately stays on.
   ══════════════════════════════════════════════════════════ */
.lt-scan { transition: box-shadow .18s ease, border-color .18s ease; border-radius: 14px; }

.lt-scan.is-done {
  border: 2px solid #46c46b;
  box-shadow: 0 0 0 4px rgba(70, 196, 107, .22);
}
.lt-scan.is-bad {
  border: 2px solid #e2574c;
  box-shadow: 0 0 0 4px rgba(226, 87, 76, .22);
}

/* The result lines, sized to be readable at arm's length — this is
   read by somebody holding a phone up at a kerb, not sitting down. */
.lt-ok, .lt-bad { margin: 10px 0 0; font-size: .95rem; line-height: 1.6; font-weight: 700; }
.lt-ok  { color: #46c46b; }
.lt-bad { color: #e2574c; }

/* ══════════════════════════════════════════════════════════
   BOOKED, PENDING, AND WHOSE CARD THIS IS  (§5, §6)

   §5 asks for "visually noticeable but not dominating". So BOOKED is
   red and SMALL — a status, not a headline. The headline is the
   journey, and it stays the biggest thing on the card.
   ══════════════════════════════════════════════════════════ */
.lt-cardstate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 11px; font-size: .78rem;
}
.lt-seats { color: var(--white-muted, #9a9a9a); font-weight: 700; }

/* THE RED BOOKING INDICATOR. An aggregate count and never a name —
   who is travelling with whom is the most sensitive thing this module
   could put on a public card. */
.lt-booked {
  padding: 2px 9px; border-radius: 999px;
  font-weight: 900; letter-spacing: .3px;
  color: #ff6b5e;
  background: rgba(226, 87, 76, .12);
  border: 1px solid rgba(226, 87, 76, .32);
}
.lt-pending {
  padding: 2px 9px; border-radius: 999px; font-weight: 800;
  color: #f0c674; background: rgba(240, 198, 116, .1);
  border: 1px solid rgba(240, 198, 116, .28);
}

/* The viewer's own line — shown to that one person and nobody else. */
.lt-yours {
  width: 100%; margin-top: 2px;
  font-weight: 800; color: #46c46b;
}
.lt-yours-wait { color: #f0c674; }

.btn-booked {
  background: rgba(70, 196, 107, .14);
  border: 1px solid rgba(70, 196, 107, .4);
  color: #46c46b;
}
.lt-cardactions .btn[disabled] { opacity: .55; cursor: default; }

/* ── PAST RIDES ───────────────────────────────────────────────────
   Quieter than a live card, because it is a record rather than an
   invitation. */
.lt-card-past { border-left-color: rgba(255, 255, 255, .18); opacity: .92; }
.lt-card-past.is-cancelled { border-left-color: rgba(226, 87, 76, .4); }
.lt-route-past { font-size: 1rem; }
.lt-badge-done      { background: rgba(70, 196, 107, .1);  color: #46c46b; border: 1px solid rgba(70, 196, 107, .28); }
.lt-badge-cancelled { background: rgba(226, 87, 76, .1);   color: #e2574c; border: 1px solid rgba(226, 87, 76, .28); }