/* How it works: page parts on top of styles.css (tokens, base and the shared system). Every colour and face is a token from tokens.css. */

/* contents of the six steps */
.jump { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); max-width: 64rem; }
.jump li { border-bottom: 1px solid var(--color-rule); }
.jump li:nth-child(3n+2), .jump li:nth-child(3n) { border-left: 1px solid var(--color-rule); }
.jump a { display: flex; align-items: baseline; gap: var(--space-sm); min-height: 48px; padding: var(--space-sm) var(--space-md); color: var(--color-ink); text-decoration: none; font: 500 var(--text-md)/1.3 var(--font-body); transition: background-color var(--dur-micro) var(--ease-out); }
.jump li:nth-child(3n+1) a { padding-left: 0; }
.jump a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.jump a:active { background: var(--color-paper-2); }
.jump a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.jump b { font: 700 var(--text-xl)/1 var(--font-display); color: var(--color-accent); }

/* the video */
.watch { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.watch-h { font-size: var(--text-title); max-width: none; margin-bottom: var(--space-md); }
.watch-video { display: block; width: 100%; max-width: 64rem; height: auto; aspect-ratio: 16 / 9; background: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); }
.watch-video:focus-visible, .watch-video:focus-within { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.transcript { max-width: 64rem; margin-top: var(--space-md); color: var(--color-ink-2); }
.transcript summary { cursor: pointer; font: 700 var(--text-md)/1.4 var(--font-display); color: var(--color-ink); min-height: 44px; display: flex; align-items: center; }
.transcript summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.transcript p { margin-top: var(--space-xs); max-width: 70ch; }

/* the six steps: the number in its own column, the words, the screen */
.step { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.step-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: center; }
.step-num { align-self: start; font: 700 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-accent); padding-top: var(--space-xs); border-top: 1px solid var(--color-ink); }
.step-grid.flip { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 6fr); }
.step-grid.flip .step-visual { grid-column: 2; grid-row: 1; }
.step-grid.flip .step-copy { grid-column: 3; grid-row: 1; }
.step-copy { min-width: 0; }
.step h2 { font-size: calc(var(--text-section) * 0.8); max-width: 22ch; margin-bottom: var(--space-md); }
.step-copy > p { max-width: 60ch; }
.who { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0; }
.who p { padding-top: var(--space-xs); border-top: 1px solid var(--color-rule); max-width: 60ch; }
.who b { font-family: var(--font-display); }
.who-us b { color: var(--color-accent); }
.step-copy > .fine { font-size: var(--text-sm); color: var(--color-muted); }
.step-visual { position: relative; display: flex; justify-content: center; min-width: 0; }

/* drawn phone screens, the owner's samples */
.phone { position: relative; display: flex; flex-direction: column; gap: var(--space-xs); width: 300px; max-width: 100%; min-height: 520px; padding: var(--space-lg) var(--space-md); background: var(--color-paper); color: var(--color-ink); border: 8px solid var(--color-ink); border-radius: var(--radius-device); font-size: var(--text-sm); }
.stars { color: var(--color-star); }
.search-bar { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); padding: var(--space-sm); border: 1px solid var(--color-rule-2); font-weight: 500; }
.search-bar svg { width: 18px; height: 18px; fill: none; stroke: var(--color-muted); stroke-width: 2; stroke-linecap: round; }
.map { position: relative; height: 150px; background: var(--color-paper-3); border: 1px solid var(--color-rule); }
.pin { position: absolute; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--color-muted); }
.p1 { left: 18%; top: 30%; } .p2 { left: 70%; top: 58%; }
.pin.you { left: 46%; top: 18%; width: 24px; height: 24px; background: var(--color-accent); }
.result { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-sm); border-top: 1px solid var(--color-rule); }
.result div { display: grid; gap: var(--space-3xs); }
.result small { color: var(--color-muted); font-size: var(--text-xs); }
.result.you { border-top: 2px solid var(--color-accent); }
.result.faded { color: var(--color-muted); }
.result.faded b { font-weight: 500; }
.r-btn { padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-on-ink); font-weight: 700; }

