/* =====================================================================
   XA-Beyond, shared stylesheet
   Monochrome, hairline grid, large type. One file for every page.
   ===================================================================== */

/* ---------------- fonts (self hosted, SIL Open Font License) ---------------- */
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:300 800; font-display:swap;
  src:url("../fonts/InterTight-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:"Inter Tight"; font-style:normal; font-weight:300 800; font-display:swap;
  src:url("../fonts/InterTight-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:"JetBrains Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("../fonts/JetBrainsMono-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:"JetBrains Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("../fonts/JetBrainsMono-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;
}

/* display face for the home headline: round, heavy, wide */
@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:500 900; font-display:swap;
  src:url("../fonts/Unbounded-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:"Unbounded"; font-style:normal; font-weight:500 900; font-display:swap;
  src:url("../fonts/Unbounded-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;
}

/* ---------------- tokens ---------------- */
:root{
  --black:#000;
  --white:#FFF;
  --gray-1:#B6B6BB;
  --gray-2:#86868C;
  --gray-3:#55555A;
  --line:rgba(255,255,255,0.12);
  --line-soft:rgba(255,255,255,0.07);
  --line-strong:rgba(255,255,255,0.24);

  --glass-bg:rgba(255,255,255,0.05);
  --glass-bg-strong:rgba(255,255,255,0.10);
  --glass-border:rgba(255,255,255,0.14);

  --sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --maxw:1320px;
  --gutter:clamp(20px, 4vw, 48px);
  --header-h:72px;
  --radius:18px;
  --radius-lg:26px;
  --ease:cubic-bezier(.22,.9,.32,1);
}
@media (max-width:640px){ :root{ --header-h:62px; } }

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden; scroll-padding-top:calc(var(--header-h) + 16px);}
@supports (overflow:clip){ html, body{overflow-x:clip;} }
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  margin:0; min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--black); color:var(--white);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.menu-open{overflow:hidden;}
main{flex:1 0 auto; position:relative; z-index:1;}
a{color:inherit;}
img,svg,video,canvas{display:block; max-width:100%;}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-0.03em; line-height:1.05; overflow-wrap:break-word;}
p{margin:0;}
::selection{background:var(--white); color:var(--black);}
:focus-visible{outline:2px solid var(--white); outline-offset:3px;}
[hidden]{display:none !important;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); position:relative;}

.skip-link{
  position:absolute; left:12px; top:-80px; z-index:300;
  padding:12px 18px; border-radius:999px;
  background:var(--white); color:var(--black); font-weight:600; text-decoration:none;
}
.skip-link:focus{top:12px;}

/* underscore in product names keeps clear of the letters at large sizes */
.us{letter-spacing:0; margin:0 .04em;}

/* technical label */
.label{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; line-height:1.4;
  color:var(--gray-2);
}
.label b{color:var(--white); font-weight:500;}

/* ---------------- glass ---------------- */
.glass{
  position:relative;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);
}

/* corner marks, a quiet engineering-drawing detail */
.ticks{position:relative;}
.ticks::before,.ticks::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:var(--line-strong); border-style:solid;
}
.ticks::before{top:-1px; left:-1px; border-width:1px 0 0 1px;}
.ticks::after{bottom:-1px; right:-1px; border-width:0 1px 1px 0;}

/* ---------------- motion entry states (anime.js animates these in) ---------------- */
.js-motion [data-reveal]{opacity:0;}
.js-motion [data-stagger] > *{opacity:0;}
.js-motion .stat-meter i{transform:scaleX(0);}
.js-motion .phero-shot .window,
.js-motion .hero-mark{opacity:0;}
.js-motion .mark-body{transform:scale(.86) rotate(-40deg);}
.js-motion .mark-needle{transform:scaleX(0);}
.js-motion .mark-orbit{opacity:0;}

.scroll-line{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:95;
  background:var(--white); transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none; opacity:.9;
}

