/* ============================================================
   APPS PAGES — shared styles for the /apps/ clusters
   (renamed from splitr.css 2026-08: it was always the stylesheet
   for every app page, not just Splitr's).
   ------------------------------------------------------------
   Companion to styles.css (loaded after it). Covers:
     1. Apps hub (apps.html)
     2. Splitr marketing page (splitr.html)
     3. Splitr support page (splitr-support.html)
     4. Splitr legal pages (splitr-privacy.html, splitr-terms.html)
     5. The CSS iPhone (bezel, status bar) shared by the hero
        walkthrough and the four static "How it works" screens
     6. The four in-app screen recreations (.as-*), verified
        against the Splitr Xcode project (Theme.swift + Features/)
        on 2026-08-11.

   Marketing palette = site tokens (styles.css :root).
   In-app palette   = the app's own Theme.swift values, scoped
   below as --as-* custom properties. Do not swap one for the
   other — the phone screens deliberately look like the app,
   not like the website.
   ============================================================ */

/* ------------------------------------------------------------
   0. Shared bits for all Splitr pages
   ------------------------------------------------------------ */

/* Section labels come straight from styles.css (.section-label).
   AUDIT 2026-08: the old .sp-eyebrow duplicated it property-for-
   property, so it's gone. Only the dark-band colour shift lives
   here, mirroring .principles .section-label on the homepage. */
.sp-dark .section-label { color: var(--color-sage-glow); }

/* Measure caps for section headers (were inline styles) */
.sp-measure { max-width: 820px; }
/* .sp-measure-narrow removed 2026-08-12 — its only user was the
   Splitr "Help & legal" header, now a grid column (.sp-help-copy). */

/* Numbered points (privacy band, "why we make our own") */
.sp-num {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--color-coral);
  margin-bottom: 1rem;
}
.sp-dark .sp-num { color: var(--color-coral-bright); }

/* App cluster bar — a slim tonal band above the global footer on all
   four pages of one app (overview, support, privacy, licence). The
   global footer stays app-agnostic; this bar is where app-scoped
   navigation lives. aria-current marks the page you are on. */
.sp-cluster {
  padding: 1rem 0;
  background: var(--color-bg-mint);
}
.sp-cluster-inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
}
.sp-cluster-name {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
}
.sp-cluster-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
}
/* padding-block, not line-height: these are standalone nav links, so
   the 22px text box was the whole tap target. 0.6rem each side takes
   it to ~42px; the band's own padding came down to 1rem to keep the
   overall height where it was. */
.sp-cluster-links a {
  display: inline-block;
  padding-block: 0.6rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--color-text-muted);
  transition: color var(--transition);
}
.sp-cluster-links a:hover { color: var(--color-accent); }
.sp-cluster-links a[aria-current] { color: var(--color-text); font-weight: 500; }

/* Dark band base (privacy band, apps "why" band) */
.sp-dark {
  padding: var(--space-3xl) 0;
  background: var(--color-dark-section);
}
.sp-dark .section-title { color: var(--color-mint-pale); }
.sp-dark .section-intro { color: rgba(246, 250, 254, 0.75); }
/* REDESIGN 2026-08-12: was repeat(auto-fit, minmax(280px, 1fr)), which
   dropped to two columns at about 1090px and left the third card
   stranded on a row of its own with dead space beside it — the exact
   thing the .sp-steps note below calls out. It now holds three across
   until they genuinely stop fitting (~900px) and then becomes the
   standard swipe carousel, like every other card row on the site. */
.sp-dark-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5rem 4rem;
  align-items: start;
}
@media (max-width: 1180px) {
  .sp-dark-grid { gap: 3rem 2.5rem; }
}
@media (max-width: 900px) {
  .sp-dark-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: var(--space-lg);
    padding-bottom: var(--space-xs);
  }
  .sp-dark-grid::-webkit-scrollbar { display: none; }
  .sp-dark-grid > div { flex: 0 0 85%; scroll-snap-align: center; }
  /* The shared dots live behind a 640px query in styles.css; this row
     now carousels above that, so its dot styling is repeated here for
     its full active range (same pattern as .sp-steps). */
  .scroll-dots[data-for="sp-dark-grid"] {
    display: flex;
    justify-content: center;
    gap: 0;
    padding-top: 0;
  }
  .scroll-dots[data-for="sp-dark-grid"] .scroll-dot {
    width: 24px;
    height: 40px;
    display: grid;
    place-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .scroll-dots[data-for="sp-dark-grid"] .scroll-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(246, 250, 254, 0.28);
    transition: background 0.25s, transform 0.25s;
  }
  .scroll-dots[data-for="sp-dark-grid"] .scroll-dot.is-active::before {
    background: var(--color-sage-glow);
    transform: scale(1.25);
  }
}
.sp-dark-grid h3 {
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-mint-pale);
  margin-bottom: 0.75rem;
}
.sp-dark-grid p {
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(246, 250, 254, 0.75);
  text-wrap: pretty;
}

/* Gradient run-in for a phrase inside an otherwise solid headline.
   The site rations the coral→teal gradient (see styles.css); the
   2026-08 apps redesign spends it on the last phrase of each H1
   rather than the whole line. */
