/* =========================================================
   VISIONDER — PUBLIC HOME
   CLEAN CONSOLIDATED CSS v11
   NATIVE DOCUMENT / STABLE SCENE
   ACCESS MODAL RESTORED — NO INTERNAL SHRINK
   2026-08-23
   ========================================================= */


/* =========================================================
   01. TOKENS
   ========================================================= */

:root{
  --vd-bg:#030508;
  --vd-bg-deep:#02040a;
  --vd-panel:#070b13;

  --vd-ivory:#f4f0e8;
  --vd-text:#e7edf6;
  --vd-muted:#8d98aa;
  --vd-muted-soft:#687488;

  --vd-blue:#315f9d;
  --vd-blue-mid:#477bbb;
  --vd-blue-light:#6fa8e8;

  --vd-line:rgba(111,168,232,.14);
  --vd-line-soft:rgba(111,168,232,.09);
  --vd-line-strong:rgba(111,168,232,.30);

  --vd-radius-control:15px;
  --vd-radius-card:20px;
  --vd-radius-section:30px;
  --vd-pill:999px;

  /*
   * VisualViewport-derived values.
   * Used ONLY by Visionder Access.
   */
  --vd-visual-top:0px;
  --vd-visual-left:0px;
  --vd-visual-width:100vw;
  --vd-visual-height:100dvh;

  /* compatibility */
  --bg:var(--vd-bg);
  --ink:var(--vd-ivory);
  --muted:var(--vd-muted);
  --line:var(--vd-line);
  --cyan:var(--vd-blue-light);
  --blue:var(--vd-blue);
  --violet:var(--vd-blue-mid);
  --ivory:var(--vd-ivory);
}


/* =========================================================
   02. RESET
   ========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  width:100%;
  min-width:0;
  min-height:100%;

  margin:0;
  padding:0;

  overflow-x:hidden;
  overflow-y:auto;

  background:var(--vd-bg);
  color-scheme:dark;

  scroll-behavior:auto;

  overscroll-behavior-x:none;
  overscroll-behavior-y:none;
}

body{
  position:relative;

  width:100%;
  min-width:0;
  min-height:100vh;
  min-height:100svh;

  margin:0;
  padding:0;

  overflow:visible;

  color:var(--vd-text);

  background:
    radial-gradient(
      circle at 72% 18%,
      rgba(49,95,157,.045),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      var(--vd-bg) 0%,
      var(--vd-bg-deep) 100%
    );

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  overscroll-behavior-x:none;
  overscroll-behavior-y:none;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

h1,
h2,
h3,
p{
  margin-top:0;
}

h1,
h2,
h3{
  color:var(--vd-ivory);
}

p{
  color:var(--vd-muted);
}


/* =========================================================
   03. PUBLIC DOCUMENT
   ========================================================= */

.home{
  position:relative;

  z-index:2;

  width:100%;
  min-width:0;
  min-height:100vh;
  min-height:100svh;

  margin:0;

  overflow:visible;

  background:transparent;

  isolation:isolate;
}

html.visionder-access-open,
body.visionder-access-open{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}


/* =========================================================
   04. GLOBE
   ========================================================= */

#globeCanvas{
  position:fixed;

  top:0;
  left:0;

  z-index:0;

  width:100vw;
  height:100vh;
  height:100svh;

  display:block;

  margin:0;
  padding:0;

  border:0;

  pointer-events:none;

  opacity:0;

  filter:
    saturate(1.02)
    contrast(1.02)
    brightness(.82);

  transition:
    opacity .30s
    cubic-bezier(.16,1,.3,1);

  transform:none;

  will-change:opacity;
}

#globeCanvas.visionder-globe-ready{
  opacity:.78;
}


/* =========================================================
   05. CINEMATIC BACKGROUND SHADE
   ========================================================= */

.hero-shade{
  position:fixed;

  top:0;
  left:0;

  z-index:1;

  width:100vw;
  height:100vh;
  height:100svh;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 70% 45%,
      rgba(49,95,157,.085),
      transparent 31%
    ),
    linear-gradient(
      90deg,
      rgba(3,5,8,.70) 0%,
      rgba(3,5,8,.48) 29%,
      rgba(3,5,8,.20) 53%,
      rgba(3,5,8,.06) 76%,
      rgba(3,5,8,.16) 100%
    );

  transform:none;
}


/* =========================================================
   06. GLOBAL LABELS
   ========================================================= */

.ey,
.visionder-close-kicker,
.visionder-faq-head > span{
  display:block;

  margin:0 0 18px;

  color:var(--vd-blue-light);

  font-size:11px;
  line-height:1.2;

  font-weight:850;

  letter-spacing:.25em;

  text-transform:uppercase;
}


/* =========================================================
   07. HEADER
   ========================================================= */

.nav{
  position:fixed !important;

  top:0 !important;
  left:0 !important;
  right:0 !important;

  z-index:80;

  width:100% !important;
  height:104px;

  padding:
    0
    max(52px, calc(env(safe-area-inset-right) + 24px))
    0
    max(52px, calc(env(safe-area-inset-left) + 24px));

  display:flex;

  align-items:center;
  justify-content:space-between;

  background:
    linear-gradient(
      180deg,
      rgba(3,5,8,.94) 0%,
      rgba(3,5,8,.72) 57%,
      rgba(3,5,8,.24) 82%,
      rgba(3,5,8,0) 100%
    );

  pointer-events:none;

  -webkit-transform:none !important;
  transform:none !important;

  -webkit-backface-visibility:visible;
  backface-visibility:visible;

  will-change:auto;

  isolation:isolate;
}

.brand,
.nav-actions{
  position:relative;

  z-index:2;

  pointer-events:auto;
}


/* =========================================================
   08. BRAND
   ========================================================= */

.brand{
  display:inline-flex;

  align-items:center;

  width:auto;

  color:var(--vd-ivory);

  text-shadow:
    0 2px 18px rgba(0,0,0,.55);
}

.visionder-brand-lockup{
  display:block;

  width:auto;
  height:74px;

  max-width:340px;

  object-fit:contain;
  object-position:left center;

  filter:
    drop-shadow(
      0 0 14px rgba(49,95,157,.16)
    );
}

.nav-actions{
  display:flex;

  align-items:center;

  gap:10px;
}


/* =========================================================
   09. YOUR JOURNEY
   ========================================================= */

.journey-link,
.your-journey,
.journey-btn{
  position:relative;

  min-width:auto;
  min-height:44px;

  padding:0;

  display:inline-flex;

  align-items:center;
  justify-content:flex-end;

  border:0;
  border-radius:0;

  color:var(--vd-ivory);

  background:transparent;

  font-size:16px;
  line-height:1;

  font-weight:760;

  box-shadow:none;

  opacity:.94;

  transition:
    color .18s ease,
    opacity .18s ease;
}

.journey-link span{
  margin-left:18px;

  font-size:18px;
  line-height:1;

  transition:
    transform .18s ease;
}

.journey-link:hover,
.your-journey:hover,
.journey-btn:hover{
  color:#fff;

  background:transparent;

  border-color:transparent;

  box-shadow:none;

  opacity:1;
}

.journey-link:hover span{
  transform:translateX(3px);
}


/* =========================================================
   10. HERO
   ========================================================= */

.hero{
  position:relative;

  z-index:3;

  width:100%;

  min-height:100vh;
  min-height:100svh;

  overflow:visible;

  background:transparent;
}

