/* App-strip phone staging — SINGLE SOURCE. tools/build-appstrip-stage.py writes this file into a
   marked "GENERATED appstrip-stage" region placed directly AFTER each page's own app-strip
   <style>, in every consumer listed in appstrip-stage.json, and wraps the phone mockup in
   <div class="appstrip-stage">. The copy in a page is never edited by hand.

   Why a separate layer: the app-strip itself is not generated — 22 pages carry it inline in two
   designs (phone 200×400 with ghost badges on the service pages, 220×440 with store-black badges
   on index, customer-support and how-sonsoto-works). This file adds only what both lack: a
   tonal stage behind the phone, a defined shell edge and shadow, and a screen that reads as a
   surface distinct from the shell. Selectors are one level more specific than the inline rules
   (.appstrip .appstrip-phone beats .appstrip-phone) and the region follows them in source, so
   they win without !important. Dark is the base (every page's :root is dark); light hangs off
   :root[data-theme="light"], the hook the generated theme layer uses. */

.appstrip { overflow-x: clip; }                       /* the stage field may extend past the wrap; never past the page */

/* Device scale — SINGLE SOURCE (2026-09-07 brief). The phone is a CSS-drawn shell (1:2); every page used to size it
   by hand (200×400 on the service pages, 220×440 on index/customer-support/how-sonsoto-works, 170×340 under 780px)
   and it read as a small object in white space. One fluid rule here, the hand sizes stripped by the generator. */
.appstrip { --app-device-inline-size: clamp(244px, 18.5vw, 320px);   /* 2026-09-21 (owner): the SECTION height is held here, by the device's displayed width — the phone keeps a true 1/2.05 silhouette. Was clamp(284px, 23vw, 392px) */ }   /* 2026-09-16 (owner): "make the phone a bit larger" — was clamp(230px, 18vw, 300px) */
.appstrip .appstrip-stage { flex: 0 0 auto; }
.appstrip .appstrip-phone { width: var(--app-device-inline-size); max-width: 100%; height: auto; aspect-ratio: 1 / 2.05; container-type: inline-size; }   /* 2026-09-21 (owner, second pass): a phone silhouette again — 1 / 2.05, the proportion of a real handset. The section
      height is held by the DISPLAYED WIDTH (clamp above, narrower than the 392px it had), never by squashing the device.
      The screen is the container and carries a 390px LOGICAL VIEWPORT: `--u` is one logical pixel, so every value below
      is written in the sizes a real mobile design uses and the whole screen scales with the device as one object. */
