/* HorizonLuna – "Horizon descent"
   Graphite night, turquoise and blue light. Each answer sinks the camera
   through one curved layer of a small web planet. */

@font-face{font-family:'Fraunces';font-weight:500;font-display:swap;src:url(../fonts/fraunces-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:600;font-display:swap;src:url(../fonts/fraunces-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:300;font-display:swap;src:url(../fonts/jost-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:500;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format('woff2')}

:root{
  --H:100vh;
  --ink:#121519;
  --graphite:#1b1f24;
  --graphite-2:#232930;
  --line:#343c46;
  --turq:#22d3c5;
  --turq-soft:rgba(34,211,197,.16);
  --blue:#2f7bf6;
  --blue-deep:#0b2a5c;
  --text:#eef3f5;
  --muted:#9aa6b2;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Jost','Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'Cascadia Code','Consolas',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--text);font-family:var(--sans);font-weight:300;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}

/* ---------- The world ---------- */
.viewport{position:fixed;inset:0;overflow:hidden;background:var(--ink)}
.stars{position:absolute;left:0;right:0;top:0;height:calc(var(--H) * 2.2);will-change:transform}
.stars span{position:absolute;font-family:var(--mono);color:#cfe9ff;opacity:.0;animation:twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.08}50%{opacity:var(--o,.6)}}

.world{position:absolute;left:0;right:0;top:0;height:calc(var(--H) * 6);will-change:transform;
  background:radial-gradient(120% 60% at 50% 40%,#1a1f26 0%,var(--ink) 70%)}
.layer{height:var(--H)}

.cap{position:absolute;left:-35vw;width:170vw;overflow:hidden;
  border-top-left-radius:50% var(--ry);border-top-right-radius:50% var(--ry)}
.cap::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 2px 0 var(--rim),inset 0 30px 60px -30px var(--rim)}
/* soft light rising over each horizon (outer shadow is not clipped by the cap's overflow) */
.cap{box-shadow:0 -6px 70px -18px var(--rim),0 -1px 18px -6px var(--rim)}

.cap-crust{--rim:rgba(47,123,246,.85);background:linear-gradient(#20262d 0,#191d22 40%,#15181c 100%)}
.cap-sea{--rim:rgba(34,211,197,.9);background:linear-gradient(#0f3d41 0,#0b2c33 35%,#0a2230 100%)}
.cap-cables{--rim:rgba(47,123,246,.8);background:linear-gradient(#142034 0,#101a2b 50%,#0d1626 100%)}
.cap-servers{--rim:rgba(34,211,197,.7);background:linear-gradient(#0c2448 0,#0a1d3b 50%,#081832 100%)}
.cap-core{--rim:rgba(120,240,230,1);background:radial-gradient(60% 45% at 50% 38%,#0f4a78 0%,#071a38 55%,#050f22 100%)}

/* Crust: tag ring along the rim + faint strata of code */
.rim-text{position:absolute;left:0;top:0;width:100%;height:calc(var(--ry) * 2);overflow:visible}
.rim-text path{fill:none}
.rim-text text{font-family:var(--mono);font-size:15px;letter-spacing:.32em;fill:rgba(126,178,255,.55)}
.strata{position:absolute;left:0;right:0;top:calc(var(--ry) * .55);bottom:0;padding-left:35vw;font-family:var(--mono);font-size:13px;line-height:2.1;color:rgba(160,180,205,.075);white-space:pre;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent 0,#000 calc(var(--H) * .25));mask-image:linear-gradient(transparent 0,#000 calc(var(--H) * .25))}

/* Data sea: rising 0/1 bubbles */
.bubbles{position:absolute;left:35vw;right:35vw;top:0;bottom:0}
.bubbles span{position:absolute;bottom:-40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(34,211,197,.55);background:rgba(34,211,197,.08);color:rgba(170,255,246,.75);font-family:var(--mono);
  animation:rise var(--d,9s) linear var(--dl,0s) infinite}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(var(--w,12px),calc(var(--H) * -.5))}90%{opacity:1}100%{transform:translate(0,calc(var(--H) * -1.05));opacity:0}}

/* Cables: dashed light pulses */
.cables{position:absolute;left:35vw;width:100vw;top:calc(var(--ry) * .6);height:calc(var(--H) * .9)}
.cables{opacity:.5;-webkit-mask-image:linear-gradient(transparent,#000 35%);mask-image:linear-gradient(transparent,#000 35%)}
.cables path{fill:none;stroke-width:2.2}
.cables .base{stroke:rgba(80,110,150,.35)}
.cables .pulse{stroke-dasharray:30 220;stroke-linecap:round;animation:flow var(--d,4s) linear infinite}
@keyframes flow{to{stroke-dashoffset:-1000}}

/* Servers: racks with blinking LEDs */
.racks{position:absolute;left:35vw;width:100vw;top:calc(var(--ry) * .9);height:calc(var(--H) * .8);display:flex;justify-content:center;gap:clamp(10px,2.4vw,34px);padding:0 4vw}
.rack{flex:1;max-width:120px;border:1px solid rgba(120,160,220,.2);border-radius:8px;background:rgba(5,14,30,.55);padding:10px 8px;display:flex;flex-direction:column;gap:9px}
.rack i{display:flex;gap:5px;height:12px;align-items:center;border-bottom:1px solid rgba(120,160,220,.08);padding-bottom:9px}
.rack b{width:5px;height:5px;border-radius:50%;background:var(--turq);opacity:.25;animation:blink var(--d,1.6s) steps(2) var(--dl,0s) infinite}
.rack b.bl{background:var(--blue)}
@keyframes blink{50%{opacity:1}}

/* Core */
.core{position:absolute;left:50%;top:calc(var(--H) * 1.12);width:0;height:0}
.core i{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.core i:nth-child(1){width:190px;height:190px;background:radial-gradient(circle,#c9fff9 0%,#22d3c5 35%,rgba(47,123,246,.0) 70%);animation:pulse 3.2s ease-in-out infinite}
.core i:nth-child(2){width:300px;height:300px;border:1px solid rgba(34,211,197,.35);animation:ring 3.2s ease-out infinite}
.core i:nth-child(3){width:300px;height:300px;border:1px solid rgba(47,123,246,.35);animation:ring 3.2s ease-out 1.6s infinite}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.12)}}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}

/* Foreground drifting glyphs (fastest parallax layer) */
.fg{position:absolute;left:0;right:0;top:0;height:calc(var(--H) * 8);pointer-events:none;will-change:transform}
.fg span{position:absolute;font-family:var(--mono);color:rgba(34,211,197,.22);filter:blur(1.2px)}

.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 90% at 50% 45%,transparent 55%,rgba(5,7,10,.75) 100%)}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}

/* ---------- Helper robot ---------- */
.robot{position:absolute;left:0;top:32%;width:96px;z-index:5;transform-origin:50% 60%}
.r-body{transform-box:view-box}
.robot svg{width:100%;height:auto;overflow:visible}
.r-flame{transform-origin:45px 98px;transform:scaleY(.35)}
.r-eye{transform-box:fill-box;transform-origin:center}

/* ---------- UI on top ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:20px clamp(16px,3vw,32px)}
.brand{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.6rem);color:var(--text);text-decoration:none;letter-spacing:.01em}
.brand b{font-weight:600;color:var(--turq)}
.proto-tag{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:.35rem .8rem}

.panel{position:fixed;inset:0;z-index:10;display:flex;justify-content:center;align-items:flex-start;
  padding:max(15vh,96px) 20px 120px;overflow-y:auto;pointer-events:none}
.panel form{width:min(100%,760px);pointer-events:auto;text-align:center}
.q{display:none;border:0;min-width:0}
.q.is-active{display:block}
.q-title{display:block;width:100%;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin-bottom:2rem;color:var(--text)}
.q-num{display:block;font-family:var(--sans);font-weight:500;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--turq);margin-bottom:1rem}
.q-sub{color:var(--muted);max-width:34rem;margin:-1rem auto 1.75rem;line-height:1.6}
.opts{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-bottom:1.5rem}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.75rem 1.5rem;border-radius:999px;
  font-weight:500;font-size:1.02rem;background:rgba(20,24,29,.72);border:1.5px solid var(--line);backdrop-filter:blur(8px);
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.opt:hover span{border-color:rgba(34,211,197,.6)}
.opt input:checked+span{background:var(--turq);border-color:var(--turq);color:#06201e}
.opt input:focus-visible+span{outline:2px solid var(--turq);outline-offset:3px}
.confirm{display:inline-flex;align-items:center;gap:.6rem;min-height:3.2rem;padding:.75rem 2rem;border-radius:999px;border:0;
  background:var(--blue);color:#fff;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;transition:opacity .25s,transform .25s}
.confirm::after{content:"→"}
.confirm:disabled{opacity:.3;cursor:not-allowed}
.confirm:not(:disabled):hover{transform:translateY(-2px)}
.field{display:flex;flex-direction:column;gap:.35rem;text-align:left;margin-bottom:.9rem}
.field label{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--turq)}
.field input{min-height:3rem;padding:.7rem .9rem;border-radius:.7rem;font:inherit;font-size:1rem;color:var(--text);background:rgba(14,17,21,.8);border:1.5px solid var(--line)}
.field input:focus{outline:none;border-color:var(--turq)}
.other{max-width:28rem;margin:0 auto 1.25rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.q-form{background:rgba(16,19,24,.72);border:1px solid var(--line);border-radius:1.25rem;padding:clamp(1.1rem,3vw,2rem);backdrop-filter:blur(10px)}
.q-form .q-title{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:1.4rem}
.consent{display:flex;gap:.6rem;align-items:center;justify-content:center;margin:.4rem 0 1.25rem;color:var(--muted)}
.consent input{width:1.2rem;height:1.2rem;accent-color:var(--turq)}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;max-width:30rem;margin:0 auto}
.menu-grid a{display:flex;align-items:center;justify-content:center;min-height:3.75rem;border-radius:.9rem;text-decoration:none;color:var(--text);
  font-family:var(--serif);font-size:1.35rem;background:rgba(10,20,40,.6);border:1px solid rgba(34,211,197,.35);backdrop-filter:blur(8px)}
.menu-grid a:hover{border-color:var(--turq)}

.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(16px,3vw,32px) calc(16px + env(safe-area-inset-bottom))}
.back{min-height:2.9rem;padding:.5rem 1.3rem;border-radius:999px;background:rgba(16,19,24,.8);border:1.5px solid var(--line);font-weight:500}
.back:hover{border-color:var(--turq)}
.depth{margin-left:auto;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.depth b{font-family:var(--mono);color:var(--turq);font-weight:400;margin-right:.5rem}

@media (max-width:1180px){
  .robot{width:70px}
}
@media (max-width:640px){
  .panel{padding-top:88px}
  .q-title{font-size:clamp(1.75rem,8vw,2.3rem);margin-bottom:1.4rem}
  .opts{display:grid;grid-template-columns:1fr 1fr}
  .opts-wide{grid-template-columns:1fr}
  .opt span{width:100%;padding:.7rem .8rem}
  .confirm{width:100%;justify-content:center}
  .grid{grid-template-columns:1fr}
  .robot{width:58px}
  .rim-text text{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .stars span,.bubbles span,.cables .pulse,.rack b,.core i,.grain{animation:none!important}
}

/* Menu pages for the "Horizon descent" prototype: same night, horizon and robot,
   content on a calm glass sheet so it reads easily. Builds on horizon.css tokens. */

html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
body.page{background:var(--ink)}

/* Fixed background: code stars, a glowing horizon low in the view */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(120% 70% at 50% 30%,#1a1f26 0%,var(--ink) 70%)}
.bg .stars{height:100%}
.bg .horizon{position:absolute;left:-35vw;width:170vw;top:78vh;height:60vh;
  border-top-left-radius:50% 22vh;border-top-right-radius:50% 22vh;
  background:radial-gradient(60% 45% at 50% 20%,#0f4a78 0%,#071a38 55%,#050f22 100%);
  box-shadow:0 -6px 70px -18px rgba(34,211,197,.9),0 -1px 18px -6px rgba(34,211,197,.9),inset 0 2px 0 rgba(120,240,230,.9)}
.page-404 .bg .horizon{top:70vh;background:linear-gradient(#20262d,#15181c);box-shadow:0 -6px 70px -18px rgba(47,123,246,.85),inset 0 2px 0 rgba(47,123,246,.85)}

/* Menu */
.topbar{background:linear-gradient(to bottom,rgba(10,12,16,.85),rgba(10,12,16,0))}
.menu-wrap{position:relative}
.menu-btn{display:flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:.55rem 1.05rem;border-radius:999px;
  background:rgba(16,19,24,.85);border:1px solid rgba(34,211,197,.45);backdrop-filter:blur(10px);
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.menu-btn i{width:1.05rem;height:.65rem;border-block:2px solid var(--turq);position:relative}
.menu-btn i::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--turq)}
.menu-btn[aria-expanded="true"]{border-color:var(--turq)}
.menu-panel{position:absolute;right:0;top:calc(100% + .6rem);min-width:16rem;padding:.5rem;border-radius:1rem;
  background:rgba(16,19,24,.94);border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.menu-panel a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-radius:.65rem;
  color:var(--text);text-decoration:none;font-family:var(--serif);font-size:1.3rem}
.menu-panel a::after{content:"→";font-family:var(--sans);color:var(--muted);transition:transform .2s,color .2s}
.menu-panel a:hover,.menu-panel a[aria-current]{background:var(--turq-soft)}
.menu-panel a:hover::after{transform:translateX(3px);color:var(--turq)}
.menu-panel a[aria-current]{color:var(--turq)}
.menu-panel .small{font-family:var(--sans);font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);border-radius:0 0 .65rem .65rem;margin-top:.25rem}
.menu-panel .small::after{content:none}

/* Content sheet */
.sheet{position:relative;z-index:10;width:min(100% - 2rem,50rem);margin:110px auto 48px;
  background:rgba(14,17,21,.78);border:1px solid var(--line);border-radius:1.25rem;backdrop-filter:blur(12px);
  padding:clamp(1.5rem,5vw,3.25rem)}
.kicker{font-size:.75rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--turq);margin-bottom:.9rem}
.sheet h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.06;letter-spacing:-.01em;margin-bottom:1.25rem;text-wrap:balance}
.sheet h2{font-family:var(--serif);font-weight:500;font-size:1.55rem;margin:2.2rem 0 .6rem;color:var(--text)}
.sheet h3{font-family:var(--serif);font-weight:500;font-size:1.25rem;margin-bottom:.35rem}
.sheet p,.sheet li{color:#c9d2da;line-height:1.7}
.sheet p+p{margin-top:.9rem}
.sheet ul{padding-left:1.2rem;margin:.6rem 0}
.sheet a{color:var(--turq)}
.lead{font-size:1.15rem;color:var(--text)!important}

.cards{display:grid;gap:.9rem;margin-top:1.2rem}
@media(min-width:640px){.cards.two{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--line);border-radius:1rem;padding:1.15rem 1.25rem;background:rgba(255,255,255,.025);transition:border-color .25s,transform .25s}
.card:hover{border-color:rgba(34,211,197,.5);transform:translateY(-2px)}
.card .ico{font-family:var(--mono);color:var(--turq);font-size:.9rem;margin-bottom:.5rem;display:block}

.quote{margin-top:1.5rem;padding:clamp(1.25rem,4vw,2rem);border-radius:1.1rem;border:1px solid rgba(34,211,197,.35);background:linear-gradient(160deg,rgba(34,211,197,.08),rgba(47,123,246,.06))}
.quote blockquote{font-family:var(--serif);font-size:clamp(1.3rem,3.4vw,1.7rem);line-height:1.35;color:var(--text)}
.quote blockquote::before{content:"“";display:block;font-size:3.4rem;line-height:.6;color:var(--turq);margin-bottom:.4rem}
.quote figcaption{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;color:var(--muted)}
.quote figcaption strong{color:var(--text);font-weight:500}
.stars-rating{color:var(--turq);letter-spacing:.15em}

.faq details{border-bottom:1px solid var(--line);padding:1.05rem 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:var(--serif);font-size:1.2rem;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--turq);font-size:1.3rem;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.6rem}

.facts{display:grid;gap:.75rem;margin-top:1rem}
@media(min-width:640px){.facts{grid-template-columns:1fr 1fr}}
.facts div{border:1px solid var(--line);border-radius:.9rem;padding:1rem 1.15rem;background:rgba(255,255,255,.025)}
.facts dt{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--turq)}
.facts dd{font-family:var(--serif);font-size:1.3rem;margin-top:.2rem;word-break:break-word}
.facts dd a{color:var(--text)}

.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:3.1rem;padding:.75rem 1.7rem;border-radius:999px;background:var(--blue);color:#fff!important;
  text-decoration:none;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;transition:transform .25s}
.btn::after{content:"→"}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--text)!important}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

.updated{font-size:.88rem;color:var(--muted)!important}

/* 404 */
.lost{position:relative;z-index:10;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 1.25rem 30vh}
.lost .code{font-family:var(--mono);font-size:clamp(4.5rem,18vw,9rem);line-height:1;color:var(--turq);letter-spacing:-.04em}
.lost h1{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,6vw,3.4rem);line-height:1.08;margin:.6rem 0 1rem;text-wrap:balance}
.lost p{color:var(--muted);max-width:30rem;margin:0 auto 1.6rem;line-height:1.6}

/* Footer */
.foot{position:relative;z-index:10;display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.5rem;padding:1rem 1rem 1.5rem;font-size:.8rem;color:var(--muted)}
.foot a{color:var(--muted)}

/* Small robot keeping watch in the corner */
.page .robot{position:fixed;left:auto;top:auto;right:clamp(12px,3vw,32px);bottom:clamp(14px,4vh,40px);width:64px;z-index:15;cursor:pointer}
.page-404 .robot{position:relative;right:auto;bottom:auto;width:84px;margin:0 auto 1rem}

@media(max-width:640px){
  .sheet{margin-top:84px;border-radius:1rem}
  .menu-panel{position:fixed;left:.75rem;right:.75rem;top:64px;min-width:0}
  .btn{width:100%;justify-content:center}
  .page .robot{width:48px}
}
.after{margin-top:2rem}

/* quiz page uses the fixed full-screen layout from horizon.css */
html:has(body.journey),body.journey{height:100%;overflow:hidden}
.top-right{display:flex;align-items:center;gap:.75rem}
.consent a{color:var(--turq)}

/* Privacy policy over the quiz: answers stay where they are */
.privacy-sheet{margin:auto;width:min(100% - 2rem,46rem);max-height:min(88vh,52rem);padding:0;border:1px solid var(--line);border-radius:1.25rem;
  background:rgba(14,17,21,.97);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.privacy-sheet[open]{display:flex;flex-direction:column}
.privacy-sheet::backdrop{background:rgba(5,7,10,.72);backdrop-filter:blur(4px)}
.pv-top{padding:.9rem 1rem;border-bottom:1px solid var(--line);background:rgba(14,17,21,.98)}
.pv-scroll{overflow-y:auto;padding:1.5rem clamp(1.1rem,4vw,2.25rem) 1.75rem}
.pv-scroll h2#pv-title{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:1rem}
.pv-content h2{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin:1.5rem 0 .4rem}
.pv-content p,.pv-content li{color:#c9d2da;line-height:1.7}
.pv-content ul{padding-left:1.2rem}
.pv-content a{color:var(--turq)}
.pv-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.privacy-link{font-size:.78rem;color:var(--muted);margin:0 auto}
.privacy-link:hover{color:var(--turq)}

/* "Back to the questions" bar on the privacy page when a quiz is in progress */
.return-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin:0 0 1.75rem;padding:1rem 1.15rem;
  border:1px solid rgba(34,211,197,.45);border-radius:1rem;background:linear-gradient(160deg,rgba(34,211,197,.1),rgba(47,123,246,.07))}
.return-bar p{margin:0;color:var(--text)!important}
.return-bar.bottom{margin:2.25rem 0 0}
@media(max-width:640px){
  .privacy-sheet{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border:0}
  .pv-actions .confirm,.pv-actions .back{width:100%;justify-content:center}
  .privacy-link{display:none}
}
.return-bar .btn::after{content:none}

/* ==========================================================================
   Real-site additions
   ========================================================================== */
a{color:var(--turq)}
:focus-visible{outline:2px solid var(--turq);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--turq);color:#06201e;padding:.5rem 1rem;border-radius:.5rem}
.skip:focus{left:1rem;top:1rem}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{color:#ffb4a8;margin:0 0 1rem;font-weight:500}
.field input[aria-invalid="true"]{border-color:#ff8f80}
.confirm.is-busy{opacity:.7;pointer-events:none}
.confirm.is-busy::after{content:"";width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.send-failed{max-width:32rem;margin:0 auto 1.5rem;padding:1rem 1.25rem;border:1px solid rgba(34,211,197,.45);border-radius:1rem;background:rgba(10,20,40,.7);text-align:left}
.send-failed p{color:var(--text);margin-bottom:.9rem;line-height:1.6}
.send-failed .btn{width:auto}
.send-failed-alt{font-size:.85rem;color:var(--muted)!important;margin:.8rem 0 0!important}
.desk-again{margin-top:1.25rem;font-size:.9rem}
.desk-again a{color:var(--muted)}
.locked-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin:0 0 1.75rem;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:1rem;background:rgba(255,255,255,.03);color:var(--muted)}
.locked-note a{font-weight:500}
.opts-yn .opt span{min-width:8rem}

/* ==========================================================================
   Cookie consent bar (only rendered when Google Analytics is switched on)
   ========================================================================== */
.consent-bar{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));
  width:min(100% - 24px,46rem);display:grid;grid-template-columns:1fr auto;gap:1rem 1.5rem;align-items:center;
  padding:1.1rem 1.25rem 1.1rem 5.25rem;border-radius:1.1rem;
  background:rgba(14,17,21,.94);border:1px solid rgba(34,211,197,.4);backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.journey .consent-bar{bottom:calc(84px + env(safe-area-inset-bottom))}
.cb-robot{position:absolute;left:1rem;bottom:.6rem;width:52px}
.cb-robot svg{width:100%;height:auto;overflow:visible}
.cb-robot .r-flame{display:none}
.cb-title{font-family:var(--serif);font-size:1.15rem;color:var(--text);margin-bottom:.25rem}
.cb-text p:not(.cb-title){font-size:.9rem;line-height:1.55;color:var(--muted)}
.cb-text a{color:var(--turq)}
.cb-actions{display:flex;gap:.6rem}
/* Hyväksy and Hylkää look exactly the same: neither is pushed */
.cb-btn{min-width:7.5rem;min-height:2.9rem;padding:.6rem 1.2rem;border-radius:999px;font-weight:500;font-size:.95rem;
  background:rgba(34,211,197,.12);border:1.5px solid rgba(34,211,197,.55);color:var(--text);transition:background .2s,border-color .2s}
.cb-btn:hover{background:rgba(34,211,197,.22);border-color:var(--turq)}
.cookie-settings,.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--muted);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.foot .cookie-settings{font-size:.8rem}
.cookie-settings:hover{color:var(--turq)}
.menu-panel button.small{display:block;width:100%;text-align:left;text-decoration:none;padding:.8rem 1rem;border-radius:0 0 .65rem .65rem;font-size:.85rem;color:var(--muted)}
.menu-panel button.small:hover{background:var(--turq-soft)}
.bottom-links{display:flex;gap:1.1rem;align-items:center;margin:0 auto}
.bottom-links .privacy-link{margin:0;font-size:.78rem}
@media(max-width:640px){
  .consent-bar{grid-template-columns:1fr;padding:1rem 1rem 1rem 4.4rem;gap:.8rem}
  .cb-robot{width:44px;left:.8rem;top:1rem;bottom:auto}
  .cb-actions{display:grid;grid-template-columns:1fr 1fr}
  .cb-btn{min-width:0;width:100%}
  .bottom-links{display:none}
}
.consent-bar{opacity:0;transition:opacity .3s ease,transform .45s cubic-bezier(.22,.84,.32,1);transform:translate(-50%,24px)}
.consent-bar.is-in{opacity:1;transform:translate(-50%,0)}
.cb-robot .r-arm-r{transform-box:fill-box;transform-origin:50% 15%;animation:cb-wave 2.4s ease-in-out 1s 2}
@keyframes cb-wave{0%,40%,100%{transform:rotate(0)}10%,30%{transform:rotate(-140deg)}20%{transform:rotate(-100deg)}}
@media(prefers-reduced-motion:reduce){.consent-bar{transition:none}.cb-robot .r-arm-r{animation:none}}