/* The glossy brand (YVM-65, Marc's approved prototype of 6 Nov 2026): what the homepage and /start share. Colours,
   fonts and the gutter come only from the token block (docs/brand.md lists them); rules use var(), never a literal
   hex colour or font family. Fonts are this site's own files (OFL, public/fonts). The CSP allows no inline style, so
   every look is a class here. Motion only for visitors who have not asked for less. Board pages keep board.css. */
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url("/fonts/bricolage-grotesque.woff2?v=e8a2785222") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url("/fonts/instrument-sans.woff2?v=561da85450") format("woff2")}
/* tokens:begin (docs/brand.md) */
:root{
--color-night:#0D0B26;--color-deep:#07061A;--color-text:#E7E6F5;--color-muted:#A8A6C8;--color-white:#FFFFFF;
--color-violet:#9B8CFF;--color-lilac:#B9A8FF;--color-haze:#D9D2FF;--color-aqua:#5FD6E8;--color-mint:#7EF0C6;--color-seafoam:#9FEFE0;
--color-coral:#FF8A5B;--color-gold:#FFE29A;--color-rose:#E2456A;--color-slate:#4A4775;--color-tab:#ECEAF8;--color-line-light:#DAD6EE;
--color-paper-lilac:#F4F1FF;--color-paper-mint:#ECFBF7;--color-focus:#B9A8FF;--color-danger:#FFA3B5;--color-panel-top:#403A78;--color-panel-bottom:#1E1B46;
--tint-violet-20:color-mix(in srgb,var(--color-violet) 20%,transparent);
--tint-violet-25:color-mix(in srgb,var(--color-violet) 25%,transparent);
--tint-violet-30:color-mix(in srgb,var(--color-violet) 30%,transparent);
--tint-violet-40:color-mix(in srgb,var(--color-violet) 40%,transparent);
--tint-violet-60:color-mix(in srgb,var(--color-violet) 60%,transparent);
--tint-violet-75:color-mix(in srgb,var(--color-violet) 75%,transparent);
--tint-aqua-08:color-mix(in srgb,var(--color-aqua) 8%,transparent);
--tint-aqua-15:color-mix(in srgb,var(--color-aqua) 15%,transparent);
--tint-aqua-20:color-mix(in srgb,var(--color-aqua) 20%,transparent);
--tint-coral-18:color-mix(in srgb,var(--color-coral) 18%,transparent);
--tint-mint-14:color-mix(in srgb,var(--color-mint) 14%,transparent);
--tint-lilac-50:color-mix(in srgb,var(--color-lilac) 50%,transparent);
--tint-gold-12:color-mix(in srgb,var(--color-gold) 12%,transparent);
--tint-gold-35:color-mix(in srgb,var(--color-gold) 35%,transparent);
--tint-danger-08:color-mix(in srgb,var(--color-danger) 8%,transparent);
--tint-panel-top-92:color-mix(in srgb,var(--color-panel-top) 92%,transparent);
--tint-panel-bottom-92:color-mix(in srgb,var(--color-panel-bottom) 92%,transparent);
--font-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
--font-sans:"Instrument Sans",system-ui,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
--gutter:clamp(1rem,4vw,2.5rem)}
/* tokens:end */
*{box-sizing:border-box}
html{background:var(--color-deep)}
/* The four glows (YVM-245): each one is clear past 60% of its radii, so each is painted only in a box that just holds
   that ellipse (1.2 x its radii), centred where the glow was ("at X Y" on the body). A box's offset is calc(X + (X - 50%)
   of the box size), since a background-position percentage counts the body minus the box. Same pixels, but Chrome no
   longer works out four radial gradients over the whole page: on a phone that raster was most of /pricing's
   Lighthouse blocking time. */
body{margin:0;color:var(--color-text);font:400 1.0625rem/1.6 var(--font-sans);overflow-x:hidden;background:
 radial-gradient(48rem 34rem,var(--tint-violet-40),transparent 60%) calc(88% + 21.888rem) calc(-4% - 22.032rem)/57.6rem 40.8rem no-repeat,
 radial-gradient(40rem 30rem,var(--tint-aqua-20),transparent 60%) calc(0% - 24rem) calc(30% - 7.2rem)/48rem 36rem no-repeat,
 radial-gradient(46rem 34rem,var(--tint-coral-18),transparent 60%) calc(75% + 13.8rem) calc(70% + 8.16rem)/55.2rem 40.8rem no-repeat,
 radial-gradient(40rem 30rem,var(--tint-mint-14),transparent 60%) calc(15% - 16.8rem) calc(95% + 16.2rem)/48rem 36rem no-repeat,
 linear-gradient(180deg,var(--color-night),var(--color-deep))}
