/* ==========================================================================
   Osevaro home page (Phase 1 mockup). Page-only layout on top of
   ds/osevaro.css. Rules kept: text never on paint or photos, one shell
   width, DS buttons and tags only, nothing under 13px, no transform /
   opacity / filter / z-index on any .wash wrapper.
   Everything the DS now owns (.pick, .framed__crop, .trust-strip, .door
   parts, .jcard, .footer__help, .ph) is no longer copied here.
   Round 2: the app home (phones and the installed app) is the last part of
   this file, scoped to html[data-shell="app"]; nothing above it changed.
   ========================================================================== */

:root {
  --trust-pet-w: 64px;      /* dog sitting ON the middle of the trust strip's top edge (187 x 320) */
  --faq-pet-w: 120px;       /* kitten with yarn lying ON the FAQ help card's top edge (320 x 260) */
  --story-pet-w: 96px;      /* rich only: guinea pig perched on the story photo (294 x 320) */
  --launch-pet-w: 64px;     /* frenchie sitting on the Notify me button (170 x 320) */
  --launch-cat-w: 80px;     /* rich only: window cat on the band's top edge (203 x 320, sill at 66%) */
  --launch-pet-inset: calc(50% - var(--launch-pet-w) / 2);   /* centred on the button */
  /* how far each perched pet rises above its edge: height x (1 - sink) - the 4px it rests on the edge */
  --trust-pet-up: calc(var(--trust-pet-w) * 1.711 * .978 - 4px);
  --faq-pet-up: calc(var(--faq-pet-w) * .8125 * .965 - 4px);
}
@media (max-width: 599.98px) {
  :root { --trust-pet-w: 56px; --faq-pet-w: 104px; --story-pet-w: 80px; --launch-pet-w: 48px; --launch-cat-w: 62px; }
}

/* --------------------------------------------------------------------------
   1. Hero slider (one button per slide, dots only)
   -------------------------------------------------------------------------- */
.hero { padding-top: clamp(12px, 2.2vw, 36px); padding-bottom: clamp(28px, 3.4vw, 48px); }
.hero__title { max-width: 15ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }

/* 600-899px (iPad portrait): the DS stacks the slide under 900px, which pushed
   the button under the tab bar at 768 x 1024. Keep photo and copy side by side. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero .hero-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .hero .hero-slide__copy { gap: 14px; padding-block: 4px; }
  .hero__title { max-width: none; }
}
@media (max-width: 599.98px) {
  .hero .hero-slide__copy { gap: 12px; padding-block: 4px 8px; }
  .hero-actions > .btn { width: 100%; }
  .hero .slider__bar { margin-top: 10px; }
}

/* --------------------------------------------------------------------------
   2. The three products
   -------------------------------------------------------------------------- */
/* 700-1179px is a 3-column grid, so the "See all three" door would sit alone
   on a second row: give it the full row and lay it out sideways. */
