/* The site's whole look. Hand-written: it is one page, and a framework
   would be more code than the page. */

:root{
    --ground:#0B0D14; --surface:#141826; --surface-2:#1B2133; --line:#252C42;
    --ink:#F2F4F8; --muted:#8A93A8; --faint:#5A6379;
    --red:#ED4D54; --blue:#3366EB; --yellow:#FACC38; --cyan:#5CDBF0; --green:#5CE0A0;
    --display:"Archivo Black","Helvetica Neue",Arial,sans-serif;
    --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
    --gutter:clamp(20px,5vw,64px);
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:var(--body); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1080px; margin:0 auto; padding-inline:var(--gutter)}
  h1,h2,h3{font-family:var(--display); font-weight:400; text-wrap:balance; margin:0}
  p{margin:0}
  a{color:inherit}

  .eyebrow{
    font-family:var(--mono); font-size:12px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--cyan);
  }

  /* ---------- coming-soon banner ---------- */
  /* Sits above the hero, centred, and says the one thing a first-time
     visitor needs to know before they look for a download button. */
  .soon-wrap{ display:flex; justify-content:center; padding:22px 20px 0 }
  .soon{
    /* Short enough for one line on any screen, so it is a pill again. The
       text lives in its own span rather than as loose flex children, and
       min-width:0 stops a flex item pushing past its own max-width. */
    display:inline-flex; align-items:center; gap:9px;
    box-sizing:border-box; min-width:0; max-width:100%;
    padding:8px 16px; border-radius:999px;
    background:rgba(92,219,240,.07); border:1px solid rgba(92,219,240,.28);
    color:var(--cyan); text-decoration:none;
    font-family:var(--mono); font-size:12.5px; font-weight:600;
    letter-spacing:.04em;
  }
  .soon:hover{ background:rgba(92,219,240,.13); border-color:rgba(92,219,240,.5) }
  .soon:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px }
  /* The store name, not the brand — it is what a visitor has to type into a
     store search box, and the two differ. */
  .soon strong{ color:var(--ink); font-weight:600 }
  .soon-dot{
    flex:none;
    width:7px; height:7px; border-radius:50%; background:var(--cyan);
    box-shadow:0 0 0 0 rgba(92,219,240,.6);
    animation:soon-pulse 2.4s ease-out infinite;
  }
  @keyframes soon-pulse{
    70%{ box-shadow:0 0 0 7px rgba(92,219,240,0) }
    100%{ box-shadow:0 0 0 0 rgba(92,219,240,0) }
  }
  @media(prefers-reduced-motion:reduce){ .soon-dot{ animation:none } }

  /* ---------- hero ---------- */
  header{padding:clamp(48px,9vw,104px) 0 clamp(56px,8vw,96px)}
  .hero{display:grid; gap:clamp(40px,6vw,72px); align-items:center}
  @media(min-width:900px){ .hero{grid-template-columns:1fr 400px} }

  .wordmark{
    font-family:var(--display); font-size:clamp(64px,13vw,132px);
    line-height:.86; letter-spacing:-.035em; margin:14px 0 0;
  }
  .tagline{
    font-family:var(--mono); font-weight:600; color:var(--cyan);
    font-size:clamp(14px,2.4vw,19px); letter-spacing:.02em; margin-top:18px;
  }
  .pitch{color:var(--muted); max-width:44ch; margin-top:22px; font-size:1.05rem}
  .pitch strong{color:var(--ink); font-weight:600}

  .cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:34px}
  .btn{
    font-family:var(--body); font-weight:600; font-size:15px;
    padding:13px 22px; border-radius:999px; text-decoration:none;
    background:var(--cyan); color:#06202A; border:1px solid transparent;
    transition:transform .16s ease, filter .16s ease;
  }
  .btn:hover{transform:translateY(-2px); filter:brightness(1.06)}
  .btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
  .btn.ghost:hover{border-color:var(--cyan); color:var(--cyan)}
  .btn:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
  .cta small{color:var(--faint); font-family:var(--mono); font-size:12px}

  /* ---------- the board ---------- */
  .stage{
    position:relative; aspect-ratio:1; width:100%; max-width:400px; margin-inline:auto;
    background:var(--surface); border:1px solid var(--line);
    border-radius:26px; padding:5.5%; overflow:hidden;
  }
  .grid{position:relative; width:100%; height:100%}
  .cell{
    position:absolute; border-radius:16%;
    background:var(--surface-2); border:1px solid #222941;
  }
  .tile{
    position:absolute; border-radius:16%;
    display:grid; place-items:center;
    transition:transform .34s cubic-bezier(.22,.9,.3,1), opacity .22s ease;
    will-change:transform;
  }
  .tile svg{width:68%; height:68%; overflow:visible}
  .tile.pop{animation:pop .42s ease forwards}
  @keyframes pop{
    35%{transform:scale(1.16)}
    100%{transform:scale(.2); opacity:0}
  }

  /* ---------- sections ---------- */
  section{padding:clamp(48px,7vw,84px) 0; border-top:1px solid var(--line)}
  .head{max-width:56ch}
  .head h2{font-size:clamp(26px,4.4vw,38px); letter-spacing:-.02em; margin-top:12px}
  .head p{color:var(--muted); margin-top:14px}

  .steps{display:grid; gap:20px; margin-top:38px}
  @media(min-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} }
  .step{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px}
  .step .n{
    font-family:var(--mono); font-size:12px; font-weight:600; color:var(--cyan);
    letter-spacing:.14em;
  }
  .step h3{font-size:18px; margin-top:12px; letter-spacing:-.01em}
  .step p{color:var(--muted); font-size:15px; margin-top:8px}

  /* rule examples */
  .examples{display:grid; gap:18px; margin-top:36px}
  @media(min-width:760px){ .examples{grid-template-columns:1fr 1fr} }
  .example{
    background:var(--surface); border:1px solid var(--line);
    border-radius:18px; padding:22px;
  }
  .example.good{border-color:rgba(92,224,160,.35)}
  .example.bad{border-color:rgba(237,77,84,.32)}
  .trio{display:flex; gap:10px; margin:4px 0 16px}
  .trio .tile{position:static; width:64px; height:64px; flex:0 0 auto}
  .verdict{font-family:var(--mono); font-size:13px; font-weight:600}
  .good .verdict{color:var(--green)}
  .bad .verdict{color:var(--red)}
  .example p{color:var(--muted); font-size:14.5px; margin-top:8px}

  /* attribute legend */
  .attrs{display:grid; gap:14px; margin-top:34px}
  @media(min-width:680px){ .attrs{grid-template-columns:repeat(4,1fr)} }
  .attr{
    background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:18px;
  }
  .attr .k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase}
  .attr .v{font-family:var(--display); font-size:19px; margin-top:8px; letter-spacing:-.01em}
  .attr p{color:var(--muted); font-size:13.5px; margin-top:6px}
  .attr.locked{border-style:dashed}
  .attr.locked .v{color:var(--cyan)}

  /* figures */
  .figures{display:grid; gap:1px; margin-top:36px; background:var(--line);
           border:1px solid var(--line); border-radius:18px; overflow:hidden}
  @media(min-width:680px){ .figures{grid-template-columns:repeat(4,1fr)} }
  .fig{background:var(--surface); padding:22px}
  .fig .big{
    font-family:var(--mono); font-weight:600; font-size:clamp(24px,3.6vw,32px);
    letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink);
  }
  .fig .lab{color:var(--muted); font-size:13.5px; margin-top:6px}

  /* One line of legal text, so it gets one line's worth of room. The 40/60
     it had made it read as a section rather than a rule under the page. */
  footer{border-top:1px solid var(--line); padding:14px 0; color:var(--faint); font-size:13.5px}
  /* Three items, spread across one row, wrapping to a stack on a narrow
     screen rather than being squeezed. */
  footer .footer-row{
    display:flex; flex-wrap:wrap; align-items:center;
    justify-content:space-between; gap:12px 24px;
  }
  footer p{ margin:0 }
  footer .footer-strong{ color:var(--muted); font-weight:500 }
  footer .footer-swiss{ display:inline-flex; align-items:center; gap:8px }

  @media(prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important}
  }

