/* home.css — home page only (index.html), on top of styles.css.
   1 · HERO = the App Store product-page header (orange haze, "PRO FEATURES", six glass pills).
       Owner 2026-11-10: "use the new header prominently on website too". The backdrop is the
       header's own picture without its text (Pexels 8680229 @ 12 s, drawn boom mic, figure lift),
       so the title and pills stay live text here. Source: Lexar
       Captures/ASC-CreativeAssets-10.2-2026-11-09/FINAL-orange-2026-11-10/final.py.
   2 · SCREENSHOTS = the nine 10.2 App Store cards (en-US, gold), in a sideways strip.
   Kept out of styles.css on purpose: pages load styles.css?v=<hash>, and the web-manual
   pre-commit hook rebuilds the manual whenever styles.css changes. */

/* ── 1 · HERO ─────────────────────────────────────────────────────────── */
.hero--header {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(250px, 20vw, 320px) 0 var(--s7);
}
.hero__backdrop img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 0;
}
/* the header's own shade: a light top edge, clear middle, then dark under the text,
   ending in the page colour so the hero runs straight into the strip below */
.hero--header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(10, 10, 12, 0.28) 0%, rgba(10, 10, 12, 0) 14%, rgba(10, 10, 12, 0) 30%,
    rgba(10, 10, 12, 0.70) 46%, rgba(10, 10, 12, 0.90) 62%, var(--bg-top) 92%);
}
.hero__kicker {
  font: 700 13px/1.3 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-text); margin: 0 auto var(--s4);
}
/* SF Pro Expanded where the system font has a width axis (Apple devices); elsewhere the
   wide tracking carries the same look. */
.hero__display {
  font-family: var(--font-sans); font-weight: 500; font-stretch: 150%;
  font-variation-settings: 'wdth' 150;
  font-size: clamp(30px, 6.4vw, 72px); line-height: 1; letter-spacing: 0.15em;
  margin: 0 -0.15em 0 0;   /* the last letter's tracking would push the word off centre */
  text-transform: uppercase; color: #fff;
  text-shadow: 0 6px 36px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.hero__pills {
  list-style: none; margin: clamp(22px, 3vw, 36px) auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; max-width: 780px;
}
.hero__pills li { display: flex; }
.hero__pills a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 14px; border-radius: 16px;
  font: 600 17px/1.2 var(--font-sans); letter-spacing: -0.005em; color: #f4f4f6; white-space: nowrap;
  background: rgba(28, 28, 31, 0.66);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.09),
              0 10px 24px rgba(0, 0, 0, 0.45);
  text-decoration: none; transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.hero__pills a:hover {
  background: rgba(44, 44, 48, 0.78); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px var(--gold-border),
              0 14px 28px rgba(0, 0, 0, 0.5);
}
.hero__pills a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hero__pills svg {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.hero--header .hero__sub { margin-top: clamp(22px, 2.6vw, 30px); max-width: 62ch; }
.hero--header .hero__sub + .hero__sub { margin-top: 0; }
.hero--header .cta-row { margin: clamp(22px, 2.6vw, 30px) 0 0; }

/* phones: the portrait crop of the picture, only as tall as the top of the hero, so the boom
   mic and the figure both stay in frame; it fades into the page under the text */
@media (max-width: 640px) {
  .hero--header { padding-top: 330px; }
  .hero__backdrop img {
    height: 600px; object-position: 50% 0;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .hero--header::before {
    background: linear-gradient(180deg,
      rgba(10, 10, 12, 0.28) 0, rgba(10, 10, 12, 0) 70px, rgba(10, 10, 12, 0) 220px,
      rgba(10, 10, 12, 0.72) 400px, rgba(10, 10, 12, 0.92) 520px, var(--bg-top) 600px);
  }
  .hero__pills { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero__pills a { min-height: 50px; font-size: 15px; gap: 8px; padding: 0 10px; border-radius: 14px; }
  .hero__pills svg { width: 20px; height: 20px; }
}

/* ── 2 · SCREENSHOTS (.appshots — styles.css already has a .shots) ──────────────────────────────────────────────────── */
.appshots { padding: var(--s5) 0 var(--s8); }
.appshots__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.appshots__head .eyebrow { margin: 0; }
.appshots__nav { display: none; gap: var(--s2); }
.js .appshots__nav { display: flex; }
.appshots__nav button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hairline);
}
.appshots__nav button:hover { background: rgba(255, 255, 255, 0.10); }
.appshots__nav button:disabled { opacity: 0.35; cursor: default; }
.appshots__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the strip starts on the container's left edge and scrolls past both page edges */
.appshots__rail {
  --edge: max(var(--s4), calc((100% - var(--maxw)) / 2 + var(--s4)));
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
}
.appshots__rail::-webkit-scrollbar { display: none; }
.appshots__rail:focus-visible { outline: 2px solid var(--gold-border); outline-offset: 4px; }
.appshots__list {
  list-style: none; margin: 0; padding: 0 var(--edge);
  display: flex; gap: 12px; width: max-content;
}
.appshots__list li { flex: none; width: clamp(170px, 24vw, 240px); scroll-snap-align: start; }
.appshots__list img {
  display: block; width: 100%; height: auto; border-radius: clamp(14px, 1.7vw, 22px);
  box-shadow: 0 0 0 1px var(--hairline); background: var(--scope-fill);
}
@media (max-width: 640px) {
  .appshots__list li { width: 58vw; }
}

/* section titles that carry the App Store card's gold feature line under them */
.section__tag {
  font: 700 clamp(16px, 2.2vw, 20px)/1.3 var(--font-sans); color: var(--gold-text);
  margin: calc(-1 * var(--s2)) 0 var(--s4);
}

/* the Pro section's screenshot (was the hero's) sits between its intro and its cards */
.pro-stage { display: flex; justify-content: center; margin-bottom: var(--s7); }

/* ── 3 · PAGE LAYOUT (home only) ──────────────────────────────────────── */
/* five tutorials: three across, the last two centred under them (no orphan) */
@media (min-width: 900px) {
  .tut-grid { grid-template-columns: repeat(6, 1fr); }
  .tut-grid > * { grid-column: span 2; }
  .tut-grid > :nth-child(4) { grid-column: 2 / span 2; }
}
/* eight Pro cards: four across, two full rows */
@media (min-width: 1000px) { .pro-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } }
/* Remote: intro on the left, what you can do on the right */
.remote-split__list { margin-top: var(--s5); }
@media (min-width: 900px) {
  .remote-split { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s8); align-items: start; }
  .remote-split__list { margin-top: 34px; }
}

/* the one-line statement under the header's buttons (owner 2026-11-10) */
.hero__line {
  font: 800 clamp(24px, 3.6vw, 40px)/1.1 var(--font-sans); letter-spacing: -0.025em; color: #fff;
  margin: clamp(30px, 3.6vw, 44px) auto var(--s3); text-wrap: balance;
}