/* ---------------- buttons ---------------- */
.btn{
  font:inherit; font-size:15px; font-weight:600; letter-spacing:-0.005em; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 26px;
  border-radius:999px; border:none;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{width:16px; height:16px; flex:none;}
.btn-solid{background:var(--white); color:var(--black);}
.btn-solid:hover{background:#DADADD;}
.btn-glass{color:var(--white);}
.btn-glass:hover{background:var(--glass-bg-strong); border-color:rgba(255,255,255,0.3);}
.btn-sm{min-height:40px; padding:0 18px; font-size:13.5px;}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
@media (max-width:520px){ .btn-row.stack .btn{flex:1 1 100%;} }

.arrow-link{display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:600; text-decoration:none;}
.arrow-link svg{width:16px; height:16px; transition:transform .35s var(--ease);}
.arrow-link:hover svg{transform:translateX(4px);}

/* ---------------- header ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:var(--header-h);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(0,0,0,0.72);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line-soft);
}
.site-header.tucked{transform:translateY(-100%);}
body.menu-open .site-header{transform:none; background:#000; -webkit-backdrop-filter:none; backdrop-filter:none;}
.bar{
  height:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none;}
.brand img{width:30px; height:30px; object-fit:contain;}
.brand-name{font-size:16px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap;}

.nav ul{list-style:none; margin:0; padding:0; display:flex; gap:clamp(14px, 1.9vw, 30px);}
.nav a{
  position:relative; display:block; padding:8px 0;
  font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gray-1); text-decoration:none; white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--white); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .35s var(--ease);
}
.nav a:hover{color:var(--white);}
.nav a:hover::after, .nav a[aria-current="page"]::after{transform:scaleX(1);}
.nav a[aria-current="page"]{color:var(--white);}
.bar-end{display:flex; align-items:center; gap:10px; flex:none;}

.menu-btn{
  display:none; align-items:center; gap:12px;
  height:44px; padding:0 4px 0 14px; margin-right:-4px;
  border:none; background:none; color:var(--white); cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
}
.menu-btn .bars{position:relative; width:22px; height:12px;}
.menu-btn .bars i{position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform .35s var(--ease), top .35s var(--ease);}
.menu-btn .bars i:nth-child(1){top:2px;}
.menu-btn .bars i:nth-child(2){top:9px;}
.menu-btn[aria-expanded="true"] .bars i:nth-child(1){top:5.5px; transform:rotate(45deg);}
.menu-btn[aria-expanded="true"] .bars i:nth-child(2){top:5.5px; transform:rotate(-45deg);}
.menu-btn .when-open{display:none;}
.menu-btn[aria-expanded="true"] .when-open{display:inline;}
.menu-btn[aria-expanded="true"] .when-closed{display:none;}

/* language picker, written into every page by _i18n/i18n.py */
.lang-pick{position:relative;}
.lang-pick summary{
  display:flex; align-items:center; gap:7px; height:40px; padding:0 12px;
  border:1px solid var(--line); border-radius:999px; cursor:pointer; list-style:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; color:var(--gray-1);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.lang-pick summary::-webkit-details-marker{display:none;}
.lang-pick summary svg{width:15px; height:15px;}
.lang-pick summary:hover, .lang-pick[open] summary{color:var(--white); border-color:var(--line-strong);}
.lang-pick ul{
  position:absolute; right:0; top:calc(100% + 8px); z-index:130; min-width:170px;
  list-style:none; margin:0; padding:6px; border-radius:14px;
  border:1px solid var(--glass-border); background:rgba(12,12,14,0.96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.lang-pick a{display:block; padding:9px 12px; border-radius:9px; font-size:14.5px; color:var(--gray-1); text-decoration:none;}
.lang-pick a:hover{background:var(--glass-bg-strong); color:var(--white);}
.lang-pick a[aria-current]{color:var(--white); font-weight:600;}
@media (pointer:coarse){ .lang-pick summary{height:44px;} .lang-pick a{padding:12px 14px;} }

@media (max-width:1180px){
  .nav, .bar-end .btn{display:none;}
  .menu-btn{display:inline-flex;}
}

/* full screen menu */
.menu{
  position:fixed; inset:0; z-index:79;
  display:flex; flex-direction:column;
  padding:calc(var(--header-h) + 20px) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  background:#000;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.menu.open{opacity:1; visibility:visible;}
.menu ol{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.menu li{border-bottom:1px solid var(--line);}
.menu li a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:10px;
  padding:13px 0; text-decoration:none;
}
.menu .t{font-size:clamp(26px, 6vw, 44px); font-weight:600; letter-spacing:-0.035em; line-height:1.1; color:var(--gray-1); transition:color .2s;}
.menu .s{font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray-2);}
.menu a[aria-current="page"] .t, .menu a:hover .t{color:var(--white);}
.menu li.menu-xammy{border-bottom:0; padding:14px 0;}
.menu li.menu-xammy a{
  display:flex; align-items:center; gap:18px;
  padding:14px 18px; border:1px solid var(--line); border-radius:16px;
  color:var(--gray-1); font-size:14.5px; line-height:1.5;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.menu li.menu-xammy a:hover{background:var(--glass-bg-strong); border-color:var(--line-strong);}
.menu-xammy img{flex:none; width:64px; height:auto; image-rendering:pixelated;}
.menu-xammy .mx-name{display:block; margin-bottom:2px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--white);}
.menu li.menu-xammy + li{border-top:1px solid var(--line);}
.xammy-card{
  margin-top:40px; display:inline-flex; align-items:center; gap:20px; max-width:480px;
  padding:18px 22px; border:1px solid var(--line); border-radius:18px;
  color:var(--gray-1); font-size:15.5px; line-height:1.5; text-decoration:none;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.xammy-card:hover{background:var(--glass-bg-strong); border-color:var(--line-strong);}
.xammy-card img{flex:none; width:76px; height:auto; image-rendering:pixelated;}
.xammy-card .mx-name{display:block; margin-bottom:3px; font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--white);}
.menu-foot{margin-top:auto; padding-top:28px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; align-items:center;}
.socials{display:flex; gap:10px;}
.socials a{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.socials a:hover{background:var(--glass-bg-strong); border-color:var(--line-strong);}
.socials svg{width:17px; height:17px;}
@media (max-width:520px){ .menu .s{display:none;} }

/* ---------------- home hero ---------------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--header-h) + 40px);
}
/* the mark: a white ring cut by a needle, animated gently by site.js */
.hero-mark{
  position:absolute; z-index:-1; pointer-events:none;
  right:max(20px, calc((100vw - var(--maxw)) / 2 - 60px));
  top:50%; transform:translateY(-52%);
  width:min(34vw, 520px); aspect-ratio:1;
}
.mark{width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 30px rgba(255,255,255,0.2));}
.mark g, .mark circle, .mark path, .mark ellipse{transform-box:view-box; transform-origin:0 0;}
@media (max-width:1100px){
  .hero-mark{right:50%; top:calc(var(--header-h) + 18px); transform:translateX(50%); width:min(46vw, 250px);}
}
/* on wide screens the headline sits in the middle of the screen, level with the mark */
@media (min-width:1101px){
  .hero{justify-content:center; padding-top:var(--header-h); padding-bottom:0;}
  .hero-inner{padding-bottom:0;}
  .hero-mark{top:calc(50% + var(--header-h) / 2); transform:translateY(-50%);}
}
.hero-inner{width:100%; padding-bottom:clamp(40px, 7vh, 80px);}
.hero .label{margin-bottom:26px;}
.hero h1{font-family:"Unbounded", var(--sans); font-size:clamp(30px, 4.6vw, 76px); line-height:1.04; letter-spacing:-0.035em; font-weight:700; max-width:11em;}
.hero-lead{margin-top:28px; max-width:46ch; font-size:clamp(17px, 1.5vw, 20px); color:var(--gray-1); line-height:1.55;}
.hero .btn-row{margin-top:36px;}
/* ---------------- page hero ---------------- */
.phero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:88vh; min-height:88svh;
  display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 48px) 0 clamp(40px, 7vh, 72px);
  border-bottom:1px solid var(--line-soft);
}
.phero-visual{position:absolute; inset:0; z-index:-1; pointer-events:none;}
.phero-visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0) 70%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 38%);
}
.phero-visual > canvas, .phero-visual > svg{position:absolute; inset:0; width:100%; height:100%;}
.phero-inner{width:100%;}
.crumbs{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-bottom:28px;}
.crumbs a{text-decoration:none; color:var(--gray-1);}
.crumbs a:hover{color:var(--white);}
.crumbs .sep{color:var(--gray-3);}
.phero h1{font-size:clamp(50px, 10vw, 164px); line-height:.9; letter-spacing:-0.055em; font-weight:600;}
.phero .subtitle{margin-top:20px; font-size:clamp(20px, 2.4vw, 30px); font-weight:500; letter-spacing:-0.02em;}
.phero .lead{margin-top:16px; max-width:54ch; font-size:clamp(16px, 1.35vw, 19px); color:var(--gray-1); line-height:1.6;}
.phero-meta{display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; margin-top:34px;}
@media (max-width:760px){
  .phero{min-height:80svh;}
  .phero-visual::after{background:linear-gradient(0deg, #000 10%, rgba(0,0,0,0.78) 52%, rgba(0,0,0,0.3) 100%);}
}

/* shorter hero for pages without a large visual */
.phero.short{min-height:66vh; min-height:66svh;}

/* screenshot as hero backdrop */
.phero-shot{
  position:absolute; right:calc(var(--gutter) * -1.5); top:50%;
  width:min(64vw, 1120px);
  transform:translateY(-50%) perspective(1800px) rotateY(-18deg) rotateX(4deg);
  transform-origin:100% 50%;
}
/* on phones the text needs the whole width; the screenshots are in the gallery below */
@media (max-width:760px){ .phero-shot{display:none;} }

/* ---------------- sections ---------------- */
.section{position:relative; padding:clamp(88px, 11vw, 150px) 0;}
.section.tight{padding:clamp(48px, 6vw, 80px) 0;}
.section.line{border-top:1px solid var(--line-soft);}
.head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px 56px; align-items:end; margin-bottom:clamp(36px, 5vw, 64px);}
.head .label{grid-column:1 / -1;}
.xammy-art{display:block; width:min(70%, 320px); height:auto; margin:0 auto clamp(36px, 6vw, 56px); image-rendering:pixelated;}
@media (min-width:901px){ .xammy-art{float:left; width:min(calc(50% - 56px), 460px); margin:24px 0 0;} #xammy .container::after{content:""; display:table; clear:both;} }
.head h2{font-size:clamp(34px, 5vw, 72px); line-height:.98; letter-spacing:-0.045em;}
.head p{color:var(--gray-1); font-size:17px; line-height:1.6; max-width:48ch;}
@media (max-width:900px){ .head{grid-template-columns:minmax(0,1fr);} }

.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px, 6vw, 96px); align-items:start;}
@media (max-width:900px){ .two{grid-template-columns:minmax(0,1fr);} }
.two h2{font-size:clamp(34px, 4.6vw, 64px); line-height:.98; letter-spacing:-0.045em; margin-top:20px;}