@media (min-width: 700px) and (max-width: 1179.98px) {
  .home-products .grid--products > li:last-child { grid-column: 1 / -1; }
  .home-products .door { flex-direction: row; align-items: center; min-height: 0; padding: 20px 24px; }
  .home-products .door__text { max-width: 52ch; }
}
@media (max-width: 599.98px) {
  .home-products .door { padding: 16px; }
  .home-products .door__title { font-size: 21px; }
  .home-products .door__arrow { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   3. Trust strip (DS .trust-strip). App fix round: the dog SITS on the top
   edge in front of the strip (perch, front file, contact shadow), no longer
   peeking from behind it. The space above the strip (the products section's
   bottom padding, plus this margin) holds all of him with 14px to spare.
   -------------------------------------------------------------------------- */
.trust__host { margin-top: max(0px, calc(var(--trust-pet-up) + 14px - var(--section))); }

/* --------------------------------------------------------------------------
   4. Pet moment: three pets in their painted blobs (DS category art), each a
   shortcut straight to its product. No card behind them, so the section
   breaks the run of white cards. The pet bobs on hover.
   -------------------------------------------------------------------------- */
.pals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(20px, 3vw, 56px); align-items: center; }
.pals__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pals__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 32px); }
.pal {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 6px 6px 10px; border-radius: var(--r-tile);
  color: var(--ink); text-decoration: none; text-align: center;
}
.pal__art { width: min(100%, 260px); }
.pal__words { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pal__name {
  font-family: var(--font-display); font-weight: 600; font-variation-settings: 'SOFT' 50;
  font-size: clamp(20px, .4vw + 16px, 24px); line-height: 1.2;
}
.pal__text { font-size: 15px; line-height: 1.45; color: var(--ink-soft); max-width: 24ch; }
.pal__go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 15px; font-weight: 650;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) { .pal:hover .pal__name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } }
html.motion-ok .pal:is(:focus-visible) .ctile__pet { transform: translateY(-2px) rotate(-1.5deg); }
@media (hover: hover) and (pointer: fine) { html.motion-ok .pal:hover .ctile__pet { transform: translateY(-2px) rotate(-1.5deg); } }
@media (max-width: 1099.98px) {
  .pals { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
  .pals__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pals__list > li + li { border-top: 1px solid var(--line); }
  .pal { flex-direction: row; align-items: center; gap: 14px; padding: 10px 0; text-align: left; border-radius: 0; }
  .pal__art { width: 124px; flex: none; }
  .pal__words { align-items: flex-start; }
  .pal__name { font-size: 20px; }
  .pal__go { margin-top: 2px; }
}

/* --------------------------------------------------------------------------
   5. Story band
   -------------------------------------------------------------------------- */
.story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.story__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.story__copy > .btn { margin-top: 8px; }
.story__photo { position: relative; width: 100%; max-width: 440px; justify-self: center; }
.story__photo .framed__photo { aspect-ratio: 4 / 5; object-position: 50% 55%; }
/* rich: room above the photo for the guinea pig sitting on its top edge (all of it shows) */
html[data-wash="rich"] .story__photo { margin-top: calc(var(--story-pet-w) * 1.088 * .972 + 4px); }
@media (max-width: 899.98px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__photo { max-width: 420px; }
}

/* --------------------------------------------------------------------------
   6. Launch list: a flat sage band (flat colour is allowed; no texture behind
   the words) with the email field inline. Round 2 (owner): the lavender
   frenchie SITS ON the "Notify me" button: paws 4px onto its top edge, a
   contact shadow under them, the opaque front file in light mode, and
   pointer-events none (DS .pet), so the button stays fully clickable.
   The notify box moves down by the part of the frenchie that rises above the
   form, so it never reaches the band's edge or any words. The app (A6 below)
   keeps him centred on the button with a row of room above it; the rules
   for 420px and down here are the no-script fallback only.
   -------------------------------------------------------------------------- */
.section.launch-sec { padding-top: 24px; }
/* rich: room above the band for the window cat (sill on the edge, 66% above it) */
html[data-wash="rich"] .section.launch-sec { padding-top: max(24px, calc(var(--launch-cat-w) * 1.576 * .66 + 20px - var(--section))); }
.launch {
  --launch-form-pad: clamp(16px, 1.6vw, 22px);
  --launch-pet-h: calc(var(--launch-pet-w) * 1.882 * .978 - 4px);   /* frenchie height above the button's top edge */
  --launch-btn-top: calc(var(--launch-form-pad) + 29px);            /* form top to button top: the label row */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 4.4vw, 80px);
  padding: clamp(28px, 3.4vw, 52px) clamp(20px, 4vw, 64px);
  border-radius: var(--r-card);
  background: var(--sage-tint); color: var(--ink-fixed);
}
/* rich: the window cat's tail hangs in front of the band's top edge */
html[data-wash="rich"] .launch { padding-top: max(clamp(28px, 3.4vw, 52px), calc(var(--launch-cat-w) * 1.576 * .34 + 18px)); }
html[data-theme="dark"] .launch { background: #1d3b35; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
html[data-order="open"] .launch { grid-template-columns: minmax(0, 1fr); }
.launch__copy, .launch__state { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.launch__state .lead { max-width: 40ch; }
.launch__perk { display: flex; align-items: center; gap: 14px; margin-top: 4px; font-size: 16px; line-height: 1.5; }
.launch__perk .wash-icon { --wash-size: 48px; }
.launch__perk .wash-icon > .ic { --ic-size: 20px; }
.launch__notify { width: 100%; max-width: 520px; justify-self: end; margin-top: max(0px, calc(var(--launch-pet-h) - var(--launch-btn-top) + 10px)); }
.launch__notify .notify__form { padding: var(--launch-form-pad); border-color: transparent; box-shadow: var(--shadow); }
.launch__btn { position: relative; display: flex; flex: none; }
.launch__btn > .btn { flex: 1 1 auto; }
.launch__notify .notify__done { background: var(--card); color: var(--ink); }
@media (max-width: 899.98px) {
  .launch { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .launch__notify { justify-self: stretch; max-width: none; }
}
@media (max-width: 599.98px) {
  .launch { --launch-form-pad: 14px; padding-inline: 16px; padding-bottom: 16px; }
  .launch__perk { align-items: flex-start; font-size: 15px; gap: 12px; }
  .launch__perk .wash-icon { --wash-size: 44px; }
}
/* phones: the DS stacks the button under the field (420px and down) */
@media (max-width: 420px) {
  .launch { --launch-btn-top: calc(var(--launch-form-pad) + 29px + 52px + 8px); }
  .launch__pet { --pet-inset: 10px !important; }
  .launch__notify .notify__row > .input { margin-inline-end: calc(var(--launch-pet-w) + 18px); width: auto; }
}
/* very narrow phones (320): a smaller frenchie so the whole placeholder still fits */
@media (max-width: 359.98px) {
  :root { --launch-pet-w: 40px; }
  .launch__pet { --pet-inset: 6px !important; }
  .launch__notify .notify__row > .input { padding-inline: 12px; margin-inline-end: calc(var(--launch-pet-w) + 14px); }
}

/* --------------------------------------------------------------------------
   7. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.faq__aside { display: flex; flex-direction: column; }
.faq__aside .sec-head { margin-bottom: 0; }
/* the help card: the kitten lies ON its top edge at the end (perch, in front), with room above for all of it */
.faq__ask { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: calc(var(--faq-pet-up) + 18px); padding: clamp(20px, 2vw, 28px); }
.faq__ask-text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 40ch; }
.faq__ask .btn { margin-top: 4px; }
.faq__list { border-top: 1px solid var(--line); }
.faq__list .acc__panel p + p { margin-top: .85em; }
@media (max-width: 899.98px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq__aside { display: contents; }
  .faq__aside .sec-head { order: 1; }
  .faq__list { order: 2; }
  .faq__ask { order: 3; margin-top: calc(var(--faq-pet-up) + 14px); }
}
@media (max-width: 599.98px) {
  .faq__list .acc__item > summary { font-size: 17px; }
}

/* Dark mode: the pets' blobs sit on their paper plates straight on the page
   (no panel behind them, so the strip still reads as "no card"). */
html[data-theme="dark"] .pal__art { background: transparent; }

/* ==========================================================================
   The app (round 2, APP-SPEC 10.1): phones and the installed app.
   ds/app.js sets html[data-shell="app"] before first paint (under 768px,
   installed under 1024px, or ?frame=); every rule below is scoped to it, so
   the approved website layout is unchanged at every width. The app bar,
   docked tabs, sheets, search, compact cards, end cap and install card come
   from ds/app.css; this part only lays out the home screen:
     search field > category chips > notice row (closed) > hero cards you
     swipe > product rail > trust 2x2 > pet picker > story > launch card
     (frenchie on Notify me) > end cap. The FAQ and its help card are
     website only (app fix round): in the app they live on Account > Help.
   ========================================================================== */
html:not([data-shell="app"]) .home-app-only { display: none !important; }
html[data-shell="app"] .home-site-only { display: none !important; }

/* the install card sits over the end of the page while it shows: keep the
   last line and the last link above it (APP-SPEC A3) */
html[data-shell="app"] body { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 24px + var(--install-h, 0px)); }

/* App bar: logo and Search only (no basket icon on Home: the Basket tab is one
   thumb away). The Search icon steps in once the search field has gone under
   the bar: ds/app.js does it from [data-search-field] + .appbar__search. */

/* rhythm: app sections sit closer than the website's 96px */
html[data-shell="app"] main > .section { padding-bottom: 40px; }
html[data-shell="app"] .sec-head { gap: 8px; margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   A0. Search field, category chips, notice row
   -------------------------------------------------------------------------- */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 6px; }
.home-search { min-height: 48px; border-radius: 14px; }
.home-search__hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .home-search:hover { border-color: var(--ink); } }
html.motion-ok[data-shell="app"] .home-search:active { background: var(--linen); }
.home-chips { padding-block: 2px; }
.home-chips__all { font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; padding-left: 12px; }
.home-chips__all .ic { --ic-size: 18px; color: var(--ink-soft); }
.home-notice { margin-top: 4px; padding-inline: 14px 10px; }
.home-notice > span:nth-child(2) { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   A1. Hero cards: the round-1 slides as cards you swipe. The next card
   peeks at the edge; a rounded photo with no frame, then the words below it
   (never on it). Dots under them; never moves by itself.
   -------------------------------------------------------------------------- */
html[data-shell="app"] main > .section.hero { padding-top: 18px; padding-bottom: 20px; }
html[data-shell="app"] .hero .slider__track {
  --rail-g: max(var(--gutter), var(--safe-x));
  grid-auto-columns: min(86%, 440px); gap: 12px;
  padding-inline: var(--rail-g); margin-inline: calc(-1 * var(--rail-g));
  scroll-padding-inline: var(--rail-g);
  border-radius: 0;
}
html[data-shell="app"] .hero .hero-slide { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 0 6px; }
html[data-shell="app"] .hero .hero-slide .framed__photo { aspect-ratio: 5 / 4; }
html[data-shell="app"] .hero .hero-slide__copy { gap: 8px; padding: 0 2px; }
html[data-shell="app"] .hero__title { max-width: none; font-size: 28px; line-height: 1.12; }
.hero-slide__line { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
html[data-shell="app"] .hero-actions { width: 100%; margin-top: 6px; }
html[data-shell="app"] .hero-actions > .btn { width: 100%; }
html[data-shell="app"] .hero .slider__bar { justify-content: center; margin-top: 4px; }
html[data-shell="app"] .hero .slider__dots { margin-left: 0; }
/* a peeking card shows its photo only; its words arrive as it settles */
html[data-shell="app"] .hero .slide[aria-hidden="true"] .hero-slide__copy { opacity: 0; }
html.motion-ok[data-shell="app"] .hero .hero-slide__copy { transition: opacity 220ms var(--ease); }
/* wider app screens (a phone held sideways, a small tablet with the app
   installed): photo and words side by side in each card */
@media (min-width: 600px) {
  html[data-shell="app"] .hero .slider__track { grid-auto-columns: min(88%, 760px); }
  html[data-shell="app"] .hero .hero-slide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 20px; }
  html[data-shell="app"] .hero .hero-slide .framed__photo { aspect-ratio: 4 / 3; }
}

/* Loading skeleton for the hero (Loading control / ?load=skeleton) */
.home-skel-hero__img { aspect-ratio: 4 / 3; border-radius: var(--r-tile); }
.home-skel-hero__copy { gap: 12px; }
.home-skel-hero__btn { width: 60%; height: 52px; border-radius: var(--r-btn); margin-top: 6px; }
html[data-shell="app"] .home-skel-hero { width: min(86%, 440px); }
html[data-shell="app"] .home-skel-hero .hero-slide { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 0 50px; }
html[data-shell="app"] .home-skel-hero__img { aspect-ratio: 5 / 4; }
html[data-shell="app"] .home-skel-hero__btn { width: 100%; }

/* --------------------------------------------------------------------------
   A2. "In the shop now": a product rail that snaps, the next card peeking,
   ending in the "See all three" door with the resting dachshund. Cards are the
   compact app cards from ds/app.css (whole card opens the product; "+" adds
   while ordering is open).
   -------------------------------------------------------------------------- */
html[data-shell="app"] .home-products .sec-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
html[data-shell="app"] .home-products .sec-head :is(.brush, .lead) { display: none; }
html[data-shell="app"] .home-products .sec-head .onote { flex-basis: 100%; }
.home-seeall {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 6px 0 10px; margin-right: -6px;
  border-radius: 12px; color: var(--ink); font-size: 15px; font-weight: 650; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .home-seeall:hover { background: var(--linen); } }
html.motion-ok[data-shell="app"] .home-seeall:active { background: var(--linen); }
html[data-shell="app"] .home-products .grid--products {
  --rail-g: max(var(--gutter), var(--safe-x));
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72%, 280px); gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-g);
  padding: 4px var(--rail-g) 14px; margin-inline: calc(-1 * var(--rail-g));
}
html[data-shell="app"] .home-products .grid--products::-webkit-scrollbar { display: none; }
html[data-shell="app"] .home-products .grid--products > li { scroll-snap-align: start; }
html[data-shell="app"] .home-products .grid--products > li > .skel-card { flex: 1; }
html.motion-ok[data-shell="app"] .home-products .grid--products { scroll-behavior: smooth; }
html[data-shell="app"] .home-products .door { padding: 18px; gap: 12px; border-radius: 20px; }
html[data-shell="app"] .home-products .door__title { font-size: 22px; }
html[data-shell="app"] .home-products .door__arrow { width: 48px; height: 48px; }
html[data-shell="app"] .home-products .door__pet { display: block; z-index: 0; right: 14px; bottom: 20px; width: 56%; }
html[data-shell="app"] .home-products .door__pet::after {   /* contact shadow under the dachshund */
  content: ""; position: absolute; z-index: -1; left: 10%; right: 4%; bottom: 1px; height: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--pet-shadow), transparent); filter: blur(2px);
}

