@font-face{font-family:'Spicy Rice';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/spicy-rice-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spicy Rice';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/spicy-rice-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Squada One';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/squada-one-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Varela Round';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/varela-round-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Varela Round';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/varela-round-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
*{box-sizing:border-box}
:root{--ink:#EBDDFB;--muted:#A98FE0;--line:#3D1F70;--bg:#1B0B3B;--soft:#26124F;
--card:#221049;--onbrand:#1B0B3B;--brand:#FF38D3;--brand-dark:#C4009C;
--accent:#7FC9FF;
--font-body:'Varela Round',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--font-display:'Spicy Rice',Georgia,'Times New Roman',serif;--font-ui:'Squada One',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
--display-tracking:0;--display-weight:400;
--nav-size:1.18rem;--logo-size:1.4rem;--head-width:1280px}
body{margin:0;font:16px/1.65 var(--font-body);
color:var(--ink);background:var(--bg)}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
a{color:var(--accent)}
header{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:10}
header .wrap{max-width:var(--head-width)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;flex-wrap:wrap}
.logo{flex:0 0 auto}
.logo{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--logo-size);
text-decoration:none;color:var(--ink);letter-spacing:var(--display-tracking);
display:flex;align-items:center;gap:11px}
.logo img{height:calc(var(--logo-size) * 2.6);width:calc(var(--logo-size) * 2.6);border-radius:8px;display:block;flex:0 0 auto}
.heroimg{margin:0;position:relative;line-height:0;border-bottom:1px solid var(--line)}
.heroimg img{width:100%;height:clamp(190px,30vw,380px);object-fit:cover;display:block}
.heroimg figcaption{position:absolute;right:10px;bottom:8px;font-size:.72rem;line-height:1.4;
color:#fff;background:rgba(0,0,0,.55);padding:3px 9px;border-radius:99px;backdrop-filter:blur(3px)}
.figs{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:26px 0}
.fig{margin:0;background:var(--card);border:1px solid var(--line);border-radius:10px;
overflow:hidden;line-height:0}
.fig img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.fig.sq img{aspect-ratio:1/1}
.figs.wide{grid-template-columns:1fr;gap:14px}
.fig.nat img{aspect-ratio:auto;height:auto;object-fit:contain;background:#fff}
.figs.portraits{grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px}
figure.vid{margin:26px 0;background:var(--card);border:1px solid var(--line);border-radius:10px;
overflow:hidden;max-width:820px}
.vidplay{display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;
position:relative;line-height:0}
.vidplay img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.86;
transition:opacity .18s ease}
.vidplay:hover img,.vidplay:focus-visible img{opacity:1}
.vidicon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:52px;
border-radius:12px;background:var(--brand);display:block}
.vidicon:after{content:"";position:absolute;left:50%;top:50%;
transform:translate(-42%,-50%);border-style:solid;border-width:11px 0 11px 18px;
border-color:transparent transparent transparent var(--onbrand)}
.vidplay:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.vidframe{width:100%;aspect-ratio:16/9;border:0;display:block}
figure.vid figcaption{padding:12px 15px;font-size:.9rem;color:var(--muted);line-height:1.5}
.fig.sq figcaption{padding:9px 12px;font-size:.83rem}
.fig figcaption{padding:11px 14px;font-size:.87rem;color:var(--muted);line-height:1.5}
.portrait{margin:0 0 20px}
.card.person{display:grid;grid-template-columns:112px 1fr;grid-template-areas:"a h" "a p" "a l";
gap:2px 14px;align-items:start}
.card.person .avatar{grid-area:a;align-self:center}
.card.person h3{grid-area:h}.card.person p{grid-area:p}.card.person a{grid-area:l}
.card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;
margin:-4px 0 12px;display:block}
/* These MUST come after `.card img`. Both selectors are (0,1,1) specificity, so source order
   decides, and a roster avatar lives inside a .card - which meant `.card img`'s 16/9
   aspect-ratio and height:auto were overriding the circle. Every avatar on the people page
   rendered as a letterboxed strip with 6px corners: a portrait cropped to a band across the
   eyes, at 63px tall instead of 112. It looked like the images were "too small" because two
   thirds of each face was being cut off. Do not move these back above `.card img`. */
.avatar img{width:112px;height:112px;aspect-ratio:1/1;border-radius:50%;object-fit:cover;
display:block;margin:0;border:2px solid var(--line)}
.portrait img{width:176px;height:176px;aspect-ratio:1/1;border-radius:50%;object-fit:cover;
display:block;margin:0;border:2px solid var(--line)}
nav{display:flex;gap:13px;flex-wrap:wrap;flex:1 1 auto;justify-content:flex-end;align-items:baseline}
nav a{font-family:var(--font-ui);text-decoration:none;color:var(--muted);
font-size:var(--nav-size);font-weight:500;white-space:nowrap;letter-spacing:.01em}
nav a:hover,nav a[aria-current]{color:var(--accent)}
/* Dropdown menus. Opt-in per parent link via `nav_menus` in the config; sites without it
   render exactly the flat nav they always had. The parent stays a real link to its hub page
   (the hub keeps its site-wide link, and a menu that swallows its own landing page is the
   classic way to orphan it); the small arrow beside it is the toggle. Desktop opens on hover,
   touch and keyboard open on the arrow, and the footer nav is always flat. */
