/* RemainAI — remainai.org
   The palette is lifted from the app's own dark theme (#13161c ground,
   #202329 cards, the blue accent and the tag colours) so the product
   screenshots sit in the page instead of on top of it. The page ground is
   pulled one step darker than the app's so the screenshots read as raised. */

:root {
  --ink: #0b0d12;
  --raise: #13161c;
  --card: #1b1f27;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --fg: #e5e8ec;
  --dim: #939cab;
  --dimmer: #6b7382;
  --blue: #7aa2ff;
  --blue-deep: #3f6fd8;

  /* The app's tag colours. They appear here only as small marks. */
  --t-green: #10b981;
  --t-amber: #f59e0b;
  --t-blue: #3b82f6;
  --t-violet: #8b5cf6;
  --t-pink: #ec4899;

  --display: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(20px, 5vw, 72px);
  --page: 1300px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: fixed; z-index: 100; top: 10px; left: 10px;
  padding: 10px 16px; border-radius: 8px;
  background: var(--blue); color: #0b0d12; font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

.mark {
  width: 22px; height: 22px;
  fill: currentColor; fill-opacity: 0.1;
  stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.mark circle { fill: currentColor; stroke: none; fill-opacity: 1; }

/* ── Spine ───────────────────────────────────────────────────────────────
   Six ticks, one per section, filling as the page scrolls — the rituals
   streak grid borrowed as navigation furniture. */
.spine {
  position: fixed; z-index: 40;
  top: 50%; left: 22px;
  display: grid; gap: 7px;
  transform: translateY(-50%);
}
.spine span {
  width: 9px; height: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
}
.spine span.lit { background: var(--blue); border-color: var(--blue); }

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 28px;
  height: 68px; padding-inline: var(--gut);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.nav.stuck { border-bottom-color: var(--line); }

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -0.045em;
}
.brand .mark { color: var(--blue); }

.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 0.88rem; color: var(--dim); }
.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: var(--fg); }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px; border-radius: 9px;
  background: var(--blue); color: #0a0d14;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  transition: background 0.2s, transform 0.2s;
}
.cta:hover { background: #96b6ff; transform: translateY(-1px); }
.cta-sm { padding: 9px 16px; font-size: 0.86rem; border-radius: 8px; }

.ghost {
  display: inline-flex; align-items: center;
  padding: 13px 22px; border: 1px solid var(--line-strong); border-radius: 9px;
  font-weight: 500; font-size: 0.95rem; color: var(--fg);
  transition: border-color 0.2s, background 0.2s;
}
.ghost:hover { border-color: var(--blue); background: rgba(122, 162, 255, 0.07); }

.menu { display: none; }

.mobile-nav {
  position: fixed; z-index: 45; top: 68px; left: 0; right: 0;
  padding: 12px var(--gut) 22px;
  background: var(--raise); border-bottom: 1px solid var(--line);
}
.mobile-nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--dim); }
.mobile-nav a:last-child { border: 0; color: var(--blue); font-weight: 600; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  max-width: var(--page); margin-inline: auto;
  padding: clamp(120px, 17vh, 190px) var(--gut) 0;
}

/* Headline left, the supporting column set against its baseline on the right —
   the headline stays the largest thing without leaving half the row empty. */
.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(40px, 6vw, 90px);
  align-items: end;
}
.hero-tag { grid-column: 1 / -1; }
.hero-side { padding-bottom: 0.6rem; }

.hero-tag {
  margin: 0 0 22px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.85rem; color: var(--dim);
}
.hero-tag::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px;
  background: var(--t-green);
}

.hero h1 {
  font-size: clamp(3rem, 7.4vw, 5.9rem);
  font-weight: 700;
  letter-spacing: -0.055em;
}

.lede {
  max-width: 34em; margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.62; color: var(--dim);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-meta { margin: 20px 0 0; font-size: 0.85rem; color: var(--dimmer); }

.hero-shot {
  margin: clamp(56px, 8vw, 96px) 0 0;
  border: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--raise);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05), 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}
.hero-shot img {
  /* Cropped at the fold rather than shrunk, so the UI stays legible. */
  max-height: 68vh; width: 100%; object-fit: cover; object-position: top center;
}

/* ── Premise ─────────────────────────────────────────────────────────── */
.premise {
  max-width: 720px; margin-inline: auto;
  padding: clamp(96px, 15vh, 170px) var(--gut);
}
/* This is a paragraph to be read, not a headline. The display face at 2rem
   with headline leading and muted ink made it hard going; set it in the body
   face at reading size, with the leading and contrast that implies. */
.premise p {
  margin: 0;
  font-size: clamp(1.05rem, 1.75vw, 1.3rem);
  line-height: 1.75;
  letter-spacing: -0.003em;
  color: var(--dim);
  text-wrap: pretty;
}
/* Beats `.premise p` on specificity rather than reaching for !important. */
.premise .premise-turn { margin-top: 1.35em; color: var(--fg); }