.prose p{color:var(--gray-1); font-size:clamp(16px, 1.25vw, 18px); line-height:1.7; margin-bottom:20px; max-width:62ch;}
.prose p:last-child{margin-bottom:0;}
.prose strong{color:var(--white); font-weight:600;}
.prose .big{font-size:clamp(21px, 2.1vw, 28px); line-height:1.4; letter-spacing:-0.02em; color:var(--white);}

/* ---------------- status marker ---------------- */
.stat{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gray-1); white-space:nowrap;
}
.stat-meter{display:flex; gap:3px; flex:none;}
.stat-meter i{display:block; width:14px; height:3px; border-radius:2px; background:rgba(255,255,255,0.16); transform-origin:0 50%;}
.stat[data-stage="1"] .stat-meter i:nth-child(1),
.stat[data-stage="2"] .stat-meter i:nth-child(-n+2),
.stat[data-stage="3"] .stat-meter i{background:var(--white);}
.stat[data-stage="3"] .stat-meter i{box-shadow:0 0 10px rgba(255,255,255,0.5);}
.stat[data-stage="3"] .stat-text{color:var(--white);}

/* ---------------- product copy ---------------- */
.feature-copy .label{margin-bottom:22px;}
.feature-copy h2{font-size:clamp(42px, 5.6vw, 84px); letter-spacing:-0.05em; line-height:.95;}
.feature-copy .tagline{margin-top:16px; font-size:clamp(19px, 1.8vw, 24px); font-weight:500; letter-spacing:-0.02em;}
.feature-copy p.body{margin-top:16px; color:var(--gray-1); font-size:17px; line-height:1.65; max-width:46ch;}
.feature-copy .btn-row{margin-top:32px;}
.feature-copy .stat{margin-top:26px;}

