/* ============================================================================
   The site. Deliberately small, and a page about the product rather than a
   page running it: the one live copy of Notefix is the phone demo in its
   frame. See the note at the top of index.html.
   ========================================================================== */

:root {
  --ink:   #F2F4F7;
  --ink-2: #A2AAB4;
  --ink-3: #6B737C;
  --bg:    #0E1115;
  --panel: #171B21;
  --line:  #262C35;
  /* The mark's own orange. The logo has always been this colour, favicon.svg
     and the layer's own accent both; everything around it used to be purple,
     which made the one thing that stands for Notefix the one thing that did
     not match. */
  --brand: #E9A13B;
  --soft:  #F5B961;
  /* THE INK THAT GOES ON THE BRAND, and the reason it is a token rather than
     white. Orange is a light colour: white on it is 4.0:1 and fails, where the
     same white on the purple this replaces was 4.4:1 and scraped through. Dark
     on the orange is 7.7:1. The layer worked this out first and calls it
     --rv-accent-ink; this is the same value. */
  --brand-ink: #2A1B06;
  /* The brand as parts, for the glows and washes that need it at an opacity.
     Hardcoded rgb() triples are how a palette comes to be half-changed. */
  --brand-rgb: 233, 161, 59;
  --ok:    #34C88A;
  --ease:  cubic-bezier(.22, 1, .36, 1);
  --font:  Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(var(--brand-rgb),.16), transparent 60%),
    radial-gradient(900px 540px at 96% 4%, rgba(52,200,138,.09), transparent 62%),
    var(--bg);
  color: var(--ink-2);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  padding: 0 clamp(20px, 5vw, 76px);
  overflow-x: clip;   /* the demo frame is sized off 100vw, which counts a classic scrollbar */
}

h1, h2 { color: var(--ink); margin: 0; line-height: 1.1; letter-spacing: -.03em; }
p { margin: 0; }
a { color: var(--soft); }

/* ---- Masthead ------------------------------------------------------------ */

.top {
  display: flex; align-items: center; gap: 14px;
  max-width: 1040px; margin: 0 auto;
  padding-block: 24px;
}
.mark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 600; font-size: 15px;
  letter-spacing: -.01em; text-decoration: none;
}
/* The mark: a pin seen head-on. An orange disc, a white ring, an orange
   centre. The same shape in the dashboard, the emails and favicon.svg, so one
   thing stands for Notefix wherever it turns up. */
.mark i {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: #e9a13b;
  box-shadow: inset 0 0 0 3.8px #e9a13b, inset 0 0 0 8.3px #fff;
}
.top .ghost { margin-left: auto; }
.top .nav {
  margin-left: auto; color: var(--ink-2); text-decoration: none;
  font: 500 14.5px/1 var(--font);
}
.top .nav:hover { color: var(--ink); }
.top .nav + .ghost { margin-left: 8px; }
.top .nav + .nav { margin-left: 22px; }
.top .nav, .top .ghost { white-space: nowrap; }
/* A phone: the demo is a scroll away on the page itself. */
@media (max-width: 480px) {
  .top .ghost.sm { display: none; }
}

/* ---- Hero ---------------------------------------------------------------- */

main { max-width: 1040px; margin: 0 auto; }

/* Words on the left, the picture of them on the right; stacked on a phone. */
.hero {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  gap: clamp(32px, 5vw, 60px);
  padding-block: clamp(44px, 9vh, 96px) clamp(48px, 8vh, 84px);
}

h1 {
  font-size: clamp(34px, 4.3vw, 52px);
  font-weight: 640;
}
h1 span { color: var(--soft); }

.lede {
  margin-top: 20px;
  font-size: clamp(16px, 1.7vw, 18px);
  color: var(--ink-2);
  max-width: 40ch;
}

/* Who it already talks to, in a line. */
.with {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font: 500 13.5px/1 var(--font); color: var(--ink-2);
}
.with b {
  font: 600 10.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 2px;
}
.with span { display: inline-flex; align-items: center; gap: 6px; }
.with svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; color: var(--ink-3);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 940px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: clamp(34px, 7vw, 52px); }
}

