/* MAC Terminal landing page.
   Paper and screen: the story is told on warm paper in large type and short
   lines, and the product sits on dark screens, the way a lit monitor sits on
   a desk. Every picture is a capture of the app on real data
   (scripts/capture-landing.mjs). Chartreuse is reserved for the trial: the
   type on the ink buttons that sit on paper, and the fill of the one button
   on a dark screen. */

:root {
  --paper: #f3f0e8;
  --paper-2: #ebe7dd;
  --card: #fbfaf5;
  --ink: #141517;
  --ink-2: #3a3d42;
  --muted: #6a6d73;
  --rule: rgba(20, 21, 23, 0.12);
  --screen: #0b0c0f;
  --screen-2: #14161a;
  --bone: #ece9e1;
  --ash: #9a9ea5;
  --screen-rule: rgba(236, 233, 225, 0.12);
  --accent: #e6e7a3;
  --accent-hover: #d6d876;
  --accent-rgb: 230, 231, 163;
  --hot: #e5615f;
  --warming: #d88036;
  --cooling: #479ffa;
  --up: #4ebe96;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1240px;
  --gutter: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lift: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 50px 90px -40px rgba(20, 21, 23, 0.55), 0 20px 36px -24px rgba(20, 21, 23, 0.32);
  color-scheme: light;
}

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

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.display {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
}

.display .line { display: block; }

.section-title { font-size: clamp(2.5rem, 5.2vw, 4.6rem); }

/* ── Buttons ─────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 15.5px/1 var(--sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

/* On a dark screen: the chartreuse fill. */
.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b0c0e;
}

.button--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* On paper: ink with the chartreuse type, the loudest thing on the page. */
.button--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--accent);
}

.button--ink:hover {
  background: #2a2c30;
  border-color: #2a2c30;
}

.button:active { transform: translateY(1px); }

/* ── Header ──────────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 50;
  padding-inline: var(--gutter);
  pointer-events: none;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--wrap);
  height: 62px;
  margin: 0 auto;
  padding: 0 7px 0 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(251, 250, 245, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--accent);
}

.nav-links { display: flex; align-items: center; gap: 4px; }

.nav-links a:not(.button) {
  padding: 11px 16px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.nav-links a:not(.button):hover { color: var(--ink); background: rgba(20, 21, 23, 0.05); }

.nav-trial { margin-left: 6px; padding: 0 20px; font-size: 14.5px; }

.nav-menu {
  display: none;
  place-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 21, 23, 0.06);
  cursor: pointer;
}

.nav-menu span {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease);
}

.nav-menu[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-navigation {
  display: grid;
  gap: 4px;
  max-width: var(--wrap);
  margin: 8px auto 0;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 24px;
  background: rgba(251, 250, 245, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.mobile-navigation[hidden] { display: none; }

.mobile-navigation a:not(.button) {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
}

.mobile-navigation .button { margin-top: 6px; }

/* ── Hero ────────────────────────────────────────────────── */

.hero { padding: clamp(132px, 19vh, 188px) 0 clamp(80px, 11vh, 128px); }

.hero .display { font-size: clamp(3.4rem, 8.6vw, 8.4rem); }

.hero-side { margin-top: clamp(22px, 3vh, 34px); }

.lede {
  max-width: 34em;
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(1.18rem, 1.6vw, 1.4rem);
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

.hero-actions p { margin: 0; color: var(--muted); font-size: 14.5px; }

.hero-stage {
  position: relative;
  margin-top: clamp(56px, 8vh, 88px);
  perspective: 1800px;
}

/* A dark screen with a thin bezel: the product as an object on the desk. */
.screen {
  position: relative;
  margin: 0;
  overflow: hidden;
  padding: 8px;
  border-radius: 20px;
  background: var(--screen);
  box-shadow: var(--lift);
}

.screen > img { width: 100%; border-radius: 12px; }

.hero-frame {
  transform-origin: 50% 0;
  transform: rotateX(calc(var(--tilt, 0) * 1deg)) scale(calc(1 - var(--shrink, 0)));
  will-change: transform;
}

/* ── Top down, in four reads ─────────────────────────────── */

.steps { padding: clamp(40px, 6vh, 72px) 0 clamp(96px, 13vh, 150px); }

.step-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.step { display: flex; flex-direction: column; min-width: 0; }

/* One phone per read: the app's own phone panel on a dark screen. */
.phone {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: 10px;
  border-radius: 26px;
  background: var(--screen);
  box-shadow: var(--lift);
}

.phone img {
  width: 100%;
  max-height: 100%;
  border-radius: 14px;
  object-fit: cover;
  object-position: top;
}

.step h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 26px 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.step-num {
  color: var(--muted);
  font: 500 14px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}

.step p { margin: 0; color: var(--ink-2); line-height: 1.5; }

/* ── The Market Map, on a screen ─────────────────────────── */

.stage {
  margin: 0 12px;
  padding: clamp(88px, 12vh, 140px) 0;
  border-radius: 32px;
  background: var(--screen);
  color: var(--bone);
}

.stage-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 20px 48px;
  margin-bottom: clamp(40px, 6vh, 64px);
}

