/* CHRO Fix microsite. Natter design system tokens (Styleguide 1.0 / Colour Guide). */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/Geist-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:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/Geist-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:'Lazare Grotesk';src:url("fonts/LazareGrotesk-Light.otf") format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Lazare Grotesk';src:url("fonts/LazareGrotesk-Regular.otf") format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Lazare Grotesk';src:url("fonts/LazareGrotesk-Medium.otf") format('opentype');font-weight:500 700;font-display:swap}

:root{
  --natter-black:#080808;--natter-graphite:#1A1A1A;--natter-silver:#929292;--natter-chrome:#E2E2E2;--natter-white:#FFFFFF;--natter-blue:#004FFF;
  --natter-ui-green:#38E489;
  --fg-1:var(--natter-black);--fg-2:var(--natter-graphite);--fg-3:var(--natter-silver);
  --bg-muted:#F5F5F5;--border-subtle:#EAEAEA;--border-default:var(--natter-chrome);
  --font-sans:'Geist',system-ui,sans-serif;
  --fw-medium:500;--fw-bold:700;
  --tracking-tight:-0.05em;--tracking-snug:-0.02em;
  --fs-display-l:clamp(48px,6vw,88px);--fs-h1:56px;--fs-h2:40px;--fs-h3:28px;--fs-h4:20px;--fs-body-l:20px;--fs-body:17px;--fs-body-s:14px;
  --lh-display:.95;--lh-heading:1.1;--lh-body:1.5;--lh-tight:1.2;
  --radius-xs:6px;--radius-md:6px;--radius-lg:6px;--radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(8,8,8,.06);--shadow-md:0 6px 20px rgba(8,8,8,.10);
  --ease-standard:cubic-bezier(.4,0,.2,1);--dur-fast:120ms;--dur-base:200ms;
}
*{box-sizing:border-box}
html,body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--fg-1);background:var(--natter-white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
img{display:block;max-width:100%}
ul{margin:10px 0 0;padding-left:18px}
h1,h2,h3,h4{font-family:var(--font-sans);color:var(--fg-1);margin:0;font-weight:var(--fw-medium)}
h1{font-size:var(--fs-h1);line-height:var(--lh-heading);letter-spacing:var(--tracking-snug)}
h2{font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--tracking-snug)}
h3{font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--tracking-snug)}
h4{font-size:var(--fs-h4);line-height:var(--lh-tight)}
p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--fg-1);margin:0}
.display-l{font-size:var(--fs-display-l);font-weight:var(--fw-medium);line-height:var(--lh-display);letter-spacing:var(--tracking-tight)}
.body-l{font-size:var(--fs-body-l);line-height:1.5}
.body-s,small{font-size:var(--fs-body-s);line-height:1.45}
.brand-underline{text-decoration-line:underline;text-decoration-color:var(--natter-blue);text-decoration-thickness:.08em;text-underline-offset:.12em}
.brand-highlight{background:var(--natter-blue);color:var(--natter-white);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
a{color:var(--natter-blue)}
a:hover{color:var(--natter-black)}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:12px;font-weight:var(--fw-medium);letter-spacing:.14em;text-transform:uppercase;color:var(--natter-blue)}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--border-subtle)}
.nav-in{max-width:1120px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:28px}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo img{height:30px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:8px}
.nav-link{background:none;border:none;font-family:inherit;font-size:14px;font-weight:400;color:var(--fg-2);cursor:pointer;padding:6px 0;border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-standard);text-decoration:none}
.nav-link:hover{color:var(--natter-black)}
.nav-link.on{color:var(--natter-black)}
.nav-spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:17px;font-weight:var(--fw-medium);border-radius:var(--radius-pill);padding:0 24px;height:40px;cursor:pointer;border:1px solid rgba(0,0,0,.1);background:var(--natter-white);color:var(--natter-black);transition:all var(--dur-fast) var(--ease-standard);text-decoration:none;line-height:1}
.btn:hover{opacity:.8;color:var(--natter-black)}
.btn.pri{background:var(--natter-blue);border-color:var(--natter-blue);color:#fff}
.btn.pri:hover{opacity:1;background:var(--natter-black);border-color:var(--natter-black);color:#fff}
.btn.dark{background:var(--natter-black);border-color:var(--natter-black);color:#fff}
.btn.dark:hover{color:#fff}
.btn.on-dark{background:#fff;border-color:#fff;color:var(--natter-black)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn.ghost:hover{color:#fff}
.btn.sm{padding:0 18px;height:36px;font-size:15px}
.btn.lg{padding:0 26px;height:44px;font-size:17px}
.card{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--dur-base) var(--ease-standard);box-shadow:var(--shadow-xs);color:inherit;text-decoration:none}
.card.hover:hover{box-shadow:var(--shadow-md)}
.person-meta{font-size:14px;line-height:1.4;color:var(--fg-3);margin-top:4px}
.player{background:var(--natter-black);display:flex;align-items:center;justify-content:center;position:relative;color:#fff}
.play-tri{width:0;height:0;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.tag{font-size:12px;font-weight:var(--fw-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--natter-silver)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:var(--fw-medium);color:var(--natter-blue);background:rgba(0,79,255,.08);border-radius:var(--radius-pill);padding:5px 12px}
.chip{border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:7px 15px;font-size:13px;font-weight:var(--fw-medium);color:var(--fg-2);background:#fff;cursor:pointer;font-family:inherit}
.chip.on{background:var(--natter-black);color:#fff;border-color:var(--natter-black)}
.field{width:100%;border:1px solid var(--border-default);border-radius:var(--radius-md);background:#fff;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--natter-black)}
.field::placeholder{color:var(--natter-silver)}
.field:focus{outline:2px solid var(--natter-blue);outline-offset:2px;border-color:var(--natter-blue)}
.flabel{display:block;font-size:13px;font-weight:var(--fw-medium);margin-bottom:6px}
.stepnum{width:36px;height:36px;border-radius:50%;background:var(--natter-black);color:#fff;font-weight:var(--fw-medium);display:flex;align-items:center;justify-content:center;flex:none;font-size:15px}
.footer{background:var(--natter-black);color:var(--natter-chrome)}
.footer-in{max-width:1120px;margin:0 auto;padding:40px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer a{color:var(--natter-chrome);text-decoration:none;font-size:14px}
.footer a:hover{color:#fff}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hidden{display:none !important}
.ep-card{cursor:pointer;display:flex;flex-direction:column;position:relative}
.ep-card.coming{cursor:default}
.coming-overlay{position:absolute;inset:0;background:rgba(8,8,8,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.check{width:64px;height:64px;border-radius:50%;background:var(--natter-ui-green);color:var(--natter-black);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:var(--fw-medium);margin:0 auto 22px}
@media(max-width:820px){
  .grid3,.grid2{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}
  .grid6{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .form-row{grid-template-columns:1fr}
}
