/* LOGR site.
   Design tokens and shapes are taken from the app, so the site and the
   product read as one thing:
     background #f9f9f9, text #1a1a1a, surface #ffffff, muted #9ca3af,
     borders #f0f0f0, error #ef4444, success #22c55e.
   Cards are white, radius 16, 1px #f0f0f0. Buttons are #1a1a1a, radius 14.
   The wordmark is 800 weight with POSITIVE tracking, matching FeedScreen.
   There is no JavaScript on this site. */

:root {
  --bg: #f9f9f9;
  --text: #1a1a1a;
  --surface: #ffffff;
  --muted: #9ca3af;
  --border: #f0f0f0;
  --error: #ef4444;
  --success: #22c55e;
  --body: #4b5563;
  --radius-card: 16px;
  --radius-btn: 14px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  /* This is a logging app, so figures line up in columns wherever they are
     read together: the stat rows, the set tables, the volume pills. */
  font-variant-numeric: tabular-nums;
}

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

/* The header is sticky, so an anchor jump would otherwise land with the
   target's first line hidden underneath it. */
[id] { scroll-margin-top: 84px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Parked off-screen rather than hidden, so it is reachable by tab but never
   painted until it has focus. The page opens on a sticky header and a hero,
   which is a lot of nav to walk through on a keyboard. */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 30;
  padding: 12px 18px;
  background: var(--text);
  color: var(--surface);
  border-radius: 0 0 var(--radius-btn) 0;
  font-size: 13px;
  font-weight: 700;
}

.skip-link:focus { left: 0; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
  padding: 0 5vw;
  background: rgba(249, 249, 249, 0.94);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text);
}

.site-nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--text); }

.header-cta { justify-self: end; }

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background: var(--text);
  color: var(--surface);
  border: 0;
  border-radius: var(--radius-btn);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.button:hover { opacity: 0.88; }
.button.small { padding: 11px 18px; font-size: 13px; }

.text-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 2px;
}

.text-link:hover { opacity: 0.7; }
.text-link.light { display: inline-block; margin-top: 22px; color: #ffffff; border-bottom-color: #ffffff; }

.eyebrow {
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
}

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

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  min-height: 660px;
  padding: 80px 7vw 60px;
  overflow: hidden;
}

.hero h1 {
  margin: 0 0 24px;
  max-width: 780px;
  font-size: clamp(46px, 6vw, 82px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hero h1 em { color: var(--muted); font-weight: 800; font-style: normal; }

.hero-copy > p {
  max-width: 560px;
  color: var(--body);
  font-size: 18px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 32px 0;
}

.trust-row {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

/* ── Screenshots ──────────────────────────────────────────────────────── */

/* These used to be phone UIs drawn in CSS, a few hundred lines of fake posts
   and fake set tables. They are real screenshots now, so the frame is all the
   CSS that is left: a black body at the app's own text colour, and the image
   inside it. Sources live in screens/ and are documented in README.md.

   Every image carries width and height attributes and an aspect-ratio here,
   so the box is reserved before the file arrives and nothing on the page
   jumps as they load. */

.shot { margin: 0; min-width: 0; }

.shot-frame {
  display: block;
  padding: 7px;
  background: var(--text);
  border-radius: 28px;
  box-shadow: 0 14px 34px rgba(26, 26, 26, 0.13);
}

.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 440 / 956;
  border-radius: 22px;
}

/* The app's own word for the screen, so the caption names something the
   reader will find when they get there. */
.shot figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted);
}

/* Hero: the one place a phone is rotated. Everything below is flat. */
.hero-phones { position: relative; height: 600px; }

/* Both are placed from the centre and pushed apart by a fixed number of
   pixels, rather than pinned to the left and right edges. The column they sit
   in is wider than the pair, so edge pinning opened a gap between two phones
   that tilt away from each other, which reads as two phones falling over
   rather than one stack. The offsets are what set the overlap. */
.hero-phones .shot { position: absolute; left: 50%; }
.shot-back { width: 224px; top: 36px; transform: translateX(-226px) rotate(-7deg); }
.shot-front { z-index: 2; width: 246px; top: 0; transform: translateX(-24px) rotate(6deg); }