/* ---- The picture beside the headline --------------------------------------
   A checkout page with a note on its faint pay button, in the layer's own
   dress. data-at walks it: 0 said, 1 raised, 2 fixed (the button on the page
   is fixed), 3 closed (the note goes green and crosses itself out). */

.scene { margin: 0; padding-right: 26px; }

.win {
  position: relative;
  background: #161A20;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.95);
}
.win-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 13px; border-bottom: 1px solid var(--line);
}
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2B313A; }
.win-bar span {
  margin-left: 10px; padding: 6px 11px; border-radius: 7px;
  background: #0F1216; color: var(--ink-3);
  font: 500 11.5px/1 var(--font);
}

.win-page { padding: 20px 22px 26px; font-size: 13.5px; }
.pg-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pg-head b { color: var(--ink); font-size: 17px; font-weight: 620; letter-spacing: -.01em; }
.pg-head span { font-size: 12px; color: var(--ink-3); }
.pg-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid #20252D;
}
.pg-row i { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(140deg, #2A3039, #1F242B); }
.pg-row b { display: block; color: #D5D9DE; font-weight: 560; line-height: 1.3; }
.pg-row div span { font-size: 12px; color: var(--ink-3); }
.pg-row em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.pg-total {
  display: flex; justify-content: space-between;
  padding: 12px 0 16px; border-top: 1px solid #20252D;
}
.pg-total b { color: var(--ink); font-weight: 600; }

.pg-foot { display: flex; justify-content: flex-end; }
.pg-pay { position: relative; display: inline-block; }
.pg-btn {
  display: inline-block; padding: 12px 22px; border-radius: 10px;
  font: 600 14px/1 var(--font);
  background: #22272F; color: #555C66;
  transition: background .7s var(--ease), color .7s var(--ease), box-shadow .7s var(--ease);
}
.scene[data-at="2"] .pg-btn,
.scene[data-at="3"] .pg-btn {
  background: var(--ink); color: #0E1115;
  box-shadow: 0 10px 26px -12px rgba(242,244,247,.45);
}

.pin {
  position: absolute; top: -10px; right: -10px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 11.5px/1 var(--font); color: var(--brand-ink);
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.25), 0 6px 14px -4px rgba(0,0,0,.7);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}

/* The note, hanging below the corner the pin is in, the way a card sits by
   its pin, and over nothing on the page it is about. */
.card {
  position: absolute; right: -26px; top: calc(100% - 20px); width: 262px;
  background: #1F2329; border: 1px solid #2E343D; border-radius: 12px;
  padding: 12px 14px 13px; font-size: 13.5px; line-height: 1.5; color: #D5D9DE;
  box-shadow: 0 26px 50px -18px rgba(0,0,0,.95);
}
.card-top { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
.card-top i {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font: 700 11px/1 var(--font); font-style: normal; color: var(--brand-ink); background: var(--brand);
  transition: background .5s var(--ease);
}
.card-top b { color: var(--ink); font-weight: 600; }
.card-top em {
  margin-left: auto; font: 600 10.5px/1 var(--font); font-style: normal;
  color: #0E1115; background: var(--ok); padding: 4px 7px; border-radius: 999px;
  opacity: 0; transition: opacity .5s var(--ease);
}
.card p {
  margin: 8px 0 11px;
  text-decoration: line-through; text-decoration-color: transparent;
  transition: color .5s var(--ease), text-decoration-color .5s var(--ease);
}
.foot-row { position: relative; height: 24px; }
.tk, .tk-ask {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1 var(--font); padding: 6px 9px 6px 7px; border-radius: 7px;
  opacity: 0; transform: translateY(3px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.foot-row > * { position: absolute; left: 0; top: 0; }

/* The tracker chip: three names in one place, one showing at a time, the
   chip as wide as the widest. */
.tk-open { display: inline-grid; }
.tk-open > span {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px;
  opacity: 0; transition: opacity .3s var(--ease);
}
.tk-open > span.on { opacity: 1; }

/* Who is told: a second row that opens under the first once it is raised. */
.told {
  display: flex; gap: 6px; height: 0; overflow: hidden;
  transition: height .4s var(--ease), margin .4s var(--ease);
}
.told .tk { color: var(--ink-2); background: rgba(255,255,255,.06); }
.scene[data-at="1"] .told,
.scene[data-at="2"] .told,
.scene[data-at="3"] .told { height: 24px; margin-top: 7px; }
.scene[data-at="1"] .told .tk,
.scene[data-at="2"] .told .tk,
.scene[data-at="3"] .told .tk { opacity: 1; transform: none; }
.scene[data-at="1"] .told { transition-delay: .9s; }
.scene[data-at="1"] .told .tk:nth-child(1) { transition-delay: 1.1s; }
.scene[data-at="1"] .told .tk:nth-child(2) { transition-delay: 1.4s; }
.tk svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8;
          stroke-linecap: round; stroke-linejoin: round; }
.tk-ask { color: var(--ink-2); box-shadow: inset 0 0 0 1px #3A414B; padding-left: 9px; }
.tk-open { color: var(--soft); background: rgba(var(--brand-rgb),.14); }
.tk-closed { color: var(--ok); background: rgba(52,200,138,.14); }

.scene[data-at="0"] .tk-ask,
.scene[data-at="1"] .tk-open,
.scene[data-at="2"] .tk-open,
.scene[data-at="3"] .tk-closed { opacity: 1; transform: none; }

.scene[data-at="3"] .pin { background: var(--ok); box-shadow: 0 0 0 4px rgba(52,200,138,.25), 0 6px 14px -4px rgba(0,0,0,.7); }
.scene[data-at="3"] .card-top i { background: var(--ok); }
.scene[data-at="3"] .card-top em { opacity: 1; }
.scene[data-at="3"] .card p { color: var(--ink-3); text-decoration-color: rgba(213,217,222,.45); }

/* "Said", acted out by site.js: the cursor places the marker, the card opens
   empty and the note types itself, then the cursor presses Create issue.
   Without the script none of these classes are ever set. */
.cursor {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 20px; height: 22px; margin: -2px 0 0 -3px;   /* the tip is the point */
  fill: #fff; stroke: #0E1115; stroke-width: 1.3; stroke-linejoin: round;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.55));
  pointer-events: none; opacity: 0;
  transition: transform .95s var(--ease), opacity .3s var(--ease);
}
.scene.acting .cursor { opacity: 1; }
.cursor.press path { transform: scale(.82); transform-origin: 3px 2px; }
.cursor path { transition: transform .12s ease-out; }

.pin { transition: background .5s var(--ease), box-shadow .5s var(--ease), transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.scene.no-pin .pin { transform: scale(0); opacity: 0; }

.card { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.scene.no-card .card { opacity: 0; transform: translateY(8px); }

.caret {
  display: none; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px;
  background: var(--soft);
  animation: caret 1s steps(1) infinite;
}
.scene.typing .caret { display: inline-block; }
@keyframes caret { 50% { opacity: 0; } }

.scene.untyped .tk-ask { opacity: 0; transform: translateY(3px); }
.tk-ask { transition: opacity .45s var(--ease), transform .45s var(--ease), background .15s, color .15s, box-shadow .15s; }
.scene.asking .tk-ask { color: var(--ink); background: rgba(var(--brand-rgb),.22); box-shadow: inset 0 0 0 1px var(--brand); }

.scene figcaption { margin-top: 170px; }
.scene .loop-say { margin-top: 12px; font-size: 15px; }

/* The four steps as one track under the picture: each segment fills for as
   long as its step runs (--dur, from site.js), and the last lands green. */
.scene .loop {
  margin: 0; gap: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.scene .loop li {
  position: relative; display: block;
  padding: 14px 8px 0 0; border: 0; border-radius: 0; background: none; transform: none;
  font: 600 14.5px/1.2 var(--font); color: var(--ink-3); letter-spacing: -.005em;
}
.scene .loop li::after {                    /* the track */
  content: ""; position: absolute; left: 0; right: 3px; top: 0; height: 3px;
  border-radius: 3px; background: var(--line);
}
.scene .loop li::before {                   /* its fill */
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; z-index: 1;
  border-radius: 3px; background: var(--brand);
}
.scene .loop li.past::before { width: calc(100% - 3px); }
.scene .loop li.on::before {
  width: calc(100% - 3px);
  transition: width var(--dur, 3s) linear;
}
.scene .loop li i { display: none; }
.scene .loop li.past { color: var(--ink-2); }
.scene .loop li.on { color: var(--ink); transform: none; background: none; }
.scene .loop[data-at="3"] li.on { background: none; color: var(--ok); }
.scene .loop[data-at="3"] li::before { background: var(--ok); }

@media (max-width: 940px) {
  .scene { padding-right: 0; max-width: 560px; }
}
@media (max-width: 520px) {
  .win-page { padding: 16px 16px 22px; }
  .card { right: 10px; width: min(262px, 84%); }
  .scene .loop li { font-size: 13px; }
}

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }

.buy {
  font: 600 15px/1 var(--font);
  padding: 14px 24px;
  border: 0; border-radius: 12px;
  cursor: pointer;
  transition: background .7s var(--ease), color .7s var(--ease),
              box-shadow .7s var(--ease), transform .25s var(--ease);
}
.buy {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 12px 30px -14px rgba(var(--brand-rgb),.9);
}
.buy:hover { transform: translateY(-1px); }
a.buy { display: inline-block; text-decoration: none; }

.ghost:disabled { color: var(--ink-3); cursor: default; }
.ghost em {
  font: 600 10px/1 var(--font); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--line);
  padding: 3px 6px; border-radius: 6px; margin-left: 7px;
  vertical-align: 1px;
}

.ghost {
  font: 500 14.5px/1 var(--font);
  color: var(--ink-2);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 12px 17px;
  text-decoration: none;
  cursor: pointer;
}
.ghost:hover { color: var(--ink); border-color: #3a424d; }
.ghost.sm { padding: 9px 14px; font-size: 13.5px; }

/* ---- Bands: one per scene -------------------------------------------------
   Each is a thing worth pointing at, with just enough words beside it to say
   what the demo about to run is showing. */

.band {
  display: grid; gap: clamp(26px, 4vw, 46px);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  padding-block: clamp(54px, 9vh, 104px);
  border-top: 1px solid var(--line);
}
.band.flip .band-say { order: 2; }
.band-say h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 620; }
.band-say p  { margin-top: 10px; font-size: 15.5px; max-width: 32ch; }
.try-say h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 620; }
.try-say p  { margin-top: 10px; font-size: 15.5px; max-width: 58ch; }

@media (max-width: 780px) {
  .band, .band.flip { grid-template-columns: minmax(0, 1fr); }
  .band.flip .band-say { order: 0; }
}

/* ---- The snippet --------------------------------------------------------- */

.snippet {
  margin: 0;
  background: #0A0D11; border: 1.5px solid var(--line);
  border-radius: 14px; padding: 16px 18px;
  font: 400 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #C6CEDA;
  overflow-x: auto;
}
.snippet span { color: #6B737C; }
.snippet b { color: var(--soft); font-weight: 400; }

/* ---- The three steps ----------------------------------------------------- */

.how {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 9px;
}
.how li {
  display: flex; align-items: baseline; gap: 11px;
  font-size: 14.5px; color: var(--ink-2);
}
.how li span {
  flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 11px/1 var(--font); color: var(--ink);
  background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line);
  transform: translateY(2px);
}
.how code {
  font: 400 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--soft); background: rgba(var(--brand-rgb),.1);
  padding: 2px 5px; border-radius: 5px;
}

.cta-fine {
  display: block;
  margin-top: 14px;
  /* The site's own fine-print grey. This was #7975A3, a purple wearing a hat:
     not the brand purple, so it survived the sweep for that, and still the only
     cool-violet thing left on a warm page. The opacity went with it - it was
     taking a 3.4:1 line down to something nobody reads. */
  color: var(--ink-3); font-size: 12px;
}
.cta .cta-fine { margin: 0; flex-basis: 100%; }

/* Not out yet. Still shaped like the button it will be, so the page does not
   move when it ships, but plainly not pressable. */
.buy:disabled {
  background: var(--panel); color: var(--ink-3);
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: default; transform: none;
}
.buy em {
  font: 600 10.5px/1 var(--font); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--line);
  padding: 3px 6px; border-radius: 6px; margin-left: 8px;
  vertical-align: 2px;
}

/* ---- Tiles --------------------------------------------------------------- */

.tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.tile {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px 24px;
}
.tile .ic { font-size: 22px; line-height: 1; }
.tile h3 { font-size: 16.5px; font-weight: 600; margin: 13px 0 6px; letter-spacing: -.01em;
            color: var(--ink); line-height: 1.2; }
.tile p  { font-size: 14.5px; color: var(--ink-2); }

/* ---- The live demo -------------------------------------------------------
   As big as the page allows: the phone demo fits itself to the height it is
   given, so the frame is sized by height and the phone follows. */

.try {
  padding-block: clamp(54px, 9vh, 104px);
  border-top: 1px solid var(--line);
}
.devices {
  margin-top: 26px;
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 12px; background: var(--panel);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.devices button {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px/1 var(--font); color: var(--ink-3);
  background: transparent; border: 0; border-radius: 9px;
  padding: 9px 15px 9px 12px; cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.devices button:hover { color: var(--ink); }
.devices button[aria-selected="true"] { color: var(--ink); background: var(--line); }
.devices svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Wider than the words around it, up to 1280px: a desktop app needs a desktop's
   width to show its desktop layout, and the phone and tablet grow with it. */
.devices, .try-frame {
  margin-left: calc(50% - min(640px, 50vw - clamp(20px, 5vw, 76px)));
}
.try-frame {
  width: min(1280px, 100vw - 2 * clamp(20px, 5vw, 76px));
  margin-top: 14px;
  height: clamp(640px, calc(100vh - 40px), 940px);
  scroll-margin-top: 20px;           /* "Try it below" lands on the whole phone */
  border: 1.5px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #1A1D22;              /* the demo's own ground, while it loads */
}
.try-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Too narrow for a phone beside its notes: a picture, and the way in. */
.try-still { display: none; }
@media (max-width: 780px) {
  .try-frame, .devices { display: none; }
  .try-still {
    display: block; margin-top: 22px; text-decoration: none;
    border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden;
    background: #16191E;
  }
  .try-still img { display: block; width: 100%; height: auto; }
  .try-still span {
    display: block; padding: 13px 16px; border-top: 1px solid var(--line);
    font: 500 14px/1.2 var(--font); color: var(--ink);
  }
}

/* ---- Where it connects ----------------------------------------------------
   The round trip first, because that is the part nobody else does, then the
   names, grouped so "soon" is said once rather than on every row. */

.raise {
  padding-block: clamp(54px, 9vh, 104px);
  border-top: 1px solid var(--line);
}
.raise-say h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 620; }
.raise-say p  { margin-top: 10px; font-size: 15.5px; max-width: 52ch; }

.trip {
  margin-top: 32px;
  display: grid; align-items: center; gap: 18px;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  padding: clamp(20px, 3vw, 34px);
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 20px;
}

/* A note, in the layer's own dress. */
.trip-note {
  background: #1F2329; border: 1px solid #2E343D; border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: #D5D9DE;
  box-shadow: 0 16px 36px -22px rgba(0,0,0,.9);
}
.trip-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.trip-note .trip-top i {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px/1 var(--font); font-style: normal; color: #fff; background: var(--ok);
}
.trip-note p { margin: 8px 0 10px; text-decoration: line-through; text-decoration-color: rgba(213,217,222,.45); }
.trip-foot { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
.trip-foot b {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font: 700 9px/1 var(--font); color: #fff; background: #C98A2E;
}
.trip-foot em {
  margin-left: auto; font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal;
  color: var(--ink-2); padding: 4px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px #3A414B;
}

/* The way there and the way back. */
.trip-way { display: grid; gap: 22px; }
.trip-way span {
  position: relative; display: block; text-align: center;
  font: 500 11.5px/1 var(--font); letter-spacing: .02em; color: var(--ink-3);
  padding-bottom: 9px;
}
.trip-way span::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.trip-way span::before {
  content: ""; position: absolute; bottom: -3px; width: 7px; height: 7px;
  border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3);
}
.trip-way .go::before   { right: 5px; transform: rotate(45deg); }
.trip-way .back::before { left: 5px;  transform: rotate(-135deg); }
.trip-way .go   { color: var(--soft); }
.trip-way .go::before { border-color: var(--soft); }
.trip-way .back { color: var(--ok); }
.trip-way .back::before { border-color: var(--ok); }

/* An issue, in no tracker's dress in particular. */
.trip-issue {
  background: #F4F5F7; color: #1C2026; border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.5;
  box-shadow: 0 16px 36px -22px rgba(0,0,0,.9);
}
.trip-issue .trip-top strong { font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #5B6470; }
.trip-issue .trip-top em {
  margin-left: auto; font: 600 11px/1 var(--font); font-style: normal;
  color: #fff; background: #1F9D63; padding: 4px 8px; border-radius: 999px;
}
.trip-issue p { margin: 8px 0 6px; font-weight: 600; }
.trip-meta { font-size: 12px; color: #6A727D; }
.trip-meta code { font: 500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #3A4250; }

.where {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 18px 40px;
}
.where h3 {
  margin: 0 0 10px; font: 600 11px/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px; border-radius: 999px;
  font: 500 14px/1 var(--font); color: var(--ink);
  background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line);
}
.chips svg { width: 16px; height: 16px; flex: none; color: var(--ok); }
.chips li.soon { color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.chips li.soon svg { color: var(--ink-3); }

/* Stacked, the way there points down and the way back points up. */
@media (max-width: 700px) {
  .trip { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .trip-way { grid-template-columns: auto auto; justify-content: center; gap: 28px; }
  .trip-way span { padding-bottom: 0; }
  .trip-way span::after { display: none; }
  .trip-way span::before {
    position: static; display: inline-block; margin-right: 9px; vertical-align: 1px;
  }
  .trip-way .go::before   { transform: rotate(135deg); vertical-align: 3px; }
  .trip-way .back::before { transform: rotate(-45deg); vertical-align: -1px; }
}

/* ---- The message it sends ------------------------------------------------- */

.msg {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 14px; line-height: 1.55;
}
.msg b { color: var(--ink); font-weight: 600; }
.msg-head i {
  display: inline-block; vertical-align: -4px;
  width: 18px; height: 18px; border-radius: 6px; margin-right: 8px;
  background: linear-gradient(150deg, var(--soft), var(--brand));
}
.msg-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.msg-list li { padding-left: 14px; position: relative; }
.msg-list li::before { content: "•"; position: absolute; left: 0; color: var(--ink-3); }
.msg code {
  font: 400 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink); background: rgba(255,255,255,.06);
  padding: 2px 5px; border-radius: 5px;
}
.msg u { color: var(--soft); text-decoration: none; }
.msg-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3);
}
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  border-radius: 9px; background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg b, .seg i {
  font: 500 12.5px/1 var(--font); font-style: normal;
  padding: 6px 10px; border-radius: 7px; color: var(--ink-3);
}
.seg b { color: var(--ink); background: var(--line); }

/* ---- An agent takes a note ------------------------------------------------ */

.band-more { margin-top: 16px; font-size: 14.5px; }
.band-more a { color: var(--soft); text-decoration: none; font-weight: 500; }
.band-more a::after { content: " \2192"; }
.band-more a:hover { color: var(--ink); }

.chat {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 6px 0 10px;
  font-size: 14px; line-height: 1.55;
}
.chat-head {
  padding: 10px 18px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font: 600 13.5px/1 var(--font); color: var(--ink);
}
.chat-head span { color: var(--ink-3); margin-right: 3px; }

.chat-msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; padding: 10px 18px; }
.chat-msg p + p, .chat-msg p + pre, .chat-msg pre + div { margin-top: 6px; }
.chat b { color: var(--ink); font-weight: 600; }
.chat code {
  font: 400 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink); background: rgba(255,255,255,.06); padding: 2px 5px; border-radius: 5px;
}
.who { display: flex; align-items: center; gap: 7px; font-size: 13.5px; line-height: 1.2; margin-bottom: 3px; }
.tag {
  font: 600 9.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--soft); background: rgba(var(--brand-rgb),.14); padding: 3px 5px; border-radius: 5px;
}
.at { color: var(--soft) !important; font-weight: 500 !important; }

.av {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  font: 700 11px/1 var(--font); font-style: normal; color: #fff;
}
.av-nf { background: linear-gradient(150deg, var(--soft), var(--brand)); color: var(--brand-ink); }
.av-john { background: #2E6F5E; }
.av-ana { background: #8A4F9E; border-radius: 50%; font-size: 10px; }

.chips-sm { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-sm span {
  font-size: 12px; color: var(--ink-2);
  padding: 4px 8px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--line);
}
.chips-sm em { font-style: normal; color: var(--ink-3); margin-right: 4px; }

.diff {
  margin: 0; padding: 9px 12px; border-radius: 9px;
  background: #0A0D11; border: 1px solid var(--line);
  font: 400 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-x: auto;
}
.diff .del { color: #E07A7A; }
.diff .add { color: var(--ok); }

.ba { display: flex; flex-wrap: wrap; gap: 8px; }
.ba figure {
  margin: 0; padding: 12px 14px 8px; border-radius: 10px;
  background: #161A20; border: 1px solid var(--line);
  display: grid; justify-items: center; gap: 7px;
}
.ba figcaption { font-size: 11px; color: var(--ink-3); }
.ba-btn { font: 600 12.5px/1 var(--font); padding: 9px 14px; border-radius: 8px; }
.ba-before { background: #22272F; color: #555C66; }
.ba-after { background: var(--ink); color: #0E1115; }

.closed { display: inline-flex; align-items: center; gap: 7px; color: var(--ok); font-weight: 500; }
.closed svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
              stroke-linecap: round; stroke-linejoin: round; }
.closed code { color: var(--ok); background: rgba(52,200,138,.1); }

@media (max-width: 520px) {
  .chat-msg { padding: 10px 14px; gap: 10px; }
  .ba { flex-wrap: nowrap; }
  .ba figure { flex: 1 1 0; min-width: 0; padding: 10px 6px 7px; }
  .ba-btn { font-size: 11px; padding: 8px 9px; white-space: nowrap; }
}

/* One message at a time, once, when it comes into view (site.js adds .play). */
.chat.play .chat-msg { opacity: 0; transform: translateY(8px); }
.chat.play .chat-msg.in { opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease); }

/* ---- The loop ------------------------------------------------------------ */

.loop {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px;
}
.loop li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: rgba(23,27,33,.6);
  font: 500 13.5px/1 var(--font);
  color: var(--ink-3);
  transition: color .4s var(--ease), border-color .4s var(--ease),
              background .4s var(--ease), transform .4s var(--ease);
}
.loop li i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #333A44;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}

.loop li.past { color: var(--ink-2); }
.loop li.past i { background: rgba(var(--brand-rgb),.55); }

.loop li.on {
  color: var(--ink);
  border-color: rgba(var(--brand-rgb),.5);
  background: rgba(var(--brand-rgb),.12);
  transform: translateY(-1px);
}
.loop li.on i { background: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.2); }

/* The last one is the point, so it lands green. */
.loop[data-at="3"] li.on { border-color: rgba(52,200,138,.5); background: rgba(52,200,138,.12); }
.loop[data-at="3"] li.on i { background: var(--ok); box-shadow: 0 0 0 4px rgba(52,200,138,.2); }

.loop-say {
  margin-top: 16px;
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--ink-2);
  min-height: 2.6em;
  max-width: 46ch;
  transition: opacity .3s var(--ease);
}
.loop-say.swap { opacity: 0; }

/* ---- Footer ---------------------------------------------------------------
   Named columns under the mark, rather than three lines of middots. The old
   one put terms and privacy last, at 12.5px grey, in the same run as the demo
   links; somebody looking for the terms on purpose read the whole thing as
   boilerplate and scrolled past it. A column with LEGAL over it is found
   without being read. */

footer {
  max-width: 1040px; margin: 0 auto;
  border-top: 1px solid var(--line);
  padding-block: 40px 56px;
  font-size: 14.5px;
}
footer a { color: var(--ink); text-decoration: none; }
footer a:hover { color: var(--soft); }

.foot-top { display: flex; flex-wrap: wrap; gap: 36px 48px; align-items: flex-start; }
.foot-brand { flex: 0 1 30ch; }
.foot-brand .mark { margin-bottom: 12px; }
.foot-brand p { color: var(--ink-3); font-size: 13.5px; line-height: 1.65; }

.foot-cols { display: flex; flex-wrap: wrap; gap: 28px 48px; margin-left: auto; }
.foot-cols section { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.foot-cols h2 {
  color: var(--ink-3);
  font: 600 11.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 4px;
}
.foot-cols a { color: var(--ink-2); font-size: 14px; }
.foot-cols a:hover { color: var(--ink); }

.foot-base {
  display: flex; flex-wrap: wrap; gap: 4px 28px; justify-content: space-between;
  margin-top: 40px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.foot-base p { color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }
/* The one line on the site that says how to become an early team, so the
   invitation at the end of it is the brightest thing in the bar. */
.foot-early { max-width: 64ch; }
.foot-early a { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.foot-early a:hover { color: var(--ink); border-bottom-color: var(--ink-3); }

/* A phone: the mark's own line is enough of a heading, and the columns become
   a single readable list rather than three squeezed ones. */
@media (max-width: 560px) {
  .foot-cols { margin-left: 0; gap: 24px 40px; }
  .foot-brand { flex-basis: 100%; }
}
.fine {
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 12.5px; line-height: 1.6;
  max-width: 74ch;
}
.fine a { color: var(--ink-2); }

/* ---- Less motion --------------------------------------------------------
   The loop does not walk itself (site.js), and the page as written already
   shows its last step. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 620px) {
  h1 { max-width: 100%; }
  .loop li { padding: 7px 12px 7px 10px; font-size: 12.5px; }
}

/* ---- Privacy, terms, imprint ------------------------------------------------
   Long reading, so one calm column: the masthead and footer of the site, and
   words set for reading rather than selling. */
.legal { max-width: 46rem; margin: 0 auto; padding-block: 28px 72px; color: var(--ink-2); }
.legal h1 { font-size: clamp(34px, 5vw, 46px); margin-bottom: 12px; }
.legal .updated { color: var(--ink-3); font-size: 14px; margin-bottom: 34px; }
.legal h2 { font-size: 22px; letter-spacing: -.02em; margin: 44px 0 12px; }
.legal h3 { color: var(--ink); font-size: 16px; margin: 26px 0 8px; }
.legal p, .legal ul, .legal ol, .legal table { margin: 0 0 14px; }
.legal ul, .legal ol { padding-left: 1.2em; }
.legal li { margin: 5px 0; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal code { font: 13.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
              background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.legal .short { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
                padding: 20px 24px; margin-bottom: 8px; }
.legal .short h2 { margin-top: 0; font-size: 17px; }
.legal .short ul { margin-bottom: 0; }
.legal .scroll { overflow-x: auto; margin: 0 0 14px; }
.legal table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 0; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0;
                       border-top: 1px solid var(--line); }
.legal th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.legal thead th { border-top: 0; color: var(--ink-3); font-size: 12.5px; text-transform: uppercase;
                  letter-spacing: .06em; }
.legal .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.legal .toc a { display: inline-block; font-size: 13.5px; color: var(--ink-2); text-decoration: none;
                border: 1px solid var(--line); border-radius: 99px; padding: 3px 11px; }
.legal .toc a:hover { color: var(--ink); border-color: var(--ink-3); }
.legal address { font-style: normal; color: var(--ink); line-height: 1.7; }