/* Home page: the street video stays full-screen. In the finale the same film keeps playing:
   the yellow line floods the road, shown only on the bottom half, softer, with a light glass blur.
   Sections are glass panels over the video. Without JS you get the poster. */
.cine-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0b1a33}
.cine-video,.cine-flood{width:100%;height:100%;object-fit:cover;display:block}
.cine-flood{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:calc(var(--flood, 0) * .62);
  clip-path:inset(50% 0 0 0);-webkit-clip-path:inset(50% 0 0 0);
  -webkit-mask-image:linear-gradient(to bottom, transparent 50%, #000 64%);
  mask-image:linear-gradient(to bottom, transparent 50%, #000 64%)}
.cine-bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--shade,1);
  background:linear-gradient(90deg,rgba(8,26,40,.8) 0%,rgba(8,26,40,.5) 50%,rgba(8,26,40,.28) 100%)}
.home .hero,.home .facts,.home main,.home .finale-run,.home footer.site{position:relative;z-index:1}

/* hero: transparent over the video, one screen tall */
.home .hero{background:none;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);display:flex;align-items:center}
.home .hero>.wrap{width:100%}
.home .hero p.sub,.home .trust{text-shadow:0 1px 12px rgba(0,0,0,.45)}
/* practice-paper sample: frosted glass, the street shows through */
.home .sheet{background:rgba(255,254,248,.72);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.35)}
.home .sheet-bar{background:rgba(8,51,46,.78)}
.home .sheet-opts p{background:rgba(255,255,255,.55);border-color:rgba(28,25,21,.14)}
.home .sheet-foot{border-top-color:rgba(28,25,21,.12)}
/* interactive sample question */
.sheet-opts button{display:flex;gap:10px;align-items:center;width:100%;margin:0 0 8px;padding:8px 10px;text-align:left;
  font:inherit;font-size:.98rem;color:#1c1915;border:1px solid rgba(28,25,21,.16);border-radius:10px;background:rgba(255,255,255,.55);cursor:pointer;
  transition:background .15s,border-color .15s}
