:root {
    --brown-950: #28160f;
    --brown-900: #3b2418;
    --brown-800: #503325;
    --brown-700: #6d4936;
    --brown-600: #8f654a;
    --copper: #ae7954;
    --sand-500: #c8a27f;
    --sand-300: #dcc5ad;
    --sand-200: #eadbc9;
    --sand-100: #f3ebe1;
    --cream: #f8f4ee;
    --white: #fff;
    --ink: #2b211c;
    --muted: #766b65;
    --success: #496b4b;
    --danger: #9e4339;
    --shadow: 0 24px 70px rgba(59, 36, 24, .12);
    --radius-xl: 34px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --shell: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    background: var(--cream);
    color: var(--ink);
    font-family: "Tajawal", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
body::selection { background: var(--sand-300); color: var(--brown-950); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.section { padding: 120px 0; }
em { color: var(--copper); font-style: normal; }

.site-header {
    position: relative;
    z-index: 50;
    height: 90px;
    background: var(--brown-900);
    color: var(--white);
}
.site-header.is-app { background: var(--brown-950); border-bottom: 1px solid rgba(255,255,255,.08); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-mark { width: 42px; height: 42px; display: inline-flex; justify-content: center; align-items: end; gap: 3px; transform: rotate(180deg); }
.brand-mark i { display: block; width: 8px; border-radius: 8px 8px 1px 1px; background: currentColor; }
.brand-mark i:nth-child(1) { height: 18px; }
.brand-mark i:nth-child(2) { height: 34px; }
.brand-mark i:nth-child(3) { height: 25px; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 25px; font-weight: 900; letter-spacing: 2px; }
.brand-copy small { margin-top: 5px; font-size: 10px; color: var(--sand-300); letter-spacing: .5px; }
.public-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; }
.public-nav > a:not(.button) { color: rgba(255,255,255,.75); transition: .25s; }
.public-nav > a:hover { color: var(--white); }
.header-player { display: flex; align-items: center; gap: 14px; }
.points-pill { height: 42px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 99px; color: var(--sand-200); font-weight: 700; font-size: 13px; }
.points-pill svg { width: 17px; color: var(--sand-500); }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--sand-200); color: var(--brown-900); font-size: 18px; font-weight: 900; }
.logout-link { width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:rgba(255,255,255,.55);transition:.2s; }.logout-link:hover { background:rgba(255,255,255,.08);color:var(--white); }.logout-link svg { width:18px; }

.button {
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-weight: 800;
    font-size: 15px;
    transition: transform .25s, box-shadow .25s, background .25s;
}
.button:hover { transform: translateY(-2px); }
.button svg { width: 19px; }
.button-light { background: var(--white); color: var(--brown-900); box-shadow: 0 14px 30px rgba(40,22,15,.18); }
.button-light:hover { background: var(--sand-100); box-shadow: 0 17px 38px rgba(40,22,15,.24); }
.button-brown { background: var(--brown-900); color: var(--white); box-shadow: 0 12px 28px rgba(59,36,24,.22); }
.button-brown:hover { background: var(--brown-800); box-shadow: 0 16px 36px rgba(59,36,24,.27); }
.button-ghost { min-height: 42px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--white); }
.button-small { padding: 0 19px; font-size: 13px; }
.button-wide { width: 100%; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--sand-300); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.eyebrow i { width: 30px; height: 1px; background: currentColor; }
.eyebrow.dark { color: var(--brown-700); }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.76); font-size: 14px; font-weight: 700; }
.text-link span { font-size: 20px; }

.flash-stack { position: fixed; z-index: 100; top: 102px; left: 50%; transform: translateX(-50%); display: grid; gap: 10px; pointer-events: none; }
.flash { min-height: 54px; padding: 12px 16px 12px 20px; border-radius: 15px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--white); box-shadow: var(--shadow); border-right: 4px solid var(--brown-700); pointer-events: auto; font-size: 14px; font-weight: 600; }
.flash-success { border-color: var(--success); }
.flash-error { border-color: var(--danger); }
.flash button { width: 28px; height: 28px; border: 0; background: var(--sand-100); border-radius: 50%; color: var(--brown-900); }