/* app window frame around screenshots */
.window{
  border-radius:14px; overflow:hidden;
  border:1px solid var(--line);
  background:#0A0A0C;
  box-shadow:0 60px 120px -30px rgba(0,0,0,0.9), 0 0 90px rgba(255,255,255,0.05);
}
.window-bar{display:flex; align-items:center; gap:7px; height:30px; padding:0 14px; border-bottom:1px solid var(--line-soft); background:#101013;}
.window-bar i{width:9px; height:9px; border-radius:50%; background:#2B2B30;}
.window-bar span{margin-left:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; color:var(--gray-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.window img{width:100%; height:auto;}

/* ---------------- film (trailer) ---------------- */
.film{
  position:relative; display:block; width:100%;
  aspect-ratio:21 / 9; min-height:280px;
  padding:0; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:#000; cursor:pointer; color:var(--white); text-align:left; font:inherit;
}
.film img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.65; transform:scale(1.04); transition:opacity .6s var(--ease), transform 1.2s var(--ease);}
.film:hover img{opacity:.85; transform:scale(1);}
.film::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0) 60%);}
.film-play{
  position:absolute; left:50%; top:50%; z-index:1;
  width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.5);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:background .35s var(--ease), color .35s var(--ease), transform .5s var(--ease);
}
.film-play svg{width:28px; height:28px; margin-left:4px;}
.film:hover .film-play{background:var(--white); color:var(--black); transform:scale(1.06);}
.film-meta{position:absolute; left:clamp(20px, 3vw, 40px); right:clamp(20px, 3vw, 40px); bottom:clamp(18px, 3vw, 36px); z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;}
.film-meta strong{display:block; margin-top:8px; font-size:clamp(22px, 2.6vw, 36px); font-weight:600; letter-spacing:-0.03em; line-height:1.1;}
@media (max-width:640px){ .film{aspect-ratio:4 / 3; border-radius:var(--radius);} .film-play{width:72px; height:72px; margin:-36px 0 0 -36px;} .film-meta > .label{display:none;} }

/* plain text points: a bold lead-in, then the sentence */
.points{max-width:720px;}
.points p{color:var(--gray-1); font-size:clamp(16.5px, 1.3vw, 18.5px); line-height:1.7;}
.points p + p{margin-top:22px;}
.points strong{color:var(--white); font-weight:600;}
.points .point-stat{display:block; margin-top:10px;}
.points-cta{margin-top:40px;}
@media (min-width:901px){ .head + .points, .head + .points + .points-cta, .head + .xammy-art + .points{margin-left:calc(50% + 28px);} }

/* projects on the home page */
.projects{border-top:1px solid var(--line);}
.project{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 56px; padding:40px 0; border-bottom:1px solid var(--line-soft);}
.project-head h3{font-size:clamp(30px, 3.4vw, 48px); letter-spacing:-0.04em;}
.project-head .stat{margin-top:16px;}
.project-body p{color:var(--gray-1); font-size:clamp(16.5px, 1.3vw, 18.5px); line-height:1.7; max-width:56ch;}
.project-body .btn-row{margin-top:24px; gap:14px 24px;}
@media (max-width:900px){ .project{grid-template-columns:minmax(0,1fr); padding:32px 0;} }

/* list of links: divisions on the home page, channels on the contact page */
.divlist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.divlist a{
  /* the status column fits the longest status in every language (German/French, about 222px) */
  display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.3fr) 232px 22px; gap:10px 28px; align-items:center;
  padding:24px 0; border-bottom:1px solid var(--line-soft); text-decoration:none;
}
.divlist .name{font-size:clamp(20px, 1.9vw, 26px); font-weight:600; letter-spacing:-0.025em;}
.divlist .desc{color:var(--gray-1); font-size:15.5px; line-height:1.5;}
.divlist .go{width:20px; height:20px; color:var(--gray-2); transition:transform .35s var(--ease), color .35s var(--ease);}
.divlist .go svg{width:20px; height:20px;}
.divlist a:hover .go{color:var(--white); transform:translateX(4px);}
.divlist a:hover .name{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;}
.divlist.channels a{grid-template-columns:minmax(0,0.9fr) minmax(0,1.5fr) 22px;}
.divlist .desc{overflow-wrap:anywhere;}
@media (max-width:820px){
  .divlist a, .divlist.channels a{grid-template-columns:minmax(0,1fr) 22px; gap:6px 16px; padding:20px 0;}
  .divlist .name{grid-column:1;}
  .divlist .go{grid-column:2; grid-row:1;}
  .divlist .desc, .divlist .stat{grid-column:1 / -1;}
  .divlist .stat{margin-top:6px;}
}