.hero-copy{
  position:relative;

  z-index:6;

  width:min(720px,48vw);

  min-height:100vh;
  min-height:100svh;

  padding-left:
    max(
      7vw,
      calc(env(safe-area-inset-left) + 28px)
    );

  display:flex;

  flex-direction:column;

  justify-content:center;
}

.clean-vision-card{
  width:min(620px,100%);
}

.clean-vision-card h1,
.hero-title,
.hero h1{
  max-width:620px;

  margin:0 0 30px;

  color:var(--vd-ivory);

  font-size:
    clamp(64px,6.4vw,104px);

  line-height:.90;

  letter-spacing:-.072em;

  font-weight:900;
}

.hero-title span,
.hero h1 span{
  color:inherit;

  background:none;

  -webkit-text-fill-color:currentColor;
}

.hero-line,
.hero-subtitle,
.hero-copy > p{
  max-width:720px;

  margin:0;

  color:
    rgba(205,214,230,.72);

  font-size:
    clamp(17px,1.25vw,22px);

  line-height:1.42;

  letter-spacing:-.018em;

  font-weight:420;
}


/* =========================================================
   11. RETIRED PUBLIC MARKUP
   ========================================================= */

.intro,
.hero-actions,
.hero-cta,
.hero-buttons,
.hero-meta,
.hero-path,
.hero-steps,
.hero-flow,
.hero-pills,
.hero-small,
.center-flow,
.vision-path,
.core-mark,
.start-visionder,
.passkey-line,
.hero-eyebrow,
.hero-label,
.hero .kicker,
.hero .eyebrow,
.mapping,
.ecosystem,
.close,
.footer{
  display:none;
}


/* =========================================================
   12. PUBLIC INVESTOR ORBIT
   ========================================================= */

.public-orbit-force{
  position:relative;

  z-index:20;

  margin-top:-126px;

  padding:
    0
    5vw
    90px;

  background:transparent;
}

.orbit-force-shell{
  width:min(1680px,90vw);

  margin:0 auto;
}

.orbit-force-head{
  display:none;
}

.orbit-force-panel{
  width:min(1320px,88vw);

  margin:
    0
    auto
    18px;

  display:grid;

  grid-template-columns:
    1.45fr
    .82fr
    .82fr
    .82fr
    .82fr;

  align-items:center;

  gap:12px;

  padding:14px;

  border:
    1px solid var(--vd-line);

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(7,12,22,.84),
      rgba(3,6,12,.88)
    );

  box-shadow:
    0 18px 64px rgba(0,0,0,.26);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);
}

.orbit-force-panel input,
.orbit-force-panel select,
.orbit-real-select{
  width:100%;

  height:52px;
  min-height:52px;

  padding:0 17px;

  border:
    1px solid rgba(111,168,232,.10);

  border-radius:17px;

  color:var(--vd-ivory);

  background:
    rgba(2,5,11,.82);

  font-size:14px;

  font-weight:650;

  outline:none;

  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.orbit-force-panel input::placeholder{
  color:
    rgba(171,183,204,.54);
}

.orbit-force-panel input:hover,
.orbit-force-panel select:hover{
  border-color:
    rgba(111,168,232,.20);
}

.orbit-force-panel input:focus,
.orbit-force-panel select:focus{
  border-color:
    rgba(111,168,232,.38);

  background:
    rgba(4,9,18,.90);

  box-shadow:
    0 0 0 3px
    rgba(49,95,157,.045);
}

#publicOrbitSearch,
#publicOrbitClear,
.orbit-force-panel button{
  display:none;
}

.orbit-force-meta{
  width:min(1320px,88vw);

  margin:
    24px
    auto
    18px;

  display:flex;

  align-items:center;

  gap:12px;

  color:var(--vd-blue-light);

  font-size:12px;

  font-weight:850;

  letter-spacing:.22em;

  text-transform:uppercase;
}

.orbit-force-meta span:first-child{
  font-size:0;
}

.orbit-force-meta span:first-child::before{
  content:"INVESTOR ORBIT";

  color:var(--vd-blue-light);

  font-size:12px;

  font-weight:850;

  letter-spacing:.22em;
}

.orbit-force-meta span:last-child{
  min-height:28px;

  padding:0 11px;

  display:inline-flex;

  align-items:center;

  border:
    1px solid rgba(111,168,232,.07);

  border-radius:9px;

  color:#98a3b5;

  background:
    rgba(255,255,255,.025);

  font-size:12px;

  font-weight:750;

  letter-spacing:0;

  text-transform:none;
}


/* =========================================================
   13. INVESTOR GRID
   ========================================================= */

.public-investor-grid{
  width:min(1320px,88vw);

  margin:0 auto;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;
}

.public-investor-card{
  position:relative;

  min-height:185px;

  padding:24px;

  display:flex;

  flex-direction:column;

  border:
    1px solid rgba(111,168,232,.10);

  border-radius:
    var(--vd-radius-card);

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(49,95,157,.025),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(6,11,20,.86),
      rgba(3,6,12,.89)
    );

  box-shadow:
    0 20px 60px rgba(0,0,0,.18);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.public-investor-card:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(111,168,232,.22);

  box-shadow:
    0 24px 70px rgba(0,0,0,.22);
}

.public-investor-card .top{
  display:flex;

  justify-content:space-between;
  align-items:flex-start;

  gap:18px;
}

.public-investor-card b{
  display:block;

  color:var(--vd-ivory);

  font-size:20px;
  line-height:1.12;

  font-weight:800;

  letter-spacing:-.035em;
}

.public-investor-card small{
  display:block;

  margin-top:8px;

  color:var(--vd-muted);

  font-size:13px;
  line-height:1.45;
}

.public-investor-card .fit{
  display:none;
}

.public-investor-card .open{
  min-height:42px;

  margin-top:auto;

  padding-top:26px;

  display:inline-flex;

  align-items:center;

  align-self:flex-start;

  color:#c7d4e5;

  background:transparent;

  border:0;

  font-size:12px;

  font-weight:820;

  letter-spacing:.01em;

  transition:
    color .18s ease,
    transform .18s ease;
}

.public-investor-card .open:hover{
  color:var(--vd-ivory);

  transform:
    translateX(2px);
}

.public-investor-empty{
  grid-column:1/-1;

  padding:28px;

  border:
    1px solid var(--vd-line-soft);

  border-radius:
    var(--vd-radius-card);

  color:var(--vd-muted);

  background:
    rgba(4,8,15,.72);
}


/* =========================================================
   14. WHY VISIONDER
   ========================================================= */

.visionder-public-close{
  position:relative;

  z-index:20;

  width:min(1180px,86vw);

  margin:
    72px
    auto
    0;

  padding:
    0
    0
    26px;
}

.visionder-close-card{
  position:relative;

  padding:
    clamp(44px,4.8vw,68px)
    clamp(38px,5.4vw,74px);

  border:
    1px solid rgba(111,168,232,.13);

  border-radius:
    var(--vd-radius-section);

  background:
    radial-gradient(
      circle at 82% 14%,
      rgba(49,95,157,.045),
      transparent 35%
    ),
    linear-gradient(
      90deg,
      rgba(7,13,24,.82),
      rgba(5,10,19,.70) 52%,
      rgba(3,5,8,.50)
    );

  box-shadow:
    0 30px 110px rgba(0,0,0,.27);
}