/* Feature sections: a level row, no overlap and no tilt. Sizing is left to
   flex rather than a class per count, so a group of three shrinks to fit the
   same card a group of two sits comfortably in. */
.shot-group {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.shot-group .shot { flex: 1 1 0; max-width: 208px; }

/* ── Proof bar ────────────────────────────────────────────────────────── */

.proof-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 32px;
  min-height: 84px;
  padding: 24px 6vw;
  background: var(--text);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.proof-bar span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
}

.proof-bar .text-link { margin-top: 0; font-size: 13px; }

/* ── Consistency grid ─────────────────────────────────────────────────── */

.streak { padding: 100px 8vw; background: var(--text); color: #ffffff; }

.streak-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 8vw;
  margin-bottom: 54px;
}

.streak-head h2 { color: #ffffff; }
.streak-head p { margin: 0; color: #d1d5db; font-size: 17px; line-height: 1.7; }

/* 182 cells is wider than a phone. It scrolls in its own box rather than
   letting the page scroll sideways. */
.streak-scroll { overflow-x: auto; padding-bottom: 6px; }

.streak-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 5px;
  min-width: 760px;
}

.streak-grid i, .streak-legend i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
}

/* Deliberately monochrome. The app tints these black, blue and green, but
   blue is the competition's whole identity and a density ramp reads better
   at this size anyway. */
.streak-grid i.r, .streak-legend i.r { background: rgba(255, 255, 255, 0.3); }
.streak-grid i.w, .streak-legend i.w { background: rgba(255, 255, 255, 0.66); }
.streak-grid i.p, .streak-legend i.p { background: #ffffff; }

.streak-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: var(--muted);
}

.streak-legend span { display: flex; align-items: center; gap: 8px; }
.streak-legend i { width: 12px; }
.streak-legend b { margin-left: auto; font-size: 11px; letter-spacing: 1.6px; }

/* ── Feature sections ─────────────────────────────────────────────────── */

.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 8vw;
  padding: 100px 8vw 60px;
}

.intro h2, .feature h2, .teams h2, .story h2, .faq h2, .waitlist h2,
.streak-head h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.intro p, .feature-copy > p { color: var(--body); font-size: 17px; line-height: 1.7; }

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 8vw;
  padding: 70px 8vw 100px;
}

.feature.reverse .screen-wrap { order: 2; }

/* Padding rather than a fixed height: a row of two screenshots and a row of
   three are different heights, and the card should sit on whichever it got.

   min-width: 0 is load-bearing on phones. A grid item defaults to min-width
   auto, which sizes the 1fr track to the item's min-content, and the row of
   three screenshots is 504px wide even though .shot-group is meant to scroll
   inside its own box below 560px. Without this the track won the argument: the
   card, the copy beside it and the whole page grew to 557px, so every phone
   scrolled sideways by 180px. */
.screen-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 44px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.feature-copy { max-width: 520px; }

.feature-number {
  display: block;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1.2px;
}

.feature-copy ul { margin: 26px 0 0; padding: 0; list-style: none; }

.feature-copy li {
  padding: 13px 0;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  color: var(--body);
}

/* ── Who it's for ─────────────────────────────────────────────────────── */

.teams { padding: 100px 7vw; background: var(--surface); text-align: center; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 50px;
  text-align: left;
}

/* A flex column, so the PLANNED label can sit on the bottom edge of a card
   whose neighbours are all different lengths. It used to be absolutely
   positioned against a fixed min-height, which only worked while every card
   held one short paragraph. */
.team-grid article {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 26px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.team-grid > article > span,
.team-grid small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted);
}

.team-grid h3 { margin: 36px 0 12px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.team-grid p { margin: 0; color: var(--body); line-height: 1.6; font-size: 15px; }

/* What the card is promising rather than describing. Set apart from the
   sentence above it, which is the part that exists today. */
.team-grid .next {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}

.team-grid small { margin-top: auto; padding-top: 20px; }

.teams-foot {
  max-width: 620px;
  margin: 44px auto 0;
  color: var(--body);
  font-size: 16px;
  line-height: 1.7;
}

/* ── Story ────────────────────────────────────────────────────────────── */

.story {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  gap: 8vw;
  padding: 100px 8vw;
  background: var(--text);
  color: #ffffff;
}

.story-label { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--muted); }
.story-copy { max-width: 780px; }
.story-copy p { color: #d1d5db; font-size: 17px; line-height: 1.75; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 8vw;
  padding: 100px 8vw;
}

