:root{
  --mobile-edge:clamp(16px,4.6vw,22px);
  --mobile-nav:calc(64px + env(safe-area-inset-top));
  --mobile-bottom:env(safe-area-inset-bottom);
  --mobile-text:#f7f0e7;
  --mobile-muted:#d4c8bb;
  --mobile-gold:#f5cd8c;
  --mobile-surface:rgba(8,7,5,.96);
}

html{
  background:#080705;
  scroll-behavior:auto;
  scroll-snap-type:none!important;
  overscroll-behavior-y:none;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

body{
  min-width:0;
  min-height:100%;
  overflow-x:hidden;
  touch-action:pan-y;
}

#gl{
  width:100vw!important;
  height:100dvh!important;
}

nav{
  inset:0 0 auto;
  height:var(--mobile-nav)!important;
  padding:env(safe-area-inset-top) var(--mobile-edge) 0!important;
  gap:12px;
  background:linear-gradient(180deg,rgba(7,6,5,.97) 0,rgba(7,6,5,.74) 72%,transparent 100%)!important;
  border:0!important;
}

nav.scrolled{
  background:rgba(8,7,5,.90)!important;
  border-bottom:1px solid rgba(245,205,140,.10)!important;
  backdrop-filter:blur(18px) saturate(1.1);
}

.brand{
  min-width:0;
  flex:1 1 auto;
  gap:0!important;
}

.brand-title{
  font-size:22px!important;
  line-height:1;
  letter-spacing:.19em!important;
}

.brand small,
.nav-sections,
.nav-right>span{
  display:none!important;
}

.nav-right{
  flex:0 0 auto;
  gap:8px!important;
}

.nav-right #demoButton{
  min-width:112px;
  min-height:44px;
  padding:0 13px!important;
  border-color:rgba(245,205,140,.46)!important;
  background:rgba(17,13,9,.78)!important;
  color:#f7ecde!important;
  font-size:11px!important;
  font-weight:650;
  letter-spacing:.11em!important;
  white-space:nowrap;
  touch-action:manipulation;
}

.nav-right #demoButton.is-inviting{
  position:relative;
  overflow:hidden;
  border-color:rgba(245,205,140,.34)!important;
  background:linear-gradient(180deg,rgba(24,22,19,.97),rgba(9,8,6,.95))!important;
  color:#fff8ed!important;
  text-shadow:0 0 12px rgba(245,205,140,.14);
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 18px rgba(213,164,94,.10);
  animation:demoInvite 5.8s ease-in-out infinite;
}

.nav-right #demoButton.is-inviting:before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background:conic-gradient(from var(--demo-angle),rgba(245,205,140,.08) 0deg,rgba(245,205,140,.08) 242deg,rgba(255,235,201,.76) 276deg,rgba(245,205,140,.11) 314deg,rgba(245,205,140,.08) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  animation:demoOrbit 8s linear infinite;
}

@media(prefers-reduced-motion:reduce){
  .nav-right #demoButton.is-inviting,
  .nav-right #demoButton.is-inviting:before{
    animation:none!important;
  }
}

.mobile-menu-button{
  display:grid;
  width:44px;
  height:44px;
  place-content:center;
  gap:6px;
  padding:0;
  border:1px solid rgba(245,205,140,.22);
  border-radius:50%;
  background:rgba(17,13,9,.78);
  color:#f5eadb;
  touch-action:manipulation;
}

.mobile-menu-button span{
  display:block;
  width:15px;
  height:1px;
  background:currentColor;
}

.mobile-menu{
  position:fixed;
  z-index:70;
  inset:0;
  display:block;
  visibility:hidden;
  pointer-events:none;
}

.mobile-menu.open{
  visibility:visible;
  pointer-events:auto;
}

.mobile-menu-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(2,2,1,.70);
  opacity:0;
  transition:opacity .3s;
  backdrop-filter:blur(8px);
}

.mobile-menu.open .mobile-menu-backdrop{
  opacity:1;
}