.sheet-opts button:hover:not(:disabled){background:rgba(255,255,255,.85);border-color:var(--accent)}
.sheet-opts button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sheet-opts button:disabled{cursor:default}
.sheet-opts button b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid #c9bfae;font-size:.85rem;flex:none}
.sheet-opts button.right{border-color:#1b7a3d;background:rgba(27,122,61,.14)}
.sheet-opts button.right b{background:#1b7a3d;border-color:#1b7a3d;color:#fff}
.sheet-opts button.wrong{border-color:#b3261e;background:rgba(179,38,30,.12)}
.sheet-opts button.wrong b{background:#b3261e;border-color:#b3261e;color:#fff}
.dq-exp{margin:2px 12px 10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.6);font-size:.92rem;color:#2b2620}
.dq-exp p{margin:0;max-width:none}
.dq-verdict{font-weight:750;margin-bottom:4px !important}
.dq-verdict.ok{color:#1b7a3d}.dq-verdict.no{color:#b3261e}
.dq-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.dq-next{font:inherit;font-weight:700;font-size:.9rem;color:#fff;background:#08332e;border:0;border-radius:999px;padding:.5rem 1rem;cursor:pointer}
.dq-next:hover{background:#0d4a42}
.dq-foot a{color:#08332e;font-weight:650;font-size:.9rem}

/* facts strip and section panels: frosted glass, the video stays visible around and through them */
.home .facts{background:rgba(8,26,40,.55);border:0;color:#f1faf7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.home .facts .ic{color:var(--cta)}
.home main{padding:0 0 4vh}
.glass{background:var(--bg);background:color-mix(in srgb,var(--bg) 76%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-radius:22px;padding:clamp(20px,4vw,40px);margin:22vh 0;box-shadow:0 20px 60px -20px rgba(0,0,0,.55)}
.glass:first-child{margin-top:16vh}
/* SEO text block: readable long copy in two columns */
.seo>p{max-width:72ch}
.seo-cols{display:grid;gap:8px 28px;margin:6px 0 4px}
@media(min-width:880px){.seo-cols{grid-template-columns:1fr 1fr}}
.seo-cols h3{margin:1rem 0 .35rem;font-size:1.08rem}
.seo-cols p{margin:0;color:var(--muted)}
.glass .seo-links{margin:1.4rem 0 0;font-size:.95rem;color:var(--muted);max-width:none}
/* cards inside the panels are see-through too, so the street shows through the whole block */
.glass .plan,.glass .f,.glass .how li{background:color-mix(in srgb,var(--panel) 78%,transparent)}
.glass .f.tint{background:color-mix(in srgb,var(--brand) 82%,transparent)}
.glass>h2:first-child{margin-top:0}

/* finale: frosted gold rises from the bottom to the middle of the screen; the call to action sits on it */
.glass:last-child{margin-bottom:0}
.gold-glass{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  height:calc(var(--flood, 0) * 50vh);height:calc(var(--flood, 0) * 50svh);
  background:linear-gradient(to top, rgba(255,220,80,.22) 0%, rgba(244,198,43,.08) 70%, rgba(244,198,43,0) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(1.35);
  backdrop-filter:blur(12px) saturate(1.35);
  border-top:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  -webkit-mask-image:linear-gradient(to top, #000 82%, transparent 100%);
  mask-image:linear-gradient(to top, #000 82%, transparent 100%)}
.finale-run{height:150vh}
.finale-pin{position:sticky;top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);display:flex;align-items:flex-end;justify-content:center;text-align:center;padding-bottom:clamp(24px,5vh,64px)}
.finale{max-width:760px;padding:0 18px}
.finale h2{color:#111;font-size:clamp(2rem,5.2vw,3.2rem);line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance}
.finale p{color:#2a2300;margin:0 0 1em;max-width:none}
.finale .fine{font-size:.85rem;color:#3a3200;margin:0}
.finale .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:1.2em}
.finale .btn.dark{background:#111;color:#fff}
.finale .btn.dark:hover{background:#000}
.finale .btn.ghost{background:transparent;color:#111;box-shadow:inset 0 0 0 2px #111}
.finale .btn.ghost:hover{background:rgba(0,0,0,.08)}
.finale-route{width:min(520px,90%);height:auto;display:block;margin:0 auto 1.4em;overflow:visible}
.finale-route .line{fill:none;stroke:#111;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.finale-route .pin{fill:#111;opacity:0;transform-origin:520px 40px;transform:scale(.2)}
.finale-route .pin circle:last-child{fill:#f4c62b}
.rise{opacity:0;transform:translateY(18px)}
.finale-run.in .finale-route .line{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.6,.05,.25,1)}
.finale-run.in .finale-route .pin{opacity:1;transform:scale(1);transition:opacity .3s 1.1s,transform .5s 1.1s cubic-bezier(.3,1.6,.5,1)}
.finale-run.in .rise{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.finale-run.in .r1{transition-delay:.5s}.finale-run.in .r2{transition-delay:.8s}
.finale-run.in .r3{transition-delay:1.1s}.finale-run.in .r4{transition-delay:1.4s}

/* phones and reduced motion: the video loops (or shows the poster) instead of scrubbing,
   so the finale brings its own half-screen frosted gold */
@media(max-width:768px),(prefers-reduced-motion:reduce){
  .cine-flood,.gold-glass{display:none}
  .finale-run{height:auto;background:transparent;position:relative}
  .finale-pin{position:relative;top:0;height:auto;min-height:70vh;padding:56px 0 8vh;align-items:flex-end;overflow:hidden}
  .finale-pin::before{content:"";position:absolute;left:0;right:0;bottom:0;height:50vh;height:50svh;z-index:0;pointer-events:none;
    background:linear-gradient(to top, rgba(255,220,80,.48) 0%, rgba(244,198,43,.30) 62%, rgba(244,198,43,0) 100%);
    -webkit-backdrop-filter:blur(26px) saturate(1.7) brightness(1.25);backdrop-filter:blur(26px) saturate(1.7) brightness(1.25);
    border-top:1px solid rgba(255,255,255,.42);
    -webkit-mask-image:linear-gradient(to top, #000 82%, transparent 100%);
    mask-image:linear-gradient(to top, #000 82%, transparent 100%)}
  .finale{position:relative;z-index:1}
  .glass{margin:12vh 0}
  .glass:first-child{margin-top:8vh}
}
/* phones: smaller practice-paper sample so it does not fill the screen */
@media(max-width:768px){
  .home .hero{min-height:0;padding:22px 0 30px}
  .home .sheet{max-width:330px;width:100%;margin:0 auto}
  .home .sheet-bar{padding:7px 12px;font-size:.82rem}
  .home .sheet-k{padding:8px 12px 0;font-size:.72rem}
  .home .sheet-q{margin:4px 12px 8px;font-size:.95rem;line-height:1.3}
  .home .sheet-opts{padding:0 10px 4px}
  .home .sheet-opts button{padding:6px 8px;margin:0 0 6px;font-size:.88rem;line-height:1.25}
  .home .sheet-opts button b{width:22px;height:22px;font-size:.75rem}
  .home .dq-exp{margin:0 10px 8px;padding:8px 10px;font-size:.86rem}
  .home .dq-foot{padding:8px 12px 10px}
  .home .dq-next{padding:.4rem .85rem;font-size:.84rem}
  .home .dq-foot a{font-size:.84rem}
}
@media(prefers-reduced-motion:reduce){
  .finale-route .line{stroke-dashoffset:0}.finale-route .pin{opacity:1;transform:none}.rise{opacity:1;transform:none}
}