:root{
  --bg:#050505;
  --bg-2:#090706;
  --panel:#0d0b0a;
  --panel-2:#130c0c;
  --ink:#f6efe7;
  --muted:rgba(246,239,231,.64);
  --soft:rgba(246,239,231,.44);
  --line:rgba(246,239,231,.13);
  --line-strong:rgba(246,239,231,.24);
  --red:#f1131d;
  --red-2:#9c061c;
  --burgundy:#610018;
  --max:1440px;
  --radius:8px;
  --serif:Georgia, "Times New Roman", serif;
  --sans:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ min-height:100%; overflow-x:hidden; scroll-behavior:smooth; }
body{
  min-height:100%;
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  background:
    radial-gradient(circle at 78% 8%, rgba(241,19,29,.1), transparent 28rem),
    linear-gradient(180deg, #020202, var(--bg) 30rem, #080606);
  font-family:var(--sans);
  letter-spacing:0;
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--red); outline-offset:4px; }

.hero{
  position:relative;
  min-height:725px;
  overflow:hidden;
  isolation:isolate;
  background:#000;
}

.hero__photo{
  position:absolute;
  inset:0;
  z-index:-5;
  background-image:image-set(
    url("../../img/studio/hero-chess-studio-v2.webp") type("image/webp"),
    url("../../img/studio/hero-chess-studio-v2.png") type("image/png")
  );
  background-repeat:no-repeat;
  background-size:76vw auto;
  background-position:100% 47%;
  filter:brightness(.94) contrast(1.12) saturate(.95);
  animation:heroDrift 18s ease-in-out infinite alternate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    linear-gradient(90deg, rgba(0,0,0,.91) 0%, rgba(0,0,0,.72) 31%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.04) 42%, rgba(0,0,0,.5) 82%, #050505 100%);
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(246,239,231,.16), transparent);
}

.hero__pieces{
  position:absolute;
  z-index:-2;
  right:-16rem;
  bottom:11.4rem;
  width:min(88rem, 78vw);
  opacity:0;
  filter:brightness(.75) saturate(.5) blur(.2px);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:piecesBreathe 7.5s ease-in-out infinite alternate;
}

.hero__screen-mark{
  position:absolute;
  z-index:-1;
  top:clamp(5.4rem, 7vw, 6.9rem);
  left:auto;
  right:clamp(9rem, 13.5vw, 14rem);
  width:clamp(10.5rem, 12.5vw, 13.5rem);
  opacity:.42;
  filter:brightness(.62) saturate(.72) blur(.9px);
  mix-blend-mode:screen;
  transform-origin:50% 52%;
  pointer-events:none;
  animation:markPulse 8s ease-in-out infinite alternate;
}

.site-header{
  position:relative;
  z-index:3;
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
  padding:1.75rem 0 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:1rem;
}

.brand img{
  width:4.8rem;
  height:4.8rem;
  object-fit:contain;
}

.brand span{
  display:grid;
  gap:.12rem;
  text-transform:uppercase;
}

.brand strong{
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1;
  font-weight:700;
}

.brand em{
  color:var(--red);
  font-size:.68rem;
  line-height:1;
  font-style:normal;
  font-weight:800;
}

.main-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2.05rem;
  min-height:3rem;
}

.main-nav a{
  position:relative;
  color:rgba(246,239,231,.6);
  font-size:.78rem;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  transition:color .2s ease;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.72rem;
  height:1px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}

.contact-cta{
  min-height:2.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  border:1px solid rgba(241,19,29,.7);
  border-radius:5px;
  padding:0 1.25rem;
  color:var(--red);
  font-size:.72rem;
  line-height:1;
  font-weight:850;
  text-transform:uppercase;
}

.contact-cta::after{
  content:"↗";
  font-size:.9rem;
}

.main-nav a:hover,
.main-nav a.active{
  color:var(--red);
}

.main-nav a:hover::after,
.main-nav a.active::after{
  transform:scaleX(1);
}

.lang-switch{
  position:relative;
  z-index:90;
}

.lang-switch summary{
  min-width:3.35rem;
  min-height:2.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  border:1px solid rgba(246,239,231,.14);
  border-radius:var(--radius);
  background:rgba(0,0,0,.36);
  color:var(--ink);
  cursor:pointer;
  font-size:.72rem;
  font-weight:850;
  line-height:1;
  list-style:none;
  text-transform:uppercase;
}

.lang-switch summary::-webkit-details-marker{
  display:none;
}

.lang-switch summary::after{
  content:"";
  width:.32rem;
  height:.32rem;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  margin-top:-.12rem;
  opacity:.7;
  transform:rotate(45deg);
}

.lang-switch[open] summary{
  border-color:rgba(241,19,29,.52);
  color:var(--red);
}

.lang-switch__menu{
  position:absolute;
  z-index:95;
  top:calc(100% + .4rem);
  right:0;
  min-width:5.4rem;
  display:grid;
  gap:.25rem;
  border:1px solid rgba(246,239,231,.13);
  border-radius:var(--radius);
  background:rgba(4,4,4,.96);
  padding:.35rem;
  box-shadow:0 1rem 2.4rem rgba(0,0,0,.38);
}

.lang-switch__menu a{
  min-height:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  color:rgba(246,239,231,.66);
  font-size:.72rem;
  font-weight:850;
  text-transform:uppercase;
}

.lang-switch__menu a:hover,
.lang-switch__menu a.active{
  background:rgba(241,19,29,.12);
  color:var(--red);
}

.nav-toggle{
  display:none;
  width:2.8rem;
  height:2.8rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(0,0,0,.35);
  color:var(--ink);
}

.nav-toggle span{
  display:block;
  width:1.25rem;
  height:1px;
  margin:.32rem auto;
  background:currentColor;
}

.hero__content{
  position:relative;
  z-index:2;
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
  padding:5.35rem 0 0 3.9rem;
  max-width:none;
  margin-left:auto;
}

.hero h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(4.4rem, 5.7vw, 5.9rem);
  line-height:.93;
  font-weight:700;
  text-transform:uppercase;
}

.hero h1 span{
  display:block;
}

.hero h1 span:last-child{
  color:var(--red);
}

