:root{
  --ink:#0a1813;--forest:#10271f;--forest2:#17382c;--forest3:#214638;
  --gold:#d2ab5f;--gold2:#efd495;--cream:#f4ead2;--muted:#9dad9f;--line:rgba(221,190,119,.28);--white:#fbf7ec;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100%;background:#091510;color:var(--white);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 0,rgba(212,171,95,.08),transparent 24%),radial-gradient(circle at 80% 20%,rgba(60,104,83,.10),transparent 25%);z-index:-2}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.10;z-index:50;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
a{color:inherit;text-decoration:none}.topbar{height:86px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;gap:30px;position:absolute;top:0;left:0;right:0;z-index:20;border-bottom:1px solid rgba(236,211,150,.12);background:linear-gradient(180deg,rgba(4,11,8,.55),rgba(4,11,8,.05));backdrop-filter:blur(3px)}
.brand{display:flex;align-items:center;gap:11px;min-width:210px}.brand .shell-mark{width:46px;height:46px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold2);font:30px Georgia;transform:rotate(-12deg);box-shadow:0 0 24px rgba(210,171,95,.14)}.brand strong{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;line-height:.82;letter-spacing:.08em;color:#f1ddad}.brand small{display:block;margin-top:7px;font-size:8px;letter-spacing:.35em;color:#d1bd8e}
.main-nav{display:flex;gap:30px;font-family:'Cormorant Garamond',Georgia,serif;font-size:16px}.main-nav a{opacity:.86;position:relative}.main-nav a:first-child:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:1px;background:var(--gold)}.main-nav a:hover{color:var(--gold2)}
.top-actions{display:flex;align-items:center;gap:12px}.language{font-size:10px;letter-spacing:.16em;color:#d9d8cf}.primary,.ghost,.text-button{border:0;cursor:pointer}.primary{padding:15px 23px;border-radius:999px;background:linear-gradient(180deg,#e5c371,#bd9142);color:#142219;font-weight:600;box-shadow:0 10px 34px rgba(0,0,0,.28);transition:.22s}.primary:hover{transform:translateY(-1px);filter:brightness(1.05)}.primary:disabled{opacity:.38;cursor:not-allowed;transform:none}.small-primary{padding:12px 19px;font-size:12px}.ghost{padding:11px 15px;border:1px solid rgba(228,198,127,.38);border-radius:999px;color:#eee3c7;background:rgba(9,24,18,.25)}.hidden{display:none!important}
.screen{display:none;min-height:100vh}.screen.active{display:block}
.hero-screen{position:relative;min-height:100vh;overflow:hidden;padding:144px 6vw 190px;background:#09140f}.hero-photo{position:absolute;inset:0;background-image:url('assets/hero-camino.webp');background-size:cover;background-position:63% 47%;transform:scale(1.025);filter:saturate(.88) contrast(1.02) brightness(.83)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,7,.93) 0%,rgba(5,14,10,.82) 31%,rgba(5,15,10,.28) 59%,rgba(4,10,8,.18) 74%,rgba(3,9,6,.58) 100%),linear-gradient(180deg,rgba(3,9,7,.30),transparent 34%,rgba(3,10,7,.55) 100%)}
.hero-content{position:relative;z-index:3;width:min(610px,48vw);margin-top:4vh}.eyebrow{font-size:10px;letter-spacing:.34em;color:var(--gold2);font-weight:600;margin-bottom:16px}.hero-content h1,.result-intro h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-.035em;margin:0}.hero-content h1{font-size:clamp(66px,7.4vw,112px);line-height:.72;color:#fff9e8;text-shadow:0 12px 34px rgba(0,0,0,.32)}.hero-content h1 em{font-style:normal;color:var(--gold2)}.lead{max-width:560px;font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;line-height:1.4;color:#ede9dc;margin:28px 0 30px;text-shadow:0 4px 16px rgba(0,0,0,.45)}.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.hero-button{padding:17px 27px;font-size:13px}.micro{font-size:10px;letter-spacing:.08em;color:#c4c4b9}.hero-features{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;max-width:590px;border-top:1px solid rgba(231,205,142,.22);border-bottom:1px solid rgba(231,205,142,.15)}.hero-features>div{padding:17px 18px 17px 0;display:grid;grid-template-columns:34px 1fr;border-right:1px solid rgba(231,205,142,.14)}.hero-features>div:last-child{border-right:0;padding-left:17px}.hero-features>div:nth-child(2){padding-left:17px}.hero-features span{grid-row:1/3;color:var(--gold2);font:26px Georgia}.hero-features strong{font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;color:#f1e7cf}.hero-features small{font-size:9px;line-height:1.3;color:#a9b4ab}.hero-content blockquote{margin:30px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-style:italic;color:#e3cf9d}.hero-content cite{display:block;font-family:Inter,Arial,sans-serif;font-size:8px;font-style:normal;letter-spacing:.14em;margin-top:6px;color:#acaa9e}
.contour{position:absolute;border:1px solid rgba(231,203,134,.08);border-radius:46% 54% 43% 57%/55% 36% 64% 45%;z-index:1}.contour-a{width:540px;height:370px;right:-170px;top:140px;transform:rotate(18deg)}.contour-b{width:710px;height:540px;right:-240px;top:55px;transform:rotate(-8deg)}
.journey-ribbon{position:absolute;z-index:5;bottom:0;left:0;right:0;height:126px;padding:22px 6vw;background:linear-gradient(180deg,rgba(8,30,23,.94),rgba(6,21,16,.98));border-top:1px solid rgba(217,183,104,.36);box-shadow:0 -20px 50px rgba(0,0,0,.23);display:grid;grid-template-columns:210px 1fr;column-gap:34px;align-items:center}.ribbon-intro{display:flex;align-items:center;gap:13px}.walker{font-size:32px;color:var(--gold2)}.ribbon-intro strong,.ribbon-intro small{display:block;font-family:'Cormorant Garamond',Georgia,serif}.ribbon-intro strong{font-size:17px}.ribbon-intro small{font-size:13px;color:#b8b7ae;margin-top:2px}.route-line{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto;align-items:center}.route-line i{height:1px;background:linear-gradient(90deg,rgba(224,190,108,.26),rgba(224,190,108,.8),rgba(224,190,108,.26));position:relative}.route-line i:nth-of-type(odd){transform:rotate(1deg)}.dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--gold);background:#10291f}.dot.active{background:var(--gold2);box-shadow:0 0 15px rgba(229,194,111,.55)}.shell-finish{font:26px Georgia;color:var(--gold2);transform:rotate(-10deg)}.ribbon-labels{grid-column:2;display:flex;justify-content:space-between;margin-top:-8px;font-size:7px;letter-spacing:.16em;color:#a8a899;padding-right:4px}
.quiz-screen{position:relative;padding:130px 5vw 70px;background:radial-gradient(circle at 50% -15%,#244a3b 0,#10271f 40%,#081510 78%);overflow:hidden}.quiz-atmosphere{position:absolute;inset:0;opacity:.16;background-image:url('assets/hero-camino.webp');background-size:cover;background-position:center;filter:blur(5px) saturate(.65);transform:scale(1.05)}.quiz-atmosphere:after{content:"";position:absolute;inset:0;background:rgba(4,14,10,.78)}.quiz-wrap{position:relative;z-index:2;max-width:1120px;margin:auto}.progress-row{display:grid;grid-template-columns:180px 1fr 180px;align-items:end;gap:25px;margin-bottom:24px}.question-meta span{font-size:9px;letter-spacing:.16em;color:#afbaaf}.question-meta strong{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;color:#e2d2a7;margin-top:5px}.journey-note{text-align:right;font-family:'Cormorant Garamond',Georgia,serif;font-size:14px;font-style:italic;color:#b6a67e}.progress-track{position:relative;padding-bottom:6px}.progress{height:2px;background:#32483f}.progress>div{height:100%;background:linear-gradient(90deg,#c39543,#f0d492);transition:.35s}.progress-nodes{display:none}.question-shell{position:relative;min-height:650px;padding:60px 62px 42px;border:1px solid rgba(214,181,104,.34);border-radius:20px;background:linear-gradient(180deg,rgba(18,49,38,.91),rgba(6,20,15,.94));box-shadow:0 36px 110px rgba(0,0,0,.34),inset 0 0 90px rgba(213,179,98,.035);overflow:hidden}.question-shell:before{content:"";position:absolute;inset:13px;border:1px solid rgba(220,190,121,.12);border-radius:14px;pointer-events:none}.question-shell:after{content:"";position:absolute;width:420px;height:420px;left:50%;top:-265px;transform:translateX(-50%);border:1px solid rgba(218,185,108,.11);border-radius:50%;box-shadow:0 0 0 26px rgba(216,182,104,.02),0 0 0 54px rgba(216,182,104,.018)}.corner{position:absolute;width:26px;height:26px;border-color:rgba(218,184,106,.45);z-index:2}.c1{left:22px;top:22px;border-left:1px solid;border-top:1px solid}.c2{right:22px;top:22px;border-right:1px solid;border-top:1px solid}.c3{left:22px;bottom:22px;border-left:1px solid;border-bottom:1px solid}.c4{right:22px;bottom:22px;border-right:1px solid;border-bottom:1px solid}.question-icon{width:52px;height:52px;border:1px solid rgba(224,190,109,.72);border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;color:var(--gold2);font:22px Georgia;box-shadow:0 0 34px rgba(208,163,76,.08)}.question-shell h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(34px,4.3vw,54px);font-weight:500;line-height:1.02;text-align:center;max-width:850px;margin:0 auto 8px;color:#fff7e6}.question-subtitle{text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;color:#aebcb1;max-width:690px;margin:0 auto 30px}.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:920px;margin:auto}.answer{position:relative;min-height:92px;padding:20px 20px 20px 68px;border:1px solid rgba(205,170,92,.28);border-radius:9px;background:linear-gradient(135deg,rgba(7,22,16,.62),rgba(27,58,45,.35));cursor:pointer;display:flex;align-items:center;transition:.2s;overflow:hidden}.answer:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(231,198,122,.06),transparent);transform:translateX(-100%);transition:.35s}.answer:hover{border-color:rgba(232,199,121,.62);transform:translateY(-1px);background:linear-gradient(135deg,rgba(15,38,28,.86),rgba(35,74,57,.48))}.answer:hover:after{transform:translateX(100%)}.answer.selected{border-color:#e2bf6c;background:linear-gradient(100deg,rgba(187,139,59,.20),rgba(23,61,45,.58));box-shadow:inset 3px 0 0 #d9ae56,0 10px 35px rgba(0,0,0,.16)}.answer .badge{position:absolute;left:20px;width:31px;height:31px;border:1px solid rgba(231,200,127,.5);border-radius:50%;display:grid;place-items:center;color:#d5ba7b;font-size:10px}.answer.selected .badge{background:var(--gold2);color:#15241b;border-color:var(--gold2)}.answer strong{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:19px;color:#f6edd8}.answer small{display:block;font-size:10px;line-height:1.5;color:#9daf9f;margin-top:3px}.quiz-nav{max-width:920px;margin:34px auto 0;display:flex;align-items:center;justify-content:space-between}.text-button{background:transparent;color:#b7c0b8;font-size:11px;padding:10px}.mini-mountain{font-family:Georgia;color:#a98a4c;letter-spacing:-.25em;opacity:.7}.question-quote{text-align:center;margin-top:18px;font-family:'Cormorant Garamond',Georgia,serif;font-size:13px;font-style:italic;color:#8d947f}
.result-screen{padding:130px 5vw 80px;background:radial-gradient(circle at 50% -15%,#244a3b 0,#10271f 40%,#081510 78%)}.result-wrap{max-width:1180px;margin:auto}.result-intro{text-align:center}.result-intro h2{font-size:clamp(46px,5.7vw,74px);line-height:.95;color:#fff7e7}.result-intro h2 em{font-style:normal;color:var(--gold2)}.result-lead{max-width:620px;margin:16px auto 0;font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;color:#aab7ad}.profile-card{max-width:850px;margin:32px auto 48px;padding:25px;border:1px solid rgba(209,173,91,.29);border-radius:12px;background:rgba(19,52,39,.62);box-shadow:0 22px 60px rgba(0,0,0,.20);font-size:13px;line-height:1.65;color:#c7d0c8}.profile-card strong{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;color:#ead5a4;margin-bottom:5px}.profile-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:15px}.profile-tags span{border:1px solid rgba(211,180,107,.35);border-radius:999px;padding:6px 10px;font-size:9px;letter-spacing:.08em;color:#cdbd93}.top-three{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px}.route-card{position:relative;min-height:410px;padding:27px;border:1px solid rgba(208,178,107,.27);border-radius:12px;background:linear-gradient(180deg,rgba(38,78,60,.76),rgba(11,27,21,.95));box-shadow:0 24px 70px rgba(0,0,0,.19);overflow:hidden}.route-card:first-child{transform:translateY(-10px);border-color:rgba(232,199,120,.63);box-shadow:0 30px 80px rgba(0,0,0,.28)}.route-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 83% 0,rgba(224,192,112,.13),transparent 34%);pointer-events:none}.rank{font-size:9px;letter-spacing:.18em;color:#c9ad6b}.score{position:absolute;right:22px;top:22px;width:64px;height:64px;border-radius:50%;border:1px solid rgba(224,194,119,.5);display:grid;place-items:center;color:#ead69f;font-weight:700;font-size:17px}.route-card h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:31px;font-weight:500;margin:30px 0 7px}.route-card .tagline{font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;color:#afbeb4;min-height:36px}.route-card .why{font-size:12px;line-height:1.65;color:#d1dbd4;margin-top:22px}.route-stats{display:flex;gap:7px;flex-wrap:wrap;margin-top:24px}.route-stats span{font-size:9px;border:1px solid rgba(202,172,105,.26);border-radius:999px;padding:7px 9px;color:#bead84}.result-actions{display:flex;justify-content:center;gap:13px;margin-top:40px}.detail-panel{margin-top:30px;border:1px solid rgba(212,181,107,.31);border-radius:10px;padding:28px;background:rgba(8,22,17,.7);font-size:13px;line-height:1.7;color:#c7d1ca}.detail-panel h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:33px;color:#e1c98d;margin:0 0 10px}
@media(max-width:980px){.main-nav{display:none}.topbar{position:absolute}.hero-screen{padding-left:7vw;padding-right:7vw}.hero-photo{background-position:58% 48%}.hero-shade{background:linear-gradient(90deg,rgba(3,10,7,.93),rgba(3,10,7,.68) 70%,rgba(3,10,7,.35))}.hero-content{width:min(690px,80vw)}.journey-ribbon{grid-template-columns:1fr;height:110px}.ribbon-intro{display:none}.route-line,.ribbon-labels{grid-column:1}.progress-row{grid-template-columns:160px 1fr}.journey-note{display:none}.top-three{grid-template-columns:1fr}.route-card:first-child{transform:none}}
@media(max-width:680px){.topbar{height:74px;padding:0 18px}.brand{min-width:0}.brand .shell-mark{width:37px;height:37px;font-size:24px}.brand strong{font-size:15px}.brand small{display:none}.top-actions .language,.small-primary{display:none}.hero-screen{padding:118px 22px 160px}.hero-photo{background-position:59% center;filter:saturate(.8) brightness(.70)}.hero-shade{background:linear-gradient(180deg,rgba(3,10,7,.40),rgba(3,10,7,.82) 45%,rgba(3,10,7,.95) 100%),linear-gradient(90deg,rgba(3,10,7,.72),rgba(3,10,7,.22))}.hero-content{width:100%;margin-top:25vh}.hero-content h1{font-size:64px}.lead{font-size:19px}.hero-features{grid-template-columns:1fr;max-width:350px}.hero-features>div,.hero-features>div:nth-child(2),.hero-features>div:last-child{padding:11px 0;border-right:0;border-bottom:1px solid rgba(231,205,142,.12)}.hero-content blockquote{display:none}.journey-ribbon{height:106px;padding:22px}.ribbon-labels{font-size:6px}.quiz-screen,.result-screen{padding:100px 15px 45px}.progress-row{grid-template-columns:1fr}.progress-track{order:2}.question-shell{padding:47px 18px 30px;min-height:0;border-radius:12px}.answers{grid-template-columns:1fr}.answer{min-height:83px;padding-left:60px}.question-shell h2{font-size:36px}.question-subtitle{font-size:15px}.quiz-nav{margin-top:26px}.mini-mountain{display:none}.result-intro h2{font-size:48px}.result-actions{flex-direction:column}.result-actions button{width:100%}}
/* v0.3 — visual questions + premium results */
.visual-answers{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1040px;gap:13px}
.visual-answer{display:block;padding:0 0 17px;min-height:255px;background:#0d2119}
.visual-answer .answer-scene{height:132px;position:relative;overflow:hidden;border-radius:8px 8px 0 0;border-bottom:1px solid rgba(219,184,103,.24)}
.visual-answer .answer-scene:before,.visual-answer .answer-scene:after{content:"";position:absolute;inset:0}
.visual-answer .answer-scene:after{background:linear-gradient(180deg,transparent 38%,rgba(7,20,15,.82))}
.visual-answer .scene-mark{position:absolute;z-index:2;right:14px;bottom:10px;font:38px Georgia;color:#f0d48d;text-shadow:0 4px 15px rgba(0,0,0,.45)}
.visual-answer .badge{left:13px;top:114px;z-index:4;background:#10261d}
.visual-answer .answer-copy{padding:18px 14px 0}
.visual-answer .answer-copy strong{font-size:18px;line-height:1.05}
.visual-answer .answer-copy small{font-size:9px;margin-top:6px}
.select-tick{position:absolute;right:12px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--gold2);color:#16261d;display:none;place-items:center;font-weight:800;z-index:6}
.visual-answer.selected .select-tick{display:grid}
[data-visual="ocean"] .answer-scene{background:linear-gradient(180deg,#91b9c2 0 47%,#1d6170 48% 63%,#0b302a 64%)}
[data-visual="ocean"] .answer-scene:before{clip-path:polygon(0 66%,16% 55%,30% 62%,43% 48%,58% 61%,73% 50%,100% 63%,100% 100%,0 100%);background:#122d23}
[data-visual="mountains"] .answer-scene{background:linear-gradient(#7d9d9d,#c4ae79)}
[data-visual="mountains"] .answer-scene:before{clip-path:polygon(0 87%,18% 47%,28% 67%,46% 26%,64% 67%,78% 39%,100% 78%,100% 100%,0 100%);background:linear-gradient(135deg,#314b43,#101d18)}
[data-visual="forest"] .answer-scene{background:linear-gradient(#527161,#152b22)}
[data-visual="forest"] .answer-scene:before{background:repeating-linear-gradient(82deg,transparent 0 17px,#0d271b 18px 28px,transparent 29px 39px);opacity:.9}
[data-visual="vineyard"] .answer-scene{background:linear-gradient(#b5aa76 0 48%,#566438 49%)}
[data-visual="vineyard"] .answer-scene:before{background:repeating-linear-gradient(165deg,transparent 0 14px,rgba(29,61,31,.9) 15px 21px,transparent 22px 32px);top:48%}
[data-visual="freedom"] .answer-scene,[data-visual="spectacular"] .answer-scene,[data-visual="beauty"] .answer-scene{background:radial-gradient(circle at 70% 28%,#e0b765 0 5%,transparent 6%),linear-gradient(160deg,#657c72,#9d8155 56%,#1c382c)}
[data-visual="connection"] .answer-scene,[data-visual="pilgrims"] .answer-scene,[data-visual="people"] .answer-scene{background:radial-gradient(circle at 35% 40%,#c6a263 0 7%,transparent 8%),radial-gradient(circle at 52% 35%,#d6b777 0 7%,transparent 8%),radial-gradient(circle at 68% 43%,#a8864f 0 7%,transparent 8%),linear-gradient(#526f61,#10251c)}
[data-visual="wonder"] .answer-scene,[data-visual="classic"] .answer-scene,[data-visual="history"] .answer-scene{background:linear-gradient(#a59a79,#4f5f4e)}
[data-visual="wonder"] .answer-scene:before,[data-visual="classic"] .answer-scene:before,[data-visual="history"] .answer-scene:before{inset:30px 25%;clip-path:polygon(15% 100%,15% 45%,28% 45%,28% 24%,40% 24%,40% 7%,52% 7%,52% 24%,64% 24%,64% 45%,79% 45%,79% 100%);background:#183027}
[data-visual="stillness"] .answer-scene,[data-visual="meaning"] .answer-scene,[data-visual="reflection"] .answer-scene,[data-visual="silence"] .answer-scene{background:radial-gradient(circle at 72% 27%,#e1c880 0 8%,transparent 9%),linear-gradient(#33483f,#0d2119 68%)}
[data-visual="hidden"] .answer-scene,[data-visual="village"] .answer-scene,[data-visual="quietvillage"] .answer-scene{background:linear-gradient(#798b75,#6d724c 56%,#263b27)}
[data-visual="hidden"] .answer-scene:before,[data-visual="village"] .answer-scene:before,[data-visual="quietvillage"] .answer-scene:before{clip-path:polygon(8% 75%,8% 53%,23% 43%,38% 54%,38% 38%,54% 28%,68% 43%,80% 43%,93% 57%,93% 75%);background:#26382d}
[data-visual="food"] .answer-scene{background:radial-gradient(circle at 42% 48%,#8a4432 0 11%,transparent 12%),radial-gradient(circle at 62% 50%,#b17c3e 0 13%,transparent 14%),linear-gradient(#837258,#25382b)}
[data-visual="wildnature"] .answer-scene{background:linear-gradient(#6a8978,#163323)}
[data-visual="wildnature"] .answer-scene:before{clip-path:polygon(0 100%,0 65%,12% 38%,22% 68%,34% 26%,48% 67%,59% 32%,68% 66%,82% 24%,100% 58%,100% 100%);background:#10291c}
[data-visual="comfort"] .answer-scene{background:radial-gradient(circle at 50% 35%,#e0ba69 0 5%,transparent 6%),linear-gradient(#725d45,#1d3025)}
[data-visual="summit"] .answer-scene{background:linear-gradient(#8ca0a0,#6d745f)}
[data-visual="summit"] .answer-scene:before{clip-path:polygon(0 100%,15% 72%,34% 30%,49% 65%,63% 38%,82% 69%,100% 53%,100% 100%);background:#1d3328}
.profile-card{display:grid;grid-template-columns:90px 1fr;align-items:center;text-align:left;padding:28px 32px}
.profile-card .profile-compass{width:70px;height:70px;border:1px solid rgba(225,190,111,.48);border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 8px rgba(225,190,111,.035)}
.profile-card .profile-compass span{font:31px Georgia;color:var(--gold2)}
.profile-copy small{font-size:8px;letter-spacing:.18em;color:#a99569}.profile-copy strong{margin:2px 0 1px}.profile-copy p{margin:0;color:#bac7bf}.profile-tags{justify-content:flex-start}
.top-three{align-items:start}.route-card{padding:0;min-height:530px;background:#0b1e17}.route-card:first-child{min-height:560px}.route-visual{height:155px;position:relative;padding:18px;overflow:hidden;background:linear-gradient(145deg,#335e4b,#10261d)}.route-visual:before,.detail-hero:before{content:"";position:absolute;inset:0;opacity:.55;background:radial-gradient(circle at 72% 30%,rgba(236,204,126,.34),transparent 19%),repeating-radial-gradient(ellipse at 15% 100%,transparent 0 24px,rgba(228,197,119,.07) 25px 26px)}
.route-norte .route-visual,.route-norte.detail-hero{background:linear-gradient(145deg,#477479,#153b37)}.route-primitivo .route-visual,.route-primitivo.detail-hero{background:linear-gradient(145deg,#4f6258,#17291f)}.route-frances .route-visual,.route-frances.detail-hero{background:linear-gradient(145deg,#826a40,#2c3828)}.route-portugues .route-visual,.route-portugues.detail-hero{background:linear-gradient(145deg,#55734d,#223425)}.route-costa .route-visual,.route-costa.detail-hero{background:linear-gradient(145deg,#4c8490,#1a4548)}.route-ingles .route-visual,.route-ingles.detail-hero{background:linear-gradient(145deg,#64766d,#24382f)}.route-plata .route-visual,.route-plata.detail-hero{background:linear-gradient(145deg,#8d7247,#403822)}.route-invierno .route-visual,.route-invierno.detail-hero{background:linear-gradient(145deg,#59613b,#283122)}
.route-symbol{position:absolute;right:22px;bottom:-8px;font:105px Georgia;color:rgba(238,208,139,.14)}.route-visual .rank{position:relative;z-index:2}.score-ring{position:absolute;right:17px;top:17px;width:68px;height:68px;border-radius:50%;border:1px solid rgba(240,211,145,.66);display:grid;place-items:center;align-content:center;background:rgba(7,20,15,.35);z-index:4}.score-ring b{font-size:18px;color:#f2d793}.score-ring small{font-size:6px;letter-spacing:.15em;color:#cbb786}.route-body{padding:22px 23px 24px}.route-card h3{margin:0 0 4px;font-size:30px}.route-card .tagline{min-height:auto}.route-card .why{margin-top:19px}.route-card .why>span{display:block;font-size:7px;letter-spacing:.16em;color:#b39a62;margin-bottom:5px}.watchout{margin-top:18px;padding-top:15px;border-top:1px solid rgba(222,191,116,.13);font-size:10px;line-height:1.55;color:#92a69a}.watchout b{display:block;color:#d7c394;font-size:9px;margin-bottom:3px}.route-cta{margin-top:19px;border:0;background:transparent;color:#e7ca84;font-size:11px;padding:0}.route-cta span{margin-left:6px}.detail-panel{padding:0;overflow:hidden}.detail-hero{position:relative;min-height:190px;padding:34px;display:flex;justify-content:space-between;align-items:flex-end}.detail-hero>*{position:relative;z-index:2}.detail-hero h3{font-size:46px;margin:5px 0 0;color:#fff0ca}.detail-hero p{margin:0;color:#d0d9d2}.detail-score{font:600 38px 'Cormorant Garamond',Georgia,serif;color:#f1d28b;text-align:right}.detail-score small{display:block;font:8px Inter,sans-serif;letter-spacing:.15em;color:#d0c19d}.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding:32px}.detail-grid h4,.fit-panel h4{font:600 21px 'Cormorant Garamond',Georgia,serif;color:#ead29a;margin:0 0 12px}.detail-grid p{margin:0 0 14px}.detail-watch{padding:13px 15px;background:rgba(225,191,112,.06);border-left:2px solid #b99049}.fit-row{display:grid;grid-template-columns:92px 1fr 28px;gap:8px;align-items:center;margin:9px 0;font-size:9px;color:#aebdaf}.fit-row i{height:4px;background:#263a31;border-radius:99px;overflow:hidden}.fit-row i b{display:block;height:100%;background:linear-gradient(90deg,#a57b37,#e4c375)}.fit-row em{font-style:normal;color:#d2bd89;text-align:right}.coming-next{padding:16px 32px 22px;border-top:1px solid rgba(220,190,117,.13);display:flex;gap:15px;align-items:center}.coming-next span{font-size:7px;letter-spacing:.18em;color:#d3b875;border:1px solid rgba(211,184,117,.3);padding:6px 8px;border-radius:99px}.coming-next p{margin:0;font-size:10px;color:#87998e}
@media(max-width:980px){.visual-answers{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}}
@media(max-width:680px){.visual-answers{grid-template-columns:1fr 1fr;gap:10px}.visual-answer{min-height:220px}.visual-answer .answer-scene{height:108px}.profile-card{grid-template-columns:1fr;text-align:center}.profile-card .profile-compass{margin:0 auto 10px}.profile-tags{justify-content:center}.detail-hero{min-height:220px;align-items:flex-start;flex-direction:column}.detail-score{text-align:left}.detail-grid{padding:24px 18px}.coming-next{padding:14px 18px;align-items:flex-start}}


/* v0.4 — photographic answer system for every question */
.answers.visual-answers{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  width:100%;
  max-width:1120px;
  margin:24px auto 0;
}
.visual-answers .answer{
  display:flex;
  flex-direction:column;
  position:relative;
  min-height:280px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(205,169,93,.34);
  border-radius:14px;
  background:#102019;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.visual-answers .answer:hover{
  transform:translateY(-3px);
  border-color:rgba(230,190,104,.72);
  box-shadow:0 16px 34px rgba(0,0,0,.24);
}
.visual-answers .answer.selected{
  border-color:#e0b75d;
  box-shadow:0 0 0 1px rgba(224,183,93,.55),0 16px 38px rgba(0,0,0,.3);
}
.visual-answers .answer-scene{
  position:relative;
  height:158px;
  flex:0 0 158px;
  width:100%;
  background-image:
    linear-gradient(to bottom,rgba(4,14,10,.02) 38%,rgba(8,21,16,.9) 100%),
    var(--photo);
  background-size:cover;
  background-position:center;
  filter:saturate(.88) contrast(1.02);
}
.visual-answers .answer-scene::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(205,169,93,.05),transparent 45%,rgba(5,15,11,.12));
  pointer-events:none;
}
.visual-answers .scene-mark{
  position:absolute;
  right:12px;
  bottom:9px;
  z-index:2;
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border-radius:50%;
  color:#f1ca76;
  border:1px solid rgba(241,202,118,.55);
  background:rgba(7,20,15,.62);
  backdrop-filter:blur(5px);
  font-size:17px;
}
.visual-answers .badge{
  position:absolute;
  top:12px;left:12px;
  z-index:4;
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#f1d08c;
  background:rgba(7,18,14,.72);
  border:1px solid rgba(232,193,107,.5);
  backdrop-filter:blur(6px);
}
.visual-answers .answer-copy{
  padding:15px 16px 17px;
  text-align:left;
}
.visual-answers .answer-copy strong{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:21px;
  line-height:1.08;
  color:#f5efe2;
  margin-bottom:6px;
}
.visual-answers .answer-copy small{
  display:block;
  color:rgba(238,233,218,.7);
  line-height:1.4;
}
.visual-answers .select-tick{
  position:absolute;
  top:11px;right:11px;
  z-index:5;
}
@media(max-width:900px){
  .answers.visual-answers{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
}
@media(max-width:560px){
  .answers.visual-answers{grid-template-columns:1fr 1fr;gap:10px}
  .visual-answers .answer{min-height:235px}
  .visual-answers .answer-scene{height:120px;flex-basis:120px}
  .visual-answers .answer-copy{padding:12px}
  .visual-answers .answer-copy strong{font-size:18px}
  .visual-answers .answer-copy small{font-size:12px}
}


/* v0.5 — full route detail experience */
.route-detail{max-width:1180px;margin:34px auto 80px;border:1px solid rgba(205,169,93,.28);background:rgba(8,24,18,.94);box-shadow:0 30px 70px rgba(0,0,0,.28);overflow:hidden;border-radius:18px}
.detail-hero{min-height:330px;padding:42px 48px;position:relative;display:flex;align-items:flex-end;justify-content:space-between;background:
radial-gradient(circle at 75% 20%,rgba(214,172,83,.16),transparent 28%),
linear-gradient(120deg,#17382c,#0b1e17 68%,#07140f)}
.detail-hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(220,184,105,.08) .7px,transparent .7px);background-size:18px 18px;opacity:.25;pointer-events:none}
.detail-hero-copy{position:relative;z-index:2;max-width:700px}
.detail-hero h3{font-family:"Cormorant Garamond",serif;font-size:56px;line-height:.95;margin:8px 0 12px;color:#f4eddf;font-weight:500}
.detail-hero-copy>p{font-family:"Cormorant Garamond",serif;font-size:21px;line-height:1.45;color:rgba(245,239,226,.78);max-width:650px}
.detail-close{position:absolute;left:48px;top:28px;z-index:3;background:none;border:0;color:#d7bd7d;cursor:pointer;font:500 13px Inter,sans-serif;letter-spacing:.04em}
.detail-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.detail-pills span{padding:7px 11px;border:1px solid rgba(216,180,96,.34);border-radius:99px;color:#ddc68e;font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.detail-score{position:relative;z-index:2;width:130px;height:130px;border:1px solid #d7ad58;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f0c76e;font-family:"Cormorant Garamond",serif;font-size:35px;background:rgba(7,19,14,.62)}
.detail-score small{font:500 9px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#d8d0bd;margin-top:2px}
.route-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(205,169,93,.22);border-bottom:1px solid rgba(205,169,93,.22);background:#f0e6d1;color:#14251e}
.route-facts>div{padding:22px 24px;border-right:1px solid rgba(47,61,52,.15)}.route-facts>div:last-child{border-right:0}.route-facts small,.section-kicker{display:block;font:600 9px Inter,sans-serif;letter-spacing:.16em;color:#997637;margin-bottom:7px}.route-facts strong{font-family:"Cormorant Garamond",serif;font-size:21px}
.detail-main-grid{padding:48px;grid-template-columns:1.25fr .75fr;gap:60px}.detail-story h4,.fit-panel h4,.route-highlights h4{font-family:"Cormorant Garamond",serif;font-size:31px;color:#f2eadb;margin:3px 0 15px}.detail-story>p{font-size:15px;line-height:1.75;color:rgba(240,235,220,.75)}
.ideal-box{margin-top:24px;padding:20px 22px;background:rgba(205,169,93,.08);border-left:2px solid #cda95d}.ideal-box small{font-size:9px;letter-spacing:.14em;color:#cba65b}.ideal-box p{margin:7px 0 0;color:#e6ddc9;line-height:1.55}
.detail-watch{margin-top:20px;padding:18px 20px;border:1px solid rgba(205,169,93,.2);border-radius:10px}.detail-watch b{color:#d8b86e;font-family:"Cormorant Garamond",serif;font-size:18px}.detail-watch p{margin:6px 0 0;color:rgba(238,232,216,.68);line-height:1.5}
.route-lower{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;padding:0 48px 50px}.highlight-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.highlight-grid div{padding:17px;border:1px solid rgba(205,169,93,.17);border-radius:10px;background:rgba(255,255,255,.018)}.highlight-grid span{display:block;color:#b9924d;font-size:9px;margin-bottom:7px}.highlight-grid strong{font-family:"Cormorant Garamond",serif;font-size:19px;color:#e9e1d1}
.route-plan-card{padding:26px;border:1px solid rgba(205,169,93,.28);background:rgba(205,169,93,.055);border-radius:12px}.route-endpoint small{display:block;color:#a98950;font-size:9px;letter-spacing:.14em;margin-bottom:5px}.route-endpoint strong{font-family:"Cormorant Garamond",serif;color:#f0e8d8;font-size:22px}.route-thread{display:flex;align-items:center;gap:8px;margin:17px 0;color:#9e814a;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.route-thread i{height:1px;flex:1;background:rgba(205,169,93,.35)}.route-save,.route-print{width:100%;margin-top:24px}.route-save.saved{background:#d6bc80}
.next-phase-note{margin:0 48px 48px;padding:18px 22px;border-top:1px solid rgba(205,169,93,.2);color:rgba(240,235,220,.58)}.next-phase-note span{font-size:9px;letter-spacing:.16em;color:#aa8c52}.next-phase-note p{margin:7px 0 0;font-size:12px}
@media(max-width:800px){.detail-hero{padding:76px 25px 30px;min-height:300px}.detail-close{left:25px}.detail-hero h3{font-size:43px}.detail-score{width:92px;height:92px;font-size:27px}.route-facts{grid-template-columns:1fr 1fr}.route-facts>div:nth-child(2){border-right:0}.detail-main-grid,.route-lower{grid-template-columns:1fr;padding:30px 25px;gap:32px}.route-lower{padding-top:0}.next-phase-note{margin:0 25px 30px}.highlight-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.detail-hero{display:block}.detail-score{margin-top:24px}.route-facts{grid-template-columns:1fr 1fr}.route-facts>div{padding:17px}.highlight-grid{grid-template-columns:1fr}}


/* v0.6 — itinerary, season and practical route intelligence */
.detail-tabs{
  display:flex;gap:26px;align-items:center;padding:14px 48px;
  background:#0d2119;border-bottom:1px solid rgba(205,169,93,.18);
  position:sticky;top:0;z-index:6
}
.detail-tabs a{color:#d7c9a8;text-decoration:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.detail-tabs a:hover{color:#efc977}
.route-map-block{margin:0 48px 48px;padding:28px;border:1px solid rgba(205,169,93,.2);border-radius:12px;background:linear-gradient(135deg,rgba(205,169,93,.055),rgba(255,255,255,.01))}
.route-map-copy h4,.stages-section h4,.season-section h4,.practical-section h4{font-family:"Cormorant Garamond",serif;font-size:31px;color:#f2eadb;margin:3px 0 10px}
.route-map-copy p,.section-head>p{color:rgba(237,232,218,.6);font-size:12px;line-height:1.55;max-width:620px}
.route-strip{display:grid;grid-template-columns:auto 1fr 8px 1fr 8px 1fr 8px 1fr auto;align-items:center;margin-top:28px}
.route-strip i{height:2px;background:linear-gradient(90deg,#9c7d45,#d8b466)}
.route-strip b{width:8px;height:8px;border-radius:50%;background:#e7c372;box-shadow:0 0 0 4px rgba(231,195,114,.12)}
.route-pin{font:600 9px Inter,sans-serif;letter-spacing:.12em;color:#ead49d;border:1px solid rgba(205,169,93,.35);padding:9px 11px;border-radius:99px}
.finish-pin{color:#132219;background:#d8b466}
.stages-section,.season-section,.practical-section{padding:0 48px 48px}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-bottom:20px}
.stage-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stage-row{display:flex;gap:15px;align-items:center;padding:15px 16px;border:1px solid rgba(205,169,93,.16);border-radius:10px;background:rgba(255,255,255,.015)}
.stage-num{font-family:"Cormorant Garamond",serif;font-size:25px;color:#b8914d}
.stage-row strong{display:block;color:#eee6d7;font-family:"Cormorant Garamond",serif;font-size:18px}
.stage-row small{display:block;color:rgba(236,230,215,.5);font-size:10px;margin-top:3px}
.season-table{border:1px solid rgba(205,169,93,.17);border-radius:11px;overflow:hidden}
.season-row{display:grid;grid-template-columns:110px 1fr 90px;align-items:center;gap:16px;padding:15px 18px;border-bottom:1px solid rgba(205,169,93,.12)}
.season-row:last-child{border-bottom:0}.season-row span{color:#e6d7b6;font-family:"Cormorant Garamond",serif;font-size:18px}.season-row b{font-weight:400;color:rgba(240,235,220,.7);font-size:12px}
.season-row i{justify-self:end;font-style:normal;font-size:9px;letter-spacing:.11em;text-transform:uppercase;padding:6px 8px;border-radius:99px;border:1px solid rgba(205,169,93,.25);color:#cfb47b}
.season-row.best{background:rgba(123,153,109,.08)}.season-row.best i{color:#d9d7a1;border-color:rgba(162,182,123,.35)}
.season-row.poor{background:rgba(130,74,61,.08)}.season-row.poor i{color:#d5a291;border-color:rgba(184,105,87,.3)}
.practical-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.practical-item{padding:18px;border:1px solid rgba(205,169,93,.16);border-radius:10px;background:rgba(255,255,255,.015)}
.practical-item small{display:block;color:#b99352;font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.practical-item p{margin:0;color:rgba(238,232,217,.7);font-size:12px;line-height:1.55}
@media(max-width:800px){
  .detail-tabs{padding:12px 25px;gap:16px;overflow-x:auto}
  .route-map-block,.stages-section,.season-section,.practical-section{margin-left:25px;margin-right:25px;padding-left:0;padding-right:0}
  .route-map-block{padding:22px}
  .stage-list{grid-template-columns:1fr}
  .practical-grid{grid-template-columns:1fr 1fr}
  .section-head{display:block}.section-head>p{margin-top:8px}
}
@media(max-width:520px){
  .route-strip{grid-template-columns:auto 1fr 6px 1fr auto}.route-strip b:nth-of-type(n+2),.route-strip i:nth-of-type(n+3){display:none}
  .season-row{grid-template-columns:90px 1fr}.season-row i{grid-column:2;justify-self:start}
  .practical-grid{grid-template-columns:1fr}
}


/* v0.7 — all Top 3 routes explorable + personal stage planner */
.route-card .route-cta{display:inline-flex}
.personal-plan{padding:46px 48px;border-bottom:1px solid rgba(205,169,93,.16);background:linear-gradient(180deg,rgba(205,169,93,.045),rgba(255,255,255,.005))}
.plan-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.plan-summary>div{padding:18px;border:1px solid rgba(205,169,93,.2);border-radius:10px;background:rgba(255,255,255,.015)}
.plan-summary small{display:block;color:#a98b52;font-size:9px;letter-spacing:.14em;margin-bottom:7px}
.plan-summary strong{font-family:"Cormorant Garamond",serif;color:#efe6d5;font-size:22px}
.plan-message{margin-top:14px;padding:16px 18px;border-radius:10px;font-size:13px;line-height:1.55}
.plan-message.good-plan{background:rgba(110,146,97,.09);border:1px solid rgba(139,171,124,.22);color:#dce6d6}
.plan-message.adjust-plan{background:rgba(173,116,67,.08);border:1px solid rgba(193,142,90,.25);color:#e6d5bd}
.planner-actions{display:flex;gap:10px;margin-top:18px}
.planner-editor{margin-top:20px;padding:20px;border:1px solid rgba(205,169,93,.2);border-radius:10px;background:#0d2018}
.planner-editor.hidden{display:none}
.planner-editor label{display:block;color:#e7ddc9;font-family:"Cormorant Garamond",serif;font-size:21px;margin-bottom:12px}
.day-control{display:flex;align-items:center;gap:10px}
.day-control button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(205,169,93,.3);background:transparent;color:#e6c574;font-size:22px;cursor:pointer}
.day-control input{width:90px;background:#13291f;border:1px solid rgba(205,169,93,.3);color:#f0e7d6;border-radius:9px;padding:10px 12px;text-align:center;font-size:16px}
.planner-live{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid rgba(205,169,93,.14)}
.planner-live strong{font-family:"Cormorant Garamond",serif;font-size:24px;color:#efc871}
.planner-live span{padding:5px 8px;border:1px solid rgba(205,169,93,.23);border-radius:99px;color:#d9c59a;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.planner-live p{width:100%;margin:0;color:rgba(237,231,216,.65);font-size:12px}
@media(max-width:800px){
  .personal-plan{padding:32px 25px}
  .plan-summary{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .plan-summary{grid-template-columns:1fr}
  .planner-actions{flex-direction:column}
}


/* v0.8 — evidence-based effort layer */
.effort-proof{margin:0 48px 48px;padding:28px;border:1px solid rgba(205,169,93,.24);border-radius:12px;background:linear-gradient(135deg,rgba(205,169,93,.07),rgba(255,255,255,.012))}
.effort-proof .section-head{margin-bottom:18px}.effort-proof h4{font-family:"Cormorant Garamond",serif;font-size:30px;color:#f1e8d7;margin:3px 0 0}
.verified-badge,.pending-badge{padding:7px 10px;border-radius:99px;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.verified-badge{color:#dfe6c7;border:1px solid rgba(163,184,118,.35);background:rgba(122,151,96,.08)}
.pending-badge{color:#dfc69a;border:1px solid rgba(205,169,93,.3);background:rgba(205,169,93,.06)}
.effort-example-grid{display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:9px}
.effort-example-grid>div{padding:16px;border:1px solid rgba(205,169,93,.15);border-radius:9px;background:rgba(5,18,13,.28)}
.effort-example-grid small{display:block;color:#a98b52;font-size:8px;letter-spacing:.12em;margin-bottom:7px}
.effort-example-grid strong{display:block;color:#efe5d2;font-family:"Cormorant Garamond",serif;font-size:20px;line-height:1.1}
.effort-example-grid span{display:block;margin-top:5px;color:rgba(235,229,214,.48);font-size:9px}
.effort-explain{margin:17px 0 8px;color:rgba(239,233,218,.72);font-size:12px;line-height:1.6}
.effort-explain b{color:#e8c477}.data-source{display:block;color:rgba(237,230,213,.43);line-height:1.45}
.pending-proof p{color:rgba(239,233,218,.68);line-height:1.6;max-width:800px}
@media(max-width:900px){.effort-example-grid{grid-template-columns:1fr 1fr}.effort-example-grid>div:first-child{grid-column:1/-1}}
@media(max-width:800px){.effort-proof{margin:0 25px 32px;padding:22px}}
@media(max-width:520px){.effort-example-grid{grid-template-columns:1fr}.effort-example-grid>div:first-child{grid-column:auto}}

/* Layout adjustment — desktop content stays approximately 15% from each viewport edge */
@media (min-width: 1100px) {
  .wrap,
  .hero-inner,
  .question-wrap,
  .results-wrap,
  .site-header .inner,
  .journey-ribbon {
    width: 70%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .question-shell,
  .question-card,
  .result-shell {
    max-width: none;
  }
}

/* v0.9 desktop width — requested 5% side margins */
@media (min-width:1100px){
  .wrap,
  .hero-inner,
  .question-wrap,
  .results-wrap,
  .site-header .inner,
  .journey-ribbon{
    width:90%;
    max-width:none;
    margin-left:auto;
    margin-right:auto;
  }
}

/* v0.9 planning controls */
.planner-fields{display:grid;grid-template-columns:.8fr 1.25fr 1fr;gap:18px;align-items:end}
.planner-fields label{display:block;color:#e7ddc9;font-family:"Cormorant Garamond",serif;font-size:19px;margin-bottom:10px}
.planner-fields select{width:100%;min-height:42px;background:#13291f;border:1px solid rgba(205,169,93,.3);color:#f0e7d6;border-radius:9px;padding:9px 12px;font-size:12px}
.planner-integrity{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:13px 15px;border-left:2px solid #cda95d;background:rgba(205,169,93,.055)}
.planner-integrity b{white-space:nowrap;color:#e2c174;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.planner-integrity span{color:rgba(238,232,216,.62);font-size:11px;line-height:1.5}
@media(max-width:800px){.planner-fields{grid-template-columns:1fr}.planner-integrity{display:block}.planner-integrity span{display:block;margin-top:5px}}


/* v0.10 — linked Camino calculator */
.linked-planner{
  grid-template-columns:1fr 72px 1.35fr 1fr;
  align-items:end;
}
.planner-field{min-width:0}
.planner-field>small{
  display:block;
  margin-top:8px;
  color:rgba(238,232,216,.48);
  font-size:10px;
  line-height:1.35;
}
.planner-link{
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#cda95d;
  padding-top:14px;
}
.planner-link span{
  font-size:23px;
  line-height:1;
}
.planner-link small{
  margin-top:4px;
  font-size:8px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(205,169,93,.58);
}
.step-control{
  display:flex;
  align-items:center;
  gap:10px;
}
.step-control button{
  width:42px;
  min-width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(205,169,93,.32);
  background:rgba(4,17,12,.22);
  color:#e8c571;
  font-size:21px;
  cursor:pointer;
}
.step-control button:hover{
  background:rgba(205,169,93,.08);
}
.step-control input{
  width:90px;
  height:42px;
  box-sizing:border-box;
  background:#13291f;
  border:1px solid rgba(205,169,93,.32);
  color:#f0e7d6;
  border-radius:9px;
  text-align:center;
  font-size:16px;
  font-weight:600;
}
.distance-control input{width:100px}
.distance-control .unit{
  margin-left:-4px;
  color:rgba(239,231,213,.62);
  font-size:12px;
}
.planner-primary-result{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.planner-primary-result strong{
  font-family:"Cormorant Garamond",serif;
  font-size:29px;
  color:#efc871;
}
.planner-primary-result span{
  padding:6px 9px;
  border:1px solid rgba(205,169,93,.25);
  border-radius:99px;
  color:#d9c59a;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.planner-live p{
  width:100%;
  margin:7px 0 0;
  color:rgba(237,231,216,.65);
  font-size:12px;
  line-height:1.5;
}
.planner-breakdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-top:18px;
}
.planner-breakdown>div{
  padding:13px 15px;
  border:1px solid rgba(205,169,93,.14);
  border-radius:9px;
  background:rgba(255,255,255,.012);
}
.planner-breakdown small{
  display:block;
  color:#a98b52;
  font-size:8px;
  letter-spacing:.12em;
  margin-bottom:5px;
}
.planner-breakdown strong{
  color:#eee5d4;
  font-family:"Cormorant Garamond",serif;
  font-size:20px;
}
@media(max-width:950px){
  .linked-planner{grid-template-columns:1fr 1fr}
  .planner-link{display:none}
  .planner-breakdown{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .linked-planner{grid-template-columns:1fr}
  .planner-breakdown{grid-template-columns:1fr 1fr}
  .step-control input{flex:1;width:auto;min-width:0}
}


/* v0.11 — verified route database backbone */
.route-data-strip{
  display:flex;align-items:center;gap:10px;
  padding:10px 48px;
  background:rgba(124,151,101,.055);
  border-bottom:1px solid rgba(205,169,93,.13);
}
.route-data-strip .data-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.route-data-strip .data-dot.verified{background:#a4b87a;box-shadow:0 0 0 4px rgba(164,184,122,.08)}
.route-data-strip strong{color:#d9dfbd;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.route-data-strip small{color:rgba(237,231,216,.48);font-size:10px}
.official-route-section{
  margin:0 48px 48px;
  padding:28px;
  border:1px solid rgba(205,169,93,.2);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(205,169,93,.045),rgba(255,255,255,.01));
}
.official-route-section h4{
  font-family:"Cormorant Garamond",serif;
  font-size:31px;color:#f2eadb;margin:3px 0 0
}
.route-data-badge{
  padding:7px 10px;border:1px solid rgba(164,184,122,.3);
  border-radius:99px;color:#d9dfbd;background:rgba(117,145,92,.07);
  font-size:8px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap
}
.official-route-note{
  margin:0 0 22px;max-width:780px;
  color:rgba(238,232,217,.62);font-size:12px;line-height:1.6
}
.official-route-track{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:0;
  border:1px solid rgba(205,169,93,.15);
  border-radius:10px;overflow:hidden
}
.official-node{
  position:relative;min-height:74px;padding:14px 13px;
  background:rgba(5,18,13,.27);
  border-right:1px solid rgba(205,169,93,.11);
  border-bottom:1px solid rgba(205,169,93,.08)
}
.official-node:after{
  content:"→";position:absolute;right:-7px;top:26px;z-index:2;
  color:#b6924f;background:#0d2119;padding:0 2px;font-size:11px
}
.official-node.last:after{display:none}
.official-node span{
  display:block;color:#a7884d;font-size:8px;letter-spacing:.1em;margin-bottom:6px
}
.official-node strong{
  display:block;color:#eee4d2;font-family:"Cormorant Garamond",serif;
  font-size:17px;line-height:1.1
}
.official-node.first{background:rgba(205,169,93,.055)}
.official-node.last{background:rgba(135,157,101,.07)}
.data-provenance{
  display:flex;gap:18px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(205,169,93,.12);
  color:rgba(236,229,214,.48);font-size:9px;letter-spacing:.04em
}
.data-provenance span:first-child{color:#cdd6a8}
@media(max-width:800px){
  .route-data-strip{padding:10px 25px;align-items:flex-start;flex-wrap:wrap}
  .official-route-section{margin:0 25px 32px;padding:22px}
  .official-route-track{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .official-route-track{grid-template-columns:1fr}
  .official-node{border-right:0}
  .official-node:after{content:"↓";right:14px;top:auto;bottom:-7px}
}

/* v0.12 desktop width — requested 2% side margins */
@media (min-width:1100px){
  .wrap,
  .hero-inner,
  .question-wrap,
  .results-wrap,
  .site-header .inner,
  .journey-ribbon{
    width:96%;
    max-width:none;
    margin-left:auto;
    margin-right:auto;
  }
}


/* v0.12 verified official stage database */
.official-distance-callout{
  display:flex;align-items:center;gap:12px;
  padding:12px 48px;background:#eadfc8;color:#17261f;
  border-bottom:1px solid rgba(45,60,50,.13)
}
.official-distance-callout small{font-size:8px;letter-spacing:.14em;color:#8c6d35}
.official-distance-callout strong{font-family:"Cormorant Garamond",serif;font-size:20px}
.official-distance-callout span{color:rgba(23,38,31,.62);font-size:10px}
.verified-stage-table{border:1px solid rgba(205,169,93,.18);border-radius:11px;overflow:hidden}
.verified-stage-head,.verified-stage-row{display:grid;grid-template-columns:2.1fr .7fr .85fr .8fr;gap:14px;align-items:center}
.verified-stage-head{padding:10px 16px;background:rgba(205,169,93,.075);color:#b99a5c;font-size:8px;letter-spacing:.12em;text-transform:uppercase}
.verified-stage-row{padding:14px 16px;border-top:1px solid rgba(205,169,93,.11);color:rgba(239,233,218,.72);font-size:11px}
.verified-stage-row>span:first-child{display:flex;align-items:center;gap:12px;min-width:0}
.verified-stage-row b{color:#a98950;font-size:8px;font-weight:500}
.verified-stage-row strong{color:#eee5d4;font-family:"Cormorant Garamond",serif;font-size:17px;font-weight:600}
.difficulty-pill{justify-self:start;padding:5px 8px;border-radius:99px;border:1px solid rgba(205,169,93,.22);font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.difficulty-pill.low{color:#d9dfbd;border-color:rgba(164,184,122,.3)}
.difficulty-pill.medium-low,.difficulty-pill.medium{color:#e0c78e}
.difficulty-pill.medium-high,.difficulty-pill.high{color:#ddb19a;border-color:rgba(188,118,87,.28)}
.stage-source-note{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;color:rgba(237,231,216,.46);font-size:9px}
.stage-source-note span:first-child{color:#cdd6a8}
@media(max-width:800px){
  .official-distance-callout{padding:10px 25px;flex-wrap:wrap}
  .verified-stage-head{display:none}
  .verified-stage-row{grid-template-columns:1fr 1fr;gap:10px}
  .verified-stage-row>span:first-child{grid-column:1/-1}
}
@media(max-width:480px){
  .verified-stage-row{grid-template-columns:1fr}
  .verified-stage-row>span:first-child{grid-column:auto}
}


/* v0.12-wide — full-width desktop refinement + larger readable typography */
@media (min-width:1100px){

  /* Main horizontal containers: approximately 1% side margin */
  .wrap,
  .hero-inner,
  .question-wrap,
  .results-wrap,
  .site-header .inner,
  .journey-ribbon{
    width:98%;
    max-width:none;
    margin-left:auto;
    margin-right:auto;
  }

  /* Result and detail content should no longer sit inside a narrow max-width column */
  .route-detail,
  #detailPanel,
  .top-three,
  .result-intro,
  .results-inner,
  .question-shell,
  .question-card{
    max-width:none;
  }

  .route-detail{
    width:98%;
    margin-left:auto;
    margin-right:auto;
  }

  /* Make Top 3 use the available width */
  .top-three{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
  }

  /* General readability */
  body{
    font-size:16px;
  }

  .site-header{
    font-size:15px;
  }

  .site-header nav a,
  .detail-tabs a{
    font-size:12px;
  }

  /* Question screen */
  .question-wrap{
    padding-left:0;
    padding-right:0;
  }

  .question-card{
    padding-left:42px;
    padding-right:42px;
  }

  .question-card h2,
  .question-card .question-title{
    font-size:clamp(40px,3.2vw,58px);
    line-height:1.04;
  }

  .question-card .question-sub,
  .question-card .subtitle{
    font-size:15px;
  }

  .answers.visual-answers{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
  }

  .answer-card,
  .answers button{
    font-size:15px;
  }

  .answer-card strong,
  .answer-copy strong{
    font-size:20px;
    line-height:1.18;
  }

  .answer-card small,
  .answer-copy small{
    font-size:12px;
    line-height:1.45;
  }

  /* Results cards */
  .route-card h3{
    font-size:32px;
    line-height:1.05;
  }

  .route-card .tagline{
    font-size:14px;
  }

  .route-card .why,
  .route-card .watchout{
    font-size:13px;
    line-height:1.6;
  }

  .route-stats span{
    font-size:10px;
  }

  .route-cta{
    font-size:12px;
  }

  /* Detail hero */
  .detail-hero{
    padding-left:52px;
    padding-right:52px;
  }

  .detail-hero h3{
    font-size:clamp(54px,4vw,72px);
  }

  .detail-hero-copy>p{
    font-size:23px;
    line-height:1.45;
    max-width:820px;
  }

  .detail-pills span{
    font-size:11px;
  }

  /* Facts and body */
  .route-facts strong{
    font-size:24px;
  }

  .route-facts small{
    font-size:10px;
  }

  .detail-main-grid{
    padding-left:52px;
    padding-right:52px;
    grid-template-columns:1.35fr .65fr;
    gap:72px;
  }

  .detail-story h4,
  .fit-panel h4,
  .route-highlights h4,
  .route-map-copy h4,
  .stages-section h4,
  .season-section h4,
  .practical-section h4,
  .official-route-section h4,
  .effort-proof h4{
    font-size:36px;
  }

  .detail-story>p,
  .ideal-box p,
  .detail-watch p,
  .route-map-copy p,
  .section-head>p,
  .official-route-note,
  .effort-explain,
  .pending-proof p{
    font-size:14px;
    line-height:1.7;
  }

  .section-kicker{
    font-size:10px;
  }

  /* Wider inner sections */
  .personal-plan,
  .stages-section,
  .season-section,
  .practical-section{
    padding-left:52px;
    padding-right:52px;
  }

  .route-map-block,
  .official-route-section,
  .effort-proof{
    margin-left:52px;
    margin-right:52px;
  }

  .route-lower{
    padding-left:52px;
    padding-right:52px;
    grid-template-columns:1.45fr .55fr;
  }

  /* Calculator readability */
  .planner-fields label{
    font-size:21px;
  }

  .step-control input,
  .planner-fields select{
    font-size:15px;
  }

  .planner-field>small,
  .planner-live p,
  .planner-integrity span{
    font-size:12px;
  }

  .planner-primary-result strong{
    font-size:34px;
  }

  .planner-primary-result span{
    font-size:10px;
  }

  .plan-summary strong,
  .planner-breakdown strong{
    font-size:24px;
  }

  /* Official stages */
  .verified-stage-row{
    font-size:12px;
  }

  .verified-stage-row strong{
    font-size:19px;
  }

  .verified-stage-head,
  .difficulty-pill{
    font-size:9px;
  }

  /* Practical blocks */
  .practical-item p{
    font-size:13px;
  }

  .highlight-grid strong{
    font-size:21px;
  }

  /* Keep line lengths elegant despite the wider layout */
  .detail-story>p,
  .route-map-copy p,
  .official-route-note,
  .section-head>p{
    max-width:900px;
  }
}

/* Large desktop / ultrawide: keep it wide, but not visually stretched edge-to-edge */
@media (min-width:1600px){
  .wrap,
  .hero-inner,
  .question-wrap,
  .results-wrap,
  .site-header .inner,
  .journey-ribbon,
  .route-detail{
    width:97%;
  }

  .question-card h2,
  .question-card .question-title{
    font-size:58px;
  }

  .route-card h3{
    font-size:34px;
  }
}


/* v0.13 — all eight routes now show official-stage data coverage */
.stage-coverage-strip{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px 48px;
  background:rgba(205,169,93,.055);
  border-bottom:1px solid rgba(205,169,93,.13)
}
.stage-coverage-strip strong{
  color:#e2c477;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em
}
.stage-coverage-strip span{
  color:rgba(239,232,216,.46);
  font-size:9px
}
@media(max-width:800px){
  .stage-coverage-strip{
    padding:9px 25px;
    flex-direction:column;
    align-items:flex-start;
    gap:4px
  }
}


/* v0.14 — selective sliders + multi-select questions */
.slider-question{
  display:block !important;
  max-width:920px;
  margin:24px auto 12px;
}
.camino-slider-wrap{
  padding:30px 34px 26px;
  border:1px solid rgba(205,169,93,.28);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(205,169,93,.05),rgba(255,255,255,.012));
}
.slider-value-label{
  text-align:center;
  font-family:"Cormorant Garamond",serif;
  font-size:30px;
  color:#efd08a;
  margin-bottom:24px;
}
.camino-slider{
  width:100%;
  accent-color:#d4ad58;
  cursor:pointer;
}
.slider-scale{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-top:9px;
  color:rgba(237,230,214,.5);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.slider-choice-copy{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(205,169,93,.15);
  text-align:center;
}
.slider-choice-copy strong{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
  color:#eee4d2;
}
.slider-choice-copy small{
  display:block;
  margin-top:5px;
  color:rgba(237,231,216,.58);
  font-size:12px;
}
.multi-answers .answer-card.selected{
  box-shadow:inset 0 0 0 1px #d5ad58,0 0 0 1px rgba(213,173,88,.25);
}
.multi-hint{
  margin:10px auto 0;
  text-align:center;
  color:rgba(237,230,214,.55);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.multi-hint.warn{color:#e1b184}
@media(max-width:700px){
  .camino-slider-wrap{padding:24px 20px}
  .slider-value-label{font-size:25px}
}


/* v0.14.1 fix — keep slider legible inside original questionnaire layout */
.camino-slider{
  height:8px;
}
.camino-slider::-webkit-slider-thumb{
  width:24px;
  height:24px;
}
.multi-hint{
  min-height:18px;
}


/* v0.15 — answer review / transition layer */
.review-wrap{
  width:94%;
  max-width:1320px;
  margin:0 auto;
  padding:72px 0 80px;
}
.review-intro{
  max-width:860px;
  margin:0 auto 42px;
  text-align:center;
}
.review-symbol{
  width:54px;height:54px;
  margin:16px auto 18px;
  display:grid;place-items:center;
  border:1px solid rgba(205,169,93,.55);
  border-radius:50%;
  color:#e7c46d;
  font-size:20px;
}
.review-intro h1{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(42px,4.5vw,68px);
  line-height:.98;
  font-weight:500;
  color:#f2eadb;
}
.review-intro p{
  max-width:720px;
  margin:18px auto 0;
  color:rgba(239,233,218,.68);
  font-size:15px;
  line-height:1.7;
}
.review-panel{
  border:1px solid rgba(205,169,93,.24);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(205,169,93,.045),rgba(255,255,255,.01));
  overflow:hidden;
}
.review-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:28px 32px 22px;
  border-bottom:1px solid rgba(205,169,93,.16);
}
.review-panel-head h2{
  margin:2px 0 0;
  font-family:"Cormorant Garamond",serif;
  font-size:34px;
  color:#f0e7d6;
  font-weight:500;
}
.review-count{
  padding:7px 10px;
  border:1px solid rgba(205,169,93,.24);
  border-radius:99px;
  color:#d7bd7d;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.review-answers{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.review-answer-row{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:14px;
  align-items:center;
  min-height:112px;
  padding:20px 26px;
  border-bottom:1px solid rgba(205,169,93,.1);
}
.review-answer-row:nth-child(odd){
  border-right:1px solid rgba(205,169,93,.1);
}
.review-number{
  font-family:"Cormorant Garamond",serif;
  font-size:24px;
  color:#b5904d;
}
.review-answer-copy{
  min-width:0;
}
.review-answer-copy small{
  display:block;
  margin-bottom:5px;
  color:#a88b53;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.review-answer-copy strong{
  display:block;
  color:#eee5d4;
  font-family:"Cormorant Garamond",serif;
  font-size:18px;
  line-height:1.15;
  font-weight:600;
}
.review-answer-copy p{
  margin:7px 0 0;
  color:#e3c879;
  font-size:12px;
  line-height:1.4;
}
.review-edit{
  min-width:62px;
  padding:8px 10px;
  border:1px solid rgba(205,169,93,.22);
  border-radius:99px;
  background:transparent;
  color:#d9c28d;
  font-size:10px;
  cursor:pointer;
}
.review-edit:hover{
  background:rgba(205,169,93,.08);
  color:#f0d896;
}
.review-actions{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:26px;
}
.review-actions .primary,
.review-actions .ghost{
  min-height:48px;
}
.review-footnote{
  margin:18px auto 0;
  text-align:center;
  color:rgba(237,231,216,.42);
  font-size:10px;
  font-style:italic;
}
@media(max-width:850px){
  .review-wrap{width:92%;padding-top:44px}
  .review-answers{grid-template-columns:1fr}
  .review-answer-row:nth-child(odd){border-right:0}
  .review-panel-head{padding:24px 20px}
}
@media(max-width:560px){
  .review-answer-row{
    grid-template-columns:36px 1fr;
    padding:17px 18px;
  }
  .review-edit{
    grid-column:2;
    justify-self:start;
  }
  .review-actions{
    flex-direction:column-reverse;
  }
  .review-actions button{width:100%}
}


/* v0.15.2 — single-question edit mode */
.edit-mode-notice{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  max-width:760px;
  margin:0 auto 18px;
  padding:10px 14px;
  border:1px solid rgba(205,169,93,.22);
  border-radius:9px;
  background:rgba(205,169,93,.055);
  color:rgba(239,233,218,.68);
  text-align:center;
}
.edit-mode-notice span{
  color:#d5b35f;
  font-size:8px;
  letter-spacing:.14em;
  font-weight:700;
  white-space:nowrap;
}
.edit-mode-notice strong{
  font-size:11px;
  font-weight:500;
}
@media(max-width:600px){
  .edit-mode-notice{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:4px;
  }
}


/* v0.16 — pilgrim walking along questionnaire progress */
.pilgrim-progress-track{
  position:relative;
  overflow:visible !important;
}
.pilgrim-progress-icon{
  position:absolute;
  z-index:4;
  left:0;
  top:50%;
  width:30px;
  height:36px;
  color:#d8ae55;
  transform:translate(-50%,-78%);
  pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.28));
  transition:left .35s ease;
}
.pilgrim-progress-icon svg{
  display:block;
  width:100%;
  height:100%;
}
@media(max-width:700px){
  .pilgrim-progress-icon{
    width:24px;
    height:30px;
  }
}




/* v0.18 — clean scenic background and contained layout */
html,body{min-width:0}
body{
  background:
    linear-gradient(rgba(3,24,19,.16),rgba(2,18,15,.30)),
    url("assets/camino-clean-scenic-bg-v018.webp") center top / cover fixed no-repeat !important;
}
#screen-quiz,#screen-review,#screen-result{background:transparent !important}

*,*::before,*::after{box-sizing:border-box}

/* Review screen: all text stays inside one dark framed surface */
.review-wrap{
  width:min(94%,1380px);
  max-width:1380px;
  min-width:0;
}
.review-intro{
  width:100%;
  max-width:none;
  padding:38px 44px 34px;
  margin:0;
  background:rgba(5,30,24,.94);
  border:1px solid rgba(205,169,93,.24);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  backdrop-filter:blur(4px);
}
.review-panel{
  width:100%;
  min-width:0;
  overflow:hidden;
  border-radius:0;
  background:rgba(5,30,24,.94);
  backdrop-filter:blur(4px);
}
.review-actions{
  width:100%;
  padding:24px 28px;
  margin-top:0;
  background:rgba(5,30,24,.94);
  border-left:1px solid rgba(205,169,93,.24);
  border-right:1px solid rgba(205,169,93,.24);
  border-bottom:1px solid rgba(205,169,93,.24);
  border-radius:0 0 16px 16px;
}
.review-footnote{
  width:100%;
  margin:14px auto 0;
}
.review-answer-row,
.review-answer-copy,
.review-panel-head{min-width:0}
.review-answer-copy{overflow:hidden}
.review-answer-copy strong,
.review-answer-copy p,
.review-intro h1,
.review-intro p{
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Result/detail: coherent framed panel */
.route-detail{
  width:min(96%,1500px);
  max-width:1500px;
  min-width:0;
  background:rgba(5,29,23,.96);
  backdrop-filter:blur(4px);
}
.route-detail>*,
.personal-plan,
.effort-proof,
.official-route-section,
.stages-section,
.season-section,
.practical-section,
.route-lower,
.detail-main-grid,
.plan-summary,
.planner-fields,
.planner-breakdown,
.section-head{
  min-width:0;
}
.personal-plan p,
.plan-message,
.effort-proof p,
.detail-story p,
.practical-item p,
.route-data-strip small,
.verified-stage-row{
  overflow-wrap:anywhere;
}

/* Calculator is restored behind the gold button */
.planner-editor{
  margin-top:22px;
  padding:24px;
  border:1px solid rgba(205,169,93,.24);
  border-radius:12px;
  background:rgba(8,35,27,.97);
}
.planner-editor.hidden{display:none}
.plan-build{min-width:220px}

/* Safer medium-width behavior */
@media(max-width:1200px){
  .detail-main-grid,.route-lower{grid-template-columns:1fr}
  .linked-planner{grid-template-columns:1fr 1fr}
  .planner-link{display:none}
}
@media(max-width:760px){
  body{background-attachment:scroll !important}
  .review-answers{grid-template-columns:1fr}
  .review-answer-row:nth-child(odd){border-right:0}
  .linked-planner,.plan-summary,.planner-breakdown{grid-template-columns:1fr}
}


/* v0.19 — full-width transparent navigation bar */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  width:100%;
  background:
    linear-gradient(180deg, rgba(4,24,19,.92), rgba(4,24,19,.78));
  border-bottom:1px solid rgba(205,169,93,.16);
  backdrop-filter:blur(12px) saturate(115%);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}

.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(205,169,93,.14) 12%,
    rgba(205,169,93,.34) 50%,
    rgba(205,169,93,.14) 88%,
    transparent 100%
  );
  pointer-events:none;
}

.site-header .inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:14px 2.2%;
  min-height:78px;
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);
  align-items:center;
  gap:28px;
}

.site-header .brand{
  justify-self:start;
}

.site-header nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:34px;
}

.site-header nav a{
  position:relative;
  padding:10px 0 11px;
  color:rgba(242,234,219,.82);
  text-decoration:none;
  transition:color .2s ease;
}

.site-header nav a::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:2px;
  height:1px;
  background:#d4ad58;
  transition:left .22s ease,right .22s ease;
}

.site-header nav a:hover,
.site-header nav a.active{
  color:#f3ead8;
}

.site-header nav a:hover::after,
.site-header nav a.active::after{
  left:0;
  right:0;
}

.site-header .header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
}

.site-header .lang{
  color:rgba(244,236,221,.78);
  font-size:10px;
  letter-spacing:.14em;
}

.site-header .ghost,
.site-header button{
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Slightly more luxurious brand spacing in the wider bar */
.site-header .brand{
  padding-right:10px;
}

/* Keep the bar elegant on medium desktop widths */
@media(max-width:1050px){
  .site-header .inner{
    grid-template-columns:auto 1fr auto;
    gap:18px;
    padding-left:18px;
    padding-right:18px;
  }
  .site-header nav{
    gap:22px;
  }
}

@media(max-width:760px){
  .site-header{
    position:relative;
  }
  .site-header .inner{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    min-height:auto;
    padding:12px 16px;
  }
  .site-header nav{
    order:3;
    width:100%;
    justify-content:center;
    gap:18px;
    padding-top:8px;
    border-top:1px solid rgba(205,169,93,.10);
  }
  .site-header nav a{
    font-size:11px;
  }
}


/* v0.20 — solid black top navigation only */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  width:100%;
  background:#050706 !important;
  border-bottom:1px solid rgba(205,169,93,.22);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
}

.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(205,169,93,.10) 10%,
    rgba(205,169,93,.30) 50%,
    rgba(205,169,93,.10) 90%,
    transparent 100%
  );
  pointer-events:none;
}

.site-header .inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:transparent !important;
}

#screen-start,
#screen-quiz,
#screen-review,
#screen-result,
main{
  background-color:transparent;
}

.site-header nav a{
  color:rgba(244,238,225,.84);
}
.site-header nav a:hover,
.site-header nav a.active{
  color:#fff6e5;
}


/* v0.21 — definitive full-width black topbar */
.topbar{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;

  width:100vw !important;
  max-width:none !important;
  margin:0 !important;
  margin-left:calc(50% - 50vw) !important;

  min-height:76px !important;
  padding:12px 3.2% !important;

  display:grid !important;
  grid-template-columns:minmax(230px,1fr) auto minmax(230px,1fr) !important;
  align-items:center !important;
  gap:24px !important;

  background:#030504 !important;
  background-image:none !important;

  border:0 !important;
  border-bottom:1px solid rgba(205,169,93,.24) !important;
  box-shadow:0 5px 20px rgba(0,0,0,.22) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* remove any inherited/pseudo haze below the bar */
.topbar::before{
  content:none !important;
  display:none !important;
}
.topbar::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-1px !important;
  height:1px !important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(205,169,93,.08) 12%,
    rgba(205,169,93,.30) 50%,
    rgba(205,169,93,.08) 88%,
    transparent 100%
  ) !important;
  pointer-events:none !important;
}

.topbar .brand{
  justify-self:start !important;
}
.topbar .main-nav{
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  gap:34px !important;
}
.topbar .top-actions{
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

/* Black must stop at the bar: everything underneath is transparent */
.topbar + .screen,
.screen,
#screen-start,
#screen-quiz,
#screen-review,
#screen-result{
  background-color:transparent !important;
}

@media(max-width:900px){
  .topbar{
    grid-template-columns:auto 1fr auto !important;
    gap:18px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .topbar .main-nav{
    gap:22px !important;
  }
}

@media(max-width:760px){
  .topbar{
    position:relative !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:space-between !important;
    min-height:auto !important;
    padding:11px 16px !important;
  }
  .topbar .main-nav{
    order:3 !important;
    width:100% !important;
    justify-content:center !important;
    gap:18px !important;
    padding-top:8px !important;
    border-top:1px solid rgba(205,169,93,.10) !important;
  }
}


/* v0.22 — remove the extra dark-green backdrop behind the questionnaire */

/* The page/background should show through immediately below the black topbar */
#screen-quiz,
#screen-review,
#screen-result,
.screen,
.quiz-wrap,
.quiz-shell,
.question-wrap,
.results-wrap{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none;
}

/* The question card itself keeps the premium dark-green treatment */
.question-shell,
.question-card{
  background:rgba(4,43,33,.92) !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(27,88,66,.18), transparent 42%),
    linear-gradient(180deg, rgba(5,51,39,.92), rgba(3,35,27,.96)) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* Keep the progress / journey header floating on the scenery */
.quiz-top,
.quiz-header,
.progress-wrap,
.journey-ribbon{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
}

/* Remove any broad pseudo-element overlays attached to questionnaire wrappers */
#screen-quiz::before,
#screen-quiz::after,
.quiz-wrap::before,
.quiz-wrap::after,
.quiz-shell::before,
.quiz-shell::after,
.question-wrap::before,
.question-wrap::after{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  pointer-events:none;
}

/* Ensure only the actual card creates the dark reading surface */
#screen-quiz .question-shell,
#screen-quiz .question-card{
  position:relative;
  z-index:2;
}

/* Scenic background should remain visible across the full questionnaire viewport */
#screen-quiz{
  min-height:calc(100vh - 76px);
}

/* Keep top progress row readable without creating a big rectangular block */
#screen-quiz .quiz-top,
#screen-quiz .quiz-header,
#screen-quiz .progress-wrap{
  position:relative;
  z-index:3;
}

/* Review and result surfaces keep their own contained dark panels only */
.review-panel,
.review-intro,
.review-actions,
.route-detail,
.result-shell .route-card,
.profile-card{
  background-color:rgba(4,34,27,.94);
}


/* v0.23 — remove obsolete full-screen quiz atmosphere layer */
.quiz-atmosphere,
.quiz-atmosphere::before,
.quiz-atmosphere::after{
  display:none !important;
  content:none !important;
  background:none !important;
  background-image:none !important;
  opacity:0 !important;
  filter:none !important;
  transform:none !important;
}

/* Quiz screen itself is now only the scenic page background */
#screen-quiz{
  position:relative;
  background:transparent !important;
  background-image:none !important;
}

/* The floating progress row must remain transparent */
#screen-quiz .progress-row,
#screen-quiz .progress-track,
#screen-quiz .question-meta,
#screen-quiz .journey-note{
  background:transparent !important;
  background-image:none !important;
}

/* Only the actual question frame keeps its dark-green surface */
#screen-quiz .question-shell{
  background:
    radial-gradient(circle at 50% 0%, rgba(27,88,66,.18), transparent 42%),
    linear-gradient(180deg, rgba(5,51,39,.92), rgba(3,35,27,.96)) !important;
}


/* v0.24 — verified full scenic background, no baked centre block */
body{
  background:
    linear-gradient(rgba(3,24,19,.12),rgba(2,18,15,.22)),
    url("assets/camino-full-scenic-bg-v024.webp") center top / cover fixed no-repeat !important;
}

#screen-quiz,
#screen-review,
#screen-result,
.screen,
.quiz-wrap,
.progress-row,
.progress-track,
.question-meta,
.journey-note{
  background:transparent !important;
  background-image:none !important;
}

/* only the real content card remains green */
#screen-quiz .question-shell{
  background:
    radial-gradient(circle at 50% 0%, rgba(27,88,66,.18), transparent 42%),
    linear-gradient(180deg, rgba(5,51,39,.92), rgba(3,35,27,.96)) !important;
}


/* v0.25 — tighter vertical quiz layout */
@media (min-width: 900px){

  /* Pull the quiz content closer to the black topbar */
  #screen-quiz{
    padding-top: 0 !important;
  }

  .quiz-wrap{
    margin-top: 0 !important;
    padding-top: 18px !important;
  }

  /* Progress row: less empty air above/below */
  .progress-row{
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    min-height: 54px !important;
    align-items:center !important;
  }

  .question-meta{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .progress-track{
    padding-bottom: 0 !important;
  }

  .journey-note{
    align-self:center !important;
  }

  /* Lift the card and reduce internal vertical padding a little */
  .question-shell{
    min-height: 0 !important;
    padding-top: 38px !important;
    padding-bottom: 26px !important;
  }

  .question-icon{
    margin-bottom: 10px !important;
  }

  .question-shell h2{
    margin-bottom: 6px !important;
  }

  .question-subtitle{
    margin-bottom: 22px !important;
  }

  /* Answer cards slightly more compact vertically */
  .visual-answers .answer-scene{
    height: 145px !important;
    flex-basis: 145px !important;
  }

  .answer-copy{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Bring the navigation closer to the answer cards */
  .quiz-nav{
    margin-top: 22px !important;
  }

  .question-quote{
    margin-top: 10px !important;
  }
}

/* Extra tightening for common laptop heights */
@media (min-width:900px) and (max-height:850px){
  .quiz-wrap{
    padding-top: 10px !important;
  }

  .progress-row{
    min-height: 46px !important;
    margin-bottom: 8px !important;
  }

  .question-shell{
    padding-top: 30px !important;
    padding-bottom: 20px !important;
  }

  .visual-answers .answer-scene{
    height: 132px !important;
    flex-basis: 132px !important;
  }

  .question-subtitle{
    margin-bottom: 16px !important;
  }

  .quiz-nav{
    margin-top: 16px !important;
  }

  .question-quote{
    margin-top: 6px !important;
  }
}


/* v0.26 — transparent three-layer scoring */
.score-breakdown-mini{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin:13px 0 3px;
}
.score-breakdown-mini span{
  padding:8px 7px;
  border:1px solid rgba(205,169,93,.14);
  border-radius:8px;
  background:rgba(255,255,255,.012);
  text-align:center;
}
.score-breakdown-mini small{
  display:block;
  color:rgba(235,228,211,.48);
  font-size:7px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:3px;
}
.score-breakdown-mini b{
  color:#e4c374;
  font-family:"Cormorant Garamond",serif;
  font-size:16px;
}

.match-method-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:0 0 28px;
}
.match-method-strip>span{
  padding:14px 16px;
  border:1px solid rgba(205,169,93,.16);
  border-radius:9px;
  background:rgba(205,169,93,.035);
}
.match-method-strip small{
  display:block;
  color:#a98b52;
  font-size:8px;
  letter-spacing:.11em;
  margin-bottom:5px;
}
.match-method-strip strong{
  display:block;
  color:#eee4d2;
  font-family:"Cormorant Garamond",serif;
  font-size:24px;
}
.match-method-strip em{
  display:block;
  margin-top:3px;
  color:rgba(238,232,216,.48);
  font-size:9px;
  font-style:normal;
}
@media(max-width:650px){
  .score-breakdown-mini,
  .match-method-strip{
    grid-template-columns:1fr;
  }
}


/* v0.28 — personalized verified stage recommendation */
.recommended-section{
  margin:0 48px 48px;
  padding:30px;
  border:1px solid rgba(205,169,93,.26);
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(205,169,93,.06),rgba(255,255,255,.012));
}
.recommendation-status{
  max-width:290px;
  padding:7px 10px;
  border:1px solid rgba(205,169,93,.25);
  border-radius:99px;
  color:#e3c77f;
  font-size:8px;
  line-height:1.25;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}
.recommendation-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:20px 0 14px;
}
.recommendation-summary>div{
  padding:15px 16px;
  border:1px solid rgba(205,169,93,.15);
  border-radius:9px;
  background:rgba(5,18,13,.24);
}
.recommendation-summary small{
  display:block;
  margin-bottom:5px;
  color:#a98b52;
  font-size:8px;
  letter-spacing:.11em;
}
.recommendation-summary strong{
  color:#eee4d2;
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
}
.recommendation-note{
  margin:0 0 20px;
  max-width:900px;
  color:rgba(237,231,216,.66);
  font-size:12px;
  line-height:1.65;
}
.personal-stage-list{
  border:1px solid rgba(205,169,93,.15);
  border-radius:10px;
  overflow:hidden;
}
.personal-stage-row{
  display:grid;
  grid-template-columns:42px 1fr 120px;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-top:1px solid rgba(205,169,93,.10);
  background:rgba(255,255,255,.008);
}
.personal-stage-row:first-child{border-top:0}
.personal-stage-num{
  color:#a98a4d;
  font-size:9px;
  letter-spacing:.08em;
}
.personal-stage-main strong{
  display:block;
  color:#eee4d2;
  font-family:"Cormorant Garamond",serif;
  font-size:18px;
}
.personal-stage-main small,
.personal-stage-metric small{
  display:block;
  margin-top:3px;
  color:rgba(238,231,216,.46);
  font-size:9px;
}
.personal-stage-metric{
  text-align:right;
}
.personal-stage-metric b{
  color:#e1c273;
  font-size:12px;
}
.personal-stage-row.long-day,
.personal-stage-row.very-long-day{
  background:rgba(168,106,64,.055);
}
.personal-stage-row.very-long-day{
  border-left:2px solid rgba(202,137,82,.7);
}
.recommendation-integrity{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:16px;
  padding:12px 14px;
  border-left:2px solid #cda95d;
  background:rgba(205,169,93,.045);
}
.recommendation-integrity b{
  color:#d3ae5d;
  font-size:8px;
  letter-spacing:.1em;
  white-space:nowrap;
}
.recommendation-integrity span{
  color:rgba(237,231,216,.52);
  font-size:9px;
  line-height:1.5;
}

.detail-match-breakdown{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}
.detail-match-breakdown span{
  min-width:104px;
  padding:8px 10px;
  border:1px solid rgba(205,169,93,.18);
  border-radius:8px;
  background:rgba(5,18,13,.16);
}
.detail-match-breakdown small{
  display:block;
  color:rgba(238,231,216,.48);
  font-size:7px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.detail-match-breakdown b{
  display:block;
  margin-top:2px;
  color:#e7c677;
  font-family:"Cormorant Garamond",serif;
  font-size:17px;
}

@media(max-width:900px){
  .recommended-section{margin:0 25px 34px;padding:22px}
  .recommendation-summary{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .recommendation-summary{grid-template-columns:1fr}
  .personal-stage-row{grid-template-columns:32px 1fr}
  .personal-stage-metric{
    grid-column:2;
    text-align:left;
  }
}


/* v0.29 — calculator-first route planning flow */
.planner-first{
  padding-top:34px;
  padding-bottom:30px;
  background:
    linear-gradient(180deg,rgba(205,169,93,.055),rgba(255,255,255,.008));
}
.planner-first .planner-editor{
  display:block !important;
  margin-top:18px;
}
.live-recommendation-host{
  margin-top:0;
}
.live-recommendation-host .recommended-section{
  margin-top:0;
}
.planner-first + .live-recommendation-host .recommended-section{
  border-top-left-radius:0;
  border-top-right-radius:0;
}
@media(min-width:900px){
  .planner-first .section-head{
    align-items:end;
  }
}


/* v0.30 — smarter rhythm-aware stage recommendation */
.recommendation-status.needs-split{
  color:#e5c09f;
  border-color:rgba(196,126,82,.38);
  background:rgba(164,92,57,.08);
}
.rhythm-check{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.rhythm-check>span{
  min-width:160px;
  padding:11px 13px;
  border:1px solid rgba(205,169,93,.14);
  border-radius:8px;
  background:rgba(255,255,255,.01);
}
.rhythm-check small{
  display:block;
  margin-bottom:4px;
  color:#a88b53;
  font-size:7px;
  letter-spacing:.1em;
}
.rhythm-check strong{
  color:#ebe1cf;
  font-family:"Cormorant Garamond",serif;
  font-size:18px;
}
.rhythm-check.caution>span:first-child{
  border-color:rgba(196,126,82,.30);
  background:rgba(164,92,57,.055);
}
.personal-stage-row.over-preference{
  border-left:2px solid rgba(204,133,83,.78);
}
.personal-stage-row.over-preference .personal-stage-main small{
  color:#d9b194;
}


/* v0.31 — Compostela distance intelligence */
.compostela-check{
  margin-top:18px;
  padding:16px 18px;
  border-radius:10px;
  border:1px solid rgba(205,169,93,.18);
  background:rgba(255,255,255,.012);
}
.compostela-check.eligible-distance{
  border-color:rgba(139,171,124,.28);
  background:rgba(110,146,97,.055);
}
.compostela-check.short-distance{
  border-color:rgba(196,126,82,.30);
  background:rgba(164,92,57,.05);
}
.compostela-check-head{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:12px;
  align-items:center;
}
.shell-mini{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(205,169,93,.30);
  border-radius:50%;
  color:#e4bf69;
}
.compostela-check-head small{
  display:block;
  color:#a98b52;
  font-size:7px;
  letter-spacing:.11em;
  margin-bottom:3px;
}
.compostela-check-head strong{
  color:#eee5d3;
  font-family:"Cormorant Garamond",serif;
  font-size:19px;
}
.compostela-check-head>b{
  color:#e6c474;
  font-family:"Cormorant Garamond",serif;
  font-size:23px;
}
.compostela-check p{
  margin:12px 0 7px;
  color:rgba(238,232,216,.67);
  font-size:11px;
  line-height:1.55;
}
.compostela-rule{
  display:block;
  color:rgba(237,231,216,.43);
  font-size:9px;
  line-height:1.5;
}
.compostela-minimum-card{
  margin:24px 48px 18px;
  padding:18px 20px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 24px;
  align-items:center;
  border:1px solid rgba(205,169,93,.20);
  border-left:3px solid #cda95d;
  border-radius:10px;
  background:rgba(205,169,93,.045);
}
.compostela-minimum-card strong{
  display:block;
  margin-top:4px;
  color:#eee4d2;
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
}
.compostela-minimum-metric{
  text-align:right;
}
.compostela-minimum-metric b{
  display:block;
  color:#e3c171;
  font-family:"Cormorant Garamond",serif;
  font-size:24px;
}
.compostela-minimum-metric small{
  color:rgba(238,231,216,.42);
  font-size:8px;
}
.compostela-minimum-card p{
  grid-column:1/-1;
  margin:4px 0 0;
  max-width:950px;
  color:rgba(238,232,216,.53);
  font-size:10px;
  line-height:1.55;
}
@media(max-width:800px){
  .compostela-minimum-card{
    margin:20px 25px 16px;
  }
}
@media(max-width:560px){
  .compostela-check-head{
    grid-template-columns:30px 1fr;
  }
  .compostela-check-head>b{
    grid-column:2;
  }
  .compostela-minimum-card{
    grid-template-columns:1fr;
  }
  .compostela-minimum-metric{
    text-align:left;
  }
  .compostela-minimum-card p{
    grid-column:auto;
  }
}


/* v0.32 — premium Top 3 decision comparison */
.top-comparison{
  margin:26px 0 34px;
}
.decision-comparison{
  padding:28px;
  border:1px solid rgba(205,169,93,.23);
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(205,169,93,.055),rgba(255,255,255,.008));
}
.comparison-heading{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:end;
  margin-bottom:22px;
}
.comparison-heading h3{
  margin:4px 0 8px;
  color:#efe5d2;
  font-family:"Cormorant Garamond",serif;
  font-size:31px;
  font-weight:600;
}
.comparison-heading p{
  margin:0;
  max-width:720px;
  color:rgba(238,231,216,.64);
  font-size:12px;
  line-height:1.65;
}
.winner-gap{
  min-width:118px;
  padding:12px 14px;
  text-align:center;
  border:1px solid rgba(205,169,93,.20);
  border-radius:10px;
  background:rgba(5,18,13,.22);
}
.winner-gap small{
  display:block;
  color:#a98b52;
  font-size:7px;
  letter-spacing:.1em;
}
.winner-gap strong{
  display:block;
  margin:3px 0 0;
  color:#e6c46f;
  font-family:"Cormorant Garamond",serif;
  font-size:28px;
}
.winner-gap span{
  color:rgba(238,231,216,.43);
  font-size:8px;
}
.comparison-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.comparison-card{
  position:relative;
  padding:18px;
  border:1px solid rgba(205,169,93,.13);
  border-radius:11px;
  background:rgba(4,16,11,.30);
}
.comparison-card.comparison-winner{
  border-color:rgba(205,169,93,.42);
  box-shadow:inset 0 1px 0 rgba(231,197,116,.10);
}
.comparison-rank{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:18px;
}
.comparison-rank span{
  color:#a98b52;
  font-size:9px;
  letter-spacing:.08em;
}
.comparison-rank b{
  padding:4px 7px;
  border-radius:99px;
  background:rgba(205,169,93,.10);
  color:#e5c171;
  font-size:7px;
  letter-spacing:.09em;
}
.comparison-card h4{
  margin:8px 0 2px;
  color:#eee4d2;
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
}
.comparison-match{
  color:#e5c171;
  font-family:"Cormorant Garamond",serif;
  font-size:28px;
}
.comparison-match small{
  color:rgba(238,231,216,.42);
  font-family:inherit;
  font-size:10px;
}
.comparison-score-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:14px 0;
}
.comparison-score-row span{
  padding:8px 7px;
  border:1px solid rgba(205,169,93,.10);
  border-radius:7px;
}
.comparison-score-row small,
.comparison-best small,
.comparison-tradeoff small{
  display:block;
  color:#9d8452;
  font-size:6.5px;
  letter-spacing:.08em;
}
.comparison-score-row b{
  display:block;
  margin-top:2px;
  color:#eee4d2;
  font-size:12px;
}
.comparison-best,
.comparison-tradeoff{
  padding-top:12px;
  border-top:1px solid rgba(205,169,93,.10);
}
.comparison-best strong{
  display:block;
  margin-top:4px;
  color:#dfc178;
  font-family:"Cormorant Garamond",serif;
  font-size:17px;
}
.comparison-tradeoff{
  margin-top:12px;
}
.comparison-tradeoff p{
  margin:5px 0 0;
  color:rgba(238,231,216,.54);
  font-size:9px;
  line-height:1.5;
}
.comparison-open{
  width:100%;
  margin-top:15px;
  padding:10px 12px;
  border:1px solid rgba(205,169,93,.20);
  border-radius:8px;
  background:transparent;
  color:#e4c271;
  cursor:pointer;
  font-size:9px;
  letter-spacing:.04em;
}
.comparison-open:hover{
  background:rgba(205,169,93,.07);
}
.comparison-footnote{
  margin:16px 0 0;
  color:rgba(238,231,216,.38);
  font-size:8.5px;
  line-height:1.5;
}
.route-card-scoreline{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:13px 0;
}
.route-card-scoreline span{
  padding:8px;
  border:1px solid rgba(205,169,93,.11);
  border-radius:7px;
  background:rgba(255,255,255,.01);
}
.route-card-scoreline small{
  display:block;
  color:#9e8552;
  font-size:6.5px;
  letter-spacing:.07em;
}
.route-card-scoreline b{
  display:block;
  margin-top:2px;
  color:#eee3cf;
  font-size:12px;
}
@media(max-width:900px){
  .comparison-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .decision-comparison{padding:20px}
  .comparison-heading{grid-template-columns:1fr}
  .winner-gap{text-align:left}
}


/* v0.32.1 — visual repair: restore solid dark-green comparison surfaces */
.decision-comparison{
  background:
    linear-gradient(180deg, rgba(8,33,24,.99), rgba(5,25,18,.99)) !important;
  border-color:rgba(205,169,93,.26);
  box-shadow:
    0 18px 45px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.comparison-card{
  background:
    linear-gradient(180deg, rgba(7,30,22,.995), rgba(4,21,15,.995)) !important;
  border-color:rgba(205,169,93,.16);
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}

.comparison-card.comparison-winner{
  background:
    linear-gradient(180deg, rgba(9,36,26,.998), rgba(5,24,17,.998)) !important;
  border-color:rgba(205,169,93,.46);
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(231,197,116,.08);
}

.winner-gap{
  background:rgba(6,27,19,.995) !important;
  border-color:rgba(205,169,93,.24);
}

.comparison-score-row span,
.route-card-scoreline span{
  background:rgba(4,21,15,.96) !important;
}

.comparison-open{
  background:rgba(4,21,15,.88) !important;
}

.comparison-open:hover{
  background:rgba(205,169,93,.10) !important;
}


/* v0.34 — information hierarchy cleanup */
#topThree,
.top-three{
  display:none !important;
}

.result-actions{
  margin-top:28px;
}

.decision-comparison{
  margin-bottom:8px;
}

.comparison-card .comparison-score-row{
  margin-bottom:16px;
}

.detail-match-breakdown{
  display:none !important;
}

.match-method-strip{
  display:none !important;
}


/* v0.35 — cinematic top-down journey map */
.journey-map-shell{
  margin:0 48px 48px;
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(330px,.75fr);
  min-height:610px;
  border:1px solid rgba(205,169,93,.26);
  border-radius:16px;
  overflow:hidden;
  background:#061b14;
  box-shadow:0 24px 60px rgba(0,0,0,.24);
}

.journey-map-main{
  position:relative;
  min-height:610px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 18% 20%,rgba(236,199,114,.18),transparent 23%),
    radial-gradient(circle at 78% 70%,rgba(193,154,80,.12),transparent 26%),
    linear-gradient(145deg,#284b37 0%,#486246 28%,#293f30 49%,#183126 72%,#0d251c 100%);
}
.journey-map-main::before{
  content:"";
  position:absolute;inset:-10%;
  z-index:-2;
  background:
    repeating-radial-gradient(ellipse at 25% 30%,transparent 0 18px,rgba(226,204,146,.09) 19px 20px,transparent 21px 37px),
    repeating-radial-gradient(ellipse at 74% 72%,transparent 0 24px,rgba(226,204,146,.055) 25px 26px,transparent 27px 48px);
  transform:rotate(-8deg) scale(1.1);
}
.journey-map-main::after{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(7,25,18,.10),rgba(5,20,15,.34)),
    radial-gradient(ellipse at 42% 55%,transparent 0 30%,rgba(3,16,11,.18) 65%,rgba(2,12,9,.42) 100%);
  pointer-events:none;
}

.route-map-costa::before{transform:rotate(-18deg) scale(1.18)}
.route-map-norte::before{transform:rotate(2deg) scale(1.12)}
.route-map-primitivo::before{transform:rotate(10deg) scale(1.12)}
.route-map-invierno::before{transform:rotate(-2deg) scale(1.17)}
.route-map-ingles::before{transform:rotate(21deg) scale(1.12)}

.map-atmosphere{position:absolute;inset:0;pointer-events:none}
.map-compass{
  position:absolute;left:24px;top:24px;
  width:68px;height:68px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(231,198,119,.34);
  background:rgba(4,20,14,.58);
  color:#e1bd67;font-size:28px;
  box-shadow:0 8px 26px rgba(0,0,0,.18)
}
.map-compass small{
  position:absolute;top:6px;font-size:7px;letter-spacing:.15em;color:#c7a65c
}
.map-region-label{
  position:absolute;left:42%;top:13%;
  font-family:"Cormorant Garamond",serif;
  font-size:24px;letter-spacing:.19em;
  color:rgba(237,220,178,.24)
}
.map-data-badge{
  position:absolute;right:20px;top:20px;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(205,169,93,.20);
  background:rgba(4,20,14,.55);
  color:rgba(231,205,145,.62);
  font-size:7px;letter-spacing:.09em
}

.journey-route-svg{
  position:absolute;inset:8% 5% 10% 5%;
  width:90%;height:82%;
  overflow:visible
}
.route-shadow{
  fill:none;stroke:rgba(31,18,7,.45);stroke-width:7;stroke-linecap:round;stroke-linejoin:round
}
.route-gold{
  fill:none;stroke:#e8c56f;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round
}
.map-route-node circle:first-child{
  fill:#f0d185;stroke:#6f5728;stroke-width:.8
}
.map-route-node .node-core{fill:#fff1bd;stroke:none}
.map-route-node.start circle:first-child,
.map-route-node.finish circle:first-child{stroke:#e9c46c;stroke-width:1.2}

.journey-map-labels{position:absolute;inset:8% 5% 10% 5%;pointer-events:none}
.map-place-label{
  position:absolute;
  transform:translate(-50%,-150%);
  min-width:110px;
  text-align:center;
  color:#f1e7cf;
  text-shadow:0 2px 8px rgba(0,0,0,.85)
}
.map-place-label strong{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:15px;font-weight:600;line-height:1.05
}
.map-place-label small{
  display:inline-block;margin-top:5px;padding:3px 6px;border-radius:999px;
  background:rgba(5,24,17,.76);border:1px solid rgba(205,169,93,.28);
  color:#e5c170;font-size:6px;letter-spacing:.12em
}
.map-place-label.start-label{transform:translate(-50%,35%)}
.map-place-label.finish-label{transform:translate(-50%,-160%)}

.map-caption{
  position:absolute;left:24px;bottom:22px;
  max-width:330px;padding:15px 17px;
  border:1px solid rgba(205,169,93,.23);border-radius:10px;
  background:rgba(4,20,14,.88);
  backdrop-filter:blur(6px)
}
.map-caption strong{
  display:block;margin:3px 0;
  color:#eee2ca;font-family:"Cormorant Garamond",serif;font-size:21px
}
.map-caption small{color:rgba(238,231,216,.48);font-size:9px}

.journey-map-side{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#08241a,#061c15);
  border-left:1px solid rgba(205,169,93,.18)
}
.map-side-head{padding:25px 24px 16px}
.map-side-head h4{
  margin:4px 0;color:#eee4d2;
  font-family:"Cormorant Garamond",serif;font-size:25px
}
.map-side-head p{margin:0;color:rgba(238,231,216,.46);font-size:10px}

.map-stage-list{
  padding:0 17px 16px;
  max-height:305px;overflow:auto
}
.map-stage-item{
  display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;
  padding:11px 10px;
  border-top:1px solid rgba(205,169,93,.11)
}
.map-stage-item:first-child{border-top:1px solid rgba(205,169,93,.17)}
.map-stage-item>span{
  width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(220,183,96,.45);color:#e2bd67;font-size:10px
}
.map-stage-item strong{
  display:block;color:#e9dfca;font-family:"Cormorant Garamond",serif;font-size:15px
}
.map-stage-item small{display:block;margin-top:3px;color:rgba(238,231,216,.43);font-size:8px}

.elevation-profile-card{
  margin-top:auto;padding:17px;
  border-top:1px solid rgba(205,169,93,.17);
  background:rgba(3,16,12,.36)
}
.elevation-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.elevation-head small{
  display:block;color:#9f8450;font-size:7px;letter-spacing:.1em
}
.elevation-head strong{
  display:block;margin-top:4px;color:#e7ddc7;font-family:"Cormorant Garamond",serif;font-size:17px
}
.elevation-head>span{
  padding:5px 7px;border-radius:999px;
  border:1px solid rgba(124,159,110,.24);color:#9fc18f;font-size:6px;letter-spacing:.1em
}
.elevation-placeholder{
  position:relative;height:112px;margin:13px 0 9px;
  border-left:1px solid rgba(205,169,93,.18);
  border-bottom:1px solid rgba(205,169,93,.18);
  background:
    linear-gradient(180deg,rgba(205,169,93,.015),transparent)
}
.elevation-gridline{
  position:absolute;left:0;right:0;height:1px;background:rgba(205,169,93,.08)
}
.elevation-gridline.g1{top:25%}.elevation-gridline.g2{top:50%}.elevation-gridline.g3{top:75%}
.elevation-locked{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:rgba(231,220,194,.35);text-align:center
}
.elevation-locked b{font-size:27px;font-weight:400;color:rgba(224,188,104,.36)}
.elevation-locked span{margin-top:4px;font-size:8px}
.elevation-profile-card p{
  margin:0;color:rgba(238,231,216,.40);font-size:8.5px;line-height:1.5
}

@media(max-width:980px){
  .journey-map-shell{grid-template-columns:1fr;margin:0 25px 38px}
  .journey-map-side{border-left:0;border-top:1px solid rgba(205,169,93,.18)}
  .journey-map-main{min-height:520px}
  .map-stage-list{max-height:none}
}
@media(max-width:620px){
  .journey-map-main{min-height:430px}
  .map-place-label strong{font-size:12px}
  .map-region-label{display:none}
  .map-data-badge{max-width:150px;text-align:center}
}


/* v0.36 — cinematic top-down terrain background */
.journey-map-main{
  background:
    linear-gradient(145deg,#324f39 0%,#405e43 22%,#2a4935 47%,#183428 72%,#0b251c 100%) !important;
}

.terrain-scene{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-3;
  pointer-events:none;
}

.terrain-scene::before{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(ellipse at 18% 18%,rgba(245,218,151,.22) 0 8%,transparent 28%),
    radial-gradient(ellipse at 82% 74%,rgba(203,166,91,.16) 0 8%,transparent 27%),
    radial-gradient(ellipse at 46% 52%,rgba(7,21,16,.28) 0 18%,transparent 45%),
    linear-gradient(160deg,rgba(235,205,132,.08),transparent 38%,rgba(3,16,11,.22) 72%);
  filter:blur(2px);
}

.terrain-scene::after{
  content:"";
  position:absolute;
  inset:-14%;
  opacity:.38;
  background:
    repeating-radial-gradient(ellipse at 18% 28%,
      transparent 0 23px,
      rgba(227,208,158,.18) 24px 25px,
      transparent 26px 46px),
    repeating-radial-gradient(ellipse at 72% 66%,
      transparent 0 31px,
      rgba(227,208,158,.10) 32px 33px,
      transparent 34px 60px);
  transform:rotate(-11deg) scale(1.2);
  mix-blend-mode:screen;
}

.terrain-ridge,
.terrain-valley,
.terrain-coast,
.terrain-light,
.terrain-vignette{
  position:absolute;
  display:block;
}

.terrain-ridge{
  border-radius:55% 45% 52% 48% / 48% 58% 42% 52%;
  background:
    radial-gradient(ellipse at 50% 38%,
      rgba(126,155,101,.58) 0 21%,
      rgba(64,104,70,.68) 43%,
      rgba(20,55,39,.36) 67%,
      transparent 75%);
  box-shadow:
    inset -28px -24px 55px rgba(2,15,10,.34),
    inset 18px 13px 40px rgba(236,211,149,.09);
  filter:blur(.4px);
}

.ridge-a{
  width:63%;height:37%;
  left:-8%;top:18%;
  transform:rotate(-13deg);
}
.ridge-b{
  width:58%;height:36%;
  right:-12%;top:35%;
  transform:rotate(11deg);
}
.ridge-c{
  width:52%;height:29%;
  left:20%;bottom:-7%;
  transform:rotate(-5deg);
}

.terrain-valley{
  width:74%;height:18%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(6,31,23,.52) 0 26%,
      rgba(21,56,38,.30) 49%,
      transparent 72%);
  filter:blur(6px);
}
.valley-a{left:9%;top:47%;transform:rotate(-12deg)}
.valley-b{right:-4%;top:22%;transform:rotate(15deg)}

.terrain-light{
  inset:0;
  background:
    radial-gradient(circle at 87% 9%,rgba(250,217,137,.34) 0 2%,rgba(241,202,114,.12) 11%,transparent 27%),
    linear-gradient(150deg,rgba(242,210,142,.12),transparent 43%);
  mix-blend-mode:screen;
}

.terrain-vignette{
  inset:0;
  box-shadow:
    inset 0 0 95px rgba(1,10,7,.50),
    inset 0 -80px 100px rgba(2,15,10,.28);
}

/* coast: only really visible on coastal-facing routes */
.terrain-coast{
  display:none;
  left:-16%;top:-12%;
  width:46%;height:126%;
  border-radius:0 62% 58% 0 / 0 48% 52% 0;
  background:
    radial-gradient(circle at 72% 28%,rgba(176,199,190,.17),transparent 18%),
    linear-gradient(110deg,#0d3440 0%,#174a52 42%,#335f5c 72%,rgba(64,97,75,.1) 100%);
  box-shadow:
    inset -30px 0 55px rgba(222,211,155,.08),
    18px 0 50px rgba(7,25,20,.24);
  opacity:.92;
}

.route-map-costa .terrain-coast,
.route-map-norte .terrain-coast{
  display:block;
}

.route-map-ingles .terrain-coast{
  display:block;
  width:38%;
  height:72%;
  top:-15%;
  left:2%;
  transform:rotate(12deg);
  border-radius:48%;
}

.route-map-costa .ridge-a{left:12%;top:9%;width:55%}
.route-map-costa .ridge-b{right:-15%;top:40%}
.route-map-norte .ridge-a{left:15%;top:4%;width:72%;height:31%;transform:rotate(-2deg)}
.route-map-norte .ridge-b{right:-5%;top:37%;width:68%}
.route-map-primitivo .ridge-a{left:-4%;top:9%;height:42%}
.route-map-primitivo .ridge-b{right:-4%;top:31%;height:43%}
.route-map-primitivo .ridge-c{left:15%;bottom:-4%;height:35%}
.route-map-plata .terrain-light{
  background:
    radial-gradient(circle at 84% 10%,rgba(251,215,132,.38),transparent 25%),
    linear-gradient(150deg,rgba(225,185,100,.15),transparent 48%);
}
.route-map-invierno .ridge-a,
.route-map-invierno .ridge-b{
  background:
    radial-gradient(ellipse at 50% 38%,
      rgba(111,139,92,.54) 0 21%,
      rgba(53,92,64,.72) 43%,
      rgba(17,48,34,.42) 68%,
      transparent 76%);
}

/* faint rural-land pattern to stop the map feeling flat */
.journey-map-main .map-atmosphere::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  background:
    linear-gradient(27deg,transparent 0 48%,rgba(224,204,151,.13) 49% 50%,transparent 51% 100%),
    linear-gradient(117deg,transparent 0 48%,rgba(224,204,151,.09) 49% 50%,transparent 51% 100%);
  background-size:105px 105px,145px 145px;
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 88%,transparent 100%);
}

/* keep route and labels clearly above the richer terrain */
.journey-route-svg{
  z-index:3;
}
.journey-map-labels{
  z-index:4;
}
.map-atmosphere{
  z-index:2;
}
.map-caption{
  z-index:5;
  background:rgba(4,20,14,.93);
}

/* Slightly brighter route line against the richer map */
.route-shadow{
  stroke:rgba(19,12,4,.56);
  stroke-width:8;
}
.route-gold{
  stroke:#f0cb73;
  stroke-width:3.6;
}

@media(max-width:620px){
  .terrain-scene::after{opacity:.26}
  .terrain-coast{opacity:.72}
}


/* v0.37 — approved Camino Francés route artwork */
.approved-route-map{
  margin:0 48px 48px;
  border:1px solid rgba(205,169,93,.28);
  border-radius:16px;
  overflow:hidden;
  background:#061b14;
  box-shadow:0 24px 60px rgba(0,0,0,.24);
}
.approved-route-map img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.approved-route-map-frances{
  position:relative;
}
.approved-route-map-frances::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 55px rgba(2,13,9,.16);
}
@media(max-width:980px){
  .approved-route-map{margin:0 25px 38px}
}
@media(max-width:620px){
  .approved-route-map{margin:0 14px 30px;border-radius:11px}
}


/* v0.38 — approved Camino Francés elevation profile */
.approved-elevation-profile{
  margin:0 48px 48px;
  border:1px solid rgba(205,169,93,.28);
  border-radius:16px;
  overflow:hidden;
  background:#061b14;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}
.approved-elevation-profile img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
@media(max-width:980px){
  .approved-elevation-profile{margin:0 25px 38px}
}
@media(max-width:620px){
  .approved-elevation-profile{margin:0 14px 30px;border-radius:11px}
}


/* v0.39 — approved Camino Portugués route artwork */
.approved-route-map-portugues{
  position:relative;
}
.approved-route-map-portugues::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 55px rgba(2,13,9,.14);
}


/* v0.40 — approved Camino Portugués elevation profile */
.approved-elevation-profile-portugues{
  position:relative;
}
.approved-elevation-profile-portugues::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 55px rgba(2,13,9,.14);
}


/* v0.41 — answer save/load and direct editing */
.save-load-button{
  min-height:48px;
  padding:0 22px;
}

.answer-file-tools{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  margin:0 0 24px;
  padding:20px 22px;
  border:1px solid rgba(205,169,93,.20);
  border-radius:12px;
  background:rgba(4,20,14,.46);
}
.answer-file-tools p{
  margin:5px 0 0;
  color:rgba(238,231,216,.58);
  font-size:13px;
  line-height:1.5;
}
.answer-file-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.answer-file-buttons .ghost{
  white-space:nowrap;
}

.review-edit{
  min-width:104px;
}

@media(max-width:760px){
  .answer-file-tools{
    align-items:flex-start;
    flex-direction:column;
  }
  .answer-file-buttons{
    width:100%;
    justify-content:flex-start;
  }
  .answer-file-buttons .ghost{
    flex:1 1 160px;
  }
}


/* v0.42 — approved Camino del Norte artwork */
.approved-route-map-norte,
.approved-elevation-profile-norte{
  position:relative;
}
.approved-route-map-norte::after,
.approved-elevation-profile-norte::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 55px rgba(2,13,9,.14);
}

/* v0.43 — approved Camino Primitivo artwork */
.approved-route-map-primitivo,
.approved-elevation-profile-primitivo{
  position:relative;
}
.approved-route-map-primitivo::after,
.approved-elevation-profile-primitivo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 55px rgba(2,13,9,.14);
}


/* v0.49 — unified presentation for all approved Camino artwork */
.approved-route-map,
.approved-elevation-profile{
  position:relative;
  isolation:isolate;
}

.approved-route-map::after,
.approved-elevation-profile::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(205,169,93,.08),
    inset 0 0 55px rgba(2,13,9,.14);
}


/* v0.50 — result screen hierarchy cleanup */
.result-screen .result-intro h2{font-size:clamp(44px,5vw,66px)}
.result-screen .result-lead{max-width:680px}
.result-screen .profile-card{
  max-width:980px;margin:26px auto 34px;padding:18px 20px;
  display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:center;text-align:left
}
.result-screen .profile-compass{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(211,180,107,.30);border-radius:50%;
  color:#d9b96f;font-size:17px
}
.result-screen .profile-copy>small{
  display:block;margin-bottom:5px;color:#a98b52;font-size:7px;letter-spacing:.14em
}
.result-screen .profile-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.result-screen .profile-card strong{display:inline-block;margin:0;font-size:25px}
.result-screen .profile-card p{margin:4px 0 0;max-width:780px;color:#aebbb2}
.result-screen .profile-tags{margin:0;justify-content:flex-start}
.result-screen .profile-tags span{padding:4px 8px;font-size:8px}

.result-screen .top-comparison{margin:0 0 24px}
.result-screen .decision-comparison{padding:24px}
.result-screen .comparison-heading{margin-bottom:18px}
.result-screen .comparison-heading h3{margin:3px 0 6px;font-size:34px}
.result-screen .comparison-heading p{max-width:760px;font-size:11px}
.result-screen .comparison-grid{gap:10px}
.result-screen .comparison-card{padding:17px}
.result-screen .comparison-title-row{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-top:7px
}
.result-screen .comparison-card h4{margin:0;font-size:21px;line-height:1.1}
.result-screen .comparison-match{
  flex:0 0 auto;text-align:right;font-family:Inter,sans-serif;line-height:1
}
.result-screen .comparison-match b{
  display:block;color:#e5c171;font-family:"Cormorant Garamond",serif;
  font-size:25px;font-weight:600
}
.result-screen .comparison-match small{
  display:block;margin-top:3px;font-family:Inter,sans-serif;
  font-size:7px;letter-spacing:.08em;text-transform:uppercase
}
.result-screen .comparison-alt{
  color:#a99975 !important;background:rgba(255,255,255,.025) !important
}
.result-screen .comparison-score-row-compact{grid-template-columns:repeat(2,1fr);margin:12px 0}
.result-screen .comparison-score-row-compact span{padding:7px 8px}
.result-screen .comparison-insight{min-height:124px}
.result-screen .comparison-best{padding-top:10px}
.result-screen .comparison-best strong{font-size:16px}
.result-screen .comparison-tradeoff{margin-top:10px;padding-top:10px}
.result-screen .comparison-tradeoff p{font-size:9px}
.result-screen .comparison-open{margin-top:13px}
.result-screen .comparison-footnote{margin:13px 2px 0}
.result-screen .result-actions{margin-top:22px}

@media(max-width:720px){
  .result-screen .profile-card{grid-template-columns:1fr;text-align:center}
  .result-screen .profile-compass{margin:auto}
  .result-screen .profile-line{justify-content:center}
  .result-screen .profile-tags{justify-content:center}
}


/* v0.51 — route-specific cinematic hero scenery */
.detail-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#294c4b;
}
.detail-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--route-hero-bg);
  background-size:cover;
  background-position:center;
  opacity:.54;
  filter:saturate(.76) brightness(.72) contrast(.94);
}
.detail-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(17,52,49,.96) 0%,rgba(25,65,62,.86) 42%,rgba(18,49,46,.57) 72%,rgba(9,32,28,.70) 100%),
    linear-gradient(180deg,rgba(12,34,30,.10),rgba(7,25,21,.30));
}


/* v0.52 — vivid route scenery with protected text readability */
.detail-hero::before{
  opacity:.72;
  filter:saturate(.95) brightness(.78) contrast(.98);
}
.detail-hero::after{
  background:
    linear-gradient(90deg,
      rgba(8,34,29,.94) 0%,
      rgba(12,42,37,.86) 38%,
      rgba(11,37,33,.64) 66%,
      rgba(7,28,24,.52) 100%),
    linear-gradient(180deg,rgba(6,24,21,.12),rgba(5,22,18,.30));
}

/* v0.53 — personalized result explanation */
.personal-explanation{margin:18px 0 26px;padding:28px;border:1px solid rgba(205,169,93,.18);border-radius:22px;background:radial-gradient(circle at 82% 10%,rgba(205,169,93,.055),transparent 34%),linear-gradient(145deg,rgba(11,42,32,.96),rgba(8,31,24,.97));box-shadow:0 24px 60px rgba(0,0,0,.16)}
.personal-explanation-head{max-width:900px}.personal-explanation-head h3{margin:6px 0 9px;color:#f0eadb;font-family:"Cormorant Garamond",serif;font-size:clamp(30px,3vw,42px);font-weight:500;line-height:1.05}.personal-explanation-head h3 em{color:#dfbd70;font-weight:500}.personal-explanation-head>p{margin:0;max-width:850px;color:#b8c3ba;font-size:12px;line-height:1.75}
.personal-explanation-grid{display:grid;grid-template-columns:1.05fr .95fr 1.2fr;gap:10px;margin-top:21px}.personal-explanation-block{min-width:0;padding:16px;border:1px solid rgba(205,169,93,.12);border-radius:15px;background:rgba(255,255,255,.025)}.personal-explanation-block>small{display:block;margin-bottom:10px;color:#a98b52;font-size:7px;letter-spacing:.14em}.personal-explanation-block p{margin:0;color:#aebbb2;font-size:10px;line-height:1.65}
.personal-reason-tags{display:flex;flex-wrap:wrap;gap:7px}.personal-reason-tags span{padding:7px 9px;border:1px solid rgba(205,169,93,.24);border-radius:999px;color:#dcc17d;background:rgba(205,169,93,.04);font-size:9px;line-height:1.25}.runner-up-note{background:linear-gradient(145deg,rgba(205,169,93,.045),rgba(255,255,255,.018))}
@media(max-width:850px){.personal-explanation-grid{grid-template-columns:1fr}.personal-explanation{padding:21px}}


/* v0.54 — vivid photographic language across the full questionnaire */

/* Remove the old v0.3 generated landscape geometry.
   These pseudo-elements were the source of the dark/green triangles and shapes
   appearing on top of the real photographs. */
.visual-answers .answer-scene::before{
  content:none !important;
  display:none !important;
  background:none !important;
  clip-path:none !important;
}

/* Let the photography carry the card, like the approved visual direction. */
.visual-answers .answer-scene{
  background-image:
    linear-gradient(to bottom,
      rgba(3,12,9,0) 0%,
      rgba(3,12,9,.02) 52%,
      rgba(6,19,14,.64) 82%,
      rgba(6,19,14,.90) 100%),
    var(--photo) !important;
  background-size:cover !important;
  background-position:center !important;
  filter:saturate(1.16) contrast(1.055) brightness(1.035);
}

/* Very subtle cinematic warmth only — no visible graphic shapes. */
.visual-answers .answer-scene::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(224,178,82,.045),transparent 38%),
    radial-gradient(circle at 78% 18%,rgba(255,214,118,.035),transparent 32%);
}

/* Slightly richer card treatment to match the brighter photography. */
.visual-answers .answer{
  background:linear-gradient(180deg,#10251c 0%,#0b1d16 100%);
}
.visual-answers .answer.selected{
  border-color:#e8bd5d;
  box-shadow:
    0 0 0 1px rgba(232,189,93,.62),
    0 18px 42px rgba(0,0,0,.32);
}
.visual-answers .answer:hover .answer-scene{
  filter:saturate(1.20) contrast(1.06) brightness(1.055);
}
.visual-answers .scene-mark{
  background:rgba(5,23,17,.78);
  border-color:rgba(241,202,118,.72);
}
/* v0.57 — The Routes / Camino Frances editorial subpage */
.routes-page,.route-page{background:#091510;color:#f8f0dc;padding-top:86px}.routes-hero{height:440px;position:relative;background:url('assets/hero-frances-v052.webp') center 52%/cover no-repeat}.routes-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,14,10,.9),rgba(4,14,10,.3)),linear-gradient(0deg,#091510 0,transparent 45%)}.routes-hero-content{position:absolute;left:7vw;bottom:70px;max-width:650px}.routes-hero h1,.route-page h1,.route-page h2{font-family:'Cormorant Garamond',Georgia,serif}.routes-hero h1{font-size:72px;margin:0}.routes-hero p{font:22px/1.5 'Cormorant Garamond',serif}.routes-index{max-width:1180px;margin:0 auto;padding:55px 5vw 90px}.route-index-card{width:100%;border:1px solid rgba(218,182,100,.3);border-radius:18px;padding:28px 32px;background:linear-gradient(135deg,#10291f,#091812);color:#f5ecd7;text-align:left;display:grid;grid-template-columns:70px 1fr auto;gap:22px;align-items:center;cursor:pointer}.route-index-card>span{font:42px 'Cormorant Garamond';color:#d9b666}.route-index-card small{letter-spacing:.22em;color:#b89b5e}.route-index-card h2{font-size:38px;margin:3px 0}.route-index-card p{margin:0;color:#aebbb2}.route-index-card b{color:#e4c477}.frances-hero{height:650px;position:relative;background:url('assets/hero-frances-v052.webp') center 46%/cover no-repeat}.frances-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,13,9,.95) 0,rgba(4,15,11,.76) 37%,rgba(5,15,11,.14) 72%),linear-gradient(0deg,rgba(5,17,12,.75),transparent 45%)}.frances-copy{position:absolute;left:6.5vw;top:100px;max-width:570px}.frances-copy h1{font-size:86px;line-height:.76;font-weight:500;margin:15px 0 28px}.frances-copy h1 em{font-style:normal;color:#ecd08a}.frances-tagline{font:27px 'Cormorant Garamond';color:#f2e5c7;margin:0 0 20px}.frances-intro{max-width:500px;line-height:1.7;color:#e1e1d7}.frances-stats{display:grid;grid-template-columns:repeat(4,1fr);background:#0d3025;border-top:1px solid #6f5c31;border-bottom:1px solid #6f5c31;padding:30px 6vw}.frances-stats div{text-align:center;border-right:1px solid rgba(230,199,125,.2);padding:8px}.frances-stats div:last-child{border:0}.frances-stats strong{display:block;font:34px 'Cormorant Garamond';color:#f0d183}.frances-stats span{font-size:10px;color:#c6cec8}.paper-section{background:#f0eadb;color:#17251d;padding:75px 6vw}.paper-section .section-kicker,.frances-route-band .section-kicker,.frances-cta .section-kicker{font-size:9px;letter-spacing:.3em;color:#9d7838}.paper-section h2,.frances-route-band h2,.frances-cta h2{font-size:48px;font-weight:500;margin:10px 0 24px;line-height:1}.paper-section p{line-height:1.7;color:#4e574f}.history-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.history-photo{height:430px;border-radius:4px;background:url('assets/hero-frances-v052.webp') 70% 55%/cover no-repeat;box-shadow:0 15px 40px rgba(27,31,24,.18)}.frances-route-band{padding:65px 6vw;background:linear-gradient(110deg,#0a2a20,#092017);color:#f4ead3}.frances-route-band p{max-width:690px;color:#c8d1ca;line-height:1.7}.route-strip{display:flex;align-items:center;margin-top:36px;font-size:9px;color:#ead18d}.route-strip i{height:1px;flex:1;background:#d7ad55;margin:0 8px}.route-strip span{white-space:nowrap}.highlights>h2{margin-bottom:35px}.highlight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.highlight-grid article{background:#f7f1e5;border:1px solid #d7cfbd;border-radius:9px;overflow:hidden;box-shadow:0 9px 22px rgba(40,39,31,.08)}.highlight-grid h3{font:600 22px 'Cormorant Garamond';margin:15px 15px 4px}.highlight-grid p{font-size:11px;margin:0 15px 20px;line-height:1.5}.hi-img{height:180px;background-image:url('assets/hero-frances-v052.webp');background-size:cover}.hi-pyrenees{background-position:10% 45%}.hi-cities{background-position:62% 43%}.hi-meseta{background-position:35% 65%}.hi-galicia{background-position:78% 65%}.frances-quote{min-height:290px;display:grid;place-items:center;padding:50px 10vw;background:linear-gradient(rgba(4,16,11,.42),rgba(4,16,11,.72)),url('assets/hero-frances-v052.webp') center 67%/cover}.frances-quote blockquote{max-width:820px;text-align:center;font:italic 30px/1.35 'Cormorant Garamond';color:#f5e8c7}.practical{text-align:center}.practical-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;border-top:1px solid #d8ceba;padding-top:30px}.practical-grid b{display:block;font:22px 'Cormorant Garamond';color:#8e6b31}.practical-grid small{display:block;margin-top:5px;color:#6c746e}.frances-cta{min-height:430px;padding:85px 6vw;display:flex;align-items:center;background:linear-gradient(90deg,rgba(3,15,10,.9),rgba(3,15,10,.25)),url('assets/hero-frances-v052.webp') center 78%/cover}.frances-cta>div{max-width:620px}.frances-cta h2{font-size:55px;color:#fff1d3}.frances-cta p{line-height:1.6;color:#d6ded8;margin-bottom:25px}.sources-note{padding:18px 6vw 30px;background:#06120d;color:#718379;font-size:9px;line-height:1.6}.main-nav a.route-active:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:1px;background:var(--gold)}
@media(max-width:800px){.frances-hero{height:600px}.frances-copy h1{font-size:62px}.frances-stats{grid-template-columns:1fr 1fr}.history-grid{grid-template-columns:1fr}.highlight-grid{grid-template-columns:1fr 1fr}.practical-grid{grid-template-columns:1fr 1fr 1fr}.route-strip{overflow:auto}.route-index-card{grid-template-columns:50px 1fr}.route-index-card b{grid-column:2}.routes-hero h1{font-size:54px}}

/* v0.58 — Camino del Norte route page */
.routes-index{display:grid;gap:18px}.route-index-card:hover{transform:translateY(-2px);border-color:rgba(228,196,119,.62);box-shadow:0 16px 40px rgba(0,0,0,.18)}
.norte-hero{background-image:url('assets/hero-norte-v052.webp');background-position:center 52%}.norte-history-photo{background-image:url('assets/hero-norte-v052.webp');background-position:68% 52%}.norte-san-sebastian,.norte-cantabria,.norte-asturias,.norte-galicia{background-image:url('assets/hero-norte-v052.webp')}.norte-san-sebastian{background-position:8% 50%}.norte-cantabria{background-position:38% 50%}.norte-asturias{background-position:68% 48%}.norte-galicia{background-position:92% 55%}.norte-quote{background-image:linear-gradient(rgba(4,16,11,.42),rgba(4,16,11,.72)),url('assets/hero-norte-v052.webp');background-position:center 63%}.norte-cta{background-image:linear-gradient(90deg,rgba(3,15,10,.9),rgba(3,15,10,.25)),url('assets/hero-norte-v052.webp');background-position:center 70%}

/* v0.59 — Camino Portugués route page */
.portugues-hero{background-image:url('assets/hero-portugues-v052.webp');background-position:center 52%}.portugues-history-photo{background-image:url('assets/hero-portugues-v052.webp');background-position:66% 50%}.portugues-porto,.portugues-ponte,.portugues-tui,.portugues-padron{background-image:url('assets/hero-portugues-v052.webp')}.portugues-porto{background-position:8% 48%}.portugues-ponte{background-position:35% 52%}.portugues-tui{background-position:66% 50%}.portugues-padron{background-position:92% 54%}.portugues-quote{background-image:linear-gradient(rgba(4,16,11,.42),rgba(4,16,11,.72)),url('assets/hero-portugues-v052.webp');background-position:center 64%}.portugues-cta{background-image:linear-gradient(90deg,rgba(3,15,10,.9),rgba(3,15,10,.25)),url('assets/hero-portugues-v052.webp');background-position:center 72%}
/* v0.60 — Camino Primitivo route page */
.primitivo-hero{background-image:url('assets/hero-primitivo-v052.webp');background-position:center 50%}.primitivo-history-photo{background-image:url('assets/hero-primitivo-v052.webp');background-position:62% 48%}.primitivo-oviedo,.primitivo-hospitales,.primitivo-salime,.primitivo-lugo{background-image:url('assets/hero-primitivo-v052.webp')}.primitivo-oviedo{background-position:94% 50%}.primitivo-hospitales{background-position:70% 44%}.primitivo-salime{background-position:48% 52%}.primitivo-lugo{background-position:23% 54%}.primitivo-quote{background-image:linear-gradient(rgba(4,16,11,.42),rgba(4,16,11,.72)),url('assets/hero-primitivo-v052.webp');background-position:center 58%}.primitivo-cta{background-image:linear-gradient(90deg,rgba(3,15,10,.9),rgba(3,15,10,.25)),url('assets/hero-primitivo-v052.webp');background-position:center 68%}

/* v0.61 — Camino Inglés route page */
.ingles-hero{background-image:url('assets/hero-ingles-v052.webp');background-position:center 50%}.ingles-history-photo{background-image:url('assets/hero-ingles-v052.webp');background-position:58% 48%}.ingles-ferrol,.ingles-pontedeume,.ingles-betanzos,.ingles-bruma{background-image:url('assets/hero-ingles-v052.webp')}.ingles-ferrol{background-position:92% 48%}.ingles-pontedeume{background-position:70% 50%}.ingles-betanzos{background-position:47% 52%}.ingles-bruma{background-position:24% 52%}.ingles-quote{background-image:linear-gradient(rgba(4,16,11,.42),rgba(4,16,11,.72)),url('assets/hero-ingles-v052.webp');background-position:center 57%}.ingles-cta{background-image:linear-gradient(90deg,rgba(3,15,10,.9),rgba(3,15,10,.25)),url('assets/hero-ingles-v052.webp');background-position:center 65%}

/* v0.62 — Vía de la Plata route page */
.plata-hero{background-image:url('assets/hero-plata-v052.webp');background-position:center 50%}
.plata-history-photo{background-image:url('assets/hero-plata-v052.webp');background-position:58% 48%}
.plata-merida{background-image:url('assets/plata-merida-highlight-v153.webp');background-position:center center}
.plata-caceres{background-image:url('assets/plata-caceres-highlight-v153.webp');background-position:center center}
.plata-salamanca{background-image:url('assets/plata-salamanca-highlight-v153.webp');background-position:center center}
.plata-ourense{background-image:url('assets/plata-ourense-highlight-v153.webp');background-position:center center}
.plata-quote{background-image:linear-gradient(rgba(4,16,11,.42),rgba(4,16,11,.72)),url('assets/hero-plata-v052.webp');background-position:center 57%}
.plata-cta{background-image:linear-gradient(90deg,rgba(3,15,10,.9),rgba(3,15,10,.25)),url('assets/hero-plata-v052.webp');background-position:center 65%}

/* v0.63 — Camino de Invierno route page */
.invierno-hero{background-image:url('assets/hero-invierno-v052.webp');background-position:center 50%}
.invierno-history-photo{background-image:url('assets/hero-invierno-v052.webp');background-position:58% 48%}
.invierno-medulas,.invierno-valdeorras,.invierno-ribeira,.invierno-monforte{background-image:url('assets/hero-invierno-v052.webp')}
.invierno-medulas{background-position:90% 48%}.invierno-valdeorras{background-position:68% 50%}.invierno-ribeira{background-position:45% 52%}.invierno-monforte{background-position:22% 52%}
.invierno-quote{background-image:linear-gradient(rgba(4,16,11,.42),rgba(4,16,11,.72)),url('assets/hero-invierno-v052.webp');background-position:center 57%}
.invierno-cta{background-image:linear-gradient(90deg,rgba(3,15,10,.9),rgba(3,15,10,.25)),url('assets/hero-invierno-v052.webp');background-position:center 65%}

/* v0.64 — Portuguese Coastal Way route page */
.costa-page-hero{background-image:url('assets/hero-costa-v052.webp');background-position:center 50%}
.costa-history-photo{background-image:url('assets/hero-costa-v052.webp');background-position:58% 48%}
.costa-viana,.costa-guarda,.costa-baiona,.costa-vigo{background-image:url('assets/hero-costa-v052.webp')}
.costa-viana{background-position:90% 48%}.costa-guarda{background-position:68% 50%}.costa-baiona{background-position:45% 52%}.costa-vigo{background-position:22% 52%}
.costa-page-quote{background-image:linear-gradient(rgba(4,16,11,.42),rgba(4,16,11,.72)),url('assets/hero-costa-v052.webp');background-position:center 57%}
.costa-page-cta{background-image:linear-gradient(90deg,rgba(3,15,10,.9),rgba(3,15,10,.25)),url('assets/hero-costa-v052.webp');background-position:center 65%}

/* v0.65 — approved Camino Francés highlight photography */
#screen-route-frances .hi-pyrenees{background-image:url('assets/frances-highlight-pyrenees-v065.webp');background-position:center;background-size:cover}
#screen-route-frances .hi-cities{background-image:url('assets/frances-highlight-cities-v065.webp');background-position:center;background-size:cover}
#screen-route-frances .hi-meseta{background-image:url('assets/frances-highlight-meseta-v065.webp');background-position:center;background-size:cover}
#screen-route-frances .hi-galicia{background-image:url('assets/frances-highlight-galicia-v065.webp');background-position:center;background-size:cover}

/* v0.66 — route highlight media containment */
.highlights .highlight-grid{
  align-items:stretch;
  gap:22px;
}
.highlights .highlight-grid article{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  isolation:isolate;
  min-width:0;
}
.highlights .highlight-grid article .hi-img{
  position:relative !important;
  inset:auto !important;
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:280px;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  border-radius:15px 15px 0 0;
  overflow:hidden;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  box-sizing:border-box;
}
.highlights .highlight-grid article > *{
  max-width:100%;
  box-sizing:border-box;
}
@media (max-width:1100px){
  .highlights .highlight-grid article .hi-img{height:240px}
}

/* v0.67 — approved highlight photography, routes 2 and 3 */
#screen-route-norte .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url('assets/norte-highlight-1-v067.webp') !important;background-position:center!important}
#screen-route-norte .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url('assets/norte-highlight-2-v067.webp') !important;background-position:center!important}
#screen-route-norte .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url('assets/norte-highlight-3-v067.webp') !important;background-position:center!important}
#screen-route-norte .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url('assets/norte-highlight-4-v067.webp') !important;background-position:center!important}

#screen-route-portugues .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url('assets/route3-highlight-1-v067.webp') !important;background-position:center!important}
#screen-route-portugues .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url('assets/route3-highlight-2-v067.webp') !important;background-position:center!important}
#screen-route-portugues .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url('assets/route3-highlight-3-v067.webp') !important;background-position:center!important}
#screen-route-portugues .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url('assets/route3-highlight-4-v067.webp') !important;background-position:center!important}

/* v0.68 — approved Camino Portugués highlight photography */
#screen-route-portugues .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url('assets/portugues-highlight-1-v068.webp') !important;background-position:center!important;background-size:cover!important;}
#screen-route-portugues .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url('assets/portugues-highlight-2-v068.webp') !important;background-position:center!important;background-size:cover!important;}
#screen-route-portugues .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url('assets/portugues-highlight-3-v068.webp') !important;background-position:center!important;background-size:cover!important;}
#screen-route-portugues .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url('assets/portugues-highlight-4-v068.webp') !important;background-position:center!important;background-size:cover!important;}

/* v0.69 — approved Camino Primitivo highlight photography */
#screen-route-primitivo .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url('assets/primitivo-highlight-1-v069.webp') !important;background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-primitivo .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url('assets/primitivo-highlight-2-v069.webp') !important;background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-primitivo .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url('assets/primitivo-highlight-3-v069.webp') !important;background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-primitivo .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url('assets/primitivo-highlight-4-v069.webp') !important;background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important;}

/* v0.70 — Camino Inglés highlight imagery, using existing approved route artwork */
#screen-route-ingles .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url('assets/hero-ingles-v052.webp') !important;background-position:18% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-ingles .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url('assets/hero-ingles-v052.webp') !important;background-position:40% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-ingles .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url('assets/hero-ingles-v052.webp') !important;background-position:64% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-ingles .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url('assets/hero-ingles-v052.webp') !important;background-position:84% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}

/* v0.71 — Vía de la Plata highlight imagery */
#screen-route-plata .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url('assets/hero-plata-v052.webp') !important;background-position:16% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-plata .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url('assets/hero-plata-v052.webp') !important;background-position:39% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-plata .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url('assets/hero-plata-v052.webp') !important;background-position:64% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-plata .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url('assets/hero-plata-v052.webp') !important;background-position:86% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}

/* v0.72 — Camino de Invierno highlight imagery */
#screen-route-invierno .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url('assets/hero-invierno-v052.webp') !important;background-position:15% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-invierno .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url('assets/hero-invierno-v052.webp') !important;background-position:38% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-invierno .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url('assets/hero-invierno-v052.webp') !important;background-position:63% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-invierno .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url('assets/hero-invierno-v052.webp') !important;background-position:86% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}

/* v0.73 — Portuguese Coastal Way highlight imagery */
#screen-route-costa .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url('assets/hero-costa-v052.webp') !important;background-position:14% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-costa .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url('assets/hero-costa-v052.webp') !important;background-position:38% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-costa .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url('assets/hero-costa-v052.webp') !important;background-position:64% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-costa .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url('assets/hero-costa-v052.webp') !important;background-position:88% 50% !important;background-size:cover !important;background-repeat:no-repeat !important;}


/* =========================================================
   v0.74 RELEASE-CANDIDATE VISUAL POLISH
   Tolkien/Celtic inspired, original ornamental language.
   Route pages only; no content or functional changes.
   ========================================================= */

.route-page{
  --antique-gold:#caa457;
  --antique-gold-hi:#ead18a;
  --forest-ink:#10251c;
  --parchment:#f5efe2;
}

/* Hero: richer cinematic framing + fine antique gold rule */
.route-page .frances-hero{
  position:relative;
  isolation:isolate;
  box-shadow:inset 0 -1px 0 rgba(234,209,138,.42);
}
.route-page .frances-hero::before{
  content:"";
  position:absolute;
  inset:18px;
  z-index:1;
  pointer-events:none;
  border:1px solid rgba(224,190,112,.42);
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(14,36,27,.22);
}
.route-page .frances-hero::after{
  content:"✦";
  position:absolute;
  left:50%;
  bottom:13px;
  z-index:3;
  transform:translateX(-50%);
  color:var(--antique-gold-hi);
  font-size:18px;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.route-page .frances-copy{
  position:relative;
  z-index:4;
}
.route-page .frances-copy h1 em{
  color:var(--antique-gold-hi);
  text-shadow:0 2px 18px rgba(0,0,0,.32);
}
.route-page .eyebrow,
.route-page .section-kicker{
  letter-spacing:.20em;
}

/* Ornamental divider under section kickers */
.route-page .section-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#9a7737;
}
.route-page .section-kicker::before,
.route-page .section-kicker::after{
  content:"";
  width:25px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--antique-gold));
}
.route-page .section-kicker::after{
  background:linear-gradient(90deg,var(--antique-gold),transparent);
}

/* Stats become a deliberate premium band */
.route-page .frances-stats{
  border-top:1px solid rgba(202,164,87,.55);
  border-bottom:1px solid rgba(202,164,87,.38);
}
.route-page .frances-stats>div{
  position:relative;
}
.route-page .frances-stats>div:not(:last-child)::after{
  content:"◆";
  position:absolute;
  right:-5px;
  top:50%;
  transform:translateY(-50%) scale(.55);
  color:rgba(202,164,87,.65);
}

/* Paper sections: very subtle parchment atmosphere */
.route-page .paper-section{
  position:relative;
  background:
    radial-gradient(circle at 14% 18%,rgba(202,164,87,.045),transparent 22%),
    radial-gradient(circle at 88% 76%,rgba(27,70,51,.035),transparent 25%),
    #f6f1e7;
}
.route-page .paper-section::before{
  content:"";
  position:absolute;
  top:30px;
  left:50%;
  width:78px;
  height:10px;
  transform:translateX(-50%);
  opacity:.42;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,var(--antique-gold) 0 2px,transparent 2.5px),
    linear-gradient(90deg,transparent 0 10%,var(--antique-gold) 10% 44%,transparent 44% 56%,var(--antique-gold) 56% 90%,transparent 90%);
  background-size:auto 100%;
  background-repeat:no-repeat;
}

/* History photography gets a fine gilded frame */
.route-page .history-photo{
  border:1px solid rgba(180,139,61,.58);
  outline:5px solid rgba(255,255,255,.42);
  outline-offset:-8px;
  box-shadow:0 18px 38px rgba(35,31,20,.16);
}

/* Route band: add a restrained Celtic-manuscript feeling */
.route-page .frances-route-band{
  position:relative;
  overflow:hidden;
}
.route-page .frances-route-band::before,
.route-page .frances-route-band::after{
  content:"◇  ◆  ◇";
  position:absolute;
  color:rgba(226,191,111,.17);
  font-size:30px;
  letter-spacing:13px;
  pointer-events:none;
}
.route-page .frances-route-band::before{right:3%;top:20px}
.route-page .frances-route-band::after{left:3%;bottom:16px}

/* Highlight cards: premium travel-journal treatment */
.route-page .highlights .highlight-grid{
  gap:18px;
}
.route-page .highlights .highlight-grid article{
  border:1px solid rgba(165,132,68,.34);
  border-radius:14px;
  background:#faf6ed;
  box-shadow:0 12px 28px rgba(41,37,24,.10);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.route-page .highlights .highlight-grid article:hover{
  transform:translateY(-4px);
  border-color:rgba(177,139,65,.65);
  box-shadow:0 18px 36px rgba(41,37,24,.15);
}
.route-page .highlights .highlight-grid article .hi-img{
  border-radius:13px 13px 0 0;
  filter:saturate(1.05) contrast(1.025);
}
.route-page .highlights .highlight-grid h3{
  color:#173529;
  position:relative;
  padding-bottom:8px;
}
.route-page .highlights .highlight-grid h3::after{
  content:"";
  display:block;
  width:28px;
  height:1px;
  margin-top:7px;
  background:var(--antique-gold);
}

/* Quote: illuminated-manuscript inspired quotation mark */
.route-page .frances-quote{
  position:relative;
  isolation:isolate;
}
.route-page .frances-quote blockquote{
  position:relative;
  z-index:2;
}
.route-page .frances-quote blockquote::before{
  content:"“";
  display:block;
  margin:0 auto -18px;
  font-family:Georgia,serif;
  font-size:78px;
  line-height:.8;
  color:rgba(232,199,119,.72);
}

/* Practical information cards */
.route-page .practical-grid>div{
  position:relative;
  border-color:rgba(166,131,61,.34);
}
.route-page .practical-grid>div::before{
  content:"✦";
  display:block;
  color:#b58b3e;
  font-size:10px;
  margin-bottom:7px;
}

/* CTA gets an elegant inner frame */
.route-page .frances-cta{
  position:relative;
  isolation:isolate;
}
.route-page .frances-cta::after{
  content:"";
  position:absolute;
  inset:20px;
  pointer-events:none;
  border:1px solid rgba(229,196,116,.38);
}
.route-page .frances-cta>div{
  position:relative;
  z-index:2;
}
.route-page .primary{
  box-shadow:0 8px 22px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,235,175,.28);
}

/* Sources: quieter and more editorial */
.route-page .sources-note{
  border-top:1px solid rgba(167,133,66,.28);
  font-size:10px;
  line-height:1.65;
}

/* Responsive visual QA */
@media(max-width:900px){
  .route-page .frances-hero::before{inset:10px}
  .route-page .frances-stats>div::after{display:none}
  .route-page .highlights .highlight-grid{grid-template-columns:1fr 1fr}
  .route-page .frances-cta::after{inset:10px}
}
@media(max-width:600px){
  .route-page .highlights .highlight-grid{grid-template-columns:1fr}
  .route-page .highlights .highlight-grid article .hi-img{height:230px}
  .route-page .paper-section::before{top:18px}
}

/* ============================================================
   v0.76 — HIGH FANTASY / CELTIC VISUAL SYSTEM — PHASE 1
   Functionality untouched: visual shell, home and planner only.
   ============================================================ */
:root{--epic-green:#06251f;--epic-green2:#0b3a31;--epic-ink:#071813;--epic-gold:#d7a94d;--epic-gold2:#f3d47d;--epic-paper:#ead8ad;--epic-red:#6e211f;--epic-blue:#124c59}
body{background:#061712}
body:before{background:radial-gradient(circle at 15% 5%,rgba(16,84,67,.24),transparent 25%),radial-gradient(circle at 85% 12%,rgba(129,78,26,.16),transparent 22%),linear-gradient(135deg,#061913,#09261f)}
.grain{opacity:.18;mix-blend-mode:overlay}
.topbar{height:92px;padding:0 3vw;background:linear-gradient(180deg,rgba(3,21,17,.98),rgba(4,27,22,.95));border-top:2px solid #a97829;border-bottom:2px solid #a97829;box-shadow:0 5px 0 #08241d,0 7px 0 rgba(217,170,75,.32),0 18px 45px rgba(0,0,0,.42);backdrop-filter:none}
.topbar:before,.topbar:after{content:"✦";position:absolute;bottom:-11px;color:var(--epic-gold);font-size:18px}.topbar:before{left:2.2vw}.topbar:after{right:2.2vw}
.brand{min-width:240px}.brand .shell-mark{width:54px;height:54px;border:2px solid var(--epic-gold);box-shadow:inset 0 0 0 4px #0a2b23,0 0 0 1px #f0ca70,0 0 22px rgba(224,177,78,.22);background:radial-gradient(circle,#123e32,#071b16);color:#f0c96d}.brand strong{font-size:22px;line-height:.82;color:#f3d995;text-shadow:0 2px 0 #000}.brand small{color:#d5a951}
.main-nav{gap:37px;font-size:18px}.main-nav a{color:#eee2c6;text-shadow:0 1px 0 #000}.main-nav a:hover{color:#f2c964}.main-nav a:first-child:after{height:2px;background:linear-gradient(90deg,transparent,#e4b95e,transparent)}
.primary{border:1px solid #f1cf78;border-radius:5px;background:linear-gradient(180deg,#0e493c,#082d25);color:#f6d987;box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),inset 0 0 22px rgba(224,176,73,.08),0 5px 0 #041b16,0 8px 22px rgba(0,0,0,.35);text-shadow:0 1px 0 #000}.primary:hover{background:linear-gradient(180deg,#145b4a,#0b392e);filter:none}.ghost{border-radius:5px;border-color:#b98a38;background:rgba(7,35,28,.72);color:#ecd7a2}
.hero-screen{border:2px solid rgba(214,166,67,.45);box-shadow:inset 0 0 0 7px rgba(2,23,18,.55),inset 0 0 0 8px rgba(214,166,67,.18)}
.hero-photo{filter:saturate(1.13) contrast(1.06) brightness(.76)}.hero-shade{background:linear-gradient(90deg,rgba(2,19,15,.95),rgba(4,29,23,.79) 35%,rgba(4,21,17,.18) 68%,rgba(2,14,11,.35)),linear-gradient(0deg,rgba(4,20,16,.7),transparent 50%)}
.hero-content h1{color:#f3e4bc;text-shadow:0 3px 0 #07100d,0 13px 34px #000}.hero-content h1 em{color:#e8bb5c}.hero-content blockquote{border-left:1px solid #c99b43;padding-left:18px;color:#d9c18a}
.journey-ribbon{background:linear-gradient(180deg,rgba(4,32,25,.97),rgba(3,22,18,.99));border-top:2px solid #b98530;box-shadow:inset 0 3px 0 #092e25}

/* Planner composition */
.epic-quiz{padding:92px 0 122px!important;display:none!important;grid-template-columns:250px minmax(520px,1fr) minmax(330px,.92fr);min-height:100vh;background:#061b16!important;border:2px solid #a9772b;box-shadow:inset 0 0 0 6px #06241d,inset 0 0 0 7px rgba(225,176,73,.45)}
.epic-quiz.active{display:grid!important}
.epic-steps{position:relative;padding:38px 22px 130px 30px;background:linear-gradient(rgba(3,29,23,.90),rgba(3,25,20,.96)),url('assets/hero-primitivo-v052.webp') center/cover;border-right:2px solid #a9772b;color:#e9d6a7;box-shadow:inset -5px 0 0 #082b23}
.epic-steps:before{content:"";position:absolute;inset:14px;border:1px solid rgba(223,174,70,.55);pointer-events:none}.epic-steps-brand{font:700 9px Inter;letter-spacing:.32em;color:#d4a64b;margin:3px 0 25px 30px}
.epic-step{position:relative;display:flex;align-items:center;gap:14px;min-height:76px;padding-left:5px}.epic-step:after{content:"";position:absolute;left:24px;top:55px;height:40px;width:1px;background:linear-gradient(#d2a34a,transparent)}.epic-step:nth-of-type(8):after{display:none}.epic-step b{width:48px;height:48px;flex:0 0 48px;border:1px solid #b98934;border-radius:50%;display:grid;place-items:center;font:500 24px 'Cormorant Garamond';color:#d4a64b;background:#08251e;box-shadow:inset 0 0 0 5px #061c17}.epic-step.active b{color:#ffe39a;border-color:#f0c668;box-shadow:0 0 22px rgba(235,182,71,.35),inset 0 0 0 5px #0b3027}.epic-step span{font:600 17px 'Cormorant Garamond';color:#d8c8a5}.epic-step small{display:block;font:11px 'Cormorant Garamond';color:#879d91;margin-top:2px}.epic-step.active span{color:#f2ca6e}.epic-steps blockquote{position:absolute;left:45px;right:30px;bottom:32px;margin:0;padding:15px;border-top:1px solid #9b742e;border-bottom:1px solid #9b742e;font:italic 16px/1.25 'Cormorant Garamond';color:#d6b86f;text-align:center}
.epic-quiz .quiz-wrap{max-width:none;width:auto;margin:0;padding:25px 24px;background:#c9af79;background-image:radial-gradient(circle at 20% 10%,rgba(255,246,208,.75),transparent 32%),linear-gradient(110deg,rgba(119,74,24,.06),transparent 30%,rgba(119,74,24,.08));color:#241c11;border-right:2px solid #a9772b;position:relative}
.epic-quiz .quiz-wrap:before{content:"";position:absolute;inset:10px;border:1px solid rgba(104,64,19,.34);box-shadow:inset 0 0 55px rgba(88,49,13,.16);pointer-events:none}
.epic-quiz .progress-row{position:relative;z-index:2;margin:0 16px 15px;grid-template-columns:160px 1fr}.epic-quiz .journey-note{display:none}.epic-quiz .question-meta span{color:#6d4b22}.epic-quiz .question-meta strong{color:#2a261d}.epic-quiz .progress{height:9px;border:1px solid #8f682d;border-radius:20px;background:#d2c29e;box-shadow:inset 0 1px 3px #76562e}.epic-quiz .progress>div{border-radius:20px;background:linear-gradient(90deg,#0a5a48,#0c3c31);box-shadow:inset 0 0 4px #fff3}
.epic-quiz .question-shell{position:relative;z-index:2;min-height:640px;padding:38px 46px 28px;border:2px solid #8c6227;border-radius:3px;background:rgba(239,221,180,.78);box-shadow:inset 0 0 0 5px rgba(250,235,198,.38),inset 0 0 75px rgba(103,66,20,.12),0 8px 20px rgba(72,41,9,.18);overflow:hidden}.epic-quiz .question-shell:before{inset:9px;border:1px solid rgba(127,83,28,.35);border-radius:0}.epic-quiz .question-shell:after{width:380px;height:380px;top:-280px;border-color:rgba(110,73,28,.12);box-shadow:0 0 0 26px rgba(103,68,24,.025),0 0 0 54px rgba(103,68,24,.018)}
.epic-quiz .corner{border-color:#8e6428}.epic-quiz .question-icon{width:60px;height:60px;margin-bottom:15px;color:#815b21;border:1px solid #9d7130;box-shadow:inset 0 0 0 5px rgba(153,105,37,.08)}.epic-quiz .question-shell h2{color:#1d241d;font-size:clamp(35px,3.6vw,54px);text-shadow:0 1px #fff8}.epic-quiz .question-subtitle{color:#5f5037;font-size:18px}.epic-quiz .answers:not(.visual-answers){grid-template-columns:1fr;gap:8px;max-width:760px}.epic-quiz .answer{border:1px solid #a37b3e;border-radius:3px;background:rgba(248,233,196,.58);color:#231d13;box-shadow:inset 0 1px rgba(255,255,255,.4)}.epic-quiz .answer:hover{background:rgba(255,240,200,.85);border-color:#6e4d1f}.epic-quiz .answer.selected{border-color:#c69739;background:linear-gradient(90deg,#0a4c3e,#0b352c);box-shadow:inset 0 0 0 2px #06261f,0 0 0 1px #e0b55b}.epic-quiz .answer strong{color:#2a2114}.epic-quiz .answer small{color:#695b43}.epic-quiz .answer.selected strong{color:#f6e2ad}.epic-quiz .answer.selected small{color:#c9b98d}.epic-quiz .answer .badge{border-color:#8d672f;color:#755426}.epic-quiz .answer.selected .badge{background:#f0cf77;color:#173329;border-color:#f0cf77}
.epic-quiz .visual-answers .answer{background:#12342a;border-color:#9b722e}.epic-quiz .visual-answers .answer-copy{background:linear-gradient(#0d352b,#08251f)}.epic-quiz .visual-answers .answer-copy strong{color:#f4deb0}.epic-quiz .visual-answers .answer-copy small{color:#9eb1a4}.epic-quiz .visual-answers .answer.selected{border-color:#f0c866;box-shadow:0 0 0 2px #6c4a1b,0 14px 30px rgba(59,35,8,.3)}
.epic-quiz .quiz-nav{max-width:760px;margin-top:25px}.epic-quiz .text-button{border:1px solid #967039;border-radius:3px;padding:11px 24px;color:#4d3a22;background:rgba(238,217,172,.55)}.epic-quiz .question-quote{color:#77603c}.epic-quiz .mini-mountain{color:#7c5b27}
.epic-vista{position:relative;background:url('assets/hero-camino.webp') 63% center/cover no-repeat;overflow:hidden}.epic-vista:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,24,19,.10),rgba(5,20,16,.05)),linear-gradient(0deg,rgba(3,17,13,.5),transparent 38%);box-shadow:inset 14px 0 25px rgba(0,0,0,.28)}.epic-vista:after{content:"";position:absolute;inset:14px;border:1px solid rgba(226,177,73,.55);box-shadow:inset 0 0 0 5px rgba(3,28,22,.20)}.epic-vista-quote{position:absolute;z-index:2;right:9%;top:9%;text-align:center;color:#3b2915;font:italic 29px/1.05 'Cormorant Garamond';text-shadow:0 1px rgba(255,235,186,.6)}.epic-vista-quote small{display:block;margin-top:10px;font:700 8px Inter;letter-spacing:.15em}.epic-waymark{position:absolute;z-index:2;right:8%;bottom:13%;width:92px;height:120px;border:3px solid #a7782d;background:#092d25;color:#e6b953;display:grid;place-items:center;font:64px Georgia;box-shadow:0 12px 25px #0007}.epic-waymark span{position:absolute;bottom:7px;font:25px Georgia;color:#e6b953}
.epic-route-ribbon{position:absolute;z-index:8;left:250px;right:0;bottom:0;height:122px;padding:14px 20px 29px;display:grid;grid-template-columns:repeat(8,1fr);gap:7px;background:linear-gradient(#06241d,#041a15);border-top:2px solid #b98630;color:#dfc178}.epic-route-ribbon span{display:grid;place-items:center;text-align:center;border:1px solid #8f6729;background:linear-gradient(180deg,#0b4034,#08261f);font:600 12px 'Cormorant Garamond';box-shadow:inset 0 0 0 3px #061d18}.epic-route-ribbon span:nth-child(2),.epic-route-ribbon span:nth-child(8){background:linear-gradient(180deg,#0c4551,#082830)}.epic-route-ribbon span:nth-child(6){background:linear-gradient(180deg,#6a2520,#351713)}.epic-route-ribbon b{position:absolute;bottom:7px;left:0;right:0;text-align:center;font:700 8px Inter;letter-spacing:.35em;color:#d5a94f}
@media(max-width:1180px){.epic-quiz{grid-template-columns:190px minmax(500px,1fr) 310px}.epic-step span{font-size:14px}.epic-step b{width:40px;height:40px;flex-basis:40px}.epic-step:after{left:20px}.epic-route-ribbon{left:190px}.epic-vista-quote{font-size:23px}}
@media(max-width:900px){.epic-quiz.active{display:block!important;padding-bottom:0!important}.epic-steps,.epic-vista,.epic-route-ribbon{display:none}.epic-quiz .quiz-wrap{padding:100px 18px 35px;border-right:0}.epic-quiz .question-shell{min-height:0;padding:40px 20px 25px}.epic-quiz .progress-row{grid-template-columns:1fr}.epic-quiz .visual-answers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.epic-quiz .visual-answers{grid-template-columns:1fr}.epic-quiz .question-shell h2{font-size:35px}.topbar{border-width:0 0 2px}.epic-quiz .quiz-wrap{padding-top:84px}}


/* ============================================================
   v0.77 — PLANNER FIRST
   MASTER v0.76 + approved parchment + approved route medallions.
   Golden rule: follow the supplied planner mockup as closely as
   possible while preserving all 14 questions and scoring logic.
   ============================================================ */

#screen-quiz.epic-quiz{
  --side:280px;
  --ribbon-h:164px;
  padding:92px 0 var(--ribbon-h)!important;
  grid-template-columns:var(--side) minmax(570px, 1.05fr) minmax(430px,.95fr)!important;
  min-height:100svh!important;
  background:#061a14!important;
  border:2px solid #a87528!important;
  box-shadow:inset 0 0 0 6px #061d17,inset 0 0 0 7px rgba(225,176,73,.48)!important;
}

/* LEFT MANUSCRIPT NAVIGATION */
#screen-quiz .epic-steps{
  padding:26px 25px 150px 27px!important;
  background:
    linear-gradient(rgba(3,29,23,.92),rgba(3,24,19,.97)),
    url('assets/hero-primitivo-v052.webp') center/cover!important;
  border-right:2px solid #a87528!important;
}
#screen-quiz .epic-steps:before{
  inset:10px!important;
  border:1px solid rgba(226,177,73,.64)!important;
  box-shadow:inset 0 0 0 5px rgba(3,24,19,.62)!important;
}
#screen-quiz .epic-steps-brand{
  position:relative;
  z-index:2;
  display:grid!important;
  place-items:center;
  margin:0 12px 24px!important;
  padding:10px 0 20px;
  border-bottom:1px solid #a7772e;
  text-align:center;
  letter-spacing:0!important;
}
#screen-quiz .epic-steps-brand .planner-shell{
  width:66px;height:66px;display:grid;place-items:center;
  margin-bottom:8px;
  border:1px solid #d3a74f;border-radius:50%;
  color:#efc967;font:54px/1 Georgia;
  background:#0a2e25;
  box-shadow:inset 0 0 0 5px #061d17,0 0 22px rgba(225,172,65,.16);
}
#screen-quiz .epic-steps-brand strong{
  color:#f0d18a;font:600 27px/.82 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.08em;text-shadow:0 2px #000;
}
#screen-quiz .epic-steps-brand small{
  margin-top:8px;color:#bd913b;font:700 8px/1 Inter,sans-serif;letter-spacing:.34em;
}
#screen-quiz .epic-step{min-height:68px!important}
#screen-quiz .epic-step b{
  width:46px!important;height:46px!important;flex-basis:46px!important;
  font-size:25px!important;border-color:#c38e34!important;
}
#screen-quiz .epic-step.active b{
  color:#ffe8a1!important;border-color:#f0c766!important;
  box-shadow:0 0 0 2px rgba(242,193,84,.16),0 0 24px rgba(240,184,67,.44),inset 0 0 0 5px #0b3027!important;
}
#screen-quiz .epic-step span{font-size:18px!important}
#screen-quiz .epic-step small{font-size:12px!important}
#screen-quiz .epic-steps blockquote{
  left:32px!important;right:26px!important;bottom:27px!important;
  padding:17px 8px!important;
  color:#d7b665!important;font-size:17px!important;
}

/* CENTER — REAL PARCHMENT AS THE READING SURFACE */
#screen-quiz .quiz-wrap{
  position:relative!important;
  margin:0!important;
  padding:26px 24px 28px!important;
  background:
    linear-gradient(rgba(255,240,202,.025),rgba(138,83,29,.025)),
    url('assets/planner-parchment-v077.webp') center/100% 100% no-repeat!important;
  border-right:2px solid #a87528!important;
  color:#261b11!important;
  box-shadow:inset 0 0 45px rgba(73,39,11,.11)!important;
}
#screen-quiz .quiz-wrap:before{
  inset:10px!important;
  border:1px solid rgba(102,59,18,.42)!important;
  box-shadow:inset 0 0 0 2px rgba(255,236,194,.22)!important;
}

/* progress is printed into the manuscript */
#screen-quiz .progress-row{
  position:relative!important;z-index:3!important;
  display:block!important;
  margin:0 38px 13px!important;
  min-height:42px!important;
}
#screen-quiz .question-meta{
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  margin-bottom:8px!important;
}
#screen-quiz .question-meta span{
  color:#5d3d1e!important;font:700 13px/1 Georgia,serif!important;letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
#screen-quiz .question-meta strong{display:none!important}
#screen-quiz .progress-track{width:100%!important}
#screen-quiz .progress-nodes,.pilgrim-progress-icon{display:none!important}
#screen-quiz .progress{
  height:10px!important;border:1px solid #8f682d!important;background:#cdb98e!important;
  box-shadow:inset 0 1px 4px rgba(76,47,19,.35)!important;
}
#screen-quiz .progress>div{background:linear-gradient(90deg,#0b5c48,#0a3e31)!important}

/* Remove old green question card; parchment itself is now the card */
#screen-quiz .question-shell{
  min-height:0!important;
  margin:0 28px!important;
  padding:8px 18px 18px!important;
  overflow:visible!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
#screen-quiz .question-shell:before,
#screen-quiz .question-shell:after,
#screen-quiz .question-shell>.corner{display:none!important}

/* Chapter heading from mockup */
#screen-quiz .planner-chapter{margin:0 0 17px!important;color:#24190f}
#screen-quiz .planner-chapter>span{display:none}
#screen-quiz .planner-chapter h1{
  margin:0!important;color:#1d160e!important;
  font:600 clamp(46px,63.536px,68px)/.95 "Cormorant Garamond",Georgia,serif!important;
  letter-spacing:-.035em!important;text-shadow:none!important;
}
#screen-quiz .planner-chapter p{
  margin:2px 0 4px!important;color:#8e452c!important;
  font:600 clamp(22px,30.096px,31px)/1 "Cormorant Garamond",Georgia,serif!important;
}
#screen-quiz .planner-chapter small{
  display:block;max-width:760px;color:#493b2c!important;
  font:500 17px/1.35 "Cormorant Garamond",Georgia,serif!important;
}
#screen-quiz .planner-chapter i{
  display:block;width:62%;height:16px;margin:12px auto 0;
  background:
    radial-gradient(circle at 50% 50%,#a36c28 0 3px,transparent 4px),
    linear-gradient(90deg,transparent,#a36c28 25%,#a36c28 75%,transparent) center/100% 1px no-repeat;
}

/* inner question header */
#screen-quiz .planner-question-box{
  display:grid!important;grid-template-columns:92px 1fr!important;gap:18px!important;align-items:center!important;
  margin:0 0 12px!important;padding:14px 18px!important;
  border:1px solid rgba(137,88,31,.48)!important;
  background:rgba(247,228,188,.28)!important;
  box-shadow:inset 0 0 0 2px rgba(255,243,213,.18)!important;
}
#screen-quiz .question-icon{
  width:74px!important;height:74px!important;margin:0!important;
  border:0!important;box-shadow:none!important;
  color:#89571f!important;font-size:42px!important;
  background:
    radial-gradient(circle,transparent 0 31%,#9b6829 32% 34%,transparent 35%),
    radial-gradient(circle,transparent 0 43%,#9b6829 44% 45%,transparent 46%)!important;
}
#screen-quiz .planner-question-copy h2{
  margin:0!important;color:#21180f!important;
  font:600 clamp(25px,33.44px,35px)/1.05 "Cormorant Garamond",Georgia,serif!important;
  text-shadow:none!important;
}
#screen-quiz .question-subtitle{
  margin:4px 0 0!important;color:#574633!important;
  font:500 15px/1.25 "Cormorant Garamond",Georgia,serif!important;
}

/* answer rows — manuscript controls */
#screen-quiz .answers:not(.visual-answers){
  grid-template-columns:1fr!important;gap:8px!important;max-width:none!important;
}
#screen-quiz .answer{
  min-height:48px!important;padding:10px 18px!important;
  border:1px solid rgba(139,91,36,.52)!important;border-radius:4px!important;
  background:rgba(246,229,193,.42)!important;
  color:#261c12!important;
  box-shadow:inset 0 1px rgba(255,255,255,.35)!important;
}
#screen-quiz .answer strong{
  color:#2a1d12!important;
  font:600 18px/1.05 "Cormorant Garamond",Georgia,serif!important;
}
#screen-quiz .answer small{
  color:#6a5842!important;font-size:11px!important;
}
#screen-quiz .answer.selected{
  background:linear-gradient(90deg,#8d5d18,#a87420 55%,#815112)!important;
  border-color:#d5a546!important;
  box-shadow:inset 0 0 0 2px rgba(78,43,11,.28),0 0 0 1px #e1b65b!important;
}
#screen-quiz .answer.selected strong{color:#fff2ca!important}
#screen-quiz .answer.selected small{color:#f1dba9!important}
#screen-quiz .answer .badge{
  width:28px!important;height:28px!important;border-radius:50%!important;
  border:1px solid #775325!important;color:#6e4b21!important;background:transparent!important;
}
#screen-quiz .answer.selected .badge{
  background:#fff7df!important;color:#815515!important;border-color:#fff7df!important;
}

/* keep visual-card questions rich, but integrate them into parchment */
#screen-quiz .visual-answers{gap:10px!important}
#screen-quiz .visual-answers .answer{background:#0b3027!important;border-color:#9a6c29!important}
#screen-quiz .visual-answers .answer-copy{background:linear-gradient(#0e382e,#08251f)!important}
#screen-quiz .visual-answers .answer-copy strong{color:#f4dfb2!important}
#screen-quiz .visual-answers .answer-copy small{color:#aebcaf!important}

/* navigation like the target */
#screen-quiz .quiz-nav{
  max-width:none!important;margin-top:17px!important;
  display:flex!important;justify-content:space-between!important;align-items:center!important;
}
#screen-quiz .text-button{
  min-width:132px!important;border:1px solid #8e622c!important;border-radius:4px!important;
  padding:12px 24px!important;background:rgba(238,214,167,.43)!important;color:#4b351f!important;
  font:600 17px "Cormorant Garamond",Georgia,serif!important;
}
#screen-quiz #nextBtn{
  min-width:150px!important;border-radius:4px!important;padding:13px 25px!important;
  background:linear-gradient(180deg,#124535,#082d23)!important;
  color:#f1cf75!important;border:1px solid #aa792c!important;
  outline:1px solid rgba(240,203,116,.24)!important;outline-offset:-4px!important;
}
#screen-quiz .mini-mountain,#screen-quiz .question-quote{display:none!important}

/* RIGHT HERO — brighter, cinematic and framed like mockup */
#screen-quiz .epic-vista{
  background:url('assets/hero-camino.webp') 62% center/cover no-repeat!important;
  filter:saturate(1.16) contrast(1.05) brightness(.98)!important;
}
#screen-quiz .epic-vista:before{
  background:
    linear-gradient(180deg,rgba(2,15,11,.06),transparent 52%,rgba(2,16,12,.18)),
    linear-gradient(90deg,rgba(5,24,18,.10),transparent 35%)!important;
}
#screen-quiz .epic-vista:after{inset:10px!important;border-color:rgba(225,174,69,.62)!important}
#screen-quiz .epic-vista-quote{
  top:9%!important;right:8%!important;
  color:#4a2d17!important;font-size:31px!important;
  text-shadow:0 1px rgba(255,235,185,.72)!important;
}

/* BOTTOM — approved route medallion artwork, used 1:1 without stretching */
#screen-quiz .epic-route-ribbon{
  left:var(--side)!important;right:0!important;bottom:0!important;height:var(--ribbon-h)!important;
  display:block!important;padding:0!important;
  background:
    #061b15 url('assets/planner-route-medallions-v077.webp') center/contain no-repeat!important;
  border-top:2px solid #b98530!important;
  box-shadow:inset 0 0 0 5px #041711,inset 0 0 0 6px rgba(222,173,70,.48)!important;
  overflow:hidden!important;
}
#screen-quiz .epic-route-ribbon span,
#screen-quiz .epic-route-ribbon b{display:none!important}

/* TOPBAR closer to mockup while retaining existing links */
body:has(#screen-quiz.active) .topbar{
  background:
    linear-gradient(180deg,rgba(3,22,17,.985),rgba(4,28,22,.97))!important;
  border-top:2px solid #a7772c!important;border-bottom:2px solid #a7772c!important;
}
body:has(#screen-quiz.active) .topbar:before{
  content:"❧  ─────────  ❧"!important;left:18%!important;bottom:-10px!important;
  letter-spacing:.08em!important;color:#b88731!important;
}
body:has(#screen-quiz.active) .topbar:after{
  content:"❧  ─────────  ✦"!important;right:2%!important;bottom:-10px!important;
  letter-spacing:.08em!important;color:#b88731!important;
}

/* Desktop proportionality */
@media(min-width:1450px){
  #screen-quiz.epic-quiz{--side:300px;--ribbon-h:174px;grid-template-columns:300px minmax(650px,1.05fr) minmax(500px,.95fr)!important}
}
@media(max-width:1180px){
  #screen-quiz.epic-quiz{--side:205px;--ribbon-h:130px;grid-template-columns:205px minmax(520px,1fr) 330px!important}
  #screen-quiz .epic-steps-brand strong{font-size:22px}
  #screen-quiz .planner-chapter h1{font-size:48px!important}
  #screen-quiz .planner-chapter p{font-size:23px!important}
}
@media(max-width:900px){
  #screen-quiz.epic-quiz.active{display:block!important;padding:92px 0 0!important}
  #screen-quiz .epic-steps,#screen-quiz .epic-vista,#screen-quiz .epic-route-ribbon{display:none!important}
  #screen-quiz .quiz-wrap{padding:22px 14px 32px!important;background-size:cover!important;border-right:0!important}
  #screen-quiz .question-shell{margin:0 8px!important;padding:8px 8px 16px!important}
  #screen-quiz .progress-row{margin:0 16px 12px!important}
}
@media(max-width:600px){
  #screen-quiz .planner-question-box{grid-template-columns:1fr!important;text-align:center}
  #screen-quiz .question-icon{margin:auto!important}
  #screen-quiz .planner-chapter h1{font-size:43px!important}
  #screen-quiz .planner-chapter small{font-size:15px!important}
}

/* v0.80 — three requested visual refinements */
/* 1. Progress/pilgrim strip above parchment, on dark background */
#screen-quiz.epic-quiz{padding-top:158px!important;}
#screen-quiz .progress-row{
  position:absolute!important;
  top:-116px!important;
  left:0!important;
  right:0!important;
  z-index:20!important;
  margin:0!important;
  padding:18px 34px 16px!important;
  min-height:82px!important;
  display:grid!important;
  grid-template-columns:170px 1fr!important;
  align-items:center!important;
  gap:28px!important;
  background:linear-gradient(180deg,#041c16,#06251d)!important;
  border-top:1px solid #9e712a!important;
  border-bottom:2px solid #b98530!important;
  box-shadow:inset 0 0 0 5px rgba(2,16,12,.42),0 7px 20px rgba(0,0,0,.28)!important;
}
#screen-quiz .question-meta span{color:#e1c47d!important;font-size:12px!important;letter-spacing:.13em!important;}
#screen-quiz .question-meta strong{display:block!important;color:#f1dfb0!important;font-size:17px!important;margin-top:5px!important;}
#screen-quiz .progress{height:11px!important;background:#152f27!important;border:1px solid #b18135!important;box-shadow:inset 0 1px 5px #000!important;}
#screen-quiz .progress>div{background:linear-gradient(90deg,#1a8468,#d0a34a)!important;box-shadow:0 0 10px rgba(214,168,70,.28)!important;}
#screen-quiz .progress-track{padding-bottom:0!important;}

/* 2. Intro copy stronger and easier to read */
#screen-quiz .planner-chapter small{
  max-width:820px!important;
  color:#332519!important;
  font:700 19px/1.38 "Cormorant Garamond",Georgia,serif!important;
  letter-spacing:.005em!important;
  text-shadow:0 1px rgba(255,247,222,.52)!important;
}

/* 3. Camino medallions use much more of the available bottom width */
#screen-quiz .epic-route-ribbon{
  left:var(--side)!important;
  right:0!important;
  height:var(--ribbon-h)!important;
  background-color:#061b15!important;
  background-image:url('assets/planner-route-medallions-v077.webp')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:min(97%, 1500px) auto!important;
}
@media(min-width:1450px){
  #screen-quiz.epic-quiz{--ribbon-h:190px!important;}
  #screen-quiz .epic-route-ribbon{background-size:min(96%, 1580px) auto!important;}
}
@media(max-width:1180px){
  #screen-quiz.epic-quiz{padding-top:150px!important;}
  #screen-quiz .progress-row{top:-108px!important;padding-left:24px!important;padding-right:24px!important;grid-template-columns:145px 1fr!important;}
  #screen-quiz .planner-chapter small{font-size:17px!important;}
  #screen-quiz .epic-route-ribbon{background-size:96% auto!important;}
}
@media(max-width:900px){
  #screen-quiz.epic-quiz.active{padding-top:92px!important;}
  #screen-quiz .progress-row{position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:0 16px 12px!important;padding:12px 16px!important;grid-template-columns:1fr!important;}
}

/* ============================================================
   v0.80 — PLANNER LAYOUT POLISH
   1) chapter heading safely centred/lowered on parchment
   2) left chapter navigation follows the current question group
   3) route medallion artwork participates in normal document flow
      and can never overlap the parchment/hero
   4) preserve the approved four visual answer tiles
   ============================================================ */

/* Give the manuscript heading breathing room below the ornamental top edge. */
#screen-quiz .planner-chapter{
  padding:22px 28px 0!important;
  text-align:center!important;
}
#screen-quiz .planner-chapter h1{
  max-width:100%!important;
  margin:0 auto!important;
  font-size:clamp(46px,57.684px,64px)!important;
  line-height:1!important;
}
#screen-quiz .planner-chapter p{
  margin:7px auto 7px!important;
  max-width:780px!important;
}
#screen-quiz .planner-chapter small{
  margin:0 auto!important;
  max-width:800px!important;
  line-height:1.42!important;
}
#screen-quiz .planner-chapter i{margin-top:15px!important}

/* Desktop composition: first row is sidebar + parchment + vista;
   the medallion banner is a genuine second row. */
#screen-quiz.epic-quiz{
  padding-bottom:0!important;
  grid-template-rows:auto auto!important;
  align-items:stretch!important;
  overflow:visible!important;
}
#screen-quiz .epic-steps{
  grid-column:1!important;
  grid-row:1 / span 2!important;
}
#screen-quiz .quiz-wrap{
  grid-column:2!important;
  grid-row:1!important;
}
#screen-quiz .epic-vista{
  grid-column:3!important;
  grid-row:1!important;
  min-height:100%!important;
}
#screen-quiz .epic-route-ribbon{
  position:relative!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  grid-column:2 / 4!important;
  grid-row:2!important;
  width:100%!important;
  height:auto!important;
  min-height:190px!important;
  aspect-ratio:1536 / 205!important;
  margin:0!important;
  background-size:100% auto!important;
  background-position:center!important;
  flex:none!important;
}

/* Keep all questionnaire choices as the approved four rich visual tiles. */
#screen-quiz .visual-answers{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
}
#screen-quiz .visual-answers .answer{min-width:0!important}

/* Progress label: avoid narrow wrapping/collisions. */
#screen-quiz .question-meta{min-width:0!important}
#screen-quiz .question-meta span{white-space:normal!important;line-height:1.05!important}
#screen-quiz .question-meta strong{line-height:1.05!important}

@media(max-width:1180px) and (min-width:901px){
  #screen-quiz .planner-chapter{padding-left:12px!important;padding-right:12px!important}
  #screen-quiz .visual-answers{gap:8px!important}
  #screen-quiz .epic-route-ribbon{min-height:135px!important}
}
@media(max-width:900px){
  #screen-quiz.epic-quiz{display:block!important}
  #screen-quiz .planner-chapter{padding:12px 6px 0!important}
  #screen-quiz .visual-answers{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:600px){
  #screen-quiz .visual-answers{grid-template-columns:1fr!important}
}


/* ============================================================
   v0.81 — HIGH-END READABILITY & CONTRAST PASS
   Design rule: decoration never wins over legibility.
   ============================================================ */

/* Parchment typography: dark ink only on the light manuscript. */
#screen-quiz .planner-chapter h1,
#screen-quiz .planner-question-copy h2,
#screen-quiz .question-subtitle,
#screen-quiz .quiz-nav .text-button,
#screen-quiz .multi-hint{
  color:#25170f!important;
  text-shadow:0 1px 0 rgba(255,244,211,.48)!important;
}
#screen-quiz .planner-chapter p{color:#6d351f!important;font-weight:700!important}
#screen-quiz .planner-chapter small{color:#302016!important;font-weight:700!important}
#screen-quiz .planner-question-copy h2{
  font-size:clamp(31px,37.62px,43px)!important;
  line-height:1.04!important;
  font-weight:650!important;
  max-width:760px!important;
}
#screen-quiz .question-subtitle{
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:600!important;
  max-width:720px!important;
}

/* Four rich tiles on every question. Dark cards always use light copy. */
#screen-quiz .answers.visual-answers{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
}
#screen-quiz .visual-answers .answer{
  min-height:270px!important;
  background:linear-gradient(180deg,#073a2d 0%,#043126 100%)!important;
  border:1px solid #b98a36!important;
  box-shadow:0 7px 18px rgba(45,27,12,.14)!important;
}
#screen-quiz .visual-answers .answer:hover{
  background:linear-gradient(180deg,#0a4938,#06382b)!important;
  border-color:#d7a94d!important;
}
#screen-quiz .visual-answers .answer.selected{
  background:linear-gradient(180deg,#0b4a39,#07372b)!important;
  border:2px solid #d5a642!important;
  box-shadow:0 0 0 2px rgba(255,230,157,.35),0 9px 22px rgba(45,27,12,.18)!important;
}
#screen-quiz .visual-answers .answer-copy{padding:16px 15px 18px!important}
#screen-quiz .visual-answers .answer-copy strong{
  color:#fff0bd!important;
  font-size:19px!important;
  line-height:1.08!important;
  font-weight:700!important;
  text-shadow:0 1px 2px rgba(0,0,0,.72)!important;
  overflow-wrap:anywhere!important;
}
#screen-quiz .visual-answers .answer-copy small{
  color:#f1ead8!important;
  font-size:12px!important;
  line-height:1.42!important;
  font-weight:500!important;
  text-shadow:0 1px 2px rgba(0,0,0,.58)!important;
}
#screen-quiz .visual-answers .badge{
  color:#3b2915!important;
  background:#f2e2b7!important;
  border-color:#a8782d!important;
  font-weight:700!important;
}
#screen-quiz .visual-answers .select-tick{
  background:#f3dfa3!important;color:#173126!important;border-color:#b47c23!important;
}

/* Question box is light parchment: icon and helper text use dark ink. */
#screen-quiz .planner-question-box{background:rgba(255,247,221,.18)!important;border-color:rgba(105,63,25,.34)!important}
#screen-quiz .question-icon{color:#70451f!important;border-color:#98652c!important;background:rgba(255,241,199,.34)!important}

/* Navigation buttons: enforce explicit contrast in both states. */
#screen-quiz #nextBtn:not(:disabled){background:#063c2f!important;color:#ffe09a!important;border-color:#b98530!important;font-weight:800!important}
#screen-quiz #nextBtn:disabled{background:#d9c9a1!important;color:#685a43!important;border-color:#a99568!important;opacity:.72!important}
#screen-quiz #backBtn{color:#3a2617!important;border-color:#8c6938!important;background:rgba(255,245,214,.28)!important;font-size:14px!important}

/* Progress bar: the pilgrim sits immediately at the leading edge and travels with it. */
#screen-quiz .pilgrim-progress-icon{
  display:block!important;
  color:#f0c45d!important;
  width:32px!important;height:39px!important;
  top:50%!important;
  transform:translate(3px,-78%)!important;
  filter:drop-shadow(0 0 6px rgba(240,196,93,.42)) drop-shadow(0 2px 3px #000)!important;
}

/* Prevent accidental text collisions throughout the questionnaire. */
#screen-quiz .planner-chapter,
#screen-quiz .planner-question-copy,
#screen-quiz .answer-copy{min-width:0!important}
#screen-quiz .planner-chapter h1,
#screen-quiz .planner-chapter p,
#screen-quiz .planner-chapter small,
#screen-quiz .planner-question-copy h2,
#screen-quiz .question-subtitle,
#screen-quiz .answer-copy strong,
#screen-quiz .answer-copy small{overflow:visible!important;white-space:normal!important;word-break:normal!important}

/* Banner remains a true row below the complete parchment/vista pair. */
#screen-quiz .epic-route-ribbon{
  position:relative!important;
  grid-column:2 / 4!important;
  grid-row:2!important;
  z-index:1!important;
  margin-top:10px!important;
  min-height:0!important;
  aspect-ratio:1536/205!important;
  background-size:100% 100%!important;
  background-position:center!important;
  border:1px solid #b98530!important;
}

@media(max-width:1280px) and (min-width:901px){
  #screen-quiz .visual-answers .answer-copy strong{font-size:17px!important}
  #screen-quiz .visual-answers .answer-copy small{font-size:11px!important}
}
@media(max-width:1100px) and (min-width:901px){
  #screen-quiz .answers.visual-answers{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
  #screen-quiz .answers.visual-answers{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #screen-quiz .visual-answers .answer-copy strong{font-size:18px!important}
  #screen-quiz .visual-answers .answer-copy small{font-size:12px!important}
}
@media(max-width:600px){
  #screen-quiz .answers.visual-answers{grid-template-columns:1fr!important}
  #screen-quiz .planner-question-copy h2{font-size:30px!important}
  #screen-quiz .question-subtitle{font-size:15px!important}
}

/* ============================================================
   v0.82 — PROPORTION, ROUTE RIBBON & NAVIGATION REFINEMENT
   Wider manuscript, protected pilgrim focal point, undistorted
   route artwork, and high-contrast navigation on parchment.
   ============================================================ */

/* Give the manuscript more authority without sacrificing the pilgrim. */
@media(min-width:1181px){
  #screen-quiz.epic-quiz{
    grid-template-columns:var(--side) minmax(720px,1.22fr) minmax(390px,.78fr)!important;
  }
  #screen-quiz .epic-vista{
    background-position:44% center!important;
  }
}
@media(min-width:1450px){
  #screen-quiz.epic-quiz{
    --side:300px;
    grid-template-columns:300px minmax(790px,1.24fr) minmax(440px,.76fr)!important;
  }
  #screen-quiz .epic-vista{background-position:42% center!important}
}

/* Slightly use more of the parchment width for content and keep cards squarer. */
#screen-quiz .quiz-wrap{padding-left:18px!important;padding-right:18px!important}
#screen-quiz .question-shell{margin-left:18px!important;margin-right:18px!important}
#screen-quiz .visual-answers .answer{min-height:255px!important}
#screen-quiz .visual-answers .answer-media{aspect-ratio:1.28/1!important;min-height:0!important}

/* Back is an intentional dark-green control: never pale ink on pale parchment. */
#screen-quiz #backBtn{
  color:#ffe3a0!important;
  background:linear-gradient(180deg,#0a4637 0%,#063428 100%)!important;
  border:1px solid #b98530!important;
  box-shadow:inset 0 0 0 2px rgba(239,199,101,.12),0 4px 10px rgba(65,38,12,.16)!important;
  font-size:17px!important;
  font-weight:700!important;
  text-shadow:0 1px 2px rgba(0,0,0,.62)!important;
  opacity:1!important;
}
#screen-quiz #backBtn:hover{
  background:linear-gradient(180deg,#105441,#083c2f)!important;
  border-color:#d3a64e!important;
  color:#fff0bd!important;
}

/* Route artwork: preserve the source ratio at all times. Never stretch circles. */
#screen-quiz .epic-route-ribbon{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:2172 / 724!important;
  background-color:#061b15!important;
  background-image:url('assets/route-medallions-banner-v079.webp')!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:contain!important;
  border:1px solid #b98530!important;
  overflow:hidden!important;
}

/* At narrower desktop widths retain natural artwork proportions. */
@media(max-width:1180px) and (min-width:901px){
  #screen-quiz.epic-quiz{grid-template-columns:205px minmax(590px,1.18fr) minmax(300px,.82fr)!important}
  #screen-quiz .epic-vista{background-position:40% center!important}
  #screen-quiz .epic-route-ribbon{aspect-ratio:2172/724!important;background-size:contain!important}
}

/* ============================================================
   v0.83 — LIVING MANUSCRIPT / ONE-SCENE INTEGRATION
   Organic ivy bridges the manuscript, vista and route gallery so
   the planner reads as one crafted screen instead of stacked boxes.
   ============================================================ */

#screen-quiz.epic-quiz{
  --ivy-dark:#183f2d;
  --ivy-mid:#2f5c3d;
  --ivy-gold:#9b7835;
  column-gap:0!important;
  row-gap:0!important;
}

/* Shared vine asset: deliberately decorative, transparent and non-interactive. */
#screen-quiz .quiz-wrap:after,
#screen-quiz .epic-vista:before,
#screen-quiz .epic-route-ribbon:after{
  pointer-events:none!important;
}

/* Fine ivy creeps around the parchment edges. Keep the reading area clear. */
#screen-quiz .quiz-wrap:after{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  inset:-8px -16px -18px -16px!important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'%3E%3Cg fill='none' stroke='%236b5528' stroke-width='3' opacity='.85'%3E%3Cpath d='M12 10 C38 110 18 190 58 290 S18 510 70 690'/%3E%3Cpath d='M888 0 C850 100 884 200 842 300 S886 510 830 700'/%3E%3Cpath d='M0 670 C120 630 220 690 340 650 S590 700 900 640'/%3E%3C/g%3E%3Cg fill='%232f5c3d' stroke='%239b7835' stroke-width='1'%3E%3Cellipse cx='26' cy='82' rx='18' ry='9' transform='rotate(35 26 82)'/%3E%3Cellipse cx='39' cy='145' rx='20' ry='10' transform='rotate(-30 39 145)'/%3E%3Cellipse cx='31' cy='232' rx='17' ry='9' transform='rotate(28 31 232)'/%3E%3Cellipse cx='50' cy='352' rx='22' ry='11' transform='rotate(-25 50 352)'/%3E%3Cellipse cx='35' cy='492' rx='19' ry='10' transform='rotate(34 35 492)'/%3E%3Cellipse cx='58' cy='612' rx='23' ry='11' transform='rotate(-32 58 612)'/%3E%3Cellipse cx='870' cy='92' rx='20' ry='10' transform='rotate(-34 870 92)'/%3E%3Cellipse cx='853' cy='182' rx='17' ry='9' transform='rotate(29 853 182)'/%3E%3Cellipse cx='870' cy='302' rx='23' ry='11' transform='rotate(-28 870 302)'/%3E%3Cellipse cx='848' cy='430' rx='19' ry='10' transform='rotate(33 848 430)'/%3E%3Cellipse cx='866' cy='570' rx='22' ry='11' transform='rotate(-29 866 570)'/%3E%3Cellipse cx='110' cy='652' rx='25' ry='12' transform='rotate(-14 110 652)'/%3E%3Cellipse cx='185' cy='663' rx='22' ry='11' transform='rotate(18 185 663)'/%3E%3Cellipse cx='720' cy='655' rx='24' ry='12' transform='rotate(-18 720 655)'/%3E%3Cellipse cx='790' cy='646' rx='21' ry='10' transform='rotate(15 790 646)'/%3E%3C/g%3E%3C/svg%3E")!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  opacity:.88!important;
  filter:drop-shadow(0 3px 3px rgba(20,24,12,.25))!important;
}
#screen-quiz .quiz-wrap > *{position:relative;z-index:3!important}

/* Let the photograph visually breathe into the manuscript edge instead of a hard seam. */
#screen-quiz .epic-vista{
  border-left:0!important;
  overflow:visible!important;
  background-position:43% center!important;
}
#screen-quiz .epic-vista:before{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  left:-28px!important;top:0!important;bottom:0!important;width:64px!important;
  background:
    linear-gradient(90deg,rgba(18,55,38,.78),rgba(18,55,38,.28) 44%,transparent 88%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 700'%3E%3Cg fill='none' stroke='%23735a2b' stroke-width='3'%3E%3Cpath d='M35 0 C12 90 62 150 28 245 S55 400 24 510 S55 620 35 700'/%3E%3C/g%3E%3Cg fill='%232d5a3c' stroke='%23a4813d' stroke-width='1'%3E%3Cellipse cx='27' cy='70' rx='22' ry='11' transform='rotate(-30 27 70)'/%3E%3Cellipse cx='43' cy='145' rx='20' ry='10' transform='rotate(32 43 145)'/%3E%3Cellipse cx='25' cy='230' rx='24' ry='12' transform='rotate(-26 25 230)'/%3E%3Cellipse cx='45' cy='330' rx='21' ry='10' transform='rotate(30 45 330)'/%3E%3Cellipse cx='24' cy='430' rx='23' ry='11' transform='rotate(-32 24 430)'/%3E%3Cellipse cx='43' cy='540' rx='22' ry='11' transform='rotate(29 43 540)'/%3E%3Cellipse cx='26' cy='645' rx='24' ry='12' transform='rotate(-25 26 645)'/%3E%3C/g%3E%3C/svg%3E") center/64px 100% no-repeat!important;
  box-shadow:none!important;
}

/* Route gallery tucks underneath the manuscript and vista, with ivy masking the join. */
#screen-quiz .epic-route-ribbon{
  margin-top:0!important;
  border-top:0!important;
  overflow:visible!important;
  position:relative!important;
  box-shadow:0 -12px 28px rgba(2,19,14,.32)!important;
}
#screen-quiz .epic-route-ribbon:before{
  content:""!important;
  position:absolute!important;
  z-index:4!important;
  left:-4px!important;right:-4px!important;top:-28px!important;height:54px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70'%3E%3Cg fill='none' stroke='%237b602d' stroke-width='3'%3E%3Cpath d='M0 35 C100 5 170 60 270 30 S450 60 560 28 S760 58 870 25 S1050 55 1200 25'/%3E%3C/g%3E%3Cg fill='%232c593b' stroke='%23a17d38' stroke-width='1'%3E%3Cellipse cx='90' cy='26' rx='27' ry='12' transform='rotate(-18 90 26)'/%3E%3Cellipse cx='170' cy='43' rx='25' ry='11' transform='rotate(18 170 43)'/%3E%3Cellipse cx='320' cy='24' rx='28' ry='12' transform='rotate(-16 320 24)'/%3E%3Cellipse cx='445' cy='43' rx='25' ry='11' transform='rotate(17 445 43)'/%3E%3Cellipse cx='650' cy='24' rx='28' ry='12' transform='rotate(-18 650 24)'/%3E%3Cellipse cx='785' cy='42' rx='25' ry='11' transform='rotate(16 785 42)'/%3E%3Cellipse cx='970' cy='23' rx='29' ry='12' transform='rotate(-16 970 23)'/%3E%3Cellipse cx='1090' cy='39' rx='26' ry='11' transform='rotate(18 1090 39)'/%3E%3C/g%3E%3C/svg%3E")!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.38))!important;
  pointer-events:none!important;
}
#screen-quiz .epic-route-ribbon:after{
  content:""!important;
  position:absolute!important;
  z-index:5!important;
  left:0!important;right:0!important;top:-10px!important;height:20px!important;
  background:linear-gradient(180deg,transparent,rgba(4,28,21,.5),transparent)!important;
}

/* Decorative growth in the outer corners makes the frame continue around all zones. */
#screen-quiz.epic-quiz:before{
  content:""!important;
  position:absolute!important;
  z-index:7!important;
  left:var(--side)!important;right:0!important;top:82px!important;height:52px!important;
  pointer-events:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cg fill='%232b573a' stroke='%239b7835' stroke-width='1'%3E%3Cellipse cx='35' cy='24' rx='30' ry='12' transform='rotate(20 35 24)'/%3E%3Cellipse cx='82' cy='18' rx='25' ry='11' transform='rotate(-20 82 18)'/%3E%3Cellipse cx='1120' cy='18' rx='26' ry='11' transform='rotate(18 1120 18)'/%3E%3Cellipse cx='1168' cy='28' rx='30' ry='12' transform='rotate(-18 1168 28)'/%3E%3C/g%3E%3C/svg%3E")!important;
  background-size:100% 100%!important;background-repeat:no-repeat!important;
  opacity:.9!important;
}

/* Keep every functional element above foliage. */
#screen-quiz .planner-chapter,
#screen-quiz .planner-question-box,
#screen-quiz .answers,
#screen-quiz .quiz-nav,
#screen-quiz .progress-row{position:relative!important;z-index:6!important}

@media(max-width:900px){
  #screen-quiz .quiz-wrap:after,
  #screen-quiz .epic-route-ribbon:before,
  #screen-quiz.epic-quiz:before{display:none!important}
}

/* ============================================================
   v0.86 — PHOTOREALISTIC UNIFIED SCENE
   Uses the approved photoreal mockup itself as the environmental
   art direction layer. Functional UI remains live HTML above it.
   No SVG/CSS polygon foliage is used in this version.
   ============================================================ */
#screen-quiz.epic-quiz{
  --side:250px;
  --ribbon-h:188px;
  padding-top:142px!important;
  padding-bottom:0!important;
  grid-template-columns:250px minmax(720px,1.32fr) minmax(390px,.78fr)!important;
  grid-template-rows:auto auto!important;
  background:#061b15 url('assets/mockup-scene-v086.webp') center top/cover no-repeat!important;
  overflow:hidden!important;
  isolation:isolate;
}
/* dark cinematic veil lets the live interface read while preserving the photographic world */
#screen-quiz.epic-quiz:after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,19,14,.08),rgba(2,18,14,.13));
}
/* remove all synthetic v0.83 leaf drawings */
#screen-quiz.epic-quiz:before,
#screen-quiz .quiz-wrap:after,
#screen-quiz .epic-route-ribbon:before,
#screen-quiz .epic-route-ribbon:after{display:none!important;background:none!important}

/* Sidebar: glassy enough for the photographic ivy/world behind it to remain visible. */
#screen-quiz .epic-steps{
  z-index:3!important;
  background:linear-gradient(180deg,rgba(3,35,27,.92),rgba(3,29,23,.88))!important;
  backdrop-filter:blur(1px);
  border-right:1px solid rgba(218,166,63,.72)!important;
  box-shadow:inset -18px 0 38px rgba(0,0,0,.12)!important;
}

/* Parchment is a real textured asset, but the outer 18px stay open so the scene can visually grow around it. */
#screen-quiz .quiz-wrap{
  z-index:3!important;
  padding:18px 12px 18px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#screen-quiz .quiz-wrap:before{display:none!important}
#screen-quiz .question-shell{
  margin:0!important;
  padding:34px 40px 26px!important;
  background:
    linear-gradient(rgba(255,245,218,.08),rgba(138,83,29,.03)),
    url('assets/planner-parchment-v077.webp') center/100% 100% no-repeat!important;
  border:0!important;
  box-shadow:0 12px 30px rgba(24,12,3,.26)!important;
  min-height:610px!important;
}
/* Progress becomes its own dark-green band, matching the mockup. */
#screen-quiz .progress-row{
  z-index:5!important;
  margin:-5px 16px 10px!important;
  padding:12px 18px 13px!important;
  display:grid!important;
  grid-template-columns:125px 1fr!important;
  align-items:center!important;
  gap:14px!important;
  min-height:58px!important;
  background:linear-gradient(180deg,rgba(4,48,37,.97),rgba(3,34,27,.97))!important;
  border-top:1px solid #b7842f!important;
  border-bottom:1px solid #b7842f!important;
  box-shadow:0 6px 16px rgba(0,0,0,.18)!important;
}
#screen-quiz .question-meta{margin:0!important;display:block!important}
#screen-quiz .question-meta span{color:#f0d07c!important;font:700 13px/1.1 Georgia,serif!important}
#screen-quiz .progress-track{padding:0!important}
#screen-quiz .progress{height:12px!important;background:#08291f!important;border:1px solid #b58430!important;border-radius:20px!important}
#screen-quiz .progress>div{background:linear-gradient(90deg,#1ba991,#69c4a9 44%,#e9c46a 74%,#f1d17c)!important;border-radius:20px!important}
#screen-quiz .pilgrim-progress-icon{display:block!important;color:#f1c95f!important;font-size:32px!important}

/* Keep manuscript typography elegant and collision-free. */
#screen-quiz .planner-chapter{text-align:center!important;margin:0 auto 15px!important;max-width:880px!important}
#screen-quiz .planner-chapter h1{font-size:clamp(50px,66.88px,68px)!important;line-height:.95!important}
#screen-quiz .planner-chapter p{font-size:clamp(24px,33.44px,31px)!important;line-height:1.05!important}
#screen-quiz .planner-chapter small{margin:8px auto 0!important;max-width:760px!important;font-size:17px!important;line-height:1.35!important;color:#3d3023!important;font-weight:600!important}
#screen-quiz .planner-question-box{margin:0 0 12px!important;padding:12px 18px!important;background:rgba(250,235,201,.50)!important}
#screen-quiz .planner-question-copy h2{font-size:clamp(28px,35.948px,37px)!important;color:#20160d!important}
#screen-quiz .question-subtitle{color:#4c3a28!important;font-size:16px!important;font-weight:600!important}

/* Cards are the approved deep Camino green with readable cream copy. */
#screen-quiz .answers.visual-answers{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;max-width:none!important}
#screen-quiz .visual-answers .answer{min-height:238px!important;border:1px solid #a8792c!important;background:#073e31!important;box-shadow:0 4px 10px rgba(42,24,6,.16)!important}
#screen-quiz .visual-answers .answer-media{aspect-ratio:1.35/1!important}
#screen-quiz .visual-answers .answer-copy{background:linear-gradient(180deg,#0a4638,#073428)!important;padding:13px 14px 14px!important}
#screen-quiz .visual-answers .answer-copy strong{font-size:18px!important;line-height:1.04!important;color:#ffe4a3!important}
#screen-quiz .visual-answers .answer-copy small{font-size:12px!important;line-height:1.35!important;color:#f0ead7!important;font-weight:600!important}

/* Right-hand vista is photographic and visually connected; no boxed overlay. */
#screen-quiz .epic-vista{
  z-index:2!important;
  margin:18px 12px 18px 0!important;
  border:0!important;
  background:url('assets/hero-camino.webp') 44% center/cover no-repeat!important;
  filter:saturate(1.13) contrast(1.04) brightness(1.02)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#screen-quiz .epic-vista:before{display:block!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:auto!important;background:linear-gradient(90deg,rgba(5,25,18,.16),transparent 28%)!important}
#screen-quiz .epic-vista:after{inset:0!important;border:1px solid rgba(224,174,69,.72)!important;box-shadow:none!important}

/* Route gallery: original approved art, natural ratio, always a complete row below. */
#screen-quiz .epic-route-ribbon{
  z-index:4!important;
  grid-column:2 / 4!important;
  grid-row:2!important;
  position:relative!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  width:calc(100% - 24px)!important;
  margin:0 12px 12px!important;
  height:auto!important;
  aspect-ratio:2172/724!important;
  background:#061b15 url('assets/route-medallions-banner-v079.webp') center/contain no-repeat!important;
  border:1px solid #b98530!important;
  box-shadow:0 -7px 18px rgba(0,0,0,.22)!important;
}

@media(min-width:1450px){
  #screen-quiz.epic-quiz{--side:270px;grid-template-columns:270px minmax(820px,1.34fr) minmax(430px,.76fr)!important}
}
@media(max-width:1180px) and (min-width:901px){
  #screen-quiz.epic-quiz{--side:205px;grid-template-columns:205px minmax(600px,1.22fr) minmax(310px,.78fr)!important}
  #screen-quiz .answers.visual-answers{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
  #screen-quiz.epic-quiz{background:#061b15!important;padding-top:92px!important}
  #screen-quiz .question-shell{padding:30px 18px 22px!important}
}

/* ============================================================
   v0.87 — SINGLE-SCENE PLANNER BUILD
   The approved photographic scene is now the visual foundation.
   Live controls sit in the exact functional zones instead of
   rebuilding the world from separate decorative blocks.
   ============================================================ */
body.quiz-mode .topbar{position:absolute!important;height:72px!important;padding:0 2.1vw!important;background:rgba(2,28,21,.90)!important;border-bottom:1px solid #a8792c!important;backdrop-filter:blur(2px)!important}
body.quiz-mode .topbar .brand{min-width:235px!important}
body.quiz-mode .topbar .brand .shell-mark{width:44px!important;height:44px!important}
body.quiz-mode .topbar .main-nav{gap:38px!important;font-size:17px!important}
body.quiz-mode .topbar .small-primary{border-radius:4px!important;background:#073b2f!important;color:#f6d889!important;border:1px solid #b98530!important;box-shadow:none!important}

#screen-quiz.epic-quiz{
  --side:230px;
  display:grid!important;
  grid-template-columns:230px minmax(760px,1.45fr) minmax(360px,.72fr)!important;
  grid-template-rows:auto auto!important;
  gap:0!important;
  padding:72px 0 0!important;
  min-height:100vh!important;
  background:#061b15 url('assets/mockup-scene-v086.webp') center top/cover no-repeat!important;
  overflow:visible!important;
}
#screen-quiz.epic-quiz:after{background:rgba(2,18,14,.04)!important}

/* Left navigation becomes part of the same world; no floating card look. */
#screen-quiz .epic-steps{
  grid-column:1!important;grid-row:1!important;
  position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;
  min-height:650px!important;height:auto!important;
  padding:78px 20px 30px!important;
  background:linear-gradient(90deg,rgba(2,39,29,.95),rgba(3,43,32,.87))!important;
  border:0!important;border-right:1px solid rgba(193,140,46,.65)!important;
  box-shadow:none!important;
}
#screen-quiz .epic-steps-brand{margin-top:-50px!important;margin-bottom:24px!important}
#screen-quiz .epic-step{min-height:62px!important}
#screen-quiz .epic-step span{font-size:16px!important;line-height:1.05!important}
#screen-quiz .epic-step span small{font-size:11px!important;margin-top:5px!important;color:#b7c2b8!important}
#screen-quiz .epic-step.active span{color:#ffe19a!important;text-shadow:0 1px 8px rgba(0,0,0,.7)!important}

/* Main column: progress + parchment. Parchment is deliberately wider. */
#screen-quiz .quiz-wrap{
  grid-column:2!important;grid-row:1!important;
  width:100%!important;max-width:none!important;margin:0!important;
  padding:12px 0 0!important;background:transparent!important;
}
#screen-quiz .progress-row{
  margin:0 0 8px!important;padding:10px 24px!important;min-height:64px!important;
  grid-template-columns:145px minmax(0,1fr)!important;
  background:rgba(2,42,31,.94)!important;
  border-top:1px solid #b98530!important;border-bottom:1px solid #b98530!important;
}
#screen-quiz .question-meta{display:flex!important;align-items:center!important;gap:12px!important}
#screen-quiz .question-meta span{font-size:13px!important;max-width:86px!important;text-transform:uppercase!important}
#screen-quiz .question-meta strong{font-size:16px!important;color:#f4dfad!important;margin:0!important}
#screen-quiz .journey-note{display:none!important}
#screen-quiz .pilgrim-progress-track{overflow:visible!important;position:relative!important}
#screen-quiz .pilgrim-progress-icon{transform:translate(-50%,-50%)!important;top:50%!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))!important}

#screen-quiz .question-shell{
  width:calc(100% + 10px)!important;margin:0 0 0 -5px!important;
  min-height:590px!important;padding:24px 38px 24px!important;
  background:url('assets/planner-parchment-v077.webp') center/100% 100% no-repeat!important;
  box-shadow:0 12px 24px rgba(20,10,3,.20)!important;
}
#screen-quiz .planner-chapter{max-width:920px!important;margin:0 auto 12px!important}
#screen-quiz .planner-chapter>span{display:none!important}
#screen-quiz .planner-chapter h1{font-size:clamp(48px,61.864px,64px)!important;line-height:.92!important;color:#24170e!important;text-shadow:none!important}
#screen-quiz .planner-chapter p{font-size:clamp(23px,31.768px,30px)!important;color:#713a24!important}
#screen-quiz .planner-chapter small{font-size:16px!important;max-width:790px!important;color:#35251a!important}
#screen-quiz .planner-chapter i{margin-top:11px!important}
#screen-quiz .planner-question-box{max-width:930px!important;margin:0 auto 12px!important;min-height:78px!important;padding:10px 20px!important;background:rgba(250,235,201,.58)!important;border:1px solid rgba(109,70,31,.38)!important}
#screen-quiz .question-icon{flex:0 0 54px!important;width:54px!important;height:54px!important;margin:0 22px 0 0!important;color:#68421f!important;border-color:#9d6f34!important}
#screen-quiz .planner-question-copy h2{font-size:clamp(27px,33.44px,36px)!important;line-height:1.02!important}
#screen-quiz .question-subtitle{font-size:15px!important;line-height:1.25!important}

#screen-quiz .answers.visual-answers{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;max-width:930px!important;margin:0 auto!important}
#screen-quiz .visual-answers .answer{min-height:220px!important;border-radius:4px!important;overflow:hidden!important}
#screen-quiz .visual-answers .answer-media{aspect-ratio:1.42/1!important}
#screen-quiz .visual-answers .answer-copy{min-height:88px!important;padding:12px 13px 13px!important}
#screen-quiz .visual-answers .answer-copy strong{font-size:17px!important;line-height:1.06!important}
#screen-quiz .visual-answers .answer-copy small{font-size:11.5px!important;line-height:1.28!important}
#screen-quiz .quiz-nav{max-width:930px!important;margin:12px auto 0!important}
#screen-quiz .quiz-nav .text-button{background:#073e31!important;color:#ffe19a!important;border:1px solid #b98530!important;border-radius:3px!important;padding:12px 26px!important;font-size:16px!important;text-shadow:0 1px 3px rgba(0,0,0,.6)!important}
#screen-quiz .quiz-nav .text-button:hover{background:#0a4b3b!important}
#screen-quiz .quiz-nav .primary{border-radius:3px!important;background:#073e31!important;color:#ffe19a!important;border:1px solid #b98530!important;padding:12px 28px!important;box-shadow:none!important}
#screen-quiz .quiz-nav .primary:disabled{background:rgba(224,202,157,.38)!important;color:#715d40!important;border-color:rgba(126,93,43,.35)!important}
#screen-quiz .question-quote{display:none!important}

/* Right vista: no independent card; it visually continues the same scene. */
#screen-quiz .epic-vista{
  grid-column:3!important;grid-row:1!important;
  position:relative!important;margin:12px 0 0!important;min-height:650px!important;
  background:url('assets/hero-camino.webp') 45% center/cover no-repeat!important;
  border:0!important;box-shadow:none!important;
  border-left:1px solid rgba(185,133,43,.62)!important;
}
#screen-quiz .epic-vista:after{border:0!important}
#screen-quiz .epic-vista-quote{top:68px!important;right:8%!important;font-size:25px!important;color:#3a2418!important;text-shadow:0 1px 0 rgba(255,239,198,.55)!important}
#screen-quiz .epic-waymark{right:8%!important;bottom:80px!important}

/* Route artwork always sits below the complete planner/vista row and keeps its ratio. */
#screen-quiz .epic-route-ribbon{
  grid-column:1 / 4!important;grid-row:2!important;
  width:100%!important;max-width:none!important;margin:0!important;
  aspect-ratio:2172/724!important;height:auto!important;min-height:0!important;
  background:#061b15 url('assets/route-medallions-banner-v079.webp') center/100% auto no-repeat!important;
  border:0!important;border-top:1px solid #b98530!important;
  box-shadow:0 -8px 22px rgba(0,0,0,.24)!important;
}
#screen-quiz .epic-route-ribbon span,#screen-quiz .epic-route-ribbon b{display:none!important}

/* The photographic foliage in the approved scene remains visible around the edges,
   while live panels cover the baked UI centre. This makes the whole planner read as one scene. */
@media(min-width:1450px){
  #screen-quiz.epic-quiz{--side:250px;grid-template-columns:250px minmax(860px,1.5fr) minmax(390px,.7fr)!important}
  #screen-quiz .question-shell{padding-left:44px!important;padding-right:44px!important}
}
@media(max-width:1180px) and (min-width:901px){
  #screen-quiz.epic-quiz{--side:195px;grid-template-columns:195px minmax(620px,1.3fr) minmax(300px,.7fr)!important}
  #screen-quiz .answers.visual-answers{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #screen-quiz .question-shell{padding-left:25px!important;padding-right:25px!important}
}
@media(max-width:900px){
  #screen-quiz.epic-quiz{display:block!important;padding-top:72px!important;background:#061b15!important}
  #screen-quiz .epic-steps,#screen-quiz .epic-vista{display:none!important}
  #screen-quiz .quiz-wrap{padding:8px!important}
  #screen-quiz .progress-row{grid-template-columns:110px 1fr!important}
  #screen-quiz .question-shell{width:100%!important;margin:0!important}
  #screen-quiz .answers.visual-answers{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #screen-quiz .epic-route-ribbon{width:100%!important}
}
@media(max-width:620px){#screen-quiz .answers.visual-answers{grid-template-columns:1fr!important}}

/* =========================================================
   v0.88 — COMPLETE SCENE MASTER
   One photographic background: foliage + parchment + vista + route medallions.
   Live UI is positioned on top; no duplicate baked menu, no black parchment frame.
   ========================================================= */
#screen-quiz.epic-quiz{
  --scene-ratio: 1672 / 941;
  display:grid!important;
  grid-template-columns:15% 57% 28%!important;
  grid-template-rows:137.104px 595.232px 257.488px!important;
  gap:0!important;
  width:100%!important;
  min-height:calc(1672px * 941 / 1672)!important;
  padding:72px 0 0!important;
  margin:0!important;
  position:relative!important;
  overflow:visible!important;
  background:#06231b url('assets/planner-complete-background-v088.webp') center top/100% auto no-repeat!important;
}
#screen-quiz.epic-quiz:before,#screen-quiz.epic-quiz:after{display:none!important}

/* Left chapter rail — background art already supplies the rail and circles. */
#screen-quiz .epic-steps{
  grid-column:1!important;grid-row:1 / 3!important;
  position:relative!important;inset:auto!important;
  min-height:0!important;height:auto!important;
  padding:36.784px 22.572px 16.72px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  overflow:visible!important;
}
#screen-quiz .epic-steps:before{display:none!important}
#screen-quiz .epic-steps-brand{
  height:86.944px!important;margin:0 0 23.408px!important;padding-left:61.864px!important;
  background:transparent!important;border:0!important;
}
#screen-quiz .epic-steps-brand .planner-shell{display:none!important}
#screen-quiz .epic-steps-brand strong{font-size:clamp(16px,22.572px,27px)!important;line-height:.9!important;color:#f4d47e!important}
#screen-quiz .epic-steps-brand small{font-size:clamp(7px,8.026px,10px)!important;color:#d6b65f!important;letter-spacing:.22em!important}
#screen-quiz .epic-step{
  min-height:78.584px!important;height:78.584px!important;margin:0!important;padding:0 9.196px 0 84.436px!important;
  display:flex!important;align-items:center!important;background:transparent!important;border:0!important;
}
#screen-quiz .epic-step b{
  position:absolute!important;left:34.276px!important;width:41.8px!important;height:41.8px!important;
  display:grid!important;place-items:center!important;border:0!important;background:transparent!important;
  color:#f0c95e!important;font-size:clamp(11px,14.212px,17px)!important;box-shadow:none!important;
}
#screen-quiz .epic-step span{font-size:clamp(12px,16.72px,20px)!important;line-height:1!important;color:#ead7a3!important;text-shadow:0 2px 5px #001!important}
#screen-quiz .epic-step span small{font-size:clamp(8px,10.534px,12px)!important;line-height:1.15!important;margin-top:4.682px!important;color:#b8c7b9!important}
#screen-quiz .epic-step.active span{color:#ffe08a!important}
#screen-quiz .epic-step.active b{color:#fff0a4!important;text-shadow:0 0 12px #e9b13f!important}
#screen-quiz .epic-steps blockquote{margin:16.72px 11.704px 0!important;padding-top:13.376px!important;font-size:clamp(11px,13.376px,16px)!important;color:#e3c871!important}

/* Central live area. No second parchment image and therefore no black frame. */
#screen-quiz .quiz-wrap{
  grid-column:2!important;grid-row:1 / 3!important;
  width:100%!important;max-width:none!important;height:auto!important;
  margin:0!important;padding:0!important;background:transparent!important;overflow:visible!important;
}
#screen-quiz .progress-row{
  height:127.072px!important;min-height:0!important;margin:0!important;padding:23.408px 107.008px 18.392px 20.064px!important;
  display:grid!important;grid-template-columns:137.104px 1fr!important;align-items:center!important;gap:16.72px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
#screen-quiz .question-meta{display:block!important}
#screen-quiz .question-meta span{display:block!important;font-size:clamp(9px,12.038px,14px)!important;line-height:1.05!important;letter-spacing:.06em!important;color:#f4d47e!important;font-weight:700!important;text-transform:uppercase!important;max-width:none!important}
#screen-quiz .question-meta strong{display:block!important;margin:4.682px 0 0!important;font-size:clamp(11px,13.71px,16px)!important;line-height:1!important;color:#f6df9f!important}
#screen-quiz .progress-track{width:100%!important;position:relative!important;padding:0!important;overflow:visible!important}
#screen-quiz .progress{height:9.196px!important;min-height:7px!important;border:1px solid #c39237!important;border-radius:999px!important;background:rgba(0,30,24,.55)!important;overflow:hidden!important;box-shadow:inset 0 1px 4px rgba(0,0,0,.7)!important}
#screen-quiz .progress>div{height:100%!important;border-radius:999px!important;background:linear-gradient(90deg,#0ca997,#47d0c0 45%,#e9c66b 100%)!important}
#screen-quiz .progress-nodes{display:none!important}
#screen-quiz .pilgrim-progress-icon{display:block!important;top:50%!important;transform:translate(-50%,-50%)!important;color:#f3ce65!important;font-size:clamp(24px,33.44px,38px)!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.75))!important}
#screen-quiz .journey-note{display:none!important}

#screen-quiz .question-shell{
  width:100%!important;height:595.232px!important;min-height:0!important;margin:0!important;
  padding:19.228px 69.388px 18.392px!important;background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;overflow:hidden!important;color:#24170e!important;
}
#screen-quiz .question-shell:before,#screen-quiz .question-shell:after,#screen-quiz .question-shell .corner{display:none!important}
#screen-quiz .planner-chapter{max-width:100%!important;margin:0 auto 10.868px!important;text-align:center!important}
#screen-quiz .planner-chapter>span{display:none!important}
#screen-quiz .planner-chapter h1{font-size:clamp(35px,50.996px,58px)!important;line-height:.92!important;margin:0!important;color:#24170e!important;text-shadow:none!important}
#screen-quiz .planner-chapter p{font-size:clamp(18px,25.916px,29px)!important;line-height:1!important;margin:4.682px 0!important;color:#713a24!important;font-weight:600!important}
#screen-quiz .planner-chapter small{display:block!important;max-width:769.12px!important;margin:5.852px auto 0!important;font-size:clamp(11px,13.71px,16px)!important;line-height:1.25!important;color:#35251a!important;font-weight:500!important}
#screen-quiz .planner-chapter i{display:block!important;width:58%!important;height:1px!important;margin:10.868px auto 0!important;background:rgba(118,74,30,.45)!important}
#screen-quiz .planner-question-box{max-width:819.28px!important;min-height:73.568px!important;margin:0 auto 10.868px!important;padding:7.524px 16.72px!important;display:flex!important;align-items:center!important;background:rgba(255,242,211,.42)!important;border:1px solid rgba(109,70,31,.38)!important}
#screen-quiz .question-icon{flex:0 0 53.504px!important;width:53.504px!important;height:53.504px!important;margin:0 18.392px 0 0!important;color:#68421f!important;border-color:#9d6f34!important;font-size:clamp(18px,24.244px,28px)!important}
#screen-quiz .planner-question-copy{flex:1!important;text-align:center!important;padding-right:50.16px!important}
#screen-quiz .planner-question-copy h2{font-size:clamp(20px,28.424px,32px)!important;line-height:1!important;color:#24170e!important;margin:0!important}
#screen-quiz .question-subtitle{font-size:clamp(10px,12.038px,14px)!important;line-height:1.2!important;color:#4d3826!important;margin:4.18px 0 0!important;font-weight:500!important}

#screen-quiz .answers.visual-answers{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12.038px!important;max-width:819.28px!important;margin:0 auto!important}
#screen-quiz .visual-answers .answer{min-height:212.344px!important;height:212.344px!important;border-radius:3px!important;border:1px solid #9f762e!important;background:#073d31!important;box-shadow:0 3px 8px rgba(31,18,7,.2)!important;overflow:hidden!important}
#screen-quiz .visual-answers .answer-media{height:117.876px!important;aspect-ratio:auto!important}
#screen-quiz .visual-answers .answer-copy{min-height:93.632px!important;padding:10.032px 12.54px!important;background:linear-gradient(180deg,#0a493a,#07372d)!important}
#screen-quiz .visual-answers .answer-copy strong{font-size:clamp(12px,15.884px,18px)!important;line-height:1.02!important;color:#ffe49a!important}
#screen-quiz .visual-answers .answer-copy small{font-size:clamp(9px,10.032px,12px)!important;line-height:1.22!important;color:#f3eee0!important;margin-top:5.016px!important;font-weight:500!important}
#screen-quiz .quiz-nav{max-width:819.28px!important;margin:10.868px auto 0!important;display:flex!important;justify-content:space-between!important}
#screen-quiz .quiz-nav .text-button,#screen-quiz .quiz-nav .primary{padding:10.366px 28.424px!important;min-width:125.4px!important;font-size:clamp(12px,14.212px,16px)!important;background:#073e31!important;color:#ffe19a!important;border:1px solid #b98530!important;border-radius:3px!important;text-shadow:0 1px 3px rgba(0,0,0,.6)!important}
#screen-quiz .quiz-nav .primary:disabled{background:rgba(229,210,166,.62)!important;color:#715d40!important;text-shadow:none!important;border-color:rgba(126,93,43,.45)!important}
#screen-quiz .mini-mountain,#screen-quiz .question-quote{display:none!important}

/* Right-hand view is already in the single scene. Keep only the live quote/waymark. */
#screen-quiz .epic-vista{
  grid-column:3!important;grid-row:1 / 3!important;position:relative!important;
  min-height:0!important;height:auto!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
#screen-quiz .epic-vista:before,#screen-quiz .epic-vista:after{display:none!important}
#screen-quiz .epic-vista-quote{top:120.384px!important;right:5.5%!important;font-size:clamp(17px,25.916px,29px)!important;line-height:1.05!important;color:#3b2617!important;text-shadow:0 1px 1px rgba(255,241,207,.65)!important}
#screen-quiz .epic-vista-quote small{font-size:clamp(7px,8.026px,10px)!important}
#screen-quiz .epic-waymark{right:7%!important;bottom:66.88px!important;background:rgba(4,56,43,.92)!important}

/* Route medallions are now baked into the single background image. */
#screen-quiz .epic-route-ribbon{grid-column:1 / 4!important;grid-row:3!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;pointer-events:none!important}
#screen-quiz .epic-route-ribbon span,#screen-quiz .epic-route-ribbon b{display:none!important}

@media(max-width:1100px){
  #screen-quiz.epic-quiz{grid-template-columns:15% 57% 28%!important;padding-top:72px!important}
  #screen-quiz .epic-steps blockquote{display:none!important}
}
@media(max-width:820px){
  #screen-quiz.epic-quiz{display:block!important;min-height:100vh!important;background:#06231b!important;padding:80px 10px 30px!important}
  #screen-quiz .epic-steps,#screen-quiz .epic-vista,#screen-quiz .epic-route-ribbon{display:none!important}
  #screen-quiz .quiz-wrap{display:block!important}
  #screen-quiz .progress-row{height:auto!important;padding:12px!important;grid-template-columns:110px 1fr!important;background:#073e31!important;border:1px solid #b98530!important}
  #screen-quiz .question-shell{height:auto!important;min-height:650px!important;padding:30px 18px!important;background:url('assets/planner-parchment-v077.webp') center/100% 100% no-repeat!important}
  #screen-quiz .planner-chapter small{max-width:90%!important}
  #screen-quiz .planner-question-box,#screen-quiz .answers.visual-answers,#screen-quiz .quiz-nav{max-width:92%!important}
  #screen-quiz .answers.visual-answers{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #screen-quiz .visual-answers .answer{height:auto!important;min-height:220px!important}
  #screen-quiz .visual-answers .answer-media{height:145px!important}
  #screen-quiz .visual-answers .answer-copy{min-height:80px!important}
}
@media(max-width:560px){#screen-quiz .answers.visual-answers{grid-template-columns:1fr!important}}

/* =========================================================
   v0.89 — CLEAN SINGLE-SCENE POLISH
   Keep the v0.88 master structure; remove duplicate decoration
   and align the live controls with the artwork underneath.
   ========================================================= */

/* 1. The scene already contains the shell mark in the left rail.
      Remove the duplicate live CAMINO PLANNER / FIND YOUR WAY copy. */
#screen-quiz .epic-steps-brand strong,
#screen-quiz .epic-steps-brand small,
#screen-quiz .epic-steps-brand .planner-shell{display:none!important}
#screen-quiz .epic-steps-brand{pointer-events:none!important}

/* 2. The numbered circles + connector line are artwork in the single background.
      Keep only the functional number/text layer, without drawing a second circle. */
#screen-quiz .epic-step:before,
#screen-quiz .epic-step:after{display:none!important}
#screen-quiz .epic-step b,
#screen-quiz .epic-step.active b{
  left:35.446px!important;
  width:39.292px!important;
  height:39.292px!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:0 1px 3px rgba(0,0,0,.85)!important;
}

/* 3. One progress bar only: overlay the LIVE bar directly on the beautiful
      progress track that is part of the scene. Start it further left. */
#screen-quiz .progress-row{
  position:absolute!important;
  z-index:20!important;
  top:76.076px!important;
  left:15.15%!important;
  width:51.15%!important;
  height:50.996px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:118.712px 1fr!important;
  align-items:center!important;
  gap:12.54px!important;
  pointer-events:none!important;
}
#screen-quiz .question-meta{
  align-self:center!important;
  padding-left:2.508px!important;
}
#screen-quiz .question-meta span{font-size:clamp(9px,11.37px,13px)!important}
#screen-quiz .question-meta strong{font-size:clamp(10px,12.707px,15px)!important}
#screen-quiz .progress-track{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  pointer-events:auto!important;
}
#screen-quiz .progress{
  width:100%!important;
  height:10.366px!important;
  min-height:8px!important;
  margin:0!important;
  background:rgba(0,35,29,.24)!important;
  border:1px solid rgba(202,150,50,.88)!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55)!important;
}
#screen-quiz .progress>div{
  background:linear-gradient(90deg,#0aa896 0%,#49cabb 42%,#e4bd5d 100%)!important;
}
#screen-quiz .pilgrim-progress-icon{
  z-index:4!important;
  font-size:clamp(24px,30.932px,36px)!important;
}

/* Give the parchment content its own clean start below the progress artwork. */
#screen-quiz .question-shell{padding-top:19.228px!important}

/* 4. Decorative waymark button on the hero added no function. */
#screen-quiz .epic-waymark{display:none!important}

/* 5. Remove the extra explanatory chapter sentence to calm the parchment. */
#screen-quiz #plannerChapterIntro{display:none!important}
#screen-quiz .planner-chapter{margin-bottom:14.212px!important}
#screen-quiz .planner-chapter i{margin-top:11.704px!important}

@media(max-width:820px){
  #screen-quiz .progress-row{
    position:relative!important;top:auto!important;left:auto!important;width:auto!important;height:auto!important;
    display:grid!important;grid-template-columns:110px 1fr!important;padding:12px!important;
  }
  #screen-quiz #plannerChapterIntro{display:none!important}
}

/* ============================================================
   v0.90 — PARCHMENT CONTENT LOWER + EXACT APPROVED ROUTE RIBBON
   MASTER: v0.89
   ============================================================ */

/* Keep the active pilgrim progress band in its approved dark-green zone. */
#screen-quiz .progress-row{
  top:76.076px!important;
}

/* The complete live question area now starts clearly INSIDE the light parchment.
   This prevents chapter titles/subtitles from ever sitting in the dark progress zone. */
#screen-quiz .question-shell{
  padding-top:clamp(78px,87.78px,112px)!important;
  min-height:690px!important;
}
#screen-quiz .planner-chapter{
  position:relative!important;
  z-index:4!important;
  margin-top:0!important;
}

/* Restore the exact approved lower Camino artwork supplied by Alex.
   Keep its native 1900×633 proportions so all medallions stay circular and copy remains readable. */
#screen-quiz .epic-route-ribbon{
  grid-column:1 / 4!important;
  grid-row:2!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1900 / 633!important;
  margin:0!important;
  padding:0!important;
  background:#061b15 url('assets/route-medallions-banner-v090.webp') center/100% 100% no-repeat!important;
  border:0!important;
  box-shadow:none!important;
}
#screen-quiz .epic-route-ribbon span,
#screen-quiz .epic-route-ribbon b{display:none!important}

@media(max-width:1180px) and (min-width:901px){
  #screen-quiz .question-shell{padding-top:82px!important;min-height:720px!important}
}
@media(max-width:900px){
  #screen-quiz .question-shell{padding-top:34px!important;min-height:650px!important}
  #screen-quiz .epic-route-ribbon{display:none!important}
}

/* ============================================================
   v0.90 FINAL — ROUTE MEDALLIONS BAKED INTO THE MASTER SCENE
   The approved Camino ribbon is part of ONE background image.
   No loose/overlay ribbon element is rendered.
   ============================================================ */
#screen-quiz.epic-quiz{
  --scene-ratio:1672 / 1287!important;
  grid-template-columns:15% 57% 28%!important;
  grid-template-rows:137.104px 592.724px 556.776px!important;
  min-height:calc(1672px * 1287 / 1672)!important;
  background:#06231b url('assets/planner-complete-background-v090.webp') center top/100% auto no-repeat!important;
}
/* The ribbon now lives in the pixels of planner-complete-background-v090.webp. */
#screen-quiz .epic-route-ribbon{
  grid-column:1 / 4!important;
  grid-row:3!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
#screen-quiz .epic-route-ribbon span,#screen-quiz .epic-route-ribbon b{display:none!important}

/* ============================================================
   v0.91 — CLEAN PROGRESSION + LIVE PROGRESS SPACE
   ============================================================ */
#screen-quiz.epic-quiz{
  background-image:url('assets/planner-complete-background-v098.webp')!important;
}
/* Remove the redundant sentence at the foot of the left rail. */
#screen-quiz .epic-steps blockquote{display:none!important}

/* Numbers sit exactly in the artwork circles. Only reached chapters reveal a number. */
#screen-quiz .epic-step{position:relative!important}
#screen-quiz .epic-step b,
#screen-quiz .epic-step.active b{
  left:56.012px!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:48.488px!important;
  height:48.488px!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .28s ease,visibility .28s ease!important;
  display:grid!important;
  place-items:center!important;
}
#screen-quiz .epic-step.revealed b{
  opacity:1!important;
  visibility:visible!important;
}

/* Live progress bar uses the clean reserved band in the background. */
#screen-quiz .progress-row{
  top:78.918px!important;
  left:15.2%!important;
  width:51.4%!important;
  grid-template-columns:122.056px 1fr!important;
}
#screen-quiz .progress{
  height:11.035px!important;
  min-height:9px!important;
  background:rgba(3,42,34,.78)!important;
  border:1px solid #c69436!important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.22)!important;
}

/* ============================================================
   v0.92 — RESPONSIVE SCENE LOCK
   All live planner UI is anchored to the same viewport-scaled scene
   coordinate system as the 1672px master background. No fixed pixel
   heights are allowed to push content away from the artwork on zoom.
   ============================================================ */
#screen-quiz.epic-quiz{
  --scene-unit:calc(1672px / 1672);
  padding-top:clamp(54px,63.87px,72px)!important;
}

/* Keep the parchment UI proportional to the master artwork at every zoom. */
#screen-quiz .question-shell{
  height:592.724px!important;
  min-height:0!important;
  padding-top:87.78px!important;
  padding-bottom:17.556px!important;
}
#screen-quiz .planner-chapter h1{font-size:50.996px!important}
#screen-quiz .planner-chapter p{font-size:25.916px!important}
#screen-quiz .planner-chapter small{font-size:13.71px!important}
#screen-quiz .planner-question-copy h2{font-size:28.424px!important}
#screen-quiz .question-subtitle{font-size:12.038px!important}
#screen-quiz .visual-answers .answer-copy strong{font-size:15.884px!important}
#screen-quiz .visual-answers .answer-copy small{font-size:10.032px!important}

/* Progress bar: one live bar, centred in the intentionally empty green band. */
#screen-quiz .progress-row{
  top:33.44px!important;
  left:19.7%!important;
  width:51.0%!important;
  height:52.668px!important;
  grid-template-columns:135.432px 1fr!important;
  gap:12.54px!important;
}
#screen-quiz .progress{min-height:0!important;height:11.035px!important}
#screen-quiz .pilgrim-progress-icon{font-size:30.932px!important}
#screen-quiz .question-meta span{font-size:11.37px!important}
#screen-quiz .question-meta strong{font-size:12.707px!important}

/* Sidebar chapter numbers use the same scene coordinates as the baked circles. */
#screen-quiz .epic-steps{
  padding-top:36.784px!important;
}
#screen-quiz .epic-step{
  min-height:78.584px!important;
  height:78.584px!important;
}
#screen-quiz .epic-step b,
#screen-quiz .epic-step.active b{
  left:53.838px!important;
  top:50%!important;
  width:45.478px!important;
  height:45.478px!important;
  font-size:14.212px!important;
  line-height:1!important;
}

/* At desktop/tablet zoom levels keep scene geometry; only switch to compact
   mobile layout when the actual viewport is narrow. */
@media (max-width:900px){
  #screen-quiz.epic-quiz{padding-top:72px!important}
  #screen-quiz .question-shell{height:auto!important;min-height:650px!important;padding-top:34px!important}
  #screen-quiz .planner-chapter h1{font-size:35px!important}
  #screen-quiz .planner-chapter p{font-size:18px!important}
  #screen-quiz .planner-question-copy h2{font-size:20px!important}
  #screen-quiz .question-subtitle{font-size:10px!important}
  #screen-quiz .progress-row{position:relative!important;top:auto!important;left:auto!important;width:auto!important;height:auto!important;grid-template-columns:110px 1fr!important}
}

/* ==========================================================================
   v0.93 — SCENE CANVAS (parent coordinate system)
   --------------------------------------------------------------------------
   Problem solved: overlays were positioned with a mix of vw, clamp(), fixed px
   and a viewport-based padding, while the artwork was sized as "100% of the
   section". Under browser zoom / other resolutions / scrollbars they drifted.

   Now: #sceneStage (fluid, aspect-ratio 1672:1287) holds ONE fixed design canvas
   #sceneCanvas (1672×1287 px = native size of the master background). The
   background image and every live overlay are children of that canvas and are
   positioned in DESIGN PIXELS (== pixels of planner-complete-background-v091.webp).
   js: --scene-scale = stageWidth / 1672  ->  transform:scale() on the canvas.
   All layout inside the canvas is therefore identical at every zoom/resolution.

   Anchors (measured on the artwork, design px):
     rail circles   centre x = 56.5 ; y = 230.5 · 308.5 · 392.5 · 475.5 · 555.5 · 639.5
     progress zone  x 330–1141 · y 84–136 (empty green band above the parchment)
     parchment      x ≈ 257–1203 · y ≈ 142–716
   ========================================================================== */

/* Mobile / narrow: wrappers are transparent, old compact layout is unchanged. */
.scene-stage,.scene-canvas{display:contents}

@media (min-width:901px){
  #screen-quiz.epic-quiz{
    display:block!important;
    padding:0!important;margin:0!important;
    min-height:0!important;height:auto!important;
    background:#06231b!important;background-image:none!important;
    overflow:hidden!important;
  }
  #screen-quiz.epic-quiz .scene-stage{
    display:block;position:relative;
    width:100%;aspect-ratio:1672 / 1287;
    overflow:hidden;
    --scene-scale:1;
  }
  #screen-quiz.epic-quiz .scene-canvas{
    display:block;position:absolute;left:0;top:0;
    width:1672px;height:1287px;
    transform-origin:0 0;
    transform:scale(var(--scene-scale));
    background:#06231b url('assets/planner-complete-background-v098.webp') 0 0/1672px 1287px no-repeat;
    /* Progress zone (design px) — own fixed zone inside the empty green band. */
    --pz-x:493px;--pz-y:84px;--pz-w:485px;--pz-h:52px;
  }

  /* ---- LEFT RAIL: one component; every row is centred on its artwork circle ---- */
  #screen-quiz .scene-canvas .epic-steps{
    position:absolute!important;left:0!important;top:0!important;
    width:250px!important;height:760px!important;
    margin:0!important;padding:0!important;
    background:transparent!important;border:0!important;box-shadow:none!important;
    overflow:visible!important;
  }
  #screen-quiz .scene-canvas .epic-steps-brand{
    position:absolute!important;left:0!important;top:0!important;
    width:0!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
  }
  #screen-quiz .scene-canvas .epic-step{
    --cy:230.5px;
    position:absolute!important;left:24.6px!important;top:calc(var(--cy) - 39.3px)!important;
    width:205px!important;height:78.6px!important;min-height:0!important;
    margin:0!important;padding:0 0 0 84.4px!important;
    display:flex!important;align-items:center!important;
  }
  #screen-quiz .scene-canvas .epic-steps-brand + .epic-step{--cy:230.5px}
  #screen-quiz .scene-canvas .epic-step:nth-child(3){--cy:308.5px}
  #screen-quiz .scene-canvas .epic-step:nth-child(4){--cy:392.5px}
  #screen-quiz .scene-canvas .epic-step:nth-child(5){--cy:475.5px}
  #screen-quiz .scene-canvas .epic-step:nth-child(6){--cy:555.5px}
  #screen-quiz .scene-canvas .epic-step:nth-child(7){--cy:639.5px}
  #screen-quiz .scene-canvas .epic-step:nth-child(8){--cy:723.5px}
  /* number sits dead-centre in the artwork circle (circle centre x = 56.5 → 31.9px inside the row) */
  #screen-quiz .scene-canvas .epic-step b,
  #screen-quiz .scene-canvas .epic-step.active b{
    position:absolute!important;left:31.9px!important;top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:48px!important;height:48px!important;
    display:grid!important;place-items:center!important;
    font-size:14.212px!important;line-height:1!important;
  }

  /* ---- PROGRESS: own zone above the parchment (inside the artwork's green band) ---- */
  #screen-quiz .scene-canvas .quiz-wrap{display:contents!important}
  #screen-quiz .scene-canvas .progress-row{
    position:absolute!important;z-index:20!important;
    left:var(--pz-x)!important;top:var(--pz-y)!important;
    width:var(--pz-w)!important;height:var(--pz-h)!important;
    margin:0!important;padding:0!important;
    display:grid!important;grid-template-columns:135.4px 1fr!important;
    align-items:center!important;column-gap:12.6px!important;
  }

  /* ---- PARCHMENT CONTENT: fixed rectangle on the parchment ---- */
  #screen-quiz .scene-canvas .question-shell{
    position:absolute!important;left:252.2px!important;top:65.9px!important;
    width:950.8px!important;height:592.7px!important;min-height:0!important;
    margin:0!important;box-sizing:border-box!important;
  }

  /* ---- RIGHT VISTA (quote only; the picture is in the master background) ---- */
  #screen-quiz .scene-canvas .epic-vista{
    position:absolute!important;left:1203px!important;top:65.9px!important;
    width:467px!important;height:729.8px!important;margin:0!important;
  }

  /* ---- VIEWPORT-INDEPENDENCE LOCK ----------------------------------------
     Older layers contain @media rules keyed to viewport width (<=1180px) and
     viewport HEIGHT (<=850px) that still reach elements inside the canvas.
     Inside the canvas nothing may depend on the viewport, so the reference
     (desktop) values are pinned here. Verified with test/audit.py. */
  #screen-quiz .scene-canvas .planner-chapter{padding-left:28px!important;padding-right:28px!important}
  #screen-quiz .scene-canvas .visual-answers .answer-scene{height:145px!important;flex-basis:145px!important}
  #screen-quiz .scene-canvas .visual-answers .scene-mark{top:101px!important}
  #screen-quiz .scene-canvas .question-quote{margin-top:10px!important}

  /* ---- ROUTE RIBBON: baked into the background; empty, non-interactive placeholder ---- */
  #screen-quiz .scene-canvas .epic-route-ribbon{
    position:absolute!important;left:0!important;top:730px!important;
    width:1672px!important;height:557px!important;margin:0!important;
    background:none!important;pointer-events:none!important;
  }
}


/* ==========================================================================
   v0.94 — progress bar zone + answer cards (design px inside #sceneCanvas)
   ========================================================================== */
@media (min-width:901px){
  /* ---- PROGRESS: larger, clearer zone; pilgrim icon is no longer clipped ----
     Root cause v0.93: the icon is appended INSIDE .progress, which had
     overflow:hidden + height 11px, so only a thin slice of the icon showed. */
  #screen-quiz.epic-quiz .scene-canvas{--pz-x:392px;--pz-y:86px;--pz-w:700px;--pz-h:48px}
  #screen-quiz .scene-canvas .progress-row{
    grid-template-columns:164px 1fr!important;column-gap:22px!important;
    overflow:visible!important;
  }
  #screen-quiz .scene-canvas .question-meta{padding-left:0!important}
  #screen-quiz .scene-canvas .question-meta span{font-size:13.5px!important;letter-spacing:.14em!important}
  #screen-quiz .scene-canvas .question-meta strong{font-size:16px!important}
  #screen-quiz .scene-canvas .progress-track{overflow:visible!important;margin-right:26px!important;width:auto!important}
  #screen-quiz .scene-canvas .progress{
    height:16px!important;min-height:16px!important;overflow:visible!important;
    border-width:1.5px!important;
    background:rgba(3,42,34,.9)!important;
    box-shadow:inset 0 1px 4px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.3)!important;
  }
  #screen-quiz .scene-canvas .progress>div{height:100%!important;border-radius:999px!important}
  #screen-quiz .scene-canvas .pilgrim-progress-icon{
    width:48px!important;height:48px!important;font-size:0!important;
    top:50%!important;transform:translate(-50%,-50%)!important;
    display:grid!important;place-items:center!important;overflow:visible!important;
    color:#f6d776!important;border-radius:50%!important;
    background:none!important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 3px rgba(0,0,0,.55))!important;
  }
  #screen-quiz .scene-canvas .pilgrim-progress-icon svg{width:30px!important;height:36px!important;display:block!important;overflow:visible!important}

  /* ---- ANSWER CARDS: height follows content, never clipped ----
     Root cause: rows were fixed at 212px while content needs ~224px at this
     image height (title 2 lines + description 3 lines). The image part is
     slightly lower (145 → 118px) so the complete card still fits above the
     Back/Next row and inside the parchment border on every question. */
  #screen-quiz .scene-canvas #answers{
    grid-template-rows:none!important;grid-auto-rows:auto!important;align-items:stretch!important;
  }
  #screen-quiz .scene-canvas #answers .answer{
    height:auto!important;min-height:0!important;max-height:none!important;
  }
  #screen-quiz .scene-canvas .visual-answers .answer-scene{height:118px!important;flex-basis:118px!important}
  #screen-quiz .scene-canvas .visual-answers .scene-mark{top:74px!important}
  #screen-quiz .scene-canvas .visual-answers .answer-copy{
    height:auto!important;min-height:93.6px!important;overflow:visible!important;
    padding-bottom:12px!important;
  }
  #screen-quiz .scene-canvas .multi-hint{margin-top:6px!important}
  #screen-quiz .scene-canvas .quiz-nav{margin-top:8px!important}
}

/* v0.94b — the (transparent) content container must always contain the
   Back/Next row: it ended at y=659 while hint questions need ~693. */
@media (min-width:901px){
  #screen-quiz .scene-canvas .question-shell{height:640px!important;overflow:visible!important}
  #screen-quiz .scene-canvas .multi-hint{margin-top:4px!important}
  #screen-quiz .scene-canvas .quiz-nav{margin-top:7px!important}
}


/* ==========================================================================
   v0.95 — screens are separate pages
   The quiz scene was forced visible (display:grid/block !important) even when
   it was not the active screen, so it rendered under the home page.
   Only the active screen may be displayed.
   ========================================================================== */
#screen-quiz.epic-quiz:not(.active){display:none!important}

/* v0.96 — "QUESTION 14 OF 14" must never wrap onto two lines */
@media (min-width:901px){
  #screen-quiz .scene-canvas .progress-row{grid-template-columns:200px 1fr!important;column-gap:18px!important}
  #screen-quiz .scene-canvas .question-meta span,
  #screen-quiz .scene-canvas .question-meta strong{white-space:nowrap!important}
}
/* v1.00 — homepage rebuilt to match the approved fantasy/parchment direction */
.home-v099{position:relative!important;min-height:100vh!important;padding:0!important;overflow:hidden!important;background:#071b15!important;color:#24170c}
.home-v099 .home-forest{position:absolute;inset:0;background:url('assets/hero-camino.webp') center/cover no-repeat;filter:saturate(.9) brightness(.72);transform:scale(1.02)}
.home-v099:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,18,13,.86) 0,rgba(2,18,13,.24) 45%,rgba(2,18,13,.02) 75%),linear-gradient(180deg,rgba(3,20,15,.2),rgba(3,20,15,.1) 65%,rgba(3,20,15,.75))}
.home-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(650px,1.42fr) minmax(390px,.9fr);width:min(1440px,94vw);margin:0 auto;padding-top:132px;min-height:650px}
.home-parchment{position:relative;align-self:start;margin:18px 0 0 12px;padding:52px 70px 42px;text-align:center;background:url('assets/parchment-v084.webp') center/100% 100% no-repeat;min-height:500px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.32))}
.home-parchment:before{content:"";position:absolute;inset:-18px -15px;z-index:-1;background:radial-gradient(ellipse at 4% 10%,rgba(38,81,36,.55),transparent 19%),radial-gradient(ellipse at 95% 7%,rgba(42,83,38,.5),transparent 18%)}
.home-shell{font:50px Georgia;color:#9a692c;line-height:.7;margin-bottom:15px}.home-kicker{font:600 12px Inter,sans-serif;letter-spacing:.28em;color:#513719;margin-bottom:4px}
.home-parchment h1{font:500 clamp(48px,4.5vw,74px)/.98 'Cormorant Garamond',Georgia,serif;margin:0;color:#15100b;letter-spacing:-.025em}.home-parchment h2{font:500 25px/1.2 'Cormorant Garamond',Georgia,serif;color:#69451f;margin:10px 0 18px}.home-parchment>p{font:500 19px/1.35 'Cormorant Garamond',Georgia,serif;max-width:680px;margin:0 auto 25px;color:#2d2116}.home-start{font:600 17px 'Cormorant Garamond',Georgia,serif;padding:15px 30px;min-width:360px;box-shadow:0 7px 16px rgba(38,27,10,.25)}.home-load{display:block;border:0;background:transparent;margin:10px auto 0;color:#70512b;font:600 11px Inter,sans-serif;text-decoration:underline;cursor:pointer}
.home-benefits{display:grid;grid-template-columns:repeat(3,1fr);margin:25px auto 0;max-width:680px;border-top:1px solid rgba(101,69,31,.28);padding-top:16px}.home-benefits>div{display:flex;gap:10px;align-items:center;justify-content:center;border-right:1px solid rgba(101,69,31,.22)}.home-benefits>div:last-child{border:0}.home-benefits b{font:28px Georgia;color:#8d6229}.home-benefits span,.home-benefits strong,.home-benefits small{display:block;text-align:left}.home-benefits strong{font:600 14px 'Cormorant Garamond',Georgia,serif}.home-benefits small{font:11px 'Cormorant Garamond',Georgia,serif;color:#644c31}
.home-vista{position:relative;min-height:560px}.home-vista blockquote{position:absolute;right:4%;top:75px;margin:0;text-align:center;font:italic 27px/1.12 'Cormorant Garamond',Georgia,serif;color:#4c301b;text-shadow:0 1px rgba(255,238,193,.4)}.home-vista cite{display:block;margin-top:10px;font:600 8px Inter,sans-serif;letter-spacing:.15em}
.home-routes{position:relative;z-index:3;width:100%;margin-top:-6px;padding:16px 3.5vw 26px;background:linear-gradient(180deg,rgba(6,38,28,.92),rgba(4,28,21,.98));border-top:1px solid #b68839;box-shadow:0 -15px 30px rgba(0,0,0,.2)}.home-routes-title{text-align:center;color:#e6c473;margin-bottom:12px}.home-routes-title small{font:600 9px Inter,sans-serif;letter-spacing:.23em}.home-routes-title h2{font:500 34px/1 'Cormorant Garamond',Georgia,serif;margin:5px 0 0}.home-route-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;max-width:1510px;margin:auto}.home-route-grid button{position:relative;padding:0 0 11px;border:1px solid #b98c3e;background:#073529;color:#f4dda2;overflow:hidden;cursor:pointer;min-width:0;box-shadow:0 7px 18px rgba(0,0,0,.2)}.home-route-grid button:hover{transform:translateY(-3px);border-color:#e0bd6d}.home-route-grid img{width:100%;height:112px;display:block;object-fit:cover;border-bottom:1px solid #b98c3e}.home-route-grid span{display:block;padding-top:8px;font:600 17px/1.05 'Cormorant Garamond',Georgia,serif}
@media(max-width:1100px){.home-grid{grid-template-columns:1fr;width:96vw;padding-top:112px}.home-parchment{margin:0 auto;width:min(850px,96%)}.home-vista{display:none}.home-route-grid{grid-template-columns:repeat(4,1fr)}.home-v099{overflow:auto!important}}
@media(max-width:700px){.home-parchment{padding:44px 35px 38px;background-size:cover}.home-parchment h1{font-size:46px}.home-start{min-width:0;width:100%}.home-benefits{grid-template-columns:1fr;gap:10px}.home-benefits>div{border-right:0}.home-route-grid{grid-template-columns:repeat(2,1fr)}}

/* v1.00 — homepage rebuilt to follow the approved mockup as one responsive composition. */
.home-v100{position:relative!important;display:block!important;padding:0!important;margin:0!important;background:#061c15!important;overflow:hidden!important;min-height:0!important}
.home-v100-stage{position:relative;width:100%;margin:0 auto;line-height:0;background:#061c15}
.home-v100-art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.home-v100-hotspot{position:absolute;border:0;background:transparent;cursor:pointer;z-index:4;padding:0;margin:0;border-radius:8px}
.home-v100-hotspot:hover{background:rgba(255,220,120,.06);box-shadow:0 0 0 1px rgba(220,178,83,.28) inset}
/* coordinates are percentages of the 1536x944 homepage artwork */
.home-v100-start{left:28.9%;top:41.7%;width:24.2%;height:6.4%}
.home-v100-load{position:absolute;left:39%;top:48.1%;z-index:5;border:0;background:rgba(7,47,36,.86);color:#efd790;padding:5px 10px;border-radius:3px;font:600 10px/1 Inter,sans-serif;cursor:pointer;opacity:.0;transition:opacity .2s}
.home-v100-stage:hover .home-v100-load{opacity:.78}
.route-hotspot{top:73.1%;height:23.2%;width:12.1%}.route-hotspot.r1{left:4.3%}.route-hotspot.r2{left:17.5%}.route-hotspot.r3{left:30.6%}.route-hotspot.r4{left:43.8%}.route-hotspot.r5{left:56.9%}.route-hotspot.r6{left:70.1%}.route-hotspot.r7{left:83.3%}
@media(max-width:900px){.home-v100{overflow:auto!important}.home-v100-stage{min-width:900px}.home-v100-load{display:none}}
/* v1.01 homepage separation */
body:has(#screen-start.home-v100) #screen-start.home-v100{display:block!important}
body:has(#screen-start.home-v100) .home-v100-stage{aspect-ratio:1536/690;overflow:hidden}
body:has(#screen-start.home-v100) .home-v100-art{width:100%;height:auto}
body:has(#screen-start.home-v100) .home-v100-start{display:block}

/* v1.02 — homepage CTA alignment + redundant header CTA removed.
   The homepage artwork is cropped to 1536x690, so hotspot Y coordinates
   are relative to the visible 690px scene, not the original 944px artwork. */
body:has(#screen-start.home-v100) .home-v100-start{left:28.6%;top:58.7%;width:24.6%;height:9.2%;z-index:20;display:block!important;pointer-events:auto!important}
body:has(#screen-start.home-v100) .home-v100-start:hover{background:rgba(255,220,120,.035);box-shadow:0 0 0 2px rgba(231,191,91,.22) inset}

/* v1.04 — screen routing fix.
   The homepage must disappear as soon as the planner is started. */
body:has(#screen-start.home-v100) #screen-start.home-v100:not(.active){display:none!important}
body:has(#screen-start.home-v100) #screen-start.home-v100.active{display:block!important}

/* v1.05 — selected answer state: unmistakable deep Bordeaux */
#screen-quiz .visual-answers .answer.selected,
#screen-quiz .answers .answer.selected {
  background: linear-gradient(180deg, #681f2b 0%, #4b1520 100%) !important;
  border-color: #d2a25c !important;
  box-shadow: 0 0 0 3px #7a2332, 0 0 0 5px rgba(225,184,101,.92), 0 12px 28px rgba(55,10,18,.34) !important;
}
#screen-quiz .visual-answers .answer.selected .answer-copy {
  background: linear-gradient(180deg, #681f2b 0%, #4b1520 100%) !important;
}
#screen-quiz .answer.selected strong { color:#fff0c4 !important; }
#screen-quiz .answer.selected small { color:#f7e5c0 !important; }
#screen-quiz .answer.selected .select-tick {
  background:#f1d58a !important;
  color:#4b1520 !important;
  border-color:#fff0c4 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.28) !important;
}

/* v1.06 — cleaner answer cards: remove A/B/C/D badges and selection tick */
#screen-quiz .visual-answers .badge,
#screen-quiz .visual-answers .select-tick,
#screen-quiz .answers .badge,
#screen-quiz .answers .select-tick {
  display:none !important;
}
\n\n/* ============================================================
   v1.07 — CLEAN QUESTION HEADER + STRONG SIDEBAR PROGRESSION
   ============================================================ */
/* The decorative question glyph adds visual noise; keep the title aligned. */
#screen-quiz .question-icon{display:none!important;}

/* Make the chapter numbers substantially clearer while preserving the fixed
   design-canvas coordinates that keep them locked to the artwork circles. */
#screen-quiz .scene-canvas .epic-step b,
#screen-quiz .scene-canvas .epic-step.active b{
  font-size:22px!important;
  font-weight:700!important;
  color:#f4d77f!important;
  text-shadow:0 1px 4px rgba(0,0,0,.9)!important;
}

/* Current chapter: unmistakable burgundy marker, matching selected cards. */
#screen-quiz .scene-canvas .epic-step.active b{
  background:linear-gradient(180deg,#7b2631 0%,#581722 100%)!important;
  border:2px solid #e0b65b!important;
  box-shadow:0 0 0 3px rgba(79,12,23,.45),0 0 20px rgba(117,27,42,.65),inset 0 0 12px rgba(0,0,0,.28)!important;
  color:#ffe6a0!important;
}
#screen-quiz .scene-canvas .epic-step.active span{
  color:#f0c76c!important;
  text-shadow:0 1px 5px rgba(0,0,0,.9)!important;
}
#screen-quiz .scene-canvas .epic-step.active span small{
  color:#ead8b1!important;
}

/* v1.10 — make multi-select questions unmistakable */
#screen-quiz .scene-canvas .multi-hint{
  display:flex!important;
  width:max-content!important;
  max-width:760px!important;
  margin:8px auto 12px!important;
  padding:7px 16px!important;
  border:1px solid #b88a43!important;
  border-radius:999px!important;
  background:#6b2430!important;
  color:#fff1c8!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  text-shadow:none!important;
  box-shadow:0 3px 10px rgba(55,20,25,.18)!important;
  align-items:center!important;
  justify-content:center!important;
}
#screen-quiz .scene-canvas .multi-hint.warn{
  background:#7b2028!important;
  color:#fff7d8!important;
}

/* v1.11 — save-before-review dialog */
.save-review-dialog{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(3,15,12,.78);backdrop-filter:blur(5px)}
.save-review-dialog.open{display:flex}.save-review-card{width:min(560px,92vw);padding:34px 38px 30px;text-align:center;background:#f0dcae;border:2px solid #b88a37;box-shadow:0 20px 70px #000;border-radius:4px;color:#1d2118;font-family:'Cormorant Garamond',serif;position:relative}.save-review-card:before{content:'✦';display:block;font-size:27px;color:#7b2634;margin-bottom:8px}.save-review-card h2{font-size:34px;margin:0 0 10px}.save-review-card p{font-family:Inter,sans-serif;font-size:14px;line-height:1.6;margin:0 auto 24px;max-width:450px}.save-review-actions{display:flex;gap:14px;justify-content:center}.save-review-actions button{min-width:150px;padding:13px 22px;border-radius:3px;font-weight:600;cursor:pointer}.save-review-yes{background:#6f2632;color:#f7e7b8;border:1px solid #d5ae5b}.save-review-no{background:#123c32;color:#f7e7b8;border:1px solid #d5ae5b}
/* homepage previous-answer control */
.home-v100-upload{position:absolute;left:31.1%;top:76.4%;width:22.8%;height:5.3%;z-index:4;border:1px solid #d3a74f;background:rgba(7,48,39,.94);color:#f4d98f;font-family:'Cormorant Garamond',serif;font-size:clamp(10px,1.15vw,18px);font-weight:600;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.3)}
.home-v100-upload:hover{background:#6f2632}


/* v1.12 — move previous-answer upload into top navigation */
.home-v100-upload{display:none!important;}
.top-upload-answers{
  appearance:none;
  border:1px solid #d5ae5b;
  background:linear-gradient(180deg,#7b2631 0%,#581722 100%);
  color:#ffe7a4;
  font-family:'Cormorant Garamond',serif;
  font-size:16px;
  font-weight:600;
  line-height:1;
  letter-spacing:.01em;
  padding:12px 18px;
  border-radius:4px;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(45,8,15,.28),inset 0 0 0 1px rgba(255,222,139,.08);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.top-upload-answers:hover{
  background:linear-gradient(180deg,#8c2c39 0%,#681d29 100%);
  box-shadow:0 5px 16px rgba(45,8,15,.38),0 0 0 1px rgba(213,174,91,.2);
  transform:translateY(-1px);
}
.top-upload-answers:active{transform:translateY(0);}
@media(max-width:900px){
  .top-upload-answers{font-size:14px;padding:10px 12px;}
}

/* v1.14 — calm parchment review page */
#screen-review.review-parchment-screen{min-height:100vh;padding:118px 0 42px;background:#0b2119;position:relative;overflow:hidden}
#screen-review.review-parchment-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,18,13,.45),rgba(4,18,13,.08) 50%,rgba(4,18,13,.35)),url('assets/hero-camino.webp') center 54%/cover no-repeat;filter:saturate(.82) brightness(.72);opacity:.72}
.review-scene{position:relative;z-index:1;width:min(1180px,88vw);margin:0 auto;padding:22px 0 32px}
.review-paper{position:relative;padding:58px 62px 42px;color:#2d2418;background:linear-gradient(rgba(244,224,178,.94),rgba(239,215,164,.96)),radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 35%);border:1px solid #9b6c2e;box-shadow:0 24px 70px rgba(0,0,0,.35),inset 0 0 70px rgba(106,63,18,.13);clip-path:polygon(.8% 1.2%,8% .3%,16% 1%,25% .2%,34% .8%,44% .2%,54% .9%,64% .25%,74% .8%,84% .2%,93% .8%,99.2% 1.4%,99.7% 12%,99.1% 25%,99.8% 40%,99.2% 55%,99.7% 70%,99% 85%,99.4% 98.5%,90% 99.3%,80% 98.8%,70% 99.5%,60% 98.9%,50% 99.5%,40% 98.8%,30% 99.4%,20% 98.9%,10% 99.5%,.7% 98.6%,.2% 84%,.7% 70%,.2% 55%,.8% 40%,.2% 24%)}
.review-paper:before{content:"";position:absolute;inset:18px;border:1px solid rgba(90,53,18,.35);pointer-events:none}
.review-paper:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:radial-gradient(#69441f .55px,transparent .7px);background-size:11px 13px;mix-blend-mode:multiply}
.review-paper-ornament{position:absolute;top:15px;left:50%;transform:translateX(-50%);font-size:25px;color:#80511d;z-index:2}
#screen-review .review-intro{position:relative;z-index:2;max-width:none;margin:0 auto 22px;text-align:center}
#screen-review .review-intro h1{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:48px;line-height:1;color:#2c2116;font-weight:600}
#screen-review .review-intro p{margin:9px auto 0;max-width:760px;color:#5e4930;font:16px/1.4 "Cormorant Garamond",Georgia,serif}
#screen-review .review-answers{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:7px 24px}
#screen-review .review-answer-row{display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:center;min-height:58px;padding:7px 10px;border:1px solid rgba(114,76,32,.26)!important;border-radius:7px;background:rgba(255,246,219,.38);box-shadow:none}
#screen-review .review-number{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#123b2e;color:#f0cf76;font:700 14px "Cormorant Garamond",Georgia,serif}
#screen-review .review-answer-copy small{display:none}
#screen-review .review-answer-copy strong{display:block;color:#3a2a1b;font:600 16px/1.05 "Cormorant Garamond",Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-review .review-answer-copy p{margin:4px 0 0;color:#6b5133;font:12px/1.2 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-review .review-edit{min-width:62px;padding:7px 11px;border:1px solid rgba(104,70,30,.35);border-radius:5px;background:rgba(255,248,226,.38);color:#51391f;font:600 11px "Cormorant Garamond",Georgia,serif;cursor:pointer}
#screen-review .review-edit:before{content:"✎ ";font-family:Georgia,serif}
#screen-review .review-edit:hover{background:#6d2028;border-color:#6d2028;color:#f7df9d}
#screen-review .review-actions{position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;margin:18px 20px 0}
#screen-review .review-actions button{min-width:155px;min-height:44px;border-radius:4px}
#screen-review .review-actions .ghost{background:#123b2e;color:#f4d78d;border:1px solid #9e7834}
#screen-review .review-actions .review-top3{min-width:210px;background:#6d2028!important;color:#f8dda0!important;border:1px solid #b68b3d!important;box-shadow:0 7px 18px rgba(80,18,25,.18)}
@media(max-width:900px){#screen-review.review-parchment-screen{padding-top:100px}.review-scene{width:94vw}.review-paper{padding:50px 24px 30px}#screen-review .review-answers{grid-template-columns:1fr}#screen-review .review-answer-copy strong,#screen-review .review-answer-copy p{white-space:normal}#screen-review .review-actions{margin:18px 0 0}}

/* v1.15 — review screen visually integrated with the approved homepage/quiz world */
#screen-review.review-parchment-screen{
  min-height:100vh!important;
  padding:112px 0 48px!important;
  background:#071d16!important;
  position:relative!important;
  overflow:hidden!important;
}
#screen-review.review-parchment-screen:before{
  content:""!important;position:absolute!important;inset:0!important;
  background:url('assets/homepage-scene-v100.webp') center top/cover no-repeat!important;
  filter:none!important;opacity:1!important;transform:scale(1.015);transform-origin:center top;
}
#screen-review.review-parchment-screen:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,24,18,.22),transparent 24%,transparent 77%,rgba(4,24,18,.12));
}
#screen-review .review-scene{position:relative;z-index:2;width:min(1250px,86vw)!important;margin:0 auto!important;padding:18px 0 26px!important}
#screen-review .review-paper{
  position:relative!important;padding:60px 68px 48px!important;color:#2c2116!important;
  background:url('assets/parchment-v084.webp') center/100% 100% no-repeat!important;
  border:0!important;box-shadow:none!important;clip-path:none!important;
  filter:drop-shadow(0 18px 25px rgba(0,0,0,.28));
}
#screen-review .review-paper:before{
  content:""!important;position:absolute!important;inset:-30px -34px!important;pointer-events:none!important;border:0!important;z-index:-1!important;
  background:
    radial-gradient(ellipse at 2% 18%,rgba(20,74,43,.50),transparent 15%),
    radial-gradient(ellipse at 99% 15%,rgba(20,74,43,.45),transparent 15%),
    radial-gradient(ellipse at 7% 96%,rgba(20,74,43,.38),transparent 14%),
    radial-gradient(ellipse at 95% 96%,rgba(20,74,43,.36),transparent 14%);
}
#screen-review .review-paper:after{display:none!important}
#screen-review .review-paper-ornament{top:18px!important;font-size:30px!important;color:#8d6229!important}
#screen-review .review-intro{margin:0 auto 25px!important}
#screen-review .review-intro:before{content:"";display:block;width:90px;height:1px;margin:0 auto 13px;background:linear-gradient(90deg,transparent,#8d6229,transparent)}
#screen-review .review-intro h1{font-size:54px!important;color:#20160e!important;font-weight:600!important;text-shadow:none!important}
#screen-review .review-intro p{font-size:17px!important;color:#604525!important;max-width:760px!important}
#screen-review .review-answers{gap:8px 28px!important}
#screen-review .review-answer-row{
  min-height:62px!important;padding:8px 11px!important;
  border:1px solid rgba(120,78,31,.34)!important;border-radius:5px!important;
  background:rgba(255,245,211,.52)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.34)!important;
}
#screen-review .review-answer-row:hover{background:rgba(255,244,207,.78)!important;border-color:rgba(125,76,27,.55)!important}
#screen-review .review-number{width:34px!important;height:34px!important;background:#0c3a2c!important;border:1px solid #a77c31!important;color:#f1cf76!important;font-size:15px!important;box-shadow:0 2px 6px rgba(0,0,0,.15)}
#screen-review .review-answer-copy strong{font-size:17px!important;color:#302015!important}
#screen-review .review-answer-copy p{font-size:12px!important;color:#62482c!important}
#screen-review .review-edit{min-width:76px!important;padding:8px 12px!important;border:1px solid #9f7839!important;background:rgba(255,246,218,.56)!important;color:#4e351c!important;font-size:12px!important}
#screen-review .review-edit:hover{background:#6f2632!important;color:#ffe7a4!important;border-color:#c59b4b!important}
#screen-review .review-actions{margin:22px 8px 0!important}
#screen-review .review-actions .ghost{background:#0b3c2e!important;color:#f5d98b!important;border:1px solid #b3873d!important}
#screen-review .review-actions .review-top3{background:linear-gradient(180deg,#7b2631,#581722)!important;color:#ffe6a0!important;border:1px solid #d0a44e!important;box-shadow:0 7px 18px rgba(72,17,24,.25)!important}
@media(max-width:900px){#screen-review .review-scene{width:96vw!important}#screen-review .review-paper{padding:52px 28px 36px!important;background-size:cover!important}}

/* v1.16 — review heading integrated into the parchment (approved direction) */
#screen-review .review-intro{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:8px 24px 18px!important;
  border-bottom:1px solid rgba(123,82,34,.24)!important;
}
#screen-review .review-intro:before{
  content:""!important;
  display:block!important;
  width:116px!important;
  height:1px!important;
  margin:0 auto 16px!important;
  background:linear-gradient(90deg,transparent,rgba(132,87,34,.75),transparent)!important;
}
#screen-review .review-intro:after{
  content:"◆"!important;
  display:block!important;
  width:max-content!important;
  margin:12px auto -25px!important;
  padding:0 12px!important;
  background:#efd9a8!important;
  color:#8d6229!important;
  font-size:9px!important;
  line-height:1!important;
}
#screen-review .review-intro h1{
  color:#16362a!important;
  text-shadow:0 1px rgba(255,248,220,.65)!important;
}
#screen-review .review-intro p{
  color:#684a29!important;
  text-shadow:none!important;
}

/* v1.17 — clean review surround: remove homepage route-card bleed at the sides */
#screen-review.review-parchment-screen:before{
  background:
    linear-gradient(90deg,rgba(3,20,15,.28),rgba(3,20,15,.04) 28%,rgba(3,20,15,.04) 72%,rgba(3,20,15,.28)),
    url('assets/planner-complete-background-v098.webp') center top/cover no-repeat!important;
  transform:none!important;
}
#screen-review.review-parchment-screen:after{
  background:linear-gradient(90deg,rgba(4,24,18,.16),transparent 22%,transparent 78%,rgba(4,24,18,.16))!important;
}

/* v1.18 — approved results-page redesign only. Homepage + quiz intentionally untouched. */
#screen-result.result-screen{
  position:relative; isolation:isolate; overflow:hidden;
  padding:118px 4vw 92px!important;
  background:#0b241b!important;
}
#screen-result.result-screen:before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(90deg,rgba(3,18,13,.14),rgba(3,18,13,.02) 24%,rgba(3,18,13,.02) 76%,rgba(3,18,13,.18)),
    url('assets/planner-complete-background-v098.webp') center top/cover fixed no-repeat;
  filter:saturate(.92) brightness(.88);
}
#screen-result.result-screen:after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,25,18,.10),rgba(5,25,18,.24));
}
#screen-result .result-wrap{
  position:relative; max-width:1370px!important; margin:0 auto!important;
  padding:88px 92px 72px!important;
  color:#332417;
  background:url('assets/parchment-v084.webp') center top/100% 100% no-repeat!important;
  filter:drop-shadow(0 28px 38px rgba(0,0,0,.34));
}
#screen-result .result-intro{position:relative;text-align:center!important;margin:0 auto 28px!important}
#screen-result .result-intro:before{
  content:"";display:block;width:92px;height:1px;margin:0 auto 16px;
  background:linear-gradient(90deg,transparent,#9b6b2e,transparent)
}
#screen-result .result-intro .eyebrow{color:#6e4c27!important;letter-spacing:.28em!important;font-weight:700}
#screen-result .result-intro h2{margin:8px 0 10px!important;color:#20170f!important;text-shadow:none!important;font-size:clamp(48px,5vw,72px)!important}
#screen-result .result-intro h2 em{color:#8b5b25!important;font-style:normal!important}
#screen-result .result-lead{max-width:760px!important;margin:0 auto!important;color:#60482e!important;font-size:19px!important}

#screen-result .profile-card{
  max-width:1050px!important;margin:28px auto 38px!important;padding:24px 28px!important;
  grid-template-columns:56px 1fr!important;gap:20px!important;
  border:1px solid #b88a3e!important;border-radius:12px!important;
  background:linear-gradient(110deg,#07372b,#0d4a39 58%,#123d31)!important;
  box-shadow:0 14px 26px rgba(55,35,12,.20)!important;color:#f0e3bf!important;
}
#screen-result .profile-compass{width:52px!important;height:52px!important;color:#f0ca6e!important;border-color:#cda450!important;background:rgba(0,0,0,.12)!important;font-size:22px!important}
#screen-result .profile-copy>small{color:#e1b85c!important;font-size:8px!important}
#screen-result .profile-card strong{color:#f5e8c6!important;font-size:30px!important}
#screen-result .profile-card p{color:#d7d5c5!important;font-size:13px!important}
#screen-result .profile-tags span{border-color:#b99347!important;color:#efd27f!important;background:rgba(0,0,0,.10)!important}

#screen-result .top-comparison{margin:0!important}
#screen-result .decision-comparison{
  padding:28px 30px 32px!important;border:1px solid rgba(132,86,31,.34)!important;border-radius:4px!important;
  background:rgba(255,244,210,.34)!important;box-shadow:inset 0 0 34px rgba(125,79,28,.06)!important
}
#screen-result .comparison-heading{align-items:center!important;margin-bottom:22px!important}
#screen-result .comparison-heading .section-kicker{color:#745025!important}
#screen-result .comparison-heading h3{color:#24180f!important;font-size:38px!important}
#screen-result .comparison-heading p{color:#624a31!important;font-size:12px!important}
#screen-result .winner-gap{border-color:rgba(124,82,31,.38)!important;background:rgba(255,247,220,.48)!important;color:#62451f!important}
#screen-result .winner-gap strong{color:#7d5120!important}

#screen-result .comparison-grid{gap:14px!important}
#screen-result .comparison-card{
  min-height:0!important;padding:0 0 16px!important;overflow:hidden!important;
  border:1px solid #a77c35!important;border-radius:10px!important;
  background:linear-gradient(180deg,#0b3b2e,#08291f)!important;
  box-shadow:0 10px 22px rgba(68,43,16,.18)!important;color:#f3e5c1!important
}
#screen-result .comparison-card:first-child{transform:none!important;border-color:#c69a47!important;box-shadow:0 12px 26px rgba(68,43,16,.24)!important}
#screen-result .comparison-card:before{display:none!important}
#screen-result .comparison-rank,#screen-result .comparison-title-row,#screen-result .comparison-score-row-compact,#screen-result .comparison-insight,#screen-result .comparison-open{margin-left:16px!important;margin-right:16px!important}
#screen-result .comparison-rank{padding-top:14px!important;color:#e3c16d!important}
#screen-result .comparison-rank b{background:#e6c875!important;color:#17352a!important;border-radius:999px!important;padding:4px 8px!important}
#screen-result .comparison-rank .comparison-alt{background:rgba(255,255,255,.05)!important;color:#c8b37b!important}
#screen-result .comparison-title-row{margin-top:7px!important;margin-bottom:10px!important}
#screen-result .comparison-card h4{color:#fff0c9!important;font-size:25px!important}
#screen-result .comparison-match b{color:#f1cc6f!important}
#screen-result .comparison-route-photo{height:118px;margin:0 0 10px;background:center/cover no-repeat;border-top:1px solid rgba(218,180,91,.25);border-bottom:1px solid rgba(218,180,91,.35);box-shadow:inset 0 -26px 32px rgba(3,20,15,.20)}
#screen-result .comparison-card[data-route="primitivo"] .comparison-route-photo{background-image:url('assets/hero-primitivo-v052.webp')}
#screen-result .comparison-card[data-route="norte"] .comparison-route-photo{background-image:url('assets/hero-norte-v052.webp')}
#screen-result .comparison-card[data-route="invierno"] .comparison-route-photo{background-image:url('assets/hero-invierno-v052.webp')}
#screen-result .comparison-card[data-route="frances"] .comparison-route-photo{background-image:url('assets/hero-frances-v052.webp')}
#screen-result .comparison-card[data-route="portugues"] .comparison-route-photo{background-image:url('assets/hero-portugues-v052.webp')}
#screen-result .comparison-card[data-route="ingles"] .comparison-route-photo{background-image:url('assets/hero-ingles-v052.webp')}
#screen-result .comparison-score-row-compact span{background:rgba(0,0,0,.17)!important;border-color:rgba(211,177,93,.24)!important;color:#f1e3bf!important}
#screen-result .comparison-score-row-compact small,#screen-result .comparison-best small,#screen-result .comparison-tradeoff small{color:#c7a85f!important}
#screen-result .comparison-best strong{color:#f0cf7d!important}
#screen-result .comparison-tradeoff p{color:#cdd2c7!important}
#screen-result .comparison-open{width:calc(100% - 32px)!important;color:#f1d27a!important;border-color:#b68d43!important;background:rgba(2,22,16,.24)!important}
#screen-result .comparison-footnote{color:#72583b!important}

#screen-result .personal-explanation{margin-top:26px!important;border:1px solid rgba(128,84,31,.35)!important;background:rgba(255,245,216,.38)!important;color:#3e2b1c!important;box-shadow:inset 0 0 28px rgba(119,76,25,.05)!important}
#screen-result .personal-explanation .section-kicker,#screen-result .personal-explanation-block small{color:#765024!important}
#screen-result .personal-explanation-head h3{color:#261a11!important}
#screen-result .personal-explanation-head h3 em{color:#875a26!important}
#screen-result .personal-explanation-head p,#screen-result .personal-explanation-block p{color:#654b31!important}
#screen-result .personal-reason-tags span{color:#65461f!important;border-color:rgba(129,86,34,.45)!important;background:rgba(255,249,225,.35)!important}
#screen-result .personal-explanation-block{border-color:rgba(130,87,33,.30)!important;background:rgba(255,248,224,.25)!important}
#screen-result .result-actions .ghost{background:#0a3a2d!important;color:#f0d483!important;border-color:#b78a3d!important}
#screen-result .result-actions .primary{background:linear-gradient(180deg,#792b35,#5a1822)!important;color:#ffe6a0!important;border-color:#d0a44e!important}
#screen-result .detail-panel{background:rgba(255,245,216,.42)!important;color:#49341f!important;border-color:rgba(130,87,33,.35)!important}

@media(max-width:900px){
 #screen-result.result-screen{padding:92px 10px 50px!important}
 #screen-result .result-wrap{padding:68px 38px 54px!important;background-size:cover!important}
 #screen-result .comparison-grid{grid-template-columns:1fr!important}
}

/* v1.19 — standalone results page + readability pass. Homepage and quiz untouched. */
body.standalone-results-page #screen-result.result-screen{
  min-height:calc(100vh - 108px)!important;
  padding:54px 0 80px!important;
  overflow:visible!important;
  background:
    linear-gradient(180deg,rgba(4,25,18,.12),rgba(4,25,18,.28)),
    url('assets/camino-scenic-surround-v017.webp') center top/cover fixed no-repeat!important;
}
body.standalone-results-page #screen-result.result-screen:before,
body.standalone-results-page #screen-result.result-screen:after{display:none!important}
body.standalone-results-page #screen-result .result-wrap{
  width:min(1500px,96vw)!important;max-width:none!important;min-height:calc(100vh - 190px);
  margin:0 auto!important;padding:72px 86px 76px!important;
  background:
    linear-gradient(rgba(246,226,180,.92),rgba(238,210,154,.94)),
    url('assets/parchment-v084.webp') center/cover no-repeat!important;
  border:1px solid rgba(118,75,28,.55)!important;border-radius:3px!important;
  box-shadow:0 24px 54px rgba(0,0,0,.32), inset 0 0 80px rgba(105,64,18,.10)!important;
  filter:none!important;
}
body.standalone-results-page #screen-result .result-intro h2{font-size:clamp(58px,5.2vw,82px)!important;line-height:1.02!important}
body.standalone-results-page #screen-result .result-intro .eyebrow{font-size:14px!important}
body.standalone-results-page #screen-result .result-lead{font-size:21px!important;line-height:1.55!important;max-width:900px!important}
body.standalone-results-page #screen-result .profile-card{max-width:1180px!important;padding:28px 32px!important}
body.standalone-results-page #screen-result .profile-copy>small{font-size:12px!important}
body.standalone-results-page #screen-result .profile-card strong{font-size:34px!important}
body.standalone-results-page #screen-result .profile-card p{font-size:17px!important;line-height:1.55!important}
body.standalone-results-page #screen-result .profile-tags span{font-size:13px!important;padding:6px 11px!important}
body.standalone-results-page #screen-result .comparison-heading h3{font-size:44px!important}
body.standalone-results-page #screen-result .comparison-heading p{font-size:16px!important;line-height:1.5!important}
body.standalone-results-page #screen-result .comparison-rank{font-size:14px!important}
body.standalone-results-page #screen-result .comparison-card h4{font-size:29px!important}
body.standalone-results-page #screen-result .comparison-match b{font-size:30px!important}
body.standalone-results-page #screen-result .comparison-score-row-compact span{font-size:16px!important}
body.standalone-results-page #screen-result .comparison-score-row-compact small,
body.standalone-results-page #screen-result .comparison-best small,
body.standalone-results-page #screen-result .comparison-tradeoff small{font-size:12px!important}
body.standalone-results-page #screen-result .comparison-best strong{font-size:19px!important}
body.standalone-results-page #screen-result .comparison-tradeoff p,
body.standalone-results-page #screen-result .comparison-footnote{font-size:15px!important;line-height:1.55!important}
body.standalone-results-page #screen-result .comparison-open{font-size:15px!important;padding:13px 16px!important}
body.standalone-results-page #screen-result .personal-explanation-head h3{font-size:clamp(38px,3.5vw,54px)!important}
body.standalone-results-page #screen-result .personal-explanation-head p,
body.standalone-results-page #screen-result .personal-explanation-block p{font-size:17px!important;line-height:1.6!important}
body.standalone-results-page #screen-result .personal-explanation .section-kicker,
body.standalone-results-page #screen-result .personal-explanation-block small{font-size:12px!important}
body.standalone-results-page #screen-result .personal-reason-tags span{font-size:14px!important;padding:7px 11px!important}
body.standalone-results-page #screen-result .result-actions button{font-size:17px!important;padding:15px 22px!important}
@media(max-width:900px){
 body.standalone-results-page #screen-result.result-screen{padding:18px 0 42px!important}
 body.standalone-results-page #screen-result .result-wrap{width:96vw!important;padding:50px 24px!important}
}


/* v1.21 — customer-ready A4 Camino report */
@media print {
  @page { size: A4 portrait; margin: 14mm 13mm 15mm; }
  html, body { background:#fff !important; color:#211a10 !important; width:auto !important; height:auto !important; overflow:visible !important; }
  body * { visibility:hidden !important; }
  body.printing-camino-report #routeDetail,
  body.printing-camino-report #routeDetail * { visibility:visible !important; }
  body.printing-camino-report #routeDetail {
    position:absolute !important; inset:0 auto auto 0 !important; width:100% !important; max-width:none !important;
    margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; background:#fffdf6 !important; overflow:visible !important;
    font-size:10.5pt !important; line-height:1.42 !important;
  }
  body.printing-camino-report #routeDetail::before {
    content:"CAMINO PLANNER  •  YOUR PERSONAL CAMINO REPORT";
    display:block; visibility:visible !important; padding:0 0 7mm; margin:0 0 8mm;
    border-bottom:1px solid #a98950; color:#765b28; font:700 9pt/1.2 Arial,sans-serif; letter-spacing:1.8px;
  }
  #routeDetail .detail-close, #routeDetail .route-print, #routeDetail .route-save,
  #routeDetail .next-phase-note, #routeDetail button, #routeDetail input,
  #routeDetail .planner-editor .stepper-controls { display:none !important; }
  #routeDetail .detail-hero, #routeDetail .detail-grid, #routeDetail section,
  #routeDetail .route-lower, #routeDetail .fit-panel, #routeDetail .detail-story,
  #routeDetail .route-plan-card, #routeDetail .effort-example-grid > div,
  #routeDetail .verified-stage-row, #routeDetail .practical-grid > *,
  #routeDetail .highlight-grid > *, #routeDetail .season-table > * {
    break-inside:avoid !important; page-break-inside:avoid !important;
  }
  #routeDetail h1, #routeDetail h2, #routeDetail h3, #routeDetail h4,
  #routeDetail .section-head { break-after:avoid !important; page-break-after:avoid !important; }
  #routeDetail .detail-hero { min-height:0 !important; margin:0 0 8mm !important; border-radius:0 !important; }
  #routeDetail .detail-hero img { max-height:72mm !important; object-fit:cover !important; }
  #routeDetail h2 { font-size:28pt !important; line-height:1.05 !important; color:#173c30 !important; }
  #routeDetail h3 { font-size:22pt !important; color:#173c30 !important; }
  #routeDetail h4 { font-size:17pt !important; line-height:1.1 !important; color:#173c30 !important; margin-bottom:4mm !important; }
  #routeDetail p, #routeDetail span, #routeDetail strong, #routeDetail b { color:#292318 !important; }
  #routeDetail .section-kicker, #routeDetail small { color:#8a672b !important; }
  #routeDetail section, #routeDetail .detail-grid, #routeDetail .route-lower {
    margin:0 0 8mm !important; padding:6mm !important; border:1px solid #d2bf91 !important;
    background:#fffaf0 !important; box-shadow:none !important; border-radius:3mm !important;
  }
  #routeDetail .route-plan-card { background:#173c30 !important; border-color:#a98950 !important; }
  #routeDetail .route-plan-card *, #routeDetail .route-plan-card strong { color:#fff7df !important; }
  #routeDetail .route-plan-card .section-kicker, #routeDetail .route-plan-card small { color:#d9b967 !important; }
  #routeDetail .verified-stage-table { font-size:9pt !important; }
  #routeDetail .verified-stage-row { min-height:0 !important; padding:2.5mm 0 !important; }
  #routeDetail .highlight-grid, #routeDetail .practical-grid, #routeDetail .effort-example-grid { gap:3mm !important; }
  #routeDetail a { color:#173c30 !important; text-decoration:none !important; }
}

/* v1.22 — clearer active route-detail navigation */
.detail-tabs a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border:1px solid transparent;
  border-radius:5px;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.detail-tabs a:hover{
  color:#f4d889;
  border-color:rgba(205,169,93,.42);
  background:rgba(255,255,255,.025);
}
.detail-tabs a.is-active{
  color:#f7df9a;
  background:linear-gradient(180deg,#7b3037 0%,#642329 100%);
  border-color:#d3aa55;
  box-shadow:0 5px 14px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.035);
}

/* v1.23 — compact, customer-ready ONE PAGE A4 Top 3 report */
.camino-print-report{display:none}
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{width:210mm!important;height:297mm!important;margin:0!important;padding:0!important;background:#efe3c4!important;overflow:hidden!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body *{visibility:hidden!important}
  body.printing-camino-report #caminoPrintReport,
  body.printing-camino-report #caminoPrintReport *{visibility:visible!important}
  body.printing-camino-report #routeDetail{display:none!important}
  body.printing-camino-report #caminoPrintReport{
    display:block!important;position:absolute!important;left:0!important;top:0!important;width:210mm!important;height:297mm!important;
    box-sizing:border-box!important;padding:12mm 13mm 9mm!important;color:#211b12!important;
    background:
      radial-gradient(circle at 18% 8%,rgba(255,255,255,.42),transparent 23%),
      linear-gradient(rgba(246,234,199,.94),rgba(238,220,177,.96))!important;
    font-family:Georgia,'Times New Roman',serif!important;overflow:hidden!important
  }
  #caminoPrintReport:before{content:"";position:absolute;inset:5mm;border:1px solid #a98745;pointer-events:none}
  #caminoPrintReport .cpr-head{height:19mm;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #9c7b3d;padding:0 2mm 4mm;box-sizing:border-box}
  #caminoPrintReport .cpr-brand{display:flex;align-items:center;gap:3mm;color:#173c30}
  #caminoPrintReport .cpr-mark{width:11mm;height:11mm;border:1.2px solid #b18b42;border-radius:50%;display:grid;place-items:center;font-size:17pt;color:#b18b42}
  #caminoPrintReport .cpr-brand b{font-size:11pt;line-height:.9;letter-spacing:1px;display:block}
  #caminoPrintReport .cpr-brand small{display:block;font:700 5.5pt Arial,sans-serif;letter-spacing:2px;color:#8a672b;margin-top:1.5mm}
  #caminoPrintReport .cpr-label{font:700 6.5pt Arial,sans-serif;letter-spacing:1.8px;color:#8a672b}
  #caminoPrintReport .cpr-intro{text-align:center;padding:6mm 8mm 5mm}
  #caminoPrintReport .cpr-intro small,#caminoPrintReport .cpr-profile small,#caminoPrintReport .cpr-focus small,#caminoPrintReport .cpr-fit small{font:700 6.5pt Arial,sans-serif;letter-spacing:1.7px;color:#8a672b}
  #caminoPrintReport .cpr-intro h1{font-size:27pt;line-height:1;margin:2mm 0 2.5mm;color:#173c30;font-weight:500}
  #caminoPrintReport .cpr-intro p{font-size:9.2pt;line-height:1.35;margin:0;color:#4e4638}
  #caminoPrintReport .cpr-profile{background:#173c30!important;color:#fff8e5!important;border:1px solid #aa8844;border-radius:3mm;padding:4.5mm 6mm;margin-bottom:5mm;display:grid;grid-template-columns:auto 1fr;gap:1.5mm 5mm;align-items:center}
  #caminoPrintReport .cpr-profile h2{font-size:17pt;margin:1mm 0 0;color:#fff8e5;font-weight:500}
  #caminoPrintReport .cpr-profile p{grid-column:1/-1;margin:0;font:8.4pt/1.35 Arial,sans-serif;color:#f3ecd9!important}
  #caminoPrintReport .cpr-tags{display:flex;justify-content:flex-end;gap:1.5mm;flex-wrap:wrap}
  #caminoPrintReport .cpr-tags span{font:700 6pt Arial,sans-serif;border:1px solid #b9954e;border-radius:20px;padding:1.4mm 2.2mm;color:#f5d887!important}
  #caminoPrintReport .cpr-top3{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm;margin-bottom:5mm}
  #caminoPrintReport .cpr-route{height:91mm;box-sizing:border-box;border:1px solid #bca36d;border-radius:2.5mm;padding:4mm;background:rgba(255,250,235,.68)!important;display:flex;flex-direction:column}
  #caminoPrintReport .cpr-route.is-winner{border:1.7px solid #8f2f35;box-shadow:inset 0 0 0 .5mm rgba(143,47,53,.08)}
  #caminoPrintReport .cpr-rank{display:flex;justify-content:space-between;align-items:center;font:700 6pt Arial,sans-serif;letter-spacing:.8px;color:#8a672b}
  #caminoPrintReport .cpr-rank b{background:#173c30!important;color:#f5d887!important;border-radius:10px;padding:1mm 1.8mm;font-size:5.5pt}
  #caminoPrintReport .cpr-title{display:flex;align-items:flex-start;justify-content:space-between;gap:2mm;margin:4mm 0 2.5mm}
  #caminoPrintReport .cpr-title h3{font-size:16pt;line-height:1.05;margin:0;color:#173c30;font-weight:500}
  #caminoPrintReport .cpr-title strong{font-size:17pt;color:#8f2f35;white-space:nowrap}
  #caminoPrintReport .cpr-route>p{font:8pt/1.35 Arial,sans-serif;color:#4e4638;margin:0 0 3mm;min-height:15mm}
  #caminoPrintReport .cpr-facts{border-top:1px solid #d0bd91;border-bottom:1px solid #d0bd91;padding:2.5mm 0;display:grid;gap:1.5mm;font:7.2pt Arial,sans-serif;color:#30291e}
  #caminoPrintReport .cpr-facts span{display:flex;justify-content:space-between;gap:2mm}
  #caminoPrintReport .cpr-facts small{font:700 5.6pt Arial,sans-serif;letter-spacing:.8px;color:#8a672b}
  #caminoPrintReport .cpr-fit{margin-top:auto;padding-top:3mm}
  #caminoPrintReport .cpr-fit b{display:block;margin-top:1.5mm;font-size:9pt;line-height:1.25;color:#173c30;font-weight:500}
  #caminoPrintReport .cpr-focus{border:1px solid #aa8844;background:rgba(23,60,48,.06)!important;border-radius:2.5mm;padding:4mm 5mm}
  #caminoPrintReport .cpr-focus h2{font-size:18pt;color:#173c30;margin:1.2mm 0 1mm;font-weight:500}
  #caminoPrintReport .cpr-focus>p{font:8.2pt/1.3 Arial,sans-serif;margin:0 0 3mm;color:#4e4638}
  #caminoPrintReport .cpr-focus>div{display:grid;grid-template-columns:1fr auto 1fr 1fr;gap:3mm;align-items:center;border-top:1px solid #c9b27e;padding-top:2.5mm;font:7.2pt Arial,sans-serif;color:#6c5a36}
  #caminoPrintReport .cpr-focus b{display:block;font:11pt Georgia,serif;color:#173c30;margin-top:.5mm}
  #caminoPrintReport .cpr-focus i{font-style:normal;color:#9a7736;font-size:14pt}
  #caminoPrintReport .cpr-footer{position:absolute;left:13mm;right:13mm;bottom:7.5mm;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #9c7b3d;padding-top:2.5mm;color:#8a672b}
  #caminoPrintReport .cpr-footer span{font-size:11pt;font-style:italic}
  #caminoPrintReport .cpr-footer small{font:6pt Arial,sans-serif;letter-spacing:.5px}
}


/* v1.25 — print CTA simplified + guaranteed default Overview state */
.route-print-only-card{
  display:flex;align-items:center;justify-content:center;
  padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
}
.route-print-only-card .route-print{
  width:auto;min-width:310px;margin:0!important;padding:16px 30px!important;
  color:#f7df9a!important;
  background:linear-gradient(180deg,#7b3037 0%,#642329 100%)!important;
  border:1px solid #d3aa55!important;border-radius:5px!important;
  box-shadow:0 5px 14px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.035)!important;
}
.route-print-only-card .route-print:hover{background:linear-gradient(180deg,#873740 0%,#702830 100%)!important;}

/* v1.25 — route planner readability pass (approved pages untouched) */
#routeDetail .recommended-section .section-head h4,
#routeDetail .live-recommendation-host .section-head h4{
  color:#f4ead6 !important;
  font-size:38px !important;
  line-height:1.08;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
}
#routeDetail .recommended-section .section-kicker{
  color:#d6ad5e !important;
  font-size:11px !important;
  letter-spacing:.18em;
}
#routeDetail .recommendation-status{
  color:#ead49b !important;
  font-size:10px !important;
  font-weight:600;
}
#routeDetail .recommendation-summary small,
#routeDetail .rhythm-check small,
#routeDetail .planner-breakdown small,
#routeDetail .plan-summary small{
  color:#c9a75e !important;
  font-size:10px !important;
  font-weight:600;
  line-height:1.35;
}
#routeDetail .recommendation-summary strong{font-size:26px !important;color:#f4ead7 !important}
#routeDetail .rhythm-check strong{font-size:21px !important;color:#f1e7d4 !important}
#routeDetail .recommendation-note,
#routeDetail .planner-integrity span,
#routeDetail .planner-live p,
#routeDetail .official-route-note{
  color:rgba(246,241,227,.82) !important;
  font-size:14px !important;
  line-height:1.65 !important;
}
#routeDetail .planner-integrity b{font-size:11px !important;color:#e1bd6a !important}
#routeDetail .personal-stage-main strong{font-size:20px !important;color:#f3ead8 !important}
#routeDetail .personal-stage-main small,
#routeDetail .personal-stage-metric small{font-size:11px !important;color:rgba(244,237,220,.72) !important}
#routeDetail .personal-stage-num{font-size:11px !important;color:#d2ad60 !important}
#routeDetail .personal-stage-metric b{font-size:14px !important;color:#ebc96f !important}
#routeDetail .recommended-section{background:linear-gradient(135deg,rgba(205,169,93,.075),rgba(255,255,255,.018))}

/* v1.26 — The Routes redesign only. Approved Home / Planner screens untouched. */
.routes-page{
  background:#07150f url('assets/routes-bg-v126.webp') center top/cover fixed no-repeat;
  color:#2b1d10;
  padding-top:86px;
  min-height:100vh;
  position:relative;
}
.routes-page::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,13,9,.08),rgba(3,13,9,.30));pointer-events:none}
.routes-page .routes-hero{height:auto;min-height:370px;background:none;position:relative;display:flex;align-items:center;justify-content:center;padding:55px 6vw 20px;z-index:1}
.routes-page .routes-hero-shade{display:none}
.routes-page .routes-hero-content{position:relative;left:auto;bottom:auto;width:min(1080px,92vw);max-width:none;text-align:center;padding:48px 80px 42px;background:linear-gradient(90deg,rgba(238,210,154,.90),rgba(250,232,190,.96) 18%,rgba(247,224,176,.95) 82%,rgba(226,191,127,.89));border:1px solid rgba(102,65,28,.48);box-shadow:0 20px 50px rgba(0,0,0,.32),inset 0 0 42px rgba(121,75,26,.13);clip-path:polygon(1.2% 5%,5% 2%,11% 4%,18% 1%,25% 3%,34% 1%,43% 4%,52% 1%,61% 3%,70% 1%,79% 4%,88% 1%,96% 4%,99% 2%,100% 94%,96% 98%,89% 96%,80% 99%,70% 96%,61% 99%,52% 96%,42% 99%,32% 96%,23% 99%,14% 96%,6% 99%,0 96%)}
.routes-page .routes-hero-content::before,.routes-page .routes-hero-content::after{content:"✦";position:absolute;top:50%;transform:translateY(-50%);font-size:42px;color:rgba(91,54,24,.48)}
.routes-page .routes-hero-content::before{left:30px}.routes-page .routes-hero-content::after{right:30px}
.routes-page .routes-hero .eyebrow{color:#7b542c;letter-spacing:.34em;font-size:12px;font-weight:700}
.routes-page .routes-hero h1{font-size:68px;line-height:.95;color:#2a190d;margin:10px 0 18px;text-shadow:0 1px rgba(255,255,255,.4)}
.routes-page .routes-hero p{font-size:23px;line-height:1.35;color:#563b25;max-width:760px;margin:0 auto}
.routes-page .routes-index{position:relative;z-index:1;max-width:1220px;margin:0 auto;padding:15px 5vw 100px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.routes-page .route-index-card{min-height:205px;border:1px solid rgba(117,76,33,.55);border-radius:8px;padding:28px 30px;background:linear-gradient(115deg,rgba(247,225,179,.96),rgba(236,203,143,.94));color:#2b1d10;display:grid;grid-template-columns:60px 1fr;grid-template-rows:1fr auto;gap:12px 20px;align-items:center;box-shadow:0 14px 30px rgba(0,0,0,.28),inset 0 0 32px rgba(104,62,23,.10);overflow:hidden;position:relative;transition:.22s ease}
.routes-page .route-index-card::after{content:"";position:absolute;inset:8px;border:1px solid rgba(117,76,33,.20);pointer-events:none}
.routes-page .route-index-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,0,0,.36),inset 0 0 32px rgba(104,62,23,.10)}
.routes-page .route-index-card>span{grid-row:1;font:48px 'Cormorant Garamond',Georgia,serif;color:#7a4e24;align-self:start;padding-top:5px}
.routes-page .route-index-card>div{grid-row:1;align-self:center}
.routes-page .route-index-card small{letter-spacing:.24em;color:#8a5d2d;font-size:10px;font-weight:700}
.routes-page .route-index-card h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:38px;line-height:1;margin:7px 0 9px;color:#2a190d;font-weight:600}
.routes-page .route-index-card p{font-size:14px;line-height:1.45;margin:0;color:#5e4734;max-width:430px}
.routes-page .route-index-card b{grid-column:1/-1;justify-self:stretch;background:#123e31;color:#f2d783;border:1px solid #a67c37;border-radius:5px;padding:13px 18px;text-align:center;font-size:13px;letter-spacing:.02em;position:relative;z-index:2}
@media(max-width:900px){.routes-page .routes-index{grid-template-columns:1fr}.routes-page .routes-hero-content{padding:40px 45px}.routes-page .routes-hero h1{font-size:52px}.routes-page .routes-hero p{font-size:20px}}
\n\n/* ============================================================
   v1.27 — HOMEPAGE ROUTE MEDALLIONS
   Keep approved hero untouched; extend it naturally with the
   supplied eight-route artwork and remove the obsolete load chip.
   ============================================================ */
.home-v100 .home-route-medallions-v127{
  position:relative;
  z-index:3;
  width:100%;
  margin:-2px 0 0;
  padding:0;
  overflow:hidden;
  line-height:0;
  background:#061c15;
  border-top:1px solid rgba(210,166,76,.5);
  box-shadow:0 -18px 36px rgba(2,18,13,.34);
}
.home-v100 .home-route-medallions-v127:before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;right:0;top:-1px;
  height:42px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(6,28,21,.82) 0%,rgba(6,28,21,.28) 45%,rgba(6,28,21,0) 100%);
}
.home-v100 .home-route-medallions-v127 img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  user-select:none;
  -webkit-user-drag:none;
}
/* Never show the old secondary loader: upload belongs in the header. */
.home-v100-load,#loadAnswersStartBtn{display:none!important;}

@media(max-width:900px){
  .home-v100 .home-route-medallions-v127{min-width:900px;}
}

/* ============================================================
   v1.28 — HOMEPAGE MEDALLIONS: ONE CONTINUOUS SCENE
   Crop the old preview-card tops out of the approved hero and let
   the eight-route artwork grow naturally out of the same foliage.
   ============================================================ */
body:has(#screen-start.home-v100) .home-v100-stage{
  aspect-ratio:1536/655;
  overflow:hidden;
  z-index:4;
}
.home-v100 .home-route-medallions-v127{
  margin:-1px 0 0;
  border-top:0;
  box-shadow:none;
  overflow:visible;
  background:#061c15;
}
/* Organic foliage bridge: uses foliage sampled from the approved homepage
   artwork so the two pieces read as one continuous illustration. */
.home-v100 .home-route-medallions-v127:before{
  content:"";
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  top:-58px;
  height:118px;
  background:url('assets/home-route-foliage-bridge-v128.webp') center top/100% 100% no-repeat;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 62%,transparent 100%);
  filter:saturate(1.05) contrast(1.02);
}
.home-v100 .home-route-medallions-v127:after{
  content:"";
  position:absolute;
  z-index:3;
  left:0;right:0;top:-30px;
  height:95px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,30,22,0) 0%,rgba(5,30,22,.34) 45%,rgba(5,30,22,0) 100%);
}
.home-v100 .home-route-medallions-v127 img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  margin:0;
}

/* v1.29: one physically composited homepage artwork; no CSS bridge or band. */
body:has(#screen-start.home-v100) .home-v100-stage{aspect-ratio:1536/1003!important;overflow:hidden!important}
body:has(#screen-start.home-v100) .home-v100-start{top:38.2851%!important;height:5.9821%!important}
.home-v100 .home-route-medallions-v127{display:none!important}

/* v1.31 — question answer tiles: sculpted Camino CTA silhouette, improved readability.
   Scoped strictly to questionnaire choices; homepage and results are untouched. */
#screen-quiz #answers .answer{
  border-radius:16px 16px 13px 13px!important;
  clip-path:polygon(2.2% 0,97.8% 0,100% 5%,100% 95%,97.8% 100%,2.2% 100%,0 95%,0 5%)!important;
  border:2px solid #c29a52!important;
  box-shadow:inset 0 0 0 2px rgba(248,218,143,.16),0 7px 16px rgba(0,0,0,.20)!important;
}
#screen-quiz #answers .answer:hover{border-color:#f2d18a!important;box-shadow:inset 0 0 0 2px rgba(248,218,143,.28),0 9px 20px rgba(0,0,0,.27)!important}
#screen-quiz #answers .answer strong{font-size:clamp(20px,1.45vw,25px)!important;line-height:1.18!important}
#screen-quiz #answers .answer small{font-size:clamp(13px,.94vw,15px)!important;line-height:1.38!important}
#screen-quiz .question-shell h2,#screen-quiz .planner-question-box h2{font-size:clamp(40px,3.7vw,60px)!important;line-height:1.12!important}
@media(max-width:680px){#screen-quiz #answers .answer strong{font-size:21px!important}#screen-quiz #answers .answer small{font-size:13px!important}}

/* v1.32 — actual notched plaque silhouette, not rounded rectangles. Quiz only. */
#screen-quiz #answers .answer{
  --plaque-shape:polygon(5% 0,95% 0,97.5% 2.5%,97.5% 6%,100% 9%,100% 91%,97.5% 94%,97.5% 97.5%,95% 100%,5% 100%,2.5% 97.5%,2.5% 94%,0 91%,0 9%,2.5% 6%,2.5% 2.5%);
  border-radius:0!important;
  clip-path:var(--plaque-shape)!important;
  border:0!important;
  padding:3px!important;
  background:#caa45c!important;
  isolation:isolate;
}
#screen-quiz #answers .answer::before{
  content:"";position:absolute;inset:3px;z-index:-1;pointer-events:none;
  background:linear-gradient(155deg,#214c3d,#103328 65%,#193d31);
  clip-path:var(--plaque-shape);
}
#screen-quiz #answers .answer.selected{background:#f0cd79!important}
#screen-quiz #answers .answer.selected::before{background:linear-gradient(155deg,#7a3138,#571f29 70%,#632832)}
#screen-quiz #answers .answer:hover{background:#f2d38c!important}
#screen-quiz #answers .answer-copy{position:relative;z-index:1}
#screen-quiz #answers .answer .answer-scene{position:relative;z-index:1}
@media(max-width:680px){#screen-quiz #answers .answer{--plaque-shape:polygon(7% 0,93% 0,97% 3%,97% 7%,100% 10%,100% 90%,97% 93%,97% 97%,93% 100%,7% 100%,3% 97%,3% 93%,0 90%,0 10%,3% 7%,3% 3%)}}

/* v1.33 — readability and visual cleanup */
#screen-quiz .question-subtitle,
#screen-quiz .scene-canvas .question-subtitle{
  font-size:clamp(17px,1.3vw,21px)!important;
  line-height:1.4!important;
  font-weight:600!important;
  color:#46301e!important;
  max-width:850px!important;
}
#screen-quiz .visual-answers .scene-mark{display:none!important;}
/* Review heading sits directly on the parchment, without a translucent blur strip. */
#screen-review .review-intro,
#screen-review .review-intro::before{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#screen-review .review-intro{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
#screen-review .review-intro h1{color:#17372b!important;text-shadow:none!important;}
#screen-review .review-intro p{color:#53371d!important;text-shadow:none!important;}
@media(max-width:680px){#screen-quiz .question-subtitle{font-size:17px!important;}}

/* v1.34 — sculpted gilded Camino plaques, matching the homepage CTA.
   Visual choices only: preserve answer selection and every other screen. */
#screen-quiz #answers.visual-answers .answer{
  --plaque-shape:polygon(0 10%,1% 7%,4% 6%,6% 4%,7% 1.5%,9% 0,91% 0,93% 1.5%,94% 4%,96% 6%,99% 7%,100% 10%,100% 90%,99% 93%,96% 94%,94% 96%,93% 98.5%,91% 100%,9% 100%,7% 98.5%,6% 96%,4% 94%,1% 93%,0 90%);
  clip-path:var(--plaque-shape)!important;
  background:linear-gradient(135deg,#f9dc91 0%,#b78a3e 35%,#f6d589 66%,#8f692d 100%)!important;
  padding:4px!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden;
  filter:drop-shadow(0 7px 9px rgba(18,20,12,.22));
  box-shadow:none!important;
  gap:0;
}
#screen-quiz #answers.visual-answers .answer::before{
  inset:4px!important;
  z-index:0!important;
  clip-path:var(--plaque-shape)!important;
  background:linear-gradient(155deg,#214c3d,#103328 65%,#193d31)!important;
}
#screen-quiz #answers.visual-answers .answer.selected::before{
  background:linear-gradient(155deg,#81363d,#581f2a 70%,#632832)!important;
}
#screen-quiz #answers.visual-answers .answer .answer-scene{
  width:calc(100% - 14px)!important;
  margin:9px 7px 0!important;
  height:150px!important;
  flex:0 0 150px!important;
  border-radius:0!important;
  clip-path:polygon(0 8%,4% 6%,6% 2%,9% 0,91% 0,94% 2%,96% 6%,100% 8%,100% 92%,96% 94%,94% 98%,91% 100%,9% 100%,6% 98%,4% 94%,0 92%)!important;
  border-bottom:1px solid #d5b66d!important;
  z-index:1!important;
}
#screen-quiz #answers.visual-answers .answer .answer-copy{
  z-index:1!important;
  position:relative!important;
  padding:18px 18px 22px!important;
}
#screen-quiz #answers.visual-answers .answer .answer-copy strong{color:#f8d991!important}
#screen-quiz #answers.visual-answers .answer .answer-copy small{color:#f5f0e6!important}
#screen-quiz #answers.visual-answers .answer:hover{transform:translateY(-4px)!important;filter:drop-shadow(0 11px 13px rgba(18,20,12,.34))}
#screen-quiz #answers.visual-answers .answer:focus-visible{outline:3px solid #f8d991;outline-offset:3px}
@media(max-width:680px){#screen-quiz #answers.visual-answers .answer .answer-scene{height:112px!important;flex-basis:112px!important}#screen-quiz #answers.visual-answers .answer .answer-copy{padding:13px 12px 18px!important}}

/* v1.36: compact transparent Tipica Gallega logo in existing top-left brand slot */
.topbar .brand{min-width:0!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;flex:0 0 auto!important;width:135px!important;max-width:135px!important;height:100%!important;text-decoration:none!important}
.topbar .brand .tipica-brand-logo{display:block!important;width:auto!important;height:66px!important;max-width:125px!important;object-fit:contain!important;object-position:left center!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.26))}
body.quiz-mode .topbar .brand{min-width:0!important;width:135px!important}
body.quiz-mode .topbar .brand .tipica-brand-logo{height:55px!important}
@media(max-width:700px){.topbar .brand{width:88px!important;max-width:88px!important}.topbar .brand .tipica-brand-logo{height:48px!important;max-width:86px!important}body.quiz-mode .topbar .brand{width:88px!important}}
/* Restore the approved rounded answer cards with a restrained golden outline. */
#screen-quiz #answers.visual-answers .answer{clip-path:none!important;border:3px solid #c4a363!important;border-radius:24px!important;padding:0!important;background:linear-gradient(155deg,#214c3d,#103328 65%,#193d31)!important;overflow:hidden!important;filter:none!important;box-shadow:0 7px 15px rgba(18,20,12,.22)!important}
#screen-quiz #answers.visual-answers .answer::before{clip-path:none!important;inset:0!important;border-radius:20px!important}
#screen-quiz #answers.visual-answers .answer.selected{background:linear-gradient(155deg,#81363d,#581f2a 70%,#632832)!important;border-color:#e5c47a!important}
#screen-quiz #answers.visual-answers .answer .answer-scene{width:calc(100% - 24px)!important;margin:12px 12px 0!important;border-radius:13px 13px 4px 4px!important;clip-path:none!important}
#screen-quiz #answers.visual-answers .answer:hover{box-shadow:0 12px 20px rgba(18,20,12,.34)!important}

/* v1.39 — consistent image framing and uninterrupted selected-card color */
#screen-quiz #answers.visual-answers .answer .answer-scene{
  background-color:#18392f!important;
  background-size:cover!important;
  background-position:center center!important;
  border-top:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#screen-quiz #answers.visual-answers .answer .answer-copy,
#screen-quiz #answers.visual-answers .answer.selected .answer-copy{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#screen-quiz #answers.visual-answers .answer.selected,
#screen-quiz #answers.visual-answers .answer.selected::before{
  background:#632630!important;
  background-image:none!important;
}

/* v1.40 — all questions: compact the visual answer layout so navigation stays
   inside the illustrated parchment; approved card appearance remains intact. */
@media(min-width:901px){
 #screen-quiz .scene-canvas .question-shell{height:auto!important;min-height:0!important;overflow:visible!important}
 #screen-quiz .scene-canvas .planner-question-box{margin-bottom:8px!important}
 #screen-quiz .scene-canvas #answers.visual-answers{grid-template-rows:none!important;grid-auto-rows:auto!important;align-items:stretch!important;gap:12px!important}
 #screen-quiz .scene-canvas #answers.visual-answers .answer{height:auto!important;min-height:0!important;align-self:stretch!important}
 #screen-quiz .scene-canvas #answers.visual-answers .answer .answer-scene{height:106px!important;flex:0 0 106px!important}
 #screen-quiz .scene-canvas #answers.visual-answers .answer .answer-copy{min-height:0!important;padding:12px 15px 15px!important}
 #screen-quiz .scene-canvas .multi-hint{margin-top:4px!important;margin-bottom:4px!important}
 #screen-quiz .scene-canvas .quiz-nav{margin-top:10px!important;padding-bottom:18px!important;position:relative!important;z-index:3!important}
 #screen-quiz .scene-canvas .question-quote{display:none!important}
}
@media(max-width:900px){
 #screen-quiz .question-shell{height:auto!important;min-height:0!important;overflow:visible!important;padding-bottom:34px!important}
 #screen-quiz .quiz-nav{position:relative!important;margin-top:18px!important;padding-bottom:18px!important}
 #screen-quiz #answers.visual-answers .answer{height:auto!important;min-height:0!important}
}

/* v1.41: Review actions sit directly on parchment, without a green bar. */
#screen-review .review-actions,
#screen-review .review-actions::before,
#screen-review .review-actions::after{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#screen-review .review-actions{
  padding:12px 18px 24px!important;
  margin:16px 8px 0!important;
  border-radius:0!important;
}
#screen-review .review-actions button{
  position:relative!important;
  z-index:2!important;
}
/* Avoid embedded pale photo edges without changing the approved card shape. */
#screen-quiz #answers.visual-answers .answer .answer-scene{
  background-size:115% auto!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-color:#193b30!important;
}
/* Preserve a visible parchment margin below all question controls. */
#screen-quiz .scene-canvas .quiz-nav{margin-bottom:26px!important}

/* v1.42: independently cropped questionnaire imagery removes baked-in pale edges.
   Cover is essential: percentage-auto sizing exposed strips on some aspect ratios. */
#screen-quiz #answers.visual-answers .answer .answer-scene{
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
/* v1.43 — remove decorative question icons on every step. */
#screen-quiz .question-icon{display:none!important}
#screen-quiz .planner-question-box{gap:0!important}
/* Extend the parchment-colored content area behind answer cards and navigation.
   Keep the original scene artwork, golden frames and controls unchanged. */
@media(min-width:901px){
 #screen-quiz .scene-canvas .question-shell{padding-bottom:76px!important}
 #screen-quiz .scene-canvas .quiz-nav{margin-bottom:44px!important}
 #screen-quiz .scene-canvas .question-shell::before{pointer-events:none!important}
}
@media(max-width:900px){
 #screen-quiz .question-shell{padding-bottom:64px!important}
 #screen-quiz .quiz-nav{margin-bottom:32px!important}
}

/* v1.44 — a content-sized parchment, not a fixed-height question container.
   The original scene remains behind it; the parchment itself extends with
   long answers, multi-select hints and navigation. */
@media (min-width:901px){
  #screen-quiz .scene-canvas .question-shell{
    height:auto!important;
    min-height:820px!important;
    padding:28px 68px 94px!important;
    background:url('assets/parchment-v084.webp') center center/100% 100% no-repeat!important;
    filter:drop-shadow(0 9px 12px rgba(0,0,0,.19));
    z-index:5!important;
  }
  #screen-quiz .scene-canvas .quiz-nav{
    margin-top:20px!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  #screen-quiz .scene-canvas .epic-vista{z-index:1!important}
}
@media (max-width:900px){
  #screen-quiz .question-shell{
    min-height:0!important;
    height:auto!important;
    padding-bottom:110px!important;
    background:url('assets/parchment-v084.webp') center center/100% 100% no-repeat!important;
  }
  #screen-quiz .quiz-nav{margin-bottom:0!important}
}

/* v1.45 — keep the lower Camino medallion ribbon fully uncovered.
   The v1.44 820px minimum parchment extended into the ribbon (starts at
   approximately y=795 in the fixed 1672px scene). Fit the parchment into its
   own upper scene, with compact internal spacing and no forced empty tail. */
@media (min-width:901px){
  #screen-quiz .scene-canvas .question-shell{
    min-height:0!important;
    height:auto!important;
    max-height:715px!important;
    padding:20px 58px 28px!important;
    box-sizing:border-box!important;
  }
  #screen-quiz .scene-canvas .planner-question-box{margin-bottom:6px!important}
  #screen-quiz .scene-canvas .quiz-nav{margin-top:10px!important;margin-bottom:0!important;padding-bottom:0!important}
  #screen-quiz .scene-canvas #answers.visual-answers{gap:10px!important}
  #screen-quiz .scene-canvas #answers.visual-answers .answer .answer-copy{padding:10px 13px 12px!important}
}

/* v1.46 — restore the single parchment that is already part of the scene artwork.
   v1.44/45 overlaid a second parchment image, creating a black edge and a
   duplicate strip above the Camino medallions. Keep progress in its own band. */
@media (min-width:901px){
  #screen-quiz .scene-canvas .question-shell{
    background:transparent!important;
    filter:none!important;
    box-shadow:none!important;
    top:65.9px!important;
    height:650px!important;
    max-height:650px!important;
    min-height:0!important;
    padding:88px 58px 16px!important;
    overflow:visible!important;
  }
  #screen-quiz .scene-canvas .progress-row{
    top:84px!important;
    z-index:25!important;
  }
  #screen-quiz .scene-canvas .planner-chapter{margin-top:0!important}
  #screen-quiz .scene-canvas .quiz-nav{margin-top:10px!important;margin-bottom:0!important}
  #screen-quiz .scene-canvas .question-shell::before,
  #screen-quiz .scene-canvas .question-shell::after{background:none!important;box-shadow:none!important}
}

/* v1.47 — results: restore the ornate parchment artwork instead of the flat
   yellow overlay. Keep the frame in normal document flow so long results grow. */
body.standalone-results-page #screen-result .result-wrap{
  background: url('assets/parchment-v084.webp') center top / 100% 100% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.30))!important;
  padding:clamp(68px,7vw,112px) clamp(34px,6vw,104px) clamp(78px,7vw,116px)!important;
}
@media(max-width:700px){
 body.standalone-results-page #screen-result .result-wrap{
   width:100%!important;
   padding:64px 22px 76px!important;
   background-size:100% 100%!important;
 }
}

/* v1.48 — results alignment: one stable parchment surface, no stretched overlay. */
body.standalone-results-page #screen-result.result-screen{
  padding:34px 18px 72px!important;
}
body.standalone-results-page #screen-result .result-wrap{
  box-sizing:border-box!important;
  width:min(1460px,100%)!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:clamp(60px,6vw,94px) clamp(28px,5.5vw,84px) clamp(64px,6vw,100px)!important;
  background-color:#e9d09a!important;
  background-image:url('assets/parchment-v084.webp')!important;
  background-position:center top!important;
  background-size:100% auto!important;
  background-repeat:repeat-y!important;
  border:0!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24)!important;
  filter:none!important;
  isolation:isolate!important;
}
body.standalone-results-page #screen-result .result-intro,
body.standalone-results-page #screen-result .top-comparison,
body.standalone-results-page #screen-result .result-actions,
body.standalone-results-page #screen-result .detail-panel{
  position:relative!important;
  max-width:100%!important;
  min-width:0!important;
  clear:both!important;
}
body.standalone-results-page #screen-result .result-intro{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:12px!important;
  text-align:center!important;
}
body.standalone-results-page #screen-result .result-intro h2{
  margin:0!important;
  overflow-wrap:break-word!important;
}
body.standalone-results-page #screen-result .result-lead{margin:0 auto 18px!important}
body.standalone-results-page #screen-result .profile-card{
  width:100%!important;
  box-sizing:border-box!important;
  margin:12px auto 34px!important;
}
body.standalone-results-page #screen-result .comparison-grid{align-items:stretch!important}
body.standalone-results-page #screen-result .comparison-card{min-width:0!important;box-sizing:border-box!important}
@media(max-width:900px){
 body.standalone-results-page #screen-result .result-wrap{padding:58px 32px 68px!important}
}
@media(max-width:600px){
 body.standalone-results-page #screen-result.result-screen{padding:16px 8px 40px!important}
 body.standalone-results-page #screen-result .result-wrap{padding:42px 18px 52px!important}
 body.standalone-results-page #screen-result .profile-card{display:block!important}
 body.standalone-results-page #screen-result .result-intro h2{font-size:clamp(36px,9vw,54px)!important}
}

/* v1.49 — ONE continuous parchment with preserved ornamental top and bottom.
   Nine-slice framing keeps the original torn edges at any results length,
   without repeating the top or cutting the lower edge into a straight line. */
body.standalone-results-page #screen-result .result-wrap{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  background-repeat:no-repeat!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  isolation:isolate!important;
  position:relative!important;
  padding:clamp(78px,7vw,110px) clamp(40px,6vw,100px) clamp(98px,8vw,128px)!important;
}
body.standalone-results-page #screen-result .result-wrap::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  display:block!important;
  z-index:-1!important;
  pointer-events:none!important;
  border:1px solid transparent!important;
  border-image-source:url('assets/parchment-v084.webp')!important;
  border-image-slice:155 92 155 92 fill!important;
  border-image-width:clamp(65px,6vw,100px) clamp(42px,5vw,76px)!important;
  border-image-repeat:stretch!important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.28))!important;
}
body.standalone-results-page #screen-result .result-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:16px!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
}
@media(max-width:700px){
 body.standalone-results-page #screen-result .result-wrap{
   padding:72px 26px 88px!important;
 }
 body.standalone-results-page #screen-result .result-wrap::before{
   border-image-width:62px 25px!important;
 }
}

/* v1.50 — The Routes: one continuous decorative parchment */
.routes-page{background:#071b15 url('assets/routes-bg-v126.webp') center top/cover fixed no-repeat;min-height:100vh;padding:112px 20px 100px;}
.routes-page .routes-parchment-sheet{position:relative;isolation:isolate;width:min(1320px,96%);margin:0 auto;padding:70px clamp(30px,6vw,105px) 100px;filter:drop-shadow(0 20px 28px rgba(0,0,0,.45));}
.routes-page .routes-parchment-sheet::before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/parchment-v084.webp') center center/100% 100% no-repeat;pointer-events:none;}
.routes-page .routes-hero{min-height:0;height:auto;padding:35px 0 34px;background:none;}
.routes-page .routes-hero-content{width:100%;padding:12px 30px 30px;background:none;border:0;box-shadow:none;clip-path:none;}
.routes-page .routes-hero-content::before,.routes-page .routes-hero-content::after{display:none;}
.routes-page .routes-hero h1{font-size:clamp(45px,5.4vw,73px);}
.routes-page .routes-index{max-width:none;padding:10px 0 15px;gap:22px;}
.routes-page .route-index-card{min-height:205px;background:linear-gradient(130deg,rgba(255,242,208,.75),rgba(233,203,149,.73));border:1px solid rgba(120,79,34,.55);box-shadow:0 6px 15px rgba(95,60,25,.14),inset 0 0 26px rgba(114,71,32,.08);}
.routes-page .route-index-card:hover{box-shadow:0 9px 22px rgba(95,60,25,.25);}
@media(max-width:900px){.routes-page{padding:95px 8px 60px}.routes-page .routes-parchment-sheet{width:100%;padding:58px 8% 75px}.routes-page .routes-hero{padding:15px 0 18px}.routes-page .routes-hero-content{padding:8px 0 20px}.routes-page .routes-index{grid-template-columns:1fr;gap:14px}.routes-page .route-index-card{min-height:175px}}
@media(max-width:520px){.routes-page .routes-parchment-sheet{padding:55px 8% 65px}.routes-page .route-index-card{padding:18px 15px;grid-template-columns:38px 1fr;gap:8px}.routes-page .route-index-card h2{font-size:30px}.routes-page .route-index-card>span{font-size:36px}.routes-page .routes-hero p{font-size:18px}}

/* v1.52 — stable Routes parchment and readable fallback */
.routes-page .routes-hero-content{color:#2a190d;}
.routes-page .routes-hero h1{color:#291a0d!important;}
.routes-page .routes-hero p{color:#543923!important;}
.routes-page .routes-parchment-sheet{box-sizing:border-box;}

/* v1.54 — location-specific Camino Ingles highlight images */
.ingles-ferrol{background-image:url("assets/ingles-highlight-ferrol-v154.webp");background-position:center center;background-size:cover}
.ingles-pontedeume{background-image:url("assets/ingles-highlight-pontedeume-v154.webp");background-position:center center;background-size:cover}
.ingles-betanzos{background-image:url("assets/ingles-highlight-betanzos-v154.webp");background-position:center center;background-size:cover}
.ingles-bruma{background-image:url("assets/ingles-highlight-bruma-v154.webp");background-position:center center;background-size:cover}

/* v1.56 — Override legacy !important route-map highlight rules with approved place images. */
#screen-route-ingles .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url("assets/ingles-highlight-ferrol-v154.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-ingles .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url("assets/ingles-highlight-pontedeume-v154.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-ingles .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url("assets/ingles-highlight-betanzos-v154.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-ingles .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url("assets/ingles-highlight-bruma-v154.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-plata .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url("assets/plata-merida-highlight-v153.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-plata .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url("assets/plata-caceres-highlight-v153.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-plata .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url("assets/plata-salamanca-highlight-v153.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-plata .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url("assets/plata-ourense-highlight-v153.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}

/* v1.58: four distinct approved winter-themed visual highlights (conceptual illustrations). */
#screen-route-invierno .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url('assets/invierno-winter-highlight-1-v158.webp') !important;background-position:center center !important;background-size:cover !important;}
#screen-route-invierno .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url('assets/invierno-winter-highlight-2-v158.webp') !important;background-position:center center !important;background-size:cover !important;}
#screen-route-invierno .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url('assets/invierno-winter-highlight-3-v158.webp') !important;background-position:center center !important;background-size:cover !important;}
#screen-route-invierno .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url('assets/invierno-winter-highlight-4-v158.webp') !important;background-position:center center !important;background-size:cover !important;}

/* v1.59 — Portuguese Coastal Way: four separate coastal highlight photographs. */
#screen-route-costa .hi-img.costa-viana{background-image:url("assets/costa-viana-scenic-v159.webp");background-position:center;background-size:cover}
#screen-route-costa .hi-img.costa-guarda{background-image:url("assets/costa-guarda-scenic-v159.webp");background-position:center;background-size:cover}
#screen-route-costa .hi-img.costa-baiona{background-image:url("assets/costa-baiona-scenic-v159.webp");background-position:center;background-size:cover}
#screen-route-costa .hi-img.costa-vigo{background-image:url("assets/costa-vigo-scenic-v159.webp");background-position:center;background-size:cover}

/* v1.60: force approved place-specific Coastal highlights over legacy route-map !important rules. */
#screen-route-costa .highlights .highlight-grid article:nth-child(1) .hi-img{background-image:url("assets/costa-viana-highlight-v160.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-costa .highlights .highlight-grid article:nth-child(2) .hi-img{background-image:url("assets/costa-guarda-highlight-v160.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-costa .highlights .highlight-grid article:nth-child(3) .hi-img{background-image:url("assets/costa-baiona-highlight-v160.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}
#screen-route-costa .highlights .highlight-grid article:nth-child(4) .hi-img{background-image:url("assets/costa-vigo-highlight-v160.webp") !important;background-position:center center !important;background-size:cover !important;background-repeat:no-repeat !important;}

/* v1.61 — homepage-only mobile layout. Desktop and other pages untouched. */
@media (max-width: 760px) {
  body:has(#screen-start.home-v100) { overflow-x: hidden !important; }
  body:has(#screen-start.home-v100) .topbar {
    position: relative !important; width:100% !important; max-width:100% !important;
    margin:0 !important; padding:12px 16px 14px !important;
    height:auto !important; min-height:0 !important;
    display:grid !important; grid-template-columns: 72px minmax(0,1fr) !important;
    grid-template-areas: "brand actions" "nav nav" !important;
    align-items:center !important; column-gap:12px !important; row-gap:12px !important;
    box-sizing:border-box !important; background:#030504 !important;
  }
  body:has(#screen-start.home-v100) .topbar .brand {
    grid-area:brand !important; width:72px !important; max-width:72px !important;
    min-width:0 !important; height:66px !important; margin:0 !important;
  }
  body:has(#screen-start.home-v100) .topbar .brand .tipica-brand-logo {
    max-width:72px !important; height:62px !important;
  }
  body:has(#screen-start.home-v100) .topbar .top-actions {
    grid-area:actions !important; display:flex !important; justify-self:end !important;
    max-width:100% !important; min-width:0 !important; gap:0 !important;
  }
  body:has(#screen-start.home-v100) .topbar .top-upload-answers {
    max-width:100% !important; min-width:0 !important; width:auto !important;
    white-space:normal !important; text-align:center !important;
    padding:10px 12px !important; font-size:clamp(14px,4vw,19px) !important;
    line-height:1.15 !important; box-sizing:border-box !important;
  }
  body:has(#screen-start.home-v100) .topbar .language {display:none !important;}
  body:has(#screen-start.home-v100) .topbar .main-nav {
    grid-area:nav !important; order:unset !important; width:100% !important;
    min-width:0 !important; margin:0 !important; padding:12px 0 2px !important;
    display:flex !important; flex-wrap:wrap !important; justify-content:center !important;
    gap:clamp(20px,8vw,42px) !important; border-top:1px solid rgba(205,169,93,.3) !important;
    font-size:clamp(17px,5vw,23px) !important; box-sizing:border-box !important;
  }
  body:has(#screen-start.home-v100) .topbar .main-nav a {position:relative !important;white-space:nowrap !important;}
  body:has(#screen-start.home-v100) #screen-start.home-v100,
  body:has(#screen-start.home-v100) .home-v100-stage {
    width:100% !important; min-width:0 !important; max-width:100% !important;
    height:auto !important; min-height:0 !important; aspect-ratio:auto !important;
    overflow:hidden !important; box-sizing:border-box !important;
  }
  body:has(#screen-start.home-v100) .home-v100-stage {
    background:linear-gradient(rgba(4,22,16,.14),rgba(4,22,16,.65)),url('assets/homepage-integrated-v129.webp') 28% 10%/auto 100% no-repeat,#08231a !important;
    padding:30px 16px 48px !important;
  }
  body:has(#screen-start.home-v100) .home-v100-art,
  body:has(#screen-start.home-v100) .home-v100-start {display:none !important;}
  body:has(#screen-start.home-v100) .mobile-home-content {
    display:flex !important; flex-direction:column !important; align-items:center !important;
    text-align:center !important; width:100% !important; max-width:480px !important;
    margin:0 auto !important; padding:38px 20px 30px !important;
    box-sizing:border-box !important; border:1px solid #b48b49 !important;
    border-radius:14px !important; line-height:1.4 !important;
    color:#17241a !important;
    background:linear-gradient(150deg,rgba(252,237,198,.97),rgba(237,210,160,.96)) !important;
    box-shadow:0 15px 40px rgba(0,0,0,.4),inset 0 0 0 5px rgba(124,83,34,.1) !important;
  }
  .mobile-home-kicker {font:600 10px/1.5 Inter,sans-serif;letter-spacing:.23em;color:#815d31;margin-bottom:15px;}
  .mobile-home-content h1 {font:600 clamp(39px,11vw,58px)/.95 'Cormorant Garamond',Georgia,serif;margin:0 0 18px;overflow-wrap:normal;}
  .mobile-home-subtitle {font:500 clamp(22px,6vw,30px)/1.08 'Cormorant Garamond',Georgia,serif;margin:0 0 24px;}
  .mobile-home-intro {font:15px/1.65 Inter,sans-serif;margin:0 0 28px;}
  .mobile-home-cta {display:block;width:100%;box-sizing:border-box;padding:16px 10px;border:1px solid #d5b367;border-radius:7px;background:#073c2e;color:#f8e0a6;text-decoration:none;font:600 clamp(14px,4.2vw,18px)/1.3 'Cormorant Garamond',Georgia,serif;box-shadow:0 4px 12px #47371c66;}
  .mobile-home-note {font:11px/1.5 Inter,sans-serif;color:#6a5638;margin:22px 0 0;}
}
@media (min-width:761px) { .mobile-home-content {display:none !important;} }

/* v1.62 — mobile QUESTIONNAIRE only. Desktop (>=761px) remains unchanged. */
@media (max-width:760px) {
  html,body {max-width:100%;overflow-x:hidden;}
  body.quiz-mode .topbar {
    position:relative!important;inset:auto!important;width:100%!important;
    height:auto!important;min-height:0!important;padding:12px 14px 13px!important;
    margin:0!important;box-sizing:border-box!important;
    display:grid!important;grid-template-columns:80px minmax(0,1fr)!important;
    grid-template-areas:"brand actions" "nav nav"!important;
    gap:10px 12px!important;align-items:center!important;
    background:#030705!important;
  }
  body.quiz-mode .topbar .brand {
    grid-area:brand!important;width:80px!important;max-width:80px!important;
    min-width:0!important;height:68px!important;margin:0!important;
  }
  body.quiz-mode .topbar .brand .tipica-brand-logo {
    height:64px!important;max-width:80px!important;width:auto!important;
  }
  body.quiz-mode .topbar .top-actions {
    grid-area:actions!important;display:flex!important;flex-wrap:nowrap!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    gap:8px!important;justify-content:flex-end!important;align-items:stretch!important;
    margin:0!important;padding:0!important;
  }
  body.quiz-mode .topbar .top-actions .language,
  body.quiz-mode .topbar .top-actions #startTop {display:none!important;}
  body.quiz-mode .topbar .top-upload-answers {
    flex:1 1 auto!important;width:auto!important;min-width:0!important;
    max-width:none!important;padding:10px 8px!important;
    white-space:normal!important;font-size:clamp(12px,3.5vw,17px)!important;
    line-height:1.12!important;text-align:center!important;box-sizing:border-box!important;
  }
  body.quiz-mode .topbar #restartTop:not(.hidden) {
    flex:0 0 82px!important;min-width:0!important;width:82px!important;
    margin:0!important;padding:8px 5px!important;white-space:normal!important;
    font-size:clamp(12px,3.4vw,16px)!important;line-height:1.12!important;
    box-sizing:border-box!important;text-align:center!important;
  }
  body.quiz-mode .topbar .main-nav {
    grid-area:nav!important;width:100%!important;min-width:0!important;
    display:flex!important;justify-content:center!important;flex-wrap:wrap!important;
    gap:clamp(20px,8vw,42px)!important;margin:0!important;
    padding:11px 0 1px!important;border-top:1px solid rgba(205,169,93,.32)!important;
    box-sizing:border-box!important;font-size:clamp(18px,5vw,23px)!important;
  }
  body.quiz-mode .topbar .main-nav a {white-space:nowrap!important;}
  #screen-quiz.epic-quiz.active {
    width:100%!important;min-width:0!important;max-width:100%!important;
    margin:0!important;padding:0 0 30px!important;overflow:hidden!important;
    background:#09291e!important;background-image:none!important;
  }
  #screen-quiz.epic-quiz::before,
  #screen-quiz.epic-quiz::after,
  #screen-quiz .epic-steps,
  #screen-quiz .epic-vista,
  #screen-quiz .epic-route-ribbon {display:none!important;}
  #screen-quiz .scene-stage,#screen-quiz .scene-canvas {
    display:block!important;width:100%!important;max-width:100%!important;
    height:auto!important;min-height:0!important;aspect-ratio:auto!important;
    position:relative!important;inset:auto!important;
    transform:none!important;background:none!important;overflow:visible!important;
  }
  #screen-quiz .quiz-wrap {
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding:0!important;margin:0!important;box-sizing:border-box!important;
  }
  #screen-quiz .progress-row {
    display:grid!important;position:relative!important;inset:auto!important;
    grid-template-columns:minmax(0,1fr)!important;gap:10px!important;
    width:100%!important;height:auto!important;max-width:100%!important;
    margin:0!important;padding:15px 18px 17px!important;box-sizing:border-box!important;
    background:#073d2d!important;border-top:1px solid #b68c45!important;
    border-bottom:1px solid #b68c45!important;
  }
  #screen-quiz .question-meta {display:flex!important;align-items:center!important;
    justify-content:space-between!important;gap:12px!important;min-width:0!important;}
  #screen-quiz .question-meta span {font-size:12px!important;letter-spacing:.08em!important;
    white-space:normal!important;color:#f5dca3!important;}
  #screen-quiz .question-meta strong {font-size:17px!important;margin:0!important;
    text-align:right!important;white-space:normal!important;color:#f6e8ca!important;}
  #screen-quiz .progress-track {width:100%!important;margin:0!important;padding:0!important;
    min-width:0!important;overflow:visible!important;}
  #screen-quiz .progress {height:9px!important;width:100%!important;border-radius:999px!important;
    overflow:hidden!important;border:1px solid #b99049!important;background:#0b2a21!important;}
  #screen-quiz .progress>div {height:100%!important;}
  #screen-quiz .journey-note {display:none!important;}
  #screen-quiz .question-shell {
    position:relative!important;inset:auto!important;width:calc(100% - 20px)!important;
    max-width:100%!important;min-width:0!important;
    margin:12px 10px 0!important;padding:30px 22px 44px!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    box-sizing:border-box!important;overflow:visible!important;
  }
  #screen-quiz .planner-chapter {max-width:100%!important;min-width:0!important;}
  #screen-quiz .planner-chapter h1 {font-size:clamp(34px,9vw,44px)!important;line-height:1.02!important;}
  #screen-quiz .planner-question-box h2,
  #screen-quiz .question-shell h2 {font-size:clamp(32px,8.7vw,43px)!important;
    line-height:1.07!important;overflow-wrap:break-word!important;}
  #screen-quiz .question-subtitle {font-size:clamp(15px,4vw,19px)!important;line-height:1.35!important;}
  #screen-quiz #answers {width:100%!important;max-width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}
  #screen-quiz #answers .answer {min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
  #screen-quiz .quiz-nav {width:100%!important;max-width:100%!important;
    display:flex!important;gap:12px!important;justify-content:space-between!important;}
  #screen-quiz .quiz-nav .primary {min-width:95px!important;max-width:60%!important;}
}

/* v1.64 — mobile questionnaire only. Desktop remains unchanged. */
@media (max-width:760px) {
  /* Keep the existing SVG pilgrim completely inside the progress bar at 1/15. */
  #screen-quiz .scene-canvas .pilgrim-progress-icon {
    left:max(23px, var(--unused-progress-left, 0px))!important;
    width:42px!important;height:44px!important;
    z-index:20!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    overflow:visible!important;
    pointer-events:none!important;
  }
  #screen-quiz .scene-canvas .pilgrim-progress-icon svg {
    display:block!important;width:30px!important;height:36px!important;
    overflow:visible!important;
  }
  /* Cover the ornamental lettering baked into the parchment image so the
     live chapter heading is not superimposed on its background counterpart. */
  #screen-quiz .scene-canvas .planner-chapter {
    position:relative!important;z-index:5!important;
    box-sizing:border-box!important;
    width:100%!important;max-width:100%!important;
    padding:13px 12px 14px!important;
    margin:0 auto 15px!important;
    background:#f4dfb8!important;
    border:1px solid rgba(130,83,37,.26)!important;
    border-radius:8px!important;
    box-shadow:0 2px 8px rgba(74,43,17,.12)!important;
  }
  #screen-quiz .scene-canvas .planner-chapter h1 {
    margin:0!important;padding:0!important;
    font-size:clamp(34px,9vw,44px)!important;
    line-height:1.08!important;color:#24170e!important;
    text-shadow:none!important;
  }
  #screen-quiz .scene-canvas .planner-chapter p {
    margin:5px 0 0!important;padding:0!important;
    font-size:clamp(17px,4.6vw,22px)!important;
    line-height:1.25!important;color:#713a24!important;
  }
  #screen-quiz .scene-canvas .planner-chapter i {display:none!important;}
}

/* v1.65 — mobile-only: crop the pale edge baked into quiz photography. */
@media(max-width:760px){
 #screen-quiz .scene-canvas #answers.visual-answers .answer .answer-scene{
   background-size:cover, 125% auto!important;
   background-position:center center, 62% center!important;
   background-repeat:no-repeat!important;
 }
}

/* v1.66: MOBILE ONLY — icon must not be a child of the overflow:hidden bar. */
.mobile-pilgrim-icon{display:none;}
@media(max-width:760px){
  #screen-quiz .scene-canvas .progress-track{position:relative!important;height:48px!important;display:flex!important;align-items:flex-end!important;overflow:visible!important;padding:0 0 3px!important;}
  #screen-quiz .scene-canvas .progress-track>.progress{flex:0 0 100%!important;}
  #screen-quiz .scene-canvas .pilgrim-progress-track>.pilgrim-progress-icon{display:none!important;}
  #screen-quiz .scene-canvas .progress-track>.mobile-pilgrim-icon{
    display:block!important;position:absolute!important;top:0!important;
    width:36px!important;height:43px!important;z-index:100!important;
    transform:translateX(-50%)!important;overflow:visible!important;
    color:#f3ce65!important;filter:drop-shadow(0 2px 3px #06241a)!important;
    pointer-events:none!important;opacity:1!important;visibility:visible!important;
  }
  #screen-quiz .scene-canvas .progress-track>.mobile-pilgrim-icon svg{
    display:block!important;width:36px!important;height:43px!important;overflow:visible!important;
  }
}

/* v1.67 — mobile-only: pilgrim follows actual question progress.
   Existing left: ... !important prevented the previous inline position. */
@media(max-width:760px){
  #screen-quiz .scene-canvas .progress-track>.mobile-pilgrim-icon{
    left:clamp(18px,var(--mobile-pilgrim-position,6.6667%),calc(100% - 18px))!important;
  }
}

/* v1.68 — Camino Francés route stop labels, mobile only. Desktop unchanged. */
@media (max-width: 760px) {
  .frances-route-band .route-strip {
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:0!important;
    width:100%!important;
    overflow:visible!important;
    margin-top:25px!important;
    padding:4px 0 4px 12px!important;
    font-size:15px!important;
    line-height:1.45!important;
  }
  .frances-route-band .route-strip span {
    display:block!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    padding:7px 0 7px 18px!important;
    border-left:1px solid rgba(215,173,85,.65)!important;
    position:relative!important;
    max-width:100%!important;
  }
  .frances-route-band .route-strip span::before {
    content:'';
    position:absolute;
    left:-4px;top:calc(50% - 4px);
    width:7px;height:7px;
    border-radius:50%;
    background:#d7ad55;
  }
  .frances-route-band .route-strip i {display:none!important;}
}

/* v1.69 — Mobile route hero: balanced 4% side gutters, no clipped text.
   Strictly scoped to phone widths; desktop declarations untouched. */
@media (max-width: 760px) {
  .route-page .frances-hero {
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:56px 4% 66px!important;
    overflow:hidden!important;
  }
  .route-page .frances-copy {
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:break-word!important;
  }
  .route-page .frances-copy h1 {
    font-size:clamp(49px,12vw,68px)!important;
    line-height:.94!important;
    max-width:100%!important;
    overflow-wrap:break-word!important;
  }
  .route-page .frances-copy .frances-tagline {
    font-size:clamp(24px,6.4vw,30px)!important;
    line-height:1.2!important;
    max-width:100%!important;
  }
  .route-page .frances-copy .frances-intro {
    max-width:100%!important;
    font-size:clamp(16px,4.2vw,19px)!important;
    line-height:1.5!important;
    overflow-wrap:break-word!important;
  }
  .route-page .frances-copy .primary {
    box-sizing:border-box!important;
    max-width:100%!important;
    white-space:normal!important;
  }
}

/* v1.70 — Mobile-only swipe hints for route detail navigation. */
@media (max-width:760px) {
  .detail-tabs-swipe-shell {
    position:sticky;
    top:0;
    z-index:7;
    width:100%;
    min-width:0;
    background:#0d2119;
  }
  .detail-tabs-swipe-shell .detail-tabs {
    position:relative;
    top:auto;
    z-index:1;
    gap:12px;
    padding:12px 38px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .detail-tabs-swipe-shell .detail-tabs::-webkit-scrollbar {display:none;}
  .detail-tabs-swipe-shell .detail-tabs a {flex:0 0 auto;}
  .detail-tabs-swipe-arrow {
    position:absolute;
    top:0;
    bottom:0;
    width:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3;
    border:0;
    padding:0;
    font-size:25px;
    font-family:Georgia,serif;
    color:#e4c47b;
    background:linear-gradient(90deg,#0d2119 72%,rgba(13,33,25,0));
    cursor:pointer;
    transition:opacity .15s ease;
  }
  .detail-tabs-swipe-arrow.is-hidden {opacity:0;pointer-events:none;}
  .detail-tabs-swipe-arrow--prev {left:0;}
  .detail-tabs-swipe-arrow--next {right:0; background:linear-gradient(270deg,#0d2119 72%,rgba(13,33,25,0));}
  .detail-tabs-swipe-arrow:focus-visible {outline:2px solid #e4c47b;outline-offset:-3px;}
}
@media (min-width:761px) {
  .detail-tabs-swipe-shell {display:contents;}
  .detail-tabs-swipe-arrow {display:none;}
}
@media print {.detail-tabs-swipe-arrow {display:none!important;}}

/* v1.71: keep navigation controls clearly visible on small screens. */
@media (max-width:760px) {
  .detail-tabs-swipe-shell { display:block!important; position:relative!important; max-width:100%!important; overflow:hidden!important; }
  .detail-tabs-swipe-shell .detail-tabs { display:flex!important; width:100%!important; max-width:100%!important; min-width:0!important; flex-wrap:nowrap!important; overflow-x:auto!important; padding-inline:42px!important; box-sizing:border-box!important; }
  .detail-tabs-swipe-shell .detail-tabs a { flex:0 0 auto!important; white-space:nowrap!important; }
  .detail-tabs-swipe-shell .detail-tabs-swipe-arrow { display:flex!important; position:absolute!important; top:0!important; bottom:0!important; width:38px!important; font-size:30px!important; font-weight:bold!important; text-shadow:0 1px 3px #000!important; }
}

/* v1.72 — mobile contrast fix for the stage-plan heading.
   Scope strictly to small screens; desktop styling remains unchanged. */
@media screen and (max-width: 767px) {
  #routeDetail .personal-plan.planner-first .section-head h4 {
    color: #f8e8bf !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .32);
  }
}

/* v1.73 — corrected selector: planner is rendered inside #detailPanel, not #routeDetail.
   Mobile only; desktop untouched. */
@media screen and (max-width: 767px) {
  .personal-plan.planner-first .section-head h4,
  #detailPanel .personal-plan.planner-first .section-head h4,
  #screen-result .personal-plan.planner-first .section-head h4 {
    color: #fff0cf !important;
    -webkit-text-fill-color: #fff0cf !important;
    text-shadow: 0 2px 3px rgba(0,0,0,.4) !important;
    opacity: 1 !important;
  }
}

/* v1.74 — Mobile-only accessible contrast across dark-green route content.
   Explicit section selectors avoid changing text inside parchment/light cards. */
@media screen and (max-width: 767px) {
  #routeDetail .personal-plan .section-head h4,
  #routeDetail .recommended-section .section-head h4,
  #routeDetail .live-recommendation-host .section-head h4,
  #routeDetail .personal-plan .section-head h3,
  #routeDetail .recommended-section .section-head h3,
  #routeDetail .personal-plan .section-head h2,
  #routeDetail .recommended-section .section-head h2,
  .personal-plan .section-head h4,
  .recommended-section .section-head h4,
  .personal-plan .section-head h3,
  .recommended-section .section-head h3,
  .personal-plan .section-head h2,
  .recommended-section .section-head h2 {
    color:#fff0cf !important;
    -webkit-text-fill-color:#fff0cf !important;
    opacity:1 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.35) !important;
  }
  #routeDetail .personal-plan .section-head > p,
  #routeDetail .recommended-section .section-head > p,
  #routeDetail .recommended-section > p,
  #routeDetail .personal-plan > p,
  #routeDetail .recommendation-note,
  #routeDetail .plan-message,
  .personal-plan .section-head > p,
  .recommended-section .section-head > p,
  .recommended-section > p,
  .personal-plan > p,
  .recommended-section .recommendation-note,
  .personal-plan .plan-message {
    color:#e8e1d1 !important;
    -webkit-text-fill-color:#e8e1d1 !important;
    opacity:1 !important;
  }
  #routeDetail .personal-plan .section-kicker,
  #routeDetail .recommended-section .section-kicker,
  .personal-plan .section-kicker,
  .recommended-section .section-kicker {
    color:#e3bf72 !important;
    -webkit-text-fill-color:#e3bf72 !important;
    opacity:1 !important;
  }
}

/* v1.75 — mobile-only recommendation heading/status layout.
   Desktop CSS and desktop markup remain unchanged. */
@media screen and (max-width: 767px) {
  #routeDetail .recommended-section .section-head,
  .recommended-section .section-head {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    min-width:0 !important;
  }
  #routeDetail .recommended-section .section-head > div,
  .recommended-section .section-head > div {
    min-width:0 !important;
    max-width:100% !important;
  }
  #routeDetail .recommended-section .recommendation-status,
  .recommended-section .recommendation-status {
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:11px 13px !important;
    border-radius:12px !important;
    font-size:11px !important;
    line-height:1.55 !important;
    letter-spacing:.055em !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:none !important;
  }
  .recommended-section .section-head h4 {
    overflow-wrap:break-word !important;
    line-height:1.15 !important;
  }
  .camino-mobile-version {
    display:block !important;
    margin:24px auto 12px;
    text-align:center;
    font:10px/1.5 Arial,sans-serif;
    letter-spacing:.08em;
    color:#b8a47a;
    opacity:.75;
  }
}

/* v1.76 — review introduction: mobile-only alignment and ornament spacing. */
@media screen and (max-width:767px) {
  #screen-review .review-paper { padding-top:76px !important; }
  #screen-review .review-paper-ornament { top:28px !important; left:50% !important; transform:translateX(-50%) !important; line-height:1 !important; }
  #screen-review .review-intro { box-sizing:border-box !important; width:100% !important; padding:0 8px 24px !important; margin:0 auto 24px !important; text-align:center !important; border-bottom:1px solid rgba(123,82,34,.3) !important; }
  #screen-review .review-intro::before { display:none !important; content:none !important; }
  #screen-review .review-intro h1 { margin:0 auto 14px !important; font-size:clamp(42px,11vw,60px) !important; line-height:1.05 !important; letter-spacing:0 !important; text-align:center !important; }
  #screen-review .review-intro p { box-sizing:border-box !important; margin:0 auto !important; max-width:32ch !important; font-size:clamp(18px,4.8vw,23px) !important; line-height:1.35 !important; text-align:center !important; overflow-wrap:normal !important; }
  #screen-review .review-intro::after { position:absolute !important; left:50% !important; bottom:-5px !important; transform:translateX(-50%) !important; margin:0 !important; padding:0 10px !important; background:#efd9a8 !important; }
}

/* v1.77 — mobile review: compact top spacing and independent heading panel.
   No desktop selectors or rules are changed. */
@media screen and (max-width:767px) {
  #screen-review.review-parchment-screen { padding-top:12px!important; }
  #screen-review .review-scene { padding-top:0!important; padding-bottom:20px!important; }
  #screen-review .review-paper { padding:34px 18px 30px!important; background-position:center top!important; }
  #screen-review .review-paper-ornament { display:none!important; }
  #screen-review .review-intro {
    position:relative!important; display:block!important; box-sizing:border-box!important;
    width:100%!important; max-width:100%!important; margin:0 auto 22px!important;
    padding:20px 14px 22px!important; border:1px solid rgba(156,112,48,.65)!important;
    border-radius:14px!important; background:rgba(255,244,212,.94)!important;
    box-shadow:0 4px 14px rgba(77,47,19,.13)!important;
    text-align:center!important;
  }
  #screen-review .review-intro::before,
  #screen-review .review-intro::after { display:none!important; content:none!important; }
  #screen-review .review-intro h1 {
    display:block!important; width:100%!important; margin:0 auto 9px!important;
    font-size:clamp(34px,9vw,46px)!important; line-height:1.08!important;
    color:#17372b!important; text-align:center!important;
  }
  #screen-review .review-intro p {
    display:block!important; width:100%!important; max-width:34ch!important;
    margin:0 auto!important; padding:0!important;
    font-size:clamp(17px,4.3vw,20px)!important; line-height:1.42!important;
    color:#53371d!important; text-align:center!important;
  }
}

/* v1.78 — mobile-only safe percentage inset for practical route character. */
@media screen and (max-width:767px) {
  #routeDetail .practical-section {
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:6% !important;
    padding-right:6% !important;
  }
  #routeDetail .practical-section .practical-grid {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
    gap:14px !important;
  }
  #routeDetail .practical-section .practical-item {
    box-sizing:border-box !important;
    min-width:0 !important;
    width:100% !important;
    height:auto !important;
    padding:18px 6% !important;
  }
  #routeDetail .practical-section .practical-item small,
  #routeDetail .practical-section .practical-item p {
    max-width:100% !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    white-space:normal !important;
  }
}

/* v1.79 — unified mobile content gutters. Desktop is intentionally untouched.
   Use one 6% side inset for primary mobile content; avoid nested padding
   on the result comparison, which previously made its green cards too narrow. */
@media screen and (max-width:767px) {
  #screen-result.result-screen,
  body.standalone-results-page #screen-result.result-screen {
    box-sizing:border-box!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #screen-result .result-wrap,
  body.standalone-results-page #screen-result .result-wrap {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:6%!important;
    padding-right:6%!important;
  }
  #screen-result .top-comparison,
  #screen-result .decision-comparison,
  #screen-result .comparison-grid,
  #screen-result .comparison-card {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  #screen-result .top-comparison,
  #screen-result .decision-comparison {
    margin-left:0!important;
    margin-right:0!important;
  }
  #screen-result .decision-comparison {
    padding-left:0!important;
    padding-right:0!important;
    border-left:0!important;
    border-right:0!important;
  }
  #screen-result .comparison-grid {
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  #screen-result .comparison-card {
    margin-left:0!important;
    margin-right:0!important;
  }
  #screen-result .comparison-card h4,
  #screen-result .comparison-card p {
    overflow-wrap:break-word!important;
  }
  /* Other major phone content blocks share the same outer inset. */
  #routeDetail .practical-section {padding-left:6%!important;padding-right:6%!important;}
}

/* v1.80 — restore route comparison thumbnails on mobile for every route.
   Desktop styling intentionally untouched. */
@media screen and (max-width:767px) {
  #screen-result .comparison-card .comparison-route-photo {
    display:block!important;
    width:100%!important;
    height:118px!important;
    min-height:118px!important;
    background-position:center center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
  }
  #screen-result .comparison-card[data-route="frances"] .comparison-route-photo{background-image:url('assets/hero-frances-v052.webp')!important}
  #screen-result .comparison-card[data-route="norte"] .comparison-route-photo{background-image:url('assets/hero-norte-v052.webp')!important}
  #screen-result .comparison-card[data-route="primitivo"] .comparison-route-photo{background-image:url('assets/hero-primitivo-v052.webp')!important}
  #screen-result .comparison-card[data-route="portugues"] .comparison-route-photo{background-image:url('assets/hero-portugues-v052.webp')!important}
  #screen-result .comparison-card[data-route="costa"] .comparison-route-photo{background-image:url('assets/hero-costa-v052.webp')!important}
  #screen-result .comparison-card[data-route="ingles"] .comparison-route-photo{background-image:url('assets/hero-ingles-v052.webp')!important}
  #screen-result .comparison-card[data-route="plata"] .comparison-route-photo{background-image:url('assets/hero-plata-v052.webp')!important}
  #screen-result .comparison-card[data-route="invierno"] .comparison-route-photo{background-image:url('assets/hero-invierno-v052.webp')!important}
}

/* v1.82 — mobile-only route highlights: prevent clipping and give all content a consistent inset. */
@media screen and (max-width:767px) {
  #routeDetail .route-lower {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:24px 6% 26px !important;
    margin:0 !important;
  }
  #routeDetail .route-highlights,
  #routeDetail .route-plan-card {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  #routeDetail .route-highlights h4 {
    font-size:clamp(28px,8vw,38px) !important;
    line-height:1.12 !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
    margin:12px 0 22px !important;
  }
  #routeDetail .route-highlights .highlight-grid {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  #routeDetail .route-highlights .highlight-grid > div {
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:18px 6% !important;
    overflow-wrap:anywhere !important;
  }
  #routeDetail .route-highlights .highlight-grid strong {
    display:block !important;
    font-size:clamp(21px,6vw,27px) !important;
    line-height:1.22 !important;
    white-space:normal !important;
  }
  #routeDetail .route-plan-card {margin-top:22px !important;}
  #routeDetail .route-print {width:100% !important;max-width:100% !important;box-sizing:border-box !important;white-space:normal !important;}
  #routeDetail .next-phase-note {margin:0 6% 28px !important;box-sizing:border-box !important;max-width:88% !important;}
}