/* tags */
.tags{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
.tags li{padding:12px 18px; border-radius:999px; border:1px solid var(--line); font-size:15px; transition:background .25s var(--ease), color .25s var(--ease);}
.tags li:hover{background:var(--white); color:var(--black);}

/* spec sheet */
.spec{border-radius:var(--radius-lg); padding:30px 32px;}
.spec > .label{padding-bottom:18px; border-bottom:1px solid var(--line);}
.spec dl{margin:0;}
.spec .field{display:flex; justify-content:space-between; gap:18px; padding:15px 0; border-bottom:1px solid var(--line-soft); font-size:15px;}
.spec .field:last-child{border-bottom:none; padding-bottom:0;}
.spec dt{color:var(--gray-1);}
.spec dd{margin:0; font-weight:600; text-align:right;}
.spec a{color:var(--white);}
@media (max-width:640px){ .spec{padding:24px 20px; border-radius:var(--radius);} }

/* notice for divisions still in development */
.notice{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center;
  padding:26px 30px; border-radius:var(--radius);
  border:1px solid var(--line);
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 10px, rgba(255,255,255,0) 10px 20px);
}
.notice .pulse{position:relative; width:12px; height:12px;}
.notice .pulse::before, .notice .pulse::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--white);}
.notice .pulse::after{animation:pulse 2.4s var(--ease) infinite;}
@keyframes pulse{0%{transform:scale(1); opacity:.6;} 100%{transform:scale(3.4); opacity:0;}}
.notice h2{font-size:clamp(18px, 1.6vw, 21px); letter-spacing:-0.02em; line-height:1.3;}
.notice p{margin-top:4px; color:var(--gray-1); font-size:15px; line-height:1.55;}
@media (max-width:640px){ .notice{padding:22px 20px; gap:16px; align-items:start;} .notice .pulse{margin-top:6px;} }

/* ---------------- gallery ---------------- */
.gallery{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; align-items:start;}
.gallery-side{display:flex; flex-direction:column; gap:22px; min-width:0;}
.showcase-count{font-family:var(--mono); font-size:12px; letter-spacing:0.14em; color:var(--gray-2);}
@media (max-width:980px){ .gallery{grid-template-columns:minmax(0,1fr); gap:22px;} }

.stage{
  position:relative; aspect-ratio:16 / 10;
  border-radius:var(--radius); border:1px solid var(--line);
  background:radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.07), rgba(255,255,255,0) 60%), #07070A;
  overflow:hidden; cursor:zoom-in;
  -webkit-tap-highlight-color:transparent; touch-action:pan-y;
}
.shot{
  position:absolute; inset:0; margin:0; padding:3.5%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:scale(1.015);
  transition:opacity .5s var(--ease), transform .7s var(--ease), visibility .5s;
  pointer-events:none;
}
.shot.is-active{opacity:1; visibility:visible; transform:none;}
.shot img{width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 30px 60px rgba(0,0,0,0.6);}
.stage-nav, .stage-zoom{
  position:absolute; z-index:2; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--glass-border); background:rgba(0,0,0,0.6);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--white); cursor:pointer;
  opacity:0; transition:opacity .3s var(--ease), background .2s var(--ease);
}
.stage-nav{top:50%; width:44px; height:44px; margin-top:-22px; border-radius:50%;}
.stage-nav.prev{left:14px;} .stage-nav.next{right:14px;}
.stage-zoom{top:14px; right:14px; width:40px; height:40px; border-radius:12px;}
.stage-nav svg{width:17px; height:17px;} .stage-zoom svg{width:15px; height:15px;}
.stage:hover .stage-nav, .stage:hover .stage-zoom, .stage-nav:focus-visible, .stage-zoom:focus-visible{opacity:1;}
.stage-nav:hover, .stage-zoom:hover{background:rgba(40,40,44,0.9);}
@media (hover:none){ .stage-nav, .stage-zoom{opacity:.95;} }
@media (max-width:460px){ .stage-nav{display:none;} }

/* captions are real page text so translation tools can read them */
.cap{display:none; margin:0;}
.cap.is-active{display:block;}
.cap strong{display:block; font-size:clamp(20px, 1.8vw, 24px); font-weight:600; letter-spacing:-0.025em; line-height:1.2;}
.cap span{display:block; margin-top:8px; font-size:15.5px; color:var(--gray-1); line-height:1.55;}
.gallery-progress{height:1px; background:var(--line); position:relative; overflow:hidden;}
.gallery-progress i{position:absolute; inset:0; background:var(--white); transform-origin:0 50%; transform:scaleX(0); transition:transform .5s var(--ease);}