.sp-grad {
  background: linear-gradient(to right, var(--color-grad-warm) 0%, var(--color-grad-cool) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Pre-release marker: apps hub card + Splitr hero brand row. Remove
   both at launch (each carries a LAUNCH STATE comment in its page). */
.sp-app-badge {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-coral);
  white-space: nowrap;
}
/* Hairline dot between meta items. Deliberately lighter than
   --color-text-dim so it separates without competing. */
.sp-meta-sep { color: #BEC7D1; }

/* Icon bob. Behind a no-preference query so it never runs for
   reduced-motion users (the design doc's raw keyframe did). */
@keyframes sp-float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ------------------------------------------------------------
   1. Apps hub  — redesigned 2026-08-12
      Hero → catalogue band → dark "why" band → light CTA.
   ------------------------------------------------------------ */

.sp-apps-hero {
  padding: clamp(7rem, 14vw, 10rem) 0 clamp(4.5rem, 9vw, 8rem);
  background: var(--color-bg);
}
.sp-apps-hero .section-label { margin-bottom: clamp(1.25rem, 2.6vw, 2.25rem); }
/* Display-scale H1 — larger than .section-title, which tops out at
   3.5rem and read as a subhead at the top of an otherwise empty page. */
.sp-apps-hero h1 {
  max-width: 1280px;
  font-size: clamp(2.25rem, 1.1rem + 5.2vw, 5.875rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--color-text);
  padding-bottom: 0.06em;
  /* Helps the rag in engines that balance across a forced break
     (Safari). Chrome skips it here, which is why both apps H1s also
     carry explicit <br>s at their intended break points. */
  text-wrap: balance;
}
.sp-apps-hero-lead { margin-top: clamp(2rem, 4.4vw, 4rem); }
.sp-apps-hero-lead p {
  max-width: 660px;
  font-size: clamp(1.05rem, 0.96rem + 0.4vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.sp-apps-list {
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem);
  background: var(--color-bg-warm);
}
.sp-catalogue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.sp-catalogue-head .section-label { margin-bottom: 0; }
.sp-catalogue-meta {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* muted, not dim: --color-text-dim is 4.0:1 on --color-bg-warm,
     below AA at this size. Weight 400 keeps it recessive against
     the teal .section-label opposite it. */
  color: var(--color-text-muted);
}

.sp-app-card {
  display: block;
  color: inherit;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: clamp(1.75rem, 3.4vw, 3rem);
  box-shadow: 0 32px 64px rgba(23, 28, 31, 0.05);
  transition: box-shadow var(--transition);
}
.sp-app-card + .sp-app-card { margin-top: 0.75rem; }
a.sp-app-card:hover,
a.sp-app-card:focus-visible {
  color: inherit;
  box-shadow: 0 40px 80px rgba(23, 28, 31, 0.1);
}
.sp-app-card.is-placeholder { box-shadow: none; }

/* Four columns while they fit: index, icon, copy, CTA. The CTA drops
   under the copy first, then the whole thing folds to two columns —
   the same "hold the row until it stops fitting" behaviour the rest
   of the site's card rows use. */
.sp-app-card-inner {
  display: grid;
  grid-template-columns: 3.5rem auto minmax(0, 1fr) auto;
  grid-template-areas: "idx art body cta";
  gap: 0 clamp(1.5rem, 3.4vw, 3rem);
  align-items: center;
}
.sp-app-index {
  grid-area: idx;
  font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem);
  font-weight: 200;
  line-height: 1;
  color: var(--color-border);
}
.sp-app-card-art { grid-area: art; }
.sp-app-card-body { grid-area: body; max-width: 620px; }
.sp-app-card-cta { grid-area: cta; }

.sp-app-card-icon {
  width: clamp(96px, 12vw, 168px);
  height: clamp(96px, 12vw, 168px);
  /* 38/168 — the iOS icon curvature, held as a ratio so it stays
     right at every clamped size. */
  border-radius: 22.6%;
}
@media (prefers-reduced-motion: no-preference) {
  img.sp-app-card-icon { animation: sp-float-y 7s ease-in-out infinite; }
}
.sp-app-card-icon--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-warm);
}
.sp-app-card-icon--empty img { width: 42%; height: auto; opacity: 0.22; }

.sp-app-card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
}
.sp-app-card-meta .sp-platform {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-text-dim);
}
.sp-app-card h2 {
  font-size: clamp(1.9rem, 1.25rem + 2.4vw, 3.375rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.sp-app-card.is-placeholder h2,
.sp-app-card.is-placeholder .sp-app-card-desc { color: var(--color-text-dim); }
.sp-app-card-desc {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  text-wrap: pretty;
}
.sp-app-card.is-placeholder .sp-app-card-desc { margin-bottom: 0; }

/* The CTA drops under the copy first. Index and icon top-align from
   here on: centred across two rows they drifted into the middle of
   the card and read as unattached to the title. */
@media (max-width: 1180px) {
  .sp-app-card-inner {
    grid-template-columns: 3.5rem auto minmax(0, 1fr);
    grid-template-areas:
      "idx art body"
      "idx art cta";
    align-items: start;
  }
  .sp-app-index { padding-top: 0.1em; }
  .sp-app-card-cta { margin-top: 1.5rem; }
}
@media (max-width: 820px) {
  .sp-app-card-inner {
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas:
      "idx  art"
      "body body"
      "cta  cta";
    row-gap: 1.75rem;
    align-items: center;
  }
  .sp-app-card-cta { margin-top: 0; }
}

.sp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0; }
.sp-chip {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-tag-bg);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   2. Splitr marketing page
   ------------------------------------------------------------ */

/* One screen tall, contents centred in it, so the whole device is in
   view without scrolling (2026-08-12). The vertical padding is the
   phone's height budget: splitr.js reads these two values off this
   element and sizes the device to whatever is left, so the two can
   never drift apart. Padding is in vh rather than vw because it is
   competing for vertical space, not horizontal — 14vw gave a 182px
   top margin on a wide-but-short laptop and pushed the phone's feet
   below the fold, which is what this fixes.
   svh, not vh: on mobile, vh is the LARGE viewport (toolbars hidden),
   so 100vh would again be taller than the screen actually is on load. */
.sp-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(6.5rem, 9vh, 8.5rem) 0 clamp(2.5rem, 5vh, 4rem);
  background: var(--color-bg);
  overflow: hidden;
}
.sp-hero > .sp-hero-layout { width: 100%; }
/* Three columns with the phone in the middle (2026-08-12). The
   headline column is the wider of the two sides — it carries display
   type, the right column carries body copy and small print. Below
   1100px the whole thing stacks in DOM order (headline, phone,
   detail) and centres, which is the only arrangement that stays
   symmetrical once the columns are gone. */
/* Equal side columns, not 5fr/4fr: anything asymmetric puts the
   middle column off the container's centre line, and the whole point
   is that the device is dead centre. Measured 47px adrift at 1440
   before this. */
/* One measurement governs the whole hero: --sp-hero-gap is both the
   column gap AND the section's side padding, so the channel between
   the text and the phone matches the channel between the text and the
   window. That means the hero cannot use .section-container's
   1400px cap — centring a capped box adds slack outside the padding
   that has no counterpart on the inside (260px of it at 1920). It runs
   to 1600 instead, above which the outer margin does start to grow.
   The columns are 1fr so the device stays dead centre; the type below
   is then sized to fill them, or the rag reopens the gap it closed.
   No max-width at all: capping the grid and centring it puts slack
   outside the padding with no counterpart inside — 160px of it each
   side at 1920, which reopened the very gap this is closing. The text
   blocks are capped instead, so wide screens widen the channels
   evenly rather than stranding the hero in the middle. */