.faq > div > p { margin-top: 24px; color: var(--body); }
.faq > div > p a { border-bottom: 1.5px solid var(--text); font-weight: 700; }

.faq details {
  margin-bottom: 10px;
  padding: 0 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-weight: 700;
  font-size: 15.5px;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: 0; padding: 0 20px 20px 0; color: var(--body); line-height: 1.7; font-size: 15px; }
.faq details p a { border-bottom: 1px solid var(--border); }
.faq details[open] summary .plus { transform: rotate(45deg); }
.plus { display: inline-block; color: var(--muted); transition: transform 0.15s ease; }

/* ── Waitlist ─────────────────────────────────────────────────────────── */

.waitlist { padding: 100px 6vw; background: var(--surface); text-align: center; }
.waitlist p { color: var(--body); font-size: 17px; }

/* Email and button on row one, the optional question on row two. Placement is
   explicit because auto-placement would put the question beside the email
   instead of under it, and because the DOM order is the tab order we want:
   fill both fields, then submit. */
.waitlist form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  max-width: 540px;
  margin: 30px auto 14px;
  text-align: left;
}

.waitlist input[type="email"] { grid-area: 1 / 1; }
.waitlist form .button { grid-area: 1 / 2; }
.waitlist .field { grid-area: 2 / 1 / 3 / 3; }

.waitlist input,
.waitlist select {
  min-width: 0;
  padding: 15px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  font: inherit;
  font-size: 15px;
  color: var(--text);
}

.waitlist input::placeholder { color: var(--muted); }

.waitlist input:focus,
.waitlist select:focus { outline: 2px solid var(--text); outline-offset: -2px; }

/* Secondary to the email by design: smaller, quieter, and skippable. */
.waitlist .field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.waitlist .field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--body);
  white-space: nowrap;
}

.waitlist .field label span { color: var(--muted); font-weight: 600; }
.waitlist .field select { flex: 1; padding: 11px 12px; font-size: 14px; }
.waitlist small { color: var(--muted); font-size: 13px; }
.waitlist small a { text-decoration: underline; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 40px;
  padding: 60px 6vw;
  background: var(--text);
  color: #ffffff;
}

