:root{
  --bg:#050505;
  --panel:#090909;
  --panel-soft:#101010;
  --white:#f7f4ea;
  --ink:#e8e5dc;
  --muted:#aaa79d;
  --soft:#77736a;
  --line:rgba(247,244,234,.16);
  --line-strong:rgba(247,244,234,.58);
  --wash:rgba(247,244,234,.045);
  --accent:#49f4b4;
  --accent-2:#78e7ff;
  --danger:#ff7a7a;
  --focus:#ffffff;
  --cut:36px;
  --cut-small:20px;
  --mx:50vw;
  --my:50vh;
  --sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(73,244,180,.095), transparent 18rem),
    radial-gradient(circle at 80% -10%, rgba(120,231,255,.08), transparent 34rem),
    radial-gradient(circle at 10% 105%, rgba(255,255,255,.05), transparent 30rem),
    linear-gradient(145deg, rgba(255,255,255,.032), transparent 38%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(135deg, rgba(73,244,180,.018) 1px, transparent 1px);
  background-size:70px 70px, 70px 70px, 140px 140px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 84%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  opacity:.18;
  mix-blend-mode:screen;
}
body.gate-active{overflow:hidden}
button,a{font:inherit;color:inherit}
a{text-decoration:none}
p,h1,h2,h3{margin-top:0}

.background-geometry{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.geo{
  position:absolute;
  display:block;
  border:1px solid rgba(247,244,234,.22);
  background:linear-gradient(135deg, rgba(255,255,255,.04), transparent 70%);
  filter:drop-shadow(0 0 22px rgba(73,244,180,.04));
  opacity:.42;
  animation:floatSpin 18s linear infinite;
}
.geo-one{
  width:210px;
  height:210px;
  top:11%;
  left:6%;
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation-duration:24s;
}
.geo-two{
  width:340px;
  height:160px;
  right:-70px;
  top:20%;
  clip-path:polygon(18% 0, 100% 0, 82% 100%, 0 100%);
  animation-duration:31s;
  animation-direction:reverse;
}
.geo-three{
  width:180px;
  height:260px;
  left:18%;
  bottom:5%;
  border-color:rgba(120,231,255,.25);
  clip-path:polygon(0 12%, 80% 0, 100% 88%, 22% 100%);
  animation-duration:27s;
}
.geo-four{
  width:460px;
  height:460px;
  right:12%;
  bottom:-290px;
  border-radius:50%;
  background:radial-gradient(circle, transparent 45%, rgba(247,244,234,.04) 46% 48%, transparent 49%);
  animation-duration:38s;
}
.geo-five{
  width:90px;
  height:90px;
  right:28%;
  top:8%;
  border-color:rgba(73,244,180,.34);
  clip-path:polygon(50% 0, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%);
  animation-duration:14s;
}

.click-layer{
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  overflow:hidden;
}
.burst-dot{
  position:absolute;
  width:9px;
  height:9px;
  border:1px solid rgba(247,244,234,.8);
  background:rgba(73,244,180,.7);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transform:translate(-50%, -50%);
  animation:burstOut .58s ease-out forwards;
}
.float-note{
  position:absolute;
  z-index:85;
  pointer-events:none;
  padding:9px 12px;
  color:var(--bg);
  background:var(--accent);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  animation:notePop .95s cubic-bezier(.2,.72,.1,1) forwards;
  white-space:nowrap;
}

.page-shell{position:relative;z-index:1;min-height:100vh}
.site-frame{width:min(1080px, calc(100% - 44px));margin:0 auto}
.eyebrow,
.step-count,
.question-kicker,
.gate-footer,
.site-nav,
.contact-list span,
.contact-card em,
.edit-note code,
.detail-row > span,
.button,
.back-button{
  font-family:var(--mono);
  font-size:.72rem;
  line-height:1.1;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.eyebrow,.step-count,.question-kicker,.gate-footer,.contact-list span,.detail-row > span{color:var(--soft)}

/* Universal interaction surface */
.interactive-surface{
  --rx:0deg;
  --ry:0deg;
  --spot-x:50%;
  --spot-y:50%;
  position:relative;
  isolation:isolate;
  transform-style:preserve-3d;
}
.interactive-surface::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(73,244,180,.18), transparent 24%);
  transition:opacity .22s ease;
}
.interactive-surface:hover::after{opacity:1}
.interactive-surface.is-clicked{animation:clickSnap .36s cubic-bezier(.2,.72,.1,1)}
.interactive-surface:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:4px;
}

/* Locked first screen */
.access-gate{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(18px, 4vw, 44px);
  position:relative;
  z-index:1;
}
.gate-wrap{width:min(760px, 100%)}
.gate-card{
  overflow:hidden;
  min-height:min(620px, calc(100svh - 64px));
  display:grid;
  grid-template-rows:auto 1fr auto;
  border:1px solid var(--line-strong);
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 42%),
    linear-gradient(315deg, rgba(73,244,180,.05), transparent 34%),
    rgba(4,4,4,.94);
  box-shadow:0 28px 90px rgba(0,0,0,.58);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, clip-path .28s ease;
}
.gate-card:hover{
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  border-color:rgba(73,244,180,.55);
  box-shadow:0 30px 105px rgba(0,0,0,.65), 0 0 0 1px rgba(73,244,180,.08) inset;
}
.gate-card::before,
.hero-panel::before,
.panel::before,
.details-panel::before,
.contact-panel::before{
  content:"";
  position:absolute;
  inset:12px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.09);
  clip-path:polygon(var(--cut-small) 0, 100% 0, 100% calc(100% - var(--cut-small)), calc(100% - var(--cut-small)) 100%, 0 100%, 0 var(--cut-small));
}
.gate-meta,
.gate-footer{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 22px;
}
.gate-meta{border-bottom:1px solid var(--line)}
.gate-footer{border-top:1px solid var(--line)}
.gate-meta p,.gate-footer p{margin:0}
.gate-stage{
  position:relative;
  z-index:1;
  align-self:center;
  width:100%;
  max-width:620px;
  margin:0 auto;
  padding:clamp(28px, 5vw, 56px);
}
.gate-stage > *{transition:transform .34s ease, opacity .34s ease, filter .34s ease}
.gate-stage.is-leaving > *{
  transform:translateX(-115vw) skewX(-7deg);
  opacity:0;
  filter:blur(5px);
}
.gate-stage.is-entering > *{animation:slideInFromRight .44s cubic-bezier(.2,.72,.1,1) both}
.gate-stage.is-entering .question-help{animation-delay:.04s}
.gate-stage.is-entering .answer-grid{animation-delay:.08s}
h1{
  max-width:10.8ch;
  margin:0 0 20px;
  color:var(--white);
  font-size:clamp(3rem, 6vw, 5.25rem);
  line-height:.9;
  letter-spacing:-.07em;
  font-weight:820;
}
.question-help{
  max-width:36rem;
  margin:0 0 30px;
  color:var(--muted);
  font-size:clamp(.98rem, 1.1vw, 1.08rem);
  line-height:1.58;
}
.answer-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  max-width:500px;
}
.answer-card{
  min-height:96px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:0;
  background:linear-gradient(135deg, rgba(255,255,255,.04), transparent 65%);
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, clip-path .18s ease;
}
.answer-card:nth-child(2){clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px)}
.answer-card strong{
  color:var(--white);
  font-size:clamp(1.08rem, 1.5vw, 1.38rem);
  letter-spacing:-.025em;
}
.answer-card span{color:var(--muted);line-height:1.35;font-size:.94rem}
.answer-card:hover,.answer-card.is-selected{
  background:var(--white);
  color:var(--bg);
  border-color:var(--accent);
  transform:scale(1.05) translateY(-4px) rotate(-.6deg);
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.answer-card:active{transform:scale(.94) rotate(.8deg)}
.answer-card.is-pulsing{animation:buttonPulse .34s ease both}
.answer-card:hover strong,.answer-card:hover span,
.answer-card.is-selected strong,.answer-card.is-selected span{color:var(--bg)}
.progress-track{
  flex:1 1 auto;
  max-width:220px;
  height:3px;
  background:var(--line);
  overflow:hidden;
}
.progress-track span{
  display:block;
  width:33.333%;
  height:100%;
  background:linear-gradient(90deg, var(--white), var(--accent));
  transition:width .28s ease;
}
.back-button{
  border:0;
  background:transparent;
  color:var(--white);
  cursor:pointer;
  padding:8px;
  transition:transform .18s ease, opacity .18s ease, color .18s ease;
}
.back-button:hover{transform:scale(1.1) rotate(-4deg);color:var(--accent)}
.back-button:active{transform:scale(.9)}
.hidden-lock{display:none !important}

/* Main site */
.main-content{
  position:relative;
  z-index:1;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .35s ease, transform .35s ease;
  padding-bottom:78px;
}
.main-content.is-visible{opacity:1;transform:none}
.site-header{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  border-bottom:1px solid var(--line);
}
.minimal-header{border-bottom:0;min-height:82px}
.site-nav{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted)}
.site-nav a{
  padding:12px 18px;
  border:1px solid var(--line);
  clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, letter-spacing .18s ease, clip-path .18s ease;
}
.site-nav a:hover{
  color:var(--bg);
  background:var(--accent);
  border-color:var(--accent);
  transform:scale(1.08) rotate(-1deg);
  letter-spacing:.22em;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 100%, 14px 100%);
}
.site-nav a:active{transform:scale(.92) rotate(1deg)}
.hero-panel{
  min-height:min(650px, calc(100vh - 128px));
  display:grid;
  border:1px solid var(--line-strong);
  border-radius:0;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(73,244,180,.11), transparent 26%),
    linear-gradient(120deg, rgba(255,255,255,.05), transparent 44%),
    linear-gradient(305deg, rgba(120,231,255,.045), transparent 36%),
    rgba(4,4,4,.92);
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, clip-path .26s ease, box-shadow .22s ease;
}
.hero-panel:hover,
.panel:hover,
.details-panel:hover,
.contact-panel:hover{
  border-color:rgba(73,244,180,.52);
  box-shadow:0 18px 70px rgba(0,0,0,.3), 0 0 0 1px rgba(73,244,180,.06) inset;
}
.hero-panel:hover{transform:translateY(-4px)}
.hero-panel::after{
  content:"";
  position:absolute;
  right:8%;
  top:13%;
  width:min(28vw, 260px);
  aspect-ratio:1;
  border:1px solid rgba(73,244,180,.34);
  transform:rotate(45deg);
  opacity:.35;
  pointer-events:none;
  animation:heroRotor 12s linear infinite;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(280px, 360px);
  gap:24px;
  align-items:end;
  padding:clamp(34px, 5.8vw, 70px);
}
h2{
  max-width:10ch;
  margin:0;
  color:var(--white);
  font-size:clamp(4rem, 8.5vw, 7.8rem);
  line-height:.84;
  letter-spacing:-.085em;
  font-weight:820;
}
.hero-note{
  border:1px solid var(--line);
  border-radius:0;
  padding:22px;
  background:rgba(255,255,255,.026);
  transition:transform .22s ease, background .22s ease, border-color .22s ease, clip-path .22s ease;
}
.hero-note:hover{
  transform:translateX(-4px) rotate(.7deg);
  background:rgba(255,255,255,.045);
  border-color:var(--accent);
}
.hero-note p{
  margin:0 0 22px;
  color:var(--muted);
  line-height:1.6;
}
.button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border:1px solid var(--white);
  border-radius:0;
  background:var(--white);
  color:var(--bg);
  font-weight:750;
  clip-path:polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transition:transform .18s ease, opacity .18s ease, clip-path .18s ease, background .18s ease, border-color .18s ease;
}
.button::before{content:"↯";margin-right:9px;transition:transform .18s ease}
.button:hover{
  transform:scale(1.07) rotate(-1deg);
  background:var(--accent);
  border-color:var(--accent);
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
}
.button:hover::before{transform:rotate(16deg) scale(1.3)}
.button:active{transform:scale(.92) rotate(1deg)}
.split-section{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(290px, .85fr);
  gap:18px;
  padding-top:18px;
}
.panel,.details-panel,.contact-panel{
  border:1px solid var(--line);
  border-radius:0;
  background:rgba(255,255,255,.02);
  transition:transform .24s ease, border-color .22s ease, background .22s ease, clip-path .26s ease, box-shadow .22s ease;
}
.panel:hover,.details-panel:hover,.contact-panel:hover{transform:translateY(-4px)}
.panel{padding:clamp(24px, 3.5vw, 38px)}
.panel-large{min-height:330px;display:flex;flex-direction:column;justify-content:flex-end}
h3{
  max-width:13ch;
  margin:0 0 18px;
  color:var(--white);
  font-size:clamp(2.2rem, 4.3vw, 4.5rem);
  line-height:.9;
  letter-spacing:-.07em;
  font-weight:810;
}
.panel p,.detail-row p,.contact-panel p{
  max-width:42rem;
  color:var(--muted);
  line-height:1.62;
}
.panel p:last-child,.detail-row p:last-child,.contact-panel p:last-child{margin-bottom:0}
.stack-panel{
  display:grid;
  gap:18px;
  align-content:stretch;
  background:rgba(255,255,255,.028);
}
.mini-block{
  padding:16px;
  border:1px solid var(--line);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, clip-path .18s ease;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.mini-block:hover{
  transform:translateX(8px) scale(1.015);
  background:rgba(73,244,180,.055);
  border-color:rgba(73,244,180,.5);
  clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.details-panel{
  margin-top:18px;
  overflow:hidden;
}
.detail-row{
  display:grid;
  grid-template-columns:70px minmax(190px, .52fr) minmax(0, 1fr);
  gap:20px;
  align-items:start;
  padding:26px;
  transition:transform .24s ease, background .24s ease, color .2s ease;
}
.detail-row:hover{
  transform:translateX(12px) skewX(-1.2deg);
  background:rgba(73,244,180,.045);
}
.detail-row + .detail-row{border-top:1px solid var(--line)}
.detail-row h3{
  max-width:8ch;
  margin:0;
  font-size:clamp(1.9rem, 3vw, 3.1rem);
}
.detail-row p{margin:0}
.price-panel{
  background:var(--white);
  color:var(--bg);
}
.price-panel:hover{background:linear-gradient(135deg, var(--white), #d9fff2)}
.price-panel .eyebrow,.price-panel p{color:rgba(5,5,5,.64)}
.price-line{
  margin:8px 0 20px;
  color:var(--bg) !important;
  font-size:clamp(3.4rem, 6.5vw, 6.2rem);
  font-weight:820;
  line-height:.84;
  letter-spacing:-.085em;
}
.compact-panel{display:flex;flex-direction:column;justify-content:space-between}
.plain-list{
  display:grid;
  gap:0;
  margin:20px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.plain-list li{
  padding:16px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  cursor:default;
  transition:transform .18s ease, color .18s ease, letter-spacing .18s ease;
}
.plain-list li:hover{transform:translateX(10px) scale(1.02);color:var(--accent);letter-spacing:.02em}
.contact-panel{
  margin-top:18px;
  padding:clamp(24px, 3.5vw, 38px);
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(280px, 420px);
  gap:28px;
  align-items:end;
}
.contact-panel h3{max-width:12ch}
.contact-list{
  display:grid;
  border-top:1px solid var(--line);
}
.contact-card{
  display:grid;
  grid-template-columns:100px minmax(0, 1fr) auto;
  gap:18px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  transition:transform .18s ease, background .18s ease, padding .18s ease, border-color .18s ease;
}
.contact-card:hover{
  transform:scale(1.03) translateX(-6px) rotate(-.4deg);
  background:rgba(73,244,180,.055);
  padding-left:14px;
  padding-right:14px;
  border-color:rgba(73,244,180,.5);
}
.contact-card:active{transform:scale(.95)}
.contact-card:hover strong{border-bottom-color:var(--accent);color:var(--accent)}
.contact-card strong{
  color:var(--white);
  font-weight:650;
  word-break:break-word;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.contact-card em{
  opacity:0;
  font-style:normal;
  color:var(--bg);
  background:var(--accent);
  padding:8px 10px;
  transform:translateX(10px) rotate(4deg) scale(.8);
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition:opacity .18s ease, transform .18s ease;
}
.contact-card:hover em{
  opacity:1;
  transform:translateX(0) rotate(-2deg) scale(1);
  animation:wink .7s ease both;
}
.contact-card:hover::before{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:46px;
  height:46px;
  border:1px solid var(--accent);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transform:translateY(-50%);
  animation:contactOrbit .7s ease both;
  pointer-events:none;
}
.edit-note{
  grid-column:1 / -1;
  margin:0;
  color:var(--soft);
  line-height:1.5;
}
.edit-note code{color:var(--white);font-size:.86em}

/* Different geometry masks */
.shape-a{clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)))}
.shape-a:hover{clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut))}
.shape-b{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%)}
.shape-b:hover{clip-path:polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px)}
.shape-c{clip-path:polygon(0 0, calc(100% - var(--cut-small)) 0, 100% var(--cut-small), 100% 100%, 0 100%)}
.shape-c:hover{clip-path:polygon(0 var(--cut-small), var(--cut-small) 0, 100% 0, 100% calc(100% - var(--cut-small)), calc(100% - var(--cut-small)) 100%, 0 100%)}
.shape-d{clip-path:polygon(var(--cut-small) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-small))}
.shape-d:hover{clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut-small)), calc(100% - var(--cut-small)) 100%, 0 100%)}
.shape-e{clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%)}
.shape-e:hover{clip-path:polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut))}
.shape-f{clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%)}
.shape-f:hover{clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% 100%, 0 100%)}
.shape-g{clip-path:polygon(0 0, calc(100% - var(--cut-small)) 0, 100% var(--cut-small), 100% 100%, 0 100%)}
.shape-g:hover{clip-path:polygon(var(--cut-small) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-small))}
.shape-h{clip-path:polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut))}
.shape-h:hover{clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)))}

