/* FBD Race Director website styles. Wording lives in words.js; this file is the look only. */
@font-face{font-family:'Saira Condensed';src:url(fonts/saira-condensed-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Saira Condensed';src:url(fonts/saira-condensed-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Saira Condensed';src:url(fonts/saira-condensed-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(fonts/courier-prime-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(fonts/courier-prime-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Ben Biro Caps';src:url(fonts/ben-biro-caps.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'FBD Stencil';src:url(fonts/stardos-stencil-bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* Corsa is the default skin. Each skin redefines the same tokens. */
:root{
  color-scheme: dark;
  --bg:#08080A; --bg2:#101014; --panel:#141418; --line:#24242C;
  --ink:#FFFFFF; --muted:#C9C9D1; --dim:#9A9AA3;
  --accent:#FFC21A; --on-accent:#08080A; --accent2:#B98CFF; --on-accent2:#120A24; --good:#4FE08D;
  --head:'Saira Condensed', 'Arial Narrow', sans-serif; --head-weight:900; --head-case:uppercase; --head-track:-0.5px;
  --label:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:Barlow, 'Segoe UI', sans-serif;
  --hand:'Ben Biro Caps', 'Segoe Print', cursive;
  --slant:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  --radius:12px;
  --gutter:max(16px, 3.4vw);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .4s,color .4s}
[data-skin="office"] body{
  color-scheme: light;
  background-attachment:fixed !important;
  --bg:#2A1A10; --bg2:#14110D; --panel:#F0E5C7; --line:#B9AC88;
  --ink:#1D1A14; --muted:#3E372B; --dim:#5A5140;
  --accent:#E8BE3A; --on-accent:#14110D; --accent2:#9E3D33; --on-accent2:#FFFFFF; --good:#24374A;
  --head:'Courier Prime', 'Cascadia Mono', 'Courier New', monospace; --head-weight:700; --head-case:uppercase; --head-track:-1px;
  --label:'Courier Prime', 'Courier New', monospace;
  --body:'Courier Prime', 'Cascadia Mono', 'Courier New', monospace;
  --slant:none; --radius:0;
  background:#2A1A10 url(assets/desk.jpg) center/cover no-repeat;
}
[data-skin="professional"] body{
  color-scheme: dark;
  --bg:#071224; --bg2:#040B18; --panel:#0B1A33; --line:#1C2C4A;
  --ink:#FFFFFF; --muted:#C7D2E3; --dim:#A9B7CC;
  --accent:#19C8F5; --on-accent:#071224; --accent2:#8E5CFF; --on-accent2:#FFFFFF; --good:#3DDC97;
  --head:Barlow, Bahnschrift, 'Segoe UI', sans-serif; --head-weight:900; --head-case:uppercase; --head-track:-1.5px;
  --label:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:Barlow, Bahnschrift, 'Segoe UI', sans-serif;
  --slant:none; --radius:0;
}

*{box-sizing:border-box}
img{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--head);font-weight:var(--head-weight);text-transform:var(--head-case);letter-spacing:var(--head-track);text-wrap:balance;margin:0;overflow-wrap:break-word}
p{margin:0}
.label{font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:4px;text-transform:uppercase}
.muted{color:var(--muted)}
.hand{font-family:var(--hand);text-transform:uppercase;letter-spacing:0}
.only-office,.only-pro,.only-corsa{display:none}
[data-skin="office"] .only-office{display:revert}
[data-skin="professional"] .only-pro{display:revert}
[data-skin="corsa"] .only-corsa{display:revert}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-family:var(--label);font-weight:800;font-size:20px;letter-spacing:3px;text-transform:uppercase;padding:18px 40px;background:var(--accent);color:var(--on-accent);clip-path:var(--slant);border:0;cursor:pointer;min-height:48px;text-align:center}
.btn.small{font-size:16px;padding:11px 24px;letter-spacing:2.5px}
[data-skin="office"] .btn{box-shadow:0 8px 18px rgba(0,0,0,.4);letter-spacing:2px}
[data-skin="office"] .btn.ink{background:#14110D;color:#F3EAD3;outline:3px solid var(--accent2);outline-offset:3px}

/* ---------- Header ---------- */
.site-head{position:relative;z-index:30;border-bottom:1px solid var(--line);background:var(--bg)}
.bar{display:flex;align-items:center;gap:14px 32px;min-height:76px;flex-wrap:wrap;padding-block:0}
.brand{display:flex;align-items:baseline;gap:14px;text-decoration:none;flex:0 0 auto}
.brand-mark{font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;font-size:38px;line-height:1;letter-spacing:-.5px}
.brand-name{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;letter-spacing:5px;white-space:nowrap}
.nav{flex:1 1 auto;display:flex;justify-content:center;gap:4px 34px;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:var(--label);font-weight:600;font-size:17px;letter-spacing:4px;text-decoration:none;color:var(--dim);padding:8px 0;white-space:nowrap;border-bottom:3px solid transparent;display:flex;gap:10px;align-items:center}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.nav .num{display:none}
.head-actions{display:flex;align-items:center;gap:16px;flex:0 0 auto;margin-left:auto}
.skin-switch{display:flex;border:1px solid var(--line)}
.skin-switch button{font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;background:transparent;color:var(--dim);border:0;padding:9px 12px;cursor:pointer;min-height:40px}
.skin-switch button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.ticker{display:none}
.nav-strip{display:none}
[data-skin="office"] .nav-strip{display:block}
[data-skin="office"] .nav-main{display:none}
[data-skin="office"] .stamp{display:flex}

[data-skin="office"] .site-head{background:transparent;border-bottom:0}
[data-skin="office"] .bar-outer{background:#14110D;color:#F0E5C7}
[data-skin="office"] .brand{align-items:center;gap:12px}
[data-skin="office"] .brand-mark{font-family:'FBD Stencil',Impact,serif;font-style:normal;font-weight:700;font-size:17px;letter-spacing:0;color:#9E3D33;background:#F0E5C7;border:2px solid #9E3D33;padding:4px 7px}
[data-skin="office"] .brand-name{font-family:'Courier Prime',monospace;font-weight:700;letter-spacing:1px;font-size:16px}
[data-skin="office"] .brand-name::before{content:"FBD / "}
[data-skin="office"] .nav-strip{background:#F0E5C7 url(assets/paper.jpg) center/cover;border-top:3px solid var(--accent);border-bottom:3px solid var(--accent);color:#1D1A14}
[data-skin="office"] .nav-strip .nav{justify-content:flex-start;gap:0}
[data-skin="office"] .nav a{font-family:'Courier Prime',monospace;font-weight:700;font-size:16px;letter-spacing:1px;color:#4A4234;padding:12px 20px;border-bottom:0}
[data-skin="office"] .nav .num{display:inline}
[data-skin="office"] .nav a[aria-current="page"]{color:#1D1A14;padding-left:0}
[data-skin="office"] .nav a[aria-current="page"] .num{background:#C8402F;color:#FFFFFF;font-size:20px;padding:9px 11px}
[data-skin="office"] .skin-switch{border-color:#5A4A35}
[data-skin="office"] .skin-switch button{color:#E9DDBF;font-family:'Courier Prime',monospace}
[data-skin="office"] .skin-switch button[aria-pressed="true"]{background:#E8BE3A;color:#14110D}

[data-skin="professional"] .site-head{background:#0B1A33}
[data-skin="professional"] .bar{padding-block:0;gap:0 28px;min-height:76px}
[data-skin="professional"] .brand{align-items:stretch;gap:0;align-self:stretch;margin-left:calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)))}
[data-skin="professional"] .brand-mark{font-family:Barlow,sans-serif;font-style:normal;font-weight:900;font-size:30px;background:#19C8F5;color:#071224;display:flex;align-items:center;padding:0 20px 0 max(var(--gutter), env(safe-area-inset-left, 0px))}
[data-skin="professional"] .brand-name{background:#FFFFFF;color:#071224;font-weight:800;font-size:17px;letter-spacing:4px;display:flex;align-items:center;padding:0 20px}
[data-skin="professional"] .nav{align-self:stretch;gap:0 4px}
[data-skin="professional"] .nav a{font-weight:700;letter-spacing:3px;padding:0 16px;border-bottom:0;box-shadow:none;min-height:76px}
[data-skin="professional"] .nav a[aria-current="page"]{box-shadow:inset 0 -4px 0 #19C8F5}
[data-skin="professional"] .ticker{display:block;background:#19C8F5;color:#071224;overflow:hidden;white-space:nowrap;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;letter-spacing:3px}
.ticker-track{display:inline-flex;padding:7px 0;animation:fbdTicker 45s linear infinite}
.ticker-track span{padding:0 26px}
.ticker-track i{font-style:normal;opacity:.55}
@keyframes fbdTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Hero ---------- */
.hero{padding-block:40px 0;position:relative;overflow:hidden;overflow:clip}
[data-skin="corsa"] .hero{background:radial-gradient(ellipse 60% 70% at 50% 60%, #1B1A24 0%, rgba(8,8,10,0) 72%)}
.hero-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 48px}
.hero-title{font-size:clamp(42px, 6vw, 92px);line-height:.95;flex:1 1 640px;min-width:0}
.hero-title em{font-style:normal;color:var(--accent)}
.hero-sub{flex:0 1 420px;min-width:0;font-size:20px;color:var(--muted)}
[data-skin="office"] .hero-head{background:#F0E5C7 url(assets/paper.jpg) center/cover;box-shadow:0 16px 40px rgba(0,0,0,.55);max-width:1280px;padding-block:36px 40px;transform:rotate(-.4deg);position:relative}
[data-skin="office"] .hero-head::before{content:"";position:absolute;left:50%;top:-14px;width:160px;height:30px;margin-left:-80px;background:rgba(240,229,199,.8);transform:rotate(2deg)}
[data-skin="office"] .hero-title{font-family:var(--hand);font-weight:400;letter-spacing:0;color:#24374A;line-height:1}
[data-skin="office"] .hero-title em{color:#24374A;background:url(assets/biro-underline.svg) left 100% / 100% .34em no-repeat;padding:0 .06em .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
[data-skin="office"] .hero-sub{color:#1D1A14}
[data-skin="professional"] .hero-title{line-height:.92}

/* ---------- Carousel ---------- */
.carousel{--cw:min(72vw, 960px);position:relative;margin-top:30px;height:calc(var(--cw) * .5625 + 60px);perspective:2200px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage{position:absolute;inset:0;perspective:2200px;transform-style:preserve-3d}
[data-skin="office"] .carousel{--cw:min(70vw, 940px)}
[data-skin="professional"] .stage{perspective:2400px}
.card{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:16/9;transform:translate(-50%,-50%);transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .75s,filter .75s;overflow:hidden;border-radius:var(--radius);background:var(--panel);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px var(--line);will-change:transform}
.card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;pointer-events:none}
.card .hit{position:absolute;inset:0;background:transparent;border:0;cursor:pointer;padding:0}
.card.is-active .hit{display:none}
.phone-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:6%;background:var(--accent);color:var(--on-accent)}
.phone{height:88%;aspect-ratio:9/16;border-radius:calc(var(--cw) * .032);background:#000;padding:calc(var(--cw) * .015) calc(var(--cw) * .011);box-shadow:0 18px 36px rgba(0,0,0,.4)}
.card .phone img{border-radius:calc(var(--cw) * .007);object-fit:contain;object-position:center;background:#000}
.phone-words{font-family:var(--head);font-weight:var(--head-weight);text-transform:uppercase;font-size:calc(var(--cw) * .055);line-height:.95;max-width:40%}
.todo{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;border:2px dashed var(--line);color:var(--dim)}
.todo b{font-family:var(--head);font-weight:var(--head-weight);text-transform:uppercase;color:var(--ink);font-size:calc(var(--cw) * .048);line-height:1}
.todo span{font-family:var(--label);font-weight:700;font-size:14px;letter-spacing:3px;text-transform:uppercase}
.lower-third{display:none}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:60;width:56px;height:56px;border-radius:50%;border:2px solid var(--accent);background:rgba(8,8,10,.75);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.arrow.prev{left:max(16px, 3vw)}.arrow.next{right:max(16px, 3vw)}
.arrow svg{width:22px;height:22px}
.caption{max-width:900px;margin:22px auto 0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.dots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.dots button{width:16px;height:6px;border:0;padding:0;background:var(--line);cursor:pointer;transition:width .4s,background .4s}
.dots button[aria-current="true"]{width:40px;background:var(--accent)}
.cap-tag{color:var(--accent)}
.cap-title{font-family:var(--head);font-weight:var(--head-weight);text-transform:uppercase;font-size:34px;line-height:1.05}
.cap-text{color:var(--muted);max-width:620px;min-height:3.1em}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 30px;padding-block:40px 80px}

[data-skin="office"] .card{background:#F3EAD3;padding:10px;overflow:visible;box-shadow:0 24px 50px rgba(0,0,0,.6)}
[data-skin="office"] .card::before{content:"";position:absolute;left:50%;top:-14px;width:140px;height:30px;margin-left:-70px;background:rgba(240,229,199,.78);transform:rotate(-2deg);z-index:2}
[data-skin="office"] .phone-wrap{background:#F0E5C7 url(assets/paper.jpg) center/cover;color:#24374A}
[data-skin="office"] .phone{transform:rotate(-3deg)}
[data-skin="office"] .phone-words{font-family:var(--hand);font-weight:400}
[data-skin="office"] .todo{background:#F0E5C7 url(assets/paper.jpg) center/cover;border-color:#8C7F62;color:#3E372B}
[data-skin="office"] .todo b{font-family:var(--hand);font-weight:400;color:#24374A}
[data-skin="office"] .arrow{background:#F3EAD3;border:0;color:#1D1A14;box-shadow:0 6px 14px rgba(0,0,0,.5)}
[data-skin="office"] .caption{background:#F0E5C7 url(assets/paper.jpg) center/cover;padding:16px 26px 18px;width:min(660px, calc(100% - 2 * var(--gutter)));transform:rotate(-.8deg);box-shadow:0 10px 24px rgba(0,0,0,.5);position:relative;align-items:flex-start;text-align:left;color:#1D1A14}
[data-skin="office"] .caption::before{content:"";position:absolute;left:50%;top:-12px;width:110px;height:24px;margin-left:-55px;background:rgba(240,229,199,.85);transform:rotate(3deg)}
[data-skin="office"] .dots button{width:14px;height:14px;border-radius:50%;border:2px solid #24374A;background:transparent}
[data-skin="office"] .dots button[aria-current="true"]{width:14px;background:#24374A}
[data-skin="office"] .cap-tag{color:#1D1A14;font-size:13px;letter-spacing:2px}
[data-skin="office"] .cap-title{font-family:var(--hand);font-weight:400;color:#24374A;font-size:38px}
[data-skin="office"] .cap-text{color:#1D1A14}
[data-skin="office"] .cta-row .muted{color:#F3EAD3;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.6)}

[data-skin="professional"] .card{box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 2px var(--line)}
[data-skin="professional"] .arrow{border-radius:0;border:0;background:#19C8F5;color:#071224}
[data-skin="professional"] .card.is-active.is-wide .lower-third{display:flex}
.lower-third{position:absolute;left:4%;bottom:7%;align-items:stretch;box-shadow:0 8px 20px rgba(0,0,0,.45);max-width:92%}
.lower-third b{background:#19C8F5;color:#071224;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(11px, 1.2vw, 16px);letter-spacing:3px;padding:6px 12px;display:flex;align-items:center;text-transform:uppercase}
.lower-third span{background:#FFFFFF;color:#071224;font-weight:800;font-size:clamp(13px, 1.6vw, 22px);padding:6px 16px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Sections ---------- */
.section{padding-block:96px}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-bottom:40px}
.section-head h2{font-size:clamp(40px, 5.6vw, 92px);line-height:.92;max-width:900px;min-width:0}
.section-head p{max-width:460px;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));gap:24px}

/* Office: sections sit on one sheet of paper each */
[data-skin="office"] .sheet{background:#F0E5C7 url(assets/paper.jpg) center/cover;color:#1D1A14;box-shadow:0 16px 40px rgba(0,0,0,.55);max-width:1280px;margin:0 auto;padding:44px max(16px, 56px) 56px;position:relative}
[data-skin="office"] .section{padding-block:28px}
[data-skin="office"] .section-head{border-bottom:3px solid #1D1A14;padding-bottom:16px}
[data-skin="office"] .section-head h2{letter-spacing:-2px}
[data-skin="office"] .section-head p,[data-skin="office"] .muted{color:#3E372B}
.form-strip{display:none}
[data-skin="office"] .form-strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;font-weight:700;font-size:13px;letter-spacing:2px;margin-bottom:26px}

/* Together */
.together{background:var(--accent);color:var(--on-accent)}
.together .muted{color:inherit;opacity:.85}
.together h2{font-size:clamp(42px, 7.4vw, 128px);line-height:.98;max-width:1100px}
.together h2 em{font-style:normal;color:var(--on-accent2);background:linear-gradient(var(--accent2), var(--accent2)) 0 50% / 100% 57% no-repeat;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.together-lead{font-size:clamp(20px, 1.8vw, 26px);max-width:760px;margin-top:28px;font-weight:500}
.together .grid3{margin-top:56px}
.point{border-top:4px solid currentColor;padding-top:18px;display:flex;flex-direction:column;gap:8px}
.point h3{font-size:34px;line-height:1}
[data-skin="office"] .together{background:transparent;color:#1D1A14}
[data-skin="office"] .together h2{font-family:var(--hand);font-weight:400;letter-spacing:0;color:#24374A;line-height:1}
[data-skin="office"] .together h2 em{color:#24374A;background:url(assets/biro-underline.svg) left 100% / 100% .34em no-repeat;padding:0 .06em .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
[data-skin="office"] .point{border-top:2px solid #1D1A14}
[data-skin="office"] .point h3{font-size:26px;letter-spacing:-.5px}
[data-skin="professional"] .together{background:#FFFFFF;color:#071224}
[data-skin="professional"] .together h2 em{background:linear-gradient(#19C8F5, #19C8F5) 0 63% / 100% 75% no-repeat;color:#071224}
[data-skin="professional"] .point{border-top:6px solid #19C8F5}

/* Features */
.feature{display:flex;flex-direction:column;gap:10px;border-top:4px solid var(--c, var(--accent));padding-top:20px;min-width:0}
.feature .label{color:var(--c, var(--accent))}
.feature h3{font-size:32px;line-height:1.02}
.feature p{color:var(--muted)}
[data-skin="office"] .feature{border-top:0;border-bottom:1px solid #B9AC88;padding:0 0 22px}
[data-skin="office"] .feature .label{color:#1D1A14;font-size:14px;letter-spacing:2px}
[data-skin="office"] .feature h3{font-size:26px;letter-spacing:-.5px}
[data-skin="professional"] .feature{background:var(--panel);border-top:0;padding:28px}
[data-skin="professional"] .feature .label{align-self:flex-start;background:var(--c, #19C8F5);color:#071224;padding:3px 10px;font-size:14px;letter-spacing:3px}

/* Awards band */
.band{padding-block:88px}
.band-awards{background:var(--accent);color:var(--on-accent)}
.band-notes{background:var(--accent2);color:var(--on-accent2)}
.band-inner{display:flex;flex-wrap:wrap;gap:36px 64px;align-items:center}
.band-inner > *{flex:1 1 440px;min-width:0}
.big-num{font-family:var(--head);font-weight:var(--head-weight);font-size:clamp(110px, 16vw, 240px);line-height:.8}
.band h2{font-size:clamp(36px, 4.6vw, 72px);line-height:.95}
.award-list{display:flex;flex-direction:column;font-family:var(--head);font-weight:var(--head-weight);text-transform:uppercase;font-size:clamp(24px, 2.8vw, 40px);line-height:1.2}
.award-list span{border-bottom:2px solid currentColor;padding:8px 0}
.award-list span:last-child{border-bottom:0}
.notes-card{background:#120A24;color:#FFFFFF;padding:28px 32px;display:flex;flex-direction:column;gap:14px;font-variant-numeric:tabular-nums}
.notes-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid #3A2E5C;padding-bottom:12px;font-family:var(--head);font-weight:800;font-size:26px;text-transform:uppercase;flex-wrap:wrap}
.notes-card .muted{color:#D8CCF5}
.notes-row .neg{color:#FF8A7D}.notes-row .pos{color:#4FE08D}
[data-skin="office"] .band-awards,[data-skin="office"] .band-notes{background:transparent;color:#1D1A14}
[data-skin="office"] .award-list{font-family:var(--hand);font-weight:400;color:#24374A}
[data-skin="office"] .award-list span{border-bottom:1px solid #B9AC88}
[data-skin="office"] .big-num{font-family:var(--hand);font-weight:400;color:#24374A}
[data-skin="office"] .notes-card{background:transparent;color:#24374A;padding:0;border-top:2px solid #1D1A14}
[data-skin="office"] .notes-row{font-family:var(--hand);font-weight:400;font-size:30px;border-bottom:1px solid #B9AC88;padding-top:12px}
[data-skin="office"] .notes-row .neg{color:#9E3D33}[data-skin="office"] .notes-row .pos{color:#24374A}
[data-skin="office"] .notes-card .muted{color:#3E372B}
[data-skin="professional"] .band-awards{background:#FFFFFF;color:#071224}
[data-skin="professional"] .band-notes{background:#0B1A33;color:#FFFFFF}
[data-skin="professional"] .band-notes .label{color:#8E5CFF}
[data-skin="professional"] .notes-card{background:#071224}
[data-skin="professional"] .award-list span{border-bottom:2px solid #D5DDE8}
[data-skin="professional"] .award-list span:nth-child(odd){color:#071224}

.stamp{width:200px;height:200px;border-radius:50%;border:6px solid #9E3D33;display:none;align-items:center;justify-content:center;transform:rotate(-12deg);opacity:.9;flex:0 0 auto !important;filter:url(#fbd-ink);mix-blend-mode:multiply}
.stamp div{width:170px;height:170px;border-radius:50%;border:2px dashed #9E3D33;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9E3D33;font-family:'FBD Stencil',Impact,serif;font-weight:700;text-align:center}
.stamp small{font-size:16px;letter-spacing:3px}
.stamp strong{font-size:48px;line-height:1;border-top:3px solid #9E3D33;border-bottom:3px solid #9E3D33;padding:0 6px}

/* Themes */
.themes-grid .theme-pick{display:flex;flex-direction:column;gap:10px;text-align:left;padding:28px;border:1px solid var(--line);cursor:pointer;font:inherit;min-height:200px;position:relative}
.theme-pick .name{font-size:clamp(30px, 8.6vw, 44px);overflow-wrap:anywhere;line-height:1;font-weight:900;text-transform:uppercase}
.theme-pick .state{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:3px;text-transform:uppercase;margin-top:auto}
.pick-corsa{background:#030303;color:#FFFFFF;border-top:6px solid #FFC21A !important}
.pick-corsa .name{font-family:'Saira Condensed',sans-serif;color:#FFC21A}
.pick-office{background:#F0E5C7 url(assets/paper.jpg) center/cover;color:#17140E;border-top:6px solid #9E3D33 !important}
.pick-office .name{font-family:'Ben Biro Caps',cursive;font-weight:400;color:#24374A}
.pick-office .desc,.pick-office .state{font-family:'Courier Prime',monospace}
.pick-pro{background:#EDF1F4;color:#0B1520;border-top:6px solid #19C8F5 !important}
.pick-pro .name{font-family:Barlow,sans-serif}
.theme-pick[aria-pressed="true"]{box-shadow:0 0 0 4px var(--accent)}

/* Free */
.free{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 64px}
.free > .free-text{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;gap:14px}
.slip{flex:0 0 auto;background:radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), linear-gradient(170deg, rgba(0,0,0,0) 60%, rgba(70,50,20,.10)), #EEE3C4 url(assets/paper.jpg) 37% 61%/260% auto;padding:30px 34px 34px 30px;transform:rotate(3deg);box-shadow:0 1px 1px rgba(0,0,0,.35), 0 3px 6px rgba(0,0,0,.25), 6px 22px 26px -10px rgba(0,0,0,.6);position:relative}
.slip::before{content:"";position:absolute;left:50%;top:-14px;width:104px;height:30px;margin-left:-52px;background:linear-gradient(180deg, rgba(255,252,240,.62), rgba(236,228,205,.5));box-shadow:0 1px 2px rgba(0,0,0,.12);transform:rotate(-5deg);clip-path:polygon(0 6%,4% 0,9% 8%,14% 1%,20% 6%,80% 3%,86% 9%,91% 0,96% 7%,100% 2%,100% 95%,95% 100%,90% 92%,84% 100%,78% 94%,22% 98%,16% 91%,10% 100%,5% 93%,0 99%)}
.slip .stamp{margin:-4px 0 0 6px;transform:rotate(-14deg)}
.slip .stamp{display:flex}
[data-skin="office"] .slip{background:none;box-shadow:none;padding:0;transform:none}
[data-skin="office"] .slip::before{display:none}
.free h2{font-size:clamp(44px, 6vw, 96px);line-height:.92}
.free h2 em{font-style:normal;color:var(--accent)}
[data-skin="office"] .free h2 em{color:#9E3D33}

/* Video */
.video-frame{position:relative;aspect-ratio:16/9;width:100%;max-width:1100px;margin:0 auto;background:var(--panel);border:1px solid var(--line);overflow:hidden;border-radius:var(--radius)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-todo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;border:2px dashed var(--line);color:var(--dim)}
.play{width:96px;height:96px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center}
.play svg{width:40px;height:40px;margin-left:6px}
.video-todo b{font-family:var(--head);font-weight:var(--head-weight);text-transform:uppercase;color:var(--ink);font-size:clamp(26px, 3vw, 44px);line-height:1}
[data-skin="office"] .video-frame{background:#14110D;border:10px solid #F3EAD3;box-shadow:0 20px 44px rgba(0,0,0,.55);transform:rotate(.6deg)}
[data-skin="office"] .video-todo{color:#E9DDBF;border-color:#5A4A35}
[data-skin="office"] .video-todo b{font-family:var(--hand);font-weight:400;color:#F3EAD3}
[data-skin="professional"] .play{border-radius:0}
.video-lower{display:none}
[data-skin="professional"] .video-lower{display:flex;position:absolute;left:4%;bottom:7%}
[data-skin="professional"] .video-lower b{background:#19C8F5;color:#071224;font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:3px;padding:6px 12px}
[data-skin="professional"] .video-lower span{background:#FFFFFF;color:#071224;font-weight:800;padding:6px 16px;text-transform:uppercase}

/* Back to top */
.to-top{position:fixed;right:calc(20px + env(safe-area-inset-right, 0px));bottom:calc(20px + env(safe-area-inset-bottom, 0px));z-index:90;width:56px;height:56px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);clip-path:var(--slant);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:24px;height:24px}
.site-foot .wrap{padding-right:max(var(--gutter), 96px)}
[data-skin="corsa"] .to-top{width:64px}
[data-skin="office"] .to-top{background:#F3EAD3;color:#1D1A14;border-radius:50%;clip-path:none}

.site-foot{border-top:1px solid var(--line);background:var(--bg2)}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding-block:28px;font-family:var(--label);font-weight:600;font-size:15px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
[data-skin="office"] .site-foot{background:#14110D;border:0}
[data-skin="office"] .site-foot .wrap{color:#E9DDBF;letter-spacing:1px}

.skin-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom, 0px));transform:translate(-50%, 20px);opacity:0;pointer-events:none;background:var(--accent);color:var(--on-accent);font-family:var(--label);font-weight:800;letter-spacing:3px;text-transform:uppercase;padding:12px 22px;z-index:100;transition:opacity .3s,transform .3s}
.skin-toast.show{opacity:1;transform:translate(-50%, 0)}

@media (max-width: 1300px){
  .bar{min-height:0}
  .nav{order:3;flex-basis:100%;justify-content:flex-start}
  [data-skin="professional"] .nav a{min-height:48px}
  .head-actions{min-height:76px}
}
@media (max-width: 900px){
  .carousel{--cw:86vw}
  .arrow{width:44px;height:44px}
  .section{padding-block:64px}
}
@media (max-width: 520px){
  .brand-name{display:none}
  [data-skin="professional"] .brand-name{display:none}
  .skin-switch button{padding:8px 8px;font-size:12px;letter-spacing:1px}
  .head-actions .btn{display:none}
  .stamp,.slip{display:none !important}
  [data-skin="office"] .wrap{padding-left:max(10px, env(safe-area-inset-left, 0px));padding-right:max(10px, env(safe-area-inset-right, 0px))}
  [data-skin="office"] .sheet{padding:28px 18px 34px}
  [data-skin="office"] .caption{transform:none;width:100%}
  [data-skin="office"] .hero-head{padding-inline:16px}
  .arrow{display:none}
}
@media (min-width: 1900px){
  .wrap{max-width:1840px}
  body{font-size:20px}
  .carousel{--cw:min(62vw, 1400px)}
  [data-skin="office"] .carousel{--cw:min(60vw, 1360px)}
  [data-skin="office"] .sheet,[data-skin="office"] .hero-head{max-width:1600px}
  .video-frame{max-width:1400px}
}
@media (min-width: 901px) and (max-width: 1500px){
  [data-skin="professional"] .nav a{padding:0 9px;letter-spacing:2px;font-size:16px}
  [data-skin="professional"] .brand-name{letter-spacing:3px;padding:0 16px}
  [data-skin="professional"] .bar{gap:0 18px}
  .nav{gap:4px 24px}
}
@media (min-width: 901px) and (max-width: 1180px){
  .carousel{--cw:78vw}
  .hero-sub{flex-basis:100%}
}
@media (prefers-reduced-motion: reduce){
  .card,.dots button,body{transition:none !important}
  .ticker-track{animation:none}
}

/* =====================================================================
   Real-site additions: skip link, page tops, mode tiles, modes page,
   Arcade, sims table, download, support, privacy.
   ===================================================================== */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--on-accent);padding:10px 16px;font-family:var(--label);font-weight:800;letter-spacing:2px;text-decoration:none}
.skip:focus{top:12px}
main:focus{outline:none}
.site-foot a{text-decoration:none}
.site-foot a:hover,.more:hover{text-decoration:underline}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-mail{text-transform:none;letter-spacing:1px}
.foot-copy{flex-basis:100%;font-weight:500;letter-spacing:2px;opacity:.8}
.note{font-family:var(--label);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:14px;color:var(--dim);margin-top:14px}
.muted a,.prose a,.faq a{color:var(--accent)}
[data-skin="office"] .muted a,[data-skin="office"] .prose a,[data-skin="office"] .faq a{color:#9E3D33}
[data-skin="professional"] .together .muted a{color:#071224}

/* Page tops (every page but home) */
.page-top{padding-block:64px 24px}
.page-title{font-size:clamp(46px, 7vw, 116px);line-height:.95;margin-top:14px;max-width:1200px}
.page-title em{font-style:normal;color:var(--accent)}
.page-lead{font-size:clamp(19px, 1.6vw, 24px);color:var(--muted);max-width:820px;margin-top:22px}
.page-top .label{color:var(--accent)}
.page-top .mode-tiles,.page-top .get-box{margin-top:44px}
[data-skin="office"] .page-top{padding-block:36px 8px}
[data-skin="office"] .page-top .label{color:#9E3D33}
[data-skin="office"] .page-title{font-family:var(--hand);font-weight:400;letter-spacing:0;color:#24374A;line-height:1.02}
[data-skin="office"] .page-title em{color:#24374A;background:url(assets/biro-underline.svg) left 100% / 100% .34em no-repeat;padding:0 .06em .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
[data-skin="office"] .page-lead{color:#1D1A14}
[data-skin="professional"] .page-top{background:#0B1A33;border-bottom:6px solid #19C8F5;padding-bottom:56px}
[data-skin="professional"] .page-title{line-height:.92}

.h-mid{font-size:clamp(30px, 3vw, 46px);line-height:1;margin-bottom:22px}
.two-col{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));gap:40px 64px;margin-top:8px}
.two-col.wide-right{grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr)}
.two-col h3{font-size:30px;line-height:1;margin-bottom:16px}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ticks li{position:relative;padding-left:30px;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:4px;background:var(--accent);transform:skewX(-20deg)}
[data-skin="office"] .ticks li{color:#1D1A14}
[data-skin="office"] .ticks li::before{background:#9E3D33;transform:none;height:2px}

/* Mode tiles */
.mode-tiles{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));gap:20px}
.mode-tile{--c:var(--accent);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);background:var(--panel);border-top:6px solid var(--c);padding:24px 24px 28px;min-height:220px;transition:transform .25s,box-shadow .25s}
.mode-tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.mode-tile h3{font-size:clamp(34px, 3vw, 46px);line-height:.95}
.mode-tile p{color:var(--muted)}
.mode-num{font-family:var(--head);font-weight:var(--head-weight);font-size:20px;color:var(--c, var(--accent))}
.mode-timetrial{--c:#FFC21A}.mode-raceparty{--c:#B98CFF}.mode-racedirector{--c:#4FE08D}.mode-arcade{--c:#FF8A7D}
.more-row{margin-top:30px}
.more{font-family:var(--label);font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--accent);text-decoration:none;font-size:17px}
.more::after{content:"";display:inline-block;width:9px;height:9px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg);margin-left:10px;vertical-align:2px}
[data-skin="corsa"] .mode-tile{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%)}
[data-skin="office"] .mode-tile{background:#FBF5E4;color:#1D1A14;border-top:0;border-left:6px solid var(--c);box-shadow:0 6px 14px rgba(60,40,10,.28);transform:rotate(-.6deg)}
[data-skin="office"] .mode-tile:nth-child(even){transform:rotate(.7deg)}
[data-skin="office"] .mode-tile:hover{transform:translateY(-4px) rotate(0)}
[data-skin="office"] .mode-tile h3{font-family:var(--hand);font-weight:400;letter-spacing:0;color:#24374A}
[data-skin="office"] .mode-tile p{color:#3E372B}
[data-skin="office"] .mode-num{font-family:var(--label);color:#9E3D33}
[data-skin="office"] .mode-timetrial{--c:#C8A23A}[data-skin="office"] .mode-raceparty{--c:#6B4FA0}[data-skin="office"] .mode-racedirector{--c:#3D7A55}[data-skin="office"] .mode-arcade{--c:#3D7A55}
[data-skin="office"] .mode-tile.mode-arcade{background:#E3F0E2}
[data-skin="office"] .more{color:#9E3D33}
[data-skin="professional"] .mode-timetrial{--c:#19C8F5}[data-skin="professional"] .mode-raceparty{--c:#8E5CFF}[data-skin="professional"] .mode-racedirector{--c:#3DDC97}[data-skin="professional"] .mode-arcade{--c:#FF8A7D}
[data-skin="professional"] .mode-tile{border-top:0;box-shadow:inset 0 -5px 0 var(--c)}
[data-skin="professional"] .mode-num{align-self:flex-start;background:var(--c);color:#071224;padding:2px 10px;font-size:18px}

/* Modes page */
.mode-main{display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);gap:32px 72px;align-items:start}
.mode-intro{display:flex;flex-direction:column;gap:12px}
.mode-intro .mode-num{font-size:clamp(70px, 9vw, 150px);line-height:.8}
.mode-intro h2{font-size:clamp(46px, 6vw, 96px);line-height:.92;color:var(--ink)}
.mode-free{align-self:flex-start;background:var(--c);color:#08080A;padding:3px 12px;font-size:13px}
.mode-short{font-family:var(--head);font-weight:var(--head-weight);text-transform:uppercase;font-size:clamp(22px, 2vw, 30px);line-height:1.05;color:var(--c)}
.mode-steps ol{list-style:none;counter-reset:s;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.mode-steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;color:var(--muted)}
.mode-steps li::before{content:counter(s);font-family:var(--head);font-weight:var(--head-weight);font-size:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--c);color:#08080A}
.mode-steps > .label{color:var(--c)}
.mode-block{border-top:1px solid var(--line)}
[data-skin="corsa"] .mode-steps li::before{clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
[data-skin="office"] .mode-block{border-top:0}
[data-skin="office"] .mode-intro h2{font-family:var(--hand);font-weight:400;letter-spacing:0;color:#24374A}
[data-skin="office"] .mode-intro .mode-num{color:#9E3D33;font-family:var(--label)}
[data-skin="office"] .mode-short{color:#1D1A14;font-family:var(--label);letter-spacing:0}
[data-skin="office"] .mode-steps li{color:#1D1A14}
[data-skin="office"] .mode-steps li::before{background:transparent;color:#24374A;border:2px solid #24374A;border-radius:50%;font-family:var(--hand);font-weight:400}
[data-skin="office"] .mode-steps > .label{color:#9E3D33}
[data-skin="office"] .mode-free{color:#FFFFFF;background:#9E3D33}
[data-skin="professional"] .mode-steps li::before{color:#071224}
[data-skin="professional"] .mode-block:nth-of-type(odd){background:#0B1A33}

/* Arcade */
.arcade{margin-top:64px;padding-top:40px;border-top:4px solid var(--c)}
.arcade-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));gap:20px}
.arcade-card{background:var(--panel);padding:26px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.arcade-card .label{color:var(--c)}
.arcade-card h3{font-size:34px;line-height:1;transform:skewX(-8deg);transform-origin:left}
.arcade-card p{color:var(--muted)}
.stars-row{display:flex;flex-wrap:wrap;gap:28px 64px;align-items:center;margin-top:44px}
.stars-text{flex:1 1 380px;min-width:0}
.stars-text h3{font-size:34px;margin-bottom:8px}
.stars-text p{color:var(--muted)}
.stars{display:flex;gap:20px;flex-wrap:wrap}
.star-mark{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--label);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:14px;color:var(--muted)}
.star-shape{display:block;width:72px;height:72px;background:linear-gradient(145deg, #FFE48A, #FFC21A 45%, #C98A00);clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);animation:fbdStar 3.2s ease-in-out infinite}
.star-mark:nth-child(2) .star-shape{animation-delay:.4s}.star-mark:nth-child(3) .star-shape{animation-delay:.8s}
.star-mark.is-secret .star-shape{background:linear-gradient(145deg, #3A3A44, #1B1B22);clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);animation:none;display:flex;align-items:center;justify-content:center;position:relative}
.star-mark.is-secret .star-shape::after{content:"?";font-family:var(--head);font-weight:900;font-style:normal;font-size:34px;color:#8B8B96;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
@keyframes fbdStar{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.18);transform:scale(1.05)}}
[data-skin="corsa"] .arcade-card{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);background:linear-gradient(135deg, #18161E, #101014)}
[data-skin="corsa"] .arcade-card::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg, rgba(255,138,125,.06) 0 2px, transparent 2px 22px);animation:fbdStripes 9s linear infinite;pointer-events:none}
@keyframes fbdStripes{from{background-position:0 0}to{background-position:220px 0}}
[data-skin="office"] .arcade{border-top:2px dashed #3D7A55}
[data-skin="office"] .arcade .form-strip{color:#2F6B47}
[data-skin="office"] .arcade-card{background:#E3F0E2;border:1px solid #9CC3A3;color:#1D1A14}
[data-skin="office"] .arcade-card h3{font-family:var(--hand);font-weight:400;color:#24374A;letter-spacing:0;transform:none}
[data-skin="office"] .arcade-card p{color:#2B3A2E}
[data-skin="office"] .arcade-card .label{color:#2F6B47}
[data-skin="office"] .star-shape{width:76px;height:76px;clip-path:none;border-radius:50%;background:transparent;border:5px solid #9E3D33;mix-blend-mode:multiply;filter:url(#fbd-ink);animation:none;transform:rotate(-10deg);position:relative}
[data-skin="office"] .star-shape::after{content:"";position:absolute;inset:12px;background:#9E3D33;clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}
[data-skin="office"] .star-mark:nth-child(2) .star-shape{transform:rotate(7deg);opacity:.8}
[data-skin="office"] .star-mark:nth-child(3) .star-shape{transform:rotate(-3deg);opacity:.95}
[data-skin="office"] .star-mark.is-secret .star-shape{border-style:dashed;border-color:#8C7F62;opacity:.7;background:transparent;filter:none;clip-path:none}
[data-skin="office"] .star-mark.is-secret .star-shape::after{background:none;clip-path:none;color:#8C7F62;font-family:var(--hand);font-weight:400;inset:0}
[data-skin="office"] .star-mark{color:#1D1A14}
[data-skin="office"] .stars-text p{color:#1D1A14}
[data-skin="professional"] .arcade-card{border-left:5px solid #8E5CFF}
[data-skin="professional"] .arcade-card .label{color:#8E5CFF}
[data-skin="professional"] .arcade-card h3{transform:none}
[data-skin="professional"] .star-shape{background:linear-gradient(145deg, #B593FF, #8E5CFF 50%, #5B2FD0)}

/* Sims table */
.sims{width:100%;border-collapse:collapse;margin-bottom:56px}
.sims th,.sims td{text-align:left;padding:18px 20px 18px 0;border-bottom:1px solid var(--line);vertical-align:top}
.sims thead th{font-family:var(--label);font-weight:800;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);border-bottom:3px solid var(--accent)}
.sims tbody th{font-family:var(--head);font-weight:var(--head-weight);text-transform:uppercase;font-size:clamp(22px, 2vw, 30px);line-height:1.05;width:34%}
.sims td{color:var(--muted)}
.sims td:nth-child(2){width:220px;white-space:nowrap}
.chip{display:inline-block;font-family:var(--label);font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase;padding:5px 12px}
.chip-tested{background:var(--good);color:#08080A}
.chip-new{background:var(--accent);color:var(--on-accent)}
.chip-untested{border:2px solid var(--dim);color:var(--muted);padding:3px 10px}
[data-skin="office"] .sims thead th{border-bottom:3px solid #1D1A14;color:#3E372B}
[data-skin="office"] .sims th,[data-skin="office"] .sims td{border-bottom-color:#B9AC88}
[data-skin="office"] .sims tbody th{font-family:var(--label);color:#1D1A14;letter-spacing:-.5px}
[data-skin="office"] .sims td{color:#1D1A14}
[data-skin="office"] .chip{background:transparent;border:2px solid currentColor;transform:rotate(-3deg);font-family:'FBD Stencil',Impact,serif;letter-spacing:1px;padding:3px 9px;mix-blend-mode:multiply}
[data-skin="office"] .chip-tested{color:#2F6B47}[data-skin="office"] .chip-new{color:#9E3D33}[data-skin="office"] .chip-untested{color:#6A604C;border-style:dashed}
[data-skin="professional"] .sims thead th{border-bottom-color:#19C8F5}

/* Download, support and privacy */
.get-box{background:var(--panel);padding:32px 36px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:900px;border-left:6px solid var(--accent)}
.get-box h2{font-size:clamp(28px, 3vw, 44px);line-height:1}
.big-mail{font-family:var(--head);font-weight:var(--head-weight);font-size:clamp(18px, 5.2vw, 52px);color:var(--accent);text-decoration:none;overflow-wrap:anywhere;line-height:1.05}
.big-mail:hover{text-decoration:underline}
.get-box .label{color:var(--dim)}
[data-skin="office"] .get-box{background:#FBF5E4;border-left:0;border:2px solid #1D1A14;box-shadow:6px 6px 0 rgba(29,26,20,.18)}
[data-skin="office"] .get-box h2{font-family:var(--hand);font-weight:400;letter-spacing:0;color:#24374A}
[data-skin="office"] .big-mail{font-family:var(--label);color:#9E3D33;letter-spacing:-1px}
[data-skin="professional"] .get-box{background:#071224;border-left-color:#19C8F5}
.steps{list-style:none;counter-reset:st;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.steps li{counter-increment:st;display:grid;grid-template-columns:52px 1fr;column-gap:18px}
.steps li::before{content:counter(st);grid-row:1 / span 2;font-family:var(--head);font-weight:var(--head-weight);font-size:26px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent)}
.steps h3{font-size:26px;line-height:1.05;margin-bottom:4px}
[data-skin="corsa"] .steps li::before{clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
[data-skin="office"] .steps li::before{background:transparent;border:2px solid #24374A;border-radius:50%;color:#24374A;font-family:var(--hand);font-weight:400}
[data-skin="office"] .steps h3{letter-spacing:-.5px}
.faq{display:flex;flex-direction:column}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--head);font-weight:var(--head-weight);text-transform:uppercase;font-size:clamp(20px, 1.8vw, 26px);line-height:1.1;padding:18px 44px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{color:var(--muted);padding:0 0 22px}
[data-skin="office"] .faq details{border-bottom-color:#B9AC88}
[data-skin="office"] .faq summary{letter-spacing:-.5px}
[data-skin="office"] .faq summary::after{border-color:#9E3D33}
[data-skin="office"] .faq details p{color:#1D1A14}
.prose{max-width:860px;display:flex;flex-direction:column;gap:44px}
.prose p{color:var(--muted);margin-top:14px}
.prose p:first-of-type{margin-top:0}
[data-skin="office"] .prose p{color:#1D1A14}

/* Office: every section is its own sheet of paper, so give them a little room */
[data-skin="office"] main > section + section{margin-top:18px}

@media (max-width: 900px){
  .mode-main{grid-template-columns:1fr}
  .two-col.wide-right{grid-template-columns:1fr}
  .page-top{padding-block:44px 16px}
  .sims thead{display:none}
  .sims,.sims tbody,.sims tr,.sims th,.sims td{display:block;width:auto !important}
  .sims tr{padding:18px 0;border-bottom:1px solid var(--line)}
  .sims th,.sims td{border:0;padding:4px 0}
  .sims td:nth-child(2){white-space:normal;padding:8px 0}
  [data-skin="office"] .sims tr{border-bottom-color:#B9AC88}
}
@media (max-width: 520px){
  .get-box{padding:24px 20px}
  .stars{gap:12px}
  .star-shape{width:56px;height:56px}
  [data-skin="office"] .star-shape{width:58px;height:58px}
}
@media (prefers-reduced-motion: reduce){
  .star-shape,[data-skin="corsa"] .arcade-card::after{animation:none !important}
  .mode-tile{transition:none}
}
.band-col{display:flex;flex-direction:column;gap:14px}
.feature.f1{--c:#FFC21A}.feature.f2{--c:#B98CFF}.feature.f3{--c:#4FE08D}.feature.f4{--c:#FF8A7D}.feature.f5{--c:#4BA3F2}.feature.f6{--c:#FFC21A}
@media (max-width: 1320px){
  [data-skin="office"] .hero-head{margin-inline:12px}
}
@media (max-width: 520px){
  .nav{flex-wrap:wrap;overflow:visible;gap:2px 18px}
  [data-skin="office"] .nav-strip .nav a{padding:8px 12px 8px 0;font-size:15px}
  [data-skin="office"] .nav a[aria-current="page"] .num{font-size:16px;padding:6px 8px}
  [data-skin="professional"] .nav a{padding:0 8px;min-height:44px}
}
/* Each look card in the chooser keeps its own type, whichever look the page is in */
.pick-corsa .desc,.pick-corsa .state,.pick-pro .desc,.pick-pro .state{font-family:Barlow, 'Segoe UI', sans-serif;letter-spacing:normal}
.pick-corsa .state,.pick-pro .state{font-family:'Barlow Condensed', sans-serif;letter-spacing:3px}
@media (min-width: 900px){ .big-mail{font-size:clamp(30px, 3.4vw, 52px)} }
@media (max-width: 899px){ [data-skin="office"] .big-mail{font-size:clamp(15px, 4.4vw, 40px)} }
