/* Quick Ask's website, in the app's look: its clean white screens, the blue of the mic button
   (AccentColor, #3F5CD9) and the icon's blue gradient (scripts/make-icon.swift). The layout
   follows Walkies' and Poddle's home pages (walkies.mikecann.app, poddle.mikecann.app). */

:root {
  --page: #f5f7fc; --card: #fff; --well: #eef1f8; --line: #e3e7f1;
  --ink: #161a2b; --body: #3d4357; --ink-soft: #5e6479; --ink-faint: #8b90a3;
  --blue: #3f5cd9; --blue-d: #2f47b8; --blue-l: #5473f2; --navy: #29389e;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --lift: 0 1px 2px rgba(22, 26, 43, .05), 0 8px 28px rgba(41, 56, 158, .08);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--page);
  -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh;
  position: relative; display: flex; flex-direction: column;
}
main { flex: 1; width: 100%; }
a { color: var(--blue-d); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

/* ---------- frame ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1080px; width: 100%; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 20px 6px;
}
/* The GitHub corner triangle (layout.html), off while the repo's private. It hangs off the
   page's top right, so the top bar moves in when the screen is too narrow to clear it. */
.corner { position: absolute; top: 0; z-index: 20; width: 72px; height: 72px; display: block; }
.corner svg { width: 100%; height: 100%; display: block; fill: var(--ink); }
.corner.github { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.corner.github .octo { fill: var(--page); }
.corner.github:hover .arm { animation: octo-wave 560ms ease-in-out; transform-origin: 130px 106px; }
@keyframes octo-wave { 0%, 100% { transform: rotate(0) } 20%, 60% { transform: rotate(-25deg) } 40%, 80% { transform: rotate(10deg) } }
.has-corner .topbar { padding-right: 64px; }
@media (max-width: 600px) {
  .corner { width: 54px; height: 54px; }
  .has-corner .topbar { padding-right: 50px; }
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand img { border-radius: 9px; box-shadow: 0 3px 10px rgba(41, 56, 158, .22); }
.brand b { font: 800 22px/1 var(--display); letter-spacing: -.02em; }
.topbar nav { display: flex; gap: 8px; }
.topbar nav a {
  font: 600 15px/20px var(--sans); color: var(--ink-soft); text-decoration: none; padding: 7px 14px;
  border-radius: 999px; background: var(--card); box-shadow: var(--lift);
}
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--blue-d); }
@media (max-width: 600px) {
  .brand { gap: 8px; }
  .brand b { font-size: 20px; }
  .brand img { width: 32px; height: 32px; border-radius: 8px; }
  .topbar nav { gap: 6px; }
  .topbar nav a { padding: 5px 11px; font-size: 14px; }
}
@media (max-width: 370px) {
  .brand b { font-size: 18px; }
  .brand img { width: 28px; height: 28px; }
  .topbar nav a { padding: 4px 9px; font-size: 13.5px; }
}

.footer {
  max-width: 1080px; width: 100%; margin: 0 auto; text-align: center;
  padding: 26px 20px max(30px, env(safe-area-inset-bottom)); font: 500 13.5px/19px var(--sans); color: var(--ink-soft);
}
.footer p { max-width: 540px; margin: 0 auto; }
.footer a { color: var(--ink-soft); }
.footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.footer nav a { text-decoration: none; }
.footer a:hover { color: var(--blue-d); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); color: var(--ink); text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(30px, 6vw, 42px); line-height: 1.08; letter-spacing: -.025em; }
.lede { font: 400 17px/26px var(--sans); color: var(--body); max-width: 600px; margin-top: 12px; }
.muted { color: var(--ink-soft); font: 500 15px/21px var(--sans); }
p { text-wrap: pretty; }

.card { background: var(--card); border-radius: 26px; box-shadow: var(--lift); }

