@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');:root{--navy:#1f1b1a;--blue:#b22c23;--ink:#2a2422;--muted:#6f5a58;--line:#ded6d1;--green:#496b55;--red:#8f2b2b;--brand-red:#b22c23;--brand-burgundy:#6f2d2e;--brand-black:#1f1b1a;--brand-paper:#f3f0ea}*{box-sizing:border-box}body{margin:0;background:#eef1f2;color:var(--ink);font-family:"DM Sans",sans-serif}.hidden{display:none!important}h1,h2{font-family:"Space Grotesk"}h2{font-size:26px}.eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:700;color:#65869c;margin-bottom:10px}.muted{color:var(--muted);font-size:12px;line-height:1.6}header{height:64px;background:var(--navy);color:white;display:flex;align-items:center;padding:0 5%;gap:25px;position:sticky;top:0;z-index:20}header>b{font-family:"Space Grotesk";margin-right:auto}nav{display:flex;gap:22px}nav a{color:#dbe4e9;text-decoration:none;font-size:10px}.account{display:flex;gap:10px;align-items:center;font-size:10px}.account button{background:transparent;border:1px solid #71818c;color:white;border-radius:6px;padding:6px 9px}.auth-page{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;background:#061824 url("assets/lngshot-waving-flag-background.gif") center center / cover no-repeat}.auth-page::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,24,36,.58),rgba(7,27,42,.38) 55%,rgba(6,24,36,.55));z-index:0}.auth-wrap{width:min(460px,92vw);position:relative;z-index:1}.auth-brand{color:white;font:700 21px "Space Grotesk";margin-bottom:18px}.auth-card{background:white;border-radius:14px;padding:30px;box-shadow:0 30px 80px #0005}.auth-card h1{font-size:34px;margin:0 0 6px}.tabs{display:grid;grid-template-columns:1fr 1fr;background:#eef1f2;padding:3px;border-radius:7px;margin:22px 0}.tab{border:0;padding:10px;border-radius:6px;background:none;font-weight:700;color:#66737b}.tab.active{background:white;box-shadow:0 2px 8px #0001;color:var(--navy)}label{font-size:9px;font-weight:700;color:#65727a;display:block;margin:11px 0;letter-spacing:.7px}label input{display:block;width:100%;padding:11px;border:1px solid #d4dce0;border-radius:7px;margin-top:6px}.dark{background:var(--navy);color:white;border:0;padding:13px;border-radius:8px;font-weight:700;cursor:pointer}.full{width:100%}.demo{display:block;width:100%;background:none;border:0;color:#36799c;font-size:10px;padding:7px}.demo.admin{color:#8b5757}.auth-note{font-size:9px;color:#879299;text-align:center;margin-top:18px}.hero{max-width:1200px;margin:22px auto;padding:50px 7%;min-height:430px;border-radius:14px;background:linear-gradient(110deg,#061824,#0c2d43 65%,#274d62);color:white;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}.hero h1{font-size:62px;line-height:.92;letter-spacing:-3px;margin:0 0 20px}.hero h1 i{font-weight:500}.hero p{max-width:570px;color:#cedae1;font-size:13px;line-height:1.6}.light{border:0;border-radius:8px;padding:13px 18px;background:#f5f5f1;color:var(--navy);font-weight:700}.hero-passport{width:190px;height:270px;background:#0a2031;border-radius:8px;box-shadow:0 20px 45px #0007;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transform:rotate(5deg);margin-right:7%}.hero-passport span{letter-spacing:3px;font-size:12px}.hero-passport b{text-align:center;letter-spacing:2px}.hero-passport small{font-size:8px;letter-spacing:2px}.card{max-width:1200px;margin:22px auto;background:white;border:1px solid var(--line);border-radius:13px;padding:26px;box-shadow:0 12px 35px #1f1b1a0b}.about h2{max-width:650px}.about-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:20px 0}.about-grid div{border:1px solid var(--line);padding:13px;border-radius:8px;font-size:10px}.title-row{display:flex;justify-content:space-between;align-items:start}.passport-id{text-align:right;font-size:8px;color:var(--muted)}.passport-id b{font-size:13px;color:var(--ink)}.info{display:flex;gap:45px;border-block:1px solid var(--line);padding:17px 0;margin:20px 0}.info div{display:flex;flex-direction:column;gap:4px}.info small{font-size:8px;color:var(--muted)}.info b{font-size:12px}.info .streak{margin-left:auto}.progress-label{display:flex;justify-content:space-between;font-size:10px}.bar{height:7px;background:#e7ecef;border-radius:8px;overflow:hidden;margin:8px 0 20px}.bar i{display:block;height:100%;background:#347ba5;width:0}.grid{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}.stamp{height:75px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#fafcfc}.stamp small{font-size:8px;color:var(--muted)}.stamp.earned{border-color:#87adc5;background:#f3f9fc}.stamp .mini{width:34px;height:34px;border:2px solid var(--blue);border-radius:50%;display:grid;place-items:center;font-size:7px;color:var(--blue);font-weight:700}.split{max-width:1200px;margin:22px auto;display:grid;grid-template-columns:1.05fr .95fr;gap:22px}.split .card{margin:0}.mission-box{background:#f0f6fa;border-radius:8px;padding:15px;margin:18px 0}.mission-box small{display:block;font-size:8px;color:var(--muted)}.mission-box b{display:block;margin:5px 0;font-size:13px}.mission-box span{font-size:9px;color:var(--muted)}.upload{height:140px;border:1.5px dashed #b9c3c9;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.upload input{display:none}.upload strong{font-size:26px;color:#4d7187}.upload b{font-size:12px}.upload span{font-size:9px;color:var(--muted)}.note{font-size:9px;color:var(--muted)}.steps{border:1px solid var(--line);border-radius:9px;padding:5px 15px}.steps>div{display:grid;grid-template-columns:30px 1fr;column-gap:10px;padding:15px 0;border-bottom:1px solid #edf0f1}.steps>div:last-child{border:0}.steps i{grid-row:span 2;width:27px;height:27px;border-radius:50%;background:#edf0f2;display:grid;place-items:center;font-style:normal}.steps .active i{background:#d9eef9;color:#236b9b}.steps .approved i{background:#d9f1e6;color:var(--green)}.steps span{font-size:9px;color:var(--muted)}.reason{font-size:10px;color:#4d6572;min-height:15px}.stamp-banner{max-width:1200px;margin:22px auto;background:var(--navy);color:white;border-radius:13px;padding:30px 7%;display:flex;align-items:center;gap:45px}.stamp{width:165px;height:165px;border:3px solid #4d90b9;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#70acd0;transform:rotate(-6deg);text-align:center;flex:none}.stamp b{font-size:38px}.stamp span,.stamp small{font-size:9px;letter-spacing:1px}.rules ol{line-height:2;font-size:11px}.faq details{border-top:1px solid var(--line);padding:13px 0;font-size:11px}.faq summary{font-weight:700;cursor:pointer}.faq p{color:var(--muted);line-height:1.5}.privacy p{font-size:11px;color:#66747d;line-height:1.6}footer{background:var(--navy);color:#b4c3cc;padding:25px 7%;display:flex;justify-content:space-between;font-size:10px}.admin-tag{background:#d9eef9;color:#24688f;padding:3px 6px;border-radius:4px;font-size:8px}.admin-hero{max-width:1200px;margin:22px auto;background:var(--navy);color:white;border-radius:13px;padding:45px 7%;display:flex;justify-content:space-between;align-items:center}.admin-hero h1{font-size:52px;line-height:.9;margin:0}.admin-hero p{color:#c5d3da;max-width:600px;font-size:12px;line-height:1.5}.pending-big{width:145px;height:145px;border:2px solid #4b7791;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.pending-big b{font:700 42px "Space Grotesk"}.pending-big span{font-size:8px;letter-spacing:1px;color:#a9c0cc}.stats{max-width:1200px;margin:20px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stats .card{margin:0}.stats small{font-size:8px;color:var(--muted)}.stats b{display:block;font:700 27px "Space Grotesk";margin-top:5px}.submission{border:1px solid var(--line);border-radius:9px;padding:17px;margin-top:16px}.submission-head{display:flex;justify-content:space-between}.submission-head div{display:flex;flex-direction:column;gap:3px}.submission-head span{font-size:9px;color:var(--muted)}.submission-head>strong{font-size:9px;color:#367ba2}.proof{display:flex;gap:15px;margin:15px 0}.proof-file{width:200px;height:110px;background:#e9eef0;border-radius:7px;display:grid;place-items:center;text-align:center;font-weight:700;font-size:12px}.proof-file small{font-weight:400;font-size:8px}.proof>div:last-child{display:flex;flex-direction:column;gap:5px}.proof>div:last-child small{font-size:8px;color:var(--muted)}.proof>div:last-child b{font-size:12px}.proof>div:last-child span{font-size:9px;color:var(--muted)}.actions{display:flex;gap:7px}.actions button{border:0;padding:10px 13px;border-radius:7px;font-size:9px;font-weight:700;cursor:pointer}.approve{background:#d8f1e6;color:var(--green)}.reject{background:#f7e5e5;color:var(--red)}.empty{padding:28px;text-align:center;background:#edf8f2;border-radius:8px;color:#51705e;font-size:11px}.member{display:grid;grid-template-columns:1fr 70px;padding:12px 0;border-bottom:1px solid #edf0f1}.member div{display:flex;flex-direction:column;gap:3px}.member span{font-size:9px;color:var(--muted)}.mission-list{border-top:1px solid var(--line)}.mission-row{display:grid;grid-template-columns:45px 100px 110px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid #edf0f1;font-size:9px;align-items:center}.mission-row strong{color:#32779b}.refresh{border:1px solid var(--line);background:white;padding:8px;border-radius:6px}#toast{position:fixed;right:20px;bottom:20px;background:var(--navy);color:white;padding:12px 15px;border-radius:8px;font-size:10px;opacity:0;transform:translateY(20px);transition:.2s}#toast.show{opacity:1;transform:none}
@media(max-width:800px){nav{display:none}.hero{margin:12px 10px;min-height:560px}.hero-passport{position:absolute;right:-50px;bottom:20px;opacity:.35}.about-grid{grid-template-columns:1fr 1fr}.grid{grid-template-columns:repeat(5,1fr)}.split{grid-template-columns:1fr;margin:15px 10px}.card{margin:15px 10px}.info{flex-wrap:wrap;gap:18px}.info .streak{margin-left:0}.stamp-banner{margin:15px 10px;flex-direction:column;text-align:center}.admin-hero{margin:12px 10px;flex-direction:column;align-items:flex-start;gap:25px}.stats{grid-template-columns:1fr 1fr;margin:15px 10px}.stats .card{margin:0}.mission-row{grid-template-columns:35px 80px 90px 1fr}.proof{flex-direction:column}.proof-file{width:100%}}@media(max-width:480px){.hero h1{font-size:45px}.grid{grid-template-columns:repeat(4,1fr)}.mission-row{grid-template-columns:35px 70px 75px 1fr;font-size:8px}}
.hidden{display:none!important}.stamp-slot{aspect-ratio:1;border:1px solid #ddd;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:inherit;gap:3px;max-width:105px;width:100%;margin:auto;background:#fff}.stamp-slot strong{font-size:13px;letter-spacing:.08em}.stamp-slot small{font-size:9px}.stamp-slot span{font-size:9px;text-transform:uppercase}.stamp-slot.collected{background:#111;color:#fff;border-color:#111}.stamp-slot.pending{border-style:dashed}.mission-list{display:grid;gap:12px}.mission-card,.admin-row,.member-row{border:1px solid #e4e4e4;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.mission-card h3{margin:5px 0}.mission-card p{margin:0 0 8px;color:#666}.mission-card span,.admin-row span{display:block;font-size:12px;color:#777;text-transform:uppercase}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}.stat{background:#fff;border:1px solid #ddd;padding:22px}.stat small{display:block;color:#777}.stat b{font-size:32px}.admin-row>div:first-child{min-width:230px}.admin-row button{margin-left:8px;padding:9px 12px;border:0;cursor:pointer}.approve{background:#111;color:#fff}.reject{background:#eee}.member-row{display:grid;grid-template-columns:140px 1fr 1.5fr 120px}.activity-page{max-width:1100px;margin:auto;padding:36px 20px}.back{color:#111;text-decoration:none}.activity-hero{padding:60px 0 30px;border-bottom:1px solid #ddd}.activity-hero h1{font-size:clamp(48px,8vw,100px);margin:8px 0}.activity-art{height:260px;margin-top:30px;border:1px dashed #aaa;display:grid;place-items:center;text-align:center;color:#999;letter-spacing:.12em}.activity-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:20px}.steps{display:grid;gap:10px;margin:25px 0}.steps div{display:flex;gap:16px;border-top:1px solid #eee;padding:15px 0}.steps b{font-size:13px}.stamp-preview{border:1px solid #111;border-radius:50%;width:180px;height:180px;margin:25px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px}.stamp-preview strong{font-size:28px}.stamp-preview span,.stamp-preview small{font-size:9px}@media(max-width:700px){.stats{grid-template-columns:1fr 1fr}.activity-grid{grid-template-columns:1fr}.member-row{grid-template-columns:1fr}.admin-row{flex-direction:column;align-items:flex-start}.stamp-slot{max-width:82px}}

.review-actions button:disabled{opacity:.55;cursor:not-allowed}.review-actions{display:flex;gap:8px;align-items:center}
.stamp-slot.locked{opacity:.48;filter:grayscale(.25);cursor:not-allowed}.stamp-slot.locked strong{font-size:.72rem;letter-spacing:.08em}.mission-card.mission-locked{opacity:.62}.mission-card button:disabled{opacity:.7;cursor:not-allowed}
/* SWISH YOUR WAY passport artwork update */
.passport-body{background:#f3f0ea;color:#5d2020}
.passport-body header{background:#1f1b1a;color:#fff}
.passport-section{max-width:1360px;margin:0 auto;padding:38px 18px 10px}
.passport-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}
.passport-heading h1{margin:0 0 8px;font-size:clamp(28px,4vw,46px);color:#6f2d2e;letter-spacing:-1px}
.passport-heading p{margin:0;max-width:650px;color:#6f5a58;font-size:12px;line-height:1.6}
.passport-cover-mini{width:88px;height:110px;object-fit:contain;filter:drop-shadow(0 10px 15px rgba(60,20,20,.18))}
.passport-book{position:relative;width:100%;aspect-ratio:3508/2481;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(67,28,28,.18);background:#f3f0ea}
.passport-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.passport-user-data{position:absolute;inset:0;pointer-events:none;color:#6f2d2e}
.passport-field{position:absolute;left:8.7%;display:flex;flex-direction:column;gap:7px;width:37%;}
.passport-field span,.passport-streak span{font-size:clamp(7px,.8vw,12px);font-weight:700;letter-spacing:.05em;color:#8f2b2b}
.passport-field strong{font-family:"Space Grotesk",sans-serif;font-size:clamp(13px,1.7vw,27px);font-weight:600;color:#4f2021;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field-name{top:31.5%}.field-id{top:40.1%}.field-join{top:48.9%}
.passport-streak{position:absolute;left:8.7%;top:58%;display:flex;flex-direction:column;gap:7px}
.passport-streak strong{font:700 clamp(14px,1.8vw,28px) "Space Grotesk";color:#4f2021}
.passport-slots{position:absolute;left:55.85%;top:19.95%;width:34.2%;height:67.8%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(6,1fr);column-gap:3%;row-gap:2.4%}
.passport-slot{position:relative;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#6f2d2e;min-width:0;min-height:0;border-radius:18px;transition:transform .18s ease,background .18s ease}
.passport-slot:not(.locked):hover{transform:translateY(-2px)}
.passport-slot.locked{cursor:not-allowed}
.passport-slot img{width:72%;height:72%;object-fit:contain;display:block;transform:translateY(10%);filter:drop-shadow(0 2px 2px rgba(75,20,20,.06))}
.slot-status{position:absolute;bottom:7%;font-size:clamp(5px,.55vw,9px);font-weight:800;letter-spacing:.08em;color:#6f2d2e;background:rgba(239,238,230,.82);padding:2px 4px;border-radius:3px}
.slot-open{font:700 clamp(7px,.8vw,12px) "Space Grotesk";letter-spacing:.06em;color:rgba(110,30,30,.52);text-transform:uppercase}
.passport-slot.pending .slot-open{color:#8a6a35}.passport-slot.rejected .slot-open{color:#8f2b2b}.passport-slot.locked .slot-open{color:rgba(80,65,65,.36)}
.passport-summary{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:15px 6px 5px;color:#6f2d2e}
.passport-summary>div{display:flex;flex-direction:column;gap:5px}.passport-summary span{font-size:8px;letter-spacing:.08em;color:#80615f}.passport-summary strong{font:700 17px "Space Grotesk"}.summary-progress{flex-direction:row!important;align-items:center;gap:12px!important}.summary-track{height:7px;background:#ded7d0;border-radius:10px;overflow:hidden;flex:1;min-width:80px}.summary-track i{display:block;height:100%;width:0;background:#b22c23}.passport-id-mobile{text-align:right}
.mission-section{border-color:#e3d9d2}.mission-section h2{color:#6f2d2e}.mission-card{border-color:#e5d9d2;background:#fbfaf6}.mission-card h3{color:#6f2d2e}.mission-card .dark{background:#6f2d2e;color:#fff}.mission-card.mission-locked .dark{background:#ddd4ce;color:#6f6561}
.passport-body .card{box-shadow:0 12px 30px rgba(70,30,30,.07)}
.passport-body footer{background:#6f2d2e;color:#eadfda}
.activity-page .stamp-preview{border:0;width:190px;height:190px}.activity-page .stamp-preview{background:url("assets/swish-stamp-cropped.png") center/contain no-repeat}.activity-page .stamp-preview strong,.activity-page .stamp-preview span{display:none}.activity-page .stamp-preview small{position:relative;top:62px;color:#6f2d2e;font-weight:800}
@media(max-width:800px){.passport-section{padding:22px 10px}.passport-heading{align-items:flex-start}.passport-cover-mini{width:65px;height:82px}.passport-slots{left:55.4%;width:35%;top:19.6%;height:68%;column-gap:2.8%;row-gap:2.3%}.passport-slot img{width:76%;height:76%}.passport-summary{grid-template-columns:1fr}.summary-progress{grid-column:1}.passport-id-mobile{text-align:left}.passport-field strong{font-size:clamp(10px,2.1vw,17px)}.passport-streak strong{font-size:clamp(11px,2.2vw,17px)}}
@media(max-width:520px){.passport-heading h1{font-size:25px}.passport-heading p{font-size:10px}.passport-cover-mini{display:none}.passport-book{border-radius:7px}.passport-field{gap:3px}.passport-field span,.passport-streak span{font-size:5px}.passport-field strong,.passport-streak strong{font-size:8px}.slot-status{font-size:4px}.slot-open{font-size:5px}.passport-summary strong{font-size:14px}}
.auth-passport-cover{display:block;width:92px;height:125px;object-fit:contain;margin:-8px auto 6px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.18))}
/* LNGSHOT color palette + physical passport export */
body{background:var(--brand-paper)}
header,.passport-body header{background:var(--brand-black)}
.dark{background:var(--brand-black)}
.eyebrow{color:var(--brand-burgundy)}
.download-passport{border:1px solid var(--brand-burgundy);background:var(--brand-burgundy);color:#fff;padding:14px 28px;border-radius:7px;font-weight:800;letter-spacing:.04em;cursor:pointer;min-height:52px}
.download-passport:disabled{opacity:.6;cursor:wait}
.passport-actions{max-width:1360px;margin:12px auto 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 6px}
.continue-mission{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;border-radius:7px;background:var(--brand-burgundy);color:#fff;text-decoration:none;font-weight:800;letter-spacing:.04em;border:1px solid var(--brand-burgundy)}
.continue-mission:hover{background:var(--brand-red)}
.continue-mission.disabled{opacity:.45;pointer-events:none}
.passport-body .passport-heading h1,.passport-body .mission-section h2{color:var(--brand-burgundy)}
.passport-summary{color:var(--brand-burgundy)}
.summary-track i{background:var(--brand-red)}
.mission-card .dark{background:var(--brand-burgundy)}
@media(max-width:800px){.passport-actions{padding:0 2px;gap:10px}.download-passport,.continue-mission{flex:1;min-height:48px;padding:12px 10px;font-size:11px;text-align:center}}
.auth-card .dark,.auth-card .tab.active{color:var(--brand-black)}
.auth-card .dark{background:var(--brand-red);color:#fff}
.light{color:var(--brand-black)}
.hero{background:linear-gradient(110deg,#1f1b1a,#6f2d2e 65%,#b22c23)}
.hero-passport{background:#6f2d2e}

/* User details are shown in account/header areas; keep the physical passport artwork clean. */
.passport-user-data{display:none!important}

/* About page */
.about-page{background:#f3f0e8;color:#1f1b1a}.about-page main{max-width:1180px;margin:0 auto;padding:26px 20px 70px}.about-page header{background:#1f1b1a;color:#fff}.about-page header a{color:#fff}.about-hero{position:relative;min-height:620px;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#071c29 0%,#0b3046 58%,#173e53 100%);padding:100px 8% 80px;display:flex;align-items:center;box-shadow:0 18px 50px rgba(31,27,26,.12)}.about-hero-copy{position:relative;z-index:2;max-width:650px}.about-hero .eyebrow{color:#91aabd}.about-hero h1{font-size:clamp(52px,8vw,92px);line-height:.92;margin:24px 0;color:#fff;letter-spacing:-3px}.about-hero h1 em{font-weight:400}.about-hero p{font-size:20px;line-height:1.55;color:#e9eef1;max-width:700px}.about-passport-visual{position:absolute;right:4%;bottom:-12%;width:360px;transform:rotate(8deg);filter:drop-shadow(0 24px 28px rgba(0,0,0,.32));z-index:3}.about-passport-visual img{width:100%;display:block}.about-card{margin-top:26px;background:#fff;border:1px solid rgba(111,45,46,.16);border-radius:26px;padding:54px 7%;box-shadow:0 12px 34px rgba(31,27,26,.06)}.about-card h2{font-size:clamp(34px,5vw,60px);line-height:1;margin:14px 0 24px;color:#6f2d2e}.about-card p{font-size:18px;line-height:1.7;color:#5f5050;max-width:850px}.about-tagline{font-size:26px!important;color:#b22c23!important;font-weight:700}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}.feature-grid div{border:1px solid #d7c6c2;border-radius:14px;padding:18px;color:#6f2d2e;background:#faf8f3;font-weight:600}.about-final{margin-top:36px;font-size:24px;letter-spacing:3px;font-weight:800;color:#b22c23}.disclaimer{background:#1f1b1a;color:#fff}.disclaimer p{color:#eee5e0}.about-page footer{background:#1f1b1a;color:#fff}.header-link{border:1px solid rgba(255,255,255,.35);padding:9px 14px;border-radius:8px}.about-page nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}@media(max-width:800px){.about-page main{padding:14px 12px 45px}.about-hero{min-height:720px;padding:72px 9% 160px;align-items:flex-start}.about-hero h1{font-size:56px}.about-hero p{font-size:16px}.about-passport-visual{width:250px;right:2%;bottom:-4%}.about-card{padding:36px 24px}.feature-grid{grid-template-columns:1fr}}


/* === FINAL MOBILE / DETAILS / ABOUT FIXES === */
.passport-details{max-width:1360px;margin:0 auto 18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.passport-details>div{background:#fffdf9;border:1px solid #dccdc7;border-radius:10px;padding:14px 16px;min-width:0;box-shadow:0 5px 16px rgba(70,30,30,.045)}
.passport-details span{display:block;font-size:8px;letter-spacing:.12em;font-weight:800;color:#8a5754;margin-bottom:6px}
.passport-details strong{display:block;font:700 16px "Space Grotesk",sans-serif;color:#4f2021;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* About: use the supplied LNGSHOT palette instead of the old blue treatment. */
.about-page{background:#f3f0e8!important;color:#1f1b1a}
.about-page main{max-width:1240px;margin:0 auto;padding:24px 20px 70px}
.about-hero{min-height:680px!important;border-radius:26px!important;background:linear-gradient(135deg,#1f1b1a 0%,#4a2022 52%,#6f2d2e 100%)!important;padding:78px 8% 120px!important;display:flex;align-items:flex-start!important;box-shadow:0 20px 55px rgba(31,27,26,.16)!important;overflow:hidden!important}
.about-hero-copy{max-width:680px!important;padding-top:20px}
.about-hero .eyebrow{color:#e5c7c2!important}
.about-hero h1{font-size:clamp(52px,7.2vw,92px)!important;color:#fff!important;margin:22px 0 26px!important;letter-spacing:-3px!important}
.about-hero p{color:#f2e8e5!important;font-size:19px!important;max-width:670px!important}
.about-passport-visual{right:0%!important;bottom:-11%!important;width:min(680px,58%)!important;transform:rotate(7deg)!important;filter:drop-shadow(0 28px 30px rgba(0,0,0,.38))!important}
.about-passport-visual img{width:100%!important;height:auto!important;display:block!important}
.about-card{background:#fffdf9!important;border-color:#ddcbc5!important}
.about-card h2{color:#6f2d2e!important}
.about-card p{color:#5f4d4d!important}
.about-tagline,.about-final{color:#b22c23!important}
.feature-grid div{color:#6f2d2e!important;background:#f8f4ee!important;border-color:#d8c5c0!important}
.disclaimer{background:#1f1b1a!important}

/* Keep the four shortcuts visible on phones; make them horizontally scrollable. */
@media(max-width:800px){
  header{height:auto!important;min-height:64px;flex-wrap:wrap;padding:12px 16px!important;gap:10px!important;align-items:center}
  header>b{font-size:18px;flex:1 1 auto}
  header .account{margin-left:auto}
  header nav,.about-page header nav{display:flex!important;order:3;width:100%;overflow-x:auto;overflow-y:hidden;gap:20px;padding:9px 2px 2px;border-top:1px solid rgba(255,255,255,.14);white-space:nowrap;scrollbar-width:none}
  header nav::-webkit-scrollbar{display:none}
  header nav a{font-size:11px;flex:0 0 auto;padding:3px 0}
  .passport-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 2px 14px}
  .passport-details>div{padding:11px 12px}
  .passport-details strong{font-size:14px}
  .about-page main{padding:12px 10px 44px}
  .about-hero{min-height:760px!important;padding:52px 8% 210px!important;border-radius:22px!important}
  .about-hero-copy{padding-top:6px}
  .about-hero h1{font-size:clamp(48px,13vw,68px)!important;line-height:.94!important}
  .about-hero p{font-size:16px!important;line-height:1.5!important}
  .about-passport-visual{width:430px!important;max-width:88vw!important;right:-5%!important;bottom:-1%!important;transform:rotate(6deg)!important}
}
@media(max-width:480px){
  .passport-details strong{font-size:12px}
  .passport-details span{font-size:7px}
  .about-hero{min-height:720px!important;padding:46px 7% 180px!important}
  .about-hero h1{font-size:47px!important}
  .about-passport-visual{width:390px!important;right:-6%!important}
}
.test-center{margin-bottom:24px}.test-current{margin:14px 0 18px;padding:12px 14px;border:1px solid rgba(111,45,46,.25);border-radius:10px;background:#f7f3ed}.test-days{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.test-day{border:1px solid #6f2d2e;background:#fff;color:#6f2d2e;border-radius:999px;padding:8px 11px;font-weight:700;font-size:12px;cursor:pointer}.test-day.active,.test-day:hover{background:#6f2d2e;color:#fff}.test-center .note{min-height:1.2em}
@media(max-width:640px){.test-days{max-height:220px;overflow:auto}.test-day{min-width:62px}}


/* Personalized details are printed directly onto the physical passport artwork. */
.passport-personalized{position:absolute;inset:0;pointer-events:none;color:#4f2021;font-family:Georgia,"Times New Roman",serif;font-weight:600;}
.passport-value{position:absolute;left:10.3%;font-size:clamp(11px,1.58vw,27px);line-height:1.05;white-space:nowrap;max-width:34%;overflow:hidden;text-overflow:ellipsis;}
.passport-name-value{top:35.1%;}
.passport-id-value{top:44.6%;}
.passport-join-value{top:54.1%;}
.passport-streak-label{position:absolute;left:10.3%;top:63.1%;font-family:Arial,Helvetica,sans-serif;font-size:clamp(8px,0.95vw,17px);font-weight:700;letter-spacing:.02em;}
.passport-streak-value{top:68.0%;}
@media(max-width:800px){
  .passport-value{font-size:clamp(8px,1.8vw,16px);max-width:35%;}
  .passport-streak-label{font-size:clamp(6px,1.15vw,12px);}
}
@media(max-width:520px){
  .passport-value{font-size:clamp(7px,2.05vw,12px);left:10.4%;
  .passport-streak-label{font-size:clamp(5px,1.35vw,9px);left:10.4%;}
}

/* PASSPORT USER DETAILS — match the physical passport typography */
.passport-personalized .passport-value{
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 600;
  letter-spacing: .15px;
}
.passport-personalized .passport-streak-label{
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700;
}

/* Keep personalized passport details compact on small screens so values do not overlap the printed labels. */
@media(max-width:800px){
  .passport-personalized .passport-name-value,
  .passport-personalized .passport-id-value,
  .passport-personalized .passport-join-value,
  .passport-personalized .passport-streak-value{
    font-size:clamp(10px,2.2vw,14px);
    line-height:1.05;
    letter-spacing:0;
  }
}
@media(max-width:520px){
  .passport-personalized .passport-name-value,
  .passport-personalized .passport-id-value,
  .passport-personalized .passport-join-value,
  .passport-personalized .passport-streak-value{
    font-size:clamp(8px,2.7vw,11px);
    line-height:1.05;
    letter-spacing:0;
  }
  .passport-personalized .passport-streak-label{
    font-size:clamp(5px,1.35vw,9px);
  }
}
.passport-personalized .passport-name-value,
.passport-personalized .passport-id-value,
.passport-personalized .passport-join-value,
.passport-personalized .passport-streak-value{
  font-size: clamp(12px, 1.15vw, 18px);
  line-height: 1.1;
}
.mission-task-list{display:grid;gap:8px;margin:12px 0}
.mission-task{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:start;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fbfaf7}
.mission-task>b{font-size:9px;color:var(--brand-burgundy)}
.mission-task span{font-size:9px;color:var(--muted);line-height:1.45}
.mission-task strong{display:block;color:var(--ink);font-size:10px;margin-bottom:2px}
.activity-task-list{display:grid;gap:10px;margin:18px 0}
.activity-task{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px;border:1px solid var(--line);border-radius:9px;background:#fbfaf7}
.activity-task>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#f0e8e4;color:var(--brand-burgundy);font-size:9px;font-weight:700}
.activity-task b{font-size:12px;color:var(--ink)}
.activity-task p{margin:5px 0 0;font-size:10px;color:var(--muted);line-height:1.5}

/* About hero passport — positioned to match the generated SWISH YOUR WAY reference */
@media(min-width:801px){
  .about-hero{
    min-height:780px!important;
    padding:78px 8% 120px!important;
  }
  .about-hero-copy{max-width:680px!important;position:relative;z-index:2}
  .about-hero p{max-width:700px!important}
  .about-passport-visual{
    width:1050px!important;
    max-width:none!important;
    right:-280px!important;
    bottom:-255px!important;
    transform:rotate(7deg)!important;
    z-index:3!important;
  }
}
@media(min-width:801px) and (max-width:1300px){
  .about-passport-visual{
    width:900px!important;
    right:-235px!important;
    bottom:-220px!important;
  }
}
@media(max-width:800px){
  .about-passport-visual{width:430px!important;max-width:88vw!important;right:-5%!important;bottom:-1%!important;transform:rotate(6deg)!important}
}


/* Login-page music control */
.auth-music-control{position:fixed;top:18px;right:20px;z-index:50}
.auth-music-control button{border:1px solid rgba(111,45,46,.35);background:rgba(255,255,255,.92);color:#6f2d2e;border-radius:999px;padding:9px 14px;font:700 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.08em;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.08);backdrop-filter:blur(6px)}
.auth-music-control button.on{background:#6f2d2e;color:#fff;border-color:#6f2d2e}
@media(max-width:640px){.auth-music-control{top:12px;right:12px}.auth-music-control button{padding:8px 11px;font-size:9px}}