/* RettSim landing page — "Grid" design, compact layout with 3D monitor */
@font-face{font-family:'Nova Flat';src:url('fonts/nova-flat.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter.woff') format('woff');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono.woff') format('woff');font-weight:100 800;font-display:swap}
@font-face{font-family:'Pixelify Sans';src:url('fonts/pixelify-sans.woff') format('woff');font-weight:400 700;font-display:swap}

:root{
  --bg:#ECECE9;--bg-top:#F4F4F2;--bg-bottom:#E6E6E2;
  --ink:#151A17;--ink-2:#3F4542;--muted:#6B706D;
  --accent:#EC7231;--accent-hi:#F59050;--accent-hover:#D9601F;
  --surface:#FFFFFF;--line:rgba(20,20,20,.14);--err:#B3261E;
  --display:'Nova Flat',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --pixel:'Pixelify Sans',var(--mono);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink-2)}
a:hover{color:var(--accent-hover)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* background: fine grid + crosshairs, soft light from the left */
.page{position:relative;overflow:hidden;min-height:100vh;
  background-color:var(--bg);
  background-image:radial-gradient(ellipse 55% 70% at 18% 45%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),url('assets/grid-tile.svg'),linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  background-size:100% 100%,88px 88px,100% 100%;background-position:0 0,center top,0 0}

.shell{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:20px clamp(20px,4vw,48px) 0;
  min-height:100vh;display:flex;flex-direction:column}

/* header */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink);justify-self:start}
.brand-name{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:.01em}
.brand-name b{font-weight:400;color:var(--accent)}
.brand-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-2)}
.pills{display:flex;align-items:center;gap:4px;padding:4px;border-radius:11px;background:var(--surface);box-shadow:0 4px 14px rgba(0,0,0,.05)}
.pill{padding:7px 11px;font-size:12.5px;color:var(--ink-2)}
.pill-on{padding:7px 13px;border-radius:8px;background:var(--ink);color:#fff;font-weight:600}
.top-cta{justify-self:end;display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:9px;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#fff;text-decoration:none;font-weight:700;font-size:14px;box-shadow:0 6px 16px rgba(236,114,49,.28)}
.top-cta:hover{color:#fff;filter:brightness(1.06)}

/* hero: two columns, fills the screen without large gaps */
.hero{flex:1;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(16px,3vw,40px);align-items:center;
  min-height:min(720px,calc(100vh - 140px));padding:clamp(12px,2.5vh,28px) 0}
.hero-left{display:flex;flex-direction:column;gap:clamp(20px,3.5vh,34px);max-width:470px}
.wordmark{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(96px,min(11vw,21vh),168px);line-height:.84;letter-spacing:.02em;
  text-transform:lowercase;color:var(--ink);text-shadow:0 14px 24px rgba(0,0,0,.12)}
.wordmark>span:not(.sr-only){display:block}
.wordmark .wm-sim{color:var(--accent);text-shadow:0 14px 24px rgba(236,114,49,.22)}

/* sign-up */
.signup{display:flex;flex-direction:column;gap:12px}
.signup h2{margin:0;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.desc{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:44ch}
#beta-form{display:flex;flex-direction:column;gap:8px}
.fields{display:flex;flex-wrap:wrap;gap:8px}
.field{display:flex}
.field-name{flex:1 1 150px}
.field-email{flex:1.6 1 200px}
.field-role{flex:1 1 100%}
.field input,.field select{width:100%;height:46px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:0 14px;font:14.5px var(--sans);color:var(--ink);outline:none}
.field select{padding:0 10px}
.field input::placeholder{color:var(--muted)}
.field select.is-empty{color:var(--muted)}
.field select option{color:var(--ink)}
.field input[aria-invalid="true"],.field input[aria-invalid="true"]:focus,.field select[aria-invalid="true"],.field select[aria-invalid="true"]:focus{border-color:var(--err);box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.required-note{margin:0;font-size:11.5px;color:var(--ink-2)}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(236,114,49,.2)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cta{height:46px;padding:0 20px;border:0;border-radius:8px;background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#fff;font:700 14.5px var(--sans);cursor:pointer;box-shadow:0 8px 18px rgba(236,114,49,.28)}
.cta:hover{filter:brightness(1.06)}
.cta:disabled{opacity:.6;cursor:progress}
.note{font-size:12.5px;color:var(--ink-2)}
.error{margin:0;font-size:13px;font-weight:600;color:var(--err)}
.consent{margin:0;font-size:11.5px;line-height:1.45;color:var(--ink-2)}
.thanks{margin:0;padding:14px 16px;border-radius:10px;background:var(--surface);font-size:15px;line-height:1.5}

/* right column: 3D monitor with callout and trust note around it */
.hero-right{position:relative;height:clamp(460px,72vh,640px);min-width:0}
.model{position:absolute;inset:0;outline:none;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.model.grabbing{cursor:grabbing}
.model.idle{cursor:default}
.model canvas{display:block;width:100%!important;height:100%!important}
.model:focus-visible{outline:2px dashed var(--accent);outline-offset:-8px;border-radius:24px}
.model-poster{position:absolute;left:50%;top:50%;width:min(92%,600px);transform:translate(-50%,-50%);pointer-events:none}
.model.ready .model-poster{display:none}
.model-hint{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;
  font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);opacity:.75;transition:opacity .4s;pointer-events:none}
.model.played .model-hint{opacity:0}
.callout{position:absolute;right:0;top:4%;z-index:2;max-width:270px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;pointer-events:none}
.callout-head{margin:0;display:flex;align-items:center;gap:9px;color:var(--ink)}
.pixel{font-family:var(--pixel);font-weight:700;font-size:34px;line-height:1;color:var(--accent)}
.callout-tf{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.callout-text{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.trust{position:absolute;right:0;bottom:3%;z-index:2;margin:0;max-width:270px;text-align:right;font-size:13px;line-height:1.5;color:var(--ink-2);pointer-events:none}

/* language rail, right edge */
.rail{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:4px;padding:4px;border-radius:12px;background:var(--surface);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.rail button{width:40px;height:40px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:700 11.5px var(--mono);cursor:pointer}
.rail button:hover{background:#F3F3F0}
.rail button[aria-pressed="true"]{background:var(--ink);color:#fff}
.rail button:focus-visible,.cta:focus-visible,.top-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* footer tab */
.foot{align-self:center;display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:auto;padding:12px 28px 14px;border-radius:20px 20px 0 0;background:var(--surface);font-size:12px;color:var(--ink-2)}

/* tablet + phone: one column */
@media (max-width:900px){
  .shell{padding-top:16px}
  .top{grid-template-columns:1fr auto;row-gap:12px}
  .pills{grid-column:1 / -1;grid-row:2;justify-self:start}
  .top-cta{height:40px;padding:0 14px;font-size:13px}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;gap:8px;padding-top:20px}
  .hero-left{display:contents}
  .wordmark{order:1;font-size:clamp(84px,26vw,150px)}
  .hero-right{display:contents}
  .model{order:3;position:relative;inset:auto;height:clamp(300px,82vw,420px)}
  .callout,.trust{position:static;align-items:flex-start;text-align:left;max-width:none}
  .callout{order:2;margin-top:8px}
  .signup{order:4;margin-top:4px}
  .trust{order:5;margin-top:16px}
  .rail{position:static;transform:none;flex-direction:row;align-self:flex-start;margin:20px 0 4px}
  .rail button{width:44px;height:44px}
  .foot{justify-self:stretch;justify-content:center;border-radius:16px 16px 0 0;margin-top:16px}
}

/* Small phones */
@media (max-width:480px){
  .brand-tag{display:none}
  .wordmark{font-size:clamp(80px,26vw,110px)}
  .foot{width:max-content;max-width:100%;gap:10px;padding:14px 12px 16px}
}