.visionder-close-kicker{
  margin-bottom:22px;
}

.visionder-close-card h2{
  max-width:780px;

  margin:
    0
    0
    24px;

  color:var(--vd-ivory);

  font-size:
    clamp(48px,5.25vw,82px);

  line-height:.96;

  letter-spacing:-.065em;

  font-weight:880;
}

.visionder-close-card p{
  max-width:650px;

  margin:0;

  color:
    rgba(205,214,230,.68);

  font-size:
    clamp(17px,1.18vw,21px);

  line-height:1.48;
}

.visionder-close-card p + p{
  margin-top:18px;
}

.visionder-close-cta{
  min-height:48px;

  margin-top:30px;

  padding:0 24px;

  border:0;

  border-radius:
    var(--vd-pill);

  color:#080b11;

  background:
    var(--vd-ivory);

  font-size:14px;

  font-weight:850;

  box-shadow:
    0 16px 40px rgba(0,0,0,.22);
}


/* =========================================================
   15. FAQ
   ========================================================= */

.visionder-faq{
  position:relative;

  z-index:20;

  width:min(1180px,86vw);

  margin:
    clamp(54px,6vw,82px)
    auto
    0;

  padding:
    0
    0
    70px;
}

.visionder-faq-head{
  margin-bottom:24px;
}

.visionder-faq-head > span{
  margin-bottom:14px;
}

.visionder-faq-head h2{
  margin:0;

  color:var(--vd-ivory);

  font-size:
    clamp(32px,4.2vw,58px);

  line-height:.94;

  letter-spacing:-.06em;

  font-weight:880;
}

.visionder-faq-grid,
.faq-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;
}

.visionder-faq details,
.faq-grid details{
  padding:20px 22px;

  border:
    1px solid rgba(111,168,232,.10);

  border-radius:
    var(--vd-radius-card);

  background:
    rgba(5,9,17,.86);

  transition:
    border-color .18s ease,
    background-color .18s ease;
}

.visionder-faq details:hover,
.visionder-faq details[open],
.faq-grid details:hover,
.faq-grid details[open]{
  border-color:
    rgba(111,168,232,.22);

  background:
    rgba(7,13,24,.92);
}

.visionder-faq summary,
.faq-grid summary{
  position:relative;

  padding-right:32px;

  cursor:pointer;

  list-style:none;

  color:var(--vd-ivory);

  font-size:15px;

  line-height:1.35;

  font-weight:820;
}

.visionder-faq summary::-webkit-details-marker,
.faq-grid summary::-webkit-details-marker{
  display:none;
}

.visionder-faq summary::after,
.faq-grid summary::after{
  content:"+";

  position:absolute;

  top:50%;
  right:0;

  transform:
    translateY(-50%);

  color:
    var(--vd-blue-light);

  font-size:18px;

  line-height:1;

  font-weight:700;
}

.visionder-faq details[open] summary::after,
.faq-grid details[open] summary::after{
  content:"−";
}

.visionder-faq p,
.faq-grid details p{
  margin:
    14px
    0
    0;

  color:
    rgba(205,214,230,.62);

  font-size:14px;

  line-height:1.55;
}


/* =========================================================
   16. FOOTER
   ========================================================= */

.visionder-footer{
  position:relative;

  z-index:20;

  width:min(1180px,86vw);

  margin:
    28px
    auto
    0;

  padding:
    30px
    0
    max(
      46px,
      calc(env(safe-area-inset-bottom) + 24px)
    );

  display:flex;

  align-items:center;
  justify-content:center;

  gap:14px;

  color:
    rgba(150,160,185,.50);

  background:transparent;

  border:0;

  font-size:11px;

  font-weight:600;

  letter-spacing:.10em;
}

.visionder-footer nav{
  display:flex;

  gap:14px;
}

.visionder-footer span,
.visionder-footer a{
  color:
    rgba(150,160,185,.50);
}

.visionder-footer nav a:not(:last-child)::after{
  content:"·";

  margin-left:14px;

  color:
    rgba(150,160,185,.28);
}

.visionder-footer a:hover{
  color:
    rgba(244,240,232,.80);
}


/* =========================================================
   17. ACCESS BACKDROP
   ========================================================= */

body.visionder-access-open::before{
  content:"";

  position:fixed;

  inset:0;

  z-index:9998;

  width:100vw;
  height:100vh;
  height:100lvh;

  background:
    rgba(2,4,9,.86);

  -webkit-backdrop-filter:
    blur(9px);

  backdrop-filter:
    blur(9px);

  pointer-events:auto;

  touch-action:none;
}


/* =========================================================
   18. ACCESS WRAPPER
   ========================================================= */

.modal-wrap{
  position:fixed;

  top:var(--vd-visual-top);
  left:var(--vd-visual-left);

  right:auto;
  bottom:auto;

  z-index:9999;

  width:var(--vd-visual-width);
  height:var(--vd-visual-height);

  min-height:0;

  display:none;

  align-items:center;
  justify-content:center;

  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));

  overflow:hidden;

  overscroll-behavior:none;

  background:
    rgba(2,4,9,.08);

  opacity:0;

  pointer-events:none;
}

.modal-wrap.show,
.modal-wrap.is-open,
.modal-wrap.open,
.modal-wrap.active{
  display:flex;

  opacity:1;

  pointer-events:auto;
}


/* =========================================================
   19. ACCESS CARD
   ========================================================= */

.modal,
.visionder-access-modal{
  position:relative;

  width:
    min(
      560px,
      calc(var(--vd-visual-width) - 36px)
    );

  max-height:none;

  min-height:0;

  margin:0;

  padding:38px;

  overflow:visible;

  overscroll-behavior:none;

  border:
    1px solid rgba(111,168,232,.13);

  border-radius:28px;

  background:
    radial-gradient(
      circle at 82% 0%,
      rgba(49,95,157,.055),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      rgba(8,15,28,.96),
      rgba(4,8,16,.96)
    );

  box-shadow:
    0 34px 110px rgba(0,0,0,.42);

  transform:
    translateY(-12px)
    scale(.99);

  opacity:0;

  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    opacity .2s ease;
}

.modal-wrap.show .modal,
.modal-wrap.show .visionder-access-modal,
.modal-wrap.is-open .modal,
.modal-wrap.is-open .visionder-access-modal,
.modal-wrap.open .modal,
.modal-wrap.open .visionder-access-modal,
.modal-wrap.active .modal,
.modal-wrap.active .visionder-access-modal{
  transform:
    translateY(0)
    scale(1);

  opacity:1;
}


/* =========================================================
   20. ACCESS TYPOGRAPHY
   ========================================================= */

.modal-kicker{
  margin:
    0
    0
    14px;

  color:
    var(--vd-blue-light);

  font-size:11px;

  font-weight:850;

  letter-spacing:.28em;

  text-transform:uppercase;
}

.visionder-access-modal h2,
.modal h2,
.modal h3{
  margin:
    0
    0
    28px;

  color:
    var(--vd-ivory);

  font-size:
    clamp(34px,3.1vw,44px);

  line-height:.98;

  letter-spacing:-.055em;

  font-weight:850;
}

.close-x{
  position:absolute;

  top:22px;
  right:22px;

  width:34px;
  height:34px;

  padding:0;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid rgba(111,168,232,.10);

  border-radius:
    var(--vd-pill);

  color:
    rgba(220,228,245,.62);

  background:
    rgba(3,6,12,.30);

  font-size:19px;
}