.hero__content p{
  position:relative;
  margin:2rem 0 0;
  color:rgba(246,239,231,.72);
  max-width:29rem;
  font-family:var(--serif);
  font-size:1.18rem;
  line-height:1.4;
}

.hero__content p::before{
  content:"";
  display:block;
  width:4.3rem;
  height:1px;
  margin:0 0 1.25rem;
  background:var(--red);
}

.hero__content strong{
  color:var(--red);
  font-weight:400;
}

.hero__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2rem;
  margin-top:2.2rem;
}

.product-dashboard{
  position:absolute;
  z-index:4;
  top:5.8rem;
  right:max(1rem, calc((100vw - var(--max)) / 2));
  width:min(44.5rem, 48vw);
  display:grid;
  gap:.5rem;
  pointer-events:auto;
}

.dash-panel{
  overflow:hidden;
  border:1px solid rgba(246,239,231,.16);
  border-radius:6px;
  background:
    linear-gradient(180deg, rgba(246,239,231,.045), rgba(246,239,231,.015)),
    rgba(8,8,8,.78);
  box-shadow:0 1.1rem 4rem rgba(0,0,0,.42);
  backdrop-filter:blur(12px);
}

.dash-head{
  min-height:2.05rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  border-bottom:1px solid rgba(246,239,231,.1);
  padding:0 .75rem;
  color:rgba(246,239,231,.82);
  font-size:.68rem;
  font-weight:780;
}

.dash-head span{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-right:auto;
}

.dash-head img{
  width:1rem;
  height:1rem;
  object-fit:contain;
}

.dash-head i{
  width:.35rem;
  height:.35rem;
  border:1px solid rgba(246,239,231,.55);
  border-radius:50%;
  opacity:.65;
}

.dash-panel--main{
  min-height:19.2rem;
}

.analysis-layout{
  display:grid;
  grid-template-columns:6.5rem 13.2rem 8.8rem 1fr;
  gap:.65rem;
  padding:.75rem;
}

.mini-sidebar{
  display:grid;
  align-content:start;
  gap:.35rem;
  padding-top:.1rem;
  color:rgba(246,239,231,.42);
  font-size:.63rem;
}

.mini-sidebar span{
  border-left:2px solid transparent;
  padding:.42rem .45rem;
}

.mini-sidebar .active{
  color:var(--ink);
  border-left-color:var(--red);
  background:rgba(246,239,231,.04);
}

.board-mini{
  position:relative;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  grid-template-rows:repeat(8, 1fr);
  aspect-ratio:1;
  border:1px solid rgba(246,239,231,.14);
  background:
    conic-gradient(#777 25%, #2a2a2a 0 50%, #777 0 75%, #2a2a2a 0)
    0 0 / 25% 25%;
}

.board-mini span{
  position:relative;
  background:transparent;
}

.board-mini .piece::after{
  content:"";
  position:absolute;
  inset:25%;
  border-radius:50%;
  background:#151515;
  box-shadow:0 .18rem .35rem rgba(0,0,0,.7);
}

.board-mini .piece.small::after{
  inset:32%;
  background:#d4d4d4;
}

.board-mini .p1{ grid-column:6; grid-row:3; }
.board-mini .p2{ grid-column:3; grid-row:5; }
.board-mini .p3{ grid-column:4; grid-row:7; }
.board-mini .p4{ grid-column:7; grid-row:6; }

.moves-mini,
.score-mini{
  border:1px solid rgba(246,239,231,.09);
  border-radius:4px;
  padding:.65rem;
  background:rgba(246,239,231,.025);
}

.moves-mini b,
.score-mini span{
  display:block;
  margin-bottom:.5rem;
  color:rgba(246,239,231,.55);
  font-size:.62rem;
}

.moves-mini ol{
  margin:0;
  padding-left:1.1rem;
  color:rgba(246,239,231,.62);
  font-size:.62rem;
  line-height:1.55;
}

.score-mini strong{
  display:block;
  margin-bottom:.65rem;
  font-size:1.45rem;
  font-weight:500;
}

.chart-line{
  height:4.4rem;
  margin-bottom:.7rem;
  background:
    linear-gradient(165deg, transparent 47%, rgba(241,19,29,.85) 48% 51%, transparent 52%),
    linear-gradient(180deg, rgba(241,19,29,.2), transparent);
}

.score-mini small{
  color:rgba(246,239,231,.48);
}

.score-mini small b{
  color:var(--red);
}

.dash-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.5rem;
}

.dash-grid .dash-panel{
  min-height:15.3rem;
  padding-bottom:.8rem;
}

.dash-grid h3{
  margin:.95rem .85rem .45rem;
  color:var(--ink);
  font-size:.95rem;
  line-height:1.22;
}

.dash-grid p{
  margin:0 .85rem;
  color:rgba(246,239,231,.55);
  font-size:.68rem;
  line-height:1.55;
}