nav .navi{position:relative;display:inline-flex;align-items:baseline;gap:2px}
nav .navi>a[aria-current]{color:var(--accent)}
nav .subtog{background:none;border:0;padding:0 1px;margin:0;color:var(--muted);cursor:pointer;
line-height:1;display:inline-flex;align-items:center;align-self:center;border-radius:4px}
nav .subtog svg{width:11px;height:11px;display:block;transition:transform .15s}
nav .subtog:hover,nav .navi.open .subtog{color:var(--accent)}
nav .subtog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
nav .navi.open .subtog svg{transform:rotate(180deg)}
nav .sub{display:none;position:absolute;top:100%;left:0;z-index:60;margin-top:10px;
min-width:230px;background:var(--card);border:1px solid var(--line);border-radius:8px;
padding:8px 0;box-shadow:0 14px 34px rgba(0,0,0,.28);text-align:left}
nav .sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
nav .sub.flip{left:auto;right:0}
nav .sub a{display:block;padding:7px 16px;font-size:.95rem;font-weight:400;white-space:nowrap;
color:var(--ink)}
nav .sub a:hover,nav .sub a[aria-current]{color:var(--accent);background:var(--soft)}
nav .sub.wide{display:none;grid-template-columns:1fr 1fr;gap:4px 18px;padding:14px 8px 8px;
min-width:0;width:max-content;max-width:min(620px,calc(100vw - 32px))}
nav .sub.wide .subgrp strong{display:block;padding:2px 16px 4px;font-family:var(--font-ui);
font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
nav .sub.wide .subgrp{padding-bottom:6px}
nav .sub.wide .subfoot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:4px;
padding-top:6px;display:flex;gap:6px;flex-wrap:wrap}
nav .sub.wide .subfoot a{white-space:nowrap}
nav .navi.open>.sub{display:block}
nav .navi.open>.sub.wide{display:grid}
@media(hover:hover){nav .navi:hover>.sub{display:block}nav .navi:hover>.sub.wide{display:grid}
nav .navi:hover .subtog svg{transform:rotate(180deg)}}
nav .navi:focus-within>.sub{display:block}
nav .navi:focus-within>.sub.wide{display:grid}
@media(max-width:640px){nav .sub.wide{grid-template-columns:1fr;max-height:70vh;overflow:auto}
nav .sub a{white-space:normal}}
.btn{font-family:var(--font-ui);background:var(--brand);color:var(--onbrand);text-decoration:none;
font-weight:400;letter-spacing:0;
padding:11px 18px;border-radius:6px;white-space:nowrap;font-size:1.06rem;display:inline-block}
.btn:hover{background:var(--brand-dark);color:var(--onbrand)}
.hero{background:var(--soft);border-bottom:1px solid var(--line);padding:56px 0}
.herorow{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.herotext{flex:1 1 340px;min-width:0}
.heromark{flex:0 0 auto;width:150px}
.heromark img{width:150px;height:150px;object-fit:contain;display:block}
.hero h1{font-family:var(--font-display);font-weight:var(--display-weight);
font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.12;margin:0 0 14px;
letter-spacing:var(--display-tracking);text-wrap:balance;max-width:26ch}
.hero p{font-size:1.14rem;color:var(--muted);max-width:60ch;margin:0 0 24px}
main{padding:44px 0 60px}
h1,h2{font-family:var(--font-display);font-weight:var(--display-weight);
letter-spacing:var(--display-tracking)}
h2{font-size:1.55rem;margin:38px 0 12px;text-wrap:balance}
h2:first-child{margin-top:0}
h3{font-size:1.1rem;margin:24px 0 8px}
p{max-width:68ch;margin:0 0 14px}
ul,ol{max-width:68ch}
li{margin-bottom:6px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:22px 0}
.card{border:1px solid var(--line);border-radius:8px;padding:20px;background:var(--card)}
.card h3{margin:0 0 6px;font-size:1.05rem}
.card p{font-size:.93rem;color:var(--muted);margin:0 0 10px}
.card a{font-weight:600;text-decoration:none;font-size:.92rem}
.card a:hover{text-decoration:underline}
.facts{background:var(--soft);border-radius:8px;padding:22px;margin:26px 0;font-size:.97rem}
.facts div{margin-bottom:6px}
.facts strong{display:inline-block;min-width:150px;color:var(--muted);font-weight:600}
.tiers{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:26px 0}
.tier{border:1px solid var(--line);border-radius:10px;padding:24px;background:var(--card)}
.tier.feature{border-color:var(--brand);border-width:2px}
.tier .amt{font-family:var(--font-ui);font-size:2.15rem;font-weight:700;letter-spacing:0;margin:6px 0 2px}
.tier .per{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.tier ul{list-style:none;padding:0;margin:0 0 18px}
.tier li{padding-left:20px;position:relative;font-size:.94rem}
.tier li:before{content:"\2713";position:absolute;left:0;color:var(--brand);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;padding:0;list-style:none;max-width:none}
.chips li{margin:0}
.chips a,.chips span{display:inline-block;border:1px solid var(--line);border-radius:99px;
padding:5px 13px;font-size:.86rem;text-decoration:none;color:var(--muted)}
.chips a:hover{border-color:var(--brand);color:var(--accent)}
table{border-collapse:collapse;width:100%;margin:20px 0;font-size:.95rem}
.scroll{overflow-x:auto;margin:20px 0;-webkit-overflow-scrolling:touch;max-width:100%}
.scroll table{margin:0;min-width:640px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font-family:var(--font-ui);color:var(--muted);font-weight:600;font-size:.9rem;
text-transform:uppercase;letter-spacing:.05em}
.cta{background:var(--brand);color:var(--onbrand);border-radius:8px;padding:28px;margin:40px 0 0;text-align:center}
.cta h2{color:var(--onbrand);margin:0 0 8px}
.cta p{color:rgba(255,255,255,.9);margin:0 auto 18px;max-width:48ch}
.cta a{font-family:var(--font-ui);background:var(--onbrand);color:var(--brand-dark);
text-decoration:none;font-weight:400;letter-spacing:0;
padding:13px 26px;border-radius:6px;display:inline-block;font-size:1.1rem}
.crumbs{font-size:.84rem;color:var(--muted);margin:0 0 18px;line-height:1.7}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--brand-dark);border-bottom-color:var(--brand)}
.crumbs .sep{padding:0 6px;opacity:.6}
.crumbs span[aria-current]{color:var(--ink)}
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:.89rem;margin-top:50px}
footer a{color:var(--muted)}
.fnav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
/* Between the wide header and the tablet breakpoint the enlarged wordmark and nav no
longer fit on one row, and the bar grows taller than it was before it was enlarged. Step
the two sizes back down through that band so the header shrinks gracefully instead of
stacking. */
@media(max-width:1279px){:root{--logo-size:1.18rem;--nav-size:1.04rem}nav{gap:12px}}
/* Below 1080 the header returns to the sizes it was already tuned at. The enlargement is
for desktop, where the empty rail made the type look undersized; narrow screens never had
that problem and stacking bigger text there only makes the bar taller. */
/* gap 11 -> 10 here: the two menu arrows add ~30px to the row, and at 1050 the nav was 11px
   short of fitting beside the button. Measured, not guessed - see the header sweep. */
