@font-face {
    font-family: "Figtree";
    src:
      url("/assets/fonts/Figtree-Variable.ttf") format("truetype-variations"),
      url("/assets/fonts/Figtree-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
  }

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

  :root {
    --bg: #ffffff;
    --ink: #1d1d1f;
    --mid: #6e6e73;
    --light: #f5f5f7;
    --border: #e4e4e8;
    --accent: #0071e3;
    --ua: #e54a3d;
    --ub: #2f9b56;
    --uc: #3865d0;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --pad-x: clamp(20px, 4vw, 64px);
    --topbar-h: clamp(58px, 5vw, 72px);
    --section-py: clamp(84px, 10vw, 150px);
    --grid-minor: rgba(0, 113, 227, 0.045);
    --grid-major: rgba(0, 113, 227, 0.09);
  }

  html { scroll-behavior: smooth; }
  html, body {
    width: 100%;
    background:
      linear-gradient(var(--grid-minor) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
      linear-gradient(var(--grid-major) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
      var(--bg);
    background-size: 12px 12px, 12px 12px, 96px 96px, 96px 96px;
    color: var(--ink);
    font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: inherit; }
  ::selection { background: rgba(0,113,227,0.15); }
  section[id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }

  /* ── Hero ──────────────────────────────────────────── */
  #hero {
    min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center;
    padding: calc(var(--topbar-h) + 26px) var(--pad-x) 50px;
    position: relative; overflow: hidden;
  }
  .hero-grid {
    width: min(1240px, 100%); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 0.92fr);
    gap: clamp(24px, 4vw, 70px); align-items: center;
  }
  @keyframes dotBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

  #hero h1 {
    font-size: clamp(38px, 5.7vw, 90px);
    font-weight: 900; letter-spacing: -0.045em; line-height: 0.97;
  }
  .swap-wrap { white-space: nowrap; position: relative; }
  .squiggle { position: relative; display: inline-block; }
  .squiggle > svg {
    position: absolute; left: 0; right: 0; bottom: -0.1em;
    width: 100%; height: 0.2em; overflow: visible; pointer-events: none;
  }
  .squiggle > svg path { stroke: var(--accent); stroke-width: 6; fill: none; stroke-linecap: round; }
  #swapWord { position: relative; display: inline-block; min-width: 0.6ch; }
  #swapWord.selected { background: rgba(0,113,227,0.18); box-shadow: 0 0 0 4px rgba(0,113,227,0.18); border-radius: 5px; }
  #swapWord .caret {
    display: none; position: absolute; right: -5px; top: 9%; height: 82%;
    width: 4px; background: var(--accent); border-radius: 3px;
    animation: caretBlink 0.8s steps(1) infinite;
  }
  #swapWord.typing .caret { display: block; }
  @keyframes caretBlink { 50% { opacity: 0; } }

  .sync-chip {
    position: absolute; left: calc(100% + 14px); top: 50%;
    transform: translateY(-50%) scale(0.6); opacity: 0;
    font-family: var(--mono); font-size: clamp(9px, 0.75vw, 11px); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ub); background: #fff; border: 1.5px solid var(--ub);
    padding: 5px 10px; border-radius: 7px; white-space: nowrap;
    transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.34,1.8,0.64,1);
    pointer-events: none;
  }
  .sync-chip.on { opacity: 1; transform: translateY(-50%) scale(1); }

  #hero .sub {
    margin-top: clamp(18px, 2.2vw, 30px);
    font-size: clamp(15px, 1.35vw, 21px); font-weight: 300; color: var(--mid);
    line-height: 1.65; max-width: 46ch;
  }
  #hero .sub strong { color: var(--ink); font-weight: 600; }
  .hero-hint {
    margin-top: clamp(20px, 2.4vw, 34px);
    font-size: 13px; font-weight: 500; color: #a8a8ae;
  }
  .hero-hint .hint-touch { display: none; }
  @media (pointer: coarse) {
    /* touch devices can't drag the city blocks — promise something true instead */
    .hero-hint .hint-mouse { display: none; }
    .hero-hint .hint-touch { display: inline; }
  }

  /* the city */
  #cityScene {
    position: relative;
    width: min(545px, 100%);
    height: clamp(340px, 32vw, 440px);
    margin: 0 auto;
    justify-self: center;
  }
  #cityGround { position: absolute; inset: 0; pointer-events: none; }
  .cblock {
    position: absolute; cursor: grab; user-select: none;
    touch-action: pan-y;
    filter: drop-shadow(0 7px 10px rgba(29,29,31,0.10));
  }
  .cblock:active { cursor: grabbing; }
  .cblock svg { display: block; pointer-events: none; }
  .cblock.spawn { transform: scale(0.15); opacity: 0; transform-origin: 50% 92%; }
  .cblock.grown { transition: transform 0.45s cubic-bezier(0.34,1.5,0.64,1), opacity 0.3s ease, left 0.55s cubic-bezier(0.3,0.9,0.4,1), top 0.55s cubic-bezier(0.3,0.9,0.4,1); }
  .cblock.dragME { transition: none !important; }
  #cityChip {
    position: absolute; z-index: 90; pointer-events: none;
    font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ub); background: #fff; border: 1.5px solid var(--ub);
    padding: 4px 8px; border-radius: 6px; white-space: nowrap;
    opacity: 0; transform: translate(-50%, -120%) scale(0.6);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34,1.7,0.64,1);
  }
  #cityChip.on { opacity: 1; transform: translate(-50%, -150%) scale(1); }

  /* presence cursors (page-level) */
  .fcur { position: absolute; left: 0; top: 0; z-index: 80; pointer-events: none; will-change: transform; }
  .fcur .tag {
    margin: 2px 0 0 13px; padding: 3px 10px; border-radius: 100px;
    font-size: 11.5px; font-weight: 800; color: #fff; white-space: nowrap;
    border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    display: inline-block;
  }
  .fcur .bubble {
    position: absolute; left: 20px; top: -38px;
    background: #fff; border: 1px solid var(--border); border-radius: 12px 12px 12px 3px;
    padding: 5px 11px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 10px 26px rgba(0,0,0,0.1);
    opacity: 0; transform: translateY(6px) scale(0.9);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  }
  .fcur.talk .bubble { opacity: 1; transform: translateY(0) scale(1); }