.bar-chart{
  height:5.4rem;
  display:flex;
  align-items:end;
  gap:.32rem;
  margin:1rem .9rem 0;
  padding:.55rem;
  border:1px solid rgba(246,239,231,.08);
  background:
    linear-gradient(90deg, rgba(246,239,231,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(246,239,231,.06) 1px, transparent 1px);
  background-size:1.2rem 1.2rem;
}

.bar-chart span{
  flex:1;
  min-height:.4rem;
  background:linear-gradient(180deg, var(--red), rgba(241,19,29,.25));
}

.bar-chart span:nth-child(1){ height:18%; }
.bar-chart span:nth-child(2){ height:28%; }
.bar-chart span:nth-child(3){ height:42%; }
.bar-chart span:nth-child(4){ height:55%; }
.bar-chart span:nth-child(5){ height:73%; }
.bar-chart span:nth-child(6){ height:94%; }

.quiz-tile{
  width:10rem;
  height:5.4rem;
  margin:1rem .85rem 0;
  border:1px solid rgba(246,239,231,.1);
  border-radius:4px;
  background:
    linear-gradient(45deg, #3e3e3e 25%, #777 0 50%, #303030 0 75%, #999 0);
  background-size:2rem 2rem;
  opacity:.8;
}

.speed-ring{
  width:6.4rem;
  height:6.4rem;
  display:grid;
  place-items:center;
  margin:1rem auto .85rem;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #111 48%, transparent 50%),
    conic-gradient(var(--red) 0 72%, rgba(246,239,231,.12) 72% 100%);
}

.speed-ring strong,
.speed-ring span{
  grid-area:1/1;
}

.speed-ring strong{
  margin-top:-.6rem;
  font-size:1.6rem;
}

.speed-ring span{
  margin-top:2.1rem;
  color:rgba(246,239,231,.48);
  font-size:.65rem;
}

.library-panel{
  min-height:10.6rem;
}

.book-row{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.5rem;
  padding:.75rem .9rem .9rem;
}

.book-row span{
  min-height:7rem;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  border:1px solid rgba(246,239,231,.12);
  border-radius:4px;
  padding:.9rem .45rem;
  color:rgba(246,239,231,.76);
  background:
    radial-gradient(circle at 50% 85%, rgba(241,19,29,.26), transparent 2.5rem),
    linear-gradient(180deg, rgba(246,239,231,.07), rgba(246,239,231,.015));
  font-family:var(--serif);
  font-size:.68rem;
  line-height:1.15;
  text-align:center;
  text-transform:uppercase;
}

.btn,
.button,
.store{
  min-height:3.1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  border:1px solid var(--line-strong);
  border-radius:5px;
  padding:0 1.35rem;
  background:rgba(246,239,231,.035);
  color:var(--ink);
  font-size:.78rem;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.btn:hover,
.button:hover,
.store:hover{
  transform:translateY(-1px);
  border-color:rgba(246,239,231,.45);
  background:rgba(246,239,231,.07);
}

.btn--primary,
.btn.primary,
.button.primary,
.store.primary{
  border-color:var(--red);
  background:var(--red);
  color:#fff;
  box-shadow:0 1rem 2.4rem rgba(241,19,29,.18);
}

.btn--primary::after,
.btn--line::after,
.button::after,
.store::after{
  content:"›";
  font-size:1.25rem;
  line-height:0;
}

.btn--line{
  min-height:2.7rem;
  border-top:0;
  border-right:0;
  border-left:0;
  border-radius:0;
  padding:0;
  background:transparent;
}

.btn--line:hover{
  background:transparent;
  border-color:var(--red);
}

.studio-strip{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
  border-top:1px solid rgba(246,239,231,.12);
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.6));
}

.studio-strip article{
  min-height:6.8rem;
  display:grid;
  grid-template-columns:2.8rem minmax(0,1fr);
  align-items:center;
  gap:1.05rem;
  padding:1.25rem 1.25rem;
  border-right:1px solid rgba(246,239,231,.14);
}

.studio-strip article:last-child{
  border-right:0;
}

.strip-mark{
  color:var(--red);
  font-family:var(--serif);
  font-size:1.65rem;
  font-weight:700;
}

.studio-strip h2{
  margin:0 0 .32rem;
  color:rgba(246,239,231,.62);
  font-size:.86rem;
  line-height:1.2;
  font-weight:800;
  text-transform:uppercase;
}

.studio-strip p{
  margin:0;
  color:var(--soft);
  font-size:.9rem;
  line-height:1.35;
}

main{
  position:relative;
  z-index:1;
}

.software-preview,
.studio-section,
.catalog,
.library-band{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
}

.software-preview{
  padding:3.4rem 0 5.2rem;
}

.section-title{
  display:grid;
  grid-template-columns:auto minmax(14rem, 1fr) auto;
  align-items:center;
  gap:1.5rem;
  margin-bottom:1.2rem;
}

.section-title h2,
.section-copy h2,
.page-title h1{
  margin:0;
  font-family:var(--serif);
  font-size:1.55rem;
  line-height:1.1;
  font-weight:700;
  text-transform:uppercase;
}

.section-title h2::after{
  content:"";
  display:inline-block;
  width:3rem;
  height:1px;
  margin-left:1.5rem;
  vertical-align:middle;
  background:var(--red);
}

.section-title p{
  margin:0;
  color:var(--soft);
  font-size:.92rem;
}

.section-title a,
.text-link{
  color:var(--red);
  font-size:.78rem;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
}

.section-title a::after,
.text-link::after{
  content:" ›";
  font-size:1.05rem;
}

.software-cards{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.55rem;
}

.software-card{
  position:relative;
  min-height:13.6rem;
  display:grid;
  align-content:end;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.35rem;
  background:
    radial-gradient(circle at 50% 15%, rgba(241,19,29,.18), transparent 8rem),
    linear-gradient(180deg, rgba(246,239,231,.04), rgba(246,239,231,.012)),
    var(--panel);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}

.software-card:hover{
  transform:translateY(-3px);
  border-color:rgba(241,19,29,.45);
  background:
    radial-gradient(circle at 50% 15%, rgba(241,19,29,.22), transparent 8rem),
    linear-gradient(180deg, rgba(246,239,231,.055), rgba(246,239,231,.015)),
    var(--panel);
}

.software-card h3{
  margin:0;
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.05;
}

.software-card p{
  margin:.45rem 0 0;
  color:var(--soft);
  font-size:.82rem;
  line-height:1.35;
}

.software-card b{
  position:absolute;
  right:1rem;
  bottom:.9rem;
  color:var(--red);
  font-size:1.35rem;
  line-height:1;
  font-weight:400;
}

.product-symbol{
  position:absolute;
  top:1.4rem;
  left:50%;
  width:7.2rem;
  height:5.8rem;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--red);
  font-family:var(--serif);
  font-size:4.45rem;
  line-height:1;
  font-weight:700;
}

.product-symbol img{
  width:7.4rem;
  height:7.4rem;
  object-fit:contain;
}

.product-symbol--cc{
  color:rgba(181,8,27,.72);
  letter-spacing:-.62rem;
}

.product-symbol--letters{
  color:rgba(241,19,29,.78);
  text-shadow:.35rem .2rem 0 rgba(98,0,24,.85);
}

.is-hot{
  background:
    radial-gradient(circle at 50% 10%, rgba(241,19,29,.24), transparent 9rem),
    linear-gradient(180deg, rgba(80,0,18,.3), rgba(246,239,231,.012)),
    var(--panel);
}

.studio-section,
.catalog,
.library-band{
  display:grid;
  grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);
  gap:4rem;
  padding:5.2rem 0;
  border-top:1px solid var(--line);
}