/* Motion + interaction */
.reveal-block{
  opacity:0;
  transform:translateX(42px) skewX(-1.5deg);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.72,.1,1);
}
.reveal-block.is-inview{opacity:1;transform:none}

@keyframes slideInFromRight{
  from{transform:translateX(80vw) skewX(-7deg);opacity:0;filter:blur(5px)}
  to{transform:translateX(0) skewX(0);opacity:1;filter:blur(0)}
}
@keyframes buttonPulse{
  0%{transform:scale(1)}
  42%{transform:scale(1.1) rotate(-1deg)}
  100%{transform:scale(.98)}
}
@keyframes clickSnap{
  0%{filter:brightness(1)}
  40%{filter:brightness(1.42);transform:scale(.985)}
  100%{filter:brightness(1)}
}
@keyframes burstOut{
  from{opacity:1;transform:translate(-50%, -50%) rotate(0) scale(1)}
  to{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(220deg) scale(.2)}
}
@keyframes notePop{
  0%{opacity:0;transform:translate(-50%, 8px) scale(.85) rotate(4deg)}
  18%{opacity:1;transform:translate(-50%, -8px) scale(1.04) rotate(-2deg)}
  75%{opacity:1;transform:translate(-50%, -24px) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%, -42px) scale(.9) rotate(-5deg)}
}
@keyframes floatSpin{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(28px,-22px,0) rotate(180deg)}
  100%{transform:translate3d(0,0,0) rotate(360deg)}
}
@keyframes heroRotor{
  0%{transform:rotate(45deg) scale(1)}
  50%{transform:rotate(225deg) scale(1.08)}
  100%{transform:rotate(405deg) scale(1)}
}
@keyframes contactOrbit{
  from{opacity:0;transform:translateY(-50%) rotate(0deg) scale(.4)}
  to{opacity:1;transform:translateY(-50%) rotate(225deg) scale(1)}
}
@keyframes wink{
  0%,100%{filter:brightness(1)}
  45%{filter:brightness(1.45)}
}

@media (max-width: 900px){
  body.gate-active{overflow:auto}
  .access-gate{padding:14px;place-items:start center}
  .gate-wrap{width:100%}
  .gate-card{min-height:calc(100svh - 28px)}
  .gate-card:hover,.hero-panel:hover,.panel:hover,.details-panel:hover,.contact-panel:hover{transform:none}
  .gate-meta,.gate-footer{padding:15px}
  .gate-stage{padding:30px 20px;align-self:center}
  h1{font-size:clamp(2.6rem, 13vw, 4.8rem);line-height:.92;max-width:11ch}
  .question-help{margin-bottom:24px}
  .answer-grid{grid-template-columns:1fr;max-width:none}
  .answer-card{min-height:78px}
  .gate-footer{align-items:flex-start;flex-wrap:wrap}
  .progress-track{order:-1;flex-basis:100%;max-width:none}
  .site-frame{width:min(100% - 28px, 1080px)}
  .minimal-header{min-height:72px}
  .site-nav{gap:8px;flex-wrap:wrap}
  .site-nav a{padding:10px 14px}
  .hero-panel{min-height:auto}
  .hero-grid,.split-section,.contact-panel{grid-template-columns:1fr}
  h2{font-size:clamp(3.2rem, 15vw, 6.2rem)}
  h3{font-size:clamp(2.1rem, 10vw, 4rem)}
  .panel-large{min-height:auto}
  .detail-row{grid-template-columns:1fr;gap:14px;padding:24px}
  .contact-card{grid-template-columns:1fr;gap:8px}
  .contact-card em{justify-self:start}
}

@media (max-width: 430px){
  .gate-meta,.gate-footer{padding:14px}
  h1{font-size:clamp(2.25rem, 12vw, 3.4rem)}
  .question-help{font-size:.96rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal-block{opacity:1;transform:none}
  .geo{display:none}
}

/* Calmer sideways version overrides */
:root{
  --accent:#49f4b4;
  --accent-2:#55c7ff;
  --accent-glow:rgba(73,244,180,.22);
  --blue-glow:rgba(85,199,255,.20);
}

.background-geometry{
  display:block;
  opacity:1;
}
.geo{display:none}
.bg-word{
  position:absolute;
  display:block;
  font-family:var(--mono);
  font-size:clamp(2.4rem, 8vw, 8.8rem);
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  text-shadow:0 0 22px rgba(73,244,180,.06);
  opacity:0;
  white-space:nowrap;
  animation:bgWordDrift 16s ease-in-out infinite;
  will-change:transform, opacity, filter;
}
.bg-word-one{left:-8vw;top:9vh;animation-delay:0s}
.bg-word-two{right:-18vw;top:25vh;animation-delay:3.2s;color:rgba(85,199,255,.025);-webkit-text-stroke:1px rgba(85,199,255,.11)}
.bg-word-three{left:18vw;bottom:14vh;animation-delay:6s}
.bg-word-four{right:4vw;bottom:5vh;animation-delay:9s;color:rgba(73,244,180,.025);-webkit-text-stroke:1px rgba(73,244,180,.12)}
.bg-word-five{left:-12vw;top:62vh;animation-delay:12s}
.bg-word-six{right:20vw;top:5vh;animation-delay:14s;color:rgba(255,255,255,.02)}

body{
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(73,244,180,.075), transparent 18rem),
    radial-gradient(circle at 82% -10%, rgba(85,199,255,.10), transparent 32rem),
    radial-gradient(circle at 2% 90%, rgba(73,244,180,.05), transparent 30rem),
    linear-gradient(145deg, rgba(255,255,255,.026), transparent 38%),
    var(--bg);
}
body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(135deg, rgba(85,199,255,.018) 1px, transparent 1px);
}
.interactive-surface::after{
  background:radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(85,199,255,.15), rgba(73,244,180,.12) 12%, transparent 28%);
}

.main-content{
  height:100svh;
  width:100%;
  display:flex;
  gap:26px;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:110px;
  padding:102px 110px 54px;
  transform:translateX(18px);
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(73,244,180,.7) rgba(255,255,255,.06);
}
.main-content::-webkit-scrollbar{height:8px}
.main-content::-webkit-scrollbar-track{background:rgba(255,255,255,.055)}
.main-content::-webkit-scrollbar-thumb{background:linear-gradient(90deg, var(--accent), var(--accent-2))}
.main-content.is-visible{transform:none}
.main-content .site-frame{
  width:min(1080px, calc(100vw - 220px));
  flex:0 0 min(1080px, calc(100vw - 220px));
  margin:0;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
.site-header{
  position:fixed;
  top:18px;
  left:50%;
  right:auto;
  z-index:50;
  width:auto !important;
  min-height:auto;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(5,5,5,.74);
  backdrop-filter:blur(18px);
  padding:8px;
  clip-path:polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.site-nav a:hover{letter-spacing:.12em;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-color:transparent}
.page-panel{
  min-height:calc(100svh - 156px);
  max-height:calc(100svh - 156px);
  overflow:hidden;
}
.split-section.page-panel{padding-top:0}
.hero-panel{min-height:calc(100svh - 156px)}
.hero-panel::after{display:none}
.hero-grid{height:100%;grid-template-columns:minmax(0, .95fr) minmax(340px, .8fr);align-items:center}
.hero-subline{
  max-width:34rem;
  margin:22px 0 0;
  color:var(--muted);
  line-height:1.6;
  font-size:clamp(.98rem, 1.2vw, 1.12rem);
}

.setup-console{
  min-height:310px;
  padding:30px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(135deg, rgba(73,244,180,.055), transparent 38%),
    linear-gradient(315deg, rgba(85,199,255,.05), transparent 48%),
    rgba(8,10,10,.86);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
  box-shadow:0 24px 80px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.025);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.setup-console:hover{
  transform:translateY(-5px) rotate(.3deg);
  border-color:rgba(85,199,255,.55);
  box-shadow:0 30px 90px rgba(0,0,0,.44), 0 0 45px rgba(73,244,180,.08);
}
.console-title{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
  font-family:var(--mono);
  letter-spacing:.08em;
  color:var(--white);
}
.console-title span{
  width:12px;
  height:12px;
  display:inline-block;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow:0 0 18px rgba(73,244,180,.38);
}
.console-lines{
  display:grid;
  gap:18px;
  margin:0 0 30px;
  padding:0;
  list-style:none;
  font-family:var(--mono);
  color:rgba(247,244,234,.65);
  font-size:clamp(.9rem, 1.35vw, 1.05rem);
  font-weight:700;
  letter-spacing:.02em;
}
.console-lines li{
  position:relative;
  padding-left:25px;
  opacity:0;
  transform:translateX(-8px);
  animation:consoleLineIn .62s ease forwards;
}
.console-lines li:nth-child(1){animation-delay:.2s}
.console-lines li:nth-child(2){animation-delay:.55s}
.console-lines li:nth-child(3){animation-delay:.9s}
.console-lines li:nth-child(4){animation-delay:1.25s}
.console-lines li::before{
  content:">";
  position:absolute;
  left:0;
  color:var(--accent);
  text-shadow:0 0 12px rgba(73,244,180,.45);
}
.console-lines .console-hot{
  color:var(--accent);
  text-shadow:0 0 18px rgba(73,244,180,.55), 0 0 26px rgba(85,199,255,.16);
}
.console-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  color:#03100c;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition:transform .18s ease, filter .18s ease, clip-path .18s ease;
}
.console-badge:hover{transform:scale(1.06) translateX(3px);filter:brightness(1.1);clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%)}
.console-badge:active{transform:scale(.94)}