.sp-hero-layout {
  --sp-hero-gap: clamp(1.5rem, 3.6vw, 4.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  /* Explicitly none — this element is also .section-container, which
     caps at 1400 and centres. That centring is exactly the slack the
     rule above is about, so it has to be switched off, not just
     raised. */
  max-width: none;
  padding-inline: var(--sp-hero-gap);
  gap: 0 var(--sp-hero-gap);
}
/* Each text block sits centred in its own column, which is what makes
   the two channels equal without depending on where the rag falls: a
   centred block leaves (column - line) / 2 on each side of itself, so
   window-to-text and text-to-phone differ only by padding vs gap —
   and those are the same value. Ranging the left column right (the
   previous attempt) only squared up the inner edge and left the outer
   one adrift by the width of the rag.
   The two blocks also have to match EACH OTHER, or the left pair of
   channels comes out wider than the right pair even though each pair
   is internally equal. Hence the shared cap below and the H1 sized to
   fill it. */
.sp-hero-head,
.sp-hero-detail { text-align: center; }
.sp-hero-head .sp-hero-brand,
.sp-hero-detail .sp-hero-actions { justify-content: center; }
.sp-hero-detail .sp-hero-lead { margin-inline: auto; }
@media (max-width: 1100px) {
  .sp-hero-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    row-gap: clamp(2rem, 5vw, 3rem);
  }
  .sp-hero-layout .sp-hero-brand { justify-content: center; }
  .sp-hero-layout .sp-hero-actions { justify-content: center; }
  .sp-hero-layout .sp-hero-lead { margin-inline: auto; }
}
/* Splitr lockup above the headline: icon, name, pre-release badge */
.sp-hero-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.sp-hero-brand img {
  width: 46px;
  height: 46px;
  border-radius: 10.5px; /* iOS icon curvature at this size */
}
.sp-hero-brand-name {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Headline column. The H1 is sized against its ~5/12 column rather
   than the viewport: at the old display scale "Scan the receipt."
   alone wanted 557px and the column is about 480, so it broke into
   stub lines. It goes back up once the hero stacks and the column is
   the full container. The gradient runs on the second sentence only
   (.sp-grad) rather than the whole H1. */
.sp-hero-head { min-width: 0; }
.sp-hero-head h1 {
  /* Sized to FILL its column, not just to fit it. Both text blocks
     have to be the same width or the left pair of channels ends up
     wider than the right pair even though each pair matches. Measured:
     "Scan the receipt." sets 6.79em in Outfit Light, and the column
     runs ~36.07vw - 69px, so 4.99vw - 0.6rem puts the longest line at
     94-97% of the column at every width from 1101 up. The 4.8rem cap
     is set by the OTHER block: past ~1730 the widest thing on the
     right is the button row (~518px), so the headline's longest line
     has to reach the same width or the left channels open up. */
  font-size: clamp(2rem, calc(4.99vw - 0.6rem), 4.8rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--color-text);
  padding-bottom: 0.06em;
  text-wrap: balance;
}
@media (max-width: 1100px) {
  .sp-hero-head h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem); }
}

/* Detail column: lead, buttons, spec row. */
.sp-hero-detail { min-width: 0; }
.sp-hero-lead {
  /* Same cap the H1's 4.3rem ceiling is sized to fill (~467px of a
     496px block), so above ~1570px the two blocks stay the same width
     and all four channels stay equal. Below that the column is the
     binding constraint and both blocks simply fill it. */
  max-width: 31rem;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.sp-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-lg);
}

/* The hero's Requires / Price / Data collected row was removed
   2026-08-12 — it outweighed the headline column. Its label/value
   type lives on in .sp-spec-card, which absorbed the three facts. */
/* A11y: --color-text-dim (#6F7881) is only ~4.3:1 on --color-bg and
   3.4:1 on --color-bg-mint, which fails AA for text this small. These
   labels use --color-text-muted instead (8.8:1 and 6.9:1). */
