/* Inner pages: the page hero, screenshots, steps, plans, questions and the small lists.
   Built on the tokens and parts in site.css; nothing here changes the home page. */

/* ---------- page hero: headline first, one column ---------- */
.phero{display:grid;gap:18px;max-width:54rem}
.phero .h1{max-width:17em}
.phero .lead{max-width:36em}
.phero__act{display:grid;gap:12px;margin-top:6px}
.phero__media{margin-top:40px}
.phero .for{margin-top:6px}
.hero + .sec{border-top:1px solid var(--line)}
@media (min-width:1024px){ .phero__media{margin-top:56px} }

/* ---------- two columns that stack on phones ---------- */
.split{display:grid;gap:40px;margin-top:36px}
.split__text{display:grid;gap:18px;align-content:start;min-width:0}
.split__text p{color:var(--ink-2);max-width:36em}
@media (min-width:1024px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start;margin-top:44px}
  .split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---------- numbers inside a section ---------- */
.figures{display:grid;gap:12px;margin-top:40px}
.figures .proof__list{max-width:40rem}
@media (min-width:900px){
  .figures .proof__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof--3 .proof__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- steps that stay stacked at every width ---------- */
.how__list h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;letter-spacing:-.012em;line-height:1.2}
@media (min-width:900px){
  .how__list--stack{grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line-2)}
  .how__list--stack li{grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto;gap:6px 14px;padding:20px 0 22px;border-top:0;border-bottom:1px solid var(--line)}
  .how__list--stack li + li{padding-left:0;border-left:0}
  .how__list--stack .how__n{grid-row:span 2}
  .how__list--stack p{max-width:36em}
}

/* ---------- phone screenshots ---------- */
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;max-width:460px;margin-inline:auto}
.phone{display:grid;gap:10px;align-content:start;margin:0;min-width:0}
.phone img{border:1px solid var(--line-2);border-radius:18px;background:var(--surface)}
.phone figcaption{font-size:var(--fs-small);line-height:1.4;color:var(--slate);text-align:center}

/* ---------- the walkthrough video: a picture until someone presses play ---------- */
.video,.video__frame{display:block;width:100%;max-width:960px;aspect-ratio:16 / 9;margin-top:28px;border-radius:var(--r-l)}
.video{position:relative;padding:0;border:1px solid var(--line-2);overflow:hidden;background:var(--ink);cursor:pointer}
.video img{width:100%;height:100%;object-fit:cover}
.video__icon{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--paper);color:var(--ink);transition:background-color var(--dur) var(--ease)}
.video__icon svg{width:26px;height:26px;margin-left:4px;fill:currentColor}
.video__len{position:absolute;right:12px;bottom:12px;padding:4px 8px;border-radius:var(--r-s);background:rgba(28,25,23,.82);color:var(--paper);font-family:var(--font-mono);font-size:12px;line-height:1.3}
@media (hover:hover){ .video:hover .video__icon{background:var(--surface)} }
.video__frame{border:0}

/* ---------- price block and the crew app badges ---------- */
.pricebox{display:grid;gap:20px;margin-top:28px;max-width:38rem}
.pricebox .fine a{color:var(--ink)}
.apps{display:grid;gap:16px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line);max-width:38rem}
.apps p{color:var(--ink-2)}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.badges a{display:inline-flex;align-items:center;min-height:48px;border-radius:8px}
.badges a:focus-visible{outline-offset:5px}
.badge--apple{height:48px;width:auto}
/* Google ships its badge inside 41px of clear padding on a 646 by 250 PNG; scale it so the visible part matches Apple's 48px. */
.badge--google{height:calc(48px * 250 / 168);width:auto;margin:calc(48px * -41 / 168)}

/* ---------- questions ---------- */
.faq{display:grid;margin-top:28px;max-width:48rem;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;font-weight:600;font-size:1.0625rem;line-height:1.35;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) center / 12px 1.6px no-repeat,linear-gradient(var(--ink),var(--ink)) center / 1.6px 12px no-repeat}
.faq details[open] summary::after{background:linear-gradient(var(--ink),var(--ink)) center / 12px 1.6px no-repeat}
.faq details p{padding:0 0 18px;color:var(--ink-2);max-width:40em}

/* ---------- plan cards ---------- */
.cards{display:grid;gap:16px;margin-top:28px}
.card{display:grid;gap:14px;align-content:start;padding:22px 20px 24px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface)}
.card__price{font-family:var(--font-display);font-size:clamp(2rem, 1.7rem + 1.2vw, 2.5rem);font-weight:var(--w-display);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.card__price span{font-family:var(--font-text);font-size:var(--fs-body);font-weight:400;letter-spacing:0;color:var(--slate)}
.card__sub{color:var(--ink-2)}
@media (min-width:700px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:56rem} }
@media (min-width:1000px){ .cards--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none} }
.after-cards{display:grid;gap:12px;margin-top:28px}

/* ---------- small lists ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tags li{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-2)}
.apps-list{display:grid;gap:14px;margin-top:24px;max-width:40rem}
.apps-list li{color:var(--ink-2)}
.apps-list a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:var(--line-2)}

/* ---------- not found ---------- */
.lost{display:grid;gap:10px;margin-top:32px;max-width:40rem}
.lost a{display:grid;gap:4px;min-height:64px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color var(--dur) var(--ease)}
.lost b{font-weight:600}
.lost span{font-size:var(--fs-small);color:var(--slate)}
@media (hover:hover){ .lost a:hover{border-color:var(--ink)} }

/* ---------- changelog and blog ---------- */
.changelog{display:grid;max-width:44rem;border-top:1px solid var(--line-2)}
.changelog li{padding:24px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.changelog__meta{margin-bottom:8px;font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.changelog__item h2{margin-bottom:8px;font-family:var(--font-display);font-size:1.375rem;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.changelog__item p + p{margin-top:10px}
.empty{display:grid;gap:12px;max-width:40rem;padding:24px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface)}
.empty p{color:var(--ink-2)}
.empty a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* ---------- legal pages ---------- */
.legal .updated{margin-bottom:2em;font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.legal blockquote{margin:0 0 1em;padding:12px 18px;border-left:2px solid var(--line-2);background:var(--surface);color:var(--ink-2)}