.side-scroll-controls{
  position:fixed;
  inset:0;
  z-index:46;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
}
.side-scroll-button{
  pointer-events:auto;
  width:50px;
  height:78px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(5,5,5,.68);
  color:var(--white);
  cursor:pointer;
  font-size:2.3rem;
  line-height:1;
  clip-path:polygon(0 0, 100% 16px, 100% calc(100% - 16px), 0 100%);
  backdrop-filter:blur(16px);
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.side-scroll-button:last-child{clip-path:polygon(0 16px, 100% 0, 100% 100%, 0 calc(100% - 16px))}
.side-scroll-button:hover{
  color:#03100c;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;
  transform:scale(1.08);
}
.side-scroll-button:active{transform:scale(.9)}
.side-scroll-button.is-disabled{opacity:.3;pointer-events:none}

.price-panel:hover{background:linear-gradient(135deg, #f7f4ea, #d9fff2 58%, #dff6ff)}
.contact-card:hover{background:linear-gradient(90deg, rgba(73,244,180,.055), rgba(85,199,255,.045));border-color:rgba(85,199,255,.48)}
.contact-card:hover strong{border-bottom-color:var(--accent-2);color:var(--accent-2)}
.contact-card em{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#03100c}
.float-note{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#03100c}
.burst-dot{background:rgba(85,199,255,.7);border-color:rgba(73,244,180,.9)}

@keyframes bgWordDrift{
  0%,100%{opacity:0;transform:translate3d(0,20px,0) skewX(-8deg);filter:blur(4px)}
  18%{opacity:.13;filter:blur(0)}
  46%{opacity:.07;transform:translate3d(42px,-10px,0) skewX(-8deg);filter:blur(0)}
  72%{opacity:0;transform:translate3d(84px,-36px,0) skewX(-8deg);filter:blur(5px)}
}
@keyframes consoleLineIn{
  to{opacity:1;transform:none}
}

@media (max-width: 900px){
  .main-content{
    height:auto;
    min-height:100svh;
    display:block;
    overflow:visible;
    padding:76px 14px 42px;
    scroll-snap-type:none;
  }
  .main-content .site-frame{
    width:min(100%, 1080px);
    flex:none;
    margin:0 auto 18px;
  }
  .site-header{
    top:10px;
    width:calc(100% - 28px) !important;
  }
  .site-nav{width:100%;justify-content:center}
  .site-nav a{padding:10px 12px;font-size:.68rem}
  .side-scroll-controls{display:none}
  .page-panel,.hero-panel{
    min-height:auto;
    max-height:none;
    overflow:visible;
  }
  .hero-grid{height:auto;grid-template-columns:1fr}
  .setup-console{min-height:260px}
  .bg-word{font-size:clamp(2.2rem, 14vw, 5rem)}
}

@media (prefers-reduced-motion: reduce){
  .bg-word{animation:none;opacity:.045}
  .main-content{scroll-behavior:auto}
}


/* Refined orange one-panel update */
:root{
  --accent:#db7a26;
  --accent-2:#f0a45f;
  --accent-glow:rgba(219,122,38,.22);
  --blue-glow:rgba(240,164,95,.16);
}

.bg-word{
  --hover:0;
  color:rgba(240,164,95,.03);
  -webkit-text-stroke:1px rgba(240,164,95,.16);
  text-shadow:0 0 28px rgba(219,122,38,.08);
  opacity:calc(.015 + (var(--hover) * .34));
  filter:blur(calc(3px - (var(--hover) * 2px)));
  mix-blend-mode:screen;
}
.bg-word-two,
.bg-word-four,
.bg-word-six{
  color:rgba(255,255,255,.02);
  -webkit-text-stroke:1px rgba(255,255,255,.12);
}

@keyframes bgWordDrift{
  0%,100%{transform:translate3d(0,18px,0) skewX(-8deg) scale(1)}
  50%{transform:translate3d(58px,-22px,0) skewX(-8deg) scale(1.02)}
}

body{
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(219,122,38,.08), transparent 18rem),
    radial-gradient(circle at 82% -10%, rgba(240,164,95,.06), transparent 32rem),
    radial-gradient(circle at 2% 90%, rgba(219,122,38,.045), transparent 30rem),
    linear-gradient(145deg, rgba(255,255,255,.018), transparent 38%),
    var(--bg);
}
.interactive-surface::after{
  background:radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(240,164,95,.12), rgba(219,122,38,.10) 14%, transparent 30%);
}
.hero-panel:hover,
.panel:hover,
.details-panel:hover,
.contact-panel:hover,
.gate-card:hover{
  border-color:rgba(240,164,95,.45);
  box-shadow:0 18px 70px rgba(0,0,0,.3), 0 0 0 1px rgba(219,122,38,.06) inset;
}
.answer-card:hover,
.answer-card.is-selected{
  border-color:var(--accent);
}
.detail-row:hover{
  background:rgba(219,122,38,.05);
}
.site-nav a:hover,
.side-scroll-button:hover,
.contact-card em,
.float-note{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.side-scroll-button:hover,
.float-note,
.contact-card em{color:#1a0d04}
.contact-card:hover{
  background:linear-gradient(90deg, rgba(219,122,38,.06), rgba(240,164,95,.04));
  border-color:rgba(240,164,95,.44);
}
.contact-card:hover strong{border-bottom-color:var(--accent);color:var(--accent-2)}
.burst-dot{background:rgba(240,164,95,.78);border-color:rgba(219,122,38,.9)}

.main-content{
  gap:0;
  padding:102px 0 54px;
  scroll-padding-inline:0;
  scrollbar-color:rgba(219,122,38,.7) rgba(255,255,255,.06);
}
.main-content::-webkit-scrollbar-thumb{background:linear-gradient(90deg, var(--accent), var(--accent-2))}
.main-content .site-frame{
  width:100vw;
  flex:0 0 100vw;
  margin:0;
  padding-inline:clamp(22px, 5vw, 88px);
  scroll-snap-align:start;
}
.page-panel,
.hero-panel{
  min-height:calc(100svh - 156px);
  max-height:calc(100svh - 156px);
}
.hero-grid{
  grid-template-columns:minmax(0, 1fr) minmax(320px, 420px);
}
.hero-note{
  align-self:end;
  padding:26px;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 56%),
    rgba(8,8,8,.88);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
  box-shadow:0 24px 80px rgba(0,0,0,.34);
}
.hero-note:hover{
  transform:translateY(-4px);
  border-color:rgba(240,164,95,.46);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 54%),
    rgba(10,10,10,.92);
}
.hero-note p{
  margin:0 0 22px;
  color:var(--ink);
  font-size:clamp(1.18rem, 1.7vw, 1.55rem);
  line-height:1.65;
}
.button{
  background:var(--white);
  border-color:var(--white);
}
.button:hover{
  background:linear-gradient(90deg, #f6efe1, #fff2de);
  border-color:var(--accent);
}

.price-panel{
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    rgba(8,8,8,.92);
  color:var(--ink);
  border-color:rgba(240,164,95,.28);
}
.price-panel:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),
    rgba(10,10,10,.94);
}
.price-panel .eyebrow,
.price-panel p{color:var(--muted)}
.price-panel::before{
  content:"";
  position:absolute;
  inset:12px;
  border:none;
  background:
    radial-gradient(circle at 10% 18%, rgba(240,164,95,.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 10% 18%, transparent 0 18px, rgba(240,164,95,.28) 19px 20px, transparent 21px),
    radial-gradient(circle at 82% 72%, rgba(219,122,38,.85) 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 72%, transparent 0 20px, rgba(219,122,38,.24) 21px 22px, transparent 23px),
    radial-gradient(circle at 72% 20%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 76%, rgba(255,255,255,.38) 0 1px, transparent 2px);
  opacity:.9;
  pointer-events:none;
}
.price-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(240,164,95,.12) 6% 6.4%, transparent 6.4% 100%),
    linear-gradient(0deg, transparent 0 80%, rgba(219,122,38,.1) 80% 80.4%, transparent 80.4% 100%);
  pointer-events:none;
}
.price-flare{
  position:relative;
  margin:12px 0 18px;
  padding:18px 22px;
  border:1px solid rgba(240,164,95,.24);
  clip-path:polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  background:linear-gradient(135deg, rgba(219,122,38,.10), rgba(240,164,95,.05));
}
.price-flare::before{
  content:"";
  position:absolute;
  inset:-14px;
  background:
    radial-gradient(circle at 14% 24%, rgba(240,164,95,.85) 0 1.5px, transparent 2px),
    radial-gradient(circle at 14% 24%, transparent 0 24px, rgba(240,164,95,.22) 25px 26px, transparent 27px),
    radial-gradient(circle at 88% 76%, rgba(219,122,38,.85) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 76%, transparent 0 20px, rgba(219,122,38,.22) 21px 22px, transparent 23px),
    radial-gradient(circle at 76% 10%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 88%, rgba(255,255,255,.35) 0 1px, transparent 2px);
  pointer-events:none;
  animation:priceSpark 5.4s ease-in-out infinite;
}
.price-line{
  position:relative;
  margin:0;
  color:var(--white) !important;
  font-size:clamp(3.2rem, 6vw, 5.6rem);
  text-shadow:0 0 18px rgba(219,122,38,.18);
}

@keyframes priceSpark{
  0%,100%{transform:translateY(0) scale(1);opacity:.85}
  50%{transform:translateY(-4px) scale(1.02);opacity:1}
}

@media (max-width: 900px){
  .main-content{
    height:auto;
    min-height:100svh;
    display:block;
    overflow:visible;
    padding:76px 14px 42px;
    scroll-snap-type:none;
  }
  .main-content .site-frame{
    width:min(100%, 1080px);
    flex:none;
    margin:0 auto 18px;
    padding-inline:0;
  }
  .hero-note p{font-size:1.06rem;line-height:1.6}
}

/* Additional orange cleanup */
body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(135deg, rgba(219,122,38,.018) 1px, transparent 1px);
}
.gate-card{
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 42%),
    linear-gradient(315deg, rgba(219,122,38,.05), transparent 34%),
    rgba(4,4,4,.94);
}
.progress-track span{
  background:linear-gradient(90deg, var(--white), var(--accent));
}
.hero-panel{
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(219,122,38,.10), transparent 26%),
    linear-gradient(120deg, rgba(255,255,255,.05), transparent 44%),
    linear-gradient(305deg, rgba(240,164,95,.04), transparent 36%),
    rgba(4,4,4,.92);
}
.plain-list li:hover,
.back-button:hover{color:var(--accent)}

/* ==========================================================
   Mobile layout hardening
   Keeps the intake locked to one viewport and turns the
   sideways desktop panels into clean stacked phone sections.
   ========================================================== */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.question-help:empty{display:none}

