/* ═══════════════════════════════════════════════════════════════════════════
  CONISTRA — story landing variant (index-story.html)

  Loaded AFTER emotional.css, which supplies every shared component: nav, hero,
  the drifting post feed, .posts-rail, .pub-log, .ahead-table and its mobile
  bars, .steps, .faq, .finale, .foot, .reveal. This file adds only what the
  narrative needs on top, so the two variants cannot drift apart visually.

  The variant follows one invented account, @tinyhistory.co, from the sentence
  that made it to the month it had an audience. Two consequences for the CSS:

    · Every section is stamped with a point on that account's clock (.tl), which
      is why the eyebrow here is a dated marker rather than a label.
    · Copy is deliberately thin — one headline and one line per section — so the
      type scale leans on emotional.css and the new blocks are mostly objects:
      a typed brief, a concept card, a profile shot, three plan cards.
  ═══════════════════════════════════════════════════════════════════════════ */

/* ── The clock ──────────────────────────────────────────────────────────
   Replaces .eyebrow. Same mono/uppercase idiom, plus a rule that reads as a
   tick on a timeline running down the page. */
.tl {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--on-night-3);
  margin-bottom: 22px;
}
.tl::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.tl-dark { color: var(--ink-3); }
.hero-copy .tl { margin-bottom: 20px; }

/* ── The typed brief ────────────────────────────────────────────────────
   The one beat that is pure type: nine words, shown as the input they were. */
.brief {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0 34px;
  padding: clamp(20px, 3.4vw, 30px) clamp(18px, 3vw, 28px);
  background: var(--night-3);
  border: 1px dashed rgba(255, 245, 235, .22);
  border-radius: 14px;
}
.brief-caret {
  font-family: var(--mono);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  color: var(--pink);
  flex: none;
  line-height: 1.3;
}
.brief-line {
  font-family: var(--mono);
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--on-night);
}

/* ── What came back ─────────────────────────────────────────────────────
   A designed card, not a screenshot of the app. Real text, so it stays crisp
   at any density and never goes stale when the product UI moves. */
.concept {
  margin-top: 26px;
  border: 1px solid var(--night-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--night-2);
}
.concept-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 20px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--night-line);
}
.concept-row:last-child { border-bottom: 0; background: rgba(255, 79, 152, .045); }
.concept-k {
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--solar);
  padding-top: 3px;
}
.concept-v { color: var(--on-night-2); font-size: .99rem; line-height: 1.5; }
.concept-v b { color: var(--on-night); font-weight: 650; }

/* ── Shared small type ──────────────────────────────────────────────────── */
.story-note {
  margin-top: 22px;
  font-size: .93rem;
  color: var(--on-night-3);
  max-width: 60ch;
}
.story-note-dark { color: var(--ink-3); }
/* Engine note — names the image model right where the consistency claim is
   made. The story arm is served from story.css, not style.css, so it carries
   its own copy of these rules. */
.engine-note {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 22px;
  padding: 14px 17px;
  max-width: 62ch;
  border: 1px solid rgba(244, 240, 234, .14);
  border-radius: 14px;
  background: rgba(244, 240, 234, .04);
}
.engine-note p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--on-night-2);
}
.engine-note strong { color: var(--on-night); font-weight: 700; }
.engine-note-tag {
  flex-shrink: 0;
  margin-top: 2px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--signal);
  padding: 4px 9px;
  border-radius: 100px;
}
@media (max-width: 560px) {
  .engine-note { flex-direction: column; gap: 10px; }
}

.story-h3 {
  margin-top: clamp(48px, 7vw, 76px);
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--ink);
}

/* Slides get no captions — the type is inside the frame, and a caption under
   every slide would double the reading for nothing. */
.slides-rail .post-proof,
.others-rail .post-proof { background: none; border: 0; }
.slides-rail .post-proof img,
.others-rail .post-proof img { border-radius: 16px; border: 1px solid var(--night-line); }
.others-rail { margin-top: 26px; }
.others-rail .post-proof { flex-basis: clamp(150px, 22vw, 210px); }

/* ── April → August: the log beside the calendar ─────────────────────────── */
.kept-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
  margin-top: 44px;
}
/* .pub-log is authored for a light section already; only the width cap differs. */
.kept-grid .pub-log { margin-top: 0; max-width: none; }
.kept-cal img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px rgba(27, 26, 23, .14);
}
.kept-cal figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .05em;
  color: var(--ink-3);
}

/* ── Month 6: the payoff ────────────────────────────────────────────────── */
.profile-shot {
  margin: 44px auto 0;
  max-width: 380px;
}
.profile-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--night-line);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
}
.profile-shot figcaption {
  margin-top: 16px;
  text-align: center;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .05em;
  line-height: 1.7;
  color: var(--on-night-3);
}
.profile-shot figcaption em { font-style: normal; color: var(--on-night-2); }