.sp-spec-card dt {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.55rem;
}
.sp-spec-card dd {
  font-size: clamp(0.95rem, 0.87rem + 0.3vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

/* Phone column: the middle of the three. AUDIT 2026-08: constrained
   so the column can never size itself wider than the viewport (it
   once did, via a max-content child row). */
.sp-hero-phone-col {
  display: flex;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
}

/* ---- Hero intro (2026-08-12) ------------------------------------
   The phone fades up alone in the centre of the hero, holds for the
   walkthrough's Splash scene, then the copy assembles around it,
   staggered outwards from the device.

   The phone never moves — it is already where the settled layout
   puts it, which is the whole point of the centred hero. Only the
   two copy columns animate, and only their opacity and transform, so
   layout is identical throughout and cumulative layout shift is zero.

   Gated on .sp-intro, which the inline script in the page head adds
   before first paint and removes on a failsafe timer. Without that
   class none of this applies and the hero is simply assembled. */
.sp-intro .sp-phone-scalebox { opacity: 0; }
.sp-intro-in .sp-phone-scalebox {
  opacity: 1;
  transition: opacity 0.95s var(--ease-out);
}

/* Staggered per element rather than per column, so the hero builds
   outwards: brand, headline, lead, buttons, spec row. */
.sp-intro .sp-hero-brand,
.sp-intro .sp-hero-head h1,
.sp-intro .sp-hero-lead,
.sp-intro .sp-hero-actions { opacity: 0; }
.sp-intro .sp-hero-brand,
.sp-intro .sp-hero-head h1 { transform: translateX(-28px); }
.sp-intro .sp-hero-lead,
.sp-intro .sp-hero-actions { transform: translateX(28px); }
/* Stacked, there is no left and right to come in from. */
@media (max-width: 1100px) {
  .sp-intro .sp-hero-brand,
  .sp-intro .sp-hero-head h1,
  .sp-intro .sp-hero-lead,
  .sp-intro .sp-hero-actions { transform: translateY(22px); }
}

.sp-intro-settle .sp-hero-brand,
.sp-intro-settle .sp-hero-head h1,
.sp-intro-settle .sp-hero-lead,
.sp-intro-settle .sp-hero-actions {
  opacity: 1;
  transform: none;
  transition: opacity 1.4s var(--ease-out) var(--sp-in-delay, 0s),
              transform 1.4s var(--ease-out) var(--sp-in-delay, 0s);
}
.sp-intro-settle .sp-hero-brand   { --sp-in-delay: 0s; }
.sp-intro-settle .sp-hero-head h1 { --sp-in-delay: 0.15s; }
.sp-intro-settle .sp-hero-lead    { --sp-in-delay: 0.3s; }
.sp-intro-settle .sp-hero-actions { --sp-in-delay: 0.45s; }

/* A print job during the intro shouldn't come out blank. */
@media print {
  .sp-intro .sp-phone-scalebox,
  .sp-intro .sp-hero-brand,
  .sp-intro .sp-hero-head h1,
  .sp-intro .sp-hero-lead,
  .sp-intro .sp-hero-actions { opacity: 1 !important; transform: none !important; }
}

/* Scale wrapper. splitr.js sets --sp-phone-scale from the viewport's
   width AND height (see fitPhone); the wrapper's own width/height
   follow so layout never reserves the unscaled box.
   The values below are the no-JS / pre-paint fallback — a coarse
   height ladder that lands near whatever the script will compute, so
   there is no visible resize on load. */
.sp-phone-scalebox {
  --sp-phone-scale: 0.50;
  width: calc(416px * var(--sp-phone-scale));
  height: calc(870px * var(--sp-phone-scale));
}
/* Each step is (viewport height - the hero's padding) / 870, i.e. the
   same sum fitPhone() does, so the pre-script paint lands within a
   couple of pixels of the final size. A coarse ladder here cost 0.037
   of cumulative layout shift on its own: the device painted at one
   size, then the script resized it. Ascending order, so the largest
   matching step wins. */
@media (min-height: 620px) { .sp-phone-scalebox { --sp-phone-scale: 0.547; } }
@media (min-height: 700px) { .sp-phone-scalebox { --sp-phone-scale: 0.639; } }
@media (min-height: 760px) { .sp-phone-scalebox { --sp-phone-scale: 0.708; } }
@media (min-height: 800px) { .sp-phone-scalebox { --sp-phone-scale: 0.754; } }
@media (min-height: 840px) { .sp-phone-scalebox { --sp-phone-scale: 0.800; } }
@media (min-height: 880px) { .sp-phone-scalebox { --sp-phone-scale: 0.850; } }
.sp-phone-scalebox > .sp-device {
  transform: scale(var(--sp-phone-scale));
  transform-origin: top left;
}
/* No-JS on a narrow screen: width, not height, is the binding budget. */
@media (max-width: 480px) {
  .no-js .sp-phone-scalebox { --sp-phone-scale: 0.70; }
}

/* How it works — the page's dark chapter since the 2026-08-12
   redesign. Padding and ground come from .sp-dark on the same
   element; only the on-dark text colours are set here. */
.sp-how-header { margin-bottom: clamp(3rem, 6vw, 5.5rem); max-width: 900px; }
.sp-how .sp-step-caption h3 { color: var(--color-text-on-dark); }
.sp-how .sp-step-caption p { color: var(--color-text-on-dark-muted); }
/* The steps carousel dots sit on ink here, so the shared pale-border
   dot and the deep-teal active state both fall under 3:1. */
.sp-how .scroll-dots[data-for="sp-steps"] .scroll-dot::before { background: rgba(246, 250, 254, 0.28); }
.sp-how .scroll-dots[data-for="sp-steps"] .scroll-dot.is-active::before { background: var(--color-sage-glow); }
/* AUDIT 2026-08 (2nd pass): the four phones now behave like every
   other card row on the site — they fill the container edge-to-edge
   while they fit on one line, and the moment they stop fitting they
   become the standard swipe carousel (scroll-snap + dots) instead of
   wrapping into ragged rows with dead space on the right. */
.sp-steps {
  display: flex;
  flex-wrap: nowrap;
  gap: 2.5rem 2rem;
  justify-content: space-between;
}
@media (max-width: 1319px) {
  .sp-steps {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--space-xs);
  }
  .sp-steps::-webkit-scrollbar { display: none; }
  .sp-step { scroll-snap-align: center; }
  /* The shared dot indicators live behind a 640px media query in
     styles.css; the steps carousel runs wider than that, so the
     same dot styling is repeated here for its full active range. */
  .scroll-dots[data-for="sp-steps"] {
    display: flex;
    justify-content: center;
    gap: 0;
    padding-top: 0;
  }
  .scroll-dots[data-for="sp-steps"] .scroll-dot {
    width: 24px;
    height: 40px;
    display: grid;
    place-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .scroll-dots[data-for="sp-steps"] .scroll-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background 0.25s, transform 0.25s;
  }
  .scroll-dots[data-for="sp-steps"] .scroll-dot.is-active::before {
    background: var(--color-accent);
    transform: scale(1.25);
  }
}
.sp-step { flex: 0 0 281px; display: flex; flex-direction: column; }
/* AUDIT 2026-08: no overflow clip here. The scaled device (280.8 x 587.25)
   fits the box, and clipping sliced its ambient shadow into a hard square —
   the hero phone (.sp-phone-scalebox) never clipped, so the steps looked
   different from it. Shadows are meant to paint past the box. */
.sp-step-phone { width: 281px; height: 588px; }
.sp-step-phone > .sp-device {
  transform: scale(0.675);
  transform-origin: top left;
}
/* 2.25rem, not 1.75: the parallax drift in splitr.js moves the phone
   up to 18px down the page, and this margin is the headroom it eats. */
.sp-step-caption { margin-top: 2.25rem; }
.sp-step-caption .sp-num { margin-bottom: 0.5rem; }
.sp-step-caption h3 {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.sp-step-caption p {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* The short version — REDESIGN 2026-08-12.
   Replaces three separate chapters (a dark "Privacy" band, "The
   Maths", and the "App details" strip) that all circled the same
   claim. Claim on the left, evidence and the spec card on the right. */
.sp-short { padding: var(--space-3xl) 0; background: var(--color-bg-warm); }
.sp-short-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 0 clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
/* Sized against its own 5-of-12 column rather than the viewport —
   the shared .section-title clamp is tuned for a full-width header
   and orphaned "up." on its own line all the way down from 1300px. */
.sp-short-copy .section-title {
  font-size: clamp(1.85rem, 1.1rem + 2.4vw, 3.375rem);
  text-wrap: balance;
}
.sp-short-copy .section-intro { max-width: 440px; line-height: 1.75; }
.sp-short-cards { display: flex; flex-direction: column; gap: 0.75rem; }
/* Below the fit point the two columns stack, so the copy needs its
   own bottom gap where the grid column-gap no longer applies. */
@media (max-width: 1024px) {
  .sp-short-layout { grid-template-columns: minmax(0, 1fr); }
  .sp-short-copy { margin-bottom: clamp(2.5rem, 6vw, 3.5rem); }
  .sp-short-copy .section-intro { max-width: 620px; }
}

.sp-card {
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.sp-card h3 {
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 0.55rem;
  color: var(--color-text);
}
.sp-card p {
  font-size: clamp(0.95rem, 0.91rem + 0.15vw, 1rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* Spec card — the old .sp-details strip, folded into the stack as a
   two-by-two. Tonal rather than white so it reads as a footnote to
   the three cards above it, not a fourth claim. */
.sp-spec-card {
  display: grid;
  /* Five facts since the hero row folded in here — three across so the
     last row is one short rather than three. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem 2.5rem;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--color-bg-mint);
}
@media (max-width: 380px) {
  .sp-spec-card { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* Label/value pair reused by the support page's contact cards */
.sp-detail-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 0.5rem;
}

/* Support & legal link cards */
.sp-help { padding: var(--space-3xl) 0; background: var(--color-bg); }
.sp-help-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 0 clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.sp-help-copy h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.sp-link-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1024px) {
  .sp-help-layout { grid-template-columns: minmax(0, 1fr); }
  .sp-help-copy { margin-bottom: clamp(2rem, 5vw, 3rem); }
}
@media (max-width: 720px) {
  .sp-link-cards { grid-template-columns: minmax(0, 1fr); }
}
.sp-link-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) 2rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  transition: background var(--transition);
}
.sp-link-card:hover,
.sp-link-card:focus-visible { background: var(--color-bg-warm); color: inherit; }
.sp-link-card h3 {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  color: var(--color-text);
}
.sp-link-card p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.sp-link-card .sp-link-cta {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--space-md);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-grad-cool);
}

/* Press kit removed 2026-08-12 — see the note in the Splitr page. */

/* Light close — REDESIGN 2026-08-12.
   styles.css says the page rhythm is "hero light, one dark chapter,
   light again, dark close", and the global footer is the dark close.
   Both apps pages already have their own dark chapter, so the
   standard ink .cta-section stacked a third dark band straight onto
   the footer. Same component, inverted: light ground, solid heading,
   primary button instead of the on-dark outline. Opt-in — every
   other page keeps the dark CTA. */
.cta-section--light { background: var(--color-bg); }
.cta-section--light .cta-content h2 {
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--color-text);
}
.cta-section--light .cta-content p { color: var(--color-text-muted); }
/* Warm ground for the light CTA, so a page whose closing section is
   already --color-bg doesn't finish on two identical bands. */
.cta-section--light.cta-section--warm { background: var(--color-bg-warm); }

/* ------------------------------------------------------------
   3. Support page
   ------------------------------------------------------------ */

/* REDESIGN 2026-08-12: brought into line with the hub and the Splitr
   overview. Was an icon beside a one-word "Support" H1; it is now the
   same display-scale hero the other two use, with the brand lockup
   carrying the icon and the H1 doing actual work. */
.sp-support-hero {
  padding: clamp(7rem, 14vw, 10rem) 0 clamp(4.5rem, 9vw, 8rem);
  background: var(--color-bg);
}
.sp-support-hero-head h1 {
  max-width: 1100px;
  font-size: clamp(2.1rem, 1.1rem + 4.4vw, 5rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--color-text);
  padding-bottom: 0.06em;
  text-wrap: balance;
}
/* The label sits inline in the brand lockup here, not above a
   heading, so its stacking margin has to come off. */
.sp-support-hero .sp-hero-brand .section-label { margin-bottom: 0; }
.sp-support-hero-lead { margin-top: clamp(2rem, 4.4vw, 3.5rem); }
.sp-support-hero-lead p {
  max-width: 620px;
  font-size: clamp(1.05rem, 0.96rem + 0.4vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.sp-support-hero-route {
  margin-top: 1.25rem;
  font-size: 0.95rem !important;
  color: var(--color-text-dim) !important;
}
.sp-support-hero-route a { color: var(--color-grad-cool); }
.sp-support-hero-route a:hover { color: var(--color-text); }

/* Closing contact band. Was the page's second section on --color-bg
   with no ground of its own; it now ends the page, so it takes the
   warm tone the CTA band does elsewhere in the cluster. */
.sp-contact { padding: var(--space-3xl) 0; background: var(--color-bg-warm); }
.sp-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}
@media (max-width: 720px) {
  .sp-contact-grid { grid-template-columns: minmax(0, 1fr); }
}
.sp-contact-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) 2rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.sp-contact-card .sp-detail-label { margin-bottom: 0.75rem; }
/* 1rem, down from 1.15: in the three-across band the card's content
   box is ~179px and "support@mirentha.com" needed 184px at the old
   size, so it snapped to "…mirentha.co / m". break-word is the last
   resort for a genuinely unbreakable string, not the layout. */
.sp-contact-card > a {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-grad-cool);
  overflow-wrap: break-word;
}
.sp-contact-card > a:hover { color: var(--color-text); }
.sp-contact-card p {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
}
.sp-contact-card address {
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Accordions (Fixing a scan / Questions)
   REDESIGN 2026-08-12: header above a full-width list became the
   asymmetric split the rest of the cluster uses — heading holds the
   left column, the list runs down the right. Same .sp-acc component,
   plus an on-ink variant for the "Fixing a scan" chapter. */
/* Warm ground: the running order on the support page is
   hero --color-bg → Fixing a scan (ink) → Questions → Known limits
   → contact, and it has to alternate. Questions and contact take the
   warm tone, the hero and Known limits take --color-bg. */
.sp-acc-section { padding: var(--space-3xl) 0; background: var(--color-bg-warm); }
.sp-acc-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 0 clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.sp-acc-header h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-text);
  padding-bottom: 0.06em;
  text-wrap: balance;
}
.sp-acc-header > p {
  margin-top: 1rem;
  max-width: 380px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
@media (max-width: 1024px) {
  .sp-acc-layout { grid-template-columns: minmax(0, 1fr); }
  .sp-acc-header { margin-bottom: clamp(2rem, 5vw, 3rem); }
  .sp-acc-header > p { max-width: 620px; }
}
.sp-acc-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sp-acc {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.sp-acc summary {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 2rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  list-style: none;
}
.sp-acc summary::-webkit-details-marker { display: none; }
.sp-acc summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-lg); }
.sp-acc summary h3 {
  flex: 1 1 auto;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.4;
  color: var(--color-text);
}
/* currentColor since 2026-08-12 (was a hard-coded #6F7881) so the
   chevron follows its band instead of vanishing on ink. */