@media (max-width: 900px){
  :root{
    --cut:24px;
    --cut-small:14px;
  }

  body.gate-active{
    height:100dvh;
    min-height:100svh;
    overflow:hidden;
  }

  body:not(.gate-active){
    overflow-y:auto;
    overflow-x:hidden;
  }

  .access-gate{
    height:100dvh;
    min-height:100svh;
    padding:max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
    place-items:center;
    overflow:hidden;
  }

  .gate-wrap{
    width:100%;
    max-width:560px;
  }

  .gate-card{
    width:100%;
    height:min(720px, calc(100dvh - 28px));
    min-height:0;
    max-height:calc(100dvh - 28px);
    grid-template-rows:auto minmax(0, 1fr) auto;
    overflow:hidden;
    clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  }

  .gate-meta,
  .gate-footer{
    padding:12px 14px;
    gap:10px;
  }

  .gate-stage{
    min-height:0;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(18px, 4.8svh, 34px) 18px;
    overflow:hidden;
  }

  h1{
    max-width:11ch;
    margin:0 0 14px;
    font-size:clamp(2.25rem, 10.8vw, 3.65rem);
    line-height:.94;
    letter-spacing:-.065em;
  }

  .question-help{
    margin:0 0 18px;
    font-size:.94rem;
    line-height:1.5;
  }

  .answer-grid{
    grid-template-columns:1fr;
    gap:10px;
    max-width:none;
  }

  .answer-card{
    min-height:64px;
    gap:8px;
    padding:13px 15px;
  }

  .answer-card strong{
    font-size:1rem;
  }

  .answer-card span{
    font-size:.86rem;
  }

  .gate-footer{
    align-items:center;
    flex-wrap:wrap;
  }

  .progress-track{
    order:-1;
    flex:1 0 100%;
    max-width:none;
  }

  .gate-footer p{
    font-size:.64rem;
  }

  .back-button{
    padding:6px 0;
    font-size:.64rem;
  }

  .main-content{
    height:auto;
    min-height:100dvh;
    display:block;
    overflow:visible;
    padding:calc(76px + env(safe-area-inset-top)) 14px calc(44px + env(safe-area-inset-bottom));
    scroll-snap-type:none;
    scroll-padding-inline:0;
    transform:translateY(18px);
  }

  .main-content.is-visible{
    transform:none;
  }

  .main-content .site-frame{
    width:100%;
    max-width:720px;
    flex:none;
    margin:0 auto 16px;
    padding-inline:0;
    scroll-snap-align:none;
  }

  .site-header{
    position:fixed;
    top:max(10px, env(safe-area-inset-top));
    left:14px;
    right:14px;
    width:auto !important;
    transform:none;
    padding:6px;
    min-height:auto;
    clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  }

  .site-nav{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
  }

  .site-nav a{
    min-width:0;
    padding:10px 4px;
    text-align:center;
    font-size:.62rem;
    letter-spacing:.08em;
    white-space:nowrap;
  }

  .site-nav a:hover{
    letter-spacing:.08em;
    transform:none;
  }

  .side-scroll-controls{
    display:none !important;
  }

  .page-panel,
  .hero-panel{
    min-height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .hero-grid,
  .split-section,
  .contact-panel{
    grid-template-columns:1fr !important;
  }

  .hero-grid{
    height:auto !important;
    gap:20px;
    align-items:start;
    padding:clamp(26px, 8vw, 38px) 20px !important;
  }

  h2{
    max-width:8.8ch;
    font-size:clamp(3rem, 17vw, 5.35rem);
    line-height:.86;
  }

  .hero-subline{
    max-width:30rem;
    margin-top:18px;
    font-size:1rem;
    line-height:1.58;
  }

  .hero-note{
    width:100%;
    align-self:stretch !important;
    margin-top:2px;
    padding:20px !important;
    transform:none !important;
  }

  .hero-note p{
    margin-bottom:18px;
    font-size:1rem !important;
    line-height:1.55;
  }

  .split-section{
    gap:16px;
    padding-top:0;
  }

  .panel,
  .contact-panel{
    padding:22px;
  }

  .panel-large{
    min-height:auto;
  }

  h3{
    max-width:11ch;
    font-size:clamp(2rem, 10vw, 3.8rem);
  }

  .detail-row{
    grid-template-columns:1fr;
    gap:12px;
    padding:20px;
  }

  .detail-row:hover,
  .plain-list li:hover,
  .contact-card:hover{
    transform:none;
  }

  .price-line{
    font-size:clamp(2.8rem, 14vw, 4.4rem);
  }

  .contact-card{
    grid-template-columns:1fr;
    gap:7px;
    padding:16px 0;
  }

  .contact-card strong,
  .edit-note,
  .edit-note code{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .contact-card em{
    justify-self:start;
  }

  .bg-word{
    font-size:clamp(2rem, 14vw, 4.8rem);
  }
}

@media (max-width: 480px){
  .site-nav a{
    font-size:.57rem;
    padding:9px 2px;
    letter-spacing:.06em;
  }

  h1{
    font-size:clamp(2.05rem, 10.5vw, 3.2rem);
  }

  h2{
    font-size:clamp(2.75rem, 16.5vw, 4.85rem);
  }

  .hero-grid,
  .panel,
  .contact-panel,
  .detail-row{
    padding:18px !important;
  }
}

@media (max-height: 720px) and (max-width: 900px){
  .gate-stage{
    padding:14px 16px;
  }

  h1{
    margin-bottom:10px;
    font-size:clamp(1.95rem, 9.6vw, 3rem);
  }

  .question-help{
    margin-bottom:12px;
    font-size:.88rem;
    line-height:1.42;
  }

  .answer-card{
    min-height:56px;
    padding:11px 13px;
  }

  .gate-meta,
  .gate-footer{
    padding:10px 12px;
  }
}

@media (hover: none) and (pointer: coarse){
  .gate-card:hover,
  .hero-panel:hover,
  .panel:hover,
  .details-panel:hover,
  .contact-panel:hover,
  .hero-note:hover,
  .answer-card:hover,
  .button:hover,
  .site-nav a:hover{
    transform:none;
  }
}

/* ==========================================================
   Final mobile/phone reliability pass
   - Respect [hidden] even when component classes set display
   - Remove horizontal layout/animations on touch phones
   - Prevent decorative/background text and reveal transforms
     from widening the page
   - Prefer readable, non-clipped cards on small screens
   ========================================================== */
[hidden],
.main-content[hidden]{
  display:none !important;
}

html,
body,
.page-shell,
.main-content{
  max-width:100%;
}

body{
  overflow-x:hidden;
  overscroll-behavior-x:none;
}

.background-geometry,
.click-layer{
  width:100vw;
  max-width:100vw;
  contain:paint;
}

.bg-word{
  max-width:100vw;
  overflow:hidden;
  text-overflow:clip;
}

/* Shared phone layout: portrait phones, small screens, and phone landscape. */
@media (max-width: 980px), (hover: none) and (pointer: coarse) and (max-width: 1180px){
  :root{
    --cut:18px;
    --cut-small:10px;
  }

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  body{
    touch-action:pan-y;
  }

  body.gate-active{
    height:auto;
    min-height:100svh;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body:not(.gate-active){
    overflow-y:auto;
    overflow-x:hidden !important;
  }

  .background-geometry,
  .click-layer{
    inset:0;
    overflow:hidden !important;
    max-width:100vw;
  }

  .bg-word{
    max-width:96vw;
    font-size:clamp(1.8rem, 12vw, 4.6rem);
    letter-spacing:.1em;
    white-space:nowrap;
    opacity:.035;
    transform:none !important;
    animation:none !important;
  }

  .access-gate{
    min-height:100svh;
    height:auto;
    padding:max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
    place-items:center;
    overflow:visible;
  }

  .gate-wrap{
    width:100%;
    max-width:600px;
  }

  .gate-card{
    width:100%;
    min-height:min(620px, calc(100svh - 28px));
    height:auto;
    max-height:none;
    grid-template-rows:auto minmax(0, 1fr) auto;
    overflow:visible;
    clip-path:none !important;
  }

  .gate-card::before,
  .hero-panel::before,
  .panel::before,
  .details-panel::before,
  .contact-panel::before{
    clip-path:none !important;
    inset:10px;
  }

  .gate-meta,
  .gate-footer{
    padding:12px 14px;
    gap:10px;
  }

  .gate-stage{
    min-height:0;
    align-self:center;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(18px, 5svh, 34px) 18px;
    overflow:visible;
  }

  .gate-stage.is-leaving > *,
  .gate-stage.is-entering > *{
    transform:none !important;
    filter:none !important;
  }

  h1,
  h2,
  h3,
  p,
  li,
  a,
  button,
  strong,
  span,
  em,
  code{
    min-width:0;
    overflow-wrap:break-word;
    word-break:normal;
  }

  h1{
    max-width:12ch;
    margin-bottom:14px;
    font-size:clamp(2rem, 10.5vw, 3.55rem);
    line-height:.98;
    letter-spacing:-.055em;
  }

  .question-help{
    margin-bottom:18px;
    font-size:.95rem;
    line-height:1.5;
  }

  .answer-grid{
    grid-template-columns:1fr;
    gap:10px;
    max-width:none;
  }

  .answer-card{
    min-height:auto;
    gap:8px;
    padding:14px 15px;
    clip-path:none !important;
  }

  .answer-card:hover,
  .answer-card.is-selected{
    clip-path:none !important;
    transform:none !important;
  }

  .answer-card strong{
    font-size:1rem;
    line-height:1.2;
  }

  .answer-card span{
    font-size:.88rem;
    line-height:1.35;
  }

  .gate-footer{
    align-items:center;
    flex-wrap:wrap;
  }

  .progress-track{
    order:-1;
    flex:1 0 100%;
    max-width:none;
  }

  .gate-footer p,
  .back-button{
    font-size:.64rem;
    line-height:1.25;
  }

  .main-content{
    width:100%;
    height:auto !important;
    min-height:100svh;
    display:block !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    padding:calc(84px + env(safe-area-inset-top)) 14px calc(44px + env(safe-area-inset-bottom));
    scroll-snap-type:none !important;
    scroll-padding-inline:0 !important;
    transform:none !important;
    gap:0 !important;
  }

  .main-content .site-frame{
    width:100% !important;
    max-width:720px;
    flex:none !important;
    margin:0 auto 16px !important;
    padding-inline:0 !important;
    scroll-snap-align:none !important;
  }

  .site-header{
    position:fixed;
    top:max(10px, env(safe-area-inset-top));
    left:14px;
    right:14px;
    width:auto !important;
    min-height:auto !important;
    transform:none !important;
    padding:6px;
    clip-path:none !important;
  }

  .site-nav{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
  }

  .site-nav a{
    min-width:0;
    padding:10px 4px;
    text-align:center;
    font-size:.62rem;
    line-height:1.15;
    letter-spacing:.06em;
    white-space:normal;
    clip-path:none !important;
  }

  .site-nav a:hover{
    transform:none !important;
    letter-spacing:.06em;
    clip-path:none !important;
  }

  .side-scroll-controls{
    display:none !important;
  }

  .page-panel,
  .hero-panel{
    min-height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    clip-path:none !important;
  }

  .reveal-block{
    opacity:1 !important;
    transform:none !important;
    transition:opacity .25s ease;
  }

  .hero-grid,
  .split-section,
  .contact-panel{
    grid-template-columns:1fr !important;
  }

  .hero-grid{
    height:auto !important;
    gap:20px;
    align-items:start;
    padding:clamp(24px, 7vw, 36px) 20px !important;
  }

  .hero-panel,
  .panel,
  .details-panel,
  .contact-panel,
  .hero-note,
  .mini-block,
  .price-flare,
  .button,
  .contact-card em{
    clip-path:none !important;
  }

  .hero-panel,
  .panel,
  .details-panel,
  .contact-panel,
  .hero-note{
    overflow:visible !important;
  }

  h2{
    max-width:9.5ch;
    font-size:clamp(2.55rem, 15vw, 5rem);
    line-height:.92;
    letter-spacing:-.065em;
  }

  .hero-subline{
    max-width:30rem;
    margin-top:16px;
    font-size:1rem;
    line-height:1.58;
  }

  .hero-note{
    width:100%;
    align-self:stretch !important;
    margin-top:2px;
    padding:20px !important;
    transform:none !important;
  }

  .hero-note p{
    margin-bottom:18px;
    font-size:1rem !important;
    line-height:1.55;
  }

  .split-section{
    gap:16px;
    padding-top:0;
  }

  .panel,
  .contact-panel{
    padding:22px;
  }

  .panel-large{
    min-height:auto;
  }

  h3{
    max-width:12ch;
    font-size:clamp(1.85rem, 9vw, 3.6rem);
    line-height:.98;
    letter-spacing:-.055em;
  }

  .panel p,
  .detail-row p,
  .contact-panel p,
  .plain-list li{
    line-height:1.58;
  }

  .detail-row{
    grid-template-columns:1fr !important;
    gap:12px;
    padding:20px;
  }

  .detail-row:hover,
  .plain-list li:hover,
  .contact-card:hover,
  .panel:hover,
  .details-panel:hover,
  .contact-panel:hover,
  .hero-panel:hover,
  .hero-note:hover{
    transform:none !important;
  }

  .price-flare{
    padding:16px 18px;
  }

  .price-line{
    font-size:clamp(2.35rem, 12.5vw, 4rem);
    line-height:.95;
    letter-spacing:-.06em;
  }

  .contact-card{
    grid-template-columns:1fr !important;
    gap:7px;
    padding:16px 0;
  }

  .contact-card strong,
  .edit-note,
  .edit-note code{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .contact-card em{
    justify-self:start;
    opacity:1;
    transform:none;
    max-width:100%;
  }
}

@media (max-width: 360px){
  .site-nav{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .main-content{
    padding-top:calc(128px + env(safe-area-inset-top));
  }

  h1{
    font-size:clamp(1.85rem, 10vw, 3rem);
  }

  h2{
    font-size:clamp(2.35rem, 14vw, 4.3rem);
  }

  .hero-grid,
  .panel,
  .contact-panel,
  .detail-row{
    padding:18px !important;
  }
}

@media (max-height: 520px) and (hover: none) and (pointer: coarse){
  .access-gate{
    place-items:start center;
  }

  .gate-card{
    min-height:auto;
  }

  .gate-stage{
    justify-content:flex-start;
    padding:14px 16px;
  }

  h1{
    margin-bottom:10px;
    font-size:clamp(1.7rem, 7.5vw, 2.75rem);
  }

  .question-help{
    margin-bottom:12px;
    font-size:.86rem;
    line-height:1.4;
  }

  .answer-card{
    padding:11px 13px;
  }

  .gate-meta,
  .gate-footer{
    padding:10px 12px;
  }
}

/* Extra phone edge-case cleanup */
@media (max-width: 980px), (hover: none) and (pointer: coarse) and (max-width: 1180px){
  .bg-word{
    display:none !important;
  }

  .main-content .site-header.site-frame{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:6px !important;
    left:14px;
    right:14px;
  }
}

/* ==========================================================
   Mobile unlock/layout hotfix v2
   This final override intentionally wins over the earlier
   desktop/side-scroll rules so the post-question page stacks
   cleanly on phones without clipped or overflowing text.
   ========================================================== */
@media (max-width: 980px), (hover: none) and (pointer: coarse) and (max-width: 1180px){
  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    overflow-x:hidden !important;
  }

  body{
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  #gate.hidden-lock{
    display:none !important;
  }

  #mainContent.main-content:not([hidden]){
    display:block !important;
    opacity:1 !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:100svh !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    padding:calc(86px + env(safe-area-inset-top)) 10px calc(36px + env(safe-area-inset-bottom)) !important;
    scroll-snap-type:none !important;
    scroll-padding-inline:0 !important;
    gap:0 !important;
  }

  #mainContent .site-frame:not(.site-header){
    width:100% !important;
    max-width:720px !important;
    min-width:0 !important;
    flex:none !important;
    margin:0 auto 14px !important;
    padding-inline:0 !important;
    scroll-snap-align:none !important;
  }

  #mainContent .site-header.site-frame{
    position:fixed !important;
    z-index:60 !important;
    top:max(10px, env(safe-area-inset-top)) !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:6px !important;
    transform:none !important;
    clip-path:none !important;
    overflow:visible !important;
  }

  .site-nav{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:5px !important;
  }

  .site-nav a{
    min-width:0 !important;
    max-width:100% !important;
    padding:9px 2px !important;
    text-align:center !important;
    white-space:normal !important;
    font-size:clamp(.52rem, 2.25vw, .66rem) !important;
    line-height:1.25 !important;
    letter-spacing:.045em !important;
    clip-path:none !important;
    overflow-wrap:anywhere !important;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible{
    transform:none !important;
    letter-spacing:.045em !important;
    clip-path:none !important;
  }

  .side-scroll-controls{
    display:none !important;
  }

  .hero-panel,
  .page-panel,
  .split-section,
  .panel,
  .details-panel,
  .contact-panel,
  .hero-note,
  .mini-block,
  .detail-row,
  .price-flare{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    clip-path:none !important;
  }

  .hero-panel,
  .page-panel,
  .panel,
  .details-panel,
  .contact-panel,
  .hero-note{
    overflow:visible !important;
  }

  .hero-grid,
  .split-section,
  .contact-panel,
  .detail-row{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:16px !important;
    align-items:start !important;
  }

  .hero-grid{
    height:auto !important;
    padding:22px 14px !important;
  }

  .panel,
  .contact-panel,
  .detail-row{
    padding:18px 14px !important;
  }

  .hero-note,
  .mini-block,
  .price-flare{
    padding:16px !important;
  }

  h1,
  h2,
  h3,
  .detail-row h3,
  .price-line{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    letter-spacing:-.025em !important;
    line-height:1.08 !important;
    text-wrap:balance;
  }

  h1{
    font-size:clamp(1.9rem, 9.5vw, 3.1rem) !important;
  }

  h2{
    font-size:clamp(2.15rem, 11.8vw, 4rem) !important;
  }

  h3{
    font-size:clamp(1.65rem, 8vw, 3rem) !important;
  }

  .detail-row h3{
    font-size:clamp(1.45rem, 7vw, 2.45rem) !important;
  }

  .price-line{
    font-size:clamp(2.05rem, 10.5vw, 3.2rem) !important;
    letter-spacing:-.03em !important;
    line-height:1.05 !important;
  }

  p,
  li,
  a,
  button,
  strong,
  span,
  em,
  code,
  .hero-subline,
  .panel p,
  .detail-row p,
  .contact-panel p,
  .plain-list li,
  .contact-card strong,
  .edit-note,
  .edit-note code{
    max-width:100% !important;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  p,
  li,
  .hero-subline,
  .panel p,
  .detail-row p,
  .contact-panel p,
  .hero-note p{
    line-height:1.58 !important;
  }

  .contact-card{
    grid-template-columns:minmax(0, 1fr) !important;
    gap:7px !important;
    padding:15px 0 !important;
    transform:none !important;
  }

  .contact-card em{
    justify-self:start !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }

  .hero-panel:hover,
  .panel:hover,
  .details-panel:hover,
  .contact-panel:hover,
  .hero-note:hover,
  .detail-row:hover,
  .plain-list li:hover,
  .contact-card:hover{
    transform:none !important;
  }
}

@media (max-width: 360px){
  #mainContent.main-content:not([hidden]){
    padding-top:calc(126px + env(safe-area-inset-top)) !important;
  }

  .site-nav{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  h2{
    font-size:clamp(2rem, 11vw, 3.35rem) !important;
  }

  h3{
    font-size:clamp(1.55rem, 7.8vw, 2.7rem) !important;
  }

  .price-line{
    font-size:clamp(1.9rem, 10vw, 2.85rem) !important;
  }
}

/* ==========================================================
   PHONE FINAL OVERRIDE
   This block is intentionally last. It disables the desktop
   sideways-panels design on real phones and forces a simple
   vertical, readable layout after the 3-question gate.
   ========================================================== */
body.is-phone-layout,
body.is-phone-layout *{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.is-phone-layout{
  width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
  touch-action:pan-y !important;
}

body.is-phone-layout .background-geometry .bg-word{
  display:none !important;
}

body.is-phone-layout.site-unlocked .page-shell,
body.is-phone-layout.site-unlocked #mainContent{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
}

body.is-phone-layout.site-unlocked #mainContent.main-content:not([hidden]){
  display:block !important;
  position:relative !important;
  height:auto !important;
  min-height:100svh !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:visible !important;
  padding:calc(10px + env(safe-area-inset-top)) 10px calc(42px + env(safe-area-inset-bottom)) !important;
  scroll-snap-type:none !important;
  scroll-padding:0 !important;
  transform:none !important;
  opacity:1 !important;
  gap:0 !important;
}

body.is-phone-layout.site-unlocked #mainContent > .site-frame:not(.site-header),
body.is-phone-layout.site-unlocked #mainContent > section.site-frame{
  display:block !important;
  width:100% !important;
  max-width:720px !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  flex:0 1 auto !important;
  margin:0 auto 14px !important;
  padding:0 !important;
  overflow:visible !important;
  scroll-snap-align:none !important;
  scroll-snap-stop:normal !important;
  transform:none !important;
  clip-path:none !important;
}

body.is-phone-layout.site-unlocked #mainContent .site-header.site-frame{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  z-index:70 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 auto 14px !important;
  padding:6px !important;
  transform:none !important;
  clip-path:none !important;
  overflow:visible !important;
}

body.is-phone-layout.site-unlocked .site-nav{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:5px !important;
}

body.is-phone-layout.site-unlocked .site-nav a{
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
  display:block !important;
  padding:9px 2px !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  font-size:clamp(.5rem, 2.25vw, .64rem) !important;
  line-height:1.2 !important;
  letter-spacing:.045em !important;
  clip-path:none !important;
  transform:none !important;
}

body.is-phone-layout.site-unlocked .side-scroll-controls{
  display:none !important;
}

body.is-phone-layout.site-unlocked .hero-panel,
body.is-phone-layout.site-unlocked .page-panel,
body.is-phone-layout.site-unlocked .split-section,
body.is-phone-layout.site-unlocked .panel,
body.is-phone-layout.site-unlocked .details-panel,
body.is-phone-layout.site-unlocked .contact-panel,
body.is-phone-layout.site-unlocked .hero-note,
body.is-phone-layout.site-unlocked .mini-block,
body.is-phone-layout.site-unlocked .detail-row,
body.is-phone-layout.site-unlocked .price-flare{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  transform:none !important;
  clip-path:none !important;
}