.rail{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px;}
.thumb{
  aspect-ratio:16 / 10; padding:0; margin:0;
  border:1px solid var(--line-soft); border-radius:8px; overflow:hidden;
  background:#0A0A0C; cursor:pointer; opacity:.4;
  transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.thumb img{width:100%; height:100%; object-fit:cover; object-position:50% 0;}
.thumb:hover{opacity:.8;}
.thumb.is-active{opacity:1; border-color:var(--white);}
@media (max-width:980px){
  .rail{display:flex; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; scrollbar-width:none;}
  .rail::-webkit-scrollbar{display:none;}
  .thumb{flex:0 0 96px; scroll-snap-align:center;}
}

@media (min-width:981px){ .rail.cols-3{grid-template-columns:repeat(3, minmax(0,1fr));} }

/* ---------------- carousel: one slide in the middle, its neighbours at the sides ---------------- */
.carousel{position:relative; border-radius:var(--radius);}
.cf-track{
  position:relative; aspect-ratio:2.5 / 1; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-tap-highlight-color:transparent; touch-action:pan-y; user-select:none;
}
.cf-slide{
  --o:0; --a:0;
  position:absolute; left:50%; top:50%; width:60%; aspect-ratio:16 / 9;
  margin:0; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:#0A0A0C; color:inherit; cursor:pointer;
  transform:translate(-50%, -50%) translateX(calc(var(--o) * 56%)) scale(calc(1 - var(--a) * .16));
  opacity:calc(1 - var(--a) * .42);
  transition:transform .7s var(--ease), opacity .5s var(--ease), border-color .3s var(--ease);
}
.cf-slide img{width:100%; height:100%; object-fit:cover; pointer-events:none;}
.cf-slide.is-active{border-color:var(--line-strong); cursor:zoom-in; box-shadow:0 30px 60px rgba(0,0,0,0.6);}
.cf-slide:not(.is-active):hover{opacity:calc(1 - var(--a) * .28);}
.cf-slide.is-far{opacity:0; visibility:hidden; pointer-events:none;}
.carousel .stage-nav{opacity:1; display:flex; z-index:20;}
.carousel .stage-nav.prev{left:4%;} .carousel .stage-nav.next{right:4%;}
.cf-foot{display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:18px 40px; align-items:end; margin-top:26px;}
.cf-count{display:flex; flex-direction:column; gap:12px;}
@media (max-width:760px){
  .cf-track{aspect-ratio:1.7 / 1;}
  .cf-slide{width:80%;}
  .carousel .stage-nav.prev{left:6px;} .carousel .stage-nav.next{right:6px;}
  .cf-foot{grid-template-columns:minmax(0,1fr);}
}

/* ---------------- language picker close-ups ---------------- */
.lang-shots{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-self:center;}
.lang-shot{
  position:relative; aspect-ratio:1 / 1; overflow:hidden; padding:0; margin:0;
  border:1px solid var(--line); border-radius:var(--radius); background:#000; cursor:zoom-in;
}
/* the picker sits in the middle of the screenshot, so enlarge around the centre */
.lang-shot img{position:absolute; left:50%; top:50%; width:230%; height:auto; max-width:none; transform:translate(-50%, -50%); transition:transform .8s var(--ease);}
.lang-shot:hover img{transform:translate(-50%, -50%) scale(1.04);}

/* ---------------- dialogs: trailer + lightbox ---------------- */
.modal{
  position:fixed; inset:0; z-index:120;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  overflow:auto;
}
.modal.open{display:flex;}
.modal-backdrop{position:fixed; inset:0; cursor:pointer;}
.modal-close{
  position:fixed; top:16px; right:16px; z-index:3;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line); padding:0;
  background:rgba(255,255,255,0.08); color:var(--white);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-close svg{width:18px; height:18px;}
.modal-close:hover{background:var(--white); color:var(--black);}
.trailer-content{position:relative; z-index:1; width:min(100%, 1180px); margin:auto; border-radius:var(--radius); overflow:hidden; background:#000; border:1px solid var(--line);}
.trailer-content video{width:100%; height:auto; max-height:84vh; background:#000;}
.trailer-fallback{padding:16px 20px 20px; text-align:center; font-size:14px; color:var(--gray-1);}
.trailer-fallback a{color:var(--white);}
.lightbox-figure{position:relative; z-index:1; margin:0; width:100%; max-width:1500px; display:flex; flex-direction:column; align-items:center; gap:16px;}
.lightbox-scroll{width:100%; display:flex; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
.lightbox-scroll > img{margin:auto;}
.lightbox-figure img{width:auto; height:auto; max-width:100%; max-height:calc(100vh - 170px); border-radius:10px; border:1px solid var(--line);}
.lightbox-figure figcaption{font-size:14.5px; color:var(--gray-1); text-align:center; max-width:60ch;}
.lightbox-figure figcaption strong{display:block; color:var(--white); font-weight:600; font-size:16px;}
.lightbox-nav{
  position:fixed; top:50%; z-index:3;
  width:50px; height:50px; margin-top:-25px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:rgba(255,255,255,0.08); color:var(--white); cursor:pointer;
}
.lightbox-nav:hover{background:var(--white); color:var(--black);}
.lightbox-nav svg{width:18px; height:18px;}
.lightbox-nav.prev{left:16px;} .lightbox-nav.next{right:16px;}
@media (max-width:640px){
  .modal{padding:12px;}
  .lightbox-figure{padding-bottom:70px;}
  .lightbox-nav{top:auto; bottom:18px; margin-top:0;}
  .lightbox-nav.prev{left:calc(50% - 60px);} .lightbox-nav.next{right:calc(50% - 60px);}
}

/* ---------------- team ---------------- */
.person{display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(32px, 5vw, 72px); align-items:start; max-width:1080px;}
.portrait{margin:0; position:sticky; top:calc(var(--header-h) + 32px);}
.portrait-frame{aspect-ratio:4 / 5; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:#0A0A0C;}
.portrait-frame img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05);}
.portrait figcaption{margin-top:14px; display:flex; flex-direction:column; gap:4px;}
.person h2{font-size:clamp(42px, 5.4vw, 80px); letter-spacing:-0.05em; line-height:.95;}
.person .role{margin:18px 0 36px;}
.quote{margin:44px 0 0; padding:36px 0 0; border-top:1px solid var(--line);}
.quote p{font-size:clamp(22px, 2.3vw, 32px); line-height:1.3; letter-spacing:-0.025em; font-weight:500;}
.quote footer{margin-top:18px;}
.person .btn-row{margin-top:40px;}
@media (max-width:900px){
  .person{grid-template-columns:minmax(0,1fr);}
  .portrait{position:relative; top:0; width:128px;}
}

/* ---------------- next / previous page ---------------- */
.next-page{border-top:1px solid var(--line-soft);}
.next-page .container{display:flex; justify-content:space-between; align-items:center; gap:16px 32px; flex-wrap:wrap; padding-top:28px; padding-bottom:28px;}
.next-page .prev{font-size:15px; color:var(--gray-1); text-decoration:none;}
.next-page .prev:hover{color:var(--white);}
.next-page .next{margin-left:auto; display:inline-flex; align-items:center; gap:14px; text-decoration:none;}
.next-page .next .to{font-size:clamp(20px, 2vw, 26px); font-weight:600; letter-spacing:-0.025em;}
.next-page .arr{width:22px; height:22px; transition:transform .35s var(--ease);}
.next-page .next:hover .arr{transform:translateX(5px);}

/* ---------------- footer ---------------- */
.site-footer{position:relative; z-index:1; border-top:1px solid var(--line); padding:clamp(56px, 7vw, 88px) 0 28px; overflow:hidden; background:#000;}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap:40px;}
.footer-grid > div > p{color:var(--gray-1); font-size:15px; max-width:34ch; margin-top:18px;}
.footer-col .label{margin-bottom:18px;}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col li{margin-bottom:12px;}
.footer-col a{display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--gray-1); text-decoration:none; transition:color .2s; overflow-wrap:anywhere;}
.footer-col a:hover{color:var(--white);}
.footer-col a svg{width:15px; height:15px; flex:none;}
.wordmark{display:block; width:100%; height:auto; margin:clamp(48px, 7vw, 96px) 0 6px;}
.footer-bottom{display:flex; justify-content:space-between; gap:10px 20px; flex-wrap:wrap; margin-top:28px; padding-top:22px; border-top:1px solid var(--line-soft);}
@media (max-width:900px){ .footer-grid{grid-template-columns:repeat(3, minmax(0,1fr));} .footer-grid > :first-child{grid-column:1 / -1;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr 1fr; gap:36px 20px;} .footer-grid > .footer-col:last-child{grid-column:1 / -1;} }

/* ---------------- toast (email copied) ---------------- */
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:130;
  transform:translateX(-50%);
  padding:13px 20px; border-radius:999px;
  background:var(--white); color:var(--black);
  font-size:14.5px; font-weight:600; white-space:nowrap;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  pointer-events:none;
}
@media (max-width:420px){ .toast{white-space:normal; width:calc(100% - 40px); text-align:center;} }

/* ---------------- shooting stars ---------------- */
.stars-layer{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.shooting-star{
  position:absolute; top:0; left:0;
  width:var(--len); height:var(--h, 2px);
  background:linear-gradient(-90deg, var(--star-color) 0%, rgba(255,255,255,0) 100%);
  border-radius:var(--h, 2px);
  opacity:0; transform-origin:right center;
  animation:shoot var(--dur) linear forwards;
}
.shooting-star::after{
  content:""; position:absolute; right:-2px; top:50%;
  width:var(--head, 3px); height:var(--head, 3px); margin-top:calc(var(--head, 3px) / -2);
  border-radius:50%; background:#fff;
  box-shadow:0 0 var(--glow, 6px) calc(var(--glow, 6px) / 3) var(--star-color);
}
@keyframes shoot{
  0%{opacity:0; transform:translate(var(--sx), var(--sy)) rotate(var(--angle)) translateX(0);}
  6%{opacity:1;}
  78%{opacity:.85;}
  100%{opacity:0; transform:translate(var(--sx), var(--sy)) rotate(var(--angle)) translateX(var(--dist));}
}

/* ---------------- 404 ---------------- */
.lost{min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:calc(var(--header-h) + 40px) 0 60px;}
.lost .code{font-size:clamp(120px, 26vw, 360px); font-weight:700; letter-spacing:-0.04em; line-height:.8; background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.12)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lost h1{margin-top:24px; font-size:clamp(28px, 4vw, 52px); letter-spacing:-0.04em;}
.lost p{margin-top:14px; color:var(--gray-1); max-width:46ch;}
.lost .btn-row{margin-top:30px;}

@media (pointer:coarse){ .btn{min-height:50px;} .btn-sm{min-height:44px;} }

/* ---------------- legal pages ---------------- */
.legal-date{margin-top:26px;}
.legal{display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:clamp(32px, 6vw, 96px); align-items:start;}
.legal-toc{position:sticky; top:calc(var(--header-h) + 28px);}
.legal-toc .label{margin-bottom:14px;}
.legal-toc ol{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft);}
.legal-toc li{border-bottom:1px solid var(--line-soft);}
.legal-toc a{display:block; padding:10px 0; font-size:14px; color:var(--gray-1); text-decoration:none; transition:color .2s;}
.legal-toc a:hover{color:var(--white);}
.legal-main{max-width:760px;}
.legal-sec{padding-bottom:clamp(36px, 5vw, 56px); margin-bottom:clamp(36px, 5vw, 56px); border-bottom:1px solid var(--line-soft); scroll-margin-top:calc(var(--header-h) + 24px);}
.legal-sec:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.legal-sec h2{font-size:clamp(24px, 2.6vw, 34px); line-height:1.1; letter-spacing:-0.03em; margin-bottom:22px;}
.legal-body h3{font-size:17px; font-weight:600; color:var(--white); margin:28px 0 10px;}
.legal-body h3:first-child{margin-top:0;}
.legal-body p, .legal-body li{color:var(--gray-1); font-size:16.5px; line-height:1.7;}
.legal-body p{margin:0 0 14px;}
.legal-body ul{margin:0 0 14px; padding-left:20px;}
.legal-body li{margin-bottom:8px;}
.legal-body strong{color:var(--white); font-weight:600;}
.legal-body a{color:var(--white);}
.legal-body code{font-family:var(--mono); font-size:13px; color:var(--white); white-space:nowrap;}
.table-wrap{overflow-x:auto; margin:0 0 18px; border:1px solid var(--line); border-radius:var(--radius);}
.legal-table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px;}
.legal-table th, .legal-table td{padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-soft); color:var(--gray-1); line-height:1.55;}
.legal-table th{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray-2);}
.legal-table tr:last-child td{border-bottom:none;}
@media (max-width:900px){ .legal{grid-template-columns:minmax(0,1fr);} .legal-toc{position:static;} }