.sp-acc-chevron {
  flex: 0 0 auto;
  color: var(--color-text-dim);
  transition: transform var(--transition);
}
.sp-acc[open] .sp-acc-chevron { transform: rotate(180deg); }

/* ---- On-ink variant: the "Fixing a scan" chapter ---------------
   Cards lift off the ground with a translucent white rather than a
   solid, so the band still reads as one surface. All four text
   colours clear AA on --color-dark-section. */
.sp-acc-section--dark { background: var(--color-dark-section); }
.sp-acc-section--dark .section-label { color: var(--color-sage-glow); }
.sp-acc-section--dark .sp-acc-header h2 { color: var(--color-text-on-dark); }
.sp-acc-section--dark .sp-acc-header > p { color: var(--color-text-on-dark-muted); }
.sp-acc-section--dark .sp-acc { background: rgba(246, 250, 254, 0.06); }
.sp-acc-section--dark .sp-acc summary h3 { color: var(--color-text-on-dark); }
.sp-acc-section--dark .sp-acc-chevron { color: var(--color-text-on-dark-dim); }
.sp-acc-section--dark .sp-acc-panel p { color: var(--color-text-on-dark-muted); }
.sp-acc-section--dark .sp-acc summary:focus-visible { outline-color: var(--color-sage-glow); }
.sp-acc-panel {
  padding: 0 2rem 1.6rem;
}
.sp-acc-panel p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
  text-wrap: pretty;
}
/* Open/close reveal */
.sp-acc .sp-acc-panel { overflow: hidden; }
@supports (interpolate-size: allow-keywords) {
  .sp-acc::details-content {
    transition: height 0.35s var(--ease-out), content-visibility 0.35s allow-discrete;
    height: 0;
    overflow: clip;
  }
  .sp-acc[open]::details-content { height: auto; }
  :root { interpolate-size: allow-keywords; }
}

