/* Arete website. Space Black editorial system, mirrored from the iOS app:
   bg #050505, platinum text, electric-blue accent, Playfair display + Sora. */

@font-face {
  font-family: "Sora";
  src: url("fonts/Sora.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --bg: #050505;
  --bg-elevated: #131314;
  --surface: #171718;
  --surface-high: #201f20;
  --text-high: #e5e2e3;
  --text-mid: #c4c5d9;
  --text-low: #8e90a2;
  --hairline: #262629;
  --border: #434656;
  --accent-soft: #b8c3ff;
  --accent: #2e5bff;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Sora", -apple-system, "Helvetica Neue", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

::selection { background: var(--accent); color: var(--text-high); }

/* ---------- Nav ---------- */

nav {
  height: 68px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
}
nav .wrap { display: flex; align-items: center; width: 100%; }
.wordmark {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 6px;
  color: var(--text-high);
  text-decoration: none;
}
nav .links { margin-left: auto; display: flex; gap: 28px; }
nav .links a {
  color: var(--text-low);
  text-decoration: none;
  font-size: 14px;
  transition: color 160ms var(--ease-out);
}
nav .links a:hover { color: var(--text-high); }

/* ---------- Type ---------- */

h1, h2 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--text-high);
  letter-spacing: -0.01em;
  line-height: 1.08;
}
h1 { font-size: clamp(44px, 7vw, 76px); }
h2 { font-size: clamp(30px, 4.4vw, 46px); }

.lede {
  font-size: 17px;
  color: var(--text-mid);
  max-width: 46ch;
}

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

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--text-high);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 10px;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.btn:hover { background: #3d67ff; }
.btn:active { transform: scale(0.97); }

.store-note { font-size: 13px; color: var(--text-low); margin-top: 14px; }

/* ---------- Hero ---------- */

.hero { padding: 88px 0 96px; }
.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero p { margin: 22px 0 34px; }

/* ---------- Phone frame ---------- */

.phone {
  border: 1px solid var(--hairline);
  background: var(--bg-elevated);
  border-radius: 46px;
  padding: 11px;
  box-shadow: 0 32px 80px rgba(46, 91, 255, 0.07);
  max-width: 320px;
  justify-self: center;
}
.phone img { display: block; width: 100%; border-radius: 36px; }
.phone.sm { max-width: 280px; }

/* ---------- Sections ---------- */

section.feature { padding: 96px 0; border-top: 1px solid var(--hairline); }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split p { margin-top: 20px; max-width: 42ch; }

/* Bento */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 250px;
  gap: 16px;
  margin-top: 48px;
}
.cell {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
}
.cell.text-cell { padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; }
.cell.text-cell h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-high);
  margin-bottom: 8px;
}
.cell.text-cell p { font-size: 14px; color: var(--text-low); }
.cell img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cell.tall { grid-row: span 2; }
.bento-grid-note { margin-top: 18px; }

/* Manifesto */
.manifesto { padding: 120px 0; border-top: 1px solid var(--hairline); text-align: center; }
.manifesto h2 { max-width: 22ch; margin: 0 auto; }
.manifesto .lede { margin: 24px auto 40px; }

/* ---------- Footer ---------- */

footer { border-top: 1px solid var(--hairline); padding: 40px 0 56px; font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
footer a { color: var(--text-low); text-decoration: none; transition: color 160ms var(--ease-out); }
footer a:hover { color: var(--text-high); }
footer .copyright { margin-left: auto; color: var(--text-low); }

/* ---------- Legal / utility pages ---------- */

.page { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; }
.page h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 40px; }
.page h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-high);
  margin: 36px 0 8px;
  line-height: 1.4;
}
.page p, .page li { font-size: 15px; color: var(--text-mid); }
.page ul { padding-left: 20px; margin-top: 8px; }
.page a { color: var(--accent-soft); }
.updated { font-size: 13px; color: var(--text-low); margin-top: -30px; margin-bottom: 40px; }

/* Confirm page states */
.confirm-card { max-width: 480px; margin: 14vh auto 0; padding: 0 24px; text-align: left; }
.confirm-card .rule { border: 0; border-top: 1px solid var(--hairline); margin: 26px 0; }
.confirm-card h1 { font-size: clamp(34px, 6vw, 46px); }
.confirm-card p { margin-top: 18px; }
.hidden { display: none; }

/* ---------- Summit mark (the ridge motif, not a screenshot) ---------- */

.hero-mark {
  justify-self: center;
  width: 100%;
  max-width: 380px;
}
.mark { display: block; width: 100%; height: auto; }
.mark .ridge {
  stroke: var(--text-high);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mark .ridge-back {
  stroke: var(--text-high);
  stroke-opacity: 0.22;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mark .base { stroke: var(--border); stroke-width: 1.5; }

@media (prefers-reduced-motion: no-preference) {
  .mark .ridge, .mark .ridge-back {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1400ms var(--ease-out) 120ms forwards;
  }
  .mark .ridge-back { animation-delay: 0ms; animation-duration: 1200ms; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Statement (what the app is) ---------- */

.statement { padding: 104px 0; border-top: 1px solid var(--hairline); }
.statement .wrap { max-width: 900px; }
.statement h2 { max-width: 20ch; }
.statement .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 36px;
}
.statement .cols p { color: var(--text-mid); max-width: 60ch; }
.statement .cols p + p { margin-top: 0; }

/* ---------- Steps (how to use it) ---------- */

.steps { padding: 104px 0; border-top: 1px solid var(--hairline); }
.steps h2 { margin-bottom: 8px; }
.steps .lede { margin-bottom: 56px; }
.step {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid var(--hairline);
}
.step:last-child { border-bottom: 1px solid var(--hairline); }
.step .num {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  color: var(--text-high);
  line-height: 1;
  letter-spacing: -0.02em;
}
.step h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 21px;
  color: var(--text-high);
  margin-bottom: 8px;
}
.step p { color: var(--text-mid); max-width: 56ch; }

/* ---------- About / bio ---------- */

.bio { max-width: 760px; margin: 0 auto; padding: 80px 24px 104px; }
.bio .mark-inline { width: 128px; margin-bottom: 40px; }
.bio h1 { font-size: clamp(40px, 6vw, 60px); margin-bottom: 28px; }
.bio p {
  font-size: 17px;
  color: var(--text-mid);
  max-width: 68ch;
  margin-bottom: 20px;
}
.bio p.lead { font-size: 20px; color: var(--text-high); }
.bio h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-high);
  margin: 48px 0 12px;
}
.bio .signoff {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  color: var(--text-low);
}
.bio .signoff a { color: var(--accent-soft); }

/* ---------- Reveal on scroll ---------- */

/* Only hide reveal elements when JS is present to un-hide them.
   Without JS (or if the observer never fires) content stays fully visible. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Mobile ---------- */

@media (max-width: 820px) {
  .hero { padding: 48px 0 64px; }
  .hero .wrap, .split { grid-template-columns: 1fr; gap: 40px; }
  .bento { grid-template-columns: 1fr; }
  .cell.tall { grid-row: auto; }
  .phone { max-width: 270px; }
  nav .links { gap: 18px; }
  footer .copyright { margin-left: 0; width: 100%; }

  .hero-mark { max-width: 220px; }
  .nav-how { display: none; }
  .statement, .steps { padding: 72px 0; }
  .statement .cols { grid-template-columns: 1fr; gap: 24px; }
  .step { grid-template-columns: 56px 1fr; gap: 18px; padding: 26px 0; }
  .step .num { font-size: 40px; }
}