.stage-head p {
  max-width: 26em;
  margin: 0;
  color: var(--ash);
  font-size: 1.2rem;
  line-height: 1.5;
}

.frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--screen-rule);
  border-radius: 16px;
  background: #0b0b0f;
}

.frame img { width: 100%; }

.stage-caption {
  margin: 56px 0 20px;
  color: var(--bone);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.02em;
}

/* ── The rest of the desk ───────────────────────────────── */

.desk { padding: clamp(96px, 13vh, 150px) 0; }

.desk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
  margin-top: clamp(40px, 6vh, 64px);
}

.desk-tool { display: flex; flex-direction: column; min-width: 0; }

.desk-tool > :first-child { height: 380px; }

.desk-tool h3 {
  margin: 28px 0 8px;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.desk-tool > p { margin: 0; color: var(--ink-2); line-height: 1.5; }

.desk-shot > img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.sizing,
.journal-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--bone);
}

.sizing { padding: 28px; }

.sizing-title {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.sizing dl { display: grid; gap: 0; margin: 0; }

.sizing dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--screen-rule);
}

.sizing dt { color: var(--ash); font-size: 14.5px; }

.sizing dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sizing .is-total dd { color: var(--accent); }

.journal-list {
  margin: 0;
  padding: 12px 28px;
  list-style: none;
}

.journal-list li {
  padding: 18px 0;
  border-top: 1px solid var(--screen-rule);
  font-size: 1.02rem;
}

.journal-list li:first-child { border-top: 0; }

/* ── Who it is for ──────────────────────────────────────── */

.who { padding: 0 0 clamp(96px, 13vh, 150px); }

.who-grid {
  display: grid;
  gap: 32px;
  padding-top: clamp(56px, 8vh, 88px);
  border-top: 1px solid var(--rule);
}

.who .section-title { font-size: clamp(2.2rem, 4.4vw, 4rem); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 10px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
}

/* ── Pricing ────────────────────────────────────────────── */

.pricing-section {
  padding: clamp(96px, 13vh, 150px) 0;
  outline: none;
  background: var(--paper-2);
}

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: center;
  gap: 48px 72px;
}

.pricing-copy p {
  margin: 22px 0 0;
  color: var(--ink-2);
  font-size: 1.2rem;
}

.pricing-card {
  position: relative;
  padding: 34px;
  border: 1px solid var(--rule);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 0 30px 60px -40px rgba(20, 21, 23, 0.35);
}

.pricing-badge {
  position: absolute;
  top: 26px;
  right: 26px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.pricing-card-head p { margin: 0; color: var(--muted); font-weight: 500; }

.pricing-card-head .pricing-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 6px;
  color: var(--ink);
}

.pricing-price strong {
  font-family: var(--serif);
  font-size: 4.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}

.pricing-price span,
.pricing-card-head > span { color: var(--muted); font-size: 14.5px; }

.pricing-features {
  display: grid;
  gap: 14px;
  margin: 28px 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.pricing-features li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

.pricing-features li > span:first-child { color: var(--up); font-weight: 600; }
.pricing-features b { color: var(--ink); font-weight: 600; }

.pricing-actions .button { width: 100%; }

.pricing-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Questions ──────────────────────────────────────────── */

.faq { padding: clamp(96px, 13vh, 150px) 0; }

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 32px 72px;
  align-items: start;
}

.faq-list { border-top: 1px solid var(--rule); }

.faq-list details { border-bottom: 1px solid var(--rule); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 16px 0;
  font-size: 1.15rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  flex: none;
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
}

.faq-list details[open] summary::after { content: "\2212"; }