.mobile-menu-panel{
  position:absolute;
  top:0;
  right:0;
  width:min(90vw,380px);
  height:100dvh;
  overflow-y:auto;
  padding:calc(20px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));
  border-left:1px solid rgba(245,205,140,.18);
  background:linear-gradient(160deg,#17110c 0,#090806 62%,#070604 100%);
  box-shadow:-28px 0 80px rgba(0,0,0,.58);
  transform:translateX(102%);
  transition:transform .38s cubic-bezier(.22,.78,.24,1);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.mobile-menu.open .mobile-menu-panel{
  transform:none;
}

.mobile-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(245,205,140,.15);
  color:#d6bd94;
  font-size:11px;
  letter-spacing:.18em;
}

.mobile-menu-head button{
  min-width:54px;
  min-height:44px;
  border:0;
  background:transparent;
  color:#a99c8e;
  font-size:11px;
  letter-spacing:.14em;
}

.mobile-menu-links{
  display:grid;
  padding:8px 0 14px;
}

.mobile-menu-links>button{
  display:grid;
  grid-template-columns:30px 1fr;
  align-items:center;
  min-height:58px;
  padding:8px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:transparent;
  color:#f2e7d9;
  text-align:left;
}

.mobile-menu-links b{
  color:#8a7965;
  font:650 11px var(--sans);
  letter-spacing:.12em;
}

.mobile-menu-links span{
  font:400 18px/1.1 var(--serif);
}

.mobile-menu-links small{
  display:block;
  margin-top:4px;
  color:#b9ada1;
  font:500 12px/1.4 var(--sans);
  letter-spacing:.02em;
}

.mobile-demo-button{
  width:100%;
  min-height:50px;
  border:1px solid rgba(245,205,140,.6);
  background:#f5cd8c;
  color:#17100a;
  font-size:12px;
  font-weight:750;
  letter-spacing:.15em;
}

.mobile-menu-email{
  display:block;
  min-height:44px;
  padding-top:15px;
  color:#b7a994;
  font-size:14px;
  text-align:center;
  text-decoration:none;
}

body.mobile-menu-open{
  overflow:hidden;
}

.beat,
.beat:first-of-type,
.beat:last-of-type{
  height:125svh!important;
  scroll-snap-align:none!important;
}

.beat[data-id="hero"]{height:105svh!important}
.beat[data-id="table"]{height:150svh!important}
.beat[data-id="rush"]{height:115svh!important}
.beat[data-id="alfred"]{height:165svh!important}
.beat[data-id="pair"]{height:125svh!important}
.beat[data-id="modes"]{height:150svh!important}
.beat[data-id="owner"]{height:145svh!important}
.beat[data-id="guest"]{height:125svh!important}
.beat[data-id="granary"]{height:135svh!important}

.vignette{
  background:radial-gradient(circle at 50% 38%,transparent 0 34%,rgba(5,4,3,.20) 64%,rgba(5,4,3,.62) 100%)!important;
  transition:background .35s;
}

body.mobile-visual .vignette{
  background:linear-gradient(0deg,rgba(5,4,3,.84) 0,rgba(5,4,3,.24) 30%,transparent 56%,rgba(5,4,3,.08) 76%,rgba(5,4,3,.52) 100%),radial-gradient(circle at 50% 38%,transparent 0 38%,rgba(5,4,3,.34) 100%)!important;
}

body.mobile-detail .vignette{
  background:linear-gradient(0deg,rgba(5,4,3,.98) 0,rgba(5,4,3,.88) 32%,rgba(5,4,3,.16) 64%,rgba(5,4,3,.08) 80%,rgba(5,4,3,.52) 100%)!important;
}

#storyCopy,
#storyCopy.copy-right,
#storyCopy.copy-low,
#storyCopy.copy-compact,
#storyCopy.copy-finale,
#storyCopy.copy-revenue,
#storyCopy.copy-granary{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  color:#f6efe5;
  transform-origin:bottom;
  transition:opacity .24s,transform .36s,background .36s,padding .36s,max-height .36s!important;
}