.phone.call { align-items: center; text-align: center; padding-top: var(--space-3xl); background: var(--color-ink); color: var(--color-on-ink); }
.call-label, .call-sub { color: var(--color-on-ink-muted); }
.call-name { font: 700 var(--text-2xl)/1.1 var(--font-display); }
.call-ring { position: relative; width: 84px; height: 84px; margin: var(--space-2xl) 0 var(--space-xl); border-radius: 50%; background: var(--color-success); }
.call-ring span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--color-success); animation: ring 1.6s var(--ease-out) infinite; }
@keyframes ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
.missed { padding: var(--space-xs) var(--space-md); background: var(--color-on-ink); color: var(--color-error); font-weight: 700; }

.phone.chat { padding: 0; gap: 0; overflow: hidden; }
.chat-head { display: grid; justify-items: center; padding: var(--space-lg) var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); }
.chat-head small { color: var(--color-muted); font-size: var(--text-xs); }
.chat-body { flex: 1; display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-md) var(--space-sm); min-height: 380px; }
.chat-sys { justify-self: center; font-size: var(--text-xs); color: var(--color-error); font-weight: 700; }
.bubble { max-width: 85%; padding: var(--space-xs) var(--space-sm); border-radius: 14px; line-height: 1.4; font-size: var(--text-sm); animation: pop var(--dur-short) var(--ease-out); }
.bubble.out { justify-self: start; background: var(--color-paper-3); color: var(--color-ink); border-bottom-left-radius: 4px; }
.bubble.in { justify-self: end; background: var(--color-bubble-in); color: var(--color-on-ink); border-bottom-right-radius: 4px; }
.typing { display: inline-flex; gap: var(--space-2xs); padding: var(--space-sm); border-radius: 14px; background: var(--color-paper-3); justify-self: start; }
.typing.in { justify-self: end; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 50% { opacity: 0.3; } }
@keyframes pop { from { transform: scale(0.94); } to { transform: none; } }
.review-pop { position: absolute; right: 0; bottom: var(--space-xl); display: grid; gap: var(--space-2xs); width: 220px; padding: var(--space-sm) var(--space-md); background: var(--color-paper); border: 1px solid var(--color-ink); }
.review-pop p { font-size: var(--text-sm); line-height: 1.4; }
.review-pop small { color: var(--color-muted); font-size: var(--text-xs); }

.phone.lock { padding-top: var(--space-2xl); background: var(--color-ink-2); color: var(--color-on-ink); }
.lock-time { font: 700 var(--text-display-s)/1 var(--font-display); text-align: center; }
.lock-date { margin-bottom: var(--space-xl); text-align: center; color: var(--color-on-ink-muted); }
.notif { display: grid; gap: var(--space-2xs); padding: var(--space-sm); background: var(--color-paper); color: var(--color-ink); border-radius: 12px; }
.notif-app { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); }
.notif-title { font-weight: 700; }
.notif-text { font-size: var(--text-sm); line-height: 1.4; }
.notif-meta { font-size: var(--text-xs); color: var(--color-muted); }

