/* ============================================================
   fieldpix.org — homepage layout (index.html)
   AI first: the film is the hero, the three AI features come next, then
   the rest of the job. Loads after styles.css and film.css and reuses
   their tokens and components.
   ============================================================ */

/* ---------- Hero: the headline beside the film ---------- */
.hero-b { padding: clamp(96px, 8.5vw, 128px) 0 clamp(44px, 5vw, 72px); }
.hero-b-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-b-copy { max-width: 640px; }
.hero-b h1 { font-size: clamp(36px, 4.1vw, 60px); margin-top: 18px; }   /* each sentence on its own line */
.hero-b h1 em { display: block; }
.hero-b .hero-sub { margin: 22px 0 0; max-width: 560px; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.45; }
.hero-b .hero-actions { justify-content: flex-start; margin-top: 32px; }
.hero-b .hero-note { justify-content: flex-start; margin-top: 18px; }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 18px; }
.hero-stores { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; color: var(--on-band-muted); letter-spacing: 0; }
.store-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(245, 245, 247, 0.24); background: rgba(255, 255, 255, 0.04);
  color: var(--on-band); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
a.store-pill:hover { border-color: var(--on-band); background: rgba(255, 255, 255, 0.08); }
.store-pill .icon { width: 15px; height: 15px; }
.store-pill.is-soon { border-style: dashed; color: var(--on-band-muted); font-weight: 500; }
@media (pointer: coarse) { .store-pill { min-height: 44px; } }
/* The official store badges (Apple's and Google's artwork, unaltered; the
   Google one is trimmed to its edge so both sit at the same height). */

/* The stage: phone on the right, a glass "now showing" card at its shoulder. */
.hero-b-stage { display: grid; grid-template-columns: auto auto; grid-template-areas: "now phone" ". controls"; align-items: center; justify-content: end; gap: 18px 0; }
.hero-b-stage .film-phone { grid-area: phone; --fw: clamp(230px, calc((100vh - 236px) * 0.46), 300px); }
@supports (height: 100svh) { .hero-b-stage .film-phone { --fw: clamp(230px, calc((100svh - 236px) * 0.46), 300px); } }
.hero-b-stage .film-controls { grid-area: controls; }

/* Chapters, compact: six segments and the current step's caption. Built on
   film.css's chapter list, which film.js drives. */
