/* Caliber Media — shared styles. Army palette: Dark Gray #0D0D0D, Gray #191919, Yellow #FFCC01, Green #8B9E6B. */
:root{
  --bg:#0D0D0D; --surface:#141414; --panel:#191919; --border:#2A2A2A;
  --gold:#FFCC01; --army:#8B9E6B; --white:#F0EDE6; --muted:#A3A09A; --dim:#6E6C67;
  --font-d:'Bebas Neue',Impact,sans-serif; --font-ui:'Barlow Condensed','Arial Narrow',sans-serif; --font-b:'Barlow',system-ui,sans-serif;
  --max:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:var(--font-b);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#000;padding:10px 16px;font-family:var(--font-ui);font-weight:700;z-index:100}
.skip:focus{left:8px}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(13,13,13,.94);backdrop-filter:blur(8px);border-bottom:2px solid var(--gold)}
.bar{max-width:var(--max);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.brand img{height:38px;width:auto}
.brand b{font-family:var(--font-d);font-size:1.5rem;letter-spacing:.1em;font-weight:400;line-height:1}
.brand b span{color:var(--gold)}
nav{margin-left:auto}
nav ul{display:flex;gap:6px;list-style:none;flex-wrap:wrap}
nav a{display:block;padding:8px 14px;font-family:var(--font-ui);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.95rem;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
nav a:hover{color:var(--white)}
nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.beta-pill{font-family:var(--font-ui);font-weight:700;letter-spacing:.15em;font-size:.72rem;background:var(--white);color:#0D0D0D;padding:3px 10px;border-radius:2px}

/* ---- layout ---- */
main{display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:64px 0}
section+section{border-top:1px solid var(--border)}
h1,h2,h3{font-family:var(--font-d);font-weight:400;letter-spacing:.06em;line-height:1.05}
h1{font-size:clamp(2.8rem,8vw,5.2rem)}
h2{font-size:clamp(2rem,5vw,3rem);color:var(--white);margin-bottom:8px}
h2 .g{color:var(--gold)} h1 .g{color:var(--gold)} h1 .a,h2 .a{color:var(--army)}
h3{font-size:1.5rem;color:var(--gold);letter-spacing:.08em;margin-bottom:6px}
.eyebrow{font-family:var(--font-ui);font-weight:700;letter-spacing:.25em;text-transform:uppercase;font-size:.85rem;color:var(--army);margin-bottom:10px}
.lead{font-size:1.2rem;color:var(--muted);max-width:62ch}
p+p{margin-top:14px}
.sub{color:var(--muted);max-width:66ch;margin-bottom:28px}

/* ---- hero ---- */
.hero{padding:88px 0 72px;border-top:0;background:
  radial-gradient(ellipse at 75% 20%,rgba(255,204,1,.07),transparent 55%),
  linear-gradient(180deg,#101010,#0D0D0D)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-art img{filter:drop-shadow(0 20px 40px rgba(0,0,0,.7))}
.page-hero{padding:64px 0 48px;border-top:0;background:linear-gradient(180deg,#111,#0D0D0D)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:1rem;padding:14px 26px;border:2px solid var(--gold);color:var(--gold);text-decoration:none;background:transparent;cursor:pointer;min-height:48px}
.btn:hover{background:rgba(255,204,1,.1);color:var(--gold)}
.btn.primary{background:var(--gold);color:#0D0D0D}
.btn.primary:hover{background:#fff;border-color:#fff;color:#0D0D0D}
.btn.ghost{border-color:var(--border);color:var(--white)}
.btn.ghost:hover{border-color:var(--white);background:transparent;color:#fff}

/* ---- cards ---- */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:var(--panel);border:1px solid var(--border);padding:26px;height:100%}
.card::before{content:"";position:absolute;inset:-1px;pointer-events:none;
  background:
    linear-gradient(var(--army),var(--army)) 0 0/16px 2px no-repeat,linear-gradient(var(--army),var(--army)) 0 0/2px 16px no-repeat,
    linear-gradient(var(--army),var(--army)) 100% 100%/16px 2px no-repeat,linear-gradient(var(--army),var(--army)) 100% 100%/2px 16px no-repeat}
.card p{color:var(--muted)}
.card .logo{height:96px;width:auto;margin-bottom:16px;object-fit:contain;object-position:left}
.card .more{margin-top:18px;display:inline-block;font-family:var(--font-ui);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.92rem}
.tag{display:inline-block;font-family:var(--font-ui);font-weight:700;letter-spacing:.1em;font-size:.78rem;text-transform:uppercase;border:1px solid var(--army);color:var(--army);padding:1px 8px;margin:0 6px 6px 0}
.tag.hot{border-color:var(--gold);color:var(--gold)}
.feature h3{font-size:1.3rem}

/* ---- lists, steps ---- */
.ticks{list-style:none}
.ticks li{position:relative;padding-left:26px;margin:9px 0;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--gold)}
.ticks b{color:var(--white);font-weight:600}
.steps{counter-reset:s;list-style:none;display:grid;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;background:var(--panel);border:1px solid var(--border);padding:16px 20px}
.steps li::before{content:counter(s);font-family:var(--font-d);font-size:2.1rem;color:var(--gold);line-height:1}
.steps b{color:var(--white)}
.steps span{color:var(--muted)}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch;margin:8px 0 0}
.flow div.n{background:var(--panel);border:1px solid var(--border);padding:18px;text-align:center}
.flow .n b{display:block;font-family:var(--font-d);font-size:1.6rem;color:var(--gold);letter-spacing:.08em;font-weight:400}
.flow .n span{color:var(--muted);font-size:.95rem}
.flow .arrow{align-self:center;color:var(--army);font-family:var(--font-d);font-size:2rem}

/* ---- notice / callout ---- */
.note{border-left:3px solid var(--gold);background:var(--surface);padding:16px 20px;color:var(--muted);max-width:74ch}
.note b{color:var(--white)}
.warn{border-left-color:var(--army)}

/* ---- download panel ---- */
.dl{background:var(--panel);border:1px solid var(--gold);padding:30px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.dl .meta{font-family:var(--font-ui);letter-spacing:.06em;color:var(--muted);font-size:1rem}
.dl .meta b{color:var(--white)}
.dl h3{font-size:2.1rem;color:var(--white)}

/* ---- patch notes ---- */
.rel{background:var(--panel);border:1px solid var(--border);padding:24px;margin-bottom:16px}
.rel h3{font-size:1.7rem;color:var(--gold)}
.rel .date{font-family:var(--font-ui);color:var(--dim);letter-spacing:.1em;font-size:.9rem;margin-bottom:10px}
.rel h4{font-family:var(--font-ui);letter-spacing:.14em;text-transform:uppercase;font-size:.9rem;color:var(--army);margin:14px 0 4px}
.rel h4.new{color:var(--gold)} .rel h4.fix{color:#E07A6B}
.rel ul{list-style:none} .rel li{position:relative;padding-left:20px;margin:6px 0;color:var(--muted);font-size:.98rem}
.rel li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--army)}
.more-btn{margin-top:6px}

/* ---- character cards ---- */
.chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.char{background:var(--panel);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}
.char img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;background:#000}
.char.wide img{aspect-ratio:16/9;object-position:center}
.char .body{padding:16px 18px 20px}
.char h3{font-size:1.5rem;margin-bottom:2px}
.char .who{font-family:var(--font-ui);color:var(--army);letter-spacing:.08em;font-size:.95rem;text-transform:uppercase;margin-bottom:8px}
.char p{color:var(--muted);font-size:.96rem}

/* ---- social ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tile{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--border);padding:20px;color:var(--white)}
.tile:hover{border-color:var(--gold)}
.tile b{display:block;font-family:var(--font-ui);letter-spacing:.14em;text-transform:uppercase;font-size:1.05rem}
.tile span{color:var(--army);font-family:var(--font-ui);letter-spacing:.04em}
.video{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--border);max-width:860px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- footer ---- */
.site-footer{border-top:2px solid var(--gold);background:var(--surface);padding:36px 0;color:var(--dim);font-size:.92rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.site-footer a{color:var(--muted)}
.site-footer ul{list-style:none;display:flex;gap:18px;flex-wrap:wrap}
.site-footer .fine{max-width:64ch}

/* ---- responsive ---- */
@media (max-width:860px){
  .hero .wrap,.dl{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr}.flow .arrow{transform:rotate(90deg);justify-self:center}
  .hero-art{order:-1;max-width:420px}
}
@media (max-width:620px){
  body{font-size:16px}
  .bar{flex-wrap:wrap;gap:8px}
  nav{margin-left:0;width:100%}
  nav ul{gap:0}
  nav a{padding:8px 10px;font-size:.88rem}
  .g2,.g3,.g4{grid-template-columns:1fr}
  section{padding:48px 0}
  .hero{padding:52px 0 48px}
  .beta-pill{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.eyebrow.y{color:var(--gold)}
.brand img{height:44px}
.brand-right{font-family:var(--font-d);font-size:1.5rem;letter-spacing:.1em;line-height:1;text-decoration:none;color:var(--gold)}
.brand-right span{color:var(--army)}
.brand b{color:var(--gold)}.brand b span.v{color:var(--army)}

.card::before{background:
    linear-gradient(var(--army),var(--army)) 0 0/16px 2px no-repeat,linear-gradient(var(--army),var(--army)) 0 0/2px 16px no-repeat,
    linear-gradient(var(--army),var(--army)) 100% 0/16px 2px no-repeat,linear-gradient(var(--army),var(--army)) 100% 0/2px 16px no-repeat,
    linear-gradient(var(--army),var(--army)) 0 100%/16px 2px no-repeat,linear-gradient(var(--army),var(--army)) 0 100%/2px 16px no-repeat,
    linear-gradient(var(--army),var(--army)) 100% 100%/16px 2px no-repeat,linear-gradient(var(--army),var(--army)) 100% 100%/2px 16px no-repeat}
.card .logo{display:block;height:150px;margin:0 auto 16px;object-position:center}
.card h3.cv{color:var(--gold)}.card h3.cv span{color:var(--army)}
.card .logo{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;mix-blend-mode:lighten}
.card .logo{mix-blend-mode:normal;aspect-ratio:auto;height:200px;width:auto;max-width:100%}
.card .logo{width:100%;height:230px;max-width:none;object-fit:contain;object-position:center}
.hero-art img{width:100%;height:auto;object-fit:contain}
.vhero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
@media (max-width:820px){.vhero{grid-template-columns:1fr}.vhero .hero-art{order:-1;max-width:420px}}
.card .logo{aspect-ratio:851/649;height:auto;width:100%}
.card .logo{width:75%}
.card .logo{width:65%}

.logos{position:relative;width:100%;height:300px;perspective:1000px}
.carousel{position:absolute;inset:0;transform-style:preserve-3d;animation:go 12s linear infinite}
.face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face img{height:270px;width:auto;max-width:100%;object-fit:contain}
.face.media{transform:rotateY(0deg) translateZ(110px)}
.face.engine{transform:rotateY(120deg) translateZ(110px)}
.face.voice{transform:rotateY(240deg) translateZ(110px)}
@keyframes go{from{transform:translateZ(-110px) rotateY(0deg)}to{transform:translateZ(-110px) rotateY(-360deg)}}
@media (prefers-reduced-motion:reduce){.carousel{animation:none;transform:translateZ(-110px)}}
.logos{height:260px}.face img{height:230px}
.logos{height:230px}.face img{height:200px}
.face.media{transform:rotateY(0deg) translateZ(96px)}.face.engine{transform:rotateY(120deg) translateZ(96px)}.face.voice{transform:rotateY(240deg) translateZ(96px)}
@keyframes go{from{transform:translateZ(-96px) rotateY(0deg)}to{transform:translateZ(-96px) rotateY(-360deg)}}
.hero-art.logos{margin-inline:auto}
@media (max-width:620px){.logos{height:190px;overflow:hidden}.face img{height:165px}.card .logo{width:55%}}
.hero .lead{color:var(--white)}
.page-hero .lead{color:var(--white)}
.tag.w{border-color:var(--white);color:var(--white)}

/* Metallic gold for small labels + tags */
:root{--mgold:linear-gradient(180deg,#F0D56A 0%,#D2A93A 45%,#9C741C 100%)}
.eyebrow,.eyebrow.y,.tag,.tag.hot,.tag.w,.card .more{background:var(--mgold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tag,.tag.hot,.tag.w{border-color:#B8902A}
.card .more{text-decoration-color:#C79B2E}

.feature p{color:var(--white)}
.feature h3 .a{color:var(--army)}
.dl h3 .g{color:var(--gold)}.dl h3 .a{color:var(--army)}
.dl .meta{color:var(--white)}.dl .meta b{color:var(--army)}
.card .more{background:none;-webkit-text-fill-color:var(--gold);color:var(--gold);text-decoration-color:var(--gold)}
.btn.white{border-color:var(--white);color:var(--white)}.btn.white:hover{background:rgba(240,237,230,.1);color:var(--white)}
.mg{background:var(--mgold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
:root{--mgreen:linear-gradient(180deg,#B7C692 0%,#8B9E6B 50%,#55663A 100%)}
.brand b{background:var(--mgold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.brand b span.v{background:var(--mgreen);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.site-footer .fine{max-width:none;white-space:nowrap}
@media (max-width:860px){.site-footer .fine{white-space:normal}}
.g2 .card p{color:var(--white)}
.btn.white,.btn.ghost{border-color:var(--army);color:var(--army)}
.btn.white:hover,.btn.ghost:hover{border-color:var(--army);background:rgba(139,158,107,.12);color:var(--army)}
.card p,.sub,.feature p,.char p{color:var(--white)}
.flow .n b{color:var(--army)}.flow .n span{color:var(--white)}
.note.warn{color:var(--white)}.note.warn b{color:var(--army)}
.steps li>div>b,.steps b.gr,.note:not(.warn)>b:first-child{color:var(--army)}
.flow .n b i.num{font-style:normal;color:var(--gold)}
.steps span,.note{color:var(--white)}
.flow .n b i.dot{font-style:normal;color:var(--white)}
.site-footer .wrap{align-items:baseline}
.site-footer .wrap{flex-wrap:nowrap;justify-content:space-between}
.site-footer .wrap>div{flex:1 1 auto;min-width:0}
.site-footer .wrap>ul{flex:0 0 auto}
.site-footer .fine{white-space:normal}
@media (max-width:860px){.site-footer .wrap{flex-wrap:wrap}}
.sub .g{color:var(--gold)}.sub .a{color:var(--army)}

#patchnotes{max-height:520px;overflow-y:auto;overscroll-behavior:contain;padding-right:10px;scrollbar-color:var(--army) var(--surface)}
.rel li,.rel .date{color:var(--white)}
.beta-pill{background:transparent;color:var(--white);border:1px solid var(--white)}