:root { --mid: #62656b; --teaser-width: 1240px; }
body { min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; }
:focus-visible { outline: 3px solid #0071e3; outline-offset: 5px; }
.teaser-header { width: 100%; height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad-x); background: rgba(255,255,255,.86); border-bottom: 1px solid #e9ebef; }
.brand { font-size: 23px; font-weight: 850; letter-spacing: -.035em; text-decoration: none; }
.domain { font-family: var(--mono); font-size: 11px; color: var(--mid); letter-spacing: .04em; }
#hero { min-height: 0; flex: 1; padding: 58px var(--pad-x) 44px; }
.hero-grid { max-width: var(--teaser-width); grid-template-columns: minmax(0, 1fr) minmax(330px,.9fr); gap: 45px; }
.eyebrow { font-size: 11px; color: var(--mid); letter-spacing: .12em; font-weight: 650; text-transform: uppercase; line-height: 1.6; margin-bottom: 27px; }
#hero h1 { font-size: clamp(44px, 5.7vw, 82px); }
#hero .sub { font-size: clamp(17px, 1.35vw, 20px); font-weight: 400; line-height: 1.65; max-width: 42ch; margin-top: 31px; }
.hero-figure { min-width: 0; width: 100%; }
#cityScene { height: clamp(310px, 31vw, 400px); }
.coming-soon { padding: 32px var(--pad-x) 35px; background: rgba(255,255,255,.8); border-top: 1px solid var(--border); }
.coming-inner { max-width: var(--teaser-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.coming-soon h2 { font-size: clamp(58px, 7.7vw, 110px); font-weight: 850; line-height: 1.07; letter-spacing: -.055em; }
.coming-soon h2 span { color: var(--accent); }
.coming-soon p { font-size: 17px; color: var(--mid); line-height: 1.55; padding-right: 15px; }
.teaser-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px var(--pad-x); border-top: 1px solid var(--border); background: #fff; font-size: 11px; color: var(--mid); }
.teaser-footer a { color: inherit; text-underline-offset: 3px; overflow-wrap: anywhere; }
.teaser-footer nav { display: flex; gap: 16px; }
.teaser-footer span:last-child { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 980px) {
  .hero-grid { gap: 24px; grid-template-columns: 1fr; max-width: 640px; }
  #hero { padding-top: 42px; padding-bottom: 29px; }
  #hero h1 { font-size: clamp(46px, 8vw, 72px); }
  #hero .sub { max-width: 48ch; }
  #cityScene { height: 275px; }
  .hero-figure { width: min(470px,100%); margin: 5px auto 0; }
  .coming-inner { max-width: 640px; gap: 25px; }
  .coming-soon h2 { font-size: 67px; }
  .coming-soon p { font-size: 15px; padding: 0; }
}
@media (max-width: 600px) {
  .teaser-header { height: 66px; }.brand { font-size: 21px; }.domain { font-size: 10px; }
  #hero { padding-top: 34px; padding-bottom: 22px; }.hero-grid { gap: 10px; }
  .eyebrow { font-size: 9px; letter-spacing: .09em; margin-bottom: 21px; }
  #hero h1 { font-size: clamp(40px,10.7vw,62px); }
  #hero .sub { font-size: 17px; line-height: 1.6; margin-top: 25px; }
  #cityScene { height: 230px; }.sync-chip { display: none; }
  .coming-soon { padding-top: 25px; padding-bottom: 28px; }
  .coming-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .coming-soon h2 { font-size: clamp(48px,12.7vw,73px); }
  .coming-soon p { font-size: 15px; }.coming-soon p br { display: none; }
  .teaser-footer { flex-wrap: wrap; gap: 10px; padding-block: 19px; }
}

.teaser-opening { min-height: calc(100svh - 78px); display: flex; flex-direction: column; }
.teaser-overview { padding: 76px var(--pad-x) 84px; background: #fff; border-top: 1px solid var(--border); }
.overview-inner { width: 100%; max-width: var(--teaser-width); margin: 0 auto; display: grid; grid-template-columns: .95fr 1.05fr; align-items: start; gap: 80px; }
.teaser-overview h2 { font-size: clamp(32px,3.5vw,48px); line-height: 1.1; letter-spacing: -.04em; max-width: 18ch; font-weight: 850; }
.overview-copy p { font-size: 17px; color: var(--mid); line-height: 1.75; }
.overview-copy p + p { margin-top: 20px; }
.overview-copy strong { font-weight: 650; color: var(--ink); }
@media (max-width: 980px) {
  .overview-inner { max-width: 640px; grid-template-columns: 1fr; gap: 30px; }
  .teaser-overview { padding-top: 50px; padding-bottom: 54px; }
  .teaser-overview h2 { max-width: 23ch; font-size: 38px; }
}
@media (max-width: 600px) {
  .teaser-opening { min-height: calc(100svh - 66px); }
  .teaser-overview { padding-top: 39px; padding-bottom: 44px; }
  .teaser-overview h2 { font-size: 32px; max-width: 19ch; }
  .overview-copy p { font-size: 17px; line-height: 1.7; }
}
.teaser-legal { width: min(100%, 850px); margin: 0 auto; padding: 58px var(--pad-x) 76px; }
.teaser-legal h1 { font-size: clamp(36px, 6vw, 58px); line-height: 1.1; letter-spacing: -.04em; }
.teaser-legal .legal-date { color: var(--mid); font-size: 13px; }
.teaser-legal section { margin-top: 42px; scroll-margin-top: 24px; }
.teaser-legal h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.025em; }
.teaser-legal h3 { margin-top: 28px; font-size: 19px; line-height: 1.35; }
.teaser-legal p, .teaser-legal address { margin-top: 16px; font-size: 16px; line-height: 1.75; }
.teaser-legal address { font-style: normal; }
.teaser-legal a { text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .fcur { display: none; } }