#accessEmailStep .access-label{
  display:none;
}

.access-label,
.access-form-grid label span{
  display:block;

  margin:
    0
    0
    8px;

  color:
    rgba(205,214,230,.54);

  font-size:11px;

  font-weight:800;

  letter-spacing:.16em;

  text-transform:uppercase;
}

.access-input,
.visionder-access-modal .access-input{
  width:100%;

  height:54px;

  margin:
    0
    0
    12px;

  padding:
    0
    16px;

  border:
    1px solid rgba(111,168,232,.12);

  border-radius:
    var(--vd-radius-control);

  color:
    var(--vd-ivory);

  background:
    rgba(2,5,11,.64);

  font-size:16px;

  outline:none;
}

#accessEmailStep .access-input{
  height:58px;

  margin-bottom:14px;

  border-radius:16px;
}

.access-input:focus{
  border-color:
    rgba(111,168,232,.34);

  box-shadow:
    0 0 0 4px
    rgba(49,95,157,.045);
}

.continue-btn,
.passkey-btn,
.modal-primary,
.modal-secondary{
  width:100%;

  height:54px;

  border-radius:
    var(--vd-radius-control);

  font-size:15px;

  font-weight:850;
}

.modal-primary,
.continue-btn{
  border:0;

  color:#080b11;

  background:
    var(--vd-ivory);
}

#accessEmailStep .modal-primary{
  height:58px;

  border-radius:16px;
}

.modal-secondary,
.passkey-btn{
  margin-top:10px;

  border:
    1px solid rgba(111,168,232,.11);

  color:
    rgba(244,240,232,.88);

  background:
    rgba(2,5,11,.48);
}


/* =========================================================
   21. ACCESS STATES
   ========================================================= */

.access-state[hidden]{
  display:none;
}

.access-state{
  animation:
    visionderAccessReveal
    .24s
    cubic-bezier(.16,1,.3,1)
    both;
}

@keyframes visionderAccessReveal{
  from{
    opacity:0;

    transform:
      translateY(8px);
  }

  to{
    opacity:1;

    transform:
      translateY(0);
  }
}

.access-form-grid{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:14px;

  margin:
    0
    0
    18px;
}

.access-form-grid .wide{
  grid-column:1/-1;
}

.access-form-grid .access-input{
  margin-bottom:0;
}

.help{
  margin:
    14px
    0
    0;

  color:
    rgba(200,209,232,.44);

  font-size:11px;

  line-height:1.4;
}

.terms-row{
  display:flex;

  align-items:center;

  gap:11px;

  margin:
    8px
    0
    18px;

  color:
    rgba(205,214,230,.66);

  font-size:13px;

  line-height:1.45;
}

.terms-row input{
  margin:0;

  flex:0 0 auto;

  accent-color:
    var(--vd-blue-mid);
}

.terms-row a{
  color:
    var(--vd-blue-light);
}


/* =========================================================
   22. AVATAR
   ========================================================= */

.visionder-avatar-large{
  width:76px;
  height:76px;

  margin:
    0
    0
    22px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid rgba(111,168,232,.18);

  border-radius:24px;

  color:
    var(--vd-ivory);

  background:
    radial-gradient(
      circle at 28% 22%,
      rgba(111,168,232,.22),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      rgba(16,32,57,.96),
      rgba(49,95,157,.70)
    );

  font-size:25px;

  font-weight:900;

  letter-spacing:-.04em;

  box-shadow:
    0 18px 48px rgba(0,0,0,.28);
}


/* =========================================================
   23. RECOGNIZED VISIONDER
   ========================================================= */

.access-recognized-state{
  width:100%;

  padding:
    8px
    0
    2px;

  text-align:center;
}

.visionder-recognized-avatar{
  width:88px;
  height:88px;

  margin:
    0
    auto
    20px;

  border-radius:28px;

  font-size:28px;
}

.visionder-access-modal
.visionder-recognized-name{
  margin:
    0
    0
    30px;

  color:
    var(--vd-ivory);

  font-size:
    clamp(30px,3vw,40px);

  line-height:1;

  font-weight:880;

  letter-spacing:-.055em;

  text-align:center;
}

.access-recognized-state
.modal-primary{
  max-width:360px;

  height:58px;

  margin:
    0
    auto;

  display:block;

  border-radius:16px;
}


/* =========================================================
   24. REGISTRATION PHOTO
   ========================================================= */

.visionder-photo-field{
  display:flex;

  justify-content:flex-start;
  align-items:center;

  margin:
    2px
    0
    18px;
}

.visionder-photo-picker{
  position:relative;

  width:82px;
  height:82px;

  flex:
    0
    0
    82px;

  padding:0;

  overflow:hidden;

  display:grid;

  place-items:center;

  border:
    1px dashed
    rgba(111,168,232,.30);

  border-radius:24px;

  color:
    rgba(244,240,232,.72);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(111,168,232,.10),
      transparent 45%
    ),
    rgba(2,5,11,.58);

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(255,255,255,.018);

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;

  cursor:pointer;
}

.visionder-photo-picker:hover{
  border-color:
    rgba(111,168,232,.54);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(111,168,232,.16),
      transparent 48%
    ),
    rgba(4,9,18,.72);
}

.visionder-photo-picker:active{
  transform:
    scale(.985);
}

.visionder-photo-picker.has-photo{
  border-style:solid;

  border-color:
    rgba(111,168,232,.34);

  box-shadow:
    0
    12px
    30px
    rgba(0,0,0,.22);
}

.visionder-photo-picker[aria-busy="true"]{
  opacity:.62;

  pointer-events:none;
}

.visionder-photo-placeholder{
  display:grid;

  place-items:center;

  width:100%;
  height:100%;

  font-size:32px;

  font-weight:300;

  line-height:1;

  transform:
    translateY(-1px);
}

.visionder-photo-image{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  display:block;
}

.visionder-photo-image[hidden],
.visionder-photo-placeholder[hidden]{
  display:none;
}


/* =========================================================
   25. REGISTRATION CTA
   ========================================================= */

#accessCreateStep #enterVisionderBtn:disabled{
  cursor:not-allowed;

  color:
    rgba(205,214,230,.38);

  background:
    rgba(244,240,232,.07);

  border:
    1px solid
    rgba(111,168,232,.08);

  box-shadow:none;

  opacity:1;
}

#accessCreateStep #enterVisionderBtn:not(:disabled){
  cursor:pointer;

  color:#080b11;

  background:
    var(--vd-ivory);

  border:
    1px solid transparent;

  box-shadow:
    0
    12px
    34px
    rgba(0,0,0,.20);
}


/* =========================================================
   26. REGISTRATION PASSKEY
   ========================================================= */

.registration-passkey-state{
  text-align:center;
}

.registration-passkey-state
.modal-primary{
  max-width:360px;

  margin:
    0
    auto;

  display:block;
}

.registration-passkey-error{
  max-width:360px;

  margin:
    14px
    auto
    0;

  color:
    rgba(255,132,145,.86);

  font-size:12px;

  line-height:1.45;

  text-align:center;
}

.registration-passkey-error[hidden]{
  display:none;
}


/* =========================================================
   27. NEW DEVICE
   ========================================================= */

#accessNewDeviceStep{
  padding-top:4px;
}

#accessNewDeviceStep
.visionder-recognized-avatar{
  margin-bottom:20px;
}