.site-footer > div { display: flex; flex-direction: column; gap: 12px; }
.site-footer p, .site-footer small, .site-footer a { color: var(--muted); font-size: 13px; }
.site-footer p { margin: 0; }
.site-footer a:hover { color: #ffffff; }
.site-footer b { margin-bottom: 6px; font-size: 12px; color: #ffffff; letter-spacing: 0.4px; }
.footer-logo { margin-bottom: 10px; color: #ffffff; }

/* ── Prose pages ──────────────────────────────────────────────────────── */

.prose { max-width: 740px; margin: 0 auto; padding: 60px 6vw 90px; }

.prose h1 {
  margin: 0 0 10px;
  font-size: clamp(32px, 4.5vw, 46px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.prose h2 {
  margin: 44px 0 12px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.prose h3 { margin: 28px 0 8px; font-size: 16px; font-weight: 700; }
.prose p, .prose li { color: var(--body); font-size: 16px; line-height: 1.7; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose li strong, .prose p strong { color: var(--text); }
.prose a { color: var(--text); border-bottom: 1px solid var(--border); font-weight: 600; }
.prose a:hover { border-bottom-color: var(--text); }

/* .prose a and .button are equal specificity, and .prose a comes later, so
   without this a .button link inside .prose (thanks.html's "Back to the
   site") loses to it: black text on a black button, plus an underline the
   button was never meant to carry. Scoped back to the button's own rule. */
.prose a.button { color: var(--surface); border-bottom: 0; }
.prose a.button:hover { border-bottom: 0; }

.updated { margin: 0 0 36px !important; color: var(--muted); font-size: 14px; }

.lede { font-size: 18px !important; color: var(--body) !important; margin-bottom: 30px !important; }

.note {
  margin: 0 0 22px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text);
  border-radius: var(--radius-card);
}

.note p:last-child { margin-bottom: 0; }

.note.warn { border-left-color: var(--error); }

.card {
  margin: 0 0 20px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }

.prose th, .prose td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  color: var(--body);
}

.prose th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.table-scroll { overflow-x: auto; }

.steps { counter-reset: step; list-style: none; padding-left: 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 44px;
  border-top: 1px solid var(--border);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 14px;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  background: var(--text);
  color: #ffffff;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
}

.steps li:last-child { border-bottom: 1px solid var(--border); }

/* ── Responsive ───────────────────────────────────────────────────────── */

/* Four audience cards need more room than three did. They go 2x2 well before
   the rest of the page breaks, and drop to one column at 560 with everything
   else. */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid article { min-height: 0; }
}

@media (max-width: 900px) {
  /* Logo and CTA share row 1, nav drops to row 2. Without the explicit
     rows, auto-placement pushes the CTA onto a third row of its own. */
  .site-header {
    height: auto;
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
    padding: 14px 5vw;
  }
  .site-nav { grid-row: 2; grid-column: 1 / -1; gap: 20px; flex-wrap: wrap; font-size: 13px; }
  .header-cta { grid-row: 1; grid-column: 2; }
  .hero { grid-template-columns: 1fr; padding-top: 56px; }
  .hero-phones { height: 560px; margin-top: 50px; }
  /* One column, so the card is the full width of the page and the screenshots
     can be larger than they are beside a paragraph. */
  .shot-group .shot { max-width: 236px; }
  .proof-bar { flex-wrap: wrap; gap: 20px; }
  .intro, .feature, .story, .faq, .streak-head { grid-template-columns: 1fr; }
  .streak-head { gap: 24px; margin-bottom: 40px; }
  .feature.reverse .screen-wrap { order: 0; }
  .site-footer { grid-template-columns: 2fr 1fr 1fr; }
  .story { gap: 36px; }
  .intro { gap: 24px; }
  .feature { gap: 40px; }
  .faq { gap: 40px; }
}

@media (max-width: 560px) {
  .hero { min-height: 0; padding-inline: 6vw; }
  .hero h1 { font-size: 42px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .trust-row { flex-direction: column; gap: 8px; }
  .hero-phones { height: 420px; }
  .shot-back { width: 168px; top: 26px; transform: translateX(-170px) rotate(-7deg); }
  .shot-front { width: 186px; transform: translateX(-18px) rotate(6deg); }
  .shot-frame { padding: 5px; border-radius: 22px; }
  .shot img { border-radius: 18px; }
  .shot figcaption { margin-top: 10px; }

  /* A row of three at this width would be about 110px per phone, which is not
     worth looking at. They keep a readable size and the row scrolls in its own
     box instead, the same way the consistency grid does. A row of two still
     fits, so it never scrolls. */
  .screen-wrap { padding: 30px 14px; }
  .shot-group { justify-content: flex-start; overflow-x: auto; gap: 12px; }
  .shot-group .shot { flex: 0 0 auto; width: 160px; max-width: none; }
  .proof-bar { justify-content: flex-start; gap: 14px; font-size: 14px; }
  .intro, .feature, .teams, .story, .streak, .faq, .waitlist { padding: 70px 6vw; }
  .team-grid { grid-template-columns: 1fr; }
  .streak-legend { gap: 12px 18px; font-size: 12px; }
  .streak-legend b { margin-left: 0; }

  /* One column, and the explicit row/column placement goes with it: DOM order
     is already email, question, button. */
  .waitlist form { grid-template-columns: 1fr; }
  .waitlist input[type="email"],
  .waitlist form .button,
  .waitlist .field { grid-area: auto; }
  .waitlist .field { flex-direction: column; align-items: stretch; gap: 7px; }
  .waitlist .field label { white-space: normal; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 32px; }
  .prose { padding-top: 44px; }
}