/* --------------------------------------------------------------------------
   A3. Trust: a compact 2 x 2 card, the dog sitting on its top edge (in front)
   -------------------------------------------------------------------------- */
html[data-shell="app"] .trust__host { margin-top: max(0px, calc(var(--trust-pet-up) + 14px - 40px)); }
html[data-shell="app"] .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); box-shadow: none; border-radius: 20px; }
html[data-shell="app"] .trust__item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px 18px; }
html[data-shell="app"] .trust__item + .trust__item { border-top: 0; border-left: 0; }
html[data-shell="app"] .trust__item:nth-child(even) { border-left: 1px solid var(--line); }
html[data-shell="app"] .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
html[data-shell="app"] .trust__item .wash-icon--sm { --wash-size: 44px; }
html[data-shell="app"] .trust__title { font-size: 15px; }
html[data-shell="app"] .trust__text { margin-top: 2px; font-size: 14px; line-height: 1.45; }

/* --------------------------------------------------------------------------
   A4. Pet picker ("Which one sounds like yours?"): three full-width rows in
   one card, each straight to its product
   -------------------------------------------------------------------------- */
html[data-shell="app"] .pals { grid-template-columns: minmax(0, 1fr); gap: 16px; }
html[data-shell="app"] .pals__head { gap: 6px; }
html[data-shell="app"] .pals__list {
  grid-template-columns: minmax(0, 1fr); gap: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
}
html[data-shell="app"] .pals__list > li + li { border-top: 1px solid var(--line); }
html[data-shell="app"] .pal { flex-direction: row; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: 0; text-align: left; }
html[data-shell="app"] .pal__art { width: 104px; flex: none; }
html[data-shell="app"] .pal__words { flex: 1; min-width: 0; align-items: flex-start; gap: 2px; }
html[data-shell="app"] .pal__name { font-size: 19px; }
html[data-shell="app"] .pal__text { font-size: 14px; line-height: 1.4; }
html[data-shell="app"] .pal__go { margin-top: 4px; font-size: 15px; text-decoration: none; }
html[data-shell="app"] .pal__go .ic { display: none; }
@media (hover: hover) and (pointer: fine) { html[data-shell="app"] .pal:hover .pal__name { text-decoration: none; } }
@media (hover: hover) and (pointer: fine) { html[data-shell="app"] .pal:hover { background: var(--linen); } }
.pal__chev { --ic-size: 20px; flex: none; color: var(--ink-soft); }
html.motion-ok[data-shell="app"] .pal:active { background: var(--linen); }
html.motion-ok[data-shell="app"] .pal:is(:focus-visible) .ctile__pet { transform: none; }
@media (hover: hover) and (pointer: fine) { html.motion-ok[data-shell="app"] .pal:hover .ctile__pet { transform: none; } }