.film-chapters--compact {
  grid-area: now; align-self: end; position: relative; z-index: 2;
  width: 236px; margin: 0 -16px 22% 0; padding: 10px 16px 134px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px;
  border: 1px solid rgba(245, 245, 247, 0.14); border-radius: 22px;
  background: rgba(20, 30, 52, 0.72); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.7);
}
.film-chapters--compact .film-ch { position: static; display: flex; align-items: center; height: 30px; padding: 0; border-radius: 6px; background: transparent; }
.film-chapters--compact .film-ch-bar { position: relative; flex: 1; left: auto; top: auto; bottom: auto; width: auto; height: 4px; background: rgba(245, 245, 247, 0.36); }
.film-chapters--compact .film-ch-bar i { transform: scaleX(var(--p, 0)); }
.film-chapters--compact .film-ch-time { display: none; }
.film-chapters--compact .film-ch-text, .film-chapters--compact .film-end {
  position: absolute; left: 16px; right: 16px; top: 46px; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.film-chapters--compact .film-end { display: block; }
.film-chapters--compact .film-ch.is-active .film-ch-text, .film-chapters--compact.is-ended .film-end { opacity: 1; transform: none; }
.film-chapters--compact .film-ch-text b, .film-chapters--compact .film-end b { display: block; font: 700 20px/1.15 var(--display); letter-spacing: -0.01em; color: #fff; }
.film-chapters--compact .film-ch-text small, .film-chapters--compact .film-ch.is-active .film-ch-text small, .film-chapters--compact .film-end small {
  display: block; margin-top: 5px; font-size: 14px; line-height: 1.4; letter-spacing: 0; color: var(--on-band-muted);
}
@media (pointer: coarse) and (min-width: 981px) {   /* touch laptops and tablets: full-size targets */
  .film-chapters--compact { padding-bottom: 134px; }
  .film-chapters--compact .film-ch { height: 44px; }
  .film-chapters--compact .film-ch-text, .film-chapters--compact .film-end { top: 60px; }
}
@media (prefers-reduced-transparency: reduce) {
  .film-chapters--compact { background: #17233B; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Wide screens: the card hangs off the phone instead of taking a column, which
   leaves the headline room to set each sentence on its own line. */
@media (min-width: 1240px) {
  .hero-b-copy { max-width: 664px; }
  .hero-b .hero-note { max-width: 540px; }
  .hero-b h1 { font-size: clamp(52px, 4.2vw, 60px); }
  .hero-b-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .film-chapters--compact { position: absolute; right: calc(100% - 16px); bottom: 22%; margin: 0; }
}

/* ---------- Hero: footage behind the headline ----------
   A muted loop of roofing and solar crews under a navy wash; the film on the
   phone stays the focal point. The section's own gradient remains the base:
   without scripts, or if the file never arrives, the hero looks as it did.
   --hero-dim is the wash (tune 0.70–0.85; never below 0.70, or the muted text
   drops under 4.5:1 on the brightest frame: measured 4.70:1 at 0.70, 4.94:1 at 0.72). hero-bg.js adds .is-playing once
   frames render, which fades the video in over the still. */
.hero-b { isolation: isolate; --hero-dim: 0.72; --hero-rgb: 11, 19, 34; padding-bottom: clamp(72px, 5vw, 80px); }   /* --band; the padding keeps the toggle's corner clear of the film controls */
@media (prefers-color-scheme: dark) { .hero-b { --hero-rgb: 17, 19, 24; } }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-bg-poster, .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hero-bg-poster { z-index: 1; }
.hero-bg-video { z-index: 2; opacity: 0; transition: opacity .45s var(--ease); }
.hero-bg.is-playing .hero-bg-video { opacity: 1; }
.hero-bg::after {   /* the wash: solid under the nav and against the specs band, the brand's two glows, then navy */
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(180deg, rgba(var(--hero-rgb), 0.55) 0, rgba(var(--hero-rgb), 0) 180px),
    linear-gradient(180deg, rgba(var(--hero-rgb), 0) calc(100% - 200px), rgb(var(--hero-rgb)) 100%),
    radial-gradient(900px 520px at 85% 8%, rgba(31, 95, 209, 0.22), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(242, 181, 68, 0.08), transparent 60%),
    rgba(var(--hero-rgb), var(--hero-dim));
}
.hero-bg-toggle { position: absolute; right: var(--gutter); bottom: 14px; z-index: 3; opacity: 0.72; transition: opacity .2s, transform .15s var(--ease), background-color .2s, border-color .2s; }   /* a quiet corner control, unlike the film's buttons */
.hero-bg-toggle:hover, .hero-bg-toggle:focus-visible { opacity: 1; }
.hero-bg-toggle[hidden] { display: none; }   /* .film-btn's inline-flex would otherwise beat [hidden] */
.no-js .hero-bg, .no-js .hero-bg-toggle { display: none; }
@media (max-width: 980px) {
  .hero-b { padding-bottom: calc(clamp(44px, 5vw, 72px) + 40px); }   /* room for the toggle under the centred film controls */
  .hero-bg-toggle { right: 14px; bottom: 14px; }
}
@media (prefers-contrast: more), (forced-colors: active) {
  .hero-bg, .hero-bg-toggle { display: none; }   /* plain navy; forced colors would drop the wash and leave raw footage */
}

/* ---------- Trades ---------- */
.trades { border-top: 1px solid var(--band-line); padding: 16px 0 18px; font-size: 15px; color: var(--on-band-muted); letter-spacing: 0; }
.trades .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.trades b { margin-right: 6px; color: #fff; font-weight: 600; }
.trades span { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.trades a { color: #fff; text-decoration: none; }
.trades a:hover { text-decoration: underline; }

/* ---------- AI section ---------- */
.ai-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--stamp-ink); letter-spacing: -0.005em; }
.ai-kicker .icon { width: 18px; height: 18px; }
.ai-demo, .ai-card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: clamp(22px, 3.2vw, 44px); }
.ai-demo-head h3, .ai-card h3 { margin-top: 8px; font-size: clamp(28px, 3.1vw, 40px); }
.ai-demo-head p, .ai-card > p { margin-top: 12px; max-width: 680px; font-size: 18px; line-height: 1.5; color: var(--muted); letter-spacing: 0; }

/* Said on the roof -> written by FieldPix: each spoken line sits over the
   section it became. */
.ai-flow { margin-top: 28px; }
.ai-legend { margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ai-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ai-legend .icon { width: 16px; height: 16px; color: var(--faint); }
.ai-key { width: 12px; height: 12px; border-radius: 4px; }
.ai-key.said { background: var(--band-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ai-key.wrote { background: var(--stamp); }
.ai-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ai-col { display: flex; flex-direction: column; }
.ai-said { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--band); }
.ai-said > img { position: absolute; inset: 0; }
.ai-said .cam-pill { position: absolute; left: 10px; top: 10px; z-index: 1; font-size: 12px; }
.ai-said figcaption {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1;
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: rgba(10, 14, 25, 0.74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; font-size: 15px; line-height: 1.35; letter-spacing: 0;
}
.ai-said q { quotes: "\201C" "\201D"; }
.mini-wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.mini-wave i { width: 3px; border-radius: 2px; background: var(--stamp); }
.ai-link { position: relative; z-index: 1; align-self: center; width: 34px; height: 34px; margin: -9px 0; border-radius: 50%; display: grid; place-items: center; background: var(--stamp); color: var(--on-action); box-shadow: 0 0 0 4px var(--surface); }
.ai-link .icon { width: 17px; height: 17px; }
.ai-wrote { flex: 1; display: flex; flex-direction: column; padding: 22px 16px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); font-size: 14px; letter-spacing: 0; }
.ai-wrote h4, .ai-rest h4 { margin: 0 0 6px; font: 700 18px/1.2 var(--display); letter-spacing: -0.01em; }
.ai-wrote ul { list-style: disc; padding-left: 17px; color: var(--muted); line-height: 1.5; }
.ai-filed { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--mono); color: var(--faint); }
.ai-filed img { width: 44px; height: 33px; border-radius: 6px; }
.ai-filed em { font-style: normal; }
.ai-rest { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px 32px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); font-size: 14px; letter-spacing: 0; }
.ai-rest p { color: var(--muted); line-height: 1.55; }
.ai-rest .todo { font-size: 14px; padding: 4px 0; }
/* The written half arrives after the spoken half, column by column. */
.ai-col .ai-link, .ai-col .ai-wrote { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ai-col.in .ai-link, .ai-col.in .ai-wrote, .no-js .ai-col .ai-link, .no-js .ai-col .ai-wrote { opacity: 1; transform: none; }
.ai-col.in .ai-link { transition-delay: .45s; }
.ai-col.in .ai-wrote { transition-delay: .6s; }
.ai-col:nth-child(2).in .ai-link { transition-delay: .7s; }
.ai-col:nth-child(2).in .ai-wrote { transition-delay: .85s; }
.ai-col:nth-child(3).in .ai-link { transition-delay: .95s; }
.ai-col:nth-child(3).in .ai-wrote { transition-delay: 1.1s; }
.ai-points { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.ai-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; letter-spacing: 0; }
.ai-points .icon { margin-top: 2px; color: var(--green-ink); }

.ai-pair { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ai-card { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 36px); }
.ai-card h3 { font-size: clamp(26px, 2.5vw, 32px); }
.ai-card > p { font-size: 17px; margin-bottom: 24px; }

/* One card left in the pair (video notes are switched off for now): the
   words on the left, the sample document beside them, so the card fills the
   row instead of leaving half of it empty. Stacks again under 900px. */
.ai-pair--solo { grid-template-columns: minmax(0, 1fr); }
.ai-pair--solo .ai-card { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(24px, 4vw, 56px); }
.ai-pair--solo .ai-card > :not(.ad) { grid-column: 1; }
.ai-pair--solo .ai-kicker { justify-self: start; }
.ai-pair--solo .ad { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }

/* AI documents: pick a kind, see a sample */
.ad { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); letter-spacing: 0; }
.ad-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-tab {
  min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s; touch-action: manipulation;
}
.ad-tab:hover { border-color: var(--text); color: var(--text); }
.ad-tab[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
@media (pointer: coarse) { .ad-tab { min-height: 44px; } }
.ad-panel { min-height: 228px; padding: 14px 16px 16px; border-radius: 14px; background: var(--surface); font-size: 13.5px; }
.ad-panel[hidden] { display: none; }
.no-js .ad-tabs { display: none; }   /* without scripts: every sample, one after another */
.no-js .ad-panel[hidden] { display: block; }
.no-js .ad-panel { min-height: 0; }
.ad-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stamp-ink); }
.ad-panel h4 { margin-top: 4px; font-size: 20px; }
.ad-sum { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--stamp-soft); line-height: 1.5; }
.ad-panel h5 { margin: 12px 0 4px; font: 700 15px/1.25 var(--display); letter-spacing: -0.01em; }
.ad-panel ul { list-style: disc; padding-left: 17px; color: var(--muted); line-height: 1.55; }
.ad-panel .todo { font-size: 13.5px; }
.ad-focus { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 13.5px; color: var(--muted); }
.ad-focus b { font-weight: 600; color: var(--text); }
.ad-focus span { font-style: italic; }
.ad-foot { font: 500 12px/1.4 var(--mono); color: var(--faint); }

.ai-tools { margin-top: 16px; padding: 22px clamp(22px, 2.6vw, 36px); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 3.1fr); gap: 16px 28px; align-items: center; }
.ai-tools > b { font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; }
.ai-tools ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; }
.ai-tools li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--muted); letter-spacing: 0; }
.ai-tools li .icon { margin-top: 1px; color: var(--stamp-ink); }
.ai-tools strong { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.ai .walk-facts { margin-top: 32px; }

.inline-cta { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; text-align: center; }
.inline-cta span { font-size: 15px; color: var(--muted); letter-spacing: 0; }

/* ---------- Photo proof ---------- */
.proof { background: var(--surface); }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4.5vw, 72px); align-items: center; }
.proof-grid .tile { min-height: clamp(380px, 36vw, 500px); }
.proof-grid .tile:hover { transform: none; box-shadow: var(--shadow-sm); }
.proof-grid .tile::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); }
.proof-grid .t-photo > .burn { font-size: clamp(12px, 1.15vw, 14px); }
.burn-note { position: absolute; left: 20px; top: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.burn-note::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--stamp); }
.proof-copy h2 { font-size: clamp(36px, 4.6vw, 52px); }
.proof-copy > p { margin-top: 18px; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.45; color: var(--muted); }
.proof-copy .checks { margin-top: 22px; }
.strip-label { margin: clamp(40px, 5vw, 64px) 0 16px; font-size: 17px; color: var(--muted); }
.strip-label b { color: var(--text); font-weight: 600; }