.section-copy{
  max-width:42rem;
}

.eyebrow{
  margin:0 0 .9rem;
  color:var(--red);
  font-size:.78rem;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
}

.section-copy h2{
  font-size:3rem;
  line-height:.98;
}

.studio-copy{
  align-self:end;
  display:grid;
  gap:1rem;
  color:var(--muted);
  font-family:var(--serif);
  font-size:1.16rem;
  line-height:1.65;
}

.studio-copy p,
.library-band p{
  margin:0;
}

.catalog{
  grid-template-columns:1fr;
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.8rem;
}

.catalog-grid--two{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.catalog-item{
  display:grid;
  min-height:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(246,239,231,.045), rgba(246,239,231,.012)), var(--panel);
}

.catalog-item img{
  width:100%;
  height:13.5rem;
  object-fit:cover;
  border-bottom:1px solid var(--line);
  filter:saturate(.92) contrast(1.04);
}

.catalog-item div{
  padding:1.25rem;
}

.catalog-item h3{
  margin:0;
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1.1;
}

.catalog-item p{
  margin:.75rem 0 1rem;
  color:var(--muted);
  font-size:.93rem;
  line-height:1.55;
}

.library-band{
  align-items:center;
  margin-bottom:2rem;
}

.library-band h2{
  margin:0 0 1rem;
  font-family:var(--serif);
  font-size:2.65rem;
  line-height:1;
  text-transform:uppercase;
}

.library-band p{
  max-width:44rem;
  color:var(--muted);
  font-size:1rem;
  line-height:1.65;
}

footer{
  width:min(var(--max), calc(100% - 2rem));
  min-height:5.2rem;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid var(--line);
  color:var(--soft);
}

footer strong{
  display:block;
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.05rem;
  text-transform:uppercase;
}

footer span,
footer a{
  color:var(--soft);
  font-size:.85rem;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.88);
  backdrop-filter:blur(18px);
}

.topbar .nav,
.container,
.site-wrap{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
}

.topbar .nav{
  min-height:5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.menu{
  display:flex;
  align-items:center;
  gap:1rem;
}

.menu a{
  color:var(--muted);
  font-size:.82rem;
  font-weight:750;
}

.menu a:hover,
.menu a.active{
  color:var(--red);
}

.brand .name{
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.2rem;
  text-transform:uppercase;
}

.brand .tag{
  color:var(--red);
  font-size:.72rem;
  font-style:normal;
  font-weight:800;
  text-transform:uppercase;
}

.page-title{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
  padding:4rem 0 2rem;
}

.page-title h1{
  font-size:3.8rem;
}

.page-title p,
.card p,
.li span,
.note{
  color:var(--muted);
  line-height:1.65;
}

.card,
.li{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(246,239,231,.045), rgba(246,239,231,.012)), var(--panel);
}

.card{
  padding:1.35rem;
}

.list{
  display:grid;
  gap:.75rem;
  margin:1rem 0 0;
  padding:0;
  list-style:none;
}

.li{
  padding:1rem;
}

.row,
.hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.5rem;
}

.appicon{
  width:5.6rem;
  height:5.6rem;
  object-fit:contain;
}

.badges,
.facts{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1rem 0;
  padding:0;
  list-style:none;
}

.badge,
.facts li{
  border:1px solid var(--line);
  border-radius:999px;
  padding:.35rem .65rem;
  color:var(--soft);
  font-size:.76rem;
}

.badge.red{
  color:var(--red);
  border-color:rgba(241,19,29,.4);
}

.hr{
  height:1px;
  margin:1.5rem 0;
  background:var(--line);
}

.smallmono,
.mini{
  color:var(--soft);
  font-size:.78rem;
}

@keyframes heroDrift{
  from{ background-position:100% 47%; }
  to{ background-position:99.4% 47.15%; }
}

@keyframes piecesBreathe{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(-.8rem,.18rem,0) scale(1.006); }
}

@keyframes markPulse{
  from{ opacity:.38; transform:perspective(900px) rotateY(-4deg) rotateX(.6deg) translate3d(0,0,0); }
  to{ opacity:.5; transform:perspective(900px) rotateY(-4deg) rotateX(.6deg) translate3d(.08rem,-.05rem,0); }
}

@keyframes pieceFall{
  0%{
    opacity:0;
    transform:translate3d(0,-14vh,0) rotate(0deg);
  }
  10%{
    opacity:var(--opacity);
  }
  82%{
    opacity:var(--opacity);
  }
  100%{
    opacity:0;
    transform:translate3d(var(--drift),116vh,0) rotate(var(--spin));
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }

  .falling-pieces{
    display:none !important;
  }
}