/* --------------------------------------------------------------------------
   A5. Story: the photo first (rounded, no frame), then the words
   -------------------------------------------------------------------------- */
html[data-shell="app"] .story { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
html[data-shell="app"] .story__photo { order: -1; max-width: none; }
html[data-shell="app"] .story__photo .framed__photo { aspect-ratio: 1; object-position: 50% 58%; }
html[data-shell="app"] .story__copy { gap: 10px; }
html[data-shell="app"] .story__copy > .btn { margin-top: 4px; }

/* --------------------------------------------------------------------------
   A6. Launch card: the page's one email capture, and the end of app Home.
   App fix round: the frenchie sits ON the Notify me button as on desktop:
   60px, centred, paws 4px onto its top edge, contact shadow. The field keeps
   its full width; where the button sits under the field (420px and down)
   it gets a row of room above it that holds all of him, so he never reaches
   the field or the label.
   -------------------------------------------------------------------------- */
html[data-shell="app"] { --launch-pet-w: 60px; }
html[data-shell="app"]:not([data-wash="rich"]) .section.launch-sec { padding-top: 0; }
html[data-shell="app"] .launch { gap: 18px; padding: 22px 16px 16px; border-radius: 24px; }
html[data-shell="app"] .launch__copy, html[data-shell="app"] .launch__state { gap: 10px; }
html[data-shell="app"] .launch__pet { --pet-inset: calc(50% - var(--launch-pet-w) / 2) !important; }
@media (max-width: 420px) {
  html[data-shell="app"] .launch__notify { margin-top: 0; }
  html[data-shell="app"] .launch__notify .notify__row > .input { margin-inline-end: 0; padding-inline: 16px; }
  html[data-shell="app"] .launch__btn { margin-top: calc(var(--launch-pet-h) + 6px); }
}

/* A7. Questions: website only now (the section carries .home-site-only). */