/* Written by scripts/site.py. The home page: a product page that unfolds as
   it is scrolled, in the same paper, ink and leaf as the other pages. */
body.home { padding: 0; overflow-x: hidden; }
/* Wider than the other pages, which keep to a column of text. */
.home main, .home header.topbar { max-width: none; margin: 0; padding: 0; }
.home a { text-decoration: none; }
.home img { display: block; max-width: 100%; height: auto; }

/* The bar along the top, which the page slides under. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.topbar .inner {
  max-width: 1120px; margin: 0 auto; padding: 0 22px; height: 52px;
  display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.topbar nav { margin: 0 0 0 auto; display: flex; align-items: center; gap: 22px; font-size: 0.88rem; }
.topbar nav a { color: var(--ink); opacity: 0.78; margin: 0; }
.topbar nav a:hover { opacity: 1; }
.topbar nav a.pill { opacity: 1; color: #fff; }
@media (max-width: 860px) { .topbar nav a.wide { display: none; } }
/* What the bar's links go to, clear of the bar as they come to rest. */
.home [id] { scroll-margin-top: 64px; }
@media (max-width: 480px) { .brand span { display: none; } .topbar nav { gap: 16px; } }

/* Buttons. */
.pill, .button {
  display: inline-block; border-radius: 980px; font-weight: 600; white-space: nowrap;
  background: var(--leaf); color: #fff;
}
.pill { padding: 5px 13px; font-size: 0.82rem; }
.button { padding: 13px 26px; font-size: 1.02rem; }
@media (prefers-color-scheme: dark) { .pill, .button, .topbar nav a.pill { color: #12150f; } }
.soon { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.more { color: var(--leaf); font-weight: 500; font-size: 1.02rem; }
.more::after { content: " \203A"; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; margin-top: 30px; }

/* The opening: the icon, the name, and an iPad that tips up as you scroll. */
.hero { text-align: center; padding: 76px 22px 0; }
.hero .icon { width: 116px; height: 116px; margin: 0 auto; border-radius: 26px; box-shadow: 0 14px 34px -10px rgba(30, 36, 32, 0.35); }
.hero h1 { font-size: clamp(2.8rem, 8vw, 5.4rem); line-height: 1.02; letter-spacing: -0.04em; margin: 30px 0 12px; }
.hero .tagline { font-size: clamp(1.35rem, 3.4vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--muted); font-weight: 500; margin: 0; }
.stage { perspective: 1800px; max-width: 1160px; margin: 56px auto 0; padding: 0 22px; }
.stage img { width: 100%; border-radius: 22px; transform-origin: 50% 0; box-shadow: 0 40px 90px -30px rgba(30, 36, 32, 0.45); }

/* A sentence that lights up word by word as it passes. */
.statement {
  max-width: 1000px; margin: 0 auto; padding: 150px 22px;
  font-size: clamp(1.9rem, 4.6vw, 3.5rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700;
}
.statement p { margin: 0; color: var(--ink); }
.js .statement .w { opacity: 0.16; transition: opacity 0.25s linear; }
.js .statement .w.lit { opacity: 1; }

/* The sections. */
.section { max-width: 1160px; margin: 0 auto; padding: 110px 22px; }
.head { text-align: center; max-width: 46rem; margin: 0 auto 56px; }
.eyebrow { color: var(--leaf); font-weight: 600; font-size: 1.05rem; margin: 0 0 12px; }
.head h2 { font-size: clamp(2.1rem, 5.4vw, 3.8rem); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 18px; }
.head p.lead { font-size: clamp(1.1rem, 2.1vw, 1.4rem); line-height: 1.45; color: var(--muted); margin: 0; }
.shot { width: 100%; border-radius: 20px; box-shadow: 0 28px 70px -30px rgba(30, 36, 32, 0.45); }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 780px) { .two-up { grid-template-columns: 1fr; } }

/* Galleries that scroll sideways, edge to edge, with buttons beneath. */
.gallery {
  display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px max(22px, calc((100vw - 1116px) / 2)) 40px;
  scroll-padding: 0 max(22px, calc((100vw - 1116px) / 2));
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery > * { flex: 0 0 min(84vw, 860px); scroll-snap-align: start; margin: 0; }
.gallery.phones > * { flex-basis: min(64vw, 300px); }
.gallery.wide > * { flex-basis: min(84vw, 760px); }
.paddles { display: flex; justify-content: flex-end; gap: 14px; max-width: 1160px; margin: -8px auto 0; padding: 0 22px; }
.paddles button {
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink);
  font: 600 1.25rem/1 -apple-system, BlinkMacSystemFont, sans-serif;
}
.paddles button:hover { background: color-mix(in srgb, var(--ink) 16%, transparent); }

/* The iPhone, on a dark band. */
.band { background: #1e2420; color: #f6f1e7; padding: 10px 0 120px; }
.band .head p.lead { color: #b9c2bb; }
.band .eyebrow { color: #8fc5a0; }
.band .paddles button { background: rgba(246, 241, 231, 0.12); color: #f6f1e7; }
.band .shot { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8); }
.sideways { max-width: 1160px; margin: 90px auto 0; padding: 0 22px; }
.sideways h3 { text-align: center; font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -0.03em; margin: 0 0 30px; }
@media (prefers-color-scheme: dark) { .band { background: #0b0d0a; } }

/* The facts, as cards. */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .facts { grid-template-columns: 1fr; } }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 30px 28px; }
.fact h3 { font-size: 1.3rem; letter-spacing: -0.015em; margin: 0 0 10px; }
.fact p { margin: 0; color: var(--muted); line-height: 1.5; }

/* The close. */
.finale { text-align: center; padding: 60px 22px 150px; }
.finale .icon { width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 19px; }
.finale h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -0.04em; line-height: 1.04; margin: 0 0 10px; }
.finale p { color: var(--muted); font-size: 1.2rem; margin: 0; }

/* What readers have said, under the button, before the first picture: a
   gallery of its own, edge to edge out of the opening's margins. */
.hero .gallery.reviews { margin: 56px -22px 0; padding-bottom: 28px; }
.gallery.reviews > .review-col {
  flex-basis: min(84vw, 420px);
  display: flex; flex-direction: column; gap: 16px;
}
.review-col > .review { flex: 1 1 auto; }
/* A short review on its own: as tall as its words, centred in the column. */
.review-col.lone { justify-content: center; }
.review-col.lone > .review { flex: 0 0 auto; }
/* Centred while they all fit across; from the start once they scroll, when
   the margins come to nothing. */
.gallery.reviews > :first-child { margin-left: auto; }
.gallery.reviews > :last-child { margin-right: auto; }
.paddles[hidden] { display: none; }
.hero .paddles { padding: 0; }
.review {
  margin: 0; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 18px 24px;
  /* A short quote beside a long one: centred in its card, the name still at
     the foot, rather than a gap at the bottom. */
  display: flex; flex-direction: column;
}
.review .stars { color: #e0a800; font-size: 1rem; letter-spacing: 0.12em; padding-left: 0.12em; margin: 0 0 6px; text-align: center; }
.review blockquote { margin: auto 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink); font-style: italic; }
.review blockquote p { margin: 0; }
.review figcaption { margin-top: 8px; color: var(--muted); font-weight: 600; font-size: 0.88rem; text-align: right; }
.review figcaption::before { content: "— "; }
.home-footer {
  max-width: 1160px; margin: 0 auto; padding: 22px 22px 60px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 0.88rem; color: var(--muted);
}
.home-footer p { margin: 0; color: var(--muted); }
.home-footer nav { margin: 0; display: flex; gap: 20px; }

/* Support and Privacy: a heading like the home page's, then a column of text. */
.doc-head { text-align: center; padding: 84px 22px 20px; }
.doc-head h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 18px; }
.doc-head .lede { max-width: 38rem; margin: 0 auto; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.4; color: var(--muted); }
.doc-body { max-width: 46rem; margin: 0 auto; padding: 36px 22px 110px; }
.doc-body h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.025em; line-height: 1.15; margin: 72px 0 16px; }
.doc-body p, .doc-body li { line-height: 1.65; }
.doc-body a { color: var(--leaf); }
.doc-body a:hover { text-decoration: underline; }
.doc-body a.button { color: #fff; margin: 6px 0 18px; }
.doc-body a.button:hover { text-decoration: none; }
@media (prefers-color-scheme: dark) { .doc-body a.button { color: #12150f; } }
.contact { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 40px 28px 32px; text-align: center; }
.contact p { margin: 0; }
.contact .contact-label { color: var(--leaf); font-weight: 600; }
.contact .contact-address { font-size: clamp(1.3rem, 3.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 22px; overflow-wrap: anywhere; }
.questions { border-bottom: 1px solid var(--line); }
details.q { border-top: 1px solid var(--line); }
details.q summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em;
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--leaf); font-size: 1.6rem; font-weight: 400; transition: transform 0.25s ease;
}
details.q[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details.q > p { margin: 0 0 16px; color: var(--ink); }
details.q > p:last-child { margin-bottom: 26px; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 680px) { .summary { grid-template-columns: 1fr; } }
.summary > div { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px 22px; }
.summary h3 { font-size: 1.1rem; letter-spacing: -0.01em; margin: 0 0 6px; }
.summary p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 0.97rem; }

/* Press: the fact sheet and the images to download. */
.facts-list { margin: 0; border-top: 1px solid var(--line); }
.facts-list > div { display: grid; grid-template-columns: 11rem 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 560px) { .facts-list > div { grid-template-columns: 1fr; gap: 2px; } }
.facts-list dt { font-weight: 600; }
.facts-list dd { margin: 0; color: var(--ink); line-height: 1.55; }
.press-icon { display: flex; align-items: center; gap: 22px; }
.press-icon img { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 26px -10px rgba(30, 36, 32, 0.4); }
.press-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.press-grid.phones { grid-template-columns: repeat(3, 1fr); align-items: start; }
.press-grid a { display: block; }
.press-grid img { width: 100%; border-radius: 12px; box-shadow: 0 12px 30px -16px rgba(30, 36, 32, 0.45); transition: transform 0.2s ease; }
.press-grid a:hover img { transform: translateY(-3px); }

/* What appears as it scrolls into view. Without script, or with motion
   reduced, everything is simply there. */
.js .reveal {
  opacity: 0; transform: translateY(56px);
  transition: opacity 1.1s cubic-bezier(0.2, 0.65, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.65, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .statement .w { opacity: 1; }
  .stage img { transform: none !important; }
  .gallery { scroll-behavior: auto; }
}