/* ---------------- footer legal links ---------------- */
.legal-links{display:flex; flex-wrap:wrap; gap:6px 18px;}
.legal-links a, .link-btn{color:inherit; text-decoration:none; transition:color .2s;}
.link-btn{font:inherit; letter-spacing:inherit; text-transform:inherit; background:none; border:0; padding:0; cursor:pointer;}
.legal-links a:hover, .link-btn:hover{color:var(--white);}

/* ---------------- cookie banner ---------------- */
.consent{
  position:fixed; z-index:95; left:0; right:0; bottom:0;
  padding:0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex; justify-content:center; pointer-events:none;
}
.consent[hidden]{display:none;}
.consent-box{
  pointer-events:auto; width:100%; max-width:980px;
  padding:22px 24px; border-radius:var(--radius-lg);
  background:rgba(14,14,17,0.94); border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 24px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 28px; align-items:center;
  animation:consentIn .45s var(--ease) both;
}
@keyframes consentIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .consent-box{animation:none;} }
.consent-title{font-size:16px; font-weight:600; color:var(--white); margin:0 0 6px;}
.consent-text{font-size:14px; line-height:1.55; color:var(--gray-1); margin:0; max-width:70ch;}
.consent-text a{color:var(--white);}
.consent-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;}
.consent-actions [hidden]{display:none;}
.consent.open .consent-box{grid-template-columns:minmax(0,1fr);}
.consent.open .consent-actions{justify-content:flex-end;}
.consent-prefs{border-top:1px solid var(--line); max-height:min(46vh, 360px); overflow-y:auto;}
.consent-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line-soft);}
.consent-row:last-child{border-bottom:none;}
.consent-name{font-size:14.5px; font-weight:600; color:var(--white); margin:0 0 3px;}
.consent-desc{font-size:13.5px; line-height:1.5; color:var(--gray-1); margin:0;}
.consent-always{flex:none; font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray-2);}
.switch{position:relative; flex:none; width:46px; height:26px; cursor:pointer;}
.switch input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;}
.switch-ui{position:absolute; inset:0; border-radius:999px; background:var(--gray-3); transition:background .2s var(--ease);}
.switch-ui::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--white); transition:transform .2s var(--ease);}
.switch input:checked + .switch-ui{background:var(--white);}
.switch input:checked + .switch-ui::after{transform:translateX(20px); background:var(--black);}
.switch input:focus-visible + .switch-ui{outline:2px solid var(--white); outline-offset:3px;}
@media (max-width:760px){
  .consent{padding:0 10px calc(10px + env(safe-area-inset-bottom, 0px));}
  .consent-box{grid-template-columns:minmax(0,1fr); padding:18px;}
  .consent-actions{justify-content:stretch;}
  .consent-actions .btn{flex:1 1 calc(50% - 5px);}
}