/* ── Document pages (privacy, support) ─────────────────────────────────────
   Same type and colour as the rest of the site, set for reading rather than
   for a hero. */
.doc { max-width: 46rem; margin: 0 auto; padding: 5rem 1.5rem 6rem; }
.doc h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 .35em; }
.doc h2 { margin: 2.4em 0 .5em; font-size: 1.15rem; }
.doc p, .doc li { line-height: 1.65; }
.doc ul { padding-left: 1.2rem; }
.doc a { color: inherit; }
.stamp { font-family: "IBM Plex Mono", monospace; font-size: .8rem; opacity: .55; }

/* ── Download ──────────────────────────────────────────────────────────────
   Two tiles, side by side and equal: neither platform is the afterthought.
   A store that is not live yet renders dimmed and unlinked rather than being
   hidden, so the page reads as "both are coming" rather than "iPhone only". */
.stores{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:1rem; margin:2.5rem 0 1.75rem;
}
.store{
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.4rem; border:1px solid var(--line); border-radius:14px;
  text-decoration:none; color:var(--ink); background:rgba(255,255,255,.02);
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
a.store:hover{
  border-color:var(--cyan); background:rgba(255,255,255,.05);
  transform:translateY(-2px);
}
a.store:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px }
.store.soon{ opacity:.5; cursor:default }
.store-glyph{ display:flex; align-items:center; color:var(--ink) }
.store-text{ display:flex; flex-direction:column; gap:.1rem }
.store-lead{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted) }
.store-name{ font-size:1.15rem; font-weight:600 }
.store-plat{ font-family:"IBM Plex Mono", monospace; font-size:.72rem; color:var(--faint) }
/* The two tiers, side by side. Structure rather than a sentence: the prose
   above already states the shape, and saying it twice read as a fragment. */
.tiers{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:1rem;
}
.tier{
  padding:1.25rem 1.4rem; border:1px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,.015);
}
.tier-pro{ border-color:#2E3A5C }
.tier-name{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  font-weight:600; font-size:.95rem; margin-bottom:.7rem;
  color:var(--ink);
}
/* The price sits on the tier's own line rather than in the list: it is what
   the tier costs, not another thing the tier gives you. */
.tier-price{
  font-weight:400; font-size:.78rem; color:var(--faint);
  letter-spacing:.01em; white-space:nowrap;
}
.tier-pro .tier-price{ color:var(--muted) }
.tier-pro .tier-name{ color:var(--cyan) }
.tier ul{ margin:0; padding:0; list-style:none; display:grid; gap:.42rem }
.tier li{
  color:var(--muted); font-size:.9rem; line-height:1.45;
  padding-left:1.1rem; position:relative;
}
.tier li::before{
  content:"·"; position:absolute; left:.25rem; color:var(--faint);
}