.visionder-access-modal
#accessNewDeviceStep
.visionder-recognized-name{
  margin-bottom:28px;
}

#accessNewDeviceStep
#passkeyEnterBtn,
#accessNewDeviceStep
#setupDeviceBtn,
#accessNewDeviceStep
#deviceSetupPanel,
#setupDeviceBtn,
#deviceSetupPanel{
  display:none !important;
}

#accessNewDeviceStep
#newDeviceName{
  margin-bottom:22px;
}

.temporary-access-status{
  max-width:300px;

  margin:
    16px
    auto
    0;

  color:
    rgba(232,239,255,.62);

  font-size:12px;

  line-height:1.45;

  text-align:center;
}

.temporary-access-status.is-error{
  color:#ff8b9b;
}


/* VISIONDER_RECOVERY_SINGLE_ACTION_LAYOUT_V14 */
.recovery-single-primary{
  width:100%;
  max-width:360px;
  height:58px;
  margin:0 auto;
  display:block;
  border-radius:16px;
}


/* =========================================================
   28. RECOVERY BASE
   ========================================================= */

.recognized-recovery{
  width:100%;

  margin-top:10px;

  text-align:center;
}

.recognized-recovery-link,
.recognized-recovery-cancel,
.recognized-recovery-saved{
  appearance:none;

  border:0;

  padding:0;

  background:transparent;

  color:
    rgba(229,236,250,.58);

  font:inherit;

  font-size:12px;

  cursor:pointer;
}

.recognized-recovery-link:hover,
.recognized-recovery-cancel:hover,
.recognized-recovery-saved:hover{
  color:
    rgba(249,250,255,.94);
}

.recognized-recovery-panel{
  width:100%;

  margin-top:14px;

  padding:15px;

  border:
    1px solid
    rgba(126,174,255,.13);

  border-radius:16px;

  background:
    rgba(4,9,20,.72);

  text-align:left;
}

.recognized-recovery-panel[hidden],
.recognized-recovery-status[hidden],
.recognized-recovery-error[hidden],
.recognized-recovery-result[hidden],
.recognized-recovery-primary[hidden],
.recognized-recovery-cancel[hidden]{
  display:none !important;
}

.recognized-recovery-title{
  color:
    rgba(249,250,255,.96);

  font-size:14px;

  font-weight:700;
}

.recognized-recovery-copy{
  margin:
    6px
    0
    13px;

  color:
    rgba(219,228,247,.56);

  font-size:12px;

  line-height:1.45;
}

.recognized-recovery-field{
  display:grid;

  gap:7px;
}

.recognized-recovery-field > span{
  color:
    rgba(231,237,251,.68);

  font-size:11px;

  font-weight:600;
}

.recognized-recovery-primary{
  width:100%;

  margin-top:12px;
}

.recognized-recovery-cancel,
.recognized-recovery-saved{
  display:block;

  margin:
    11px
    auto
    0;
}

.recognized-recovery-status,
.recognized-recovery-error{
  margin-top:11px;

  font-size:11px;

  line-height:1.45;
}

.recognized-recovery-status{
  color:
    rgba(219,228,247,.62);
}

.recognized-recovery-error{
  color:#ff8d97;
}

.recognized-recovery-result{
  margin-top:14px;
}

.recognized-recovery-key{
  max-height:92px;

  overflow:auto;

  padding:11px;

  border:
    1px solid
    rgba(132,181,255,.18);

  border-radius:12px;

  background:
    rgba(0,4,12,.82);

  color:
    rgba(250,251,255,.94);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size:11px;

  line-height:1.5;

  overflow-wrap:anywhere;

  user-select:text;

  -webkit-user-select:text;
}


/* =========================================================
   29. PHOTO CROP
   ========================================================= */

.visionder-photo-crop-overlay{
  position:fixed;

  inset:0;

  z-index:10050;

  display:grid;

  place-items:center;

  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));

  background:
    rgba(0,3,10,.88);

  -webkit-backdrop-filter:
    blur(18px);

  backdrop-filter:
    blur(18px);
}

.visionder-photo-crop-panel{
  width:min(100%,570px);

  max-height:
    calc(
      100dvh -
      max(48px, env(safe-area-inset-top)) -
      max(48px, env(safe-area-inset-bottom))
    );

  overflow:auto;

  overscroll-behavior:contain;

  padding:24px;

  border:
    1px solid
    rgba(126,190,255,.18);

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(8,17,33,.98),
      rgba(3,9,20,.99)
    );

  box-shadow:
    0 34px 100px
    rgba(0,0,0,.58);
}

.visionder-photo-crop-head{
  display:flex;

  flex-direction:column;

  gap:5px;

  margin-bottom:18px;
}

.visionder-photo-crop-head strong{
  color:#f7f4ee;

  font-size:
    clamp(22px,3vw,30px);

  line-height:1.08;
}

.visionder-photo-crop-head span{
  color:
    rgba(214,225,243,.62);

  font-size:13px;

  line-height:1.4;
}

.visionder-photo-crop-frame{
  width:max-content;

  max-width:100%;

  margin:0 auto;

  overflow:hidden;

  border-radius:22px;

  border:
    1px solid
    rgba(130,205,255,.28);

  background:#01030a;
}

.visionder-photo-crop-canvas{
  display:block;

  max-width:100%;

  touch-action:none;

  cursor:grab;

  user-select:none;

  -webkit-user-select:none;
}

.visionder-photo-crop-controls{
  display:grid;

  grid-template-columns:
    24px
    minmax(0,1fr)
    24px;

  align-items:center;

  gap:12px;

  margin-top:20px;

  color:
    rgba(240,246,255,.75);

  font-size:20px;

  text-align:center;
}

.visionder-photo-crop-controls
input[type="range"]{
  width:100%;

  accent-color:#f7f4ee;
}

.visionder-photo-crop-actions{
  display:grid;

  grid-template-columns:
    auto
    auto
    minmax(130px,1fr);

  gap:10px;

  margin-top:20px;
}

.visionder-photo-crop-actions button{
  min-height:48px;

  padding:0 17px;

  border-radius:14px;

  font-weight:700;
}

.visionder-photo-crop-secondary{
  border:
    1px solid
    rgba(130,195,255,.18);

  background:
    rgba(8,15,28,.76);

  color:
    rgba(239,245,255,.78);
}

.visionder-photo-crop-primary{
  border:0;

  background:#f7f4ee;

  color:#05070c;
}


/* =========================================================
   30. RECOVERY PREMIUM
   ========================================================= */

.visionder-onboarding-resume
#recognizedRecovery,
.visionder-onboarding-resume
#recognizedRecoveryToggle,
.visionder-onboarding-resume
#recognizedRecoveryPanel{
  display:none !important;
}

html.visionder-onboarding-resume-global
#recognizedRecovery,
html.visionder-onboarding-resume-global
#recognizedRecoveryToggle,
html.visionder-onboarding-resume-global
#recognizedRecoveryPanel,
html.visionder-onboarding-resume-global
#fullDeviceRecoveryToggle,
html.visionder-onboarding-resume-global
#fullDeviceRecoveryPanel{
  display:none !important;
}

.visionder-recovery-premium-active
#slideToEnter,
.visionder-recovery-premium-active
#recognizedRecoveryToggle{
  display:none !important;
}

.visionder-recovery-premium-active
#recognizedRecovery{
  width:100%;

  margin-top:0;
}