/* Known limits — REDESIGN 2026-08-12: the bespoke .sp-limit-card
   stack is gone; it reuses .sp-short-layout / .sp-card so the page
   shares a vocabulary with the Splitr overview instead of inventing
   a third card style. Warm ground keeps it distinct from the light
   FAQ above and the closing contact band below. */
.sp-limits { padding: var(--space-3xl) 0; background: var(--color-bg); }
.sp-limits .sp-short-copy .section-intro a { color: var(--color-grad-cool); }
.sp-limits .sp-short-copy .section-intro a:hover { color: var(--color-text); }

/* Support page: one column split for the whole page.
   .sp-short-layout (5fr/6fr) and .sp-help-layout (4fr/8fr) are tuned
   for the Splitr overview, where they appear once each. Reused here
   alongside .sp-acc-layout they gave three different left edges for
   the right-hand column down a single page. Everything below the
   hero now lines up on 4fr/7fr. Scoped above the shared stack point
   so it can't defeat the single-column rules. */
@media (min-width: 1025px) {
  .sp-limits .sp-short-layout,
  .sp-contact .sp-help-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
  }
}
/* ...and one heading scale. .sp-help-copy h2 tops out at 2.25rem,
   which read as a subhead next to the 3rem accordion headings. */
.sp-contact .sp-help-copy h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.sp-limits .sp-short-copy .section-title {
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem);
  line-height: 1.08;
}

/* ------------------------------------------------------------
   4. Legal pages — reuse .legal-page/.legal-body from styles.css;
      just the summary card is new.
   ------------------------------------------------------------ */

/* App-name UI labels referenced inside legal prose ("Type a total
   instead", "Send it to the group chat") — emphatic, not italic. */
.legal-body .em-ui { font-style: normal; color: var(--color-text); }

.sp-short-card {
  max-width: 780px;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: 3rem;
}
.sp-short-card h2 {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}
.sp-short-card p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------
   5. The CSS iPhone
      Outer .sp-device = 416 x 870 (13px bezel around a 390 x 844
      screen — the app's real point grid, same as the walkthrough).
   ------------------------------------------------------------ */

.sp-device {
  width: 416px;
  height: 870px;
  padding: 13px;
  border-radius: 68px;
  background: linear-gradient(150deg, #2C3138 0%, #0C0E12 38%, #14181E 62%, #33383F 100%);
  box-shadow:
    0 34px 80px rgba(20, 16, 10, 0.34),
    0 3px 10px rgba(20, 16, 10, 0.2),
    inset 0 0 0 1.4px rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
  flex: 0 0 auto;
}
.sp-screen {
  position: relative;
  width: 390px;
  height: 844px;
  border-radius: 55px;
  overflow: hidden;
  /* AUDIT 2026-08 (2nd pass): belt-and-braces rounded clip. Inside a
     scaled ancestor some renderers promote children (e.g. the
     keyboard) to their own layer and skip the border-radius clip —
     the grey board stuck out square below the bezel. clip-path is
     honoured on composited layers everywhere. */
  clip-path: inset(0 round 55px);
  -webkit-clip-path: inset(0 round 55px);
  background: var(--as-cream);
  /* The app's own type stack — the screens must look like iOS,
     not like the marketing site. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  /* In-app palette (Theme.swift) */
  --as-cream: #F4EFE4;
  --as-card: #FFFDF7;
  --as-ink: #1B2430;
  --as-brand: #22395C;
  --as-text2: #6B6A63;
  --as-quiet: #88867C;
  --as-positive: #146C46;
  --as-negative: #A63E28;
  --as-sand: #EDE6D4;
  --as-sand-ink: #5A5344;
  --as-sep: #EFE9DB;
  --as-camera: #11161F;
}
.sp-screen, .sp-screen * { box-sizing: border-box; }

/* Status bar + home bar (shared chrome, drawn above every screen) */
.sp-statusbar {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 59px;
  pointer-events: none;
  z-index: 30;
}
.sp-statusbar .sb-time {
  position: absolute; left: 34px; top: 18px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.2px;
  color: var(--as-ink);
}
.sp-statusbar .sb-island {
  position: absolute; left: 132.5px; top: 11px;
  width: 125px; height: 37px; border-radius: 20px;
  background: #07090C;
}
.sp-statusbar .sb-glyphs {
  position: absolute; right: 32px; top: 21px;
  display: flex; align-items: flex-end; gap: 5px;
  color: var(--as-ink);
}
.sp-screen.is-dark .sp-statusbar .sb-time,
.sp-screen.is-dark .sp-statusbar .sb-glyphs { color: var(--as-cream); }
.sp-homebar {
  position: absolute;
  left: 125px; bottom: 8px;
  width: 140px; height: 5px; border-radius: 3px;
  background: rgba(27, 36, 48, 0.3);
  pointer-events: none;
  z-index: 30;
}
.sp-screen.is-dark .sp-homebar { background: rgba(244, 239, 228, 0.45); }

/* ------------------------------------------------------------
   6. The four in-app screens (static recreations)
      Layout metrics from the app source / walkthrough:
      SAFE_TOP 59, SAFE_BOTTOM 34, inset 20, radii 18/14/20/16.
   ------------------------------------------------------------ */

.as-screen { position: absolute; inset: 0; background: var(--as-cream); }

.as-perf {
  height: 1px;
  flex: 0 0 auto;
  background: repeating-linear-gradient(to right, var(--as-sep) 0 5px, transparent 5px 10px);
}

.as-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex: 0 0 auto;
  background: var(--as-sand);
  color: var(--as-sand-ink);
}
.as-avatar.is-you, .as-avatar.is-on { background: var(--as-brand); color: var(--as-cream); }
.as-avatar.is-dim { color: rgba(90, 83, 68, 0.5); }

/* --- start --- */
.as-start-toprow {
  position: absolute; left: 10px; right: 10px; top: 59px;
  display: flex; justify-content: space-between;
}
.as-start-toprow .as-iconbtn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--as-brand);
}
.as-start-art {
  position: absolute; left: 45px; top: 268px;
  width: 300px; height: 298px;
}
.as-btn-primary {
  position: absolute; left: 20px; right: 20px;
  height: 54px; border-radius: 14px;
  background: var(--as-brand); color: var(--as-cream);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.3px;
}
.as-start .as-btn-primary { top: 732px; }