/* ── What it's worth — soft, and no figures anywhere ─────────────────────── */
.worth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
  margin-top: 44px;
  align-items: start;
}
.worth-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.worth-card figcaption {
  margin-top: 14px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.worth-card figcaption b { color: var(--ink); font-weight: 700; }
.worth-list { display: flex; flex-direction: column; gap: 18px; }
.worth-item {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.worth-k {
  display: block;
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--solar);
  margin-bottom: 8px;
}
.worth-v { display: block; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.worth-honest {
  margin-top: 34px;
  padding: 18px 22px;
  border-left: 2px solid var(--ink-3);
  background: rgba(27, 26, 23, .035);
  border-radius: 0 10px 10px 0;
  font-size: .95rem;
  color: var(--ink-2);
  max-width: 66ch;
}
.worth-honest strong { color: var(--ink); font-weight: 700; }

/* ── Pricing ────────────────────────────────────────────────────────────── */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 26px);
  margin-top: 46px;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 30px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.plan-best {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--pink), 0 26px 60px rgba(255, 79, 152, .14);
}
.plan-flag {
  position: absolute;
  top: -11px;
  left: clamp(22px, 3vw, 30px);
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--signal);
  color: #fff;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.plan-n {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan-p { display: flex; align-items: baseline; gap: 5px; }
.plan-p b {
  font-size: clamp(2rem, 4.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
}
.plan-p span { font-size: .92rem; color: var(--ink-3); }
/* One line naming what the tier actually is, so the ladder reads without
   comparing three bullet lists against each other. */
.plan-w {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-top: -4px;
}
.plan ul { display: flex; flex-direction: column; gap: 9px; flex: 1; margin: 4px 0 0; }
.plan li {
  position: relative;
  padding-left: 20px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--solar);
  border-bottom: 1.6px solid var(--solar);
  transform: rotate(-45deg);
}
.btn-plan { justify-content: center; padding: 13px 22px; font-size: .98rem; margin-top: 6px; }
/* .btn-quiet is authored for night sections; on canvas it needs ink, not cream. */
.plan .btn-quiet {
  background: var(--canvas-2);
  border-color: var(--line);
  color: var(--ink);
}
.plan .btn-quiet:hover { background: #e7ded1; border-color: var(--ink-3); }

/* ── Borrowed components on the wrong ground ─────────────────────────────
   emotional.css authors each component for the one surface it sits on there.
   This variant reorders the page, so three components landed on the opposite
   ground and need the other token set. Scoped by surface, never edited at
   source, so the emotional page is untouched. */

/* .faq lives on a light section in the emotional page: --ink summaries, --ink-2
   body, --line rules. Here it sits on night, which rendered dark text on a dark
   ground and made the answers invisible. */
.sec-night .faq { border-top-color: var(--night-line); }
.sec-night .faq-i { border-bottom-color: var(--night-line); }
.sec-night .faq-i summary { color: var(--on-night); }
.sec-night .faq-i p { color: var(--on-night-2); }

/* .posts-rail is a night component; the "other rooms" rail is the one instance
   on a light section, so its frame borders and scrollbar need ink values or they
   vanish into the white. */
.sec-light .others-rail .post-proof img { border-color: var(--line); }
.sec-light .others-rail { scrollbar-color: var(--line) transparent; }
.sec-light .others-rail::-webkit-scrollbar-track { background: var(--canvas-2); }
.sec-light .others-rail::-webkit-scrollbar-thumb { background: var(--line); }

/* .step is a white card, which reads on the emotional page because its section
   is canvas. Ours is pure white, so the cards need the canvas tint to separate
   from the ground rather than relying on a hairline border alone. */
.sec-light .step { background: var(--canvas); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .kept-grid { grid-template-columns: 1fr; }
  .kept-cal { max-width: 380px; }
}

@media (max-width: 900px) {
  /* Two image cards stay paired; the two text items drop below them full-width,
     which keeps the pair reading as a set instead of three orphan columns. */
  .worth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worth-list { grid-column: 1 / -1; flex-direction: row; }
  .worth-item { flex: 1; }
  .plans { grid-template-columns: 1fr; }
  .plan-best { order: -1; }
  .concept-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .profile-shot { margin-top: 34px; }
}

@media (max-width: 640px) {
  .worth-grid { grid-template-columns: 1fr; }
  .worth-list { flex-direction: column; }
  .brief { flex-direction: row; gap: 9px; }
  .others-rail .post-proof { flex-basis: clamp(140px, 44vw, 180px); }
}

/* ── Beat CTAs ────────────────────────────────────────────────────────────
   The story ran six sections — roughly 3,000px of phone scroll — between the
   hero's CTA and the next one. Dwell was good and intent had nowhere to land.

   So every beat now ends on an offer phrased in that beat's own language: the
   sentence section asks for a sentence, the slides section offers slides. One
   generic button repeated seven times reads as pressure; seven specific ones
   read as the page answering the thought the reader just had.

   Deliberately NOT a boxed panel. A hairline rule and centred type make it
   punctuation between beats rather than an ad interrupting them — the page's
   whole argument is calm, and a loud CTA would contradict the product.

   Tracking needs nothing new: analytics.js already records `cta_label` from the
   link text and `section` from the enclosing section[id], so each of these is
   distinguishable in PostHog as long as its copy is unique. Which is also why
   they must live INSIDE their section, not between two of them. */
.cta-beat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: clamp(38px, 6vw, 62px) auto 0;
  padding-top: clamp(26px, 4vw, 38px);
  border-top: 1px solid var(--night-line);
  text-align: center;
}