@media(max-width:1080px){:root{--logo-size:1.06rem;--nav-size:1rem}nav{gap:10px}
.logo img{height:42px;width:42px}}
@media(max-width:900px){nav{gap:13px}:root{--nav-size:1rem}}
@media(max-width:640px){.hero{padding:38px 0}.bar{gap:10px}
.herorow{gap:20px}.heromark{width:96px}.heromark img{width:96px;height:96px}}

/* --- layout variants. All CSS, all keyed off a class on the body element, so no variant changes the
   heading order, the schema, the internal links, or anything the guards are verified against. */
.lay-header-stacked .bar{justify-content:center;text-align:center}
.lay-header-stacked .bar nav{order:3;flex-basis:100%;justify-content:center}
.lay-header-stacked .bar .logo{order:1}
.lay-header-stacked .bar .callbtn{order:2}
.lay-header-rail header{border-bottom-width:3px;border-bottom-color:var(--brand)}
.lay-header-rail .bar{justify-content:flex-start;gap:34px}
.lay-header-rail .bar .callbtn{margin-left:auto}

.lay-hero-plain .hero{background:var(--bg);border-bottom:0;padding:44px 0 8px}
.lay-hero-edge .hero{background:var(--brand);border-bottom:0}
.lay-hero-edge .hero h1,.lay-hero-edge .hero p{color:var(--onbrand)}
.lay-hero-edge .hero .callbtn{background:var(--onbrand);color:var(--brand)}
.lay-hero-edge .hero .callbtn:hover{background:var(--onbrand);color:var(--brand-dark)}

.lay-cards-filled .card{border-color:transparent;background:var(--soft)}
.lay-cards-plain .card{border:0;border-top:2px solid var(--line);border-radius:0;padding:18px 0;background:none}
.lay-cards-plain .grid{gap:0 28px}

.lay-sections-banded main>.wrap>h2{margin-top:0}
.lay-sections-banded main>.wrap{padding-top:0}
.lay-sections-banded .nap{background:var(--soft);border:1px solid var(--line)}
.lay-sections-banded .cta{border-radius:0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
padding-left:20px;padding-right:20px}