.visionder-recovery-premium-active
#recognizedRecoveryPanel{
  display:block;

  width:100%;

  margin:0;

  padding:0;

  border:0;

  border-radius:0;

  background:transparent;

  box-shadow:none;
}

.visionder-recovery-premium-active
#recognizedRecoveryPanel
> .recognized-recovery-title,
.visionder-recovery-premium-active
#recognizedRecoveryPanel
> .recognized-recovery-copy{
  display:none !important;
}

.visionder-recovery-premium-active
.recognized-recovery-field{
  width:100%;

  text-align:left;
}

.visionder-recovery-premium-passkey
.recognized-recovery-field,
.visionder-recovery-premium-passkey
#recognizedRecoveryVerify{
  display:none !important;
}

.visionder-recovery-premium-passkey
#recognizedRecoveryUseSaved{
  display:block;

  width:100%;

  max-width:360px;

  margin:
    0
    auto
    8px;
}

.visionder-recovery-premium-passkey
#recognizedRecoveryUseSaved[hidden]{
  display:none !important;
}

.visionder-recovery-premium-passkey
#recognizedRecoveryCreate{
  display:block;

  width:100%;

  max-width:360px;

  margin:
    0
    auto;
}

.visionder-recovery-premium-passkey
.recognized-recovery-cancel{
  display:block;

  margin:
    14px
    auto
    0;
}

.visionder-recovery-premium-result
.recognized-recovery-field,
.visionder-recovery-premium-result
#recognizedRecoveryVerify,
.visionder-recovery-premium-result
#recognizedRecoveryUseSaved{
  display:none !important;
}

.visionder-recovery-premium-result
#recognizedRecoveryCreate{
  display:none !important;
}

.visionder-recovery-premium-result
#recognizedRecoveryResult{
  width:100%;

  margin-top:0;

  text-align:left;
}

.visionder-recovery-premium-result
#recognizedRecoveryResult
> .recognized-recovery-title{
  display:none !important;
}

.visionder-recovery-premium-result
#recognizedRecoveryResult
> .recognized-recovery-copy{
  display:block !important;

  margin:0;

  color:
    rgba(242,245,255,.84);

  font-size:15px;

  line-height:1.55;

  text-align:left;
}

.visionder-recovery-premium-result
.recognized-recovery-result-note{
  margin:
    11px
    0
    0;

  color:
    rgba(196,207,226,.62);

  font-size:12px;

  line-height:1.5;

  text-align:left;
}

/* =========================================================
   VISIONDER_CREATE_RESULT_PARITY_V13_36E

   Create-Passkey RESULT Recovery Key presentation.

   Desktop / tablet / landscape:
   natural inline presentation.

   Narrow portrait mobile <=480px:
   fixed VRK1- prefix row + complete payload row.

   Presentation only.
   Recovery Key value and authority are unchanged.
   ========================================================= */

.visionder-recovery-premium-result
.recognized-recovery-key{
  width:100%;
  max-height:92px;

  box-sizing:border-box;

  margin-top:20px;

  overflow:auto;

  padding:
    14px
    13px;

  border:
    1px solid
    rgba(126,179,255,.24);

  border-radius:12px;

  background:
    rgba(1,5,14,.84);

  color:#dce9ff;

  font:
    600
    12px/1.4
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;

  user-select:text;
  -webkit-user-select:text;
}

.visionder-recovery-premium-result
.visionder-recovery-key-prefix,
.visionder-recovery-premium-result
.visionder-recovery-key-payload{
  display:inline;
}

@media(max-width:480px) and (orientation:portrait){

  .visionder-recovery-premium-result
  .recognized-recovery-key{
    padding-left:9px;
    padding-right:9px;
  }

  .visionder-recovery-premium-result
  .visionder-recovery-key-prefix,
  .visionder-recovery-premium-result
  .visionder-recovery-key-payload{
    display:block;
  }

  .visionder-recovery-premium-result
  .visionder-recovery-key-payload{
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
  }

}

/* =========================================================
   VISIONDER_RECOVERY_RESULT_ACTION_PARITY_V13_36B

   RESULT owns Copy + Done geometry directly.

   Copy remains repeatable.
   Done remains gated by the existing JS copy acknowledgement.

   Presentation only.
   No Recovery, Session, Device, Passkey, Principal,
   deadline, authority or database semantics change.
   ========================================================= */

#recognizedRecoveryResult
.recognized-recovery-result-actions{
  width:100%;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  margin-top:15px;
}

#recognizedRecoveryResult
#recognizedRecoveryCopy,
#recognizedRecoveryResult
#recognizedRecoverySaved,
.visionder-recovery-premium-passkey
.recognized-recovery-passkey-actions:has(
  #recognizedRecoveryUseSaved:not([hidden])
)
#recognizedRecoveryCreate{
  min-height:46px;

  padding:
    0
    18px;

  border-radius:12px;

  font-size:13px;

  font-weight:800;
}

#recognizedRecoveryResult
#recognizedRecoveryCopy{
  width:auto;
  min-width:0;

  flex:
    0
    0
    auto;

  margin:0;
}

#recognizedRecoveryResult
#recognizedRecoverySaved,
.visionder-recovery-premium-passkey
.recognized-recovery-passkey-actions:has(
  #recognizedRecoveryUseSaved:not([hidden])
)
#recognizedRecoveryCreate{
  min-width:0;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  margin:0;

  border:
    1px solid
    rgba(138,174,229,.23);

  background:
    rgba(5,12,25,.36);

  color:
    rgba(242,245,255,.88);
}

#recognizedRecoveryResult
#recognizedRecoverySaved:disabled{
  opacity:.38;

  cursor:not-allowed;
}


/* =========================================================
   31. ACCESS AUTOFILL — VISIONDER OWNED
   ========================================================= */

.access-input:-webkit-autofill,
.access-input:-webkit-autofill:hover,
.access-input:-webkit-autofill:active{
  -webkit-text-fill-color:
    var(--vd-ivory) !important;

  caret-color:
    var(--vd-ivory) !important;

  -webkit-box-shadow:
    0 0 0 1000px
    rgb(2,5,11)
    inset !important;

  box-shadow:
    0 0 0 1000px
    rgb(2,5,11)
    inset !important;

  background-color:
    rgb(2,5,11) !important;

  background-image:
    none !important;

  transition:
    background-color
    9999s
    ease-in-out
    0s !important;
}


.access-input:-webkit-autofill:focus{
  -webkit-text-fill-color:
    var(--vd-ivory) !important;

  caret-color:
    var(--vd-ivory) !important;

  -webkit-box-shadow:
    0 0 0 1000px
    rgb(2,5,11)
    inset,
    0 0 0 4px
    rgba(49,95,157,.045) !important;

  box-shadow:
    0 0 0 1000px
    rgb(2,5,11)
    inset,
    0 0 0 4px
    rgba(49,95,157,.045) !important;

  background-color:
    rgb(2,5,11) !important;

  background-image:
    none !important;
}


/* =========================================================
   32. ACCESSIBILITY
   ========================================================= */

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:
    1px solid rgba(111,168,232,.54);

  outline-offset:3px;
}


/* =========================================================
   33. RESPONSIVE — TABLET
   ========================================================= */