@media (max-width: 780px) { .appstrip { --app-device-inline-size: min(250px, 64vw); } }
.appstrip .appstrip-stage { position: relative; isolation: isolate; z-index: 0; width: max-content; }
.appstrip .appstrip-stage::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);
  width: min(32rem, 138%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 104, 91, 0.20) 0%, rgba(30, 33, 34, 0.11) 42%, rgba(9, 11, 12, 0) 72%);
}
.appstrip .appstrip-phone {
  position: relative;
  z-index: 1;
  border-color: rgba(255, 255, 255, 0.17);
  box-shadow: 0 32px 68px rgba(0, 0, 0, 0.50), 0 10px 26px rgba(0, 0, 0, 0.30);
}
.appstrip .appstrip-phone-screen {
  background: linear-gradient(180deg, #1a1d1e 0%, #0e1112 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] .appstrip .appstrip-stage::before {
  background: radial-gradient(circle, rgba(202, 194, 179, 0.46) 0%, rgba(220, 215, 204, 0.24) 38%, rgba(248, 246, 239, 0) 72%);
}
:root[data-theme="light"] .appstrip .appstrip-phone {
  border-color: rgba(24, 27, 27, 0.14);
  box-shadow: 0 30px 62px rgba(24, 27, 27, 0.14), 0 10px 24px rgba(24, 27, 27, 0.08);
}
:root[data-theme="light"] .appstrip .appstrip-phone-screen {
  background: linear-gradient(180deg, #f1eee7 0%, #dedad0 100%);
  border-color: rgba(24, 27, 27, 0.06);
}

/* ---- screen variant: setup-status ------------------------------------------------------------
   appstrip-stage.json `screen: "setup-status"` replaces the empty placeholder mark inside
   .appstrip-phone-screen with a static, non-interactive operating-record mock: eyebrow, title,
   progress, four status rows, four-icon bottom bar. Pure HTML/CSS, no links, no scripts. The
   phone is aria-hidden on every page, so nothing here reaches assistive tech. Tokens are scoped to
   the screen so the surface decides the foreground: charcoal on ivory in light, warm off-white on
   near-charcoal in dark. */
.appstrip .appstrip-phone::before { z-index: 2; }   /* the camera cutout sits ON the app surface, as on a real device */
.appstrip .appstrip-phone-screen {
  align-items: stretch; justify-content: flex-start;
  inset: 2.4cqw; border: 0; border-radius: 7cqw; overflow: hidden;   /* the app surface reaches the device edge */
  container-type: inline-size;
}
.appstrip .appstrip-screen {
  --u: calc(1cqw / 3.9);   /* one logical pixel of a 390px-wide phone viewport */
  --scr-text: #F1EEE7; --scr-muted: #A7A198; --scr-faint: #7F7970; --scr-line: rgba(255,255,255,.10); --scr-accent: #C2A26A; --scr-ok: #E6E0D2;
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%;
  padding: calc(46 * var(--u)) calc(18 * var(--u)) 0;   /* top = safe area under the camera cutout */
  font-family: var(--sans, 'Inter', system-ui, sans-serif); color: var(--scr-text); overflow: hidden;
}
.appstrip .appstrip-screen-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: calc(10 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: var(--scr-faint); }
.appstrip .appstrip-screen-title { margin: calc(10 * var(--u)) 0 0; font-size: calc(21 * var(--u)); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--scr-text); }
.appstrip .appstrip-screen-status { margin: calc(6 * var(--u)) 0 0; font-size: calc(12.5 * var(--u)); color: var(--scr-muted); }
.appstrip .appstrip-screen-track { position: relative; height: calc(4 * var(--u)); margin: calc(16 * var(--u)) 0 calc(18 * var(--u)); border-radius: 999px; background: var(--scr-line); }
.appstrip .appstrip-screen-fill { position: absolute; inset: 0 auto 0 0; width: 50%; border-radius: 999px; background: var(--scr-accent); }
.appstrip .appstrip-screen-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--scr-line); }
.appstrip .appstrip-screen-row { display: grid; grid-template-columns: calc(20 * var(--u)) 1fr auto; align-items: center; gap: calc(12 * var(--u)); padding: calc(17 * var(--u)) 0; border-bottom: 1px solid var(--scr-line); font-size: calc(15.5 * var(--u)); line-height: 1.3; }
.appstrip .appstrip-screen-row b { font-weight: 500; color: var(--scr-text); }
.appstrip .appstrip-screen-row small { font-size: calc(12.5 * var(--u)); letter-spacing: .02em; color: var(--scr-muted); }
.appstrip .appstrip-screen-dot { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; border: 1px solid var(--scr-muted); display: grid; place-items: center; }
.appstrip .appstrip-screen-dot svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); display: block; }
.appstrip .appstrip-screen-row[data-state="done"] .appstrip-screen-dot { background: var(--scr-ok); border-color: var(--scr-ok); color: #14181B; }
.appstrip .appstrip-screen-row[data-state="review"] .appstrip-screen-dot { border-style: dashed; }
.appstrip .appstrip-screen-row[data-state="next"] .appstrip-screen-dot { border-color: var(--scr-accent); box-shadow: inset 0 0 0 3px transparent; background: radial-gradient(circle, var(--scr-accent) 0 calc(4 * var(--u)), transparent calc(4.6 * var(--u))); }
.appstrip .appstrip-screen-row[data-state="next"] small { color: var(--scr-accent); }
.appstrip .appstrip-screen-row[data-state="todo"] .appstrip-screen-dot { border-color: var(--scr-faint); }
.appstrip .appstrip-screen-nav { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--scr-line); padding: calc(12 * var(--u)) 0 calc(20 * var(--u)); }   /* bottom padding = the home-indicator safe area */
.appstrip .appstrip-screen-nav span { display: grid; justify-items: center; align-content: start; color: var(--scr-faint); }   /* top-aligned: the active underline must not lift its tab */
.appstrip .appstrip-screen-nav svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); display: block; }
.appstrip .appstrip-screen-nav span[data-active] { color: var(--scr-text); }
.appstrip .appstrip-screen-nav small { margin-top: calc(4 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.2; letter-spacing: .01em; color: inherit; }   /* tab labels (owner, 2026-09-21) */
.appstrip .appstrip-screen-nav span[data-active]::after { content: ''; width: calc(16 * var(--u)); height: calc(2 * var(--u)); margin-top: calc(5 * var(--u)); border-radius: 1px; background: var(--scr-accent); }
:root[data-theme="light"] .appstrip .appstrip-screen {
  --scr-text: #14181B; --scr-muted: #5E5952; --scr-faint: #8A857D; --scr-line: rgba(20,24,27,.10); --scr-accent: #7A6A48; --scr-ok: #14181B;
}
:root[data-theme="light"] .appstrip .appstrip-screen-row[data-state="done"] .appstrip-screen-dot { color: #F5F2EA; }
/* no mobile type/padding overrides: every value above is a share of the phone's own width (cqw), so the whole screen
   scales with the frame at any viewport (2026-09-21). */
/* store-badge platform marks (2026-09-07, owner): one shared quiet icon treatment for both platforms — muted ink from the
   theme token, fill from currentColor; the generator writes the single-path glyphs, so no colour artwork can reach here */
/* Colour and flex behaviour are shared; SIZE is left to the page, because this rule's `.appstrip`
   prefix out-specified the page's own `@media (max-width: 480px)` scale and pinned the icon at 22px
   where the page asks for 18px. That silently cost ~8px of inline width per badge pair on mobile —
   part of why the labels had no room. Sized here only above the mobile breakpoint. */
.appstrip .appstrip-badge svg { flex: 0 0 auto; color: var(--muted); fill: currentColor; stroke: none; opacity: 1; }
@media (min-width: 481px) { .appstrip .appstrip-badge svg { width: 22px; height: 22px; } }

/* Badge text wrapping (owner, 2026-09-11). At 390px the two badges sat in a nowrap row and shrank
   below their content, so the labels broke in the middle of the platform name:
       DOWNLOAD ON / THE / App Store      and      GET IT ON / Google / Play
   Measured before and after with Range.getClientRects(), not eyeballed — at 390px the Apple eyebrow
   was 2 line boxes and the Google name was 2. Desktop was never affected.
   Three rules, in the shared stylesheet rather than on the 12 pages that carry the markup:
     1. the two label lines are single text units — this is what guarantees the shape;
     2. a badge does not shrink below its own content, which is what forced the break;
     3. the PAIR may wrap to a second row instead, so nothing overflows at narrow widths.
   Deliberately not done: no fixed widths, no !important, no font-size reduction, no clipping —
   the type scale, geometry, icons, links and hover/focus behaviour are untouched. */
.appstrip .appstrip-badges { flex-wrap: wrap; }
.appstrip .appstrip-badge { flex: 0 0 auto; }
.appstrip .appstrip-badge small,
.appstrip .appstrip-badge b { white-space: nowrap; }

/* The pair must stay on ONE row at 390px (owner, 2026-09-11). It could not, and the reason was not
   that the badges are inherently too wide: the page's own mobile scale — smaller padding, 18px
   icons, 12.5/9px type — is written ABOVE the base `.appstrip-badge` rules it is meant to override.
   Same specificity, later source wins, so that block has never applied and mobile rendered at full
   desktop metrics (measured at 390px: 16px padding, 10px gap, 22px icon, 13.5px label).
   Restated here, where the `.appstrip` prefix wins on specificity regardless of source order.
   Nothing is made smaller than the page already asked for — this restores its own design rather
   than inventing a tighter one. `flex-wrap: wrap` above stays as the safety valve: below the width
   the pair can occupy they stack rather than overflow. */
@media (max-width: 480px) {
  .appstrip .appstrip-badges { gap: 8px; }
  .appstrip .appstrip-badge { padding: 8px 12px; gap: 8px; }
  .appstrip .appstrip-badge svg { width: 18px; height: 18px; }
  .appstrip .appstrip-badge b { font-size: 12.5px; }
  .appstrip .appstrip-badge small { font-size: 9px; }
}

/* Strip width (owner, 2026-09-16): the pages' own `.appstrip .wrap` caps the section at 760px with the phone column
   `auto`, which left the copy column ~380px at desktop — too narrow for the two store badges side by side, so the
   wrap safety valve above stacked them on every desktop viewport (the screenshot that prompted this). One shared
   rule widens the strip so the badges share a line and the larger phone has room; same specificity as the page rule,
   later in source, so it wins without !important. The mobile single-column rule is untouched. */
.appstrip .wrap { width: min(100% - 48px, 1040px); }