body.is-phone-layout.site-unlocked .hero-grid,
body.is-phone-layout.site-unlocked .split-section,
body.is-phone-layout.site-unlocked .contact-panel,
body.is-phone-layout.site-unlocked .detail-row,
body.is-phone-layout.site-unlocked .contact-card{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) !important;
  align-items:start !important;
  gap:16px !important;
}

body.is-phone-layout.site-unlocked .hero-grid{
  height:auto !important;
  padding:24px 18px !important;
}

body.is-phone-layout.site-unlocked .panel,
body.is-phone-layout.site-unlocked .details-panel,
body.is-phone-layout.site-unlocked .contact-panel,
body.is-phone-layout.site-unlocked .detail-row{
  padding:20px 18px !important;
}

body.is-phone-layout.site-unlocked .hero-note,
body.is-phone-layout.site-unlocked .mini-block,
body.is-phone-layout.site-unlocked .price-flare{
  padding:18px !important;
}

body.is-phone-layout.site-unlocked .reveal-block,
body.is-phone-layout.site-unlocked .interactive-surface,
body.is-phone-layout.site-unlocked .interactive-surface:hover,
body.is-phone-layout.site-unlocked .detail-row:hover,
body.is-phone-layout.site-unlocked .contact-card:hover,
body.is-phone-layout.site-unlocked .panel:hover,
body.is-phone-layout.site-unlocked .details-panel:hover,
body.is-phone-layout.site-unlocked .contact-panel:hover,
body.is-phone-layout.site-unlocked .hero-panel:hover,
body.is-phone-layout.site-unlocked .hero-note:hover{
  opacity:1 !important;
  transform:none !important;
}

body.is-phone-layout.site-unlocked h1,
body.is-phone-layout.site-unlocked h2,
body.is-phone-layout.site-unlocked h3,
body.is-phone-layout.site-unlocked p,
body.is-phone-layout.site-unlocked li,
body.is-phone-layout.site-unlocked a,
body.is-phone-layout.site-unlocked button,
body.is-phone-layout.site-unlocked strong,
body.is-phone-layout.site-unlocked span,
body.is-phone-layout.site-unlocked em,
body.is-phone-layout.site-unlocked code{
  max-width:100% !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

body.is-phone-layout.site-unlocked h2{
  margin:0 !important;
  font-size:clamp(2.35rem, 12vw, 4rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  text-wrap:balance !important;
}

body.is-phone-layout.site-unlocked h3,
body.is-phone-layout.site-unlocked .detail-row h3{
  margin:0 0 12px !important;
  font-size:clamp(1.65rem, 8vw, 3rem) !important;
  line-height:1.05 !important;
  letter-spacing:-.04em !important;
  text-wrap:balance !important;
}

body.is-phone-layout.site-unlocked .hero-subline,
body.is-phone-layout.site-unlocked .hero-note p,
body.is-phone-layout.site-unlocked .panel p,
body.is-phone-layout.site-unlocked .detail-row p,
body.is-phone-layout.site-unlocked .contact-panel p,
body.is-phone-layout.site-unlocked .plain-list li{
  font-size:clamp(.98rem, 4.1vw, 1.08rem) !important;
  line-height:1.55 !important;
}

body.is-phone-layout.site-unlocked .price-line{
  font-size:clamp(2rem, 10.5vw, 3.25rem) !important;
  line-height:1.05 !important;
  letter-spacing:-.04em !important;
}

body.is-phone-layout.site-unlocked .contact-card{
  padding:16px 0 !important;
}

body.is-phone-layout.site-unlocked .contact-card em{
  justify-self:start !important;
  opacity:1 !important;
  transform:none !important;
  clip-path:none !important;
}

body.is-phone-layout.site-unlocked .contact-card::before,
body.is-phone-layout.site-unlocked .interactive-surface::after{
  display:none !important;
}

@media (max-width:360px){
  body.is-phone-layout.site-unlocked #mainContent.main-content:not([hidden]){
    padding-top:calc(10px + env(safe-area-inset-top)) !important;
  }
  body.is-phone-layout.site-unlocked .site-nav{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================
   MOBILE RESILIENCE FINAL PASS
   Purpose: protect future edits from breaking phone layout.
   This block is last on purpose so it wins over older desktop
   panel, clip-path, hover, and fixed-height rules.
   ========================================================== */
*,
*::before,
*::after{
  min-width:0;
}

img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
}

.site-frame,
.gate-card,
.gate-stage,
.answer-grid,
.hero-grid,
.split-section,
.panel,
.details-panel,
.contact-panel,
.hero-note,
.mini-block,
.detail-row,
.contact-card,
.price-flare{
  min-width:0;
}

h1,
h2,
h3,
p,
li,
a,
button,
strong,
span,
em,
code{
  min-width:0;
  overflow-wrap:break-word;
}

.contact-card strong,
.edit-note,
.edit-note code,
#discordLabel,
#emailLabel{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Phone mode is added by script.js using width + touch detection. */
body.is-phone-layout{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
  overscroll-behavior-x:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  touch-action:pan-y;
}

body.is-phone-layout .background-geometry{
  overflow:hidden !important;
  contain:paint;
}

body.is-phone-layout .bg-word{
  display:none !important;
}

body.is-phone-layout .click-layer{
  width:100vw;
  max-width:100vw;
  overflow:hidden !important;
  contain:paint;
}

@media (max-width: 980px), (hover: none) and (pointer: coarse) and (max-width: 1180px){
  :root{
    --cut:16px;
    --cut-small:10px;
  }

  html,
  body,
  .page-shell{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  body.gate-active,
  body.is-phone-layout.gate-active{
    min-height:100svh;
    height:auto;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  .access-gate{
    width:100% !important;
    min-height:100svh;
    height:auto;
    padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
    place-items:center;
    overflow:visible !important;
  }

  @supports (height:100dvh){
    .access-gate{
      min-height:100dvh;
    }
  }

  .gate-wrap{
    width:100% !important;
    max-width:600px !important;
  }

  .gate-card{
    width:100% !important;
    min-height:min(620px, calc(100svh - 24px)) !important;
    height:auto !important;
    max-height:none !important;
    grid-template-rows:auto minmax(0, 1fr) auto !important;
    overflow:visible !important;
    clip-path:none !important;
  }

  .gate-card::before,
  .hero-panel::before,
  .panel::before,
  .details-panel::before,
  .contact-panel::before{
    inset:10px !important;
    clip-path:none !important;
  }

  .gate-meta,
  .gate-footer{
    padding:12px 14px !important;
    gap:10px !important;
    flex-wrap:wrap;
  }

  .gate-stage{
    width:100% !important;
    max-width:100% !important;
    padding:clamp(18px, 5svh, 34px) 18px !important;
    overflow:visible !important;
  }

  .gate-stage.is-leaving > *,
  .gate-stage.is-entering > *{
    transform:none !important;
    filter:none !important;
  }

  h1{
    max-width:100% !important;
    margin-bottom:14px !important;
    font-size:clamp(1.95rem, 9.8vw, 3.35rem) !important;
    line-height:1 !important;
    letter-spacing:-.045em !important;
    text-wrap:balance;
  }

  .question-help{
    max-width:100% !important;
    margin-bottom:18px !important;
    font-size:clamp(.88rem, 3.9vw, .98rem) !important;
    line-height:1.5 !important;
  }

  .question-help:empty{
    display:none !important;
  }

  .answer-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:10px !important;
    max-width:none !important;
  }

  .answer-card{
    width:100% !important;
    min-height:0 !important;
    padding:14px 15px !important;
    gap:8px !important;
    clip-path:none !important;
    overflow:visible !important;
  }

  .answer-card:hover,
  .answer-card.is-selected,
  .answer-card:active{
    transform:none !important;
    clip-path:none !important;
  }

  .answer-card strong{
    font-size:1rem !important;
    line-height:1.2 !important;
  }

  .answer-card span{
    font-size:.88rem !important;
    line-height:1.35 !important;
  }

  .progress-track{
    order:-1;
    flex:1 0 100% !important;
    max-width:none !important;
  }

  .gate-footer p,
  .back-button{
    font-size:.64rem !important;
    line-height:1.25 !important;
  }

  #mainContent.main-content:not([hidden]),
  body.is-phone-layout.site-unlocked #mainContent.main-content:not([hidden]){
    display:block !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:100svh !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    padding:calc(10px + env(safe-area-inset-top)) 10px calc(42px + env(safe-area-inset-bottom)) !important;
    scroll-snap-type:none !important;
    scroll-padding:0 !important;
    transform:none !important;
    opacity:1 !important;
    gap:0 !important;
  }

  #mainContent > .site-frame:not(.site-header),
  #mainContent > section.site-frame,
  body.is-phone-layout.site-unlocked #mainContent > .site-frame:not(.site-header),
  body.is-phone-layout.site-unlocked #mainContent > section.site-frame{
    display:block !important;
    width:100% !important;
    max-width:720px !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    flex:0 1 auto !important;
    margin:0 auto 14px !important;
    padding:0 !important;
    overflow:visible !important;
    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
    transform:none !important;
    clip-path:none !important;
  }

  #mainContent .site-header.site-frame,
  body.is-phone-layout.site-unlocked #mainContent .site-header.site-frame{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:70 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 auto 14px !important;
    padding:6px !important;
    transform:none !important;
    clip-path:none !important;
    overflow:visible !important;
  }

  .site-nav,
  body.is-phone-layout.site-unlocked .site-nav{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:5px !important;
  }

  .site-nav a,
  body.is-phone-layout.site-unlocked .site-nav a{
    min-width:0 !important;
    width:auto !important;
    max-width:100% !important;
    display:block !important;
    padding:9px 2px !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    font-size:clamp(.5rem, 2.25vw, .64rem) !important;
    line-height:1.2 !important;
    letter-spacing:.04em !important;
    clip-path:none !important;
    transform:none !important;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible{
    transform:none !important;
    letter-spacing:.04em !important;
    clip-path:none !important;
  }

  .side-scroll-controls{
    display:none !important;
  }

  .hero-panel,
  .page-panel,
  .split-section,
  .panel,
  .details-panel,
  .contact-panel,
  .hero-note,
  .mini-block,
  .detail-row,
  .price-flare{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    transform:none !important;
    clip-path:none !important;
  }

  .hero-grid,
  .split-section,
  .contact-panel,
  .detail-row,
  .contact-card{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    align-items:start !important;
    gap:16px !important;
  }

  .hero-grid{
    height:auto !important;
    padding:24px 18px !important;
  }

  .panel,
  .details-panel,
  .contact-panel,
  .detail-row{
    padding:20px 18px !important;
  }

  .hero-note,
  .mini-block,
  .price-flare{
    padding:18px !important;
  }

  .reveal-block,
  .interactive-surface,
  .interactive-surface:hover,
  .detail-row:hover,
  .contact-card:hover,
  .panel:hover,
  .details-panel:hover,
  .contact-panel:hover,
  .hero-panel:hover,
  .hero-note:hover,
  .mini-block:hover,
  .button:hover,
  .plain-list li:hover{
    opacity:1 !important;
    transform:none !important;
  }

  .hero-panel::after{
    display:none !important;
  }

  h2{
    max-width:100% !important;
    margin:0 !important;
    font-size:clamp(2.25rem, 11.5vw, 4rem) !important;
    line-height:1.04 !important;
    letter-spacing:-.04em !important;
    text-wrap:balance;
  }

  h3,
  .detail-row h3{
    max-width:100% !important;
    margin:0 0 12px !important;
    font-size:clamp(1.6rem, 7.8vw, 3rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    text-wrap:balance;
  }

  .detail-row h3{
    margin-bottom:0 !important;
  }

  .hero-subline,
  .hero-note p,
  .panel p,
  .detail-row p,
  .contact-panel p,
  .plain-list li{
    max-width:100% !important;
    font-size:clamp(.96rem, 4vw, 1.08rem) !important;
    line-height:1.58 !important;
    overflow-wrap:break-word !important;
  }

  .price-line{
    max-width:100% !important;
    font-size:clamp(2rem, 10vw, 3.2rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.03em !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .contact-card{
    padding:16px 0 !important;
    overflow:visible !important;
  }

  .contact-card em{
    justify-self:start !important;
    max-width:100% !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }

  .contact-card::before,
  .interactive-surface::after{
    display:none !important;
  }
}

@media (max-width:360px){
  .site-nav,
  body.is-phone-layout.site-unlocked .site-nav{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  h1{
    font-size:clamp(1.78rem, 9.4vw, 2.7rem) !important;
  }

  h2{
    font-size:clamp(2rem, 10.6vw, 3.25rem) !important;
  }

  h3,
  .detail-row h3{
    font-size:clamp(1.48rem, 7.4vw, 2.55rem) !important;
  }

  .price-line{
    font-size:clamp(1.85rem, 9.5vw, 2.75rem) !important;
  }

  .hero-grid,
  .panel,
  .details-panel,
  .contact-panel,
  .detail-row{
    padding:17px 14px !important;
  }
}

@media (max-height:430px) and (hover:none) and (pointer:coarse){
  .access-gate{
    place-items:start center;
  }

  .gate-card{
    min-height:auto !important;
  }

  .gate-stage{
    padding:14px 16px !important;
  }

  h1{
    font-size:clamp(1.55rem, 6.2vw, 2.35rem) !important;
    margin-bottom:10px !important;
  }

  .answer-card{
    padding:10px 12px !important;
  }

  .question-help{
    margin-bottom:12px !important;
    font-size:.84rem !important;
    line-height:1.38 !important;
  }
}


/* Hide decorative price geometry on phones so it can never cover copy. */
@media (max-width: 980px), (hover: none) and (pointer: coarse) and (max-width: 1180px){
  .price-panel::before,
  .price-panel::after,
  .price-flare::before{
    display:none !important;
  }
}

/* ==========================================================
   SIMPLE MOBILE MAIN PAGE PATCH
   Desktop and the 3-question gate are left alone.
   This only affects the unlocked main page on phones/touch.
   It removes the complex sideways/card effects and uses a
   plain vertical stack so blocks cannot overlap or clip text.
   ========================================================== */
@media (max-width: 900px), (hover: none) and (pointer: coarse){
  body.site-unlocked,
  body.is-phone-layout.site-unlocked{
    height:auto !important;
    min-height:100svh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:var(--bg) !important;
  }

  body.site-unlocked .background-geometry,
  body.is-phone-layout.site-unlocked .background-geometry{
    display:none !important;
  }

  body.site-unlocked #mainContent.main-content:not([hidden]),
  body.is-phone-layout.site-unlocked #mainContent.main-content:not([hidden]){
    display:block !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:100svh !important;
    max-height:none !important;
    padding:calc(12px + env(safe-area-inset-top)) 12px calc(40px + env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    scroll-padding:0 !important;
    gap:0 !important;
    opacity:1 !important;
    transform:none !important;
  }

  body.site-unlocked #mainContent *,
  body.site-unlocked #mainContent *::before,
  body.site-unlocked #mainContent *::after{
    min-width:0 !important;
    max-width:100%;
    box-sizing:border-box;
  }

  body.site-unlocked .side-scroll-controls,
  body.is-phone-layout.site-unlocked .side-scroll-controls{
    display:none !important;
  }

  body.site-unlocked #mainContent .site-header.site-frame,
  body.is-phone-layout.site-unlocked #mainContent .site-header.site-frame{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 0 12px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    clip-path:none !important;
    transform:none !important;
    overflow:visible !important;
  }

  body.site-unlocked #mainContent .site-nav,
  body.is-phone-layout.site-unlocked #mainContent .site-nav{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }

  body.site-unlocked #mainContent .site-nav a,
  body.is-phone-layout.site-unlocked #mainContent .site-nav a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    width:100% !important;
    padding:11px 8px !important;
    border:1px solid rgba(240,164,95,.22) !important;
    border-radius:12px !important;
    background:rgba(9,9,9,.92) !important;
    color:var(--ink) !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:.7rem !important;
    line-height:1.15 !important;
    letter-spacing:.07em !important;
    clip-path:none !important;
    transform:none !important;
  }

  body.site-unlocked #mainContent .site-nav a:hover,
  body.site-unlocked #mainContent .site-nav a:focus-visible{
    letter-spacing:.07em !important;
    transform:none !important;
  }

  body.site-unlocked #mainContent > .site-frame:not(.site-header),
  body.site-unlocked #mainContent > section.site-frame,
  body.is-phone-layout.site-unlocked #mainContent > .site-frame:not(.site-header),
  body.is-phone-layout.site-unlocked #mainContent > section.site-frame{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 0 12px !important;
    padding:0 !important;
    overflow:visible !important;
    scroll-snap-align:none !important;
    clip-path:none !important;
    transform:none !important;
  }

  body.site-unlocked #mainContent .hero-panel,
  body.site-unlocked #mainContent .page-panel,
  body.site-unlocked #mainContent .split-section,
  body.site-unlocked #mainContent .panel,
  body.site-unlocked #mainContent .details-panel,
  body.site-unlocked #mainContent .contact-panel,
  body.site-unlocked #mainContent .hero-note,
  body.site-unlocked #mainContent .mini-block,
  body.site-unlocked #mainContent .detail-row,
  body.site-unlocked #mainContent .price-flare,
  body.is-phone-layout.site-unlocked #mainContent .hero-panel,
  body.is-phone-layout.site-unlocked #mainContent .page-panel,
  body.is-phone-layout.site-unlocked #mainContent .split-section,
  body.is-phone-layout.site-unlocked #mainContent .panel,
  body.is-phone-layout.site-unlocked #mainContent .details-panel,
  body.is-phone-layout.site-unlocked #mainContent .contact-panel,
  body.is-phone-layout.site-unlocked #mainContent .hero-note,
  body.is-phone-layout.site-unlocked #mainContent .mini-block,
  body.is-phone-layout.site-unlocked #mainContent .detail-row,
  body.is-phone-layout.site-unlocked #mainContent .price-flare{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    clip-path:none !important;
    transform:none !important;
  }

  body.site-unlocked #mainContent .hero-panel,
  body.site-unlocked #mainContent .panel,
  body.site-unlocked #mainContent .details-panel,
  body.site-unlocked #mainContent .contact-panel,
  body.is-phone-layout.site-unlocked #mainContent .hero-panel,
  body.is-phone-layout.site-unlocked #mainContent .panel,
  body.is-phone-layout.site-unlocked #mainContent .details-panel,
  body.is-phone-layout.site-unlocked #mainContent .contact-panel{
    padding:20px !important;
    border:1px solid rgba(240,164,95,.20) !important;
    border-radius:16px !important;
    background:rgba(9,9,9,.96) !important;
    box-shadow:none !important;
  }

  body.site-unlocked #mainContent .hero-grid,
  body.site-unlocked #mainContent .split-section,
  body.site-unlocked #mainContent .details-panel,
  body.site-unlocked #mainContent .contact-panel,
  body.site-unlocked #mainContent .stack-panel,
  body.site-unlocked #mainContent .contact-list,
  body.site-unlocked #mainContent .contact-card,
  body.is-phone-layout.site-unlocked #mainContent .hero-grid,
  body.is-phone-layout.site-unlocked #mainContent .split-section,
  body.is-phone-layout.site-unlocked #mainContent .details-panel,
  body.is-phone-layout.site-unlocked #mainContent .contact-panel,
  body.is-phone-layout.site-unlocked #mainContent .stack-panel,
  body.is-phone-layout.site-unlocked #mainContent .contact-list,
  body.is-phone-layout.site-unlocked #mainContent .contact-card{
    display:block !important;
    grid-template-columns:none !important;
    gap:0 !important;
    align-items:initial !important;
  }

  body.site-unlocked #mainContent .hero-grid,
  body.is-phone-layout.site-unlocked #mainContent .hero-grid{
    padding:0 !important;
    height:auto !important;
  }

  body.site-unlocked #mainContent .hero-note,
  body.site-unlocked #mainContent .mini-block,
  body.site-unlocked #mainContent .price-flare,
  body.is-phone-layout.site-unlocked #mainContent .hero-note,
  body.is-phone-layout.site-unlocked #mainContent .mini-block,
  body.is-phone-layout.site-unlocked #mainContent .price-flare{
    margin-top:16px !important;
    padding:16px !important;
    border:1px solid rgba(247,244,234,.12) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.035) !important;
  }

  body.site-unlocked #mainContent .mini-block + .mini-block,
  body.is-phone-layout.site-unlocked #mainContent .mini-block + .mini-block{
    margin-top:10px !important;
  }

  body.site-unlocked #mainContent .detail-row,
  body.is-phone-layout.site-unlocked #mainContent .detail-row{
    padding:16px 0 !important;
    border-top:1px solid rgba(247,244,234,.12) !important;
  }

  body.site-unlocked #mainContent .detail-row:first-child,
  body.is-phone-layout.site-unlocked #mainContent .detail-row:first-child{
    padding-top:0 !important;
    border-top:0 !important;
  }

  body.site-unlocked #mainContent .detail-row:last-child,
  body.is-phone-layout.site-unlocked #mainContent .detail-row:last-child{
    padding-bottom:0 !important;
  }

  body.site-unlocked #mainContent .plain-list,
  body.is-phone-layout.site-unlocked #mainContent .plain-list{
    display:block !important;
    margin:16px 0 0 !important;
    padding:0 !important;
    list-style:none !important;
  }

  body.site-unlocked #mainContent .plain-list li,
  body.is-phone-layout.site-unlocked #mainContent .plain-list li{
    display:block !important;
    padding:12px 0 !important;
    border-top:1px solid rgba(247,244,234,.12) !important;
  }

  body.site-unlocked #mainContent .contact-card,
  body.is-phone-layout.site-unlocked #mainContent .contact-card{
    padding:15px 0 !important;
    border-top:1px solid rgba(247,244,234,.12) !important;
  }

  body.site-unlocked #mainContent .contact-card:first-child,
  body.is-phone-layout.site-unlocked #mainContent .contact-card:first-child{
    margin-top:10px !important;
  }

  body.site-unlocked #mainContent .contact-card strong,
  body.site-unlocked #mainContent .edit-note,
  body.site-unlocked #mainContent .edit-note code,
  body.is-phone-layout.site-unlocked #mainContent .contact-card strong,
  body.is-phone-layout.site-unlocked #mainContent .edit-note,
  body.is-phone-layout.site-unlocked #mainContent .edit-note code{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  body.site-unlocked #mainContent .button,
  body.is-phone-layout.site-unlocked #mainContent .button{
    display:block !important;
    width:100% !important;
    padding:14px 16px !important;
    border-radius:12px !important;
    text-align:center !important;
    clip-path:none !important;
  }

  body.site-unlocked #mainContent .eyebrow,
  body.site-unlocked #mainContent .detail-row > span,
  body.site-unlocked #mainContent .contact-list span,
  body.site-unlocked #mainContent .contact-card em,
  body.is-phone-layout.site-unlocked #mainContent .eyebrow,
  body.is-phone-layout.site-unlocked #mainContent .detail-row > span,
  body.is-phone-layout.site-unlocked #mainContent .contact-list span,
  body.is-phone-layout.site-unlocked #mainContent .contact-card em{
    display:block !important;
    margin-bottom:8px !important;
    font-size:.68rem !important;
    line-height:1.25 !important;
    letter-spacing:.11em !important;
    white-space:normal !important;
  }

  body.site-unlocked #mainContent h2,
  body.is-phone-layout.site-unlocked #mainContent h2{
    max-width:100% !important;
    margin:0 !important;
    font-size:clamp(2.35rem, 12vw, 4rem) !important;
    line-height:1.04 !important;
    letter-spacing:-.04em !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    text-wrap:balance;
  }

  body.site-unlocked #mainContent h3,
  body.site-unlocked #mainContent .detail-row h3,
  body.is-phone-layout.site-unlocked #mainContent h3,
  body.is-phone-layout.site-unlocked #mainContent .detail-row h3{
    max-width:100% !important;
    margin:0 0 10px !important;
    font-size:clamp(1.65rem, 8vw, 2.75rem) !important;
    line-height:1.1 !important;
    letter-spacing:-.03em !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    text-wrap:balance;
  }

  body.site-unlocked #mainContent p,
  body.site-unlocked #mainContent li,
  body.site-unlocked #mainContent .hero-subline,
  body.site-unlocked #mainContent .hero-note p,
  body.site-unlocked #mainContent .panel p,
  body.site-unlocked #mainContent .detail-row p,
  body.site-unlocked #mainContent .contact-panel p,
  body.is-phone-layout.site-unlocked #mainContent p,
  body.is-phone-layout.site-unlocked #mainContent li,
  body.is-phone-layout.site-unlocked #mainContent .hero-subline,
  body.is-phone-layout.site-unlocked #mainContent .hero-note p,
  body.is-phone-layout.site-unlocked #mainContent .panel p,
  body.is-phone-layout.site-unlocked #mainContent .detail-row p,
  body.is-phone-layout.site-unlocked #mainContent .contact-panel p{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    font-size:clamp(.96rem, 4vw, 1.06rem) !important;
    line-height:1.6 !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  body.site-unlocked #mainContent .price-line,
  body.is-phone-layout.site-unlocked #mainContent .price-line{
    max-width:100% !important;
    margin:0 !important;
    font-size:clamp(2rem, 10vw, 3.15rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.03em !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  body.site-unlocked #mainContent .reveal-block,
  body.site-unlocked #mainContent .interactive-surface,
  body.site-unlocked #mainContent .interactive-surface:hover,
  body.site-unlocked #mainContent .interactive-surface:active,
  body.is-phone-layout.site-unlocked #mainContent .reveal-block,
  body.is-phone-layout.site-unlocked #mainContent .interactive-surface,
  body.is-phone-layout.site-unlocked #mainContent .interactive-surface:hover,
  body.is-phone-layout.site-unlocked #mainContent .interactive-surface:active{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  body.site-unlocked #mainContent .hero-panel::before,
  body.site-unlocked #mainContent .hero-panel::after,
  body.site-unlocked #mainContent .panel::before,
  body.site-unlocked #mainContent .panel::after,
  body.site-unlocked #mainContent .details-panel::before,
  body.site-unlocked #mainContent .details-panel::after,
  body.site-unlocked #mainContent .contact-panel::before,
  body.site-unlocked #mainContent .contact-panel::after,
  body.site-unlocked #mainContent .price-panel::before,
  body.site-unlocked #mainContent .price-panel::after,
  body.site-unlocked #mainContent .price-flare::before,
  body.site-unlocked #mainContent .contact-card::before,
  body.site-unlocked #mainContent .interactive-surface::after,
  body.is-phone-layout.site-unlocked #mainContent .hero-panel::before,
  body.is-phone-layout.site-unlocked #mainContent .hero-panel::after,
  body.is-phone-layout.site-unlocked #mainContent .panel::before,
  body.is-phone-layout.site-unlocked #mainContent .panel::after,
  body.is-phone-layout.site-unlocked #mainContent .details-panel::before,
  body.is-phone-layout.site-unlocked #mainContent .details-panel::after,
  body.is-phone-layout.site-unlocked #mainContent .contact-panel::before,
  body.is-phone-layout.site-unlocked #mainContent .contact-panel::after,
  body.is-phone-layout.site-unlocked #mainContent .price-panel::before,
  body.is-phone-layout.site-unlocked #mainContent .price-panel::after,
  body.is-phone-layout.site-unlocked #mainContent .price-flare::before,
  body.is-phone-layout.site-unlocked #mainContent .contact-card::before,
  body.is-phone-layout.site-unlocked #mainContent .interactive-surface::after{
    display:none !important;
  }
}