.faq-list details p {
  max-width: 34em;
  margin: 0;
  padding: 0 0 22px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ── The brief and the footer: one dark screen to close ─── */

.brief,
.site-footer {
  margin: 0 12px;
  background: var(--screen);
  color: var(--bone);
}

.brief {
  padding: clamp(72px, 10vh, 112px) 0 clamp(56px, 8vh, 88px);
  border-radius: 32px 32px 0 0;
}

.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: center;
  gap: 32px 64px;
}

.brief h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.brief-copy p { margin: 12px 0 0; color: var(--ash); font-size: 1.1rem; }

.brief-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.brief-form > div { display: flex; gap: 10px; }

.brief-form input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(236, 233, 225, 0.18);
  border-radius: 999px;
  background: var(--screen-2);
  color: var(--bone);
  font: 500 15.5px var(--sans);
}

.brief-form input::placeholder { color: #6b6f75; }
.brief-form input:focus-visible { outline-color: var(--accent); outline-offset: 2px; }
.brief-form .button:focus-visible { outline-color: var(--accent); }

.brief-status { min-height: 1.5em; margin: 10px 0 0 20px; color: var(--ash); font-size: 14px; }
.brief-status[data-tone="good"] { color: var(--up); }
.brief-status[data-tone="warn"] { color: var(--warming); }

.site-footer {
  margin-bottom: 12px;
  padding: 8px 0 44px;
  border-radius: 0 0 32px 32px;
  color: var(--ash);
  font-size: 14px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding-top: 40px;
  border-top: 1px solid var(--screen-rule);
}

/* The page closes on the name, set large. */
.wordmark {
  margin: 0 0 12px -0.03em;
  color: #2b2d32;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 13.4vw, 12rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.footer-line { margin: 0; color: var(--bone); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--ash);
  text-decoration: none;
}

.footer-links a:hover { color: var(--bone); }
.footer-links a:focus-visible { outline-color: var(--accent); }
.footer-legal { margin: 0; font-size: 13px; }

/* ── Motion ─────────────────────────────────────────────────
   One orchestrated moment on load (the hero's lines) and one reply to
   scrolling (the Cockpit leveling out). Headlines further down rise once
   when they arrive. Nothing loops, so there is nothing to pause. */

.js .hero [data-lines] .line,
.motion [data-lines] .line {
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 0.9s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.js .hero [data-rise],
.motion [data-rise] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease) 0.36s, transform 1s var(--ease) 0.36s;
}

.js [data-lines].is-in .line,
.js [data-rise].is-in {
  opacity: 1;
  transform: none;
}

/* If the script never runs, the hero shows itself anyway. */
.js .hero [data-lines]:not(.is-in) .line,
.js .hero [data-rise]:not(.is-in) { animation: reveal-anyway 0s 2.4s forwards; }

@keyframes reveal-anyway { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero [data-lines] .line,
  .js .hero [data-rise],
  .motion [data-lines] .line,
  .motion [data-rise] { opacity: 1; transform: none; transition: none; animation: none; }
}

/* ── Narrow screens ─────────────────────────────────────── */

@media (max-width: 1100px) {
  .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
}

@media (max-width: 1000px) {
  .desk-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .desk-tool > :first-child { height: auto; }
  .desk-tool > .desk-shot { height: 420px; }
  .pricing-grid,
  .brief-grid,
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .stage-head { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-menu { display: grid; }
  .hero { padding-top: 128px; }
  .hero-actions .button { width: 100%; }
  .stage,
  .brief,
  .site-footer { margin-inline: 8px; }
  .stage { border-radius: 24px; }
  .brief { border-radius: 24px 24px 0 0; }
  .site-footer { border-radius: 0 0 24px 24px; margin-bottom: 8px; }
  .stage-caption { margin-top: 40px; }
}

@media (max-width: 640px) {
  .step-list { grid-template-columns: minmax(0, 1fr); }
  /* One column: each phone hugs its panel instead of sharing a height. */
  .phone { aspect-ratio: auto; }
  .phone img { max-height: 520px; }
  .who .display .line { display: inline; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .brand { min-height: 44px; }
  .nav-menu { width: 44px; height: 44px; }
  .site-nav { height: 58px; }
  .pricing-card { padding: 26px 22px; }
  .pricing-badge { position: static; display: inline-block; margin-bottom: 18px; }
  .brief-form > div { flex-direction: column; }
  .footer-links a { min-width: 44px; min-height: 44px; }
}