@media (max-width:1120px){
  .hero__screen-mark{
    left:auto;
    right:4rem;
    width:15rem;
  }

  .product-dashboard{
    width:min(38rem, 48vw);
  }

  .hero__content{
    padding-left:1rem;
  }

  .software-cards{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .studio-section,
  .library-band{
    grid-template-columns:1fr;
    gap:2rem;
  }
}

@media (max-width:860px){
  .hero{
    min-height:820px;
  }

  .site-header{
    align-items:center;
  }

  .contact-cta{
    display:none;
  }

  .nav-toggle{
    display:block;
  }

  .lang-switch{
    margin-left:auto;
  }

  .main-nav{
    position:absolute;
    top:5.4rem;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
    padding:1rem;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:rgba(5,5,5,.94);
    backdrop-filter:blur(18px);
  }

  body.nav-open .main-nav{
    display:flex;
  }

  .hero__content{
    padding-top:7rem;
  }

  .product-dashboard{
    display:none;
  }

  .hero h1{
    font-size:4.2rem;
  }

  .studio-strip{
    position:relative;
    width:100%;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    margin-top:4rem;
    background:#050505;
  }

  .studio-strip article:nth-child(2n){
    border-right:0;
  }

  .software-preview{
    padding-top:2rem;
  }

  .section-title{
    grid-template-columns:1fr;
    gap:.8rem;
  }

  .catalog-grid,
  .catalog-grid--two{
    grid-template-columns:1fr;
  }
}

@media (max-width:620px){
  .brand img{
    width:3.5rem;
    height:3.5rem;
  }

  .brand strong{
    font-size:1.05rem;
  }

  .brand em{
    font-size:.6rem;
  }

  .hero{
    min-height:auto;
    padding-bottom:0;
  }

  .hero__photo{
    background-size:cover;
    background-position:64% center;
  }

  .hero__pieces,
  .hero__screen-mark{
    display:none;
  }

  .hero__content{
    padding:6.5rem 0 5rem;
  }

  .hero h1{
    font-size:3.55rem;
  }

  .hero__content p{
    font-size:1rem;
  }

  .hero__actions,
  .row{
    align-items:stretch;
    flex-direction:column;
  }

  .btn,
  .button,
  .store{
    width:100%;
  }

  .studio-strip,
  .software-cards{
    grid-template-columns:1fr;
  }

  .studio-strip article{
    border-right:0;
  }

  .section-copy h2,
  .library-band h2,
  .page-title h1{
    font-size:2.35rem;
  }

  .studio-section,
  .catalog,
  .library-band{
    padding:3.6rem 0;
  }

  footer,
  .topbar .nav{
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
  }
}

/* Single-screen page model */
body.screen-site{
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  position:relative;
  background:#020202;
}

body.screen-site::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background-image:image-set(
    url("../../img/studio/hero-chess-studio-v2.webp") type("image/webp"),
    url("../../img/studio/hero-chess-studio-v2.png") type("image/png")
  );
  background-repeat:no-repeat;
  background-size:min(82rem, 74vw) auto;
  background-position:right 48%;
  filter:brightness(.78) contrast(1.12) saturate(.9);
  animation:screenPhotoDrift 18s ease-in-out infinite alternate;
}

body.screen-site::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 34%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.65) 100%),
    linear-gradient(180deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.12) 48%, rgba(0,0,0,.82) 100%);
}

.screen-site > *{
  position:relative;
  z-index:2;
}

.screen-site > .site-header{
  z-index:80;
}

.screen-site > .falling-pieces{
  position:fixed;
  inset:-14vh 0 0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint;
}

.falling-piece{
  position:absolute;
  top:-14vh;
  left:var(--left);
  color:rgba(241,19,29,.78);
  font-family:var(--serif);
  font-size:calc(var(--size) * 2.35);
  font-weight:700;
  line-height:1;
  opacity:0;
  text-shadow:0 0 1rem rgba(241,19,29,.18);
  transform:translate3d(0,-14vh,0) rotate(0deg);
  animation:pieceFall var(--duration) linear infinite;
  animation-delay:calc(var(--delay) * -1);
  will-change:transform, opacity;
}

.falling-piece:nth-child(3n){
  color:rgba(246,239,231,.28);
  text-shadow:0 0 .9rem rgba(246,239,231,.1);
}

.falling-piece:nth-child(4n){
  color:rgba(112,0,28,.58);
}

.screen-header{
  align-items:center;
  padding:1.35rem 0 0;
}

.screen-header .brand img{
  width:4.35rem;
  height:4.35rem;
  filter:drop-shadow(0 0 1.1rem rgba(241,19,29,.24));
}

.screen-header .brand strong{
  font-size:1.28rem;
}

.screen-header .brand em{
  color:var(--red);
  font-size:.64rem;
  letter-spacing:.08rem;
}

.screen-header .main-nav{
  gap:1.65rem;
}

.screen-header .main-nav a{
  font-size:.76rem;
}

.screen-main{
  width:min(var(--max), calc(100% - 2rem));
  min-height:0;
  margin:0 auto;
}

.home-main{
  display:grid;
  grid-template-columns:minmax(38rem, .74fr) minmax(30rem, 1fr);
  align-items:center;
  gap:clamp(2.4rem, 5vw, 5.8rem);
}

.home-copy{
  max-width:58rem;
}

.home-copy .eyebrow,
.screen-copy .eyebrow{
  margin-bottom:1.05rem;
}

.home-copy h1,
.screen-copy h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(3.45rem, 4.85vw, 5.25rem);
  line-height:.92;
  text-transform:uppercase;
}

.home-copy h1 span{
  display:block;
}

.screen-copy h1 strong{
  color:var(--red);
}

.home-copy h1 span:last-child{
  color:var(--red);
}

.home-lead,
.screen-copy p{
  max-width:42rem;
  margin:1.45rem 0 0;
  color:rgba(246,239,231,.68);
  font-family:var(--serif);
  font-size:clamp(1rem, 1.3vw, 1.22rem);
  line-height:1.55;
}

.home-lead::before{
  content:"";
  display:block;
  width:4.2rem;
  height:1px;
  margin:0 0 1.15rem;
  background:var(--red);
}

.home-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.35rem;
  margin-top:2rem;
}

.screen-site .btn--primary::after,
.screen-site .btn--line::after,
.screen-site .button::after,
.screen-site .store::after{
  content:">";
  font-size:.95rem;
}

.screen-site .text-link::after{
  content:" >";
  font-size:.95rem;
}

.home-products{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-self:start;
  justify-self:end;
  width:min(42rem, 100%);
  gap:.68rem;
  margin-top:clamp(7rem, 15vh, 9.5rem);
}