/* ── Story: pinned screenshot, scrolling copy ────────────────────────── */
.story { padding-inline: var(--gut); }
.story-inner {
  max-width: var(--page); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.story-steps { list-style: none; margin: 0; padding: 0; order: -1; }
.story-steps li {
  min-height: 66vh;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0.32;
  transition: opacity 0.5s var(--ease);
}
.story-steps li.on { opacity: 1; }
.story-steps h2 {
  font-size: clamp(1.7rem, 3.3vw, 2.5rem);
  padding-left: 20px;
  border-left: 2px solid var(--line);
  transition: border-color 0.5s var(--ease);
}
.story-steps li.on h2 { border-left-color: var(--blue); }
.story-steps p {
  max-width: 40em; margin: 18px 0 0 22px;
  color: var(--dim); line-height: 1.68;
}
.story-steps code {
  font-family: var(--mono); font-size: 0.86em;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(122, 162, 255, 0.12); color: var(--blue);
}

/* Centre the pinned frame without translateY: a sticky element shifted by a
   transform paints above its own container and collided with the section
   before it. A top offset of half the viewport minus half the frame keeps it
   centred and inside its column. */
.story-media { position: sticky; top: max(90px, calc(50vh - 245px)); }

.frame {
  border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  background: var(--raise);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.9);
}
.frame-bar {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding-inline: 13px;
  border-bottom: 1px solid var(--line);
  background: #0f1218;
}
.frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: #2c313b; }
.frame-bar span {
  margin-left: 12px; font-family: var(--mono);
  font-size: 0.68rem; color: var(--dimmer);
}

.frame-shots { position: relative; aspect-ratio: 16 / 10; }
.frame-shots img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  opacity: 0; transition: opacity 0.55s var(--ease);
}
.frame-shots img.on { opacity: 1; }

/* ── Rituals ─────────────────────────────────────────────────────────── */
.rituals {
  max-width: var(--page); margin-inline: auto;
  padding: clamp(110px, 17vh, 190px) var(--gut) 0;
}
/* The page's section rhythm: heading on the left, its supporting text set
   against the heading's baseline on the right. Same shape as the hero. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(40px, 6vw, 90px);
  align-items: end;
}
.split h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
.split p { margin: 0; color: var(--dim); line-height: 1.68; }
.split .ghost { margin-top: 26px; }

.rituals-shot {
  margin: clamp(40px, 6vw, 68px) 0 0;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--raise);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}

/* ── Surfaces rail ───────────────────────────────────────────────────── */
.surfaces { padding: clamp(110px, 17vh, 190px) 0 clamp(20px, 3vw, 40px); overflow: hidden; }
.surfaces-head {
  max-width: var(--page); margin-inline: auto;
  padding-inline: var(--gut);
}


.rail {
  display: flex; gap: clamp(20px, 3vw, 40px);
  width: max-content; margin-top: clamp(44px, 6vw, 72px);
  padding-inline: var(--gut);
  will-change: transform;
}
.phone { margin: 0; width: clamp(210px, 24vw, 290px); }
.phone img {
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--raise);
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.9);
}
.phone figcaption { margin-top: 14px; font-size: 0.84rem; color: var(--dimmer); }