/* Landing */
.hero { position: relative; min-height: 790px; overflow: hidden; background: var(--brown-900); color: var(--white); }
.hero::before { content: ""; position: absolute; inset: auto -10% -50% auto; width: 700px; height: 700px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 90px rgba(255,255,255,.018), 0 0 0 180px rgba(255,255,255,.012); }
.hero-grain { position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(rgba(255,255,255,.18) .7px, transparent .7px); background-size: 6px 6px; mask-image: linear-gradient(to left, #000, transparent 72%); }
.hero-grid { position: relative; min-height: 700px; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 70px; }
.hero-copy { z-index: 2; padding-block: 55px; }
.hero h1 { margin: 22px 0 20px; font-size: clamp(54px, 6vw, 84px); line-height: 1.05; font-weight: 900; letter-spacing: -3px; }
.hero-copy > p { max-width: 590px; margin: 0; color: rgba(255,255,255,.7); font-size: 18px; line-height: 1.9; }
.hero-actions { margin-top: 35px; display: flex; align-items: center; gap: 28px; }
.hero-meta { margin-top: 58px; display: flex; gap: 35px; }
.hero-meta div { min-width: 82px; border-left: 1px solid rgba(255,255,255,.15); }
.hero-meta div:last-child { border: 0; }
.hero-meta strong { display: block; font-size: 25px; line-height: 1; color: var(--white); }
.hero-meta span { display: block; margin-top: 8px; font-size: 11px; color: var(--sand-300); }
.hero-art { position: relative; height: 580px; }
.sun-disc { position: absolute; left: 8%; top: 4%; width: 285px; height: 285px; border-radius: 50%; background: linear-gradient(145deg, #d6b18d, #a87150); box-shadow: 0 0 90px rgba(200,162,127,.17); }
.arch { position: absolute; bottom: 0; border-radius: 220px 220px 0 0; border: 1px solid rgba(255,255,255,.18); }
.arch::before { content: ""; position: absolute; inset: 36px 36px 0; border-radius: inherit; border: 1px solid rgba(255,255,255,.08); }
.arch-back { left: 0; width: 360px; height: 470px; background: rgba(40,22,15,.25); }
.arch-front { left: 105px; width: 390px; height: 510px; background: linear-gradient(180deg, rgba(80,51,37,.35), #2d1a12 78%); backdrop-filter: blur(2px); box-shadow: -30px 30px 80px rgba(0,0,0,.2); }
.arch-front span { position: absolute; inset: 115px 83px 0; border-radius: 140px 140px 0 0; background: linear-gradient(180deg, rgba(200,162,127,.52), rgba(59,36,24,.06)); border: 1px solid rgba(255,255,255,.14); }
.route-ribbon { position: absolute; z-index: 3; right: 15px; bottom: 15px; width: 430px; height: 300px; border: solid var(--sand-300); border-width: 0 0 2px 2px; border-radius: 0 0 0 100%; transform: rotate(-13deg); opacity: .72; }
.route-ribbon::after { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 8px rgba(255,255,255,.1); }
.pin { position: absolute; width: 12px; height: 12px; border: 2px solid var(--sand-200); background: var(--brown-900); border-radius: 50%; }
.pin-one { right: 75px; bottom: -7px; }.pin-two { right: 230px; bottom: 60px; }.pin-three { left: -7px; top: 80px; }
.floating-card { position: absolute; z-index: 5; right: 0; top: 100px; width: 220px; padding: 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.1); backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0,0,0,.2); animation: float 5s ease-in-out infinite; }
.floating-card > span { color: var(--sand-300); font-size: 10px; }.floating-card strong { display: block; margin: 4px 0 10px; font-size: 17px; }.floating-card small { display: flex; gap: 7px; align-items: center; color: rgba(255,255,255,.65); }.floating-card svg { width: 16px; }
.arabesque { position: absolute; left: -60px; bottom: -80px; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.07); transform: rotate(45deg); }
.arabesque::before, .arabesque::after { content: ""; position: absolute; inset: 35px; border: inherit; }.arabesque::after { inset: 70px; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

.intro-section { background: var(--cream); }
.section-heading { max-width: 690px; }
.section-heading h2, .route-preview-copy h2 { margin: 18px 0; color: var(--brown-900); font-size: clamp(38px, 5vw, 64px); line-height: 1.16; letter-spacing: -2px; }
.section-heading p, .route-preview-copy p { max-width: 620px; color: var(--muted); font-size: 17px; }
.experience-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card { position: relative; min-height: 330px; padding: 34px; border: 1px solid #e8ddd2; border-radius: var(--radius-lg); background: rgba(255,255,255,.7); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.feature-card.featured { background: var(--brown-900); color: var(--white); border-color: transparent; }
.feature-number { position: absolute; top: 25px; left: 30px; color: var(--sand-300); font-size: 13px; font-weight: 700; }
.feature-icon { width: 67px; height: 67px; margin-bottom: 55px; display: grid; place-items: center; border-radius: 21px; background: var(--sand-100); color: var(--brown-700); }
.featured .feature-icon { background: rgba(255,255,255,.11); color: var(--sand-200); }
.feature-icon svg { width: 30px; height: 30px; }
.feature-card h3 { margin: 0 0 9px; font-size: 25px; color: var(--brown-900); }.featured h3 { color: var(--white); }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; }.featured p { color: rgba(255,255,255,.65); }

.route-preview { background: var(--sand-100); overflow: hidden; }
.route-preview-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: center; }
.route-preview-copy .button { margin-top: 22px; }
.mini-map { position: relative; min-height: 550px; border-radius: var(--radius-xl); background: var(--brown-900); box-shadow: var(--shadow); overflow: hidden; }
.mini-map::before { content:""; position:absolute; inset:0; opacity:.16; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 42px 42px; transform: rotate(12deg) scale(1.5); }
.map-line { position:absolute; right:22%; top:18%; width:55%; height:66%; border:2px dashed rgba(234,219,201,.55); border-width:2px 0 0 2px; border-radius:50% 0 0; transform:rotate(-20deg); }
.map-stop { position:absolute; display:flex; align-items:center; gap:12px; color:var(--white); font-size:12px; }.map-stop i { width:14px;height:14px;border:3px solid var(--brown-900);outline:2px solid var(--sand-300);border-radius:50%;background:var(--sand-300); }.map-stop span { padding:7px 12px;border-radius:9px;background:rgba(255,255,255,.08);backdrop-filter:blur(5px); }.map-stop small { display:block;color:var(--sand-300);font-size:8px; }
.map-stop.start { right:10%;top:12%; }.map-stop.s2 { right:30%;top:34%; }.map-stop.s3 { right:50%;top:53%; }.map-stop.s4 { left:16%;top:65%; }.map-stop.finish { left:11%;bottom:8%; }
.map-distance { position:absolute;right:10%;bottom:10%;width:130px;height:130px;display:grid;place-content:center;text-align:center;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:var(--white); }.map-distance strong { font-size:38px;line-height:1; }.map-distance span { color:var(--sand-300);font-size:10px; }
.final-cta { padding: 110px 0; background: var(--brown-900); color: var(--white); text-align: center; }
.final-cta-inner { display:grid;justify-items:center; }.final-cta h2 { margin:20px 0 30px;font-size:clamp(44px,6vw,74px);line-height:1.13; }

/* Auth */
.auth-page { background: var(--sand-100); }
.auth-shell { min-height: calc(100vh - 180px); padding: 55px 0 80px; display: grid; grid-template-columns: 1fr .82fr; }
.auth-panel { padding: 45px 8vw 45px 45px; background: var(--white); border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }
.auth-aside { position: relative; min-height: 640px; padding: 55px; display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--radius-xl) 0 0 var(--radius-xl);background:var(--brown-900);color:var(--white);overflow:hidden; }
.auth-aside::before { content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018); }
.auth-heading { max-width: 520px; }.auth-heading h1 { margin:15px 0;font-size:clamp(40px,5vw,62px);line-height:1.12;color:var(--brown-900); }.auth-heading p { color:var(--muted); }
.auth-form { margin-top:30px;display:grid;gap:18px;max-width:520px; }.auth-form label { display:grid;gap:7px; }.auth-form label span { font-size:13px;font-weight:700;color:var(--brown-800); }.auth-form input { height:56px;padding:0 18px;border:1px solid #e3d7cc;border-radius:14px;background:var(--cream);outline:0;transition:.2s; }.auth-form input:focus { border-color:var(--copper);box-shadow:0 0 0 4px rgba(174,121,84,.12);background:var(--white); }
.auth-switch { margin-top:22px;font-size:14px;color:var(--muted); }.auth-switch a { color:var(--brown-700);font-weight:800;text-decoration:underline;text-underline-offset:4px; }
.auth-form .consent-check { display:grid;grid-template-columns:20px 1fr;align-items:start;gap:9px;cursor:pointer; }.auth-form .consent-check input { width:18px;height:18px;margin:3px 0 0;accent-color:var(--brown-900); }.auth-form .consent-check span { color:var(--muted);font-size:10px;font-weight:500;line-height:1.7; }.consent-check a { color:var(--brown-700);font-weight:800;text-decoration:underline; }
.form-errors { margin-top:20px;padding:12px 17px;border-radius:13px;background:#fff0ed;color:var(--danger);font-size:13px; }.form-errors p { margin:3px; }
.auth-orbit { position:absolute;left:50%;top:26%;width:190px;height:190px;display:grid;place-content:center;text-align:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 25px rgba(255,255,255,.035),0 0 0 50px rgba(255,255,255,.02); }.auth-orbit span { font-size:52px;font-weight:900;line-height:1; }.auth-orbit small { color:var(--sand-300); }
.auth-aside blockquote { position:relative;margin:0;font-size:29px;line-height:1.5;font-weight:700; }.auth-stamps { margin-top:22px;display:flex;gap:9px; }.auth-stamps span { padding:5px 11px;border:1px solid rgba(255,255,255,.15);border-radius:99px;color:var(--sand-200);font-size:11px; }
.route-seal { position:absolute;top:22%;left:50%;width:170px;height:170px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.17);border-radius:50%;transform:translateX(-50%); }.route-seal svg { width:75px;height:75px;color:var(--sand-300); }.login-art blockquote strong { color:var(--sand-300); }

/* App dashboard */
.app-page { padding-bottom: 40px; }
.app-hero { padding:70px 0 105px;background:var(--brown-900);color:var(--white); }
.app-hero-grid { display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px; }.welcome-line { color:var(--sand-300);font-size:14px;font-weight:700; }.app-hero h1 { margin:12px 0;font-size:clamp(43px,5vw,67px);line-height:1.12; }.app-hero p { max-width:620px;margin:0;color:rgba(255,255,255,.65); }
.progress-orbit { --progress:0; width:180px;height:180px;padding:10px;border-radius:50%;background:conic-gradient(var(--sand-300) calc(var(--progress) * 3.6deg),rgba(255,255,255,.12) 0); }.progress-orbit > div { width:100%;height:100%;display:grid;place-content:center;text-align:center;border-radius:50%;background:var(--brown-900); }.progress-orbit strong { font-size:37px;line-height:1; }.progress-orbit span { margin-top:7px;color:var(--sand-300);font-size:11px; }
.dashboard-content { position:relative;margin-top:-52px;padding-bottom:70px; }
.start-journey-card { display:grid;grid-template-columns:.78fr 1.22fr;min-height:430px;border-radius:var(--radius-xl);background:var(--white);box-shadow:var(--shadow);overflow:hidden; }.start-card-art { position:relative;display:grid;place-items:center;background:var(--sand-200);overflow:hidden; }.start-card-art::after { content:"";position:absolute;width:340px;height:340px;border:1px solid rgba(59,36,24,.13);border-radius:50%;box-shadow:0 0 0 40px rgba(59,36,24,.04),0 0 0 80px rgba(59,36,24,.025); }.big-number { position:relative;z-index:2;color:var(--brown-900);font-size:100px;font-weight:900;opacity:.12; }.start-route-line { position:absolute;z-index:3;width:72%;height:50%;border:3px dashed var(--brown-700);border-width:0 0 3px 3px;border-radius:0 0 0 80%;transform:rotate(-15deg); }.start-route-line i { position:absolute;width:16px;height:16px;border:3px solid var(--sand-200);outline:2px solid var(--brown-700);border-radius:50%;background:var(--brown-700); }.start-route-line i:nth-child(1){right:-7px;bottom:-9px}.start-route-line i:nth-child(2){right:28%;bottom:3%}.start-route-line i:nth-child(3){right:55%;bottom:17%}.start-route-line i:nth-child(4){left:5%;top:42%}.start-route-line i:nth-child(5){left:-8px;top:-8px}
.start-card-copy { padding:48px; }.status-tag { display:inline-flex;padding:6px 12px;border-radius:99px;background:#edf5ed;color:var(--success);font-size:11px;font-weight:800; }.start-card-copy h2 { margin:12px 0 5px;font-size:38px;color:var(--brown-900); }.start-card-copy p { margin:0;color:var(--muted); }.start-card-copy dl { margin:28px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.start-card-copy dl div { padding:13px;border-radius:12px;background:var(--cream); }.start-card-copy dt { font-size:10px;color:var(--muted); }.start-card-copy dd { margin:2px 0 0;color:var(--brown-900);font-weight:800;font-size:13px; }
.stats-row { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }.stats-row article { position:relative;padding:25px 28px;border-radius:20px;background:var(--white);box-shadow:0 13px 35px rgba(59,36,24,.08);overflow:hidden; }.stats-row span { display:block;color:var(--muted);font-size:12px; }.stats-row strong { margin-top:4px;display:block;color:var(--brown-900);font-size:33px;line-height:1.2; }.stats-row strong small { margin-right:4px;color:var(--sand-500);font-size:13px; }.stats-row article > svg { position:absolute;left:20px;bottom:20px;width:36px;height:36px;color:var(--sand-300);opacity:.65; }.status-word { font-size:26px!important; }
.section-label { margin:48px 0 18px;display:flex;align-items:end;justify-content:space-between; }.section-label span { color:var(--copper);font-size:11px;font-weight:800; }.section-label h2 { margin:2px 0 0;color:var(--brown-900);font-size:25px; }.section-label > a { color:var(--brown-700);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:5px; }
.next-challenge-card { position:relative;display:grid;grid-template-columns:65px 85px 1fr 120px;gap:22px;align-items:center;padding:30px;border-radius:var(--radius-lg);background:var(--white);box-shadow:0 14px 45px rgba(59,36,24,.09);overflow:hidden; }.next-index { color:var(--sand-200);font-size:48px;font-weight:900; }.next-icon { width:75px;height:75px;display:grid;place-items:center;border-radius:22px;background:var(--brown-900);color:var(--sand-200); }.next-icon svg { width:32px;height:32px; }.next-copy > span { display:flex;align-items:center;gap:5px;color:var(--copper);font-size:11px;font-weight:700; }.next-copy > span svg { width:14px; }.next-copy h3 { margin:4px 0;font-size:25px;color:var(--brown-900); }.next-copy p { max-width:640px;margin:0;color:var(--muted);font-size:13px;line-height:1.65; }.next-action { display:grid;justify-items:center; }.next-action strong { color:var(--brown-900);font-size:26px;line-height:1; }.next-action small { margin-bottom:9px;color:var(--muted);font-size:10px; }.next-action .button { min-height:40px;padding:0 17px;font-size:11px; }
.journey-progress-card { margin-top:22px;padding:28px;border-radius:var(--radius-lg);background:var(--white);border:1px solid #eadfd4; }.journey-progress-head { display:flex;justify-content:space-between;align-items:center; }.journey-progress-head span { display:block;color:var(--muted);font-size:11px; }.journey-progress-head strong { color:var(--brown-900);font-size:17px; }.journey-progress-head em { font-size:23px;font-weight:900; }.linear-progress { height:7px;border-radius:99px;background:#eadfd4;overflow:hidden; }.linear-progress i { display:block;height:100%;border-radius:inherit;background:var(--copper);transition:width .5s; }.journey-progress-card > .linear-progress { margin-top:15px; }
.mini-stops { margin-top:25px;display:grid;grid-template-columns:repeat(5,1fr);position:relative; }.mini-stops::before { content:"";position:absolute;top:17px;right:10%;left:10%;height:1px;background:#e4d5c7; }.mini-stops a { position:relative;z-index:1;display:grid;justify-items:center;text-align:center;color:var(--muted);font-size:10px; }.mini-stops i { width:35px;height:35px;display:grid;place-items:center;border:1px solid #dfd1c4;border-radius:50%;background:var(--white);font-style:normal;font-weight:800; }.mini-stops .done i { background:var(--brown-900);border-color:var(--brown-900);color:var(--white); }.mini-stops svg { width:16px; }.mini-stops span { margin-top:6px; }
.dashboard-note { margin-top:20px;padding:18px 22px;display:flex;align-items:center;gap:16px;border:1px dashed var(--sand-500);border-radius:16px;background:rgba(255,255,255,.5); }.dashboard-note > svg { flex:0 0 auto;color:var(--brown-700); }.dashboard-note strong { color:var(--brown-900);font-size:13px; }.dashboard-note p { margin:1px 0 0;color:var(--muted);font-size:11px; }
.completion-banner { padding:34px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:23px;border-radius:var(--radius-xl);background:var(--brown-900);color:var(--white);box-shadow:var(--shadow); }.completion-medal { width:82px;height:82px;display:grid;place-items:center;border-radius:50%;background:var(--sand-300);color:var(--brown-900); }.completion-medal svg { width:38px;height:38px; }.completion-banner span { color:var(--sand-300);font-size:11px; }.completion-banner h2 { margin:2px 0;font-size:28px; }.completion-banner p { margin:0;color:rgba(255,255,255,.65);font-size:12px; }

/* Route */
.route-header { padding:55px 0;background:var(--brown-900);color:var(--white); }.route-header-grid { display:grid;grid-template-columns:1fr 260px;align-items:end;gap:40px; }.route-header h1 { margin:8px 0 2px;font-size:55px; }.route-header p { margin:0;color:rgba(255,255,255,.62); }.route-score { padding:20px;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:rgba(255,255,255,.05); }.route-score > span { color:var(--sand-300);font-size:10px; }.route-score strong { display:block;font-size:30px;line-height:1.2; }.route-score strong small { font-size:12px;color:var(--sand-300); }.route-score .linear-progress { margin-top:10px;background:rgba(255,255,255,.13); }
.route-map-section { padding-top:55px;padding-bottom:90px; }.route-origin, .route-destination { width:min(720px,100%);margin-inline:auto;display:flex;align-items:center;gap:18px; }.origin-icon { width:62px;height:62px;display:grid;place-items:center;border-radius:19px;background:var(--sand-200);color:var(--brown-900); }.route-origin span,.route-destination span { display:block;color:var(--copper);font-size:10px;font-weight:800; }.route-origin strong,.route-destination strong { display:block;color:var(--brown-900);font-size:20px; }
.route-timeline { position:relative;width:min(880px,100%);margin:28px auto;padding:18px 0; }.route-timeline::before { content:"";position:absolute;right:50%;top:0;bottom:0;width:2px;background:linear-gradient(var(--sand-300),#e7dbcf 85%);transform:translateX(50%); }.route-stop { position:relative;display:grid;grid-template-columns:1fr 70px 1fr;margin:0 0 35px;align-items:center; }.route-stop:nth-child(odd) .stop-card { grid-column:1; }.route-stop:nth-child(even) .stop-card { grid-column:3; }.stop-node { position:relative;z-index:2;grid-column:2;grid-row:1;width:50px;height:50px;margin:auto;display:grid;place-items:center;border:7px solid var(--cream);border-radius:50%;background:var(--brown-900);color:var(--white);font-size:12px;font-weight:900;box-shadow:0 0 0 1px var(--sand-300); }.stop-node svg { width:17px; }.is-locked .stop-node { background:#d8cabe;color:#7d6f65; }.is-done .stop-node { background:var(--success);box-shadow:0 0 0 1px #85a286; }
.stop-card { grid-row:1;padding:26px;border:1px solid #e6d9cd;border-radius:21px;background:var(--white);box-shadow:0 12px 35px rgba(59,36,24,.07);transition:.25s; }.is-current .stop-card { border-color:var(--sand-500);box-shadow:0 16px 45px rgba(59,36,24,.13); }.is-locked .stop-card { opacity:.65; }.stop-card-top { display:flex;justify-content:space-between;align-items:center; }.stop-type { display:flex;align-items:center;gap:7px;color:var(--brown-700);font-size:10px;font-weight:700; }.stop-type svg { width:17px; }.stop-card-top > strong { color:var(--copper);font-size:12px; }.stop-location { margin-top:20px;display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px; }.stop-location svg { width:13px; }.stop-card h2 { margin:4px 0;font-size:25px;color:var(--brown-900); }.stop-card p { margin:0;color:var(--muted);font-size:12px;line-height:1.65; }.stop-footer { margin-top:18px;display:flex;align-items:center;justify-content:space-between; }.stop-footer .button { min-height:41px;padding:0 17px;font-size:11px; }.complete-label,.locked-label { display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700; }.complete-label { color:var(--success); }.locked-label { color:var(--muted); }.complete-label svg,.locked-label svg { width:15px; }.stop-footer > a:not(.button) { color:var(--brown-700);font-size:10px;text-decoration:underline; }
.route-destination { padding:25px 30px;border-radius:22px;background:var(--brown-900);color:var(--white); }.route-destination strong { color:var(--white);font-size:24px; }.route-destination p { margin:0;color:rgba(255,255,255,.6);font-size:11px; }.destination-seal { width:67px;height:67px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);color:var(--sand-200); }.destination-seal svg { width:30px;height:30px; }.route-destination .button { margin-right:auto; }.route-destination.reached .destination-seal { background:var(--sand-300);color:var(--brown-900); }

/* Challenge */
.challenge-header { padding:40px 0 50px;background:var(--brown-900);color:var(--white); }.back-link { display:inline-flex;align-items:center;gap:7px;color:inherit;opacity:.7;font-size:11px;font-weight:700; }.back-link svg { width:16px;transform:rotate(180deg); }.challenge-heading-row { margin-top:25px;display:flex;align-items:end;justify-content:space-between; }.challenge-kicker { color:var(--sand-300);font-size:11px;font-weight:800; }.challenge-title h1 { margin:3px 0;font-size:50px;line-height:1.2; }.challenge-location { display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.65);font-size:12px; }.challenge-location svg { width:15px; }.challenge-points { width:145px;height:145px;display:grid;place-content:center;text-align:center;border:1px solid rgba(255,255,255,.15);border-radius:50%; }.challenge-points svg { margin:0 auto;color:var(--sand-300); }.challenge-points strong { font-size:30px;line-height:1.1; }.challenge-points span { color:var(--sand-300);font-size:9px; }
.challenge-content { max-width:900px;padding:45px 0 90px; }.mission-card { padding:25px;display:flex;align-items:center;gap:20px;border-radius:20px;background:var(--sand-200); }.mission-icon { flex:0 0 auto;width:63px;height:63px;display:grid;place-items:center;border-radius:18px;background:var(--brown-900);color:var(--white); }.mission-icon svg { width:28px;height:28px; }.mission-card span { color:var(--brown-700);font-size:10px;font-weight:800; }.mission-card p { margin:2px 0 0;color:var(--brown-900);font-size:17px;font-weight:600;line-height:1.7; }
.challenge-form { margin-top:24px;padding:32px;border:1px solid #e4d7cb;border-radius:var(--radius-lg);background:var(--white);box-shadow:0 15px 45px rgba(59,36,24,.06); }.upload-zone { position:relative;min-height:400px;border:2px dashed var(--sand-300);border-radius:20px;background:var(--cream);overflow:hidden; }.upload-zone.dragging { background:var(--sand-100);border-color:var(--copper); }.upload-zone > input { position:absolute;width:1px;height:1px;opacity:0; }.upload-empty { min-height:400px;display:grid;place-content:center;justify-items:center;text-align:center;padding:30px; }.upload-icon { width:82px;height:82px;display:grid;place-items:center;border-radius:50%;background:var(--sand-200);color:var(--brown-900); }.upload-icon svg { width:35px;height:35px; }.upload-empty h2 { margin:16px 0 0;color:var(--brown-900);font-size:23px; }.upload-empty p { margin:2px 0 18px;color:var(--muted);font-size:11px; }.upload-preview { position:absolute;inset:0;background:var(--brown-950); }.upload-preview img { width:100%;height:100%;object-fit:contain; }.upload-preview button { position:absolute;bottom:16px;left:16px;padding:9px 16px;border:0;border-radius:99px;background:var(--white);color:var(--brown-900);font-size:11px;font-weight:800; }
.choice-challenge h2 { margin:0 0 20px;color:var(--brown-900);font-size:23px; }.choice-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.choice-option { min-height:76px;padding:14px 15px;display:grid;grid-template-columns:42px 1fr 25px;align-items:center;gap:12px;border:1px solid #e4d7cb;border-radius:15px;cursor:pointer;transition:.2s;color:var(--ink);font-size:13px;font-weight:600; }.choice-option:hover { border-color:var(--sand-500);background:var(--cream); }.choice-option input { position:absolute;opacity:0; }.choice-letter { width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--sand-100);color:var(--brown-700);font-weight:900; }.choice-option i { width:22px;height:22px;display:grid;place-items:center;border:1px solid #ddd0c4;border-radius:50%;color:transparent; }.choice-option i svg { width:13px; }.choice-option:has(input:checked) { border-color:var(--brown-700);background:#faf5ef;box-shadow:0 0 0 3px rgba(109,73,54,.08); }.choice-option:has(input:checked) .choice-letter { background:var(--brown-900);color:var(--white); }.choice-option:has(input:checked) i { background:var(--success);border-color:var(--success);color:var(--white); }
.hint-box { margin-top:18px;border-radius:14px;background:var(--sand-100);overflow:hidden; }.hint-box summary { padding:13px 16px;display:flex;align-items:center;gap:8px;color:var(--brown-700);font-size:12px;font-weight:800;cursor:pointer;list-style:none; }.hint-box summary::-webkit-details-marker { display:none; }.hint-box summary svg { width:17px; }.hint-box p { margin:0;padding:0 16px 14px;color:var(--muted);font-size:12px; }
.privacy-note { margin:22px 0 14px;padding:14px 16px;display:flex;align-items:flex-start;gap:11px;border-radius:13px;background:#f3f5f1;color:var(--success); }.privacy-note svg { flex:0 0 auto;width:18px;margin-top:2px; }.privacy-note p { margin:0;color:var(--muted);font-size:10px; }.privacy-note strong { display:block;color:var(--success);font-size:11px; }
.submit-challenge[disabled] { opacity:.65;cursor:wait;transform:none; }
.drawing-studio { border:1px solid #e5d8cd;border-radius:18px;overflow:hidden; }.drawing-toolbar { padding:12px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:var(--sand-100);border-bottom:1px solid #e5d8cd; }.color-tools,.size-tools { display:flex;align-items:center;gap:7px; }.color-tools .color { width:30px;height:30px;border:4px solid var(--sand-100);outline:1px solid transparent;border-radius:50%;background:var(--color); }.color-tools .color.active { outline-color:var(--brown-700); }.size-tools button,.clear-canvas { padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:10px; }.size-tools button.active { background:var(--white);color:var(--brown-900);font-weight:800; }.clear-canvas { color:var(--danger); }.canvas-wrap { position:relative;aspect-ratio:900/560;background:#fffdfa;touch-action:none; }.canvas-wrap canvas { display:block;width:100%;height:100%;cursor:crosshair;touch-action:none; }.canvas-placeholder { position:absolute;inset:0;display:grid;place-items:center;color:#c7b6a8;font-size:18px;pointer-events:none; }
.submitted-card { margin-top:24px;padding:45px;display:grid;justify-items:center;text-align:center;border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow); }.success-ring { width:85px;height:85px;display:grid;place-items:center;border-radius:50%;background:#edf5ed;color:var(--success);box-shadow:0 0 0 12px #f7faf7; }.success-ring svg { width:38px;height:38px; }.submitted-card > span { margin-top:20px;color:var(--success);font-size:11px;font-weight:800; }.submitted-card h2 { max-width:600px;margin:4px 0 20px;color:var(--brown-900);font-size:25px; }.submitted-card > img { max-height:420px;border-radius:17px;box-shadow:0 12px 30px rgba(59,36,24,.12); }.saved-answer { padding:17px 25px;border-radius:14px;background:var(--sand-100);color:var(--brown-900);font-weight:800; }.ai-feedback { max-width:650px;margin:18px 0;padding:12px 16px;display:flex;align-items:center;gap:8px;border-radius:12px;background:var(--sand-100);color:var(--muted);font-size:11px;text-align:right; }.ai-feedback svg { flex:0 0 auto;width:17px;color:var(--copper); }

/* Certificate */
.certificate-actions { padding:28px 0;display:flex;align-items:center;justify-content:space-between; }.certificate-actions .back-link { color:var(--brown-900); }.journey-document { padding-bottom:90px; }.certificate-card { position:relative;min-height:760px;padding:65px;display:grid;justify-items:center;align-content:center;text-align:center;border:10px solid var(--white);outline:1px solid var(--sand-300);border-radius:8px;background:var(--sand-100);box-shadow:var(--shadow);overflow:hidden; }.certificate-card::before,.certificate-card::after { content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(59,36,24,.14);transform:rotate(45deg); }.certificate-card::before { right:-120px;top:-120px;box-shadow:0 0 0 28px rgba(59,36,24,.035),0 0 0 56px rgba(59,36,24,.02); }.certificate-card::after { left:-120px;bottom:-120px;box-shadow:0 0 0 28px rgba(59,36,24,.035),0 0 0 56px rgba(59,36,24,.02); }
.certificate-brand { position:absolute;top:35px;right:42px;display:grid;grid-template-columns:auto auto;align-items:center;text-align:right;column-gap:9px;color:var(--brown-900); }.certificate-brand .brand-mark { grid-row:1/3;width:32px;height:32px; }.certificate-brand .brand-mark i { width:6px; }.certificate-brand strong { font-size:20px;line-height:1; }.certificate-brand small { color:var(--muted);font-size:8px; }.certificate-medal { width:100px;height:100px;display:grid;place-items:center;border-radius:50%;background:var(--brown-900);color:var(--sand-200);box-shadow:0 0 0 13px rgba(59,36,24,.08); }.certificate-medal svg { width:47px;height:47px; }.certificate-overline { margin-top:25px;color:var(--brown-700);font-size:11px;font-weight:800;letter-spacing:1px; }.certificate-card h1 { margin:15px 0 0;color:var(--muted);font-size:20px;font-weight:500; }.certificate-card h2 { position:relative;margin:3px 0 12px;color:var(--brown-900);font-size:52px;line-height:1.3; }.certificate-card h2::after { content:"";position:absolute;right:10%;left:10%;bottom:1px;height:7px;background:var(--sand-300);opacity:.5;z-index:-1; }.certificate-card > p { max-width:680px;margin:0;color:var(--muted);font-size:15px; }.certificate-score { margin:25px 0 22px;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:10px; }.certificate-score span { grid-column:1/3;color:var(--copper);font-size:9px;font-weight:800; }.certificate-score strong { color:var(--brown-900);font-size:52px;line-height:1; }.certificate-score small { color:var(--brown-700);font-weight:700; }.certificate-meta { width:min(750px,100%);padding-top:18px;display:grid;grid-template-columns:1fr 1fr 1.6fr;border-top:1px solid var(--sand-300); }.certificate-meta div { padding:5px 15px;border-left:1px solid var(--sand-300); }.certificate-meta div:last-child { border:0; }.certificate-meta span { display:block;color:var(--muted);font-size:8px; }.certificate-meta strong { color:var(--brown-900);font-size:11px; }.certificate-footer { position:absolute;bottom:32px;display:flex;align-items:center;gap:14px;color:var(--brown-700);font-size:10px;font-weight:800; }.certificate-footer i { width:45px;height:1px;background:var(--sand-500); }
.journey-story { margin-top:60px; }.section-label > em { color:var(--muted);font-size:11px;font-style:normal; }.story-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:17px; }.story-card { border-radius:19px;background:var(--white);overflow:hidden;box-shadow:0 10px 30px rgba(59,36,24,.07); }.story-media { position:relative;aspect-ratio:4/3;background:var(--brown-900);overflow:hidden; }.story-media img { width:100%;height:100%;object-fit:cover; }.story-number { position:absolute;top:12px;right:12px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:var(--brown-900);font-size:11px;font-weight:900; }.answer-art { width:100%;height:100%;padding:20px;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--sand-200); }.answer-art svg { width:50px;height:50px;margin-bottom:12px; }.answer-art span { font-size:13px;font-weight:700; }.story-copy { position:relative;padding:18px; }.story-copy > span { display:flex;align-items:center;gap:5px;color:var(--muted);font-size:9px; }.story-copy > span svg { width:12px; }.story-copy h3 { margin:3px 0;color:var(--brown-900);font-size:17px; }.story-copy small { position:absolute;left:17px;bottom:18px;color:var(--success);font-size:10px;font-weight:800; }
.site-footer { padding:25px 0;background:var(--brown-950);color:rgba(255,255,255,.5); }.footer-inner { display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px; }.site-footer p { margin:0; }
.site-footer a { color:var(--sand-300);text-decoration:underline;text-underline-offset:3px; }
.privacy-content { padding:70px 0 100px; }.privacy-card { max-width:850px;margin:auto;padding:45px;border-radius:var(--radius-xl);background:var(--white);box-shadow:var(--shadow); }.privacy-card h1 { margin:8px 0 10px;color:var(--brown-900);font-size:45px; }.privacy-card > p { color:var(--muted); }.privacy-card section { padding:20px 0;border-top:1px solid #eadfd4; }.privacy-card h2 { margin:0 0 5px;color:var(--brown-900);font-size:20px; }.privacy-card section p,.privacy-card li { color:var(--muted);font-size:13px; }.privacy-card ul { margin:8px 0;padding-right:20px; }
.mobile-app-nav { display:none; }

.reveal { animation: reveal .75s ease both; }.reveal-delay { animation-delay:.16s; }.reveal-delay-2 { animation-delay:.28s; }
@keyframes reveal { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

@media (max-width: 980px) {
    .hero-grid { grid-template-columns:1fr;min-height:auto;padding:70px 0; }.hero-art { display:none; }.hero-copy { padding:20px 0;max-width:720px; }
    .experience-grid { grid-template-columns:1fr 1fr; }.feature-card:last-child { grid-column:1/3;min-height:260px; }.feature-icon { margin-bottom:30px; }
    .route-preview-grid { grid-template-columns:1fr;gap:50px; }.mini-map { min-height:500px; }
    .auth-shell { grid-template-columns:1fr;max-width:720px; }.auth-panel { border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:45px; }.auth-aside { min-height:380px;border-radius:0 0 var(--radius-xl) var(--radius-xl); }.auth-orbit,.route-seal { top:18%;left:22%; }
    .next-challenge-card { grid-template-columns:60px 75px 1fr; }.next-action { grid-column:2/4;display:flex;justify-content:flex-start;gap:8px; }.next-action small { margin:0; }.next-action .button { margin-right:auto; }
    .story-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 720px) {
    .logout-link { display:none; }
    body.app-page { padding-bottom:75px; }.shell { width:min(calc(100% - 26px),var(--shell)); }.section { padding:75px 0; }
    .site-header { height:74px; }.brand-mark { width:33px;height:33px; }.brand-copy strong { font-size:20px; }.brand-copy small { display:none; }.public-nav > a:not(.button) { display:none; }.points-pill { height:36px;padding:0 11px;font-size:11px; }.avatar { width:36px;height:36px; }
    .hero { min-height:auto; }.hero-grid { padding:55px 0 70px; }.hero h1 { font-size:52px;letter-spacing:-2px; }.hero-copy > p { font-size:15px; }.hero-actions { align-items:flex-start;flex-direction:column;gap:18px; }.hero-meta { margin-top:45px;gap:15px;justify-content:space-between; }.hero-meta div { min-width:0;flex:1; }.hero-meta strong { font-size:21px; }
    .section-heading h2,.route-preview-copy h2 { font-size:39px; }.section-heading p,.route-preview-copy p { font-size:14px; }.experience-grid { grid-template-columns:1fr; }.feature-card:last-child { grid-column:auto; }.feature-card { min-height:280px;padding:28px; }.mini-map { min-height:450px; }.map-stop span { max-width:120px; }.map-distance { width:100px;height:100px; }.map-distance strong { font-size:29px; }.final-cta { padding:80px 0; }.final-cta h2 { font-size:43px; }
    .auth-shell { width:100%;padding:0; }.auth-panel { padding:40px 24px;border-radius:0; }.auth-aside { min-height:320px;padding:30px;border-radius:0; }.auth-heading h1 { font-size:42px; }.auth-aside blockquote { font-size:23px; }.auth-orbit,.route-seal { width:130px;height:130px;left:25%; }.auth-orbit span { font-size:38px; }.route-seal svg { width:55px;height:55px; }
    .app-hero { padding:45px 0 85px; }.app-hero-grid { grid-template-columns:1fr; }.app-hero h1 { font-size:42px; }.progress-orbit { position:absolute;left:15px;top:100px;width:105px;height:105px;padding:7px; }.progress-orbit strong { font-size:23px; }.progress-orbit span { font-size:8px; }.dashboard-content { margin-top:-42px; }.start-journey-card { grid-template-columns:1fr; }.start-card-art { min-height:230px; }.start-card-copy { padding:28px; }.start-card-copy h2 { font-size:29px; }.start-card-copy dl { grid-template-columns:1fr; }.stats-row { grid-template-columns:1fr 1fr; }.stats-row article { padding:20px; }.stats-row article:last-child { grid-column:1/3; }.stats-row strong { font-size:27px; }.completion-banner { grid-template-columns:auto 1fr;padding:25px; }.completion-banner .button { grid-column:1/3;width:100%; }.completion-medal { width:60px;height:60px; }.completion-banner h2 { font-size:21px; }.next-challenge-card { grid-template-columns:50px 1fr;padding:22px; }.next-index { font-size:37px; }.next-icon { width:55px;height:55px;grid-column:1;grid-row:2; }.next-copy { grid-column:2;grid-row:1/3; }.next-copy h3 { font-size:21px; }.next-action { grid-column:1/3; }.mini-stops span { display:none; }.mini-stops::before { right:7%;left:7%; }.journey-progress-card { padding:22px; }
    .route-header { padding:40px 0; }.route-header-grid { grid-template-columns:1fr; }.route-header h1 { font-size:43px; }.route-score { width:100%; }.route-map-section { padding-top:35px; }.route-origin { padding-inline:10px; }.route-timeline { margin:20px auto; }.route-timeline::before { right:25px;transform:none; }.route-stop { display:grid;grid-template-columns:55px 1fr;margin-bottom:23px; }.route-stop:nth-child(n) .stop-card { grid-column:2;grid-row:1; }.stop-node { grid-column:1;grid-row:1;width:43px;height:43px;border-width:6px; }.stop-card { padding:21px; }.stop-card h2 { font-size:21px; }.route-destination { align-items:flex-start;padding:22px; }.destination-seal { width:52px;height:52px; }.route-destination .button { width:100%;margin:12px 0 0; }.route-destination { flex-wrap:wrap; }
    .challenge-header { padding:30px 0 40px; }.challenge-heading-row { align-items:start; }.challenge-title h1 { font-size:38px; }.challenge-points { width:100px;height:100px; }.challenge-points strong { font-size:23px; }.challenge-content { padding:25px 13px 70px; }.mission-card { align-items:flex-start;padding:19px; }.mission-icon { width:50px;height:50px; }.mission-card p { font-size:14px; }.challenge-form { padding:17px;border-radius:19px; }.upload-zone,.upload-empty { min-height:340px; }.choice-grid { grid-template-columns:1fr; }.drawing-toolbar { flex-wrap:wrap; }.clear-canvas { margin-right:auto; }.submitted-card { padding:30px 18px; }.submitted-card h2 { font-size:21px; }
    .certificate-actions { padding:20px 0; }.certificate-actions .button { min-height:42px;padding:0 15px;font-size:11px; }.certificate-card { min-height:700px;padding:55px 25px;border-width:6px; }.certificate-brand { right:22px;top:22px; }.certificate-medal { width:80px;height:80px; }.certificate-card h2 { font-size:38px; }.certificate-card > p { font-size:12px; }.certificate-meta { grid-template-columns:1fr; }.certificate-meta div { padding:8px;border:0;border-bottom:1px solid var(--sand-300); }.certificate-meta div:last-child { border:0; }.story-grid { grid-template-columns:1fr; }.footer-inner { display:block;text-align:center; }.footer-inner span { display:block; }
    .privacy-content { padding:25px 0 70px; }.privacy-card { padding:28px 20px;border-radius:22px; }.privacy-card h1 { font-size:35px; }
    .mobile-app-nav { position:fixed;z-index:80;right:12px;bottom:max(10px,env(safe-area-inset-bottom));left:12px;height:64px;padding:7px 12px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(40,22,15,.96);box-shadow:0 15px 40px rgba(40,22,15,.3);backdrop-filter:blur(16px); }.mobile-app-nav a { display:grid;justify-items:center;gap:1px;color:rgba(255,255,255,.55);font-size:9px; }.mobile-app-nav svg { width:21px; }.mobile-app-nav a.active { color:var(--sand-200); }.mobile-app-nav .route-main { margin-top:-26px; }.mobile-app-nav .route-main svg { width:48px;height:48px;padding:12px;border-radius:50%;background:var(--sand-200);color:var(--brown-900);box-shadow:0 7px 18px rgba(0,0,0,.25); }.app-page .site-footer { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
}

@media print {
    @page { size:A4 landscape;margin:8mm; }
    body { background:#fff;padding:0!important; }
    .site-header,.site-footer,.mobile-app-nav,.no-print,.flash-stack { display:none!important; }
    .journey-document { width:100%;padding:0; }
    .certificate-card { min-height:180mm;box-shadow:none;break-inside:avoid; }
}