.route-card{
  position:relative;
  min-height:10.65rem;
  overflow:hidden;
  display:grid;
  align-content:end;
  border:1px solid rgba(246,239,231,.14);
  border-radius:8px;
  padding:1rem 1.05rem;
  background:
    radial-gradient(circle at 50% 16%, rgba(241,19,29,.18), transparent 8.5rem),
    linear-gradient(180deg, rgba(246,239,231,.055), rgba(246,239,231,.014)),
    rgba(12,10,10,.82);
  box-shadow:0 1rem 3rem rgba(0,0,0,.24);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.route-card:hover{
  transform:translateY(-3px);
  border-color:rgba(241,19,29,.48);
  background:
    radial-gradient(circle at 50% 16%, rgba(241,19,29,.23), transparent 8.5rem),
    linear-gradient(180deg, rgba(246,239,231,.065), rgba(246,239,231,.016)),
    rgba(12,10,10,.9);
}

.route-card__visual,
.route-card__letters{
  position:absolute;
  top:.7rem;
  left:50%;
  width:8.2rem;
  height:4.4rem;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
}

.route-card__visual img{
  width:5.9rem;
  max-height:4.4rem;
  object-fit:contain;
}

.route-card--cc .route-card__visual img{
  width:7.15rem;
}

.route-card__letters{
  color:rgba(241,19,29,.82);
  font-family:var(--serif);
  font-size:3.25rem;
  line-height:1;
  font-weight:700;
  text-shadow:.32rem .22rem 0 rgba(98,0,24,.78);
}

.route-card__body{
  display:grid;
  gap:.38rem;
}

.route-card strong{
  font-family:var(--serif);
  font-size:1.18rem;
  line-height:1.1;
}

.route-card em{
  color:var(--soft);
  font-size:.85rem;
  line-height:1.35;
  font-style:normal;
}

.route-card--hot{
  background:
    radial-gradient(circle at 50% 15%, rgba(241,19,29,.28), transparent 8.5rem),
    linear-gradient(180deg, rgba(98,0,24,.32), rgba(246,239,231,.014)),
    rgba(12,10,10,.88);
}

@media (min-width:1081px) and (min-height:741px){
  .page-home .home-products{
    position:fixed;
    z-index:2;
    top:clamp(7.4rem, 11.5vh, 9rem);
    right:max(1rem, calc((100vw - var(--max)) / 2));
    width:min(44rem, calc(100vw - 43rem));
    grid-template-columns:repeat(4, minmax(0, 1fr));
    align-self:auto;
    justify-self:auto;
    margin-top:0;
    gap:.55rem;
  }

  .page-home .route-card{
    min-height:7.5rem;
    padding:.85rem;
  }

  .page-home .route-card__visual,
  .page-home .route-card__letters{
    top:.52rem;
    width:4.4rem;
    height:2.7rem;
  }

  .page-home .route-card__visual img{
    width:3.6rem;
    max-height:2.7rem;
  }

  .page-home .route-card--cc .route-card__visual img{
    width:4.4rem;
  }

  .page-home .route-card__letters{
    font-size:2.25rem;
    text-shadow:.18rem .12rem 0 rgba(98,0,24,.78);
  }

  .page-home .route-card strong{
    font-size:1rem;
  }

  .page-home .route-card em{
    font-size:.72rem;
    line-height:1.25;
  }
}

.split-main{
  display:grid;
  grid-template-columns:minmax(24rem, .82fr) minmax(28rem, 1fr);
  align-items:center;
  gap:clamp(2.5rem, 6vw, 7rem);
}

.screen-copy{
  max-width:58rem;
}

.screen-copy h1{
  font-size:clamp(2.8rem, 4.1vw, 4.35rem);
}

.screen-copy--compact{
  max-width:74rem;
}

.screen-copy--compact h1{
  max-width:66rem;
  font-size:clamp(2.25rem, 3.25vw, 3.55rem);
  line-height:.96;
}

.catalog-screen{
  display:grid;
  align-content:center;
  gap:1.8rem;
}

.principle-grid,
.product-screen-grid{
  display:grid;
  gap:.8rem;
}

.principle-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.principle-grid article,
.product-screen-card,
.contact-panel,
.feedback-panel,
.phone-showcase{
  border:1px solid rgba(246,239,231,.14);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(246,239,231,.055), rgba(246,239,231,.014)),
    rgba(12,10,10,.82);
  box-shadow:0 1rem 3rem rgba(0,0,0,.22);
}

.principle-grid article{
  min-height:13rem;
  padding:1.3rem;
}

.principle-grid b{
  display:block;
  margin-bottom:1rem;
  color:var(--red);
  font-family:var(--serif);
  font-size:2.15rem;
  line-height:1;
}

.principle-grid h2,
.product-screen-card h2{
  margin:0;
  font-family:var(--serif);
  font-size:1.5rem;
  line-height:1.1;
}

.principle-grid p,
.product-screen-card p,
.phone-notes span{
  margin:.72rem 0 0;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.55;
}

.product-screen-grid--three{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.product-screen-grid--four{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.65rem;
}

.product-screen-grid--two{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.product-screen-card{
  min-height:20rem;
  display:grid;
  align-content:end;
  position:relative;
  overflow:hidden;
  padding:1.3rem;
}

.product-screen-card--external{
  color:inherit;
  cursor:pointer;
}

.product-screen-card--external:focus-visible{
  outline:2px solid rgba(241,19,29,.8);
  outline-offset:3px;
}

.product-screen-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 50% 18%, rgba(241,19,29,.16), transparent 9rem);
}

.product-screen-card__badge{
  position:absolute;
  top:.82rem;
  right:.82rem;
  z-index:3;
  min-width:4.7rem;
  height:1.55rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(241,19,29,.45);
  border-radius:999px;
  background:rgba(2,2,2,.66);
  color:rgba(246,239,231,.86);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  box-shadow:0 0 1.25rem rgba(241,19,29,.12);
}

.product-screen-card__icon,
.product-screen-card__letters{
  position:absolute;
  top:1.25rem;
  left:50%;
  width:9rem;
  height:7rem;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
}

.product-screen-card__icon img{
  width:7.4rem;
  max-height:7rem;
  object-fit:contain;
}

.product-screen-card__icon--wide{
  width:10.8rem;
}

.product-screen-card__icon--wide img{
  width:10.8rem;
  max-width:none;
}

.product-screen-card__icon--dive img{
  width:5.92rem;
}

.product-screen-card__icon--move img{
  width:6.4rem;
}

.product-screen-card--app{
  min-height:24rem;
  padding-top:12rem;
}

.product-screen-card__icon--nonchess{
  top:2.85rem;
  width:10rem;
  height:9rem;
}

.product-screen-card__icon--nonchess img{
  width:8.8rem;
  max-height:8.8rem;
  filter:drop-shadow(0 0 1.25rem rgba(241,19,29,.18));
}

.product-screen-card__icon--reading img{
  width:8.2rem;
}

.product-screen-grid--four .product-screen-card{
  min-height:18.6rem;
  padding:1.12rem;
}

.product-screen-grid--four .product-screen-card__icon,
.product-screen-grid--four .product-screen-card__letters{
  top:1rem;
  height:5.8rem;
}

.product-screen-grid--four .product-screen-card h2{
  font-size:1.34rem;
}

.product-screen-grid--four .product-screen-card p{
  font-size:.86rem;
  line-height:1.45;
}

