@font-face{font-family:Lilita;src:url('/cclanding/assets/fonts/lilita-one.ttf') format('truetype');font-display:swap;font-weight:400}
:root{color-scheme:dark;--bg:#140e20;--white:#f7f4f8;--muted:#b8a4ca;--pink:#ff258e;--green:#00e394;--border:#493359}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,sans-serif}::selection{background:var(--pink);color:white}a:focus-visible{outline:3px solid var(--green);outline-offset:6px}html{scrollbar-color:var(--border) var(--bg)}
main{max-width:1920px;margin:auto}.hero{position:relative;min-height:720px;height:min(800px,85vh);isolation:isolate;overflow:hidden}.hero-copy{position:relative;z-index:2;padding:64px 0 70px clamp(32px,5.1vw,96px);width:48%;max-width:740px}.logo{display:block;width:290px;max-width:70%;height:auto;margin-bottom:38px}.eyebrow{font-family:Lilita,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--pink);font-size:20px;margin:0 0 16px}h1{font-family:Lilita,sans-serif;font-weight:400;font-size:clamp(68px,7.4vw,112px);line-height:.96;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 20px}h1 span{color:var(--green)}.subtitle{font-size:clamp(20px,2vw,28px);font-weight:700;line-height:1.35;max-width:490px;margin:0 0 26px}.play-button{display:inline-flex;align-items:center;justify-content:center;min-height:76px;min-width:350px;padding:18px 32px;border-radius:16px;background:var(--pink);color:white;text-decoration:none;font-family:Lilita,sans-serif;font-size:32px;text-transform:uppercase;letter-spacing:.04em;transition:background .18s,transform .18s}.play-button:hover{background:#e9167b;transform:translateY(-2px)}.play-button:active{transform:translateY(1px)}.tagline{color:var(--muted);font-size:20px;font-weight:600;line-height:1.4;margin:18px 0 0}.hero-art{position:absolute;inset:0;z-index:-1}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(20,14,32,.96) 19%,rgba(20,14,32,.75) 32%,transparent 59%),linear-gradient(0deg,var(--bg),transparent 18%)}.tutorial-section{padding:12px 24px 64px}.tutorial-card{display:flex;align-items:center;gap:24px;max-width:510px;min-height:140px;margin:auto;padding:16px;border:2px solid var(--border);border-radius:16px;background:#140e20}.video-preview{position:relative;width:190px;height:108px;flex-shrink:0;border-radius:10px;overflow:hidden}.video-preview img{width:100%;height:100%;object-fit:cover;object-position:75% 60%;filter:brightness(.8)}.video-preview svg{position:absolute;width:44px;height:44px;left:50%;top:50%;transform:translate(-50%,-50%);color:white}.tutorial-title{font-size:25px;line-height:1.2;margin:0 0 8px}.tutorial-caption{font-size:14px;color:var(--muted);margin:0}
@media(min-width:1600px){.hero-copy{padding-top:90px}}
@media(max-width:760px){.hero{height:auto;min-height:0;overflow:hidden}.hero-copy{width:100%;max-width:none;padding:28px 24px 0}.logo{width:210px;max-width:70%;margin-bottom:26px}.eyebrow{font-size:15px;margin-bottom:12px}h1{font-size:clamp(48px,13.6vw,86px);margin-bottom:18px}.subtitle{font-size:19px;max-width:330px;margin-bottom:22px}.play-button{width:100%;min-width:0;min-height:56px;font-size:26px;border-radius:13px}.tagline{font-size:16px;margin-top:14px}.hero-art{position:relative;display:block;inset:auto;height:340px;margin-top:-12px;z-index:-1}.hero-art img{object-position:74% 55%;object-fit:cover;width:150%;max-width:none;margin-left:-50%}.hero-art:after{background:linear-gradient(180deg,var(--bg),transparent 22%,transparent 76%,var(--bg))}.tutorial-section{padding:4px 24px 32px}.tutorial-card{gap:16px;padding:12px;min-height:90px}.video-preview{width:115px;height:72px}.video-preview svg{width:32px;height:32px}.tutorial-title{font-size:19px}.tutorial-caption{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

button.tutorial-card{width:100%;color:var(--white);font-family:inherit;text-align:left;cursor:pointer;transition:border-color .18s,background .18s}.tutorial-card:hover{border-color:var(--pink);background:#1e142c}.tutorial-title,.tutorial-caption{display:block}button:focus-visible{outline:3px solid var(--green);outline-offset:5px}.video-preview img{object-position:center}
dialog{width:min(900px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--bg);color:var(--white)}dialog::backdrop{background:rgba(0,0,0,.85)}.video-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.video-heading h2{font-size:20px;margin:0}.close-video{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:8px;color:var(--white);background:#30223f;cursor:pointer}.close-video:hover{background:#493359}.close-video svg{width:24px;height:24px}dialog video{display:block;width:100%;max-height:calc(100dvh - 130px);background:#000;border-radius:8px}body:has(dialog[open]){overflow:hidden}

/* Anchor the tutorial beneath the combi in the desktop artwork. */
@media(min-width:761px){
  main{position:relative;--hero-height:max(720px,min(800px,85vh));--art-height:max(var(--hero-height),calc(min(100vw,1920px) * 2 / 3))}
  .tutorial-section{position:absolute;z-index:3;width:min(558px,48%);left:calc(50% + var(--art-height) * .168);top:calc(var(--hero-height) * .5 + var(--art-height) * .15 + 50px);transform:translateX(-50%);margin:0;padding:0 24px 48px}
  main{min-height:calc(var(--hero-height) + 150px)}
  .tutorial-card{background:rgba(20,14,32,.94)}
}