@media (max-width: 340px){
  body.site-unlocked #mainContent .site-nav,
  body.is-phone-layout.site-unlocked #mainContent .site-nav{
    grid-template-columns:1fr !important;
  }
}

/* Mobile one-card flow: replaces the unlocked phone page with one block at a time. */
.mobile-slide-deck{
  display:none;
}

@media (max-width: 980px), (hover: none) and (pointer: coarse) and (max-width: 1180px){
  body.mobile-slide-mode,
  body.mobile-slide-mode:not(.gate-active){
    height:var(--app-height, 100svh) !important;
    min-height:var(--app-height, 100svh) !important;
    overflow:hidden !important;
    touch-action:manipulation !important;
  }

  body.mobile-slide-mode .background-geometry{
    opacity:.45 !important;
  }

  body.mobile-slide-mode #mainContent.main-content:not([hidden]){
    position:fixed !important;
    inset:0 !important;
    z-index:2 !important;
    display:block !important;
    width:100vw !important;
    height:var(--app-height, 100svh) !important;
    min-height:var(--app-height, 100svh) !important;
    max-height:var(--app-height, 100svh) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
    opacity:1 !important;
    transform:none !important;
    scroll-snap-type:none !important;
    scrollbar-width:none !important;
    overscroll-behavior:none !important;
    touch-action:manipulation !important;
  }

  body.mobile-slide-mode #mainContent.main-content::-webkit-scrollbar{
    display:none !important;
  }

  body.mobile-slide-mode #mainContent > .site-frame:not(.mobile-slide-deck),
  body.mobile-slide-mode #mainContent > section.site-frame:not(.mobile-slide-deck),
  body.mobile-slide-mode #mainContent > .site-header,
  body.mobile-slide-mode #mainContent .site-nav{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.mobile-slide-mode #mobileSlideDeck.mobile-slide-deck[hidden]{
    display:none !important;
  }

  body.mobile-slide-mode #mobileSlideDeck.mobile-slide-deck{
    position:fixed !important;
    inset:0 !important;
    z-index:60 !important;
    display:grid !important;
    place-items:center !important;
    width:100vw !important;
    height:var(--app-height, 100svh) !important;
    min-height:var(--app-height, 100svh) !important;
    max-height:var(--app-height, 100svh) !important;
    margin:0 !important;
    padding:calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 92px) !important;
    overflow:hidden !important;
    background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.58)) !important;
    touch-action:manipulation !important;
  }

  body.mobile-slide-mode .mobile-slide-shell{
    display:grid !important;
    grid-template-rows:auto minmax(0, 1fr) !important;
    gap:12px !important;
    width:100% !important;
    max-width:520px !important;
    max-height:100% !important;
    min-height:0 !important;
  }

  body.mobile-slide-mode .mobile-slide-counter{
    width:max-content !important;
    margin:0 auto !important;
    padding:7px 12px !important;
    border:1px solid rgba(247,244,234,.14) !important;
    border-radius:999px !important;
    background:rgba(6,6,6,.84) !important;
    color:rgba(247,244,234,.70) !important;
    font-family:var(--mono) !important;
    font-size:.72rem !important;
    line-height:1 !important;
    letter-spacing:.14em !important;
  }

  body.mobile-slide-mode .mobile-slide-card{
    position:relative !important;
    isolation:isolate !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:calc(var(--app-height, 100svh) - 152px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    padding:clamp(20px, 6vw, 30px) !important;
    border:1px solid rgba(240,164,95,.24) !important;
    border-radius:22px !important;
    background:rgba(8,8,8,.96) !important;
    box-shadow:0 18px 60px rgba(0,0,0,.44) !important;
    clip-path:none !important;
    overflow:hidden !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  body.mobile-slide-mode .mobile-slide-card::before,
  body.mobile-slide-mode .mobile-slide-card::after{
    display:none !important;
  }

  body.mobile-slide-mode .mobile-slide-eyebrow{
    display:block !important;
    margin:0 0 12px !important;
    color:var(--soft) !important;
    font-family:var(--mono) !important;
    font-size:clamp(.68rem, 2.8vw, .78rem) !important;
    line-height:1.2 !important;
    letter-spacing:.15em !important;
    text-transform:uppercase !important;
    white-space:normal !important;
  }

  body.mobile-slide-mode .mobile-slide-card h2{
    max-width:100% !important;
    margin:0 !important;
    color:var(--white) !important;
    font-size:clamp(2.25rem, 12vw, 4rem) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-wrap:balance !important;
  }

  body.mobile-slide-mode .mobile-slide-card p{
    max-width:100% !important;
    margin:18px 0 0 !important;
    color:var(--muted) !important;
    font-size:clamp(.98rem, 4.2vw, 1.08rem) !important;
    line-height:1.55 !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
  }

  body.mobile-slide-mode .mobile-slide-card ul{
    display:grid !important;
    gap:10px !important;
    width:100% !important;
    margin:18px 0 0 !important;
    padding:0 !important;
    list-style:none !important;
  }

  body.mobile-slide-mode .mobile-slide-card li{
    display:block !important;
    width:100% !important;
    padding:11px 12px !important;
    border:1px solid rgba(247,244,234,.12) !important;
    border-radius:12px !important;
    color:var(--muted) !important;
    background:rgba(255,255,255,.035) !important;
    font-size:clamp(.92rem, 3.8vw, 1rem) !important;
    line-height:1.35 !important;
    overflow-wrap:break-word !important;
  }

  body.mobile-slide-mode .mobile-slide-action{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:48px !important;
    margin:22px 0 0 !important;
    padding:13px 16px !important;
    border:1px solid var(--white) !important;
    border-radius:14px !important;
    clip-path:none !important;
    background:var(--white) !important;
    color:var(--bg) !important;
    font:inherit !important;
    font-weight:800 !important;
    text-align:center !important;
    text-decoration:none !important;
    cursor:pointer !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  body.mobile-slide-mode .side-scroll-controls{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    z-index:80 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100vw !important;
    height:auto !important;
    padding:0 18px calc(env(safe-area-inset-bottom) + 18px) !important;
    pointer-events:none !important;
  }

  body.mobile-slide-mode .side-scroll-button{
    pointer-events:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    border:1px solid rgba(247,244,234,.18) !important;
    border-radius:999px !important;
    clip-path:none !important;
    background:rgba(7,7,7,.88) !important;
    color:var(--white) !important;
    backdrop-filter:blur(14px) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.34) !important;
    font-size:2.25rem !important;
    line-height:1 !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  body.mobile-slide-mode .side-scroll-button.is-disabled{
    opacity:.22 !important;
    pointer-events:none !important;
  }
}

@media (max-width: 360px){
  body.mobile-slide-mode #mobileSlideDeck.mobile-slide-deck{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  body.mobile-slide-mode .mobile-slide-card{
    padding:18px !important;
  }

  body.mobile-slide-mode .mobile-slide-card h2{
    font-size:clamp(2rem, 11vw, 3.25rem) !important;
  }

  body.mobile-slide-mode .mobile-slide-card p{
    font-size:.94rem !important;
    line-height:1.48 !important;
  }
}

@media (max-width: 980px), (hover: none) and (pointer: coarse) and (max-width: 1180px){
  body.is-phone-layout.site-unlocked.mobile-slide-mode #mainContent > .site-frame:not(.mobile-slide-deck),
  body.is-phone-layout.site-unlocked.mobile-slide-mode #mainContent > section.site-frame:not(.mobile-slide-deck),
  body.is-phone-layout.site-unlocked.mobile-slide-mode #mainContent > .site-header,
  body.is-phone-layout.site-unlocked.mobile-slide-mode #mainContent .site-nav{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.is-phone-layout.site-unlocked.mobile-slide-mode #mobileSlideDeck.mobile-slide-deck{
    display:grid !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}

@media (max-width: 980px), (hover: none) and (pointer: coarse) and (max-width: 1180px){
  body.is-phone-layout.site-unlocked.mobile-slide-mode .side-scroll-controls{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    z-index:80 !important;
    display:flex !important;
    visibility:visible !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100vw !important;
    height:auto !important;
    padding:0 18px calc(env(safe-area-inset-bottom) + 18px) !important;
    pointer-events:none !important;
  }

  body.is-phone-layout.site-unlocked.mobile-slide-mode .side-scroll-button{
    display:flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}


/* HARD PHONE FALLBACK v2
   This makes the unlocked mobile page choose the one-card deck even if the
   JS class arrives late or the hosting preview reports mobile differently. */
@media screen and (max-width: 980px), screen and (hover: none) and (pointer: coarse), screen and (max-device-width: 760px){
  html{
    height:100% !important;
    overflow:hidden !important;
  }

  body.site-unlocked{
    width:100% !important;
    height:var(--app-height, 100svh) !important;
    min-height:var(--app-height, 100svh) !important;
    max-height:var(--app-height, 100svh) !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  body.site-unlocked #mainContent.main-content:not([hidden]){
    position:fixed !important;
    inset:0 !important;
    z-index:20 !important;
    display:block !important;
    width:100vw !important;
    height:var(--app-height, 100svh) !important;
    min-height:var(--app-height, 100svh) !important;
    max-height:var(--app-height, 100svh) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    scroll-snap-type:none !important;
    transform:none !important;
    opacity:1 !important;
  }

  body.site-unlocked #mainContent > .site-frame:not(.mobile-slide-deck),
  body.site-unlocked #mainContent > section.site-frame:not(.mobile-slide-deck),
  body.site-unlocked #mainContent > .site-header,
  body.site-unlocked #mainContent .site-nav{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.site-unlocked #mobileSlideDeck.mobile-slide-deck,
  body.site-unlocked #mobileSlideDeck.mobile-slide-deck[hidden]{
    position:fixed !important;
    inset:0 !important;
    z-index:60 !important;
    display:grid !important;
    visibility:visible !important;
    place-items:center !important;
    width:100vw !important;
    height:var(--app-height, 100svh) !important;
    min-height:var(--app-height, 100svh) !important;
    max-height:var(--app-height, 100svh) !important;
    margin:0 !important;
    padding:calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 92px) !important;
    overflow:hidden !important;
    background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.58)) !important;
    pointer-events:auto !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-shell{
    display:grid !important;
    grid-template-rows:auto minmax(0, 1fr) !important;
    gap:12px !important;
    width:100% !important;
    max-width:520px !important;
    max-height:100% !important;
    min-height:0 !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-counter{
    display:block !important;
    width:max-content !important;
    margin:0 auto !important;
    padding:7px 12px !important;
    border:1px solid rgba(247,244,234,.14) !important;
    border-radius:999px !important;
    background:rgba(6,6,6,.84) !important;
    color:rgba(247,244,234,.70) !important;
    font-family:var(--mono) !important;
    font-size:.72rem !important;
    line-height:1 !important;
    letter-spacing:.14em !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-card{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:calc(var(--app-height, 100svh) - 152px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    padding:clamp(20px, 6vw, 30px) !important;
    border:1px solid rgba(240,164,95,.24) !important;
    border-radius:22px !important;
    background:rgba(8,8,8,.96) !important;
    box-shadow:0 18px 60px rgba(0,0,0,.44) !important;
    clip-path:none !important;
    overflow:hidden !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-card::before,
  body.site-unlocked #mobileSlideDeck .mobile-slide-card::after{
    display:none !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-eyebrow{
    display:block !important;
    margin:0 0 12px !important;
    color:var(--soft) !important;
    font-family:var(--mono) !important;
    font-size:clamp(.68rem, 2.8vw, .78rem) !important;
    line-height:1.2 !important;
    letter-spacing:.15em !important;
    text-transform:uppercase !important;
    white-space:normal !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-card h2{
    max-width:100% !important;
    margin:0 !important;
    color:var(--white) !important;
    font-size:clamp(2.25rem, 12vw, 4rem) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-wrap:balance !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-card p,
  body.site-unlocked #mobileSlideDeck .mobile-slide-card li{
    max-width:100% !important;
    color:var(--muted) !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-card p{
    margin:18px 0 0 !important;
    font-size:clamp(.98rem, 4.2vw, 1.08rem) !important;
    line-height:1.55 !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-card ul{
    display:grid !important;
    gap:10px !important;
    width:100% !important;
    margin:18px 0 0 !important;
    padding:0 !important;
    list-style:none !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-card li{
    display:block !important;
    width:100% !important;
    padding:11px 12px !important;
    border:1px solid rgba(247,244,234,.12) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.035) !important;
    font-size:clamp(.92rem, 3.8vw, 1rem) !important;
    line-height:1.35 !important;
  }

  body.site-unlocked #mobileSlideDeck .mobile-slide-action{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:48px !important;
    margin:22px 0 0 !important;
    padding:13px 16px !important;
    border:1px solid var(--white) !important;
    border-radius:14px !important;
    clip-path:none !important;
    background:var(--white) !important;
    color:var(--bg) !important;
    font:inherit !important;
    font-weight:800 !important;
    text-align:center !important;
    text-decoration:none !important;
  }

  body.site-unlocked #mainContent .side-scroll-controls{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    z-index:80 !important;
    display:flex !important;
    visibility:visible !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100vw !important;
    height:auto !important;
    padding:0 18px calc(env(safe-area-inset-bottom) + 18px) !important;
    pointer-events:none !important;
  }

  body.site-unlocked #mainContent .side-scroll-button{
    pointer-events:auto !important;
    display:flex !important;
    visibility:visible !important;
    align-items:center !important;
    justify-content:center !important;
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    border:1px solid rgba(247,244,234,.18) !important;
    border-radius:999px !important;
    clip-path:none !important;
    background:rgba(7,7,7,.88) !important;
    color:var(--white) !important;
    backdrop-filter:blur(14px) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.34) !important;
    font-size:2.25rem !important;
    line-height:1 !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  body.site-unlocked #mainContent .side-scroll-button.is-disabled{
    opacity:.22 !important;
    pointer-events:none !important;
  }
}


/* CARD DECK ALL SCREENS v1
   The unlocked site no longer has a separate desktop layout. After the
   questions, every device uses one organised card at a time. */
body.card-deck-mode,
body.site-unlocked.card-deck-mode,
body.site-unlocked.mobile-slide-mode{
  width:100% !important;
  height:var(--app-height, 100svh) !important;
  min-height:var(--app-height, 100svh) !important;
  max-height:var(--app-height, 100svh) !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

body.card-deck-mode .background-geometry,
body.site-unlocked.card-deck-mode .background-geometry{
  opacity:.45 !important;
}

body.card-deck-mode #mainContent.main-content:not([hidden]),
body.site-unlocked.card-deck-mode #mainContent.main-content:not([hidden]){
  position:fixed !important;
  inset:0 !important;
  z-index:20 !important;
  display:block !important;
  width:100vw !important;
  height:var(--app-height, 100svh) !important;
  min-height:var(--app-height, 100svh) !important;
  max-height:var(--app-height, 100svh) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
  scroll-snap-type:none !important;
  scrollbar-width:none !important;
  transform:none !important;
  opacity:1 !important;
}

body.card-deck-mode #mainContent.main-content::-webkit-scrollbar{
  display:none !important;
}

body.card-deck-mode #mainContent > .site-frame:not(.mobile-slide-deck),
body.card-deck-mode #mainContent > section.site-frame:not(.mobile-slide-deck),
body.card-deck-mode #mainContent > .site-header,
body.card-deck-mode #mainContent .site-nav{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.card-deck-mode #mobileSlideDeck.mobile-slide-deck,
body.card-deck-mode #mobileSlideDeck.mobile-slide-deck[hidden],
body.site-unlocked.card-deck-mode #mobileSlideDeck.mobile-slide-deck,
body.site-unlocked.card-deck-mode #mobileSlideDeck.mobile-slide-deck[hidden]{
  position:fixed !important;
  inset:0 !important;
  z-index:60 !important;
  display:grid !important;
  visibility:visible !important;
  place-items:center !important;
  width:100vw !important;
  height:var(--app-height, 100svh) !important;
  min-height:var(--app-height, 100svh) !important;
  max-height:var(--app-height, 100svh) !important;
  margin:0 !important;
  padding:calc(env(safe-area-inset-top) + clamp(16px, 3vw, 30px)) clamp(16px, 4vw, 42px) calc(env(safe-area-inset-bottom) + 94px) !important;
  overflow:hidden !important;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.62)) !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-shell{
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  gap:14px !important;
  width:100% !important;
  max-width:min(760px, calc(100vw - 32px)) !important;
  max-height:100% !important;
  min-height:0 !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-counter{
  display:block !important;
  width:max-content !important;
  margin:0 auto !important;
  padding:8px 13px !important;
  border:1px solid rgba(247,244,234,.14) !important;
  border-radius:999px !important;
  background:rgba(6,6,6,.84) !important;
  color:rgba(247,244,234,.72) !important;
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  line-height:1 !important;
  letter-spacing:.14em !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:calc(var(--app-height, 100svh) - 156px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  margin:0 !important;
  padding:clamp(22px, 5vw, 52px) !important;
  border:1px solid rgba(240,164,95,.25) !important;
  border-radius:clamp(22px, 4vw, 34px) !important;
  background:rgba(8,8,8,.96) !important;
  box-shadow:0 18px 70px rgba(0,0,0,.48) !important;
  clip-path:none !important;
  overflow:hidden !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card::before,
body.card-deck-mode #mobileSlideDeck .mobile-slide-card::after{
  display:none !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-eyebrow{
  display:block !important;
  margin:0 0 13px !important;
  color:var(--soft) !important;
  font-family:var(--mono) !important;
  font-size:clamp(.68rem, 1.5vw, .82rem) !important;
  line-height:1.2 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  white-space:normal !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card h2{
  max-width:100% !important;
  margin:0 !important;
  color:var(--white) !important;
  font-size:clamp(2.15rem, 7vw, 5.7rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  text-wrap:balance !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card p,
body.card-deck-mode #mobileSlideDeck .mobile-slide-card li{
  max-width:100% !important;
  color:var(--muted) !important;
  overflow-wrap:break-word !important;
  white-space:normal !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card p{
  margin:18px 0 0 !important;
  font-size:clamp(.98rem, 2.3vw, 1.18rem) !important;
  line-height:1.55 !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card ul{
  display:grid !important;
  gap:10px !important;
  width:100% !important;
  margin:20px 0 0 !important;
  padding:0 !important;
  list-style:none !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card li{
  display:block !important;
  width:100% !important;
  padding:12px 13px !important;
  border:1px solid rgba(247,244,234,.12) !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.035) !important;
  font-size:clamp(.92rem, 2.1vw, 1rem) !important;
  line-height:1.35 !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-actions{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:10px !important;
  width:100% !important;
  margin:22px 0 0 !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-action{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:50px !important;
  margin:22px 0 0 !important;
  padding:13px 16px !important;
  border:1px solid var(--white) !important;
  border-radius:14px !important;
  clip-path:none !important;
  background:var(--white) !important;
  color:var(--bg) !important;
  font:inherit !important;
  font-weight:800 !important;
  text-align:center !important;
  text-decoration:none !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-actions .mobile-slide-action{
  margin:0 !important;
}

body.card-deck-mode #mainContent .side-scroll-controls{
  position:fixed !important;
  inset:auto 0 0 0 !important;
  z-index:80 !important;
  display:flex !important;
  visibility:visible !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100vw !important;
  height:auto !important;
  padding:0 clamp(18px, 4vw, 48px) calc(env(safe-area-inset-bottom) + 18px) !important;
  pointer-events:none !important;
}

body.card-deck-mode #mainContent .side-scroll-button{
  pointer-events:auto !important;
  display:flex !important;
  visibility:visible !important;
  align-items:center !important;
  justify-content:center !important;
  width:60px !important;
  height:60px !important;
  min-width:60px !important;
  min-height:60px !important;
  border:1px solid rgba(247,244,234,.18) !important;
  border-radius:999px !important;
  clip-path:none !important;
  background:rgba(7,7,7,.88) !important;
  color:var(--white) !important;
  backdrop-filter:blur(14px) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.34) !important;
  font-size:2.25rem !important;
  line-height:1 !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

body.card-deck-mode #mainContent .side-scroll-button.is-disabled{
  opacity:.22 !important;
  pointer-events:none !important;
}

@media (max-width: 560px){
  body.card-deck-mode #mobileSlideDeck.mobile-slide-deck,
  body.card-deck-mode #mobileSlideDeck.mobile-slide-deck[hidden]{
    padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 92px) !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-shell{
    max-width:100% !important;
    gap:12px !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card{
    padding:20px !important;
    border-radius:22px !important;
    max-height:calc(var(--app-height, 100svh) - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card h2{
    font-size:clamp(2rem, 11vw, 3.65rem) !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card p{
    font-size:clamp(.94rem, 4vw, 1.04rem) !important;
    line-height:1.5 !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card li{
    font-size:.92rem !important;
    line-height:1.32 !important;
    padding:10px 11px !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-actions{
    grid-template-columns:1fr !important;
  }

  body.card-deck-mode #mainContent .side-scroll-button{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
  }
}

@media (max-height: 620px){
  body.card-deck-mode #mobileSlideDeck .mobile-slide-card{
    justify-content:flex-start !important;
    overflow:hidden !important;
    padding-top:18px !important;
    padding-bottom:18px !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card h2{
    font-size:clamp(1.85rem, 9vw, 3.2rem) !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card p{
    margin-top:12px !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card ul{
    margin-top:12px !important;
    gap:7px !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card li{
    padding:8px 10px !important;
  }
}


/* ==========================================================
   QUESTION STYLE DECK v2
   The post-question page now deliberately matches the 3-question
   gate: same cut-corner card, same meta/footer rhythm, same simple
   answer-block styling, and one card visible at a time on every device.
   This block is last on purpose.
   ========================================================== */
body.card-deck-mode,
body.site-unlocked.card-deck-mode,
body.site-unlocked.mobile-slide-mode{
  width:100% !important;
  height:var(--app-height, 100svh) !important;
  min-height:var(--app-height, 100svh) !important;
  max-height:var(--app-height, 100svh) !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

body.card-deck-mode .background-geometry,
body.site-unlocked.card-deck-mode .background-geometry{
  opacity:1 !important;
}

body.card-deck-mode #mainContent.main-content:not([hidden]),
body.site-unlocked.card-deck-mode #mainContent.main-content:not([hidden]){
  position:fixed !important;
  inset:0 !important;
  z-index:20 !important;
  display:block !important;
  width:100vw !important;
  height:var(--app-height, 100svh) !important;
  min-height:var(--app-height, 100svh) !important;
  max-height:var(--app-height, 100svh) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  transform:none !important;
  opacity:1 !important;
}

body.card-deck-mode #mainContent > .site-frame:not(.mobile-slide-deck),
body.card-deck-mode #mainContent > section.site-frame:not(.mobile-slide-deck),
body.card-deck-mode #mainContent > .site-header,
body.card-deck-mode #mainContent .site-nav{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.card-deck-mode #mobileSlideDeck.mobile-slide-deck,
body.card-deck-mode #mobileSlideDeck.mobile-slide-deck[hidden],
body.site-unlocked.card-deck-mode #mobileSlideDeck.mobile-slide-deck,
body.site-unlocked.card-deck-mode #mobileSlideDeck.mobile-slide-deck[hidden]{
  position:fixed !important;
  inset:0 !important;
  z-index:60 !important;
  display:grid !important;
  visibility:visible !important;
  place-items:center !important;
  width:100vw !important;
  height:var(--app-height, 100svh) !important;
  min-height:var(--app-height, 100svh) !important;
  max-height:var(--app-height, 100svh) !important;
  margin:0 !important;
  padding:clamp(18px, 4vw, 44px) !important;
  overflow:hidden !important;
  background:transparent !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-shell{
  display:block !important;
  width:min(760px, 100%) !important;
  max-width:min(760px, calc(100vw - 32px)) !important;
  height:auto !important;
  max-height:calc(var(--app-height, 100svh) - 28px) !important;
  min-height:0 !important;
  margin:0 auto !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-counter{
  display:none !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) auto !important;
  width:100% !important;
  min-width:0 !important;
  min-height:min(620px, calc(var(--app-height, 100svh) - 64px)) !important;
  max-height:calc(var(--app-height, 100svh) - 64px) !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--line-strong) !important;
  border-radius:0 !important;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 42%),
    linear-gradient(315deg, rgba(73,244,180,.05), transparent 34%),
    rgba(4,4,4,.94) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.58) !important;
  opacity:1 !important;
  transform:none !important;
  transition:border-color .22s ease, box-shadow .22s ease, clip-path .28s ease !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card:hover{
  border-color:rgba(73,244,180,.55) !important;
  box-shadow:0 30px 105px rgba(0,0,0,.65), 0 0 0 1px rgba(73,244,180,.08) inset !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:12px !important;
  z-index:0 !important;
  pointer-events:none !important;
  border:1px solid rgba(255,255,255,.09) !important;
  clip-path:polygon(var(--cut-small) 0, 100% 0, 100% calc(100% - var(--cut-small)), calc(100% - var(--cut-small)) 100%, 0 100%, 0 var(--cut-small)) !important;
  background:transparent !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card::after{
  display:none !important;
}

body.card-deck-mode #mobileSlideDeck .unlocked-meta,
body.card-deck-mode #mobileSlideDeck .unlocked-footer{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:18px 22px !important;
}

body.card-deck-mode #mobileSlideDeck .unlocked-meta{
  border-bottom:1px solid var(--line) !important;
}

body.card-deck-mode #mobileSlideDeck .unlocked-footer{
  border-top:1px solid var(--line) !important;
}

body.card-deck-mode #mobileSlideDeck .unlocked-meta p,
body.card-deck-mode #mobileSlideDeck .unlocked-footer p{
  margin:0 !important;
}

body.card-deck-mode #mobileSlideDeck .unlocked-footer p{
  color:var(--soft) !important;
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  line-height:1.1 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  text-align:right !important;
}

body.card-deck-mode #mobileSlideDeck .unlocked-stage{
  position:relative !important;
  z-index:1 !important;
  align-self:center !important;
  width:100% !important;
  max-width:620px !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:clamp(28px, 5vw, 56px) !important;
  overflow:hidden !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card.is-entering .unlocked-stage > *{
  animation:slideInFromRight .44s cubic-bezier(.2,.72,.1,1) both !important;
}
body.card-deck-mode #mobileSlideDeck .mobile-slide-card.is-entering .unlocked-stage > p{animation-delay:.04s !important;}
body.card-deck-mode #mobileSlideDeck .mobile-slide-card.is-entering .unlocked-stage ul,
body.card-deck-mode #mobileSlideDeck .mobile-slide-card.is-entering .unlocked-stage .mobile-slide-actions{animation-delay:.08s !important;}

body.card-deck-mode #mobileSlideDeck .mobile-slide-eyebrow{
  display:none !important;
}

body.card-deck-mode #mobileSlideDeck .question-kicker{
  display:block !important;
  margin:0 0 12px !important;
  color:var(--soft) !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card h2{
  max-width:11ch !important;
  margin:0 0 20px !important;
  color:var(--white) !important;
  font-size:clamp(3rem, 6vw, 5.25rem) !important;
  line-height:.9 !important;
  letter-spacing:-.07em !important;
  font-weight:820 !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  text-wrap:balance !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card p{
  max-width:36rem !important;
  margin:0 0 28px !important;
  color:var(--muted) !important;
  font-size:clamp(.98rem, 1.1vw, 1.08rem) !important;
  line-height:1.58 !important;
  overflow-wrap:break-word !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card ul{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px !important;
  max-width:560px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card li,
body.card-deck-mode #mobileSlideDeck .mobile-slide-action{
  min-height:92px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:17px 18px !important;
  border:1px solid var(--line) !important;
  border-radius:0 !important;
  background:linear-gradient(135deg, rgba(255,255,255,.04), transparent 65%) !important;
  color:var(--muted) !important;
  font-size:.94rem !important;
  line-height:1.35 !important;
  text-align:left !important;
  text-decoration:none !important;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%) !important;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, clip-path .18s ease !important;
  overflow-wrap:break-word !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card li:nth-child(even),
body.card-deck-mode #mobileSlideDeck .mobile-slide-actions .mobile-slide-action:nth-child(even){
  clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px) !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-card li:hover,
body.card-deck-mode #mobileSlideDeck .mobile-slide-action:hover{
  background:var(--white) !important;
  color:var(--bg) !important;
  border-color:var(--accent) !important;
  transform:scale(1.03) translateY(-3px) rotate(-.4deg) !important;
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-actions{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px !important;
  max-width:500px !important;
  width:100% !important;
  margin:0 !important;
}

body.card-deck-mode #mobileSlideDeck .mobile-slide-action{
  width:100% !important;
  min-height:96px !important;
  margin:0 !important;
  color:var(--ink) !important;
  font-weight:700 !important;
}

body.card-deck-mode #mobileSlideDeck .progress-track{
  flex:1 1 auto !important;
  max-width:220px !important;
  height:3px !important;
  background:var(--line) !important;
  overflow:hidden !important;
}

body.card-deck-mode #mobileSlideDeck .progress-track span{
  display:block !important;
  height:100% !important;
  background:linear-gradient(90deg, var(--white), var(--accent)) !important;
  transition:width .28s ease !important;
}

body.card-deck-mode #mainContent .side-scroll-controls{
  position:fixed !important;
  inset:50% 0 auto 0 !important;
  z-index:80 !important;
  display:flex !important;
  visibility:visible !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100vw !important;
  height:0 !important;
  padding:0 clamp(18px, 4vw, 48px) !important;
  pointer-events:none !important;
  transform:translateY(-50%) !important;
}

body.card-deck-mode #mainContent .side-scroll-button{
  pointer-events:auto !important;
  display:flex !important;
  visibility:visible !important;
  align-items:center !important;
  justify-content:center !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  border:1px solid var(--line-strong) !important;
  border-radius:0 !important;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)) !important;
  background:rgba(4,4,4,.94) !important;
  color:var(--white) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.38) !important;
  font-size:2.25rem !important;
  line-height:1 !important;
  opacity:1 !important;
  transform:none !important;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

body.card-deck-mode #mainContent .side-scroll-button:hover{
  background:var(--white) !important;
  color:var(--bg) !important;
  border-color:var(--accent) !important;
  transform:scale(1.06) rotate(-3deg) !important;
}