.product-screen-card__letters{
  color:rgba(241,19,29,.84);
  font-family:var(--serif);
  font-size:3.5rem;
  line-height:1;
  font-weight:700;
}

.product-screen-card--media{
  min-height:25rem;
  align-content:end;
  padding-top:12.5rem;
}

.product-screen-card--media > img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:12.4rem;
  object-fit:cover;
  border-bottom:1px solid rgba(246,239,231,.12);
  filter:saturate(.85) contrast(1.06) brightness(.82);
}

.product-screen-card .text-link{
  margin-top:1rem;
}

.phone-showcase{
  display:grid;
  grid-template-columns:minmax(13rem, .7fr) minmax(18rem, 1fr);
  align-items:stretch;
  overflow:hidden;
}

.phone-showcase > img{
  width:100%;
  height:100%;
  min-height:26rem;
  object-fit:cover;
  filter:saturate(.88) contrast(1.08) brightness(.78);
}

.phone-notes{
  display:grid;
  align-content:center;
  gap:.85rem;
  padding:1.25rem;
}

.phone-notes article{
  border-left:1px solid rgba(241,19,29,.65);
  padding-left:1rem;
}

.phone-notes b{
  display:block;
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.2rem;
}

.phone-notes span{
  display:block;
}

.contact-panel{
  display:grid;
  padding:.6rem;
}

.feedback-panel{
  display:grid;
  gap:.95rem;
  padding:1.05rem;
}

.feedback-form{
  display:grid;
  gap:.7rem;
}

.feedback-form label{
  display:grid;
  gap:.35rem;
}

.feedback-form label span{
  color:var(--red);
  font-size:.72rem;
  font-weight:850;
  line-height:1;
  text-transform:uppercase;
}

.feedback-form input,
.feedback-form textarea{
  width:100%;
  border:1px solid rgba(246,239,231,.13);
  border-radius:6px;
  background:rgba(0,0,0,.36);
  color:var(--ink);
  padding:.78rem .85rem;
  font:inherit;
  font-size:.92rem;
  line-height:1.35;
  outline:0;
}

.feedback-form textarea{
  min-height:7.2rem;
  resize:vertical;
}

.feedback-form input::placeholder,
.feedback-form textarea::placeholder{
  color:rgba(246,239,231,.38);
}

.feedback-form input:focus,
.feedback-form textarea:focus{
  border-color:rgba(241,19,29,.72);
  box-shadow:0 0 0 1px rgba(241,19,29,.2);
}

.feedback-form button:disabled{
  cursor:progress;
  opacity:.72;
}

.feedback-status{
  min-height:1.15rem;
  margin:0;
  color:rgba(246,239,231,.58);
  font-size:.78rem;
  line-height:1.45;
}

.feedback-status--ok{
  color:#f6efe7;
}

.feedback-status--error{
  color:var(--red);
}

.contact-line{
  display:grid;
  gap:.35rem;
  border-bottom:1px solid rgba(246,239,231,.11);
  padding:1.35rem;
}

.contact-line:last-child{
  border-bottom:0;
}

.contact-line--compact{
  border:1px solid rgba(246,239,231,.1);
  border-radius:6px;
  background:rgba(246,239,231,.03);
  padding:1rem;
}

.contact-line span{
  color:var(--red);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
}

.contact-line strong{
  font-family:var(--serif);
  font-size:2rem;
  line-height:1.1;
}

.contact-line--compact strong{
  font-size:1.45rem;
}

.screen-footer{
  width:min(var(--max), calc(100% - 2rem));
  min-height:3.5rem;
  margin:0 auto;
  padding:0 0 .8rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid rgba(246,239,231,.12);
  color:var(--soft);
  font-size:.82rem;
}

.screen-footer a{
  color:var(--red);
  font-weight:800;
  text-transform:uppercase;
}