a{color:var(--color-white);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
h1,h2,h3{font-family:var(--font-display);color:var(--color-white);margin:0;font-weight:800;letter-spacing:-.025em}
p{margin:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:60;background:var(--color-white);color:var(--color-night);padding:.7rem 1rem;border-radius:12px}
.skip:focus{top:1rem}
.wrap{max-width:76rem;margin:0 auto;padding:0 var(--gutter)}
.glass{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 45%,rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);border-radius:26px;-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.05),0 40px 80px -40px rgba(0,0,0,.7)}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1rem .25rem}
.mark{display:flex;align-items:center;gap:.6rem;font:800 1.2rem/1 var(--font-display);letter-spacing:-.02em;color:var(--color-white);text-decoration:none}
.mark svg{flex:none}
.top nav{display:flex;gap:1.5rem;align-items:center;font-size:.9375rem}
.top nav a{text-decoration:none;color:var(--color-muted)}.top nav a:hover{color:var(--color-white)}
.top nav a.btn{color:var(--color-night)}
.btn{display:inline-block;color:var(--color-night);font:600 1.0625rem/1 var(--font-sans);text-decoration:none;border-radius:999px;padding:1.05rem 1.5rem;border:0;cursor:pointer;background:linear-gradient(135deg,var(--color-white),var(--color-haze) 40%,var(--color-seafoam));box-shadow:inset 0 1px 0 var(--color-white),0 12px 34px -10px var(--tint-violet-75)}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.6;cursor:wait}
.btn-sm{padding:.7rem 1.1rem;font-size:.9375rem}
.soon{display:inline-block;vertical-align:.12em;margin-left:.45rem;padding:.28rem .55rem;border-radius:999px;font:600 .72rem/1 var(--font-sans);letter-spacing:.02em;white-space:nowrap;color:var(--color-gold);background:var(--tint-gold-12);border:1px solid var(--tint-gold-35)}
/* YVM-154: the introductory setup price as an offer (<x-setup-price>): a gold pill, the standard price struck through
   (its "was" for screen readers in .vh), then the introductory price. */