/* ---------- Pricing: what both plans include ---------- */
.plans-all { max-width: 720px; margin: 28px auto 0; text-align: center; color: var(--muted); font-size: 15px; letter-spacing: 0; }
.plans-all b { color: var(--text); font-weight: 600; }
.plans-anchor { margin: 28px auto 0; max-width: 720px; text-align: center; font: 600 19px/1.4 var(--sans); color: var(--text); letter-spacing: -0.01em; }
.plans-anchor + .plans-note { margin-top: 12px; }
.included-all { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }
.included-all h3 { margin-bottom: 40px; text-align: center; font-size: clamp(28px, 3.2vw, 38px); }
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 32px; }
.included-also { margin: 40px auto 0; max-width: 720px; text-align: center; font-size: 15px; color: var(--muted); letter-spacing: 0; }

/* ---------- Final CTA: what starting takes ---------- */
.start-steps { margin: 22px auto 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; counter-reset: step; font-size: 16px; color: #D9DFEA; letter-spacing: 0; }
.start-steps li { display: inline-flex; align-items: center; gap: 10px; counter-increment: step; }
.start-steps li::before { content: counter(step); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(242, 181, 68, 0.2); color: var(--stamp); font: 700 14px/1 var(--rounded); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1080px) {
  .ai-tools { grid-template-columns: minmax(0, 1fr); }
  .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  /* Hero stacks: headline and button first, then the film with its caption above the phone. */
  .hero-b-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; text-align: center; }
  .hero-b .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-b .hero-actions, .hero-b .hero-note, .hero-stores { justify-content: center; }
  .hero-b-stage { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; }
  .hero-b-stage .film-phone { --fw: clamp(200px, min(62vw, calc((100vh - 290px) * 0.46)), 280px); }
  @supports (height: 100svh) { .hero-b-stage .film-phone { --fw: clamp(200px, min(62vw, calc((100svh - 290px) * 0.46)), 280px); } }
  .hero-b-stage .film-controls { margin-top: 20px; }
  .film-chapters--compact {
    order: -1; align-self: auto; width: 100%; max-width: 440px; margin: 0; padding: 0 0 120px; gap: 5px;
    border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .film-chapters--compact .film-ch { height: 44px; }
  .film-chapters--compact .film-ch-text, .film-chapters--compact .film-end { left: 0; right: 0; top: 50px; text-align: center; }
  .film-chapters--compact .film-ch-text b, .film-chapters--compact .film-end b { font-size: clamp(21px, 6.2vw, 24px); }
  .film-chapters--compact .film-ch-text small, .film-chapters--compact .film-ch.is-active .film-ch-text small, .film-chapters--compact .film-end small { margin-top: 6px; font-size: 16px; text-wrap: balance; }
  @media (prefers-reduced-transparency: reduce) { .film-chapters--compact { background: none; } }
}
@media (max-width: 900px) {
  /* Each spoken line beside the section it became */
  .ai-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ai-col { flex-direction: row; align-items: stretch; }
  .ai-said { flex: 0 0 46%; aspect-ratio: auto; min-height: 200px; }
  .ai-link { margin: 0 -9px; }
  .ai-wrote { padding: 16px 16px 14px 24px; }
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-points { grid-template-columns: minmax(0, 1fr); }
  .ai-pair { grid-template-columns: minmax(0, 1fr); }
  .ai-pair--solo .ai-card { display: flex; }
  .ai-pair--solo .ad { margin-top: 0; }
  .ai-tools ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .proof-grid .tile { order: 2; min-height: 420px; }
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero-b h1 { font-size: clamp(30px, 9vw, 44px); }   /* two lines on iPhones, in New York */
  .hero-b .btn-lg { width: 100%; }
  .hero-b .hero-note { gap: 4px 16px; }
  .hero-stores > span:first-child { display: none; }
  /* At a glance, tighter: titles only, and the trades as one line of text */
  .specs .spec { padding: 18px 14px; }
  .specs .spec span { display: none; }
  .specs .spec .icon { margin-bottom: 8px; }
  .trades { padding: 14px 0 16px; font-size: 14px; line-height: 1.7; }
  .trades .wrap { display: block; text-align: center; }
  .trades b { margin-right: 4px; }
  .trades span { display: inline-block; margin-right: 8px; padding: 0; background: none; }
  .trades span:not(:last-child)::after { content: "\00B7"; margin: 0 0 0 10px; color: #8A96AB; }
  .ai-demo, .ai-card { padding: 20px 16px; border-radius: 22px; }
  /* Phones: the line on top, its section underneath; two pairs are enough */
  .ai-cols { gap: 20px; }
  .ai-col { flex-direction: column; }
  .ai-said { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .ai-link { margin: -9px 0; }
  .ai-wrote { padding: 22px 16px 14px; }
  .ai-col:nth-child(3) { display: none; }
  .ai-rest { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .ai-tools { padding: 20px 16px; }
  .ai-tools ul { grid-template-columns: minmax(0, 1fr); }
  /* What's included, as a compact two-column list of names */
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .more-grid .pf { grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; }
  .more-grid .pf > .tile-icon { width: 32px; height: 32px; border-radius: 9px; grid-row: auto; }
  .more-grid .pf > .tile-icon .icon { width: 17px; height: 17px; }
  .more-grid .pf b { font-size: 15px; line-height: 1.25; }
  .more-grid .pf > span:not(.tile-icon) { display: none; }
  .included-all { margin-top: 48px; padding-top: 40px; }
  .included-all h3 { margin-bottom: 28px; }
  .start-steps { flex-direction: column; align-items: center; }
}

@media (prefers-contrast: more) {
  .film-chapters--compact .film-ch-bar { background: rgba(245, 245, 247, 0.55); }
  .store-pill { border-color: rgba(245, 245, 247, 0.6); }
}

/* Pricing: Monthly / Yearly switch (yearly first). Without JS the yearly
   prices show, matching the switch's starting state. */
.period-switch { display: flex; width: max-content; max-width: 100%; margin: 0 auto 28px; padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.period-switch button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 15px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.period-switch button[aria-checked="true"] { background: var(--text); color: var(--surface); }
.period-switch .save { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: var(--stamp); color: #0B1322; }
#pricing[data-period="week"] [data-period]:not([data-period="week"]), #pricing[data-period="month"] [data-period]:not([data-period="month"]), #pricing[data-period="year"] [data-period]:not([data-period="year"]) { display: none; }
.price-note { margin-top: -10px; color: var(--muted); font-size: 15px; }
.plan.featured .price-note { color: var(--on-band-muted); }
/* Three choices have to fit a phone: tighter buttons under 560px, tighter still
   under 400px (360px Androids), and the badge never wraps. */
@media (max-width: 560px) { .period-switch button { padding: 0 12px; font-size: 14px; } .period-switch .save { font-size: 11px; padding: 3px 7px; white-space: nowrap; } }
@media (max-width: 400px) { .period-switch button { padding: 0 9px; font-size: 13px; gap: 6px; } .period-switch .save { font-size: 10.5px; padding: 3px 6px; } }
@media (max-width: 340px) { .period-switch .save { display: none; } }

/* Real app screenshots inside the phone frames (img/app, from the 1.3 design). */
.phone-screen > .shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pay-phone { flex-direction: column; align-items: center; gap: 14px; }
.pay-phone-cap { margin: 0; font-size: 14px; color: var(--on-band-muted); text-align: center; }