/* ── CLI ─────────────────────────────────────────────────────────────── */
.cli {
  max-width: var(--page); margin-inline: auto;
  padding: clamp(110px, 17vh, 190px) var(--gut) 0;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
.cli h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
.cli-copy > p { margin: 22px 0 30px; color: var(--dim); line-height: 1.68; }

/* Full width under the two columns: the source line is long, and a reader
   should not have to scroll a command sideways to see which key it trusts. */
.install {
  grid-column: 1 / -1;
  margin-top: clamp(30px, 4vw, 52px);
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--raise); overflow: hidden;
}
.install-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 7px 7px 16px;
  border-bottom: 1px solid var(--line);
}
.install-head span { font-size: 0.78rem; color: var(--dimmer); }
.install pre {
  margin: 0; padding: 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: clamp(0.66rem, 0.85vw, 0.76rem);
  line-height: 1.8; color: var(--fg);
}
.install .d { color: var(--dimmer); }
.install .s { color: var(--t-amber); }
/* The whole point of the block: name the key that is allowed to sign. */
.install .hi {
  color: var(--t-green);
  background: rgba(16, 185, 129, 0.1);
  border-radius: 3px; padding: 1px 2px;
}
.copy {
  padding: 9px 15px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--card); color: var(--dim); font-size: 0.82rem; font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.copy:hover { background: #262b35; color: var(--fg); }
.copy.done { background: var(--t-green); color: #062018; }
.install-note { grid-column: 1 / -1; margin: 14px 0 0; font-size: 0.85rem; line-height: 1.65; color: var(--dimmer); }
.install-note code {
  font-family: var(--mono); font-size: 0.92em;
  color: var(--dim);
}

.term {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #0e1116;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.term-bar {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding-inline: 13px;
  border-bottom: 1px solid var(--line);
}
.term-bar i { width: 8px; height: 8px; border-radius: 50%; background: #2c313b; }
.term-bar span { margin-left: 12px; font-family: var(--mono); font-size: 0.68rem; color: var(--dimmer); }

.term pre {
  margin: 0; padding: 22px 20px 24px;
  font-family: var(--mono);
  font-size: clamp(0.68rem, 1.05vw, 0.82rem);
  line-height: 1.85; color: var(--fg);
  overflow-x: auto;
}
.term .p { color: var(--t-green); }
.term .c { color: var(--fg); font-weight: 500; }
.term .s { color: var(--t-amber); }
.term .ok { color: var(--t-green); }
.term .d { color: var(--dimmer); }
.term .b { color: var(--t-blue); }
.term .v { color: var(--t-violet); }
.term .cur {
  display: inline-block; width: 7px; height: 14px;
  vertical-align: -2px; background: var(--blue);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── Close ───────────────────────────────────────────────────────────── */
.close {
  max-width: var(--page); margin-inline: auto;
  padding: clamp(130px, 22vh, 240px) var(--gut) clamp(110px, 16vh, 180px);
  text-align: center;
}
.close h2 { font-size: clamp(2.6rem, 8vw, 5.4rem); font-weight: 700; letter-spacing: -0.055em; }
.close p { margin: 20px auto 36px; max-width: 30em; color: var(--dim); font-size: 1.05rem; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot {
  max-width: var(--page); margin-inline: auto;
  padding: 30px var(--gut) 50px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  font-size: 0.85rem; color: var(--dimmer);
}
.foot .brand { font-size: 0.92rem; color: var(--fg); }
.foot nav { display: flex; gap: 22px; margin-left: auto; }
.foot nav a { transition: color 0.2s; }
.foot nav a:hover { color: var(--fg); }

/* ── Entrance: one orchestrated moment on load, nothing else ─────────── */
.hero-copy > *, .hero-shot {
  animation: rise 0.9s var(--ease) backwards;
}
.hero-tag { animation-delay: 0.05s; }
.hero h1 { animation-delay: 0.12s; }
.lede { animation-delay: 0.2s; }
.hero-actions { animation-delay: 0.27s; }
.hero-meta { animation-delay: 0.33s; }
.hero-shot { animation-delay: 0.4s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .spine { display: none; }
  .story-inner, .cli, .split, .hero-copy { grid-template-columns: 1fr; }
  .split, .hero-copy { row-gap: 26px; }
  .hero-side { padding-bottom: 0; }
  .story-media {
    position: sticky; top: 76px; transform: none;
    order: -1; margin-bottom: 30px;
    /* The steps carry opacity, which makes each one its own stacking context
       and paints it above the sticky frame. Lift the frame back on top so the
       copy scrolls under it. */
    z-index: 1;
    padding-bottom: 14px;
    background: var(--ink);
  }
  .story-steps { order: 0; }
  .story-steps li { min-height: 62vh; }
  .cli-copy { order: -1; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .cta-sm { display: none; }
  .menu {
    display: grid; gap: 5px; margin-left: auto;
    width: 40px; height: 40px; padding: 0 10px;
    place-content: center; border: 0; background: none; cursor: pointer;
  }
  .menu span { display: block; width: 20px; height: 1.5px; background: var(--fg); transition: transform 0.25s; }
  .menu[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
  .menu[aria-expanded="true"] span:last-child { transform: translateY(-3.2px) rotate(-45deg); }

  .hero { padding-top: 110px; }
  .hero-shot img { max-height: 52vh; }
  .hero-actions .cta, .hero-actions .ghost { flex: 1; justify-content: center; }

  .story-steps h2 { padding-left: 15px; }
  .story-steps p { margin-left: 17px; }
  /* Short steps beside a short pinned frame left a large void; tighten both. */
  .story-steps li { min-height: 46vh; justify-content: flex-start; padding-top: 26px; }
  .story-media { margin-bottom: 12px; }

  /* A 1440-wide app shot scaled to a phone is unreadable. Crop into the
     working area instead of shrinking the whole window. */
  .frame-shots { aspect-ratio: 1 / 1; }
  .frame-shots img { object-position: 32% top; }

  /* The rituals board is a wide strip; let it be swiped rather than shrunk. */
  .rituals-shot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rituals-shot img { min-width: 660px; }

  .foot { flex-direction: column; align-items: flex-start; }
  .foot nav { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rail { transform: none !important; }
  .story-steps li { opacity: 1; }
}