@media(max-width:1100px){

  .public-orbit-force{
    margin-top:-145px;
  }

  .orbit-force-panel{
    width:
      min(92vw,900px);

    grid-template-columns:
      1fr
      1fr;
  }

  .orbit-force-meta,
  .public-investor-grid{
    width:
      min(92vw,900px);
  }

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

}


/* =========================================================
   34. RESPONSIVE — IPAD / TABLET
   ========================================================= */

@media(max-width:900px){

  .nav{
    height:84px;

    padding:
      0
      max(20px, calc(env(safe-area-inset-right) + 14px))
      0
      max(20px, calc(env(safe-area-inset-left) + 14px));
  }

  .visionder-brand-lockup{
    height:74px;

    max-width:320px;
  }

  .journey-link,
  .your-journey,
  .journey-btn,
  [data-access]{
    min-width:auto;

    min-height:48px;

    padding:
      0
      15px;

    border-radius:18px;

    font-size:13px;
  }

  .hero-copy{
    width:55vw;

    padding-left:
      max(
        6vw,
        calc(env(safe-area-inset-left) + 22px)
      );
  }

  .public-orbit-force{
    margin-top:-118px;
  }

  .visionder-photo-picker{
    width:78px;
    height:78px;

    flex-basis:78px;

    border-radius:22px;
  }

  .modal,
  .visionder-access-modal{
    width:
      min(
        560px,
        calc(var(--vd-visual-width) - 28px)
      );

    padding:
      32px
      28px
      28px;

    border-radius:24px;
  }

}


/* =========================================================
   35. RESPONSIVE — MOBILE
   ========================================================= */

@media(max-width:720px){

  .nav{
    height:76px;

    padding:
      0
      max(18px, calc(env(safe-area-inset-right) + 12px))
      0
      max(18px, calc(env(safe-area-inset-left) + 12px));
  }

  .visionder-brand-lockup{
    height:68px;

    max-width:280px;
  }

  .journey-link,
  .your-journey,
  .journey-btn,
  [data-access]{
    min-height:44px;

    padding:
      0
      13px;

    border-radius:16px;

    font-size:12px;
  }

  .journey-link span{
    margin-left:9px;
  }

  #globeCanvas{
    opacity:0;

    filter:
      saturate(.95)
      contrast(1)
      brightness(.72);
  }

  #globeCanvas.visionder-globe-ready{
    opacity:.50;
  }

  .hero-shade{
    background:
      radial-gradient(
        circle at 72% 38%,
        rgba(49,95,157,.07),
        transparent 31%
      ),
      linear-gradient(
        180deg,
        rgba(3,5,8,.22) 0%,
        rgba(3,5,8,.14) 36%,
        rgba(3,5,8,.42) 72%,
        rgba(3,5,8,.72) 100%
      );
  }

  .hero{
    min-height:100svh;
  }

  .hero-copy{
    width:100%;

    min-height:100svh;

    padding:
      max(90px, calc(env(safe-area-inset-top) + 76px))
      max(22px, calc(env(safe-area-inset-right) + 18px))
      110px
      max(22px, calc(env(safe-area-inset-left) + 18px));

    justify-content:center;
  }

  .clean-vision-card{
    width:100%;
  }

  .clean-vision-card h1,
  .hero-title,
  .hero h1{
    max-width:92vw;

    margin-bottom:24px;

    font-size:
      clamp(58px,16.2vw,82px);

    line-height:.91;

    letter-spacing:-.07em;
  }

  .hero-line,
  .hero-subtitle,
  .hero-copy > p{
    max-width:90vw;

    font-size:17px;

    line-height:1.48;
  }

  .public-orbit-force{
    margin-top:-54px;

    padding:
      0
      18px
      70px;
  }

  .orbit-force-shell{
    width:100%;
  }

  .orbit-force-panel{
    width:100%;

    grid-template-columns:
      1fr;

    gap:10px;

    padding:14px;

    border-radius:24px;
  }

  .orbit-force-meta,
  .public-investor-grid{
    width:100%;
  }

  .public-investor-grid{
    grid-template-columns:
      1fr;

    gap:14px;
  }

  .public-investor-card{
    min-height:165px;

    padding:21px;

    border-radius:18px;
  }

  .visionder-public-close,
  .visionder-faq,
  .visionder-footer{
    width:
      min(92vw,680px);
  }

  .visionder-close-card{
    padding:
      36px
      24px;

    border-radius:26px;
  }

  .visionder-close-card h2{
    font-size:
      clamp(42px,12vw,58px);
  }

  .visionder-faq-grid,
  .faq-grid{
    grid-template-columns:
      1fr;
  }

  .visionder-footer{
    flex-direction:column;

    gap:12px;

    text-align:center;
  }

  .visionder-footer nav{
    flex-wrap:wrap;

    justify-content:center;
  }

  .modal-wrap{
    padding:
      max(18px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }

  .modal,
  .visionder-access-modal{
    width:100%;

    padding:
      32px
      28px
      28px;

    border-radius:24px;
  }

  .access-form-grid{
    grid-template-columns:
      1fr;
  }

  .access-form-grid .wide{
    grid-column:auto;
  }

}


/* =========================================================
   36. RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media(max-width:430px){

  .nav{
    height:76px;

    padding:
      0
      max(14px, calc(env(safe-area-inset-right) + 10px))
      0
      max(14px, calc(env(safe-area-inset-left) + 10px));
  }

  .visionder-brand-lockup{
    height:60px;

    max-width:240px;
  }

  .journey-link,
  .your-journey,
  .journey-btn,
  [data-access]{
    padding:
      0
      11px;

    font-size:11px;
  }

  .clean-vision-card h1,
  .hero-title,
  .hero h1{
    font-size:
      clamp(52px,16.5vw,72px);
  }

  .visionder-close-card{
    padding:
      32px
      21px;
  }

  /*
   * V13.36E
   * No mobile-specific Copy/Done geometry.
   * The canonical RESULT action group owns its sizing.
   */

}




/* =========================================================
   36B. PORTRAIT HERO TITLE AUTHORITY
   VISIONDER_PORTRAIT_HERO_TITLE_AUTHORITY_V1

   Portrait typography only.

   Phone portrait:
   title steps back so Earth + message share the scene.

   Tablet / iPad portrait:
   title gains moderate presence without becoming desktop-size.

   Landscape is intentionally untouched.
   ========================================================= */

@media (orientation:portrait) and (max-width:720px){

  .clean-vision-card h1,
  .hero-title,
  .hero h1{
    font-size:
      clamp(48px,14.2vw,60px);
  }

}


@media (orientation:portrait) and (min-width:721px) and (max-width:1100px){

  .clean-vision-card h1,
  .hero-title,
  .hero h1{
    font-size:
      clamp(70px,7.6vw,84px);
  }

}

/* =========================================================
   37. PHOTO CROP MOBILE
   ========================================================= */