.offer{display:inline-block;vertical-align:.12em;margin-right:.4rem;padding:.3rem .6rem;border-radius:999px;font:700 .72rem/1 var(--font-sans);letter-spacing:.02em;white-space:nowrap;color:var(--color-night);background:var(--color-gold)}
.offer-price s{color:var(--color-muted);text-decoration-thickness:2px;text-decoration-color:var(--color-coral)}
.offer-price b{color:var(--color-white);font-weight:800}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sub{margin-top:.8rem;color:var(--color-muted);max-width:40rem}
/* The UK map (App\Support\UkMap): colours and text are the SVG's own; this frames it and moves it. */
.map{position:relative;margin:0}
.ukmap{display:block;width:100%;height:auto;max-height:38rem;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.ukmap-flag:hover rect{fill-opacity:1}
/* YVM-119: boards in turns (App\Support\UkMap::flags). Still, only the first group shows; a focused flag's group shows
   and lights at once whatever the phase, and the others step back. The list of every board is for screen readers and
   search engines, shown when a keyboard user reaches it, or with reduced motion. */
[data-turns] .ukmap-turn:not(.t0){opacity:0;pointer-events:none}
.ukmap[data-turns] .ukmap-turn:focus-within{animation:none;opacity:1;pointer-events:auto}
.ukmap[data-turns]:has(.ukmap-turn:focus-within) .ukmap-turn:not(:focus-within){animation:none;opacity:0;pointer-events:none}
.ukmap-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ukmap-list:focus-within{left:0;right:0;bottom:0;z-index:5;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;padding:.9rem 1rem;border-radius:18px;background:var(--color-night);border:1px solid rgba(255,255,255,.16)}
.ukmap-list p{margin:0 0 .4rem;font-weight:700;color:var(--color-white)}
.ukmap-list ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.875rem;color:var(--color-muted)}
.ukmap-list a{color:var(--color-text)}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.875rem;color:var(--color-muted);margin-top:.4rem}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.4rem;vertical-align:-1px}
.l-county{background:linear-gradient(var(--color-gold),var(--color-coral))}
.l-town{background:radial-gradient(circle at 35% 30%,var(--color-white),var(--color-rose));border-radius:50%}
.l-country{background:linear-gradient(var(--color-gold),var(--color-coral));box-shadow:0 0 0 2px var(--tint-gold-35)}
.attr{font-size:.75rem;color:var(--color-muted)}
footer{padding:1.5rem 0 4rem;color:var(--color-muted);font-size:.9375rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem}
footer .attr{flex-basis:100%}
.top{position:relative}
/* Below 900px the nav links move into a no-script disclosure (details/summary), so none is lost on a phone. */
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--color-white);font:600 .9375rem/1 var(--font-sans)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:.45rem;height:.45rem;border:solid var(--color-muted);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.menu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.menu nav{position:absolute;right:0;top:calc(100% + .5rem);z-index:40;min-width:13rem;display:grid;gap:.15rem;padding:.5rem;border-radius:18px;background:var(--color-night);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.menu nav a{display:block;padding:.7rem .9rem;border-radius:12px;color:var(--color-text);text-decoration:none}
.menu nav a:hover{background:rgba(255,255,255,.08);color:var(--color-white)}
.menu nav a.btn{margin-top:.3rem;text-align:center;color:var(--color-night)}
@media (max-width:900px){.top>nav{display:none}.menu{display:block}}
@media (prefers-reduced-motion:no-preference){
 .ukmap-county{animation:lift 3.4s ease-in-out infinite}
 .ukmap-flag{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
 @keyframes lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
 @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
 /* YVM-119: the map's groups take turns, one 6s slot each: fade and light in, hold, fade and dim out. */
 [data-turns="2"] .ukmap-turn{animation:ukmap-turn-2 12s linear infinite both}
 @keyframes ukmap-turn-2{0%{opacity:0;pointer-events:none}7.5%,42.5%{opacity:1;pointer-events:auto}50%,100%{opacity:0;pointer-events:none}}
 [data-turns="3"] .ukmap-turn{animation:ukmap-turn-3 18s linear infinite both}
 @keyframes ukmap-turn-3{0%{opacity:0;pointer-events:none}5%,28.33%{opacity:1;pointer-events:auto}33.33%,100%{opacity:0;pointer-events:none}}
 [data-turns="4"] .ukmap-turn{animation:ukmap-turn-4 24s linear infinite both}
 @keyframes ukmap-turn-4{0%{opacity:0;pointer-events:none}3.75%,21.25%{opacity:1;pointer-events:auto}25%,100%{opacity:0;pointer-events:none}}
 [data-turns="5"] .ukmap-turn{animation:ukmap-turn-5 30s linear infinite both}
 @keyframes ukmap-turn-5{0%{opacity:0;pointer-events:none}3%,17%{opacity:1;pointer-events:auto}20%,100%{opacity:0;pointer-events:none}}
 [data-turns="6"] .ukmap-turn{animation:ukmap-turn-6 36s linear infinite both}
 @keyframes ukmap-turn-6{0%{opacity:0;pointer-events:none}2.5%,14.17%{opacity:1;pointer-events:auto}16.67%,100%{opacity:0;pointer-events:none}}
 [data-turns="7"] .ukmap-turn{animation:ukmap-turn-7 42s linear infinite both}
 @keyframes ukmap-turn-7{0%{opacity:0;pointer-events:none}2.14%,12.14%{opacity:1;pointer-events:auto}14.29%,100%{opacity:0;pointer-events:none}}
 [data-turns="8"] .ukmap-turn{animation:ukmap-turn-8 48s linear infinite both}
 @keyframes ukmap-turn-8{0%{opacity:0;pointer-events:none}1.88%,10.63%{opacity:1;pointer-events:auto}12.5%,100%{opacity:0;pointer-events:none}}
 [data-turns="9"] .ukmap-turn{animation:ukmap-turn-9 54s linear infinite both}
 @keyframes ukmap-turn-9{0%{opacity:0;pointer-events:none}1.67%,9.44%{opacity:1;pointer-events:auto}11.11%,100%{opacity:0;pointer-events:none}}
 [data-turns="10"] .ukmap-turn{animation:ukmap-turn-10 60s linear infinite both}
 @keyframes ukmap-turn-10{0%{opacity:0;pointer-events:none}1.5%,8.5%{opacity:1;pointer-events:auto}10%,100%{opacity:0;pointer-events:none}}
 [data-turns="11"] .ukmap-turn{animation:ukmap-turn-11 66s linear infinite both}
 @keyframes ukmap-turn-11{0%{opacity:0;pointer-events:none}1.36%,7.73%{opacity:1;pointer-events:auto}9.09%,100%{opacity:0;pointer-events:none}}
 [data-turns="12"] .ukmap-turn{animation:ukmap-turn-12 72s linear infinite both}
 @keyframes ukmap-turn-12{0%{opacity:0;pointer-events:none}1.25%,7.08%{opacity:1;pointer-events:auto}8.33%,100%{opacity:0;pointer-events:none}}
 [data-turns] .ukmap-turn.t1{animation-delay:6s}
 [data-turns] .ukmap-turn.t2{animation-delay:12s}
 [data-turns] .ukmap-turn.t3{animation-delay:18s}
 [data-turns] .ukmap-turn.t4{animation-delay:24s}
 [data-turns] .ukmap-turn.t5{animation-delay:30s}
 [data-turns] .ukmap-turn.t6{animation-delay:36s}
 [data-turns] .ukmap-turn.t7{animation-delay:42s}
 [data-turns] .ukmap-turn.t8{animation-delay:48s}
 [data-turns] .ukmap-turn.t9{animation-delay:54s}
 [data-turns] .ukmap-turn.t10{animation-delay:60s}
 [data-turns] .ukmap-turn.t11{animation-delay:66s}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .ukmap[data-turns]~.ukmap-list{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin-top:.8rem}}
/* The platform footer (YVM-63, partials/footer): entity facts, the About/Contact/Privacy/Terms links, company details. */
footer .site-links{display:flex;flex-wrap:wrap;gap:1.25rem}
footer .site-links a{color:var(--color-muted)}footer .site-links a:hover{color:var(--color-white)}
footer .company{flex-basis:100%}