/* Matches the app: near-black ground, one gold, serif display type, tracked small caps, soft rounded cards. */
:root {
  --bg: #0e1013; --card: rgba(255,255,255,.035); --line: rgba(255,255,255,.08);
  --text: #f2f2f2; --muted: rgba(255,255,255,.62); --faint: rgba(255,255,255,.4);
  --gold: #d4ad61; --gold-hi: #e3b866; --on-gold: #14110a;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, system-ui, "SF Pro Text", "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f6f3ec; --card: rgba(0,0,0,.03); --line: rgba(0,0,0,.1); --text: #1c1a16;
          --muted: rgba(28,26,22,.66); --faint: rgba(28,26,22,.45); --gold: #8a6a1f; --gold-hi: #6f5415; --on-gold: #fff; }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font: 17px/1.6 var(--sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 42rem; }

header.site { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none;
  font-size: .8rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
nav a { color: var(--muted); text-decoration: none; margin-left: 1.4rem; font-size: .9rem; }
nav a:hover, nav a[aria-current] { color: var(--gold); }

.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 0 0 .9rem; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); }
h2 { font-size: 1.7rem; margin-bottom: .9rem; }
h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 34rem; }

.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; padding: 3rem 0 4rem; }
.hero .shot { display: flex; justify-content: center; }
.phone { width: min(280px, 100%); border-radius: 2.4rem; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.03); display: block; }
.badge-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.pill { font-size: .8rem; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: .3rem .8rem; }
.btn { display: inline-block; background: var(--gold); color: var(--on-gold); font-weight: 600; text-decoration: none; padding: .8rem 1.4rem; border-radius: 1rem; margin-top: 1.6rem; }
.btn:hover { background: var(--gold-hi); color: var(--on-gold); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; }
.btn.secondary { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn.secondary:hover { background: transparent; color: var(--gold-hi); border-color: var(--gold-hi); }

section { padding: 2.5rem 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 1.2rem; padding: 1.3rem 1.3rem 1.2rem; }
.card p { margin: 0; color: var(--muted); font-size: .97rem; }
.card .k { font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.2rem; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; border-radius: 1.4rem; border: 1px solid var(--line); display: block; }
.gallery figcaption { text-align: center; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: .7rem; }

.page-title { padding: 2rem 0 .5rem; }
.prose h1 { font-size: 2.3rem; margin-bottom: 1rem; }
.prose h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin: .35rem 0; }
.faq .card { margin-bottom: 1rem; }

footer.site { margin-top: 3rem; border-top: 1px solid var(--line); padding: 1.6rem 0 3rem; color: var(--faint); font-size: .88rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
footer.site a { color: var(--muted); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; }
  nav a { margin-left: 1rem; }
}
/* Phones: keep the brand on one line, give the device showcase room for a readable phone, and centre a lone last
   gallery screenshot instead of leaving a hole beside it. */
@media (max-width: 520px) {
  .brand { letter-spacing: .16em; white-space: nowrap; }
  nav a { margin-left: .8rem; font-size: .85rem; }
  .stage { height: 440px; }
  .gallery figure:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .6rem); }
}

/* Device showcase: cycles through iPhone, iPhone Duo and iPad. */
.showcase { margin-top: .5rem; }
.stage { position: relative; height: clamp(300px, 56vw, 560px); border: 1px solid var(--line); border-radius: 1.4rem;
  background: radial-gradient(ellipse at 50% 40%, rgba(212,173,97,.10), transparent 65%), var(--card); overflow: hidden; }
/* Only the current figure shows. When the device changes, script.js sweeps the next one in from the left (and the old one
   out to the right) with the Web Animations API; this file only says who is visible when nothing is moving. */
.stage figure { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  padding: 1.4rem; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.stage figure.on { opacity: 1; pointer-events: auto; }
.stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 1.1rem; border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tabs button { font: inherit; font-size: .85rem; letter-spacing: .04em; color: var(--muted); background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 99px; padding: .4rem 1rem; min-height: 44px; }
.tabs button[aria-selected="true"] { color: var(--on-gold); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.tabs button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.showcase-note { text-align: center; color: var(--muted); font-size: .95rem; margin: .9rem auto 0; max-width: 36rem; min-height: 3em; }
/* With Reduce Motion on, the device changes at once (script.js skips the sweep and the automatic cycling). */

/* Video and scroll-in. The video sits where the screenshot was. */
.hero video.phone { height: auto; aspect-ratio: 540 / 1174; background: var(--card); }
/* Without script nothing is hidden; with it, items start low and faint and ease in once. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Trace explainer */
.trace-lead { color: var(--muted); max-width: 38rem; margin: 0 0 1.2rem; }
.trace-panel { border: 1px solid var(--line); border-radius: 1.4rem; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(212,173,97,.08), transparent 65%), var(--card); }
.trace-panel canvas { display: block; width: 100%; height: clamp(190px, 34vw, 280px); }