body.mobile-visual #storyCopy,
body.mobile-visual #storyCopy.copy-right,
body.mobile-visual #storyCopy.copy-low,
body.mobile-visual #storyCopy.copy-compact,
body.mobile-visual #storyCopy.copy-finale,
body.mobile-visual #storyCopy.copy-revenue,
body.mobile-visual #storyCopy.copy-granary{
  bottom:calc(22px + var(--mobile-bottom))!important;
  max-height:52dvh!important;
  padding:52px var(--mobile-edge) 18px!important;
  overflow:visible!important;
  background:linear-gradient(180deg,transparent 0,rgba(8,7,5,.92) 46px,var(--mobile-surface) 100%)!important;
  filter:drop-shadow(0 -18px 38px rgba(0,0,0,.34))!important;
}

#storyCopy .eyebrow{
  max-width:100%;
  margin:0 0 10px!important;
  color:var(--mobile-gold)!important;
  font-size:11px!important;
  line-height:1.4!important;
  letter-spacing:.12em!important;
  overflow-wrap:anywhere;
}

#storyCopy h1,
#storyCopy.copy-compact h1,
#storyCopy.copy-finale h1,
#storyCopy.copy-revenue h1,
#storyCopy.copy-granary h1{
  max-width:100%!important;
  margin:0!important;
  font-size:clamp(32px,9.2vw,42px)!important;
  font-weight:400!important;
  line-height:.96!important;
  letter-spacing:-.04em!important;
  overflow-wrap:anywhere;
  text-wrap:balance;
}

#storyCopy[data-mobile-title="long"] h1{font-size:clamp(29px,8.2vw,37px)!important;line-height:1!important}
#storyCopy[data-mobile-title="xlong"] h1{font-size:clamp(27px,7.4vw,34px)!important;line-height:1.02!important}

body.mobile-visual #storyCopy p,
body.mobile-visual #storyCopy .micro-proof{
  display:none!important;
}

/* The first phone frame defines the product before the walkthrough begins. */
body.mobile-visual #storyCopy.copy-intro{
  bottom:calc(46px + var(--mobile-bottom))!important;
  max-height:64dvh!important;
  background:linear-gradient(180deg,transparent 0,rgba(8,7,5,.94) 46px,#080705 100%)!important;
}

body.mobile-visual #storyCopy.copy-intro p{
  display:block!important;
  max-width:39rem!important;
}

body.mobile-visual #storyCopy.copy-intro .micro-proof{
  display:none!important;
}

body.mobile-detail #storyCopy,
body.mobile-detail #storyCopy.copy-right,
body.mobile-detail #storyCopy.copy-low,
body.mobile-detail #storyCopy.copy-compact,
body.mobile-detail #storyCopy.copy-finale,
body.mobile-detail #storyCopy.copy-revenue,
body.mobile-detail #storyCopy.copy-granary{
  max-height:calc(100dvh - var(--mobile-nav) - 8px)!important;
  padding:54px var(--mobile-edge) calc(22px + var(--mobile-bottom))!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,transparent 0,rgba(8,7,5,.94) 46px,#080705 100%)!important;
  filter:drop-shadow(0 -26px 52px rgba(0,0,0,.46))!important;
}

body.mobile-detail #storyCopy::-webkit-scrollbar{display:none}

body.mobile-detail #storyCopy:before{
  display:none;
}

body.mobile-detail #storyCopy h1,
body.mobile-detail #storyCopy.copy-compact h1,
body.mobile-detail #storyCopy.copy-finale h1,
body.mobile-detail #storyCopy.copy-revenue h1,
body.mobile-detail #storyCopy.copy-granary h1{
  font-size:clamp(28px,7.7vw,35px)!important;
  line-height:1.04!important;
}

body.mobile-detail #storyCopy[data-mobile-title="long"] h1{font-size:clamp(27px,7.2vw,32px)!important}
body.mobile-detail #storyCopy[data-mobile-title="xlong"] h1{font-size:clamp(25px,6.8vw,30px)!important}

#storyCopy p,
#storyCopy.copy-compact p,
#storyCopy.copy-finale p,
#storyCopy.copy-revenue p,
#storyCopy.copy-granary p{
  max-width:100%!important;
  margin:12px 0 0!important;
  color:var(--mobile-muted)!important;
  font-size:16px!important;
  line-height:1.5!important;
  overflow-wrap:anywhere;
}

