:root{
  box-sizing:border-box;
  --navy:#012169; --red:#C8102E; --redDark:#A00D24; --ink:#0B1530; --muted:#4F5B74;
  --paper:#F3F6FC; --white:#FFFFFF; --line:#D5DCEA; --limit:#C8102E; --ok:#1F7A5C; --soft:#E4EAF6;
  --sky:#DCE5F7;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);
  font-family:"Commissioner",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:18px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
a:focus-visible,button:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.wordmark{display:flex;flex-direction:column;line-height:1.05}
.wordmark b{font-weight:800;font-size:25px;letter-spacing:-.025em;color:var(--navy)}
.wordmark small{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.mark{width:52px;height:52px;border-radius:13px;box-shadow:0 6px 16px rgba(1,33,105,.22);transition:transform .2s ease;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:-.03em}
.nav nav{display:flex;align-items:center;gap:24px;font-size:16px}
.brand:hover .mark{transform:rotate(-6deg) scale(1.04)}
.nav nav a{text-decoration:none;color:var(--muted)}
.nav nav a:hover{color:var(--ink)}
@media (max-width:640px){.nav nav a:not(.navbuy){display:none}}

/* buttons */
.btn{display:inline-block;background:var(--red);transition:transform .15s ease,background .15s ease;box-shadow:0 6px 18px rgba(200,16,46,.25);color:#fff;text-decoration:none;font-weight:700;
  padding:16px 26px;border-radius:12px;font-size:18px}
.btn:hover{background:var(--redDark)}
.navbuy{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff!important;background:var(--red);padding:10px 18px;border-radius:999px;box-shadow:0 6px 16px rgba(200,16,46,.28);transition:transform .15s ease,background .15s ease,box-shadow .15s ease;animation:buypulse 2.8s ease-in-out 1.2s 3}
.navbuy:hover{background:var(--redDark);transform:translateY(-1px);box-shadow:0 10px 22px rgba(200,16,46,.34)}
.navprice{background:rgba(255,255,255,.2);border-radius:999px;padding:2px 9px;font-size:14px}
@keyframes buypulse{0%,100%{box-shadow:0 6px 16px rgba(200,16,46,.28),0 0 0 0 rgba(200,16,46,.45)}50%{box-shadow:0 6px 16px rgba(200,16,46,.28),0 0 0 10px rgba(200,16,46,0)}}
@media (prefers-reduced-motion:reduce){.navbuy{animation:none}}
@media (max-width:640px){.mark{width:44px;height:44px;border-radius:11px}.wordmark b{font-size:21px}.wordmark small{font-size:10.5px}.navbuy{padding:9px 14px}}
.wordmark small{white-space:nowrap}
@media (max-width:440px){.wordmark small{display:none}}

/* hero */
.hero{padding-top:48px;padding-bottom:72px}
.hero h1{font-size:clamp(40px,7vw,76px);line-height:1.02;letter-spacing:-.035em;margin:0;font-weight:800;max-width:14ch}
.hero .lead{font-size:clamp(19px,2.2vw,22px);color:var(--muted);max-width:40ch;margin:24px 0 32px}
.hero .meta{font-size:15px;color:var(--muted);margin-top:14px}
.yearbox{margin-top:56px;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px}
.yearhead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.count{font-size:clamp(44px,8vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.count small{font-size:.38em;color:var(--muted);font-weight:600;letter-spacing:0}
.yearhead p{margin:0;color:var(--muted);font-size:15px;max-width:42ch}
#year{display:grid;grid-template-columns:repeat(52,1fr);grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px}
#year i{aspect-ratio:1;border-radius:2px;background:var(--soft)}
#year i{transition:background .25s ease,transform .25s ease}
#year i.on{background:var(--red)}
#year i.on.pop{transform:scale(1.25)}
.legend{display:flex;gap:20px;font-size:14px;color:var(--muted);margin-top:14px;flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--soft)}
.legend .a::before{background:var(--red)}
@media (max-width:640px){#year{gap:1.5px}.yearbox{padding:18px}}

/* sections */
section.block{padding:80px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(30px,4.4vw,44px);line-height:1.1;letter-spacing:-.025em;margin:0 0 20px;font-weight:800;max-width:22ch}
h3{font-size:20px;margin:0 0 6px;letter-spacing:-.01em}
p{margin:0 0 16px}
.muted{color:var(--muted)}

.rule{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
@media (max-width:860px){.rule{grid-template-columns:1fr;gap:32px}}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center;font-size:15px}
.days b{display:block;font-size:14px;color:var(--muted);font-weight:600;margin-bottom:6px}
.days span{display:block;padding:22px 0;border-radius:10px;background:var(--soft);color:var(--muted);font-weight:600}
.days span.on{background:var(--navy);color:#fff}
.days-total{font-size:24px;font-weight:800;margin-top:18px}

.features{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 56px;margin-top:40px}
@media (max-width:760px){.features{grid-template-columns:1fr;gap:28px}}
.features p{color:var(--muted);margin:0}

.shot{border-radius:16px;border:1px solid var(--line);background:#fff;overflow:hidden}
.shots{display:grid;gap:28px;margin-top:40px}
.pair{display:grid;grid-template-columns:1fr 260px;gap:32px;align-items:start}
.phonefig .shot{border-radius:28px;max-height:560px}
.phonefig img{object-fit:cover;object-position:top}
@media (max-width:760px){.pair{grid-template-columns:1fr}.phonefig{max-width:280px}}
figure{margin:0}
figcaption{font-size:15px;color:var(--muted);margin-top:10px}

.inside{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:36px;border:1px solid var(--line);border-radius:16px;background:#fff}
.inside div{padding:28px}
.inside div+div{border-left:1px solid var(--line)}
.inside p{color:var(--muted);margin:0;font-size:16px}
.inside .file{font-size:14px;color:var(--muted);margin-bottom:12px}
@media (max-width:760px){.inside{grid-template-columns:1fr}.inside div+div{border-left:0;border-top:1px solid var(--line)}}

.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-weight:700;cursor:pointer;font-size:19px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--muted);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin:12px 0 0}

.final{background:linear-gradient(135deg,var(--navy) 0%,#0A2C7A 100%);position:relative;overflow:hidden;color:#fff;border-radius:24px;padding:56px;margin:80px 0}
.final h2{color:#fff}
.final p{color:#C9D4EA;max-width:52ch}
.final .btn{background:var(--red);color:#fff}
.final .btn:hover{background:var(--redDark)}
.final::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;border:28px solid rgba(255,255,255,.07)}
@media (max-width:640px){.final{padding:32px}}

footer{padding:40px 0 60px;font-size:15px;color:var(--muted);border-top:1px solid var(--line)}
footer .links{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px}
footer .links a{color:var(--ink)}
footer .social{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 18px}
footer .social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--navy);font-weight:600;font-size:15px;border:1.5px solid #D5DDEE;border-radius:999px;padding:8px 16px;transition:background .15s ease,border-color .15s ease}
footer .social a:hover{background:#EEF2FA;border-color:var(--navy)}
.disclaimer{font-size:14px;max-width:80ch}

/* legal pages */
.legal{padding-top:24px;padding-bottom:80px}
.legal h1{font-size:clamp(34px,5vw,48px);letter-spacing:-.03em;margin:20px 0 8px}
.legal h2{font-size:24px;margin:36px 0 10px;max-width:none}
.legal p,.legal li{color:#2B3446;font-size:17px}
.legal ul{padding-left:22px}

/* free check */
.checker{margin-top:32px;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start}
@media (max-width:860px){.checker{grid-template-columns:1fr;padding:20px}}
.trips{display:grid;gap:12px}
.ckrow{display:grid;grid-template-columns:1fr 1fr auto 36px;gap:10px;align-items:end}
@media (max-width:520px){.ckrow{grid-template-columns:1fr 1fr 36px}.ckdays{grid-column:1/3;order:4}}
.ckrow label{font-size:14px;color:var(--muted);display:grid;gap:4px}
.ckrow input{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0;width:100%}
.ckdays{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;padding-bottom:10px;min-width:64px}
.ckdel{width:36px;height:42px;border:1px solid var(--line);background:transparent;border-radius:10px;color:var(--muted);font-size:20px;cursor:pointer}
.ckdel:hover{color:var(--ink)}
.ckbar{grid-column:1}
.ghostbtn{background:transparent;color:var(--navy);border:1px solid var(--line);padding:10px 16px;font-size:16px;margin-top:4px;cursor:pointer}
.ghostbtn:hover{background:var(--soft)}
.ghostbtn:disabled{opacity:.5;cursor:default}
.ckresult{grid-column:2;grid-row:1 / span 2;border-left:6px solid var(--soft);padding-left:22px}
@media (max-width:860px){.ckresult{grid-column:1;grid-row:auto}}
.ckresult.ok{border-color:var(--ok)} .ckresult.warn{border-color:#A8640F} .ckresult.bad{border-color:var(--limit)}
.cknum{font-size:clamp(48px,7vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.cknum small{font-size:.36em;color:var(--muted);font-weight:600;letter-spacing:0}
.ckresult p{margin-top:14px;font-size:16px}
.small{font-size:15px;margin-top:18px;max-width:70ch}

/* why + sources */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 56px;margin-top:32px}
@media (max-width:760px){.why{grid-template-columns:1fr;gap:24px}}
.why p{color:var(--muted);margin:0}
.sources{list-style:none;padding:0;margin:28px 0 0;border-top:1px solid var(--line)}
.sources li{padding:16px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.sources a{font-weight:700;font-size:18px}
.sources span{color:var(--muted);font-size:16px}
.notice{margin-top:24px;background:var(--white);border:1px solid var(--line);border-left:6px solid #A8640F;border-radius:12px;padding:16px 20px;font-size:16px;color:#2B3446;max-width:80ch}
.mark{border-radius:10px}


/* Union Jack accents */
.flagbar{height:6px;background:linear-gradient(90deg,var(--navy) 0 46%,var(--white) 46% 54%,var(--red) 54% 100%)}
section.block:nth-of-type(even){background:var(--paper)}

.hl{color:var(--red)}
.yearbox{box-shadow:0 18px 50px rgba(1,33,105,.08)}
.days span.on{background:var(--red)}
.features h3,.why h3{display:flex;gap:10px;align-items:center}
.features h3::before,.why h3::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--red);flex:none}
.inside div{transition:background .2s ease}
.inside div:hover{background:var(--paper)}
.shot{transition:transform .25s ease,box-shadow .25s ease}
.shot:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(1,33,105,.12)}
.faq details[open]{background:var(--paper);margin:0 -16px;padding:18px 16px;border-radius:10px}

/* official source cards */
.srcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:28px}
.src{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px;text-decoration:none;color:var(--ink);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.src:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 12px 30px rgba(1,33,105,.10)}
.src .ic{width:48px;height:48px;border-radius:12px;background:var(--soft);display:grid;place-items:center;color:var(--navy)}
.src:nth-child(3n+2) .ic{background:#FBE4E8;color:var(--red)}
.src .ic svg{width:26px;height:26px}
.src b{display:block;font-size:17px;line-height:1.3}
.src small{display:block;color:var(--muted);font-size:15px;margin-top:6px;line-height:1.45}
.src .tag{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--navy);background:var(--soft);border-radius:999px;padding:2px 10px}


/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  #year i,.shot,.src,.btn{transition:none}
}