/* --- table --- */
.as-nav {
  position: absolute; left: 20px; right: 20px; top: 59px;
  height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 17px; letter-spacing: -0.4px; color: var(--as-brand);
}
.as-table-block { position: absolute; left: 20px; right: 20px; top: 109px; }
.as-table-merchant {
  font-size: 26px; font-weight: 700; letter-spacing: -0.5px;
  line-height: 31px; color: var(--as-ink);
}
.as-table-total {
  margin-top: 4px; height: 50px;
  display: flex; align-items: center;
  font-size: 50px; font-weight: 600; letter-spacing: -1.8px;
  color: var(--as-ink);
  font-variant-numeric: tabular-nums;
}
.as-table-q { margin-top: 20px; font-size: 20px; font-weight: 600; letter-spacing: -0.4px; color: var(--as-ink); }
.as-table-sub { margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--as-text2); }
.as-table-card {
  position: absolute; left: 20px; right: 20px; top: 281px;
  background: var(--as-card); border-radius: 18px; padding: 16px;
}
.as-chiprow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.as-chip {
  height: 40px; border-radius: 20px; background: var(--as-sand);
  display: flex; align-items: center; gap: 8px; padding: 0 6px;
  flex: 0 0 auto;
}
.as-chip .as-avatar { width: 28px; height: 28px; font-size: 11px; background: rgba(90, 83, 68, 0.14); }
.as-chip .as-chip-name { font-size: 15px; letter-spacing: -0.2px; color: var(--as-ink); white-space: nowrap; }
.as-chip .as-chip-x { width: 26px; height: 26px; margin-right: 3px; display: flex; align-items: center; justify-content: center; }
.as-chip.is-you { background: var(--as-brand); }
.as-chip.is-you .as-avatar { background: rgba(244, 239, 228, 0.2); color: var(--as-cream); }
.as-chip.is-you .as-chip-name { color: var(--as-cream); }
.as-caret-slot { height: 40px; display: flex; align-items: center; padding: 0 4px; min-width: 24px; }
.as-caret { width: 2px; height: 21px; margin-left: 1px; background: var(--as-brand); }
.as-table-card .as-perf { margin-top: 16px; margin-bottom: 12px; }
.as-table-count {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 13px;
}
.as-table-count .l { color: var(--as-text2); }
.as-table-count .r { color: var(--as-quiet); font-variant-numeric: tabular-nums; }
.as-table .as-btn-primary { top: 742px; }

/* The iOS keyboard, up because the name field has the caret (static
   table screen only — the walkthrough types too fast to need one).
   Metrics: keys 42pt tall, 6pt gaps, 12pt row gaps, light-mode board.
   Sits over the CTA exactly as the real keyboard does on the device. */