#storyCopy strong{color:#f4e9da!important;font-weight:650!important}

#storyCopy.copy-revenue .revenue-closing-line{
  display:block!important;
  margin-top:12px!important;
  padding-top:11px!important;
  border-top:1px solid rgba(224,174,102,.38)!important;
  color:#f5cd8c!important;
  font-size:15px!important;
  line-height:1.3!important;
}

.micro-proof,
#storyCopy.copy-compact .micro-proof,
#storyCopy.copy-finale .micro-proof,
#storyCopy.copy-revenue .micro-proof{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px!important;
  margin-top:13px!important;
}

.micro-proof span,
#storyCopy.copy-compact .micro-proof span{
  min-width:0;
  padding:8px 9px!important;
  border:1px solid rgba(245,205,140,.24)!important;
  background:rgba(24,18,12,.76)!important;
  color:#e4d9cd!important;
  font-size:12px!important;
  line-height:1.35!important;
  letter-spacing:.025em!important;
  overflow-wrap:anywhere;
}

body.mobile-shift #storyCopy{
  opacity:0!important;
  transform:translateY(12px)!important;
}

.scene-label{display:none!important}

.remove-aitta{
  top:calc(var(--mobile-nav) + 10px)!important;
  right:var(--mobile-edge)!important;
  min-height:44px;
  max-width:205px;
  padding:8px 11px!important;
  border-color:rgba(245,205,140,.28)!important;
  background:rgba(9,7,5,.82)!important;
  font-size:11px!important;
  line-height:1.3;
  letter-spacing:.10em!important;
  white-space:nowrap;
  touch-action:none;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent;
}

.remove-aitta *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  pointer-events:none;
}

.scroll-hint{
  left:var(--mobile-edge)!important;
  bottom:calc(16px + var(--mobile-bottom))!important;
  z-index:24!important;
  max-width:200px;
  font-size:11px!important;
  line-height:1.4;
  color:#d0c3b4!important;
}

.progress{height:2px!important}

.demo-modal{
  padding:0!important;
  align-items:end!important;
}

.demo-dialog{
  width:100%!important;
  max-width:none!important;
  max-height:calc(100dvh - env(safe-area-inset-top))!important;
  margin-top:env(safe-area-inset-top);
  padding:44px var(--mobile-edge) calc(24px + var(--mobile-bottom))!important;
  border-width:1px 0 0!important;
  border-radius:22px 22px 0 0;
  overscroll-behavior:contain;
}

.demo-dialog:before{left:var(--mobile-edge)!important;right:var(--mobile-edge)!important}
.demo-dialog h2{font-size:clamp(31px,9vw,42px)!important;line-height:.98!important}
.demo-dialog>p{margin:14px 0 20px!important;font-size:16px!important;line-height:1.5!important}
.demo-close{top:16px!important;right:var(--mobile-edge)!important;min-width:58px;min-height:44px;font-size:11px!important}
#demoForm{grid-template-columns:1fr!important;gap:12px!important}
#demoForm label{font-size:12px!important;gap:8px!important}
#demoForm input{min-height:46px;padding:12px 14px!important;font-size:16px!important}
.demo-submit{grid-column:auto!important;min-height:50px;font-size:12px!important}
.demo-email{min-height:44px;margin-top:14px!important;font-size:14px!important}

@media(max-width:350px){
  :root{--mobile-edge:14px}
  .brand-title{font-size:20px!important}
  .nav-right #demoButton{min-width:104px;padding-inline:10px!important;font-size:11px!important}
  .mobile-menu-button{width:44px;height:44px}
  body.mobile-visual #storyCopy,body.mobile-detail #storyCopy{padding-left:14px!important;padding-right:14px!important}
  #storyCopy h1,#storyCopy.copy-compact h1,#storyCopy.copy-finale h1,#storyCopy.copy-revenue h1,#storyCopy.copy-granary h1{font-size:30px!important}
  #storyCopy[data-mobile-title="long"] h1{font-size:28px!important}
  #storyCopy[data-mobile-title="xlong"] h1{font-size:26px!important}
  body.mobile-detail #storyCopy p{font-size:16px!important;line-height:1.5!important}
  .micro-proof span{font-size:12px!important;padding:8px!important}
}