.report-mini { width: 360px; max-width: 100%; padding: var(--space-lg); background: var(--color-paper); border-top: 4px double var(--color-rule-2); border-bottom: 1px solid var(--color-rule); }
.rm-head { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); justify-content: space-between; align-items: baseline; margin-bottom: var(--space-md); font: 700 var(--text-xl)/1.2 var(--font-display); }
.rm-head small { font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-muted); }
.rm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); }
.rm-grid div { display: grid; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.rm-grid div:nth-child(2n) { border-left: 1px solid var(--color-rule); padding-left: var(--space-sm); }
.rm-grid b { font: 700 var(--text-2xl)/1.1 var(--font-display); }
.rm-grid span { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.3; }
.rm-bars { display: flex; align-items: flex-end; gap: var(--space-xs); height: 90px; margin: var(--space-md) 0 var(--space-xs); border-bottom: 1px solid var(--color-ink); }
.rm-bars i { flex: 1; background: var(--color-accent); }
.rm-note { font-size: var(--text-xs); color: var(--color-muted); }

/* before and after */
.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
.ba { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: center; margin: 0; padding-top: var(--space-md); border-top: 1px solid var(--color-ink); }
.ba .phone { width: 230px; min-height: 420px; }
.ba-label { margin-bottom: var(--space-sm); font: 700 var(--text-2xl)/1.1 var(--font-display); }
.ba-label.bad { color: var(--color-error); }
.ba-label.good { color: var(--color-success); }
.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); font-size: var(--text-md); }
.marks li { position: relative; padding-left: var(--space-lg); line-height: 1.4; }
.marks li::before { position: absolute; left: 0; top: 0; font: 700 var(--text-md)/1.4 var(--font-display); }
.marks .x::before { content: "\2715"; color: var(--color-error); }
.marks .ok::before { content: "\2713"; color: var(--color-success); }
.phone.old { gap: var(--space-xs); padding-top: var(--space-xl); background: var(--color-paper-3); }
.old-title { font-size: var(--text-md); font-weight: 700; color: var(--color-old-title); text-align: center; }
.old-tiny { font-size: 8px; line-height: 1.3; color: var(--color-ink-2); }
.old-tiny.link { color: var(--color-old-link); text-decoration: underline; }
.old-img { height: 90px; background: var(--color-rule); }
.phone.new { gap: var(--space-sm); padding-top: var(--space-xl); }
.new-brand { font: 700 var(--text-sm)/1.2 var(--font-display); color: var(--color-muted); }
.new-h { font: 700 var(--text-xl)/1.15 var(--font-display); }
.new-call, .new-book { display: block; padding: var(--space-sm); text-align: center; font-weight: 700; }
.new-call { background: var(--color-ink); color: var(--color-on-ink); }
.new-book { border: 1px solid var(--color-ink); }
.new-meta { font-size: var(--text-xs); color: var(--color-muted); }

/* what you don't have to do */
.nope { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); }
.nope li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xs) var(--gap-columns); align-items: baseline; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-lg); }
.nope b { font: 700 var(--text-title)/1.2 var(--font-display); }

/* samples, as an index */
.samp-lead { max-width: 60ch; margin: calc(-1 * var(--space-xl)) 0 var(--space-xl); font-size: var(--text-lead); color: var(--color-ink-2); }
.samp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); }
.samp { display: grid; gap: var(--space-xs); align-content: start; min-height: 180px; padding: var(--space-lg); border-left: 1px solid var(--color-rule); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.samp:first-child { border-left: 0; padding-left: 0; }
.samp:hover { background: var(--color-paper-2); }
.samp:active { background: var(--color-paper-3); }
.samp:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.samp b { font: 700 var(--text-xl)/1.15 var(--font-display); }
.samp-tag { font-size: var(--text-sm); color: var(--color-muted); }
.samp-go { margin-top: var(--space-sm); color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.16em; }
.samp:hover .samp-go { text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  .call-ring span, .bubble, .typing i { animation: none; }
}

@media (max-width: 1000px) {
  .step-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .step-grid.flip .step-visual, .step-grid.flip .step-copy { grid-column: auto; grid-row: auto; }
  .step-num { justify-self: start; }
  .ba-grid, .nope li { grid-template-columns: minmax(0, 1fr); }
  .samp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .samp:nth-child(n) { border-left: 1px solid var(--color-rule); padding-left: var(--space-lg); }
  .samp:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .samp:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jump li:nth-child(n) { border-left: 0; }
  .jump li:nth-child(2n) { border-left: 1px solid var(--color-rule); }
  .jump li:nth-child(n) a { padding-left: var(--space-md); }
  .jump li:nth-child(2n+1) a { padding-left: 0; }
}
@media (max-width: 760px) {
  .phone { width: 280px; min-height: 480px; }
  .review-pop { position: static; margin-top: calc(-1 * var(--space-xl)); margin-left: auto; }
  .step-visual { flex-direction: column; align-items: center; }
  .ba { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ba figcaption { width: 100%; }
  .samp-grid { grid-template-columns: minmax(0, 1fr); }
  .samp:nth-child(n) { border-left: 0; padding-left: 0; }
  .samp:nth-child(n+2) { border-top: 1px solid var(--color-rule); }
  .step-copy .btn { width: 100%; }
}