:root {
  --paper: #f6f3ec;
  --ink: #15140f;
  --muted: #6d6a60;
  --line: rgba(21, 20, 15, .1);
  --blue: #0a84ff;
  --bubble: #e9e8e4;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0;
}
h1 { font-size: clamp(64px, 10vw, 132px); }
h2 { font-size: clamp(44px, 6.5vw, 88px); }
h1 em, h2 em { color: var(--blue); }
h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; }

.eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.lede { max-width: 34em; margin: 26px auto 30px; font-size: 20px; color: var(--muted); }

.btn {
  display: inline-block;
  padding: 16px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 600 17px var(--sans);
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--blue); }
.btn-small { padding: 10px 18px; font-size: 15px; }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(18px, 4vw, 48px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.wordmark { font-family: var(--serif); font-size: 30px; letter-spacing: -.02em; }
.nav nav { display: flex; gap: 28px; font-size: 15px; color: var(--muted); }
.nav nav a:hover { color: var(--ink); }

/* hero */
.hero { padding: clamp(36px, 5vw, 64px) 20px 0; text-align: center; }

/* rotating first line: every phrase sits in the same grid cell, so the box is always as wide
   as the longest one and nothing below it moves. Without JS only "Text it." is in the markup. */
/* Clipped roll: the line is a window. The old word rolls up out of it as the new one rolls in
   from below, so the two never overlap. The padding/negative margin keeps descenders inside
   the mask without changing the layout. */
.rotate {
  display: inline-grid; white-space: nowrap; vertical-align: top;
  overflow: hidden; padding: .08em .06em; margin: -.08em -.06em;
}
.rotate-word {
  grid-area: 1 / 1;
  transform: translateY(110%);
  transition: transform .75s cubic-bezier(.76, 0, .24, 1);
}
.rotate-word.is-on { transform: none; }
.rotate-word.is-off { transform: translateY(-110%); }
.rotate-word.is-measure { visibility: hidden; }
.rotate-word.is-reset { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .rotate-word { transition: none; }
}

/* the show: the product itself, big, playing. One Messages pane fills the first screen below
   the headline and runs off the bottom of it, the way the product shot does on linear.app: you
   are looking into the thing, not at a picture of it. The bottom fades into the paper so the
   cut is soft, and the thread is anchored to the top so the first messages are always in view. */
.show {
  position: relative;
  max-width: 1040px; height: 460px;
  margin: 52px auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.show-pane {
  display: flex; flex-direction: column;
  height: 640px;
  text-align: left;
  background: #fff;
  border-radius: 30px;
  border: 1px solid rgba(21, 20, 15, .08);
  box-shadow: 0 30px 80px -40px rgba(21, 20, 15, .28);
  cursor: pointer;
  animation: rise 1s cubic-bezier(.2, .8, .2, 1) .15s backwards;
  outline: none;
}
.show-pane:focus-visible { box-shadow: 0 0 0 3px var(--blue), 0 30px 80px -40px rgba(21, 20, 15, .28); }
@keyframes rise { from { transform: translateY(44px) scale(.985); opacity: 0; } }
.show-top {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.show-who { display: flex; flex-direction: column; min-width: 0; }
.show-who strong { font-size: 15px; }
.show-who span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-top .tag { margin-left: auto; }
.show-pane .show-thread {
  /* .thread anchors to the bottom; here the start of the conversation must stay in view */
  justify-content: flex-start;
  padding: 22px 26px;
  gap: 9px;
  font-size: 17px; line-height: 1.35;
  transition: opacity .5s;
}
.show-thread.is-fading { opacity: 0; }
.show-thread .msg { max-width: 62%; padding: 11px 16px; border-radius: 22px; }
.show-thread .msg:not(.me):not(.photo):not(.link):not(.audio) { background: var(--bubble); }
.show-thread .msg.me { border-bottom-right-radius: 7px; }
.show-thread .msg:not(.me) { border-bottom-left-radius: 7px; }
.show-thread .msg.link { background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15.5px; }
.show-thread .msg.photo { width: 168px; height: 130px; font-size: 66px; }
.show-thread .typing { padding: 15px 17px; }
.show-thread .typing i { width: 8px; height: 8px; }

.tag {
  padding: 5px 11px; border-radius: 999px;
  background: rgba(21, 20, 15, .08);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
/* message threads */
.thread {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  overflow: hidden;
  font-size: 14.5px; line-height: 1.32;
}
.msg {
  max-width: 84%;
  padding: 8px 13px;
  border-radius: 19px;
  background: #fff;
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  animation: pop .32s cubic-bezier(.2, .9, .3, 1.3) backwards;
  transform-origin: bottom left;
}
.msg.me {
  align-self: flex-end;
  background: var(--blue); color: #fff;
  border-radius: 19px; border-bottom-right-radius: 6px;
  transform-origin: bottom right;
}
.msg.photo {
  padding: 0; width: 132px; height: 104px;
  display: grid; place-items: center;
  font-size: 54px;
  background: linear-gradient(140deg, #fbe7c8, #f4c9a4);
  border-radius: 19px;
}
.msg.link, .msg.audio {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 13.5px;
}
.msg.link::before { content: "↗"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; }
.msg.audio::before { content: "▶"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10px; }
.msg.me.audio::before { background: #fff; color: var(--blue); }
.stamp { align-self: center; font-size: 11px; color: var(--muted); margin: 4px 0; animation: pop .3s backwards; }
/* a tapback is not a message: it sits under the one it answers, in small type */
.tapback {
  align-self: flex-end; max-width: 80%;
  font-size: 12px; color: var(--muted); margin: -1px 4px 2px;
  animation: pop .3s backwards;
}
.typing { display: flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #b9b7b0; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pop { from { transform: scale(.6) translateY(8px); opacity: 0; } }
@keyframes blink { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* marquees */
.marquees { padding: 90px 0 40px; display: grid; gap: 14px; overflow: hidden; }
.marquee { display: flex; width: max-content; gap: 14px; animation: slide 46s linear infinite; }
.marquee[data-dir="right"] { animation-direction: reverse; }
.marquee:hover { animation-play-state: paused; }
.chip {
  padding: 12px 20px; border-radius: 22px; border-bottom-right-radius: 7px;
  background: var(--blue); color: #fff; white-space: nowrap; font-size: 17px;
}
.marquee[data-dir="right"] .chip { background: #fff; color: var(--ink); border-radius: 22px; border-bottom-left-radius: 7px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* a day with reason */
.day { padding: 110px clamp(20px, 5vw, 64px) 60px; max-width: 1200px; margin: 0 auto; }
.day-head { margin-bottom: 30px; }
/* reads the visitor's own clock, so the timeline opens where their day already is */
.day-now { margin: 16px 0 0; color: var(--blue); font-size: 15px; font-weight: 600; }
.day-body { display: grid; grid-template-columns: 1fr 380px; gap: clamp(30px, 7vw, 110px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: center;
  opacity: .22; transition: opacity .4s;
}
.steps li.on { opacity: 1; }
.steps .time { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--blue); margin-bottom: 10px; }
.steps h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1.02; margin-bottom: 12px; }
.steps p { margin: 0; max-width: 26em; color: var(--muted); font-size: 19px; }

.phone-wrap { position: sticky; top: 96px; }
.phone {
  height: min(640px, calc(100vh - 130px));
  display: flex; flex-direction: column;
  border-radius: 44px;
  background: #fff;
  border: 9px solid var(--ink);
  box-shadow: 0 50px 90px -40px rgba(21, 20, 15, .5);
  overflow: hidden;
}
.phone-top {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 16px 13px;
  border-bottom: 1px solid var(--line);
}
.phone-top strong { display: block; font-size: 15px; }
.phone-top span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--serif); font-size: 22px; }
.ring { width: 38px; height: 38px; margin-left: auto; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: var(--bubble); }
.ring-fg { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.phone .thread { padding: 14px; font-size: 15.5px; }
.phone .msg:not(.me):not(.photo) { background: var(--bubble); }
.phone .msg[hidden], .phone .stamp[hidden] { display: none; }

/* the count line sits under the show, as a caption for what is playing */
.count-line { margin: 18px 0 0; color: var(--muted); font-size: 17px; }

/* rules */
.rules { padding: 110px clamp(20px, 5vw, 64px); background: var(--ink); color: var(--paper); text-align: center; }
.rules .eyebrow { color: #9c998e; }
.rule-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; margin: 56px auto 0; text-align: left; }
.rule-grid article { padding: 26px; border-radius: var(--radius); background: rgba(246, 243, 236, .06); border: 1px solid rgba(246, 243, 236, .1); transition: background .3s, transform .3s; }
.rule-grid article:hover { background: rgba(246, 243, 236, .11); transform: translateY(-4px); }
.rule-grid span { font-family: var(--serif); font-size: 34px; color: var(--blue); }
.rule-grid h3 { margin: 40px 0 8px; }
.rule-grid p { margin: 0; color: #b5b2a7; font-size: 15.5px; }

/* cta */
.cta { padding: 130px 20px 110px; text-align: center; }
.access { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.access input {
  width: 260px; padding: 16px 22px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font: 17px var(--sans); color: var(--ink); outline: none;
}
.access input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10, 132, 255, .15); }
.sent-note { display: none; flex-basis: 100%; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.access.sent .sent-note, .access.failed .sent-note { display: block; }
.access.failed .sent-note { color: #b3261e; }
.access .hp { position: absolute; left: -9999px; }

footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 26px clamp(18px, 4vw, 48px);
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
}
footer > span { font-family: var(--serif); font-size: 24px; color: var(--ink); }
footer .legal a { color: var(--muted); text-decoration: none; }
footer .legal a:hover { color: var(--ink); text-decoration: underline; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .rule-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav nav { display: none; }
  .show { height: 440px; margin-top: 40px; }
  .show-pane { height: 560px; border-radius: 26px; }
  .show-top { padding: 13px 16px; }
  .show-thread { padding: 16px; font-size: 15.5px; gap: 7px; }
  .show-thread .msg { max-width: 82%; padding: 9px 14px; }
  .day-body { display: flex; flex-direction: column-reverse; }
  .phone-wrap { top: 66px; z-index: 5; margin-bottom: 20px; }
  .phone { height: 46vh; border-width: 7px; border-radius: 34px; }
  .steps { padding-bottom: 20vh; }
  .steps li { min-height: 32vh; justify-content: flex-start; padding-top: 2vh; }
}

@media (max-width: 560px) {
  .rule-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee { animation: none; }
}