.as-kbd {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 260px;
  padding: 8px 3px 0;
  background: #D2D5DB;
  /* No z-index: DOM order already stacks it above the CTA, and a
     z-index promoted it to a compositor layer that escaped the
     screen's rounded clip in some browsers. */
}
.as-kbd-row { display: flex; gap: 6px; margin-bottom: 12px; }
.as-kbd-row-mid { padding: 0 19px; }
.as-key {
  flex: 1 1 0;
  height: 42px;
  border-radius: 5px;
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(122, 126, 133, 0.85);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 400;
  color: #10151B;
}
.as-key-fn { background: #AEB4BE; flex: 0 0 44px; color: #10151B; }
.as-kbd-bottom .as-key-123, .as-kbd-bottom .as-key-return { flex: 0 0 92px; font-size: 16px; }
.as-key-space { font-size: 16px; }

/* --- assign --- */
.as-assign-title { position: absolute; left: 20px; right: 20px; top: 115px; }
.as-assign-title h2 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.6px;
  line-height: 33px; color: var(--as-ink); margin: 0;
}
.as-assign-status {
  margin-top: 7px; height: 17px;
  display: flex; align-items: baseline; gap: 6px;
  font-size: 14px;
}
.as-assign-status .amt { font-weight: 600; color: var(--as-negative); font-variant-numeric: tabular-nums; }
.as-assign-status .txt { color: var(--as-text2); }
.as-personbar {
  position: absolute; left: 20px; right: 20px; top: 186px;
  height: 90px; background: var(--as-card); border-radius: 18px;
  display: flex; align-items: center;
}
.as-personbar-people { display: flex; gap: 10px; padding-left: 14px; }
.as-person { width: 60px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.as-person .as-avatar { width: 44px; height: 44px; font-size: 16px; }
.as-person .as-person-amt { font-size: 11px; color: var(--as-quiet); font-variant-numeric: tabular-nums; }
.as-person.is-on .as-person-amt { font-weight: 600; color: var(--as-ink); }
.as-personbar-tick {
  width: 54px; height: 54px; margin-left: auto; margin-right: 6px;
  border-radius: 16px; background: var(--as-brand);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.as-assign-scroll {
  position: absolute; left: 0; right: 0; top: 276px; bottom: 34px;
  overflow: hidden;
  /* AUDIT 2026-08: the list is taller than the screen (that's the point —
     it scrolls in the app), but a hard clip cut the card mid-row into a
     square edge that read as broken. The mask fades the last 52px out,
     the way a real scroll view disappears under the safe area. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 52px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 52px), transparent);
}
.as-items-card {
  margin: 12px 20px 0;
  background: var(--as-card); border-radius: 18px; overflow: hidden;
}
.as-item {
  display: flex; align-items: flex-start;
  padding: 14px 16px; height: 74px;
}
.as-item.is-recent { background: rgba(34, 57, 92, 0.06); }
.as-item .as-item-main { flex: 1 1 auto; }
.as-item .as-item-name {
  font-size: 17px; letter-spacing: -0.3px; line-height: 20px; color: var(--as-ink);
}
.as-item.is-unclaimed .as-item-name, .as-item.is-unclaimed .as-item-amt { color: var(--as-quiet); }
.as-item .as-item-sub {
  margin-top: 6px; height: 20px;
  display: flex; align-items: center; gap: 8px;
}
.as-item .as-item-sub .who { display: flex; }
.as-item .as-item-sub .as-avatar {
  width: 20px; height: 20px; font-size: 10px;
  box-shadow: 0 0 0 1.5px var(--as-card);
}
.as-item .as-item-sub .as-avatar + .as-avatar { margin-left: -6px; }
.as-item .as-item-sub .cap { font-size: 12px; color: var(--as-quiet); }
.as-item .as-item-sub .cap.is-brand { font-weight: 600; color: var(--as-brand); }
.as-item .as-item-sub .cap.is-neg { color: var(--as-negative); }
.as-item .as-item-amt {
  margin-left: 14px;
  font-size: 17px; letter-spacing: -0.2px; color: var(--as-ink);
  font-variant-numeric: tabular-nums;
}
.as-items-card .as-perf { margin-left: 16px; margin-right: 16px; }
.as-add-row {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 16px; color: var(--as-brand);
  font-size: 15px; font-weight: 600; letter-spacing: -0.2px;
}
.as-service-card {
  margin: 12px 20px 0;
  background: var(--as-card); border-radius: 18px;
  display: flex; align-items: flex-start;
  padding: 14px 16px;
}
.as-service-card > div:first-child { flex: 1 1 auto; }
.as-service-card .t { font-size: 17px; letter-spacing: -0.3px; color: var(--as-ink); }
.as-service-card .s { margin-top: 4px; font-size: 12px; color: var(--as-quiet); }
.as-service-card .as-item-amt { margin-left: auto; }
.as-see-scan {
  margin-top: 8px; padding: 12px 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--as-brand); font-size: 13px; font-weight: 600; letter-spacing: -0.2px;
}

/* --- damage --- */
.as-damage-hero { position: absolute; left: 20px; right: 20px; top: 216px; }
.as-label {
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--as-quiet);
}
.as-damage-amt {
  margin-top: 10px; height: 65px;
  display: flex; align-items: center;
  font-size: 68px; font-weight: 600; letter-spacing: -2.6px;
  color: var(--as-ink); font-variant-numeric: tabular-nums;
}
.as-damage-why {
  margin-top: 10px; font-size: 14px; line-height: 1.45;
  color: var(--as-text2); text-wrap: pretty;
}
.as-damage-card {
  position: absolute; left: 20px; right: 20px; top: 381px;
  background: var(--as-card); border-radius: 18px; overflow: hidden;
}
.as-damage-row {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; height: 64px;
}
.as-damage-row .as-avatar { width: 34px; height: 34px; font-size: 13px; }
.as-damage-row .n { font-size: 17px; letter-spacing: -0.3px; color: var(--as-ink); flex: 1 1 auto; }
.as-damage-row .a {
  font-size: 24px; font-weight: 600; letter-spacing: -0.7px;
  color: var(--as-ink); font-variant-numeric: tabular-nums;
}
.as-damage-card .as-perf { margin: 0 16px; }
.as-damage-recon {
  position: absolute; left: 24px; right: 24px; top: 587px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 13px;
}
.as-damage-recon .l { color: var(--as-quiet); }
.as-damage-recon .r { font-weight: 600; color: var(--as-positive); font-variant-numeric: tabular-nums; }
.as-damage .as-btn-primary { top: 716px; }
.as-damage-foot {
  position: absolute; left: 20px; right: 20px; top: 784px;
  text-align: center; font-size: 12px; line-height: 1.5;
  color: var(--as-quiet);
}

/* ------------------------------------------------------------
   7. Hero walkthrough stage
      The wrapper the animation renders into. The walkthrough JS
      draws its own screens; these rules only host it.
   ------------------------------------------------------------ */

.sp-walkthrough .sp-screen > .sp-wt-layer {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
/* The walkthrough's touch indicator */
.sp-finger {
  position: absolute;
  width: 0; height: 0;
  z-index: 20;
  pointer-events: none;
}
.sp-finger .dot {
  position: absolute;
  left: -22px; top: -22px;
  width: 44px; height: 44px;
  border-radius: 50%;
}
.sp-finger .ripple {
  position: absolute;
  border-radius: 50%;
}

/* Reduced motion: the walkthrough never starts (handled in JS);
   the hero keeps the static start screen. */
@media (prefers-reduced-motion: reduce) {
  .sp-acc .sp-acc-chevron { transition: none; }
}

/* ------------------------------------------------------------
   8. Small-screen tidy-ups
   ------------------------------------------------------------ */

@media (max-width: 600px) {
  .sp-acc summary { padding: 1.1rem 1.25rem; }
  .sp-acc-panel { padding: 0 1.25rem 1.25rem; }
  .sp-contact-card { padding: 1.5rem 1.25rem; }
  .sp-app-card { padding: 1.5rem 1.25rem; }
}

/* AUDIT 2026-08-13 (mobile pass): these uppercase micro-labels are
   0.68-0.6875rem, which renders at 10.9px — legible on a desktop
   monitor, squinty on a phone. 0.75rem = 12px wherever the pointer is
   coarse, which catches a phone in landscape too; a width query
   missed those. Selectors are doubled up where the base rule is
   itself nested (.sp-app-card-meta .sp-platform) so this actually
   wins on specificity. */
@media (pointer: coarse) {
  .sp-app-badge,
  .sp-catalogue-meta,
  .sp-detail-label,
  .sp-spec-card dt,
  .sp-hero-brand .sp-app-badge,
  .sp-app-card-meta .sp-platform { font-size: 0.75rem; }
}

/* The email links in the support page's contact cards are standalone
   targets, not links inside a sentence, so WCAG 2.5.8's inline
   exemption doesn't cover them. Padding plus a matching negative
   margin lifts the tap target to ~44px without moving anything. */
.sp-contact-card > a {
  display: inline-block;
  padding-block: 0.55rem;
  margin-block: -0.55rem;
}

/* ------------------------------------------------------------
   6. Launch-notify band (2026-08-13, rebuilt)

   The "Get notified at launch" ask, which used to be a link into
   the contact form.

   Built out of what the site already has rather than out of new
   geometry: .sp-help-layout for the column split (same left edge
   as the link cards above), .sp-contact-card's surface treatment
   for the panel, and .form-group / .btn-full from styles.css for
   the field and the button, so this form is componentwise the
   contact form. Field, then check, then full-width button.

   Nothing here names Splitr: a second app page gets the band by
   copying the markup and changing data-app.
   ------------------------------------------------------------ */
.sp-notify { padding: var(--space-3xl) 0; background: var(--color-bg-warm); }

.sp-notify-panel {
  padding: var(--space-lg) 2rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* The same rhythm as .contact-form, restated rather than borrowed:
   that class is a GSAP scrub target on the homepage, and putting it
   on this form would hand the index choreography an element on a
   page it never runs on. The honeypot is absolutely positioned, so
   it is out of flow and takes no gap. */
.sp-notify-form { display: flex; flex-direction: column; gap: var(--space-md); }

/* Turnstile is interaction-only, so on almost every visit it renders
   nothing at all. Left as an empty flex item it would still take a
   full gap, leaving a hole between the field and the button. */
.sp-notify-form .cf-turnstile:empty { display: none; }

/* Status and small print travel together as one flex item, so the
   note sits close under the confirmation instead of a --space-md
   away from it. */
.sp-notify-foot > p { margin: 0; }
.sp-notify-status {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-accent);
}
.sp-notify-status:empty { display: none; }
.sp-notify-status.is-error { color: #C0392B; }
.sp-notify-status:not(:empty) + .sp-notify-note { margin-top: 0.6rem; }

.sp-notify-note {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-dim);
}
.sp-notify-note a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.sp-notify-note a:hover { color: var(--color-accent); }

/* Once someone is on the list the form stops being a form. Showing
   them an empty box again only invites a second submission. */
.sp-notify-form.is-done .form-group,
.sp-notify-form.is-done .cf-turnstile,
.sp-notify-form.is-done .btn,
.sp-notify-form.is-done .sp-notify-note { display: none; }
.sp-notify-form.is-done .sp-notify-status {
  font-size: 1rem;
  color: var(--color-text);
}

@media (max-width: 380px) {
  .sp-notify-panel { padding: 1.5rem 1.25rem; }
}