:root{--bg:#08090a;--panel:#101214;--panel2:#151719;--text:#f6f3eb;--muted:#aba79f;--gold:#d7ad3f;--gold2:#f3d16b;--mint:#54e67c;--blue:#72a9ef;--line:rgba(255,255,255,.10);--max:1180px}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 77% 6%,rgba(215,173,63,.08),transparent 28rem),radial-gradient(circle at 18% 42%,rgba(215,173,63,.035),transparent 24rem),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.site-header{height:82px;padding:0 max(22px,calc((100vw - var(--max))/2));display:flex;align-items:center;gap:34px;position:sticky;top:0;z-index:20;background:rgba(8,9,10,.86);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.brand img{width:52px;height:52px;border-radius:14px}.brand span{display:flex;flex-direction:column;line-height:1}.brand small{letter-spacing:.30em;font-family:Georgia,serif;font-size:10px}.brand strong{font-family:Georgia,serif;color:var(--gold2);font-size:20px;letter-spacing:.05em}
nav{display:flex;gap:27px;color:var(--muted);font-size:14px}nav a:hover{color:var(--gold2)}
.nav-cta,.cta-button{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#090a0a;font-weight:800;border-radius:10px;padding:11px 17px}
.hero{max-width:var(--max);margin:auto;min-height:720px;padding:90px 24px 70px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:50px}
.eyebrow{font:800 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:var(--gold2)}.eyebrow.mint{color:var(--mint)}.eyebrow.blue{color:var(--blue)}.eyebrow.gold{color:var(--gold2)}
h1{font-size:clamp(52px,7vw,92px);line-height:.96;letter-spacing:-.05em;margin:18px 0 26px}h1 span{font-family:Georgia,serif;font-weight:400;color:var(--gold2)}
.hero-lead,.section-lead{font-size:19px;color:var(--muted);max-width:650px}
.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.store-button{min-width:190px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:11px;padding:10px 15px;background:#111315}.store-button.primary{border-color:rgba(215,173,63,.45)}.store-button small{display:block;font-size:9px;letter-spacing:.08em;color:var(--muted)}.store-button strong{font-size:18px}.store-icon{font-size:30px}.play-icon{font-size:21px;color:var(--mint)}
.availability{font-size:12px;color:#777;margin-top:12px}.hero-visual{position:relative;min-height:570px;display:grid;place-items:center}.hero-visual>img{width:min(510px,90%);position:relative;z-index:2;filter:drop-shadow(0 24px 45px rgba(0,0,0,.65))}.crest-glow{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:rgba(215,173,63,.13);filter:blur(70px)}
.rating-chip{position:absolute;right:0;bottom:55px;z-index:3;background:rgba(16,18,20,.92);border:1px solid rgba(215,173,63,.3);border-radius:14px;padding:12px 16px;min-width:190px}.rating-chip span,.rating-chip small{display:block;color:var(--muted);font-size:9px;letter-spacing:.12em}.rating-chip strong{display:block;color:var(--gold2);font:800 28px ui-monospace,monospace;margin:2px 0}
.proof-strip{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#0d0f10;border-radius:16px;overflow:hidden}.proof-strip div{padding:26px;text-align:center;border-right:1px solid var(--line)}.proof-strip div:last-child{border-right:0}.proof-strip strong{display:block;font-size:25px;color:var(--gold2)}.proof-strip span{color:var(--muted);font-size:12px}
.section{max-width:850px;margin:140px auto 70px;text-align:center;padding:0 24px}h2{font-size:clamp(35px,5vw,58px);line-height:1.05;letter-spacing:-.035em;margin:12px 0 20px}
.feature-section{max-width:var(--max);margin:80px auto;padding:70px 24px;display:grid;grid-template-columns:70px 1fr 1fr;gap:42px;align-items:center;border-top:1px solid var(--line)}.feature-section.reverse .feature-copy{order:3}.feature-section.reverse .feature-demo{order:2}.feature-number{font:700 16px ui-monospace,monospace;color:#4f5051;align-self:start;padding-top:10px}
.feature-copy p:not(.eyebrow){font-size:18px;color:var(--muted)}.feature-copy ul{padding:0;margin:25px 0 0;list-style:none}.feature-copy li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);color:#ddd}.feature-copy li:before{content:"✓";color:var(--gold2);font-weight:900;margin-right:10px}
.feature-demo{border:1px solid var(--line);background:linear-gradient(145deg,#17191a,#0e1011);border-radius:18px;padding:24px;box-shadow:0 30px 70px rgba(0,0,0,.30)}.demo-label{font:800 10px ui-monospace,monospace;letter-spacing:.15em;color:var(--gold2);margin-bottom:15px}.demo-label.mint{color:var(--mint)}
.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border-radius:8px;overflow:hidden}.board div{background:#566171}.board div:nth-child(16n+1),.board div:nth-child(16n+3),.board div:nth-child(16n+5),.board div:nth-child(16n+7),.board div:nth-child(16n+10),.board div:nth-child(16n+12),.board div:nth-child(16n+14),.board div:nth-child(16n+16){background:#e8e3d8}
.demo-prompt{text-align:center;padding:15px 0 2px}.demo-prompt small{display:block;color:var(--muted);font:700 9px ui-monospace,monospace;letter-spacing:.15em}.demo-prompt strong{font:900 38px ui-monospace,monospace;color:var(--gold2)}
.clock-row{display:flex;justify-content:space-between;align-items:end}.clock-row strong{font:900 40px ui-monospace,monospace;color:var(--mint)}.clock-row span{font:700 10px ui-monospace,monospace;color:var(--muted)}
.clock-track{height:13px;background:#292d2f;border-radius:20px;overflow:hidden;margin:14px 0 22px}.clock-fill{height:100%;width:72%;background:linear-gradient(90deg,var(--mint),#a8ffbd);border-radius:20px}
.rapid-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rapid-stats div{background:#0c0e0f;border-radius:10px;padding:12px;text-align:center}.rapid-stats small{display:block;color:var(--muted);font:700 8px ui-monospace,monospace}.rapid-stats strong{font:800 18px ui-monospace,monospace}
.difficulty{display:flex;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--line)}.difficulty span{font:700 10px ui-monospace,monospace;color:var(--muted)}.difficulty strong{color:var(--gold2);font:800 13px ui-monospace,monospace}
.tactical-line{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.tactical-line div{background:#0c0e0f;padding:15px 10px;border-radius:10px;text-align:center}.tactical-line .active{outline:1px solid var(--gold)}.tactical-line b{display:grid;place-items:center;margin:auto;width:28px;height:28px;border-radius:50%;background:#2b2e30;color:#aaa}.tactical-line .active b{background:var(--gold2);color:#111}.tactical-line span,.tactical-line strong{display:block}.tactical-line span{font:700 8px ui-monospace,monospace;color:var(--muted);margin:8px 0 3px}.puzzle-demo p{font-size:13px;color:var(--muted)}
.vision-rating{max-width:var(--max);margin:120px auto;padding:70px;border-radius:22px;border:1px solid rgba(215,173,63,.28);background:linear-gradient(130deg,rgba(215,173,63,.07),rgba(255,255,255,.015));display:grid;grid-template-columns:1fr 1fr;gap:70px}.vision-rating p:not(.eyebrow){color:var(--muted);font-size:17px}.rating-scale div{display:flex;justify-content:space-between;padding:11px 15px;border-bottom:1px solid var(--line);color:var(--muted)}.rating-scale .highlight{background:rgba(215,173,63,.10);color:var(--gold2);border-radius:8px}
.cta{max-width:var(--max);margin:80px auto;padding:40px;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:35px;background:#101214;border:1px solid var(--line);border-radius:20px}.cta img{width:150px;border-radius:18px}.cta h2{font-size:38px}.cta p{color:var(--muted)}
footer{max-width:var(--max);margin:80px auto 0;padding:35px 24px 50px;border-top:1px solid var(--line);display:flex;gap:30px;align-items:center;color:#777;font-size:12px}.footer-brand{display:flex;align-items:center;gap:9px;color:#aaa;font-weight:800;letter-spacing:.12em}.footer-brand img{width:32px;height:32px;border-radius:8px}.footer-links{display:flex;gap:18px;margin-left:auto}.footer-links a:hover{color:var(--gold2)}
.legal{max-width:820px;margin:70px auto;padding:0 24px 100px}.legal h1{font-size:58px}.legal h2{font-size:27px;margin-top:38px}.legal p{color:var(--muted);font-size:17px}.legal a{color:var(--gold2)}
@media(max-width:850px){.site-header nav{display:none}.nav-cta{display:none}.hero{grid-template-columns:1fr;padding-top:65px}.hero-visual{min-height:440px}.proof-strip{grid-template-columns:1fr 1fr;margin:0 16px}.proof-strip div:nth-child(2){border-right:0}.feature-section,.feature-section.reverse{grid-template-columns:1fr;padding:55px 20px;gap:24px}.feature-number{display:none}.feature-section.reverse .feature-copy,.feature-section.reverse .feature-demo{order:initial}.vision-rating{grid-template-columns:1fr;margin:70px 16px;padding:35px 22px;gap:30px}.cta{margin:50px 16px;grid-template-columns:80px 1fr}.cta img{width:80px}.cta-button{grid-column:1/-1;text-align:center}}
@media(max-width:560px){.site-header{height:70px;padding:0 15px}.brand img{width:44px;height:44px}.brand strong{font-size:17px}.hero{padding:45px 18px 50px;gap:15px;min-height:auto}.hero h1{font-size:52px}.hero-lead{font-size:17px}.hero-visual{min-height:390px}.rating-chip{bottom:25px;right:8px}.proof-strip{grid-template-columns:1fr 1fr}.proof-strip div{padding:18px 8px}.section{margin-top:85px}.feature-section{margin:30px auto}.cta{grid-template-columns:1fr;text-align:center}.cta img{margin:auto}.cta-button{grid-column:auto}footer{flex-direction:column;align-items:flex-start}.footer-links{margin-left:0}}
/* Pass 2 — real app screenshots and launch polish */
.device-showcase{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  min-width:0;
}
.phone-shell{
  position:relative;
  width:min(330px, 86vw);
  padding:10px;
  border-radius:48px;
  background:linear-gradient(145deg,#303235,#0a0b0c 42%,#26282a);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 38px 80px rgba(0,0,0,.52),
    0 0 0 1px rgba(215,173,63,.10),
    inset 0 0 0 2px rgba(255,255,255,.025);
}
.phone-shell::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:43px;
  border:1px solid rgba(215,173,63,.15);
  pointer-events:none;
  z-index:2;
}
.phone-shell img{
  width:100%;
  aspect-ratio: .505 / 1;
  object-fit:cover;
  object-position:center top;
  border-radius:39px;
  background:#000;
}
.phone-speaker{
  position:absolute;
  top:17px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  width:74px;
  height:18px;
  border-radius:20px;
  background:rgba(0,0,0,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.05);
}
.screen-caption{
  text-align:center;
  max-width:330px;
}
.screen-caption span{
  display:block;
  color:var(--gold2);
  font:800 10px ui-monospace,monospace;
  letter-spacing:.16em;
  margin-bottom:4px;
}
.screen-caption strong{
  color:#d9d5cc;
  font-size:14px;
  font-weight:650;
}
.mint-caption span{color:var(--mint)}
.blue-caption span{color:var(--blue)}

.sr-only{
  position:absolute;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media(max-width:850px){
}
@media(max-width:560px){
  .phone-shell{width:min(300px,82vw);border-radius:42px}
  .phone-shell img{border-radius:34px}
}


/* Pass 3 — realistic device presentation */
.phone-shell{
  width:min(350px,86vw);
  padding:7px;
  border-radius:55px;
  background:
    linear-gradient(115deg,#8b8c8d 0%,#252628 9%,#08090a 25%,#151617 73%,#77797a 94%,#202123 100%);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:
    0 44px 95px rgba(0,0,0,.62),
    0 14px 28px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 0 0 3px rgba(0,0,0,.78);
  overflow:visible;
}
.phone-shell::before{
  inset:6px;
  border-radius:49px;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.65);
}
.phone-shell::after{
  content:"";
  position:absolute;
  right:-4px;
  top:188px;
  width:4px;
  height:90px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(#5b5d5e,#161718,#4c4e4f);
  box-shadow:0 1px 2px rgba(0,0,0,.8);
}
.phone-shell img{
  display:block;
  width:100%;
  aspect-ratio:9/19.5;
  object-fit:cover;
  object-position:center top;
  border-radius:48px;
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.dynamic-island{
  position:absolute;
  z-index:5;
  top:17px;
  left:50%;
  transform:translateX(-50%);
  width:92px;
  height:27px;
  border-radius:18px;
  background:#000;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 1px 2px rgba(0,0,0,.7);
}
.dynamic-island::after{
  content:"";
  position:absolute;
  right:10px;
  top:9px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#071018;
  box-shadow:inset 0 0 2px rgba(50,90,120,.5);
}
.device-showcase{
  perspective:1200px;
}
.feature:nth-of-type(even) .phone-shell{
  transform:rotateY(-2deg) rotateX(.6deg);
}
.feature:nth-of-type(odd) .phone-shell{
  transform:rotateY(2deg) rotateX(.6deg);
}
.phone-shell:hover{
  transform:translateY(-4px) rotateY(0deg) !important;
  transition:transform .35s ease;
}
@media(max-width:560px){
  .phone-shell{
    width:min(315px,84vw);
    border-radius:49px;
    padding:6px;
  }
  .phone-shell img{border-radius:43px}
  .dynamic-island{top:15px;width:84px;height:25px}
}


/* Pass 4 — clean gameplay presentation, no phone mockups */
.gameplay-shot{
  position:relative;
  width:min(430px,92vw);
  margin-inline:auto;
  padding:0;
  border-radius:22px;
  overflow:hidden;
  background:#090a0a;
  border:1px solid rgba(232,190,76,.24);
  box-shadow:
    0 34px 75px rgba(0,0,0,.48),
    0 10px 24px rgba(0,0,0,.30);
  transform:none !important;
}
.gameplay-shot::before,
.gameplay-shot::after{
  display:none !important;
  content:none !important;
}
.gameplay-shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:9/19.5;
  object-fit:cover;
  object-position:center top;
  border-radius:0;
  background:#000;
  box-shadow:none;
}
.device-showcase{
  perspective:none !important;
}
.feature:nth-of-type(even) .gameplay-shot,
.feature:nth-of-type(odd) .gameplay-shot,
.gameplay-shot:hover{
  transform:none !important;
}
.gameplay-shot:hover{
  border-color:rgba(232,190,76,.42);
  box-shadow:
    0 38px 80px rgba(0,0,0,.52),
    0 0 0 1px rgba(232,190,76,.08);
}
@media(max-width:560px){
  .gameplay-shot{
    width:min(390px,94vw);
    border-radius:18px;
  }
}


/* Pass 5 — source-rendered app UI, derived directly from the Swift design system */
.source-ui-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  min-width:0;
}
.source-ui{
  --app-bg:#121416;
  --surface:#1A1C1E;
  --surface-high:#282A2C;
  --surface-highest:#333537;
  --app-text:#E2E2E5;
  --app-muted:#D0C5AF;
  --app-outline:#4D4635;
  --app-gold:#F2CA50;
  --app-mint:#4AE183;
  width:min(440px,94vw);
  padding:18px;
  border-radius:18px;
  background:var(--app-bg);
  color:var(--app-text);
  border:1px solid rgba(242,202,80,.24);
  box-shadow:0 34px 78px rgba(0,0,0,.46);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.source-ui *{box-sizing:border-box}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.gold-text{color:var(--app-gold)!important}
.mint-text{color:var(--app-mint)!important}

.ui-topline,.ui-title-row,.clock-head,.clock-foot,.puzzle-progress{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ui-topline{margin-bottom:12px}
.ui-kicker,.ui-level{
  font:800 10px ui-monospace,monospace;
  letter-spacing:.14em;
}
.ui-kicker{color:var(--app-gold)}
.ui-level{color:var(--app-muted)}

.ui-title-row{justify-content:flex-start;gap:10px;margin-bottom:13px}
.ui-title-row>div{display:flex;flex-direction:column;gap:1px}
.ui-title-row strong{font-size:20px;line-height:1.1}
.ui-title-row small{font-size:10px;font-weight:800;letter-spacing:.12em}
.rapid-bolt{font-size:31px;font-weight:900;color:var(--app-mint);line-height:1}
.puzzle-icon{
  display:grid;place-items:center;width:38px;height:38px;border-radius:9px;
  background:rgba(242,202,80,.10);color:var(--app-gold);font-size:24px
}

.ui-segment{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  padding:3px;
  margin:0 auto 12px;
  width:76%;
  background:#202224;
  border-radius:10px;
  color:#aaa;
  font-size:12px;
  font-weight:700;
}
.ui-segment span{padding:7px 8px;text-align:center;border-radius:7px}
.ui-segment .active{background:#d8d8d4;color:#161718}

.ui-card{
  background:var(--surface);
  border:1px solid rgba(77,70,53,.68);
  border-radius:8px;
  padding:13px;
  margin-bottom:11px;
}
.ui-copy-card strong{display:block;font-size:18px;margin-bottom:3px}
.ui-copy-card p{margin:0;color:var(--app-muted);font-size:12px;line-height:1.45}

.ui-prompt-card{
  text-align:center;
  background:var(--surface-high);
  padding:12px;
}
.ui-prompt-card small,.clock-head small,.clock-foot small,.metric-row small,
.puzzle-progress small,.puzzle-prompt small,.tactical-line-clean>small,
.ui-footer-metrics small{
  display:block;
  color:var(--app-muted);
  font:800 9px ui-monospace,monospace;
  letter-spacing:.10em;
}
.ui-prompt-card b{
  display:block;
  font:900 40px ui-monospace,monospace;
  color:var(--app-gold);
  line-height:1.1;
  margin-top:2px;
}

.ui-board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.09);
  margin:0 auto 11px;
}
.ui-board .sq{width:100%;height:100%}
.slate-board .sq.light{background:#E7E5DE}
.slate-board .sq.dark{background:#4A5568}
.tournament-board .sq.light{background:#EEEED2}
.tournament-board .sq.dark{background:#769656}

.target-marker{
  z-index:4;
  margin:5px;
  border:3px solid #050505;
  outline:4px solid rgba(255,255,255,.90);
  outline-offset:-1px;
  background:rgba(0,0,0,.28);
  display:grid;
  place-items:center;
}
.target-marker::after{
  content:"+";
  color:#050505;
  font-size:28px;
  font-weight:900;
  line-height:1;
  text-shadow:0 0 2px #fff;
}

.ui-footer-metrics,.metric-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.ui-footer-metrics{
  padding:12px 2px 1px;
}
.ui-footer-metrics div,.metric-row div{text-align:center}
.ui-footer-metrics b,.metric-row b{display:block;font-size:22px;margin-top:2px}
.metric-row{grid-template-columns:repeat(3,1fr);padding:11px}
.metric-row div+div{border-left:1px solid rgba(77,70,53,.55)}
.metric-row b{font:900 17px ui-monospace,monospace}

.rapid-clock{padding:13px}
.clock-head b{font-size:19px}
.clock-rail{
  height:11px;border-radius:999px;background:var(--surface-highest);
  overflow:hidden;margin:10px 0;
}
.clock-rail i{
  display:block;height:100%;border-radius:inherit;
  background:var(--app-mint);
  box-shadow:0 0 12px rgba(74,225,131,.28);
}
.clock-foot span{display:flex;flex-direction:column;gap:1px}
.clock-foot span:last-child{text-align:right}
.clock-foot b{font:800 15px ui-monospace,monospace}

.puzzle-progress{gap:20px}
.puzzle-progress span{display:flex;flex-direction:column;gap:2px}
.puzzle-progress span:last-child{text-align:right;margin-left:auto}
.puzzle-progress b{font:800 17px ui-monospace,monospace}

.puzzle-prompt{text-align:center;background:var(--surface-high)}
.puzzle-prompt strong{display:block;color:var(--app-gold);font-size:17px;margin:3px 0}
.puzzle-prompt span{color:var(--app-muted);font-size:11px}

.puzzle-board .piece{
  position:absolute;
  z-index:5;
  width:12.5%;
  height:12.5%;
  object-fit:contain;
  padding:1.2%;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
  pointer-events:none;
}

.tactical-line-clean{margin-bottom:0}
.line-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}
.line-steps>span{
  padding:9px 6px;background:#111315;border-radius:7px;text-align:center;
}
.line-steps .current{outline:1px solid var(--app-gold)}
.line-steps i{
  display:grid;place-items:center;width:24px;height:24px;margin:0 auto 5px;
  border-radius:50%;background:var(--surface-highest);
  color:var(--app-muted);font-style:normal;font-size:11px;font-weight:800;
}
.line-steps .current i{background:var(--app-gold);color:#101112}
.line-steps b,.line-steps em{display:block}
.line-steps b{font:800 7px ui-monospace,monospace;color:var(--app-muted)}
.line-steps em{font-style:normal;font-weight:800;margin-top:3px}

@media(max-width:560px){
  .source-ui{width:min(420px,96vw);padding:14px}
  .ui-title-row strong{font-size:18px}
  .ui-segment{width:84%}
}


/* Pass 6 — visualization-first product story */
.notation-story{
  max-width:var(--max);
  margin:90px auto 40px;
  padding:72px 24px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:54px;
  align-items:start;
}
.notation-copy h2{font-size:clamp(38px,5vw,58px)}
.notation-copy p{
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}
.notation-compare{
  display:grid;
  gap:14px;
}
.notation-card{
  padding:22px;
  border-radius:16px;
  background:linear-gradient(145deg,#151719,#0e1011);
  border:1px solid var(--line);
  box-shadow:0 24px 55px rgba(0,0,0,.24);
}
.notation-card.after{
  border-color:rgba(215,173,63,.36);
  background:
    radial-gradient(circle at 90% 10%,rgba(215,173,63,.09),transparent 16rem),
    linear-gradient(145deg,#171817,#0e1011);
}
.compare-label{
  display:block;
  font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
  color:#777;
  margin-bottom:10px;
}
.notation-card.after .compare-label{color:var(--gold2)}
.notation-card code{
  display:block;
  padding:14px 16px;
  border-radius:10px;
  background:#08090a;
  color:#f0ede4;
  font:800 18px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.02em;
  margin-bottom:16px;
}
.compare-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}
.compare-flow b{
  padding:7px 9px;
  border-radius:8px;
  background:#202224;
  color:#d4d0c8;
  font-size:11px;
  font-weight:700;
}
.notation-card.after .compare-flow b{
  background:rgba(215,173,63,.10);
  color:#f0d775;
}
.compare-flow i{
  color:#666;
  font-style:normal;
}
.notation-card p{
  margin:16px 0 0;
  color:var(--muted);
  font-size:13px;
}
.foundation-callout{
  max-width:var(--max);
  margin:15px auto 80px;
  padding:36px 42px;
  border:1px solid rgba(215,173,63,.22);
  border-radius:18px;
  background:linear-gradient(120deg,rgba(215,173,63,.055),rgba(255,255,255,.01));
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:45px;
  align-items:center;
}
.foundation-callout h2{
  font-size:34px;
  margin:8px 0 0;
}
.foundation-callout>p{
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  margin:0;
}

@media(max-width:850px){
  .notation-story{
    grid-template-columns:1fr;
    gap:30px;
    margin:60px 16px 20px;
    padding:50px 6px;
  }
  .foundation-callout{
    margin:20px 16px 55px;
    padding:28px 22px;
    grid-template-columns:1fr;
    gap:16px;
  }
}
@media(max-width:560px){
  .notation-card{padding:17px}
  .notation-card code{font-size:15px}
  .compare-flow{gap:5px}
  .compare-flow b{font-size:10px;padding:6px 7px}
}


/* Pass 7 — hands-free voice differentiator */
.voice-differentiator{
  max-width:var(--max);
  margin:80px auto 100px;
  padding:54px;
  border-radius:22px;
  border:1px solid rgba(215,173,63,.30);
  background:
    radial-gradient(circle at 78% 15%,rgba(242,202,80,.10),transparent 25rem),
    linear-gradient(145deg,#151716,#0b0d0e 65%);
  box-shadow:0 32px 80px rgba(0,0,0,.25);
}
.voice-copy{
  max-width:780px;
}
.voice-copy h2{
  font-size:clamp(42px,6vw,66px);
  margin-bottom:14px;
}
.voice-copy p{
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}
.voice-copy .voice-lead{
  color:#eee9df;
  font-size:20px;
  line-height:1.5;
}
.voice-loop{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin:38px 0 24px;
}
.voice-step{
  min-height:150px;
  padding:18px;
  border-radius:14px;
  background:#111315;
  border:1px solid var(--line);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.voice-step>span{
  position:absolute;
  top:11px;
  right:12px;
  color:#555;
  font:800 9px ui-monospace,monospace;
}
.voice-step>i{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#202326;
  color:#ddd;
  font-style:normal;
  font-size:21px;
}
.voice-step small{
  display:block;
  color:#777;
  font:800 9px ui-monospace,monospace;
  letter-spacing:.14em;
  margin-bottom:4px;
}
.voice-step b{
  display:block;
  color:#e8e5de;
  font-size:13px;
}
.voice-step.voice-active{
  border-color:rgba(242,202,80,.52);
  background:linear-gradient(145deg,rgba(242,202,80,.10),#121415);
  box-shadow:0 0 30px rgba(242,202,80,.06);
}
.voice-step.voice-active>i{
  background:var(--gold2);
  color:#0b0c0d;
}
.voice-step.voice-active small{color:var(--gold2)}
.voice-arrow{
  color:#665b3a;
  font-size:18px;
}
.voice-examples{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.voice-examples>div{
  padding:17px 18px;
  border-radius:12px;
  background:#090b0c;
  border:1px solid rgba(255,255,255,.07);
}
.voice-examples small{
  display:block;
  color:#777;
  font:800 8px ui-monospace,monospace;
  letter-spacing:.13em;
  margin-bottom:5px;
}
.voice-examples strong{
  color:var(--gold2);
  font-size:18px;
}
.voice-footnote{
  color:#8f8b83;
  font-size:13px;
  line-height:1.6;
  margin:18px 0 0;
}

@media(max-width:850px){
  .voice-differentiator{
    margin:55px 16px 70px;
    padding:34px 24px;
  }
  .voice-loop{
    grid-template-columns:1fr 1fr;
  }
  .voice-arrow{display:none}
  .voice-examples{grid-template-columns:1fr}
}
@media(max-width:520px){
  .voice-loop{grid-template-columns:1fr}
  .voice-step{min-height:120px}
  .voice-copy .voice-lead{font-size:18px}
}


/* Pass 8 — full 8x8 training-board integrity fix
   Ensures the source-rendered board always contains 64 equal visible cells. */
.training-board,
.chess-board,
.chessboard,
.board-grid,
.mini-board {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

.training-board > *,
.chess-board > *,
.chessboard > *,
.board-grid > *,
.mini-board > * {
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  visibility: visible !important;
}

/* Keep the selected target as an overlay/outline instead of changing
   the geometry or replacing the underlying square. */
.training-board .target,
.chess-board .target,
.chessboard .target,
.board-grid .target,
.mini-board .target,
.training-board .selected,
.chess-board .selected,
.chessboard .selected,
.board-grid .selected,
.mini-board .selected {
  position: relative !important;
  z-index: 1 !important;
}

/* Defensive fix for any board cells previously hidden by nth-child rules. */
.training-board > :nth-child(n),
.chess-board > :nth-child(n),
.chessboard > :nth-child(n),
.board-grid > :nth-child(n),
.mini-board > :nth-child(n) {
  opacity: 1 !important;
  visibility: visible !important;
}


/* Training preview fallback for generic .board markup */
.training-preview .board,
.feature-visual .board,
.app-preview .board {
  display:grid !important;
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  grid-template-rows:repeat(8,minmax(0,1fr)) !important;
  aspect-ratio:1/1 !important;
  overflow:hidden !important;
}
.training-preview .board > *,
.feature-visual .board > *,
.app-preview .board > * {
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  visibility:visible !important;
  opacity:1 !important;
}


/* Pass 9 — move the voice differentiator directly beneath the hero */
.hero + .voice-differentiator {
  margin-top: 34px;
  margin-bottom: 72px;
}

@media (max-width: 850px) {
  .hero + .voice-differentiator {
    margin-top: 22px;
    margin-bottom: 54px;
  }
}


/* Pass 10 — immutable 64-square board system
   Each .ui-board contains exactly 64 .sq children in HTML.
   Pieces and target markers are absolute overlays and never participate in grid flow. */
.ui-board{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  grid-template-rows:repeat(8,minmax(0,1fr)) !important;
  width:100% !important;
  aspect-ratio:1/1 !important;
  overflow:hidden !important;
  isolation:isolate;
}

.ui-board > .sq{
  position:relative !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  box-sizing:border-box !important;
}

/* Critical: overlays are removed from CSS Grid layout entirely. */
.ui-board > .target-marker,
.ui-board > .piece{
  position:absolute !important;
  width:12.5% !important;
  height:12.5% !important;
  z-index:5 !important;
  box-sizing:border-box !important;
}

/* Target fills its exact square without altering any underlying cell. */
.ui-board > .target-marker{
  margin:0 !important;
  border:3px solid #050505 !important;
  outline:3px solid rgba(255,255,255,.94) !important;
  outline-offset:-3px !important;
  background:rgba(0,0,0,.30) !important;
  display:grid !important;
  place-items:center !important;
  pointer-events:none !important;
}
.ui-board > .target-marker::after{
  content:"+" !important;
  color:#050505 !important;
  font-size:26px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-shadow:0 0 2px #fff !important;
}

/* Pieces are centered within the exact square coordinates set by JS. */
.ui-board > .piece{
  object-fit:contain !important;
  padding:.7% !important;
  transform:none !important;
  pointer-events:none !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
}

/* Explicit 8x8 validation styling: no child square can create a ninth row. */
.ui-board > .sq:nth-of-type(n+65){
  display:none !important;
}


/* Pass 11 — Visualization ELO */
.visualization-elo{
  grid-template-columns:1fr 1.08fr;
  align-items:start;
}
.rating-copy strong{color:#f2ca50}
.elo-formula{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:26px 0 20px;
}
.elo-formula span{
  padding:8px 10px;
  border-radius:8px;
  background:#111315;
  border:1px solid rgba(255,255,255,.08);
  color:#d6d2ca;
  font:800 9px ui-monospace,monospace;
  letter-spacing:.08em;
}
.elo-formula i{
  color:#777;
  font-style:normal;
  font-weight:900;
}
.elo-formula b{
  color:#d7ad3f;
  margin:0 2px;
}
.elo-formula strong{
  font:900 11px ui-monospace,monospace;
  letter-spacing:.07em;
}
.rating-note{
  font-size:12px!important;
  color:#777!important;
  border-left:2px solid rgba(215,173,63,.35);
  padding-left:12px;
}
.elo-ladder{
  overflow:hidden;
  border-radius:14px;
  background:#0d0f10;
  border:1px solid rgba(255,255,255,.09);
}
.elo-ladder-head{
  display:grid;
  grid-template-columns:1fr auto;
  padding:12px 15px;
  background:#17191a;
  color:#777;
  font:800 8px ui-monospace,monospace;
  letter-spacing:.12em;
}
.elo-tier{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 14px;
  padding:13px 15px;
  border-top:1px solid rgba(255,255,255,.06);
}
.elo-tier b{font-size:15px}
.elo-tier>span{
  color:#d7ad3f;
  font:900 14px ui-monospace,monospace;
}
.elo-tier small{
  grid-column:1/-1;
  color:#777;
  font-size:10px;
}
.elo-tier.master{
  background:rgba(215,173,63,.045);
}
.elo-tier.grandmaster{
  background:linear-gradient(90deg,rgba(215,173,63,.14),rgba(215,173,63,.035));
  border-top-color:rgba(215,173,63,.30);
}
.elo-tier.grandmaster b,.elo-tier.grandmaster>span{color:#f3d16b}

@media(max-width:850px){
  .visualization-elo{grid-template-columns:1fr}
}


/* Pass 12 — Visualization ELO co-located with Rapid Challenge */
#rapid{
  margin-bottom:0;
  padding-bottom:52px;
}
.rapid-elo-bridge{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
  text-align:center;
  position:relative;
}
.rapid-elo-bridge::before{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(215,173,63,.42),transparent);
  margin-bottom:18px;
}
.rapid-elo-bridge span{
  color:#d7ad3f;
  font:800 9px ui-monospace,monospace;
  letter-spacing:.16em;
}
#rapid + .rapid-elo-bridge + .visualization-elo{
  margin-top:18px;
  margin-bottom:105px;
  border-color:rgba(74,225,131,.20);
  background:
    radial-gradient(circle at 83% 8%,rgba(74,225,131,.065),transparent 23rem),
    linear-gradient(130deg,rgba(215,173,63,.055),rgba(255,255,255,.015));
}
#rapid + .rapid-elo-bridge + .visualization-elo .eyebrow{
  color:#54e67c;
}

@media(max-width:850px){
  #rapid{padding-bottom:35px}
  .rapid-elo-bridge{padding:0 16px}
  #rapid + .rapid-elo-bridge + .visualization-elo{
    margin-top:16px;
    margin-bottom:70px;
  }
}


/* Pass 13 — ELO recognition-time benchmarks */
.elo-ladder-three{
  grid-template-columns:1.1fr .72fr .88fr !important;
  gap:12px;
}
.elo-ladder-three span:nth-child(2),
.elo-ladder-three span:nth-child(3){
  text-align:right;
}
.elo-tier-three{
  grid-template-columns:1.1fr .72fr .88fr !important;
  gap:2px 12px !important;
  align-items:center;
}
.elo-tier-three .elo-number{
  color:#d7ad3f;
  font:900 14px ui-monospace,monospace;
  text-align:right;
}
.elo-tier-three .recognition-time{
  color:#54e67c;
  font:900 14px ui-monospace,monospace;
  text-align:right;
}
.elo-tier-three small{
  grid-column:1/-1 !important;
  padding-top:2px;
}
.elo-benchmark-note{
  padding:14px 15px 16px;
  border-top:1px solid rgba(215,173,63,.20);
  background:rgba(215,173,63,.035);
  color:#8b8780;
  font-size:10px;
  line-height:1.55;
}
.elo-benchmark-note strong{
  color:#cfc8ba;
}

@media(max-width:560px){
  .elo-ladder-three{
    grid-template-columns:1fr 1fr !important;
  }
  .elo-ladder-three span:nth-child(3){
    display:none;
  }
  .elo-tier-three{
    grid-template-columns:1fr 1fr !important;
  }
  .elo-tier-three .recognition-time{
    grid-column:1/-1;
    text-align:left;
    font-size:12px;
  }
  .elo-tier-three .recognition-time::before{
    content:"Target recognition: ";
    color:#777;
    font-weight:700;
  }
}


/* Pass 14 — Puzzles + pattern recognition story */
.two-pillars{
  max-width:var(--max);
  margin:20px auto 110px;
  padding:58px 50px;
  border:1px solid rgba(215,173,63,.24);
  border-radius:22px;
  background:
    radial-gradient(circle at 84% 12%,rgba(74,225,131,.055),transparent 24rem),
    radial-gradient(circle at 14% 82%,rgba(215,173,63,.07),transparent 24rem),
    #0d0f10;
}
.pillars-heading{
  max-width:850px;
  margin-bottom:38px;
}
.pillars-heading h2{
  font-size:clamp(38px,5vw,58px);
  margin-bottom:15px;
}
.pillars-heading>p:last-child{
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}
.pillar-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:stretch;
}
.pillar-card{
  position:relative;
  padding:28px;
  border-radius:17px;
  background:linear-gradient(145deg,#17191a,#101213);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.pillar-card.pattern-card{
  border-color:rgba(215,173,63,.30);
}
.pillar-number{
  position:absolute;
  top:18px;
  right:20px;
  color:#4e4e4e;
  font:900 10px ui-monospace,monospace;
}
.pillar-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#232527;
  color:#e7e2d8;
  font-size:24px;
  margin-bottom:20px;
}
.pattern-card .pillar-icon{
  color:#f2ca50;
  background:rgba(242,202,80,.10);
}
.pillar-kicker{
  color:#8b877e!important;
  font:800 9px ui-monospace,monospace!important;
  letter-spacing:.14em;
  margin:0 0 6px!important;
}
.pattern-card .pillar-kicker{color:#d7ad3f!important}
.pillar-card h3{
  font-size:27px;
  margin:0 0 10px;
}
.pillar-card>p:not(.pillar-kicker){
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
.pillar-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:20px;
}
.pillar-tags span{
  padding:6px 8px;
  border-radius:7px;
  background:#090b0c;
  border:1px solid rgba(255,255,255,.06);
  color:#aaa59c;
  font-size:9px;
  font-weight:700;
}
.pillar-plus{
  display:grid;
  place-items:center;
  color:#655b3d;
  font-size:28px;
  font-weight:300;
}
.pillar-result{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:22px;
  padding:17px;
  border-radius:12px;
  background:#090b0c;
  border:1px solid rgba(215,173,63,.15);
}
.pillar-result span{
  color:#c9c4bb;
  font:800 9px ui-monospace,monospace;
  letter-spacing:.08em;
}
.pillar-result i{
  color:#666;
  font-style:normal;
}
.pillar-result b{color:#d7ad3f}
.pillar-result strong{
  color:#f2ca50;
  font:900 10px ui-monospace,monospace;
  letter-spacing:.08em;
}
.pillars-footnote{
  max-width:830px;
  margin:18px auto 0;
  color:#777;
  text-align:center;
  font-size:12px;
  line-height:1.6;
}

@media(max-width:850px){
  .two-pillars{
    margin:15px 16px 75px;
    padding:38px 24px;
  }
  .pillar-grid{
    grid-template-columns:1fr;
  }
  .pillar-plus{
    min-height:28px;
  }
}
\n/* BoardWithin Rebrand — Pass 1 */\n.brand-manifesto{max-width:var(--max);margin:28px auto 72px;padding:34px 24px 42px;text-align:center;border-bottom:1px solid var(--line)}\n.brand-manifesto h2{margin:8px auto 12px;font-size:clamp(34px,5vw,56px);line-height:1.03}\n.brand-manifesto p:last-child{max-width:720px;margin:0 auto;color:var(--muted);font-size:17px;line-height:1.65}\nimg[src*="boardwithin-logo"]{object-fit:contain}\n

/* BoardWithin Pass 2 — final whole-site brand lockup */
.boardwithin-brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  min-width:0;
}
.boardwithin-brand-mark{
  width:58px;
  height:58px;
  object-fit:contain;
  flex:0 0 auto;
  border-radius:14px;
}
.boardwithin-brand-wordmark{
  display:flex;
  flex-direction:column;
  line-height:.88;
  letter-spacing:.10em;
  font-family:Georgia, "Times New Roman", serif;
  font-size:15px;
}
.boardwithin-brand-wordmark strong{
  color:#f4efe5;
  font-weight:700;
}
.boardwithin-brand-wordmark em{
  margin-top:5px;
  color:var(--gold2);
  font-style:normal;
  font-weight:700;
}
@media(max-width:720px){
  .boardwithin-brand-mark{width:46px;height:46px}
  .boardwithin-brand-wordmark{font-size:12px}
}


/* BoardWithin Pass 3 — hard header replacement */
header .header-inner{
  width:min(100% - 40px, var(--max));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
header .boardwithin-brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  text-decoration:none !important;
  flex:0 0 auto;
}
header .boardwithin-brand-mark{
  width:54px !important;
  height:54px !important;
  display:block !important;
  object-fit:contain !important;
  flex:0 0 54px !important;
}
header .boardwithin-brand-wordmark{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  line-height:.82 !important;
  font-family:Georgia, "Times New Roman", serif !important;
  letter-spacing:.10em !important;
}
header .boardwithin-brand-wordmark strong{
  color:#f5f0e6 !important;
  font-size:12px !important;
  font-weight:700 !important;
}
header .boardwithin-brand-wordmark em{
  color:var(--gold2) !important;
  font-size:18px !important;
  font-style:normal !important;
  font-weight:700 !important;
  margin-top:5px !important;
}
@media(max-width:720px){
  header .header-inner{
    width:min(100% - 24px, var(--max));
  }
  header .boardwithin-brand-mark{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }
  header .boardwithin-brand-wordmark strong{font-size:9px !important}
  header .boardwithin-brand-wordmark em{font-size:14px !important}
}


/* BoardWithin Pass 4 — social profiles */
.social-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.social-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 13px;
  border:1px solid rgba(215,173,63,.28);
  border-radius:999px;
  color:#d8d4cb;
  background:rgba(255,255,255,.025);
  text-decoration:none;
  font-size:13px;
  font-weight:650;
  transition:transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.social-link svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.social-link:hover{
  color:var(--gold2);
  border-color:rgba(215,173,63,.72);
  background:rgba(215,173,63,.08);
  transform:translateY(-1px);
}
@media(max-width:560px){
  .social-link span{display:none}
  .social-link{
    width:42px;
    padding:0;
    justify-content:center;
  }
}


/* BoardWithin Pass 5 — social icon navigation */
.header-social-wrap{
  display:flex;
  align-items:center;
  margin-left:auto;
  margin-right:8px;
}
.social-icons{
  display:flex;
  align-items:center;
  gap:8px;
}
.social-icon{
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(215,173,63,.28);
  background:rgba(255,255,255,.025);
  color:#cfc9bf;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.social-icon svg{
  width:18px;
  height:18px;
  display:block;
}
.social-icon.instagram svg,
.social-icon.x-social svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.social-icon.instagram .filled-dot{
  fill:currentColor;
  stroke:none;
}
.social-icon.facebook svg{
  fill:currentColor;
  stroke:none;
}
.social-icon:hover{
  color:var(--gold2);
  border-color:rgba(215,173,63,.72);
  background:rgba(215,173,63,.08);
  transform:translateY(-1px);
}
footer .social-icons{
  justify-content:center;
  margin-top:22px;
}
@media(max-width:940px){
  .header-social-wrap{
    margin-left:6px;
    margin-right:0;
  }
  .social-icon{
    width:32px;
    height:32px;
  }
  .social-icon svg{
    width:16px;
    height:16px;
  }
}
@media(max-width:760px){
  header .header-inner{
    flex-wrap:wrap;
  }
  .header-social-wrap{
    order:2;
    margin-left:auto;
  }
  header nav{
    order:3;
    width:100%;
  }
}


/* BoardWithin Pass 7 — approved cinematic landing page */
.boardwithin-cinematic-hero{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  background:#050606;
  border:0;
  overflow:hidden;
}
.cinematic-hero-image-wrap{
  position:relative;
  width:100%;
  max-width:1536px;
  margin:0 auto;
  background:#050606;
}
.cinematic-hero-image{
  width:100%;
  height:auto;
  display:block;
}
.cinematic-mobile-summary{
  display:none;
}

/* Invisible-but-clickable hotspots over the approved design */
.cinematic-store-link,
.cinematic-mode-link{
  position:absolute;
  display:block;
  border-radius:12px;
  z-index:3;
}
.cinematic-store-link:focus-visible,
.cinematic-mode-link:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:3px;
}

/* Coordinates based on the approved 1536×944 cropped hero */
.cinematic-store-link.apple{
  left:33.5%;
  top:64.5%;
  width:13.5%;
  height:7.2%;
}
.cinematic-store-link.google{
  left:49.7%;
  top:64.5%;
  width:14.0%;
  height:7.2%;
}
.cinematic-mode-link.training-link{
  left:2.6%;
  top:82.6%;
  width:31.2%;
  height:15.8%;
}
.cinematic-mode-link.rapid-link{
  left:35.0%;
  top:82.6%;
  width:31.2%;
  height:15.8%;
}
.cinematic-mode-link.puzzles-link{
  left:67.4%;
  top:82.6%;
  width:30.0%;
  height:15.8%;
}

/* Keep the live site header above the hero */
header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* Tablet */
@media(max-width:980px){
  .cinematic-hero-image-wrap{
    max-width:100%;
  }
}

/* Mobile uses a text-first fallback rather than shrinking the entire desktop composition */
@media(max-width:680px){
  .cinematic-hero-image-wrap{
    overflow:hidden;
  }
  .cinematic-hero-image{
    width:150%;
    max-width:none;
    margin-left:-25%;
  }
  .cinematic-store-link,
  .cinematic-mode-link{
    display:none;
  }
  .cinematic-mobile-summary{
    display:block;
    padding:30px 22px 38px;
    text-align:center;
    border-top:1px solid rgba(215,173,63,.16);
  }
  .cinematic-mobile-summary h1{
    font-size:clamp(34px,10vw,50px);
    line-height:1.02;
    margin:8px 0 12px;
  }
  .cinematic-mobile-summary p{
    max-width:560px;
    margin:0 auto;
    color:var(--muted);
    line-height:1.65;
  }
  .cinematic-mobile-cta{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:20px;
  }
  .cinematic-mobile-cta a{
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(215,173,63,.35);
    color:var(--gold2);
    text-decoration:none;
    font-size:13px;
    font-weight:800;
  }
}


/* BoardWithin Pass 8 — full-viewport cinematic hero */
:root{
  --boardwithin-header-height: 78px;
}

.boardwithin-cinematic-hero{
  width:100%;
  min-height:calc(100svh - var(--boardwithin-header-height));
  margin:0;
  padding:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
  background:#050606;
  overflow:hidden;
}

.cinematic-hero-image-wrap{
  position:relative;
  width:100%;
  max-width:none !important;
  min-height:calc(100svh - var(--boardwithin-header-height));
  margin:0;
  overflow:hidden;
  background:#050606;
}

.cinematic-hero-image{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  object-position:center center;
  display:block;
}

/* Keep clickable areas positioned over the full-screen artwork. */
.cinematic-store-link,
.cinematic-mode-link{
  z-index:4;
}

/* The next content section begins only after a complete screen of hero artwork. */
.boardwithin-cinematic-hero + section{
  position:relative;
  z-index:2;
}

@media(max-width:980px){
  :root{
    --boardwithin-header-height: 72px;
  }
  .boardwithin-cinematic-hero,
  .cinematic-hero-image-wrap{
    min-height:calc(100svh - var(--boardwithin-header-height));
  }
  .cinematic-hero-image{
    object-position:center center;
  }
}

@media(max-width:680px){
  :root{
    --boardwithin-header-height: 68px;
  }

  .boardwithin-cinematic-hero{
    min-height:calc(100svh - var(--boardwithin-header-height));
    display:block;
  }

  .cinematic-hero-image-wrap{
    min-height:calc(78svh - var(--boardwithin-header-height));
  }

  .cinematic-hero-image{
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    object-fit:cover;
    object-position:center top;
  }

  .cinematic-mobile-summary{
    display:block;
    min-height:22svh;
    box-sizing:border-box;
  }
}


/* =========================================================
   BoardWithin Pass 9 — FULL ARTWORK / ZERO CROPPING
   This intentionally overrides Pass 8.
   ========================================================= */

.boardwithin-cinematic-hero{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:#050606 !important;
}

.cinematic-hero-image-wrap{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:#050606 !important;
}

.cinematic-hero-image{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center top !important;
}

/* Hotspots remain attached to the image wrapper and scale with it. */
.cinematic-store-link,
.cinematic-mode-link{
  position:absolute !important;
  z-index:4 !important;
}

/* Do not force the next section upward or overlap the artwork. */
.boardwithin-cinematic-hero + section{
  position:relative !important;
  clear:both !important;
  margin-top:0 !important;
}

/* Desktop/tablet: preserve the complete approved composition. */
@media(min-width:681px){
  .boardwithin-cinematic-hero,
  .cinematic-hero-image-wrap{
    height:auto !important;
    min-height:0 !important;
  }
  .cinematic-hero-image{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }
}

/* Mobile: also show the entire artwork rather than zooming/cropping it. */
@media(max-width:680px){
  .boardwithin-cinematic-hero{
    min-height:0 !important;
    height:auto !important;
  }
  .cinematic-hero-image-wrap{
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
  }
  .cinematic-hero-image{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    margin:0 !important;
    object-fit:contain !important;
    object-position:center top !important;
  }
  .cinematic-mobile-summary{
    min-height:0 !important;
  }
}