/* ---------- the App Store badge, after Apple's black one ---------- */
.appstore {
  display: inline-flex; align-items: center; gap: 7px; height: 54px; padding: 0 18px 0 13px; border-radius: 12px;
  background: #000; color: #fff; border: 1px solid #a6a6a6; text-decoration: none; white-space: nowrap;
  font-family: var(--sans); box-shadow: 0 6px 16px rgba(22, 26, 43, .18);
}
.appstore-logo { width: 32px; height: 32px; margin-top: -4px; flex: none; fill: currentColor; }
.appstore span { display: flex; flex-direction: column; align-items: flex-start; }
.appstore small { font-size: 11.5px; font-weight: 500; line-height: 1.1; letter-spacing: .01em; }
.appstore b { font-size: 23px; font-weight: 600; line-height: 1.05; letter-spacing: -.025em; }
a.appstore:hover { background: #1c1c1c; color: #fff; }
a.appstore:active { transform: translateY(1px); }
.appstore.soon { cursor: default; }

/* ---------- the home page ---------- */
.section-title, .closing h2 { font-weight: 800; letter-spacing: -.03em; }
.page-index h3 { font: 750 clamp(22px, 3vw, 28px)/1.15 var(--display); letter-spacing: -.02em; }

/* A phone, drawn round a screenshot. --w sets its width. */
.phone {
  --w: 240px; width: var(--w); flex: none; padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .165);
  background: linear-gradient(150deg, #3b3f4d, #15171f 45%, #262a35);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 30px 46px -26px rgba(20, 30, 90, .55), 0 10px 22px rgba(20, 30, 90, .12);
}
.phone img { display: block; width: 100%; height: auto; border-radius: calc(var(--w) * .135); background: #fff; }

/* hero */
.hero {
  max-width: 1080px; margin: 0 auto; padding: clamp(18px, 5vw, 56px) 20px 24px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center;
}
.hero-icon { display: block; border-radius: 18px; margin-bottom: 20px; box-shadow: 0 10px 24px rgba(41, 56, 158, .3); }
.hero h1 { font-size: clamp(38px, 5.4vw, 58px); line-height: 1.03; letter-spacing: -.035em; }
.hero .lede { font-size: 18.5px; line-height: 28px; max-width: 520px; margin-top: 18px; }
.hero-cta { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 28px; }
.hero-media { position: relative; display: flex; justify-content: center; align-items: center; padding: 24px 0 12px; }
/* A big soft speech bubble in the icon's blue behind the phones. */
.hero-media::before {
  content: ""; position: absolute; inset: 6% 2% 4%; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(62% 62% at 50% 44%, #dfe6fd, rgba(223, 230, 253, .6) 58%, rgba(245, 247, 252, 0) 76%);
}
.hero-media .phone { position: relative; --w: clamp(190px, 21vw, 262px); }
.hero-media .back { transform: rotate(-7deg) translate(8%, 6%); margin-right: calc(var(--w) * -.32); }
.hero-media .front { transform: rotate(4deg); z-index: 1; }

/* promo video: a still with a play button until it's clicked (web/src/video.js) */
.promo { max-width: 1000px; margin: clamp(40px, 7vw, 88px) auto 0; padding: 0 20px; }
.promo-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--well); box-shadow: var(--lift); }
.promo-frame.square { aspect-ratio: 1; max-width: 640px; margin: 0 auto; }
.promo-frame.portrait { aspect-ratio: 9 / 16; max-width: 400px; margin: 0 auto; }
.promo-frame iframe, .promo-play, .promo-play img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.promo-play img { object-fit: cover; }
.promo-icon {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--blue); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(41, 56, 158, .4); transition: transform .2s;
}
.promo-icon svg { width: 40px; height: 40px; fill: #fff; margin-left: 5px; }
.promo-play:hover .promo-icon, .promo-play:focus-visible .promo-icon { transform: translate(-50%, -50%) scale(1.08); }
@media (max-width: 600px) { .promo-frame { border-radius: 18px; } .promo-icon { width: 64px; height: 64px; } .promo-icon svg { width: 30px; height: 30px; } }

/* features */
.features, .closing { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.section-title { display: block; font-size: clamp(30px, 4.4vw, 42px); line-height: 1.1; text-align: center; margin: clamp(48px, 8vw, 96px) 0 28px; }
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; overflow: hidden;
  background: var(--card); border-radius: 32px; box-shadow: var(--lift);
}
.feature + .feature { margin-top: 22px; }
.feature-copy { padding: clamp(28px, 5vw, 56px); align-self: center; }
.feature-copy p { font: 400 17.5px/28px var(--sans); color: var(--body); margin-top: 14px; max-width: 460px; }
.feature-media {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 18px; padding: 40px 24px;
  background: radial-gradient(90% 80% at 50% 45%, #e6ebfd, #d3dcfa);
}
.feature:nth-of-type(2) .feature-media { background: radial-gradient(90% 80% at 50% 45%, #ebe8fc, #d9d3f6); }
.feature:nth-of-type(3) .feature-media { background: radial-gradient(90% 80% at 50% 45%, #e3f0fb, #cde2f5); }
.feature:nth-of-type(4) .feature-media { background: radial-gradient(90% 80% at 50% 45%, #e9ecf5, #d8dde9); }
.feature.flip .feature-copy { order: 2; }
.feature-media .phone { --w: 236px; }
.feature-media.pair .phone { --w: 206px; }
.feature-media.pair .phone:last-child { transform: translateY(22px); }

/* The timing breakdown up close, laid over the phone it came from. */
.feature-media.timing { flex-direction: column; gap: 0; padding-bottom: 32px; }
.zoom {
  position: relative; z-index: 1; width: min(100%, 400px); margin-top: -96px; padding: 12px 12px 8px;
  background: #fff; border-radius: 18px; box-shadow: 0 18px 40px -12px rgba(20, 30, 90, .35), 0 2px 6px rgba(20, 30, 90, .08);
}
.zoom img { display: block; width: 100%; }

.bits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.bit { background: var(--card); border-radius: 28px; box-shadow: var(--lift); padding: 28px 30px; }
.page-index .bit h3 { font-size: 22px; }
.bit p { font: 400 16.5px/26px var(--sans); color: var(--body); margin-top: 10px; }

/* gallery: one row of phones that scrolls sideways */
.strip {
  list-style: none; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 8px 20px 26px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  /* Centred once they all fit side by side. "safe" falls back to the start once they don't,
     so the first one never gets cut off. */
  justify-content: safe center;
}
.strip li { flex: none; scroll-snap-align: center; }
.strip figure { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.strip .phone { --w: 210px; }
.strip figcaption { font: 600 15px/18px var(--sans); color: var(--ink-soft); }

/* closing */
.closing { margin-top: clamp(40px, 7vw, 80px); padding-bottom: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.closing h2 { font-size: clamp(32px, 5vw, 46px); line-height: 1.1; }
.closing .lede { text-align: center; max-width: 580px; margin: 14px 0 26px; }

@media (max-width: 960px) {
  .bits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bits .bit:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .hero-icon { margin: 0 auto 16px; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; flex-direction: column; }
  .hero-media .phone { --w: min(44vw, 230px); }
  .feature { grid-template-columns: 1fr; }
  .feature.flip .feature-copy { order: 0; }
  .feature-copy { padding: 30px 24px 26px; }
  .feature-media { padding: 30px 16px 34px; }
  .feature-media .phone { --w: min(56vw, 240px); }
  .feature-media.pair { gap: 12px; }
  .feature-media.pair .phone { --w: min(38vw, 200px); }
  .zoom { margin-top: -72px; }
  .strip .phone { --w: min(52vw, 210px); }
}
@media (max-width: 640px) {
  .bits { grid-template-columns: 1fr; }
  .bit { padding: 24px; }
}

/* ---------- privacy, help, the server page and the 404 ---------- */
.prose { max-width: 740px; margin: 18px auto 56px; padding: clamp(26px, 5vw, 48px) clamp(22px, 5vw, 52px); }
.prose h1 { margin-bottom: 8px; }
.prose h2 { font: 750 21px/27px var(--display); letter-spacing: -.015em; margin: 34px 0 0; }
.prose h3 { font: 700 17.5px/24px var(--display); margin: 22px 0 0; }
.prose p, .prose li { font: 400 16.5px/26px var(--sans); color: var(--body); }
.prose p { margin-top: 12px; }
.prose .lede { font-size: 17.5px; line-height: 27px; max-width: none; }
.prose ul { padding-left: 22px; margin-top: 12px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--blue); }
.prose b { color: var(--ink); font-weight: 650; }
.prose .meta { font: 500 15px/21px var(--sans); color: var(--ink-soft); }
.prose code { font: 500 .88em/1 var(--mono); background: var(--well); color: var(--ink); padding: .15em .4em; border-radius: 6px; overflow-wrap: anywhere; }
.prose pre {
  margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: #141826; color: #e7eaf5;
  font: 400 13.5px/21px var(--mono); overflow-x: auto; -webkit-overflow-scrolling: touch; tab-size: 2;
}
.prose pre code { font: inherit; background: none; color: inherit; padding: 0; border-radius: 0; overflow-wrap: normal; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 14px; font: 400 15.5px/23px var(--sans); color: var(--body); }
.prose th { text-align: left; font-weight: 650; color: var(--ink); padding: 0 12px 8px 0; border-bottom: 1.5px solid var(--line); }
.prose td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Field names and status codes stay whole, so they never break mid-word on a phone. */
.prose td:first-child { white-space: nowrap; }
.prose td code { overflow-wrap: normal; }
.prose .note { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: #eef2fe; color: var(--body); }
.prose .note p:first-child { margin-top: 0; }
.prose .back { margin-top: 28px; }
@media (max-width: 600px) {
  .prose { margin: 12px 14px 40px; border-radius: 22px; }
  .prose pre { margin-left: -8px; margin-right: -8px; font-size: 12.5px; line-height: 19px; padding: 14px; }
}

/* The 404 */
.lost { text-align: center; }
.lost img { display: block; margin: 0 auto 18px; border-radius: 18px; box-shadow: 0 10px 24px rgba(41, 56, 158, .3); }
.lost .lede { margin-left: auto; margin-right: auto; }
.lost .back { display: inline-block; margin-top: 22px; }