body.card-deck-mode #mainContent .side-scroll-button.is-disabled{
  opacity:.22 !important;
  pointer-events:none !important;
}

@media (hover:none), (pointer:coarse), (max-width: 760px){
  body.card-deck-mode #mobileSlideDeck.mobile-slide-deck,
  body.card-deck-mode #mobileSlideDeck.mobile-slide-deck[hidden]{
    padding:12px !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-shell{
    width:100% !important;
    max-width:100% !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card{
    min-height:calc(var(--app-height, 100svh) - 24px) !important;
    max-height:calc(var(--app-height, 100svh) - 24px) !important;
  }

  body.card-deck-mode #mobileSlideDeck .unlocked-meta,
  body.card-deck-mode #mobileSlideDeck .unlocked-footer{
    padding:16px !important;
    gap:12px !important;
  }

  body.card-deck-mode #mobileSlideDeck .unlocked-stage{
    padding:clamp(24px, 7vw, 42px) 20px !important;
    overflow:hidden !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card h2{
    max-width:10.8ch !important;
    font-size:clamp(2.45rem, 13.5vw, 4.4rem) !important;
    line-height:.92 !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card p{
    margin-bottom:22px !important;
    font-size:clamp(.96rem, 4vw, 1.04rem) !important;
    line-height:1.52 !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card ul,
  body.card-deck-mode #mobileSlideDeck .mobile-slide-actions{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card li,
  body.card-deck-mode #mobileSlideDeck .mobile-slide-action{
    min-height:auto !important;
    padding:14px 15px !important;
    font-size:.92rem !important;
  }

  body.card-deck-mode #mobileSlideDeck .unlocked-footer p{
    max-width:11rem !important;
  }

  body.card-deck-mode #mainContent .side-scroll-controls{
    inset:auto 0 0 0 !important;
    height:auto !important;
    padding:0 18px calc(env(safe-area-inset-bottom) + 18px) !important;
    transform:none !important;
  }

  body.card-deck-mode #mainContent .side-scroll-button{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    font-size:2rem !important;
  }
}

@media (max-width: 360px), (max-height: 660px){
  body.card-deck-mode #mobileSlideDeck .mobile-slide-card h2{
    font-size:clamp(2rem, 10vw, 3.2rem) !important;
    margin-bottom:14px !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card p{
    margin-bottom:14px !important;
    font-size:.9rem !important;
    line-height:1.42 !important;
  }

  body.card-deck-mode #mobileSlideDeck .mobile-slide-card li,
  body.card-deck-mode #mobileSlideDeck .mobile-slide-action{
    padding:10px 12px !important;
    font-size:.86rem !important;
    line-height:1.25 !important;
  }

  body.card-deck-mode #mobileSlideDeck .unlocked-meta,
  body.card-deck-mode #mobileSlideDeck .unlocked-footer{
    padding:13px 14px !important;
  }

  body.card-deck-mode #mobileSlideDeck .unlocked-stage{
    padding:18px 16px !important;
  }
}