.cta-beat-line {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--on-night-3);
  max-width: 34ch;
}

.cta-beat-line b { color: var(--on-night-2); font-weight: 400; }

/* On the two light grounds the hairline and the mono line have to flip, or the
   block silently disappears into the canvas. */
.sec-light .cta-beat, .sec-canvas .cta-beat { border-top-color: var(--line); }
.sec-light .cta-beat-line, .sec-canvas .cta-beat-line { color: var(--ink-3); }
.sec-light .cta-beat-line b, .sec-canvas .cta-beat-line b { color: var(--ink-2); }

@media (max-width: 640px) {
  /* Full-width and 52px tall: a thumb reaching from the bottom of a phone is
     the only input this page actually gets. */
  .cta-beat { gap: 16px; }
  .cta-beat .btn-signal, .cta-beat .btn-quiet {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }
}

/* ── Mobile CTA dock ─────────────────────────────────────────────────────
   Phones only. The nav keeps a `btn-sm` next to a Log in ghost inside a 64px
   bar — an alibi CTA, not a target. This is the persistent one.

   Held back until the hero is gone (the hero has its own, larger CTA directly
   under the headline) and pulled again over #plans and #finale, where it would
   sit on top of the real buttons and steal their attribution. */
.cta-dock {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: 10px max(12px, env(safe-area-inset-left))
           calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
  background: rgba(12, 11, 10, .86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--night-line);
  transform: translateY(102%);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.cta-dock.up { transform: translateY(0); }

.cta-dock .btn-signal {
  width: 100%;
  justify-content: center;
  padding: 15px 24px;
  font-size: 1.02rem;
}

.cta-dock-note {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--on-night-3);
  text-align: center;
  margin-top: 7px;
}

@media (max-width: 900px) {
  .cta-dock { display: block; }
  /* So the dock never covers the last line of the footer. */
  body { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-dock { transition: none; }
}

/* ── Hero: a swipeable cover on phones ───────────────────────────────────
   The cover has "1 / 9 — SWIPE" burned into the image. On desktop that is
   honest — the two drifting columns are the showcase and the marker just reads
   as part of a real post. On a phone the feed collapsed to one still card, so
   the page was showing an instruction it did not obey: the single most
   prominent image below the CTA told the visitor to swipe, and swiping did
   nothing.

   So the surviving column becomes a scroll-snap rail of that same account's
   slides. Not the other accounts — those are a different argument, and swiping
   from a carousel cover into an unrelated handle would make the marker a lie in
   a second way.

   Desktop must not pay for this. `loading="lazy"` inside a display:none subtree
   is NOT enough — measured: Chrome fetched all six anyway, ~660KB on the page
   whose LCP we care most about. So each slide is a <picture> whose only <source>
   carries `media="(max-width: 900px)"` and whose <img> falls back to an inline
   1x1 GIF: above 900px the source never matches, so nothing leaves the machine.

   The negative margin cancels .hero-grid's gutter so the next card peeks past
   the screen edge — that peek is the affordance; a phone gets no hover to
   discover with. */
.hero-slide { display: none; }

@media (max-width: 900px) {
  .hero-feed .feed-up {
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to both screen edges, then pad back in, so card one still lines up
       with the copy above it while the rail runs full width. */
    margin-inline: calc(-1 * var(--gut));
    padding: 4px var(--gut) 8px;
  }

  .hero-feed .feed-up::-webkit-scrollbar { display: none; }

  /* Beats emotional.css's `.feed-up .fpost { max-width: 288px; margin: 0 auto }`,
     which centres a lone card — wrong once there is a row of them. */
  .hero-feed .feed-up .fpost {
    flex: 0 0 auto;
    width: min(286px, 74vw);
    max-width: none;
    margin: 0;
    scroll-snap-align: center;
  }

  /* Four classes deep on purpose: emotional.css hides every sibling after the
     first with `.feed-up .fpost + .fpost`, which is the same specificity as a
     two-class override would be. This wins outright instead of on load order. */
  .hero-feed .feed-up .fpost.hero-slide { display: block; }
  .hero-feed .feed-up .fpost.hero-slide img,
  .hero-feed .feed-up .fpost.hero-slide picture { display: block; }
  .hero-feed .feed-up .fpost.hero-slide img { aspect-ratio: 2 / 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Snap is a scroll behaviour, not an animation, so it stays — but the smooth
     scrolling that html{scroll-behavior:smooth} would apply to it does not. */
  .hero-feed .feed-up { scroll-behavior: auto; }
}