@media(max-width:600px){

  .visionder-photo-crop-overlay{
    padding:
      max(14px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .visionder-photo-crop-panel{
    padding:18px;

    border-radius:23px;
  }

  .visionder-photo-crop-frame{
    border-radius:18px;
  }

  .visionder-photo-crop-actions{
    grid-template-columns:
      1fr
      1fr;
  }

  .visionder-photo-crop-primary{
    grid-column:
      1 / -1;
  }

}


/* =========================================================
   38. REDUCED MOTION
   ========================================================= */

/* =========================================================
   VISIONDER_PHONE_EARTH_VISIBILITY_FREEZE_V1

   HOME <-> MY WORLD
   PHONE PORTRAIT <-> PHONE LANDSCAPE

   One canonical Earth presentation contract.

   Geometry / camera / anchor remain JS-owned.

   Phone landscape intentionally has NO independent opacity,
   brightness, filter or veil override here.

   It inherits the same canonical Earth presentation used by
   the normal phone scene.

   This prevents landscape from becoming a second visual
   interpretation of the same Earth.
   ========================================================= */


/* =========================================================
   VISIONDER_HOME_PHONE_LANDSCAPE_FINAL_V4

   Canonical phone-landscape presentation for Home Access /
   Recovery.

   Scope:
   - short phone landscape only
   - portrait untouched
   - tablet / desktop untouched
   - Access + Recovery semantics untouched

   Goals:
   - restore Investor Orbit below the Hero
   - compact the Access card
   - compact typography / inputs / actions
   - keep RESULT 1 Recovery Key on one row when width permits
   ========================================================= */

@media
  (orientation:landscape)
  and (max-height:520px)
  and (max-width:1000px){

  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }


  /*
   * Landscape header/nav spacing:
   * keep size unchanged; move only the row upward so the
   * space above is reduced and the Hero gets more breathing
   * room below it.
   */
  .nav{
    translate:0 -24px;
  }


  /* -------------------------------------------------------
     Public page geometry
     ------------------------------------------------------- */

  .public-orbit-force{
    margin-top:24px;
  }


  /* -------------------------------------------------------
     Access viewport
     ------------------------------------------------------- */

  .modal-wrap{
    padding:
      max(10px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }


  /* -------------------------------------------------------
     Access card
     ------------------------------------------------------- */

  .modal,
  .visionder-access-modal{
    width:min(100%,520px);

    max-height:
      calc(
        100dvh -
        max(20px, env(safe-area-inset-top)) -
        max(20px, env(safe-area-inset-bottom))
      );

    padding:
      24px
      26px
      22px;

    overflow:auto;

    border-radius:22px;
  }


  /* -------------------------------------------------------
     Access headings
     ------------------------------------------------------- */

  .visionder-access-modal h2,
  .modal h2,
  .modal h3{
    margin-bottom:20px;

    font-size:28px;
    line-height:1;

    letter-spacing:-.045em;
  }


  /* -------------------------------------------------------
     Inputs
     ------------------------------------------------------- */

  .access-input,
  .visionder-access-modal .access-input{
    height:46px;

    margin-bottom:10px;

    padding:
      0
      14px;

    /*
     * iOS Safari:
     * 16px prevents focus-triggered visual viewport zoom.
     */
    font-size:16px;
  }

  #accessEmailStep .access-input{
    height:46px;

    margin-bottom:10px;

    border-radius:14px;
  }


  /* -------------------------------------------------------
     Buttons
     ------------------------------------------------------- */

  .continue-btn,
  .passkey-btn,
  .modal-primary,
  .modal-secondary{
    height:46px;

    border-radius:14px;

    font-size:14px;
  }

  #accessEmailStep .modal-primary{
    height:46px;

    border-radius:14px;
  }


  /* -------------------------------------------------------
     Recognized identity / Continue setup
     ------------------------------------------------------- */

  .access-recognized-state{
    padding:
      0
      0
      1px;
  }

  .visionder-recognized-avatar{
    width:64px;
    height:64px;

    margin:
      0
      auto
      14px;

    border-radius:20px;

    font-size:22px;
  }

  .visionder-access-modal
  .visionder-recognized-name{
    margin-bottom:20px;

    font-size:28px;
  }

  .access-recognized-state
  .modal-primary,
  .registration-passkey-state
  .modal-primary,
  .recovery-single-primary{
    max-width:320px;
    height:46px;

    border-radius:14px;
  }


  /* -------------------------------------------------------
     Recovery access
     ------------------------------------------------------- */

  .recognized-recovery{
    margin-top:6px;
  }

  .recognized-recovery-primary{
    margin-top:9px;
  }

  .recognized-recovery-cancel,
  .recognized-recovery-saved{
    margin-top:9px;
  }


  /* -------------------------------------------------------
     Saved Passkey / Create Passkey
     ------------------------------------------------------- */

  .visionder-recovery-premium-passkey
  #recognizedRecoveryUseSaved,
  .visionder-recovery-premium-passkey
  #recognizedRecoveryCreate{
    max-width:320px;
  }


  /* -------------------------------------------------------
     RESULT 1
     ------------------------------------------------------- */

  .visionder-recovery-premium-result
  #recognizedRecoveryResult
  > .recognized-recovery-copy{
    font-size:13px;
    line-height:1.4;
  }

  .visionder-recovery-premium-result
  .recognized-recovery-result-note{
    margin-top:7px;

    font-size:11px;
    line-height:1.4;
  }

  .visionder-recovery-premium-result
  .recognized-recovery-key{
    max-height:54px;

    margin-top:12px;

    padding:
      10px
      12px;

    overflow-x:auto;
    overflow-y:hidden;

    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
  }

  .visionder-recovery-premium-result
  .visionder-recovery-key-prefix,
  .visionder-recovery-premium-result
  .visionder-recovery-key-payload{
    display:inline;
  }

  #recognizedRecoveryResult
  .recognized-recovery-result-actions{
    margin-top:10px;
  }

  #recognizedRecoveryResult
  #recognizedRecoveryCopy,
  #recognizedRecoveryResult
  #recognizedRecoverySaved,
  .visionder-recovery-premium-passkey
  .recognized-recovery-passkey-actions:has(
    #recognizedRecoveryUseSaved:not([hidden])
  )
  #recognizedRecoveryCreate{
    min-height:42px;

    padding:
      0
      16px;

    font-size:12px;
  }

}


@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto;

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }

}
/* VISIONDER_RECOVERY_SINGLE_ACTION_STATE_V14_1 */
#accessNewDeviceStep.recovery-single-action-state{
  text-align:center;
}

#accessNewDeviceStep.recovery-single-action-state
.recovery-single-primary{
  width:100%;
  max-width:360px;
  height:58px;
  margin:0 auto;
  display:block;
  border-radius:16px;
}

/* VISIONDER_ACCESS_EMAIL_CENTERED_DECISION_V1 */

#accessEmailStep h2{
  text-align:center;
}

#accessEmailStep .modal-primary{
  width:100%;
  max-width:360px;
  height:58px;

  margin:
    0
    auto;

  display:block;

  border-radius:16px;
}


/* VISIONDER_RECOVERY_RESTART_DUAL_CHOICE_LAYOUT_V1 */

.recognized-recovery-passkey-actions{
  width:100%;
}

.visionder-recovery-premium-passkey
.recognized-recovery-passkey-actions:has(
  #recognizedRecoveryUseSaved:not([hidden])
){
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:8px;

  width:100%;
  max-width:400px;

  margin:
    0
    auto;
}

.visionder-recovery-premium-passkey
.recognized-recovery-passkey-actions:has(
  #recognizedRecoveryUseSaved:not([hidden])
)
#recognizedRecoveryUseSaved,
.visionder-recovery-premium-passkey
.recognized-recovery-passkey-actions:has(
  #recognizedRecoveryUseSaved:not([hidden])
)
#recognizedRecoveryCreate{
  display:flex;

  align-items:center;
  justify-content:center;

  width:100%;
  max-width:none;

  margin:0;
}