@media(max-height:700px){
  body.mobile-visual #storyCopy{max-height:58dvh!important;bottom:calc(14px + var(--mobile-bottom))!important}
  body.mobile-visual #storyCopy.copy-intro{bottom:calc(44px + var(--mobile-bottom))!important;max-height:calc(100dvh - var(--mobile-nav) - 52px)!important}
  body.mobile-detail #storyCopy{max-height:calc(100dvh - var(--mobile-nav) - 4px)!important;padding-top:48px!important;padding-bottom:calc(16px + var(--mobile-bottom))!important}
  body.mobile-detail #storyCopy h1{font-size:28px!important}
  body.mobile-detail #storyCopy[data-mobile-title="long"] h1{font-size:26px!important}
  body.mobile-detail #storyCopy[data-mobile-title="xlong"] h1{font-size:25px!important}
  body.mobile-detail #storyCopy p{margin-top:10px!important;font-size:16px!important;line-height:1.48!important}
  body.mobile-detail .micro-proof{margin-top:9px!important}
  body.mobile-detail .micro-proof span{padding:8px!important;font-size:12px!important}
  #storyCopy.copy-revenue .revenue-closing-line{font-size:14px!important}
}

@media(orientation:landscape) and (max-height:520px){
  :root{--mobile-nav:calc(54px + env(safe-area-inset-top))}
  nav{padding-left:18px!important;padding-right:18px!important}
  .brand-title{font-size:19px!important}
  .nav-right #demoButton{min-height:44px}
  .mobile-menu-button{width:44px;height:44px}
  body.mobile-visual #storyCopy{left:0!important;right:auto!important;bottom:0!important;width:min(58vw,520px)!important;max-height:calc(100dvh - var(--mobile-nav))!important;padding:42px 44px 18px 18px!important;background:linear-gradient(90deg,rgba(8,7,5,.98) 0,rgba(8,7,5,.94) 76%,transparent 100%)!important}
  body.mobile-visual #storyCopy.copy-right{left:auto!important;right:0!important;padding:42px 18px 18px 44px!important;background:linear-gradient(270deg,rgba(8,7,5,.98) 0,rgba(8,7,5,.94) 76%,transparent 100%)!important}
  body.mobile-visual #storyCopy.copy-intro{left:0!important;bottom:0!important;width:min(62vw,560px)!important;max-height:calc(100dvh - var(--mobile-nav))!important;background:linear-gradient(90deg,rgba(8,7,5,.98) 0,rgba(8,7,5,.94) 78%,transparent 100%)!important}
  body.mobile-visual #storyCopy h1{font-size:clamp(28px,4.8vw,40px)!important}
  body.mobile-detail #storyCopy{left:0!important;right:auto!important;width:min(54vw,470px)!important;max-height:calc(100dvh - var(--mobile-nav))!important;padding:46px 22px 16px!important;background:linear-gradient(90deg,#080705 0,rgba(8,7,5,.96) 78%,transparent 100%)!important}
  body.mobile-detail #storyCopy.copy-right{left:auto!important;right:0!important;background:linear-gradient(270deg,#080705 0,rgba(8,7,5,.96) 78%,transparent 100%)!important}
  body.mobile-detail #storyCopy h1{font-size:27px!important}
  body.mobile-detail #storyCopy p{font-size:16px!important;line-height:1.48!important}
  .remove-aitta{top:calc(var(--mobile-nav) + 6px)!important}
  .demo-dialog{width:min(620px,100%)!important;max-height:100dvh!important;border-radius:18px 18px 0 0}
  #demoForm{grid-template-columns:1fr 1fr!important}
}

@media(prefers-reduced-motion:reduce){
  .mobile-menu-backdrop,.mobile-menu-panel,#storyCopy,.vignette,.scroll-hint,.demo-modal,.demo-dialog{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .scroll-hint span:after{animation:none!important}
}