.footer-links{
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@keyframes screenPhotoDrift{
  from{ background-position:right 48%; }
  to{ background-position:calc(100% - .7rem) 48.4%; }
}

@media (max-width:1080px), (max-height:740px){
  body.screen-site{
    height:auto;
    min-height:100svh;
    overflow:auto;
  }

  .home-main,
  .split-main{
    grid-template-columns:1fr;
    align-content:start;
    padding:2rem 0;
  }

  .catalog-screen{
    align-content:start;
    padding:2rem 0;
  }

  .home-products{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:760px){
  body.screen-site::before{
    background-size:cover;
    background-position:64% center;
  }

  .falling-piece{
    font-size:calc(var(--size) * 1.75);
  }

  .screen-header{
    align-items:center;
  }

  .screen-header .brand img{
    width:3.6rem;
    height:3.6rem;
  }

  .home-copy h1,
  .screen-copy h1,
  .screen-copy--compact h1{
    font-size:3.25rem;
  }

  .home-products,
  .principle-grid,
  .product-screen-grid--three,
  .product-screen-grid--four,
  .product-screen-grid--two,
  .phone-showcase{
    grid-template-columns:1fr;
  }

  .route-card,
  .principle-grid article,
  .product-screen-card{
    min-height:12.5rem;
  }

  .product-screen-card--media{
    min-height:22rem;
  }

  .phone-showcase > img{
    min-height:15rem;
  }

  .screen-footer{
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
  }
}

@media (max-width:640px){
  html{
    background:#020202;
  }

  body.screen-site{
    min-height:100svh;
    height:auto;
    overflow:auto;
    grid-template-rows:auto auto auto;
  }

  body.screen-site::before{
    background-size:auto 82svh;
    background-position:72% 12%;
    filter:brightness(.66) contrast(1.1) saturate(.92);
  }

  body.screen-site::after{
    background:
      linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 27%, rgba(0,0,0,.86) 74%, #020202 100%),
      linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.68) 62%, rgba(0,0,0,.72) 100%);
  }

  .screen-site > .falling-pieces{
    opacity:.48;
  }

  .falling-piece{
    font-size:calc(var(--size) * 1.25);
  }

  .site-header,
  .screen-main,
  .screen-footer{
    width:calc(100vw - 1.05rem);
    max-width:var(--max);
  }

  .screen-header{
    min-height:4.35rem;
    padding:.55rem 0 0;
    align-items:center;
  }

  .screen-header .brand{
    min-width:0;
    gap:.62rem;
  }

  .screen-header .brand img{
    width:3rem;
    height:3rem;
  }

  .screen-header .brand strong{
    font-size:1rem;
    max-width:13rem;
    white-space:nowrap;
  }

  .nav-toggle{
    width:2.65rem;
    height:2.65rem;
    flex:0 0 auto;
    background:rgba(0,0,0,.58);
    box-shadow:0 .8rem 2rem rgba(0,0,0,.24);
  }

  .main-nav{
    top:4.15rem;
    left:0;
    right:0;
    z-index:40;
    grid-template-columns:1fr;
    align-content:start;
    justify-content:stretch;
    gap:.35rem;
    padding:.45rem;
    background:#040404;
    box-shadow:0 1.5rem 3rem rgba(0,0,0,.45);
  }

  body.nav-open .main-nav{
    display:grid;
  }

  .main-nav a{
    width:100%;
    min-height:2.42rem;
    display:flex;
    align-items:center;
    border-radius:6px;
    padding:0 .7rem;
    font-size:.76rem;
  }

  .main-nav a::after{
    display:none;
  }

  .main-nav a.active{
    background:rgba(241,19,29,.12);
  }

  .home-main,
  .split-main,
  .catalog-screen{
    min-height:calc(100svh - 8rem);
    padding:clamp(1.05rem, 4.5svh, 2.1rem) 0 1.25rem;
    gap:1.05rem;
  }

  .home-main{
    display:flex;
    align-items:center;
  }

  .home-copy,
  .screen-copy,
  .screen-copy--compact{
    max-width:100%;
    min-width:0;
  }

  .home-copy .eyebrow,
  .screen-copy .eyebrow{
    margin-bottom:.78rem;
    font-size:.72rem;
  }

  .home-copy h1{
    font-size:2.88rem;
    line-height:.92;
    max-width:100%;
    text-wrap:balance;
  }

  .screen-copy h1,
  .screen-copy--compact h1{
    font-size:2.42rem;
    line-height:.94;
    max-width:100%;
    text-wrap:balance;
  }

  .home-lead,
  .screen-copy p{
    max-width:21rem;
    margin-top:1.05rem;
    font-size:1rem;
    line-height:1.48;
  }

  .home-lead::before{
    width:3.35rem;
    margin-bottom:.95rem;
  }

  .home-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:.75rem;
    margin-top:1.35rem;
  }

  .btn,
  .button,
  .store{
    min-height:3.18rem;
    width:100%;
    padding:0 1rem;
    font-size:.76rem;
  }

  .btn--line{
    min-height:2.8rem;
    justify-content:flex-start;
    width:max-content;
    max-width:100%;
  }

  .catalog-screen{
    align-content:start;
  }

  .product-screen-grid,
  .product-screen-grid--two,
  .product-screen-grid--three,
  .product-screen-grid--four{
    grid-template-columns:1fr;
    gap:.62rem;
    min-width:0;
    width:100%;
  }

  .product-screen-card,
  .product-screen-grid--four .product-screen-card,
  .product-screen-card--app{
    min-height:7.9rem;
    align-content:center;
    padding:1rem 1rem 1rem 6.2rem;
  }

  .product-screen-card__badge{
    top:.58rem;
    right:.58rem;
    min-width:4.3rem;
    height:1.35rem;
    font-size:.55rem;
  }

  .product-screen-card__icon,
  .product-screen-card__letters,
  .product-screen-grid--four .product-screen-card__icon,
  .product-screen-grid--four .product-screen-card__letters,
  .product-screen-card__icon--nonchess{
    top:50%;
    left:1rem;
    width:4.25rem;
    height:4.25rem;
    transform:translateY(-50%);
  }

  .product-screen-card__icon img,
  .product-screen-card__icon--dive img,
  .product-screen-card__icon--move img,
  .product-screen-card__icon--nonchess img,
  .product-screen-card__icon--reading img{
    width:3.72rem;
    max-width:100%;
    max-height:3.72rem;
  }

  .product-screen-card__icon--wide,
  .product-screen-card__icon--wide img{
    width:4.65rem;
  }

  .product-screen-card__letters{
    font-size:2.25rem;
  }

  .product-screen-card h2,
  .product-screen-grid--four .product-screen-card h2{
    padding-right:4.8rem;
    font-size:1.22rem;
  }

  .product-screen-card p,
  .product-screen-grid--four .product-screen-card p{
    display:-webkit-box;
    margin-top:.42rem;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    font-size:.82rem;
    line-height:1.36;
  }

  .product-screen-card .text-link{
    margin-top:.58rem;
    font-size:.72rem;
  }

  .feedback-panel{
    gap:.75rem;
    padding:.78rem;
  }

  .feedback-form{
    gap:.58rem;
  }

  .feedback-form input,
  .feedback-form textarea{
    padding:.72rem .78rem;
    font-size:.9rem;
  }

  .feedback-form textarea{
    min-height:6.1rem;
  }

  .contact-line--compact{
    padding:.78rem;
  }

  .contact-line--compact strong{
    font-size:1.12rem;
    overflow-wrap:anywhere;
  }

  .screen-footer{
    min-height:auto;
    padding:.8rem 0 max(.75rem, env(safe-area-inset-bottom));
    gap:.45rem;
    font-size:.75rem;
  }

  .footer-links{
    gap:.75rem;
    justify-content:flex-start;
  }
}

@media (max-width:380px){
  .screen-header .brand img{
    width:2.72rem;
    height:2.72rem;
  }

  .screen-header .brand strong{
    font-size:.9rem;
  }

  .home-copy h1{
    font-size:2.58rem;
  }

  .screen-copy h1,
  .screen-copy--compact h1{
    font-size:2.12rem;
  }

  .product-screen-card,
  .product-screen-grid--four .product-screen-card,
  .product-screen-card--app{
    padding-left:5.55rem;
  }

  .product-screen-card__icon,
  .product-screen-card__letters,
  .product-screen-grid--four .product-screen-card__icon,
  .product-screen-grid--four .product-screen-card__letters,
  .product-screen-card__icon--nonchess{
    left:.82rem;
    width:3.85rem;
    height:3.85rem;
  }
}