/*
 * Landing page only (round 1). Every rule is scoped under .home (body
 * class), so /guides, /recover and /sites.html, which share styles.css, do
 * not move. Ported from the sharering.network theme (review-me-v3):
 * scene-kit.css, product-kit.css and industry.css. Load AFTER styles.css.
 *
 * Breakpoints: phone under 700px, tablet 700 to 999px, desktop 1000px and up.
 * On phones some sections hold two or three screens ("parts"); on wider
 * screens those part wrappers are display: contents, so their children join
 * the section's own grid and the part's [data-nav-stop] has no box and is
 * skipped by the chevron (site.js ignores stops without client rects).
 */

/* ---------- Tokens: the type floors and the scene metrics ---------- */
.home {
  /* Phone floors (product-kit.css:90-97) */
  --home-body: 17px;
  --home-lede: 18px;
  --home-card: 15px;
  --home-card-title: 18px;
  --home-btn: 16px;
  --home-h1: 32px;
  --home-h2: clamp(28px, 7.4vw, 34px);

  /* Scene metrics. The header is sticky: 72px plus its 1px rule. 100svh never
     changes while a mobile URL bar moves, so nothing re-lays out mid-scroll. */
  --home-header: calc(var(--header-h, 72px) + 1px);
  --home-scene: calc(100svh - var(--home-header));
  --home-top: 40px;
  --home-gutter: 68px;
  --home-pad: clamp(20px, 4vw, 64px);
  --home-max: 1180px;

  /* Small text has to clear 4.5:1 over the lighter grid tiles, not only over
     the ground, so the soft inks and the accent ink are lifted on this page. */
  --srk-accent-text: color-mix(in srgb, var(--srk-accent-live) 52%, #EAF0FF);
  --srh-ink-soft: rgba(234, 240, 255, 0.84);
  --srh-ink-read: rgba(234, 240, 255, 0.9);
  --srh-ink-faint: rgba(234, 240, 255, 0.76); }

/* ---------- Header and footer: one content edge with the scenes ---------- */
.home .sr-header__inner,
.home .sr-footer__inner {
  max-width: calc(var(--home-max) + 2 * var(--home-pad));
  padding-inline: var(--home-pad); }

.home .sr-footer { margin-top: 0; }

/* ---------- Type ---------- */
.home .srk-hero h1 {
  font-size: var(--home-h1);
  line-height: 1.16;
  padding-bottom: 0.04em;
  max-width: 14ch;
  margin-bottom: 0.4em; }

.home .srk-scene h2 {
  font-size: var(--home-h2);
  line-height: 1.14;
  padding-bottom: 0.04em;
  margin-bottom: 0.45em; }

.home .srk-lede {
  font-size: var(--home-lede);
  line-height: 1.45;
  color: var(--srh-ink); }

.home .srk-scene-copy p:not(.srk-lede):not(.srk-eyebrow):not(.srk-hero-addr):not(.home-aha-note),
.home .srk-portal p:not(.srk-eyebrow):not(.help):not(.alert),
.home .home-row .when {
  font-size: var(--home-body);
  line-height: 1.5;
  color: var(--srh-ink-read); }

.home .srk-scene-copy p + p { margin-top: 0.9em; }

.home .srk-eyebrow,
.home .srk-step-num {
  font-size: var(--home-card);
  letter-spacing: 0.14em;
  line-height: 1.3;
  color: var(--srk-accent-text); }

/* An eyebrow that wraps splits evenly, never leaving one word (or "1") behind. */
.home .srk-eyebrow { text-wrap: balance; }

/* Emphasis carries weight as well as colour (scene-kit.css:192-195). */
.home p .srk-mark,
.home li .srk-mark { font-weight: 600; }

.home .srk-btn,
.home .srk-btn.is-sm,
.home .srk-portal .btn {
  font-size: var(--home-btn);
  line-height: 1.25;
  min-height: 48px; }

.home .srk-btn.is-sm { padding: 12px 22px; }

/* ---------- Scenes: one scene, one screen ---------- */
/*
 * scene-kit.css:561-588. min-height, never height: a scene taller than the
 * screen grows and top-aligns; one that fits is centred by margin:auto on its
 * inner (not align-items:center, which clips the top of an over-tall scene).
 */
.home .srk-flow .srk-scene {
  min-height: var(--home-scene);
  margin-block: 0;
  padding: var(--home-top) var(--home-pad) var(--home-gutter);
  display: flex;
  align-items: flex-start; }

.home .srk-flow .srk-scene > .srk-scene-inner {
  width: 100%;
  max-width: var(--home-max);
  margin: auto; }

/* Every stop lands flush under the sticky header. site.js's chevron reads this
   same computed value (site.js:358-360), so the two cannot disagree. */
.home [data-nav-stop],
.home [id] { scroll-margin-top: var(--home-header); }

/* Parts: a whole screen each on phones, transparent wrappers on wider screens. */
.home .home-part { display: contents; }

@media (max-width: 699px) {
  .home .srk-flow .srk-scene.home-split {
    display: block;
    padding-block: 0; }

  .home .srk-flow .srk-scene.home-split > .srk-scene-inner { display: block; }

  .home .home-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    min-height: var(--home-scene);
    padding: var(--home-top) 0 var(--home-gutter); }
}

/* ---------- Page to page on a phone (scene-kit.css:652-705) ---------- */
@media (max-width: 768px) and (pointer: coarse) {
  :root:has(body.home) { scroll-snap-type: y mandatory; }

  .home .srk-flow [data-nav-stop] {
    scroll-snap-align: start;
    scroll-snap-stop: always; }

  .home .sr-footer { scroll-snap-align: start; }

  /* While someone types a portal address, snap lets go, so a keyboard that
     shortens the viewport cannot pull the input away. */
  :root:has(body.home #portal-form :focus) { scroll-snap-type: none; }
}

/* The fixed chevron and back-to-top step aside while the portal form has focus,
   so they never sit over the input or the submit button. */
.home:has(#portal-form :focus) .srk-top,
.home:has(#portal-form :focus) .srk-nav--down { visibility: hidden; }

/* ---------- Chevron and back to top (scene-kit.css:852-1032) ---------- */
@media (max-width: 700px) {
  .home .srk-nav--down {
    display: grid;
    bottom: clamp(10px, 1.6vh, 18px); }

  .home .srk-play { font-size: var(--home-card); min-height: 30px; }
}

/* Back to top sits bottom left, inside the scene gutter, so it never covers copy. */
.home .srk-top {
  right: auto;
  left: 18px;
  bottom: 18px; }

@media (max-width: 640px) {
  .home .srk-top {
    width: 40px;
    height: 40px;
    left: 12px;
    bottom: clamp(10px, 1.6vh, 18px); }
}

/* ---------- Typing (industry.css:1476-1527) ---------- */
/* Opacity only, never position: every word is already in its final place.
   home-motion.js wraps the words; with JS off or reduced motion nothing is
   wrapped and the text simply shows. */
.home .home-typing .home-w {
  opacity: 0;
  transition: opacity 260ms linear;
  transition-delay: calc(var(--w, 0) * 55ms); }

.home .home-typing.is-typed .home-w { opacity: 1; }

/* The caret rides the LAST word only, so it cannot fall onto a line of its own. */
.home .home-typing .home-w--last::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 0.12em;
  vertical-align: -0.08em;
  background: var(--srk-accent-text);
  opacity: 0; }

/* Blinks three times as the line completes, then holds, as in the theme. */
.home .home-typing.is-typed .home-w--last::after {
  opacity: 1;
  animation-delay: calc(var(--w, 0) * 55ms); }

@keyframes home-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---------- 1. Hero: actions and the address pill (round 1) ---------- */
.home .srk-hero-addr {
  gap: 0.7rem;
  padding: 0.6rem 1.1rem 0.6rem 0.8rem;
  font-size: var(--home-body);
  line-height: 1.4;
  color: var(--srh-ink-soft); }

.home .srk-hero-addr img { width: 20px; height: auto; flex: none; }

.home .srk-hero-addr .mono { font-size: 1em; white-space: nowrap; overflow-wrap: normal; }

@media (max-width: 699px) {
  /* Two equal buttons side by side, not two ragged stacked ones. */
  .home .home-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; }

  .home .home-hero-actions .srk-btn { padding-inline: 10px; }

  .home .srk-hero-addr { display: flex; align-items: flex-start; border-radius: 16px; }

  .home .srk-hero-addr img { margin-top: 2px; }
}

/* Narrow phones: the address never splits, so the monospace host is set a
   little smaller to fit the production name (your-name.sharering.solutions)
   on one line inside the pill. The sentence beside it stays at body size. */

/* ---------- 2. The seal ---------- */
.home .home-law { align-items: center; }

.home .home-seal-stage { display: grid; place-items: center; }

.home .home-seal {
  width: min(100%, 420px);
  margin: 0 auto; }

.home .home-seal .t-ring {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  fill: var(--srk-accent-text); }

.home .home-seal .seal-dot { fill: var(--srk-accent-text); }

/* An opaque disc in the page ground inside the outer ring, so the grid icons
   behind the seal do not show through it. */
.home .home-seal .seal-disc { fill: var(--srh-ground); stroke: none; }

/* The bottom string is set a little wider so both arcs span the same angle,
   leaving equal gaps to the two dots. */
.home .home-seal .t-ring.is-bottom { letter-spacing: 0.27em; }

.home .home-seal text { font-variant-numeric: tabular-nums; }

.home .home-seal .t-small {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  fill: var(--srh-ink-soft); }

.home .home-seal .t-day {
  font-size: 96px;
  font-weight: 700;
  letter-spacing: 0; }

.home .home-seal .t-month {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.16em; }

/* Phones: the seal stays large enough for 10px ring text, and small enough
   to share the screen with the copy under the up chevron's band. */
@media (max-width: 699px) {
  .home .home-seal { width: min(66vw, 262px); }
}

/* ---------- 3. The old way against the new ---------- */
/*
 * One grid: the two eyebrows share row 1 (one baseline), each list item is a
 * subgrid row with the old line on the left and its answer on the right, and
 * the payoff spans both columns underneath. Phones: one column, each answer
 * directly under the line it replaces.
 */
.home .home-aha-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start; }

.home .home-aha-eb { margin: 0 0 clamp(12px, 2vh, 20px); }

.home .home-struck {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: clamp(10px, 1.6vh, 18px); }

.home .home-struck li {
  display: grid;
  gap: 4px;
  align-items: center; }

.home .home-old {
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(23px, 2.8vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: rgba(234, 240, 255, 0.62);
  transition: color 450ms var(--srk-ease); }

/* The strike: a deliberate accent bar with round ends, slightly canted, drawn
   left to right. Visible by default; home-motion.js arms it (scaleX 0) and
   draws each one in turn. */
.home .home-old::after {
  content: "";
  position: absolute;
  left: -0.12em;
  right: -0.12em;
  top: calc(54% - 0.06em);
  height: 0.12em;
  min-height: 3px;
  border-radius: 999px;
  background: var(--srk-accent-text);
  box-shadow: 0 0 14px color-mix(in srgb, var(--srk-accent-live) 55%, transparent);
  transform-origin: left center;
  transform: rotate(-1.6deg) scaleX(1);
  transition: transform 460ms cubic-bezier(0.65, 0, 0.35, 1); }

/* The answer to each old way, in the readable body size with an accent rule. */
.home .home-new {
  display: block;
  padding-left: 14px;
  border-left: 3px solid var(--srk-accent-text);
  font-size: var(--home-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--srh-pale);
  text-wrap: pretty;
  transition: opacity 420ms var(--srk-ease), transform 420ms var(--srk-ease); }

.home .home-struck.is-armed .home-old { color: var(--srh-pale); }
.home .home-struck.is-armed .home-old::after { transform: rotate(-1.6deg) scaleX(0); }
.home .home-struck.is-armed .home-new { opacity: 0; transform: translateX(-8px); }
.home .home-struck.is-armed li.is-struck .home-old { color: rgba(234, 240, 255, 0.62); }
.home .home-struck.is-armed li.is-struck .home-old::after { transform: rotate(-1.6deg) scaleX(1); }
/* The answer lands once its line has been crossed out. */
.home .home-struck.is-armed li.is-struck .home-new { opacity: 1; transform: none; transition-delay: 380ms; }

.home .home-aha-pay { margin-top: clamp(22px, 3.6vh, 40px); }

.home .home-aha-pay h2 { font-size: var(--home-h2); }

.home .home-aha-pay .srk-lede { max-width: 40em; }

/* The payoff's lede follows the typed heading. */
.home .home-aha-lede.is-waiting { opacity: 0; transform: translateY(10px); }
.home .home-aha-lede { transition: opacity 600ms var(--srk-ease), transform 600ms var(--srk-ease); }

/* ---------- 4. How it works: the phone chapter ---------- */
.home .srk-flow .srk-scene.home-how {
  display: block;
  padding-block: 0;
  min-height: 0; }

.home .home-chapter {
  max-width: var(--home-max);
  margin-inline: auto; }

.home .home-phone-fig { margin: 0; }

.home .srk-phone-caption {
  display: block;
  font-size: var(--home-card);
  line-height: 1.4;
  color: var(--srh-ink-soft);
  max-width: 26em; }

.home .srk-step-card { max-width: 32rem; }

.home .srk-step-num { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.8rem; }

.home .srk-step-card h3 {
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin-bottom: 0.5em; }

.home .srk-step-card p:not(.srk-step-num) {
  font-size: var(--home-body);
  line-height: 1.5;
  color: var(--srh-ink-read); }

.home .srk-tag {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--srk-accent-text) 60%, transparent);
  border-radius: 999px;
  font-size: var(--home-card);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--srh-pale); }

/* The app inside the phone: larger type, tighter padding, real lockups. */
.home .app {
  padding: 17% 7.5% 6%;
  font-size: clamp(11.5px, calc(var(--srk-phone-width) * 0.058), 17px); }

.home .app-status { top: 3%; }

.home .app-brand { margin-bottom: 1.2em; }

.home .app-brand img { height: 2em; width: auto; }

.home .app.center .app-brand { justify-content: center; }

.home .app-org { margin: 1em 0 0; padding: 0.7em; }

.home .app-list { margin-top: 0.8em; }

.home .app-list li { padding: 0.55em 0; }

.home .app p { color: rgba(10, 13, 49, 0.78); }

.home .app-org small,
.home .app-list li small { color: rgba(10, 13, 49, 0.7); font-size: max(11px, 0.8em); }

.home .app-org b { font-size: max(11px, 0.9em); }

.home .app-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2em 0.4em;
  white-space: nowrap;
  font-size: max(11px, 0.8em);
  color: rgba(10, 13, 49, 0.74); }

.home .app-foot img { height: 1.25em; width: auto; }

/* ---------- 5. Back at your desk ---------- */
/* The figure loses its default 40px side margins, so the frame fills its
   column and its right edge sits on the content edge. */
.home .home-desk figure.srk-stage { margin: 0; width: 100%; }

.home .srk-vframe-bar { min-height: 42px; }

/* The URL ends (with an ellipsis) before the Play/Pause control in the bar. */
.home .srk-vframe-bar span {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 8.4em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--home-card);
  color: var(--srh-ink-soft); }

/* The play control sits in the browser bar, not over the recording. */
.home .srk-play {
  top: -36px;
  bottom: auto;
  right: 8px;
  opacity: 1;
  font-size: var(--home-card);
  min-height: 30px;
  background: rgba(234, 240, 255, 0.12); }

.home .srk-figcap {
  margin-top: 0.8rem;
  font-size: var(--home-card);
  line-height: 1.42;
  color: var(--srh-ink-soft); }

/* ---------- 6. Records ---------- */
.home .home-records {
  display: grid;
  gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px);
  align-items: center; }

.home .home-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0; }

.home .home-flow li {
  position: relative;
  display: grid;
  grid-template-columns: var(--node-w) minmax(0, 1fr);
  gap: 0 18px;
  padding-bottom: 18px; }

.home .home-flow li:last-child { padding-bottom: 0; }

.home .home-flow li::before {
  content: "";
  position: absolute;
  left: calc(var(--node-w) / 2 - 1px);
  bottom: 4px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--srh-hairline) 0 5px, transparent 5px 10px); }

.home .home-flow li:last-child::before { display: none; }

.home .home-node {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--node-w);
  border-radius: 14px;
  border: 1px solid var(--srh-hairline);
  background: color-mix(in srgb, var(--srh-navy-deep) 88%, transparent); }

.home .home-node-link { height: var(--lk); width: auto; }

.home .home-node-me { height: calc(var(--lk) * 1.414); width: auto; }

/* Node 3 is the business's own storage: a drawn cloud-and-tick mark in the
   industry glyph style with its label, not a logo. */
.home .home-node.is-yours {
  border-color: var(--srk-accent-text);
  background: color-mix(in srgb, var(--srk-accent-live) 22%, var(--srh-navy-deep)); }

.home .home-node-glyph {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--srh-pale);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round; }

.home .home-node.is-yours span {
  font-size: var(--home-card);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--srh-pale); }

@media (max-width: 699px) {

  .home .home-flow li { gap: 0 12px; }

  .home .home-node { gap: 5px; }

  .home .home-node-glyph { width: 24px; height: 24px; }
}

.home .home-flow h3 {
  font-size: var(--home-card-title);
  line-height: 1.25;
  margin: 2px 0 4px; }

.home .home-flow p {
  font-size: var(--home-card);
  line-height: 1.42;
  color: var(--srh-ink-read); }

.home .home-flow .when {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border: 1px solid var(--srh-hairline);
  border-radius: 999px;
  font-size: var(--home-card);
  line-height: 1.4;
  font-weight: 600;
  color: var(--srh-ink-soft); }

.home .home-flow li.is-held .when {
  color: var(--srh-pale);
  border-color: var(--srk-accent-text); }

.home .home-keep-title {
  font-size: var(--home-card-title);
  line-height: 1.25;
  margin: 0 0 12px; }

/* ---------- Shared cards (records, guides) ---------- */
.home .home-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-auto-rows: 1fr; }

.home .home-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  padding: 20px 22px 22px;
  border: 1px solid var(--srh-hairline);
  border-radius: 18px;
  background: color-mix(in srgb, var(--srh-navy-deep) 82%, transparent); }

.home .home-card-glyph {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  fill: none;
  stroke: var(--srk-accent-text);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round; }

.home .home-card h3,
.home .home-card h4 {
  font-size: var(--home-card-title);
  line-height: 1.25;
  margin: 0;
  color: var(--srh-pale);
  font-weight: 700; }

.home .home-card p {
  font-size: var(--home-card);
  line-height: 1.45;
  color: var(--srh-ink-read); }

/* Buttons pinned to one baseline across the row of cards. */
.home .home-card-btn {
  margin-top: auto;
  align-self: stretch; }

.home .home-card p + .home-card-btn { margin-top: auto; }
.home .home-card p { margin-bottom: 8px; }

@media (max-width: 699px) {
  /* Compact cards on phones: the glyph sits beside the title. */
  .home .home-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px 12px;
    align-items: center;
    padding: 14px 16px 16px; }

  .home .home-card-glyph { width: 36px; height: 36px; margin: 0; }

  .home .home-card p,
  .home .home-card-btn { grid-column: 1 / -1; }

  .home .home-card p { margin-bottom: 4px; }

  .home .home-card-btn { min-height: 44px; }

  .home .home-cards { gap: 10px; }
}

/* ---------- 7b. Guides ---------- */
.home .home-guides > .srk-scene-copy { margin-bottom: clamp(20px, 3.5vh, 40px); }

.home .home-guides h2 { max-width: 20em; }

/* ---------- 8. Products: one register, one set of column tracks ---------- */
/*
 * The column tracks are defined ONCE, on the register; each row is a subgrid
 * of them, so the number, name, description, price and buttons line up on
 * every row at every size. The part wrappers are display: contents here, so
 * the rows really are grid items of .home-reg.
 */
.home .home-reg {
  display: grid;
  grid-template-columns: [id] 52px [name] minmax(0, 1fr) [end]; }

.home .home-reg-head { grid-column: 1 / -1; margin-bottom: clamp(14px, 2vh, 24px); }

.home .home-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: 16px;
  row-gap: 10px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--srh-hairline); }

.home .home-part:last-child .home-row,
.home .home-row:last-of-type { border-bottom: 1px solid var(--srh-hairline); }

.home .home-row:target {
  background: linear-gradient(90deg, color-mix(in srgb, var(--srk-accent-live) 14%, transparent), transparent 70%); }

.home .home-row-id {
  grid-column: id;
  display: flex;
  flex-direction: column;
  align-items: flex-start; }

.home .home-row-glyph {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--srk-accent-text);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round; }

.home .srk-row-num {
  font-family: var(--font-mono);
  font-size: var(--home-card);
  line-height: 1.3;
  color: var(--srh-ink-soft); }

.home .home-row > .home-row-name,
.home .home-row > .when,
.home .home-row > .price,
.home .home-row > .srk-row-actions { grid-column: name / end; }

.home .home-row h3 {
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.12; }

.home .home-row .who {
  margin-top: 6px;
  font-size: var(--home-card);
  line-height: 1.42;
  color: var(--srh-ink-soft); }

.home .home-row .when { max-width: 36em; }

.home .home-row .price {
  display: flex;
  flex-direction: column;
  font-size: var(--home-card);
  line-height: 1.35;
  color: var(--srh-ink-soft); }

.home .home-row .price b {
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--srh-pale);
  font-variant-numeric: tabular-nums; }

.home .srk-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px; }

.home .srk-arrow {
  font-size: var(--home-card);
  line-height: 1.3;
  padding-right: 4px; }

.home .srk-bonus,
.home .srk-later {
  grid-column: 1 / -1;
  max-width: 60em;
  font-size: var(--home-body);
  line-height: 1.45; }

.home .srk-bonus {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 3px solid var(--srk-accent-text);
  color: var(--srh-pale); }

.home .srk-later { margin-top: 16px; color: var(--srh-ink-soft); }

@media (max-width: 699px) {
  .home .home-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px; }

  .home .home-row > .home-row-id,
  .home .home-row > .home-row-name,
  .home .home-row > .when,
  .home .home-row > .price,
  .home .home-row > .srk-row-actions { grid-column: 1; }

  /* Phones: glyph and number share a row with the name. */

  .home .home-row .price { flex-direction: row; align-items: baseline; gap: 8px; }

  .home .home-row .price b { font-size: 26px; }

  .home .home-part .home-row { border-bottom: 1px solid var(--srh-hairline); }
}

/* ---------- 9. Sandbox close (round 3: the synced stage, at the end) ---------- */
.home .home-sandbox { align-items: center; }

/* ---------- 10. Portal ---------- */
.home .srk-portal { align-items: start; }

.home .srk-portal h2 { font-size: var(--home-h2); }

.home .srk-portal .label,
.home .srk-portal .help {
  font-size: var(--home-body); }

.home .addr .suffix { font-size: var(--home-card); }

.home .srk-portal .help { color: var(--srh-ink-soft); }

.home .srk-portal .mono { font-size: 1em; overflow-wrap: anywhere; }

/* ---------- Footer: small text clears the card floor ---------- */
.home .sr-footer__brand p,
.home .sr-footer__list,
.home .sr-footer__legal { font-size: 15px; }

.home .sr-footer__heading { font-size: 14px; color: var(--srh-ink-soft); }

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Specificity has to beat the :root:has() rule above. */
  :root:has(body.home) { scroll-snap-type: none; }

  .home .home-typing .home-w { opacity: 1; transition: none; }
  .home .home-typing .home-w--last::after { display: none; }
  .home .home-old::after,
  .home .home-old,
  .home .home-new { transition: none; }
  .home .home-aha-lede.is-waiting { opacity: 1; transform: none; }
}

/* ---------- Loop 2 (orchestrator, after the re-check) ---------- */

/* The two sandbox cards share one row height. */

/* The host in the hero pill stays at the 15px phone floor and on one line. */
@media (max-width: 420px) {
  .home .srk-hero-addr .mono { font-size: 15px; letter-spacing: -0.02em; }
}

/* Below desktop, back to top sits bottom left, so the legal links move to the
   right and the button never covers Privacy or Terms. */
@media (max-width: 999px) {
  .home .sr-footer__legal div { margin-left: auto; }
}

/* On phones the footer is compacted so the chevron's last move (page bottom)
   shows the whole footer under the header at 390x844. */
@media (max-width: 699px) {
  .home .sr-footer__inner { padding-top: 28px; padding-bottom: 24px; }
  .home .sr-footer__cols { gap: 24px 16px; padding-bottom: 24px; }
  .home .sr-footer__brand { gap: 12px; }
  .home .sr-footer__heading { margin-bottom: 10px; }
  .home .sr-footer__list { gap: 6px; }
  .home .sr-footer__legal { padding-top: 16px; gap: 10px 24px; }
}

/* ======================================================================
 * Round 2: brand lockups, the hero triptych, the desk clip, the timeline,
 * storage chips, industry photos, the up chevron and replayable motion.
 * Start states for motion live only under html.home-motion (set in the
 * head when motion is allowed), so JS off and reduced motion always show
 * every final state.
 * ====================================================================== */

/* ---------- Logotype lockups, sized by their logotype cap height ---------- */
/* Kit ratios (ASSETS.md): wordmark cap height / file height is 0.504 for
   ShareRing, 0.487 for ShareRing Link and 0.345 for ShareRing Me. Set --cap
   to the cap height of the words beside the lockup and every lockup lands
   on that cap height. Inter Tight's cap height is 0.727 em. */
.home { --cap: calc(var(--home-body) * 0.727); }
.home .home-lk { display: block; flex: none; width: auto; max-width: none; }
.home .home-lk.is-me { height: calc(var(--cap) / 0.345); }
.home .home-lk.is-link { height: calc(var(--cap) / 0.487); }

/* ShareRing Solutions stand-in: the kit ShareRing lockup plus "Solutions" in
   Inter Tight 500, its cap height equal to the wordmark's (0.504 of the
   lockup) on the wordmark's baseline (0.752 of the lockup from the top), and
   the kit's 0.56 x cap gap. A 1.443 line height puts Inter Tight's baseline
   at 0.752 of the line box, so the word shares the wordmark's baseline. */
.home .home-sol {
  --h: calc(var(--cap) / 0.504);
  display: inline-flex;
  align-items: flex-start;
  gap: calc(var(--h) * 0.282);
  height: var(--h);
  vertical-align: middle;
  white-space: nowrap; }
.home .home-sol img { height: var(--h); width: auto; max-width: none; flex: none; }
.home .home-sol-word {
  font-size: calc(var(--h) * 0.693);
  line-height: var(--h);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  color: #FFFFFF; }

/* A lockup leading its line: the words beside it share its cap height. */
.home .home-lk-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0.55em; }

/* Next-step links at the end of a scene. */
.home .home-next { margin-top: clamp(14px, 2.2vh, 24px); max-width: none; }
.home .home-next .srk-arrow { font-size: var(--home-btn); }

/* ---------- 1. The hero triptych ---------- */
@property --edge { syntax: "<length>"; inherits: true; initial-value: 0px; }
/*
 * The photos are the star. Over them: only the ShareRing Solutions
 * logotype, the eyebrow and the h1, on a top gradient as tall as that copy.
 * Each panel carries its industry name, promise and price at rest on a
 * bottom gradient; Start free and See how appear on hover or keyboard focus
 * with a mouse, and always show on touch, with JS off and under reduced
 * motion. The lede, the hero buttons and the address sit in a band under the
 * photos (the next stop on phones and on short screens).
 */
.home .srk-flow .srk-scene.home-tri {
  display: block;
  padding: 0;
  container-type: inline-size;
  overflow: clip; }
.home .srk-flow .srk-scene.home-tri > .home-tri-grid {
  --edge: max(var(--home-pad), calc((100cqw - var(--home-max)) / 2));
  max-width: none;
  margin: 0; }
.home .home-tri h1 {
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.06;
  max-width: none;
  margin: 0;
  text-shadow: 0 2px 24px rgba(1, 4, 15, 0.5); }
.home .home-tri-brand { --cap: clamp(13px, 1.1vw, 16px); margin: 0 0 clamp(12px, 1.8vh, 20px); max-width: none; }
.home .home-tri-eyebrow { margin-bottom: 0.6em; }
.home .home-tri-eyebrow-phone { display: none; }
.home .home-panels { list-style: none; margin: 0; padding: 0; }
.home .home-panel-media picture { display: block; width: 100%; height: 100%; }
.home .home-panel-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform-origin: 50% 55%; }
/* Focal points: the accountants papers and calculator; the real estate
   sign and QR code in the clear band between the headline and the panel
   text; the bookmakers field under the stand lights. */
.home .home-panel.is-accountants img { object-position: 55% 42%; }
.home .home-panel.is-realestate img { object-position: 40% 50%; }
.home .home-panel.is-bookmakers img { object-position: 50% 62%; }

.home .home-panel-name {
  margin: 0;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(1, 4, 15, 0.6); }
.home .home-panel-promise { margin-top: 6px; font-size: var(--home-card); line-height: 1.4; color: var(--srh-pale); }
.home .home-panel-price { margin-top: 4px; font-size: var(--home-card); line-height: 1.4; white-space: nowrap; color: var(--srh-ink-read); }
.home .home-panel-price b { color: #FFFFFF; font-weight: 700; font-variant-numeric: tabular-nums; }
.home .home-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.home .home-panel-actions .srk-btn { min-height: 44px; padding: 10px 18px; }
.home .home-panel-actions .srk-btn-secondary { background: color-mix(in srgb, var(--srh-ground) 55%, transparent); }

.home .home-tri-lede .srk-lede { max-width: 40em; }
.home .home-tri-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.home .home-tri-actions .srk-actions { margin-top: 0; }
.home .home-tri-actions .srk-hero-addr { margin-top: 0; background: color-mix(in srgb, var(--srh-ground) 80%, transparent); }

/* Phones: the first screen holds the logotype, the headline and the three
   panels stacked; the lede and the hero buttons follow on the next stop. */
@media (max-width: 699px) {
  .home .home-tri-grid { display: block; }
  .home .home-tri .home-part--open {
    justify-content: flex-start;
    gap: 12px;
    padding: 14px var(--home-pad) 58px; }
  .home .home-tri .home-part--intro {
    justify-content: center;
    padding: var(--home-top) var(--home-pad) var(--home-gutter); }
  .home .home-tri h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .home .home-tri-brand { --cap: 13px; margin-bottom: 10px; }
  .home .home-tri-eyebrow { display: none; }
  .home .home-tri-eyebrow-phone { display: block; }
  .home .home-tri-scrim { display: none; }
  .home .home-tri-lede .srk-lede { font-size: 20px; line-height: 1.45; }
  .home .home-panels { flex: 1; display: flex; flex-direction: column; gap: 8px; }
  .home .home-panel {
    position: relative;
    flex: 1 1 0;
    min-height: 100px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--srh-hairline);
    border-radius: 16px;
    isolation: isolate; }
  .home .home-panel-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
  .home .home-panel-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--srk-ground-live) 90%, transparent) 0,
      color-mix(in srgb, var(--srk-ground-live) 78%, transparent) 62%,
      color-mix(in srgb, var(--srk-ground-live) 40%, transparent) 100%); }
  /* The dusk photo is dark already: a lighter scrim and a lift. */

  .home .home-panel.is-bookmakers .home-panel-media img { filter: brightness(1.35) saturate(1.1); }
  .home .home-panel.is-accountants img { object-position: 50% 45%; }
  .home .home-panel.is-realestate img { object-position: 45% 50%; }
  .home .home-panel.is-bookmakers img { object-position: 60% 62%; }
  .home .home-panel-body { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 12px 14px; }
  .home .home-panel-name { font-size: 22px; }
  .home .home-panel-promise { margin-top: 4px; }
  .home .home-panel-price { margin-top: 2px; }
  .home .home-panel-actions { margin-top: 10px; gap: 8px; }
  .home .home-panel-actions .srk-btn { padding: 8px 16px; font-size: 16px; }
  .home .home-tri-actions { flex-direction: column; align-items: stretch; margin-top: 18px; }
  .home .home-tri-actions .srk-actions { width: 100%; }
}

/* Short phones (375x667, 360x640): the panels keep their name and both
   buttons on the first screen; the promise and the price are on the product
   rows the "See how" button goes to. */
@media (max-width: 699px) and (max-height: 760px) {
  .home .home-panel-promise,
  .home .home-panel-price { display: none; }
  .home .home-tri h1 { font-size: clamp(26px, 7.6vw, 32px); }
}

/* Motion: panels two and three rise in after the first (the first photo is
   the LCP image and is never hidden), and every photo pushes in slowly. */
.home-motion .home .home-panel { transition: opacity 700ms var(--srk-ease), transform 700ms var(--srk-ease); }
.home-motion .home .home-panel.is-realestate { transition-delay: 140ms; }
.home-motion .home .home-panel.is-bookmakers { transition-delay: 280ms; }
.home-motion .home .home-tri:not(.is-played) .home-panel.is-realestate,
.home-motion .home .home-tri:not(.is-played) .home-panel.is-bookmakers { opacity: 0; }
.home-motion .home .home-panel-media img { transition: transform 5s cubic-bezier(0.22, 1, 0.36, 1), filter 420ms var(--srk-ease); }
.home-motion .home .home-tri.is-played .home-panel-media img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .home .home-panel-media,
  .home .home-panel-media img,
  .home .home-panel-more,
  .home .home-panel-name { transition: none; }
}

/* ---------- 3. The aha: answers led by their lockups ---------- */
.home .home-aha-eb.is-new { display: none; }
.home .home-new.is-lk { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0.55em; }

/* ---------- 4. How it works: lockup lines ---------- */
.home .home-lk-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; --cap: calc(var(--home-lede) * 0.727); }
.home .home-lk-lines li { color: var(--srh-ink); }
.home .home-how-sees { margin-top: 12px; font-size: var(--home-body); color: var(--srh-ink-read); }
.home .srk-step-num { --cap: calc(var(--home-card) * 0.727); }
.home .srk-step-num .home-lk,
.home .srk-step-num .home-sol { margin-left: 0.2em; }
.home .srk-step-card .home-lk-line { --cap: calc(var(--home-body) * 0.727); margin-top: 0.6em; color: var(--srh-ink-read); }
.home .srk-phone-caption.home-lk-line { --cap: calc(var(--home-card) * 0.727); }

@media (max-width: 699px) {
  .home .home-lk-lines { --cap: calc(var(--home-body) * 0.727); gap: 6px; }
  .home .home-lk-lines li { font-size: var(--home-body); line-height: 1.4; }
  .home .home-how-sees { margin-top: 8px; }
  .home .srk-step-card .home-lk-line { --cap: calc(var(--home-card) * 0.727); }
  /* The phone holds under the up chevron's band. */
  .home .home-how-stage { top: calc(var(--home-header) + 42px); }
}

/* ---------- 5. Back at your desk: the clip is the scene ---------- */
.home .home-desk { display: grid; gap: clamp(18px, 2.6vh, 28px); }
.home .home-desk-copy { display: grid; gap: 8px clamp(32px, 4vw, 64px); align-items: end; }
.home .home-desk-copy h2 { margin-bottom: 0; }
.home .home-desk-copy .srk-lede { max-width: 32em; }
.home .home-desk .home-desk-fig {
  margin: 0 auto;
  width: 100%;
  /* As wide as the content, but never so tall that the scene runs past the
     screen: frame bar 42px, caption row 40px. */
  max-width: min(100%, calc((var(--home-scene) - var(--home-top) - var(--home-gutter) - var(--desk-copy, 150px) - 120px) * 1280 / 606)); }
.home .home-desk-fig .srk-vframe-screen { overflow: hidden; cursor: zoom-in; }
.home .home-desk-fig video { transform-origin: 0 0; transition: transform 800ms var(--srk-ease); will-change: transform; }
.home .home-desk-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-top: 0.8rem; }
.home .home-desk-cap .srk-figcap { margin: 0; }
.home .home-enlarge { font-size: var(--home-btn); }
.home .home-part--rating { display: none; }

.home .home-rating { margin: 0; }
.home .home-rating img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--srh-hairline);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.home .home-rating figcaption { margin-top: 10px; font-size: var(--home-card); line-height: 1.42; color: var(--srh-ink-soft); }

@media (max-width: 699px) {
  .home .srk-flow .srk-scene.home-desk-scene { padding-inline: 0; }
  .home .home-desk-scene .home-part { padding-inline: 0; }
  .home .home-desk-copy { padding-inline: var(--home-pad); }
  /* Edge to edge on phones, so the zoomed reasons stay readable. */
  .home .home-desk .home-desk-fig { max-width: none; }
  .home .home-desk-fig .srk-vframe { border-radius: 0; border-inline: 0; }
  .home .home-desk-cap { padding-inline: var(--home-pad); }
  .home .home-part--rating { display: flex; align-items: flex-start; padding-inline: var(--home-pad); }

}

/* The full-size view. */
.home .home-dialog {
  max-width: none;
  padding: 0;
  border: 1px solid var(--srh-hairline);
  border-radius: 16px;
  background: #F7F8FB;
  overflow: hidden; }
.home .home-dialog::backdrop { background: rgba(1, 4, 15, 0.86); }
.home .home-dialog-screen { position: relative; aspect-ratio: 1280 / 606; overflow: hidden; }
.home .home-dialog-screen video { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.home .home-dialog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end; padding: 10px 12px; background: var(--srh-navy-deep); }
.home .home-dialog-hint { margin-right: auto; font-size: var(--home-card); color: var(--srh-ink-soft); }

/* ---------- 6. Records: storage chips ---------- */
.home .home-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.home .home-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--srh-hairline);
  border-radius: 999px;
  background: color-mix(in srgb, var(--srh-navy-deep) 82%, transparent);
  font-size: var(--home-card);
  font-weight: 600;
  line-height: 1;
  color: var(--srh-pale); }
.home .home-chip:last-child { padding-left: 16px; }
/* The Drive icon, unmodified and smaller than the ShareRing lockups beside it. */
.home .home-chip img { flex: none; }
.home .home-records-copy .home-chips + p { margin-top: 14px; }

/* ---------- 7a. The handoff timeline ---------- */
/* One client's check, top to bottom: the rail and the step names on the
   left, the ShareRing lane and the You lane side by side. Wide screens put
   the heading and the calls to action beside it, on one screen; phones and
   tablets run it over three stops. */
.home .home-tl-head h2 { margin-bottom: 0.3em; }
.home .home-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.home .home-tl-grid { --tl-label: 22px; --tl-gap: 8px; }
.home .home-tl-lanes { display: grid; grid-template-columns: var(--tl-label) minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--tl-gap); align-items: end; margin-bottom: 8px; }
.home .home-tl-lanes::before { content: ""; }
.home .home-tl-lane { font-size: var(--home-card-title); font-weight: 700; line-height: 1.2; color: var(--srh-pale); }
.home .home-tl-lane.is-sr img { display: block; height: calc(var(--home-card) * 0.727 / 0.504); width: auto; max-width: none; }
.home .home-tl-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-label) minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px var(--tl-gap);
  padding-bottom: 12px; }
.home .home-tl-step:last-child { padding-bottom: 0; }
/* The rail: each step draws its own stretch, node to next node. */
.home .home-tl-step::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: -4px;
  width: 2px;
  background: var(--srk-accent-text);
  transform-origin: center top;
  transition: transform 420ms var(--srk-ease); }
.home .home-tl-step.is-keep::before { display: none; }
.home .home-tl-mid { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: none; }
.home .home-tl-mid b { font-size: var(--home-card-title); line-height: 1.2; color: var(--srh-pale); }
.home .home-tl-node {
  position: relative;
  z-index: 1;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--srk-accent-text);
  background: var(--srk-accent-live);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--srk-ground-live) 90%, transparent); }
.home .home-tl-chip {
  display: inline-block;
  border: 1px solid var(--srk-accent-text);
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--srh-pale); }
.home .home-tl-sr,
.home .home-tl-you {
  max-width: none;
  padding: 8px 9px;
  border-radius: 12px;
  font-size: var(--home-card);
  line-height: 1.38;
  color: var(--srh-ink-read); }
.home .home-tl-sr {
  grid-column: 2;
  --cap: calc(var(--home-card) * 0.66);
  border: 1px solid color-mix(in srgb, var(--srk-accent-text) 45%, transparent);
  background: color-mix(in srgb, var(--srk-accent-live) 12%, var(--srh-navy-deep)); }
.home .home-tl-you {
  grid-column: 3;
  border: 1px dashed rgba(234, 240, 255, 0.34);
  background: color-mix(in srgb, var(--srh-navy-deep) 84%, transparent);
  color: var(--srh-pale); }
.home .home-tl-sr .home-lk { margin: 2px 0 5px; max-width: 100%; }
.home .home-tl-sr .home-lk.is-link { object-fit: contain; object-position: left center; }
.home .home-tl-sr .home-lk + span + .home-lk { margin-top: 8px; }
.home .home-tl-sr span:not(.visually-hidden) { display: block; }
.home .home-tl-foot { display: grid; gap: 14px; }
.home .home-tl-notes p { max-width: none; font-size: var(--home-card); line-height: 1.45; color: var(--srh-ink-read); }
.home .home-tl-notes p + p { margin-top: 6px; color: var(--srh-ink-soft); }
.home .home-tl-ctas { margin-top: 0; }

/* Phones and tablets: three stops. */
@media (max-width: 999px) {
  .home .srk-flow .srk-scene.home-tl-scene { display: block; padding-block: 0; }
  .home .home-tl-scene > .home-tl-grid { display: block; }
  .home .home-tl-scene .home-part {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    min-height: var(--home-scene);
    padding: var(--home-top) 0 var(--home-gutter); }
}
@media (max-width: 699px) {
  .home .home-tl-ctas { flex-direction: column; }
  .home .home-tl-ctas .srk-btn { width: 100%; padding-inline: 14px; }
}

/* ---------- 7b. Guide cards with their industry photo ---------- */
.home .home-card.has-photo { padding-top: 0; overflow: hidden; }
.home .home-card-photo {
  position: relative;
  display: block;
  align-self: stretch;
  margin: 0 -22px 6px;
  aspect-ratio: 16 / 7;
  overflow: hidden; }
.home .home-card-photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
/* One dark overlay for every industry photo. */
.home .home-card-photo::after,
.home .home-row-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 32, 0.08), rgba(5, 10, 32, 0.38)); }
.home .home-card.has-photo h3 { display: flex; align-items: center; gap: 10px; }
.home .home-card.has-photo .home-card-glyph { width: 30px; height: 30px; margin: 0; flex: none; }
@media (max-width: 699px) {
  .home .home-card.has-photo { display: grid; }
  .home .home-card-photo { margin: 0; aspect-ratio: auto; }

  .home .home-card.has-photo p { margin: 0; padding-bottom: 4px; }

  .home .home-card.has-photo .home-card-glyph { width: 24px; height: 24px; }
}
.home .home-guides > .home-next { margin-top: clamp(16px, 2.4vh, 26px); }

/* ---------- 8. Product rows with their industry photo ---------- */
.home .home-row-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--srh-hairline); }
.home .home-row-photo img { width: 100%; height: 100%; object-fit: cover; }
.home .home-row-tag { display: flex; align-items: center; gap: 8px; }
.home .home-row-tag .home-row-glyph { width: 28px; height: 28px; }
.home .home-row-id { gap: 8px; }

.home .home-reg-next { grid-column: 1 / -1; margin-top: 10px; }

/* ---------- 10. Portal ---------- */
.home .srk-portal .home-next { margin-top: 14px; }

/* ---------- The up chevron: the down chevron's look, under the header ---------- */
.home .srk-nav--up {
  top: var(--home-header);
  height: 36px;
  width: 48px;
  display: grid;
  place-items: center;
  animation: none;
  transition: opacity 300ms var(--srk-ease), visibility 0s linear 0s; }
/* Hidden means out of the tab order too, once the fade is done. */
.home .srk-nav--up.is-hidden {
  visibility: hidden;
  transition: opacity 300ms var(--srk-ease), visibility 0s linear 300ms; }
.home .srk-nav--up:focus-visible,
.home .srk-nav--down:focus-visible { outline: 2px solid var(--srk-accent-text); outline-offset: 3px; border-radius: 8px; }
/* Never over the open drawer, never over the portal field. */
.home:has(#drawer.is-open) .srk-nav--up,
.home:has(#portal-form :focus) .srk-nav--up { visibility: hidden; }

/* ---------- The colour journey: the cell wall follows the live ground ---------- */
/* At the default ground #050A20 this gives #0B1232, within 2 units of round
   1's fixed #0A1238, so a page without the journey looks as before. */
.home { --grid-base: color-mix(in srgb, var(--srk-ground-live) 92%, #4D6BFF); }

/* ---------- Motion: reset frames and the armed states ---------- */
/* A reset runs with every transition and animation off for one frame, while
   the element is wholly off screen, so it is never seen running backwards. */
.home .home-snap,
.home .home-snap * { transition: none !important; animation: none !important; }

/* Records: the three nodes light in turn. */
.home-motion .home .home-flow > li { transition: opacity 500ms var(--srk-ease); }
.home-motion .home .home-flow.is-armed > li:not(.is-lit) { opacity: 0.35; }

/* Timeline: steps light in turn and the rail draws from node to node. */
.home-motion .home .home-tl-step { transition: opacity 420ms var(--srk-ease); }
.home-motion .home .home-tl-node { transition: transform 520ms var(--srk-spring), background-color 420ms var(--srk-ease); }
.home-motion .home .home-tl.is-armed .home-tl-step:not(.is-lit) { opacity: 0.32; }
.home-motion .home .home-tl.is-armed .home-tl-step:not(.is-lit) .home-tl-node { transform: scale(0.6); background: var(--srh-navy-deep); }
.home-motion .home .home-tl.is-armed .home-tl-step:not(.is-lit)::before { transform: scaleY(0); }

/* Guide cards: a run, 80 ms apart, and the photos push in. */
.home-motion .home .home-guide-cards > li { transition: opacity 700ms var(--srk-ease), transform 700ms var(--srk-ease); }
.home-motion .home .home-guide-cards:not(.is-in) > li { opacity: 0; transform: translateY(18px); }
.home-motion .home .home-guide-cards > li:nth-child(2) { transition-delay: 80ms; }
.home-motion .home .home-guide-cards > li:nth-child(3) { transition-delay: 160ms; }
.home-motion .home .home-card-photo img { transition: transform 5s cubic-bezier(0.22, 1, 0.36, 1); }
.home-motion .home .home-guide-cards.is-in .home-card-photo img { transform: scale(1.05); }

/* Sandbox pair: the lockups meet and the line between them draws. */

/* Counters keep their width: tabular figures. */

@media (prefers-reduced-motion: reduce) {

  .home .home-dialog-screen video { transition: none; }
  .home .srk-nav--up { transition: none; }
}

/* ---------- Round 2 fit pass ---------- */
@media (max-width: 699px) {
  .home .home-rating { width: 100%; }
  .home .home-rating img { width: 100%; max-width: 100%; }
  /* Product rows on a phone: a small photo beside the number, not a banner. */
  .home .home-row-id { flex-direction: row; align-items: center; gap: 12px; }
  .home .home-row-photo { width: 96px; flex: none; aspect-ratio: 3 / 2; }
  /* Sandbox: the pair stays on the same screen as the copy. */
  .home .home-sandbox { gap: 18px; }
  .home .home-sandbox .srk-actions { margin-top: 1.2em; }
}

/* Desk: the clip's width is set from the room left under the copy. */
.home .home-desk { --desk-copy: 196px; }

@media (max-width: 699px) {
  /* The aha: tighter rows so the payoff stays on the screen. */
  .home .home-struck { row-gap: 8px; }
  .home .home-old { font-size: 22px; }
  .home .home-new { font-size: 16px; }
  .home .home-new.is-lk { --cap: calc(16px * 0.727); }
  .home .home-aha-pay { margin-top: 16px; }
  .home .home-aha-pay h2 { font-size: 28px; }
  .home .home-aha-pay .srk-lede { font-size: var(--home-body); }

  /* Guide cards: photo on the left, title, line and button on the right. */
  .home .home-card.has-photo { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 2px 12px; align-items: start; padding: 0 12px 0 0; }
  .home .home-card-photo { grid-row: 1 / -1; min-height: 0; height: 100%; }
  .home .home-card.has-photo h3 { grid-column: 2; padding-top: 10px; }
  .home .home-card.has-photo p { grid-column: 2; line-height: 1.38; }
  .home .home-card.has-photo .home-card-btn { grid-column: 2; justify-self: start; align-self: start; margin: 6px 0 12px; min-height: 44px; padding: 8px 16px; }
  .home .home-guides .srk-scene h2,
  .home .home-guides h2 { font-size: 28px; }

  /* Products, last stop: the bonus and the roadmap at card size. */
  .home .srk-bonus,
  .home .srk-later { font-size: var(--home-card); line-height: 1.42; }
  .home .srk-later { margin-top: 10px; }
  .home .home-row { padding: 14px 0; }
}

/* ---------- Fit pass 4 ---------- */
@media (max-width: 699px) {
  /* Records, first phone stop: the two in-transit tags go (the kept-for tag
     stays), chips are a little shorter, the flow is tighter. */
  .home .home-chip { height: 38px; }
  .home .home-chips { margin-top: 10px; }
  .home .home-records-copy .home-chips + p { margin-top: 10px; }
  .home .home-flow li:not(.is-held) .when { display: none; }

  .home .home-flow p { line-height: 1.36; }

  /* Guides: a tighter head. */

  .home .home-guides h2 { font-size: 26px; }
  .home .home-guide-cards { gap: 8px; }
  .home .home-guides > .home-next { margin-top: 12px; }
}
@media (max-width: 699px) {
  .home .home-records-copy .srk-lede { font-size: var(--home-body); line-height: 1.42; }

  .home .home-guides > .srk-scene-copy { margin-bottom: 10px; }
  .home .home-guides .srk-eyebrow { margin-bottom: 0.6em; }
}
@media (max-width: 699px) {

  .home .home-flow h3 { margin: 0 0 2px; font-size: 17px; }
  .home .home-records .home-part { gap: 12px; }
}
@media (max-width: 699px) { .home .home-records-copy h2 { margin-bottom: 0.3em; } .home .home-records-copy .srk-eyebrow { margin-bottom: 0.7em; } }
@media (max-width: 699px) {
  .home .home-desk-scene .home-part--rating { padding-inline: var(--home-pad); justify-content: center; }
  .home .srk-phone-caption.home-lk-line { display: none; }
}

/* The full-size view keeps the clip whole: as wide as the screen allows
   while its 1280:606 frame and the bar still fit the height. */
.home .home-dialog { width: min(96vw, 1600px, calc((94vh - 64px) * 1280 / 606)); max-height: none; }
.home .home-dialog-screen { max-height: none; }
.home .home-dialog-screen video { transition: none; }

/* Desk: the next step sits beside "View full size" on wide screens; on
   phones it follows the rating still on the next stop. */
.home .home-desk-links { display: inline-flex; flex-wrap: wrap; gap: 8px 24px; }
.home .home-desk-next { font-size: var(--home-btn); }
@media (max-width: 699px) { .home .home-desk-next { display: none; } }

/* The up chevron steps aside over the footer (the theme does the same);
   it stays clickable, and keyboard focus brings it back. */
.home .srk-nav--up.is-aside { opacity: 0; }
.home .srk-nav--up.is-aside:focus-visible { opacity: 1; }
@media (max-width: 699px) { .home .home-how-stage { padding-bottom: 14px; } }

/* Phones: the app inside the phone mock is spaced tighter (type unchanged,
   11.5px floor), so every screen fits the smaller phone the up chevron band
   leaves room for. */
@media (max-width: 699px) {
  .home .app { padding: 13% 7% 5%; }
  .home .app-brand { margin-bottom: 0.6em; }

  .home .app-org { padding: 0.5em; }
  .home .app-list { margin-top: 0.5em; }

  .home .app-btn { height: 2.7em; }
  .home .app-foot { margin-top: 0.5em; }
  .home .app-view { margin: 0.8em 0; }
  .home .app-done { margin: 1.2em auto 0.8em; }
}
@media (max-width: 699px) { .home .app { padding-top: 19%; } .home .app h4 { font-size: 1.22em; } .home .app-list li { padding: 0.3em 0; } .home .app-org { margin-top: 0.5em; } }
@media (max-width: 699px) { .home .app-foot { white-space: normal; text-align: center; line-height: 1.3; } .home .app-list li small { white-space: normal; text-align: right; max-width: 42%; line-height: 1.2; } }
.home .home-desk figure.srk-stage.home-desk-fig { margin-inline: auto; }
.home .srk-step-num .srk-tag { font-size: var(--home-card); letter-spacing: 0.02em; text-transform: none; }

/* Fault 12: the caret blinks three times and then goes. */
.home .home-typing.is-typed .home-w--last::after { animation: home-caret 900ms steps(1) 3 forwards; }

/* Faults 5 and 9: the records node lockups read as brand (wordmark cap
   17 px on wide screens, 12 px on phones), and the Drive icon stays below
   that cap height at every size. */
.home .home-flow { --lk: calc(17px / 0.487); --node-w: 258px; }
.home .home-node { height: 64px; padding: 0 12px; }
.home .home-flow li::before { top: 68px; }
.home .home-chip img { width: 16px; height: 16px; }
@media (max-width: 999px) {
  .home .home-flow { --lk: calc(13px / 0.487); --node-w: 200px; }
  .home .home-node { height: 56px; }
  .home .home-flow li::before { top: 60px; }
  .home .home-chip img { width: 12px; height: 12px; }
}
@media (max-width: 699px) {
  .home .home-flow { --lk: calc(12px / 0.487); --node-w: 180px; }
  .home .home-node { padding: 0 8px; }
  .home .home-flow li::before { top: 52px; }
  .home .home-chip img { width: 11px; height: 11px; }
  .home .home-chip { gap: 7px; }
}

/* Fault 14: the CDD record cards carry their industry photo, beside the
   title and line so the cards keep their height. */
.home .home-card.has-thumb {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 4px 14px;
  align-items: start;
  padding: 0 18px 0 0;
  overflow: hidden; }
.home .home-card-thumb { position: relative; grid-row: 1 / -1; align-self: stretch; min-height: 96px; overflow: hidden; }
.home .home-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home .home-card-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 32, 0.08), rgba(5, 10, 32, 0.38)); }
.home .home-card.has-thumb h4 { display: flex; align-items: center; gap: 8px; padding-top: 14px; }
.home .home-card.has-thumb .home-card-glyph { width: 26px; height: 26px; margin: 0; flex: none; }
.home .home-card.has-thumb p { margin: 0; padding-bottom: 14px; }

/* Fault 6: the timeline on the page grid: its copy starts at the header's
   content edge and its lanes end inside it. The You cells hug their text
   (no tall empty box), and the "Kept for at least 7 years" chip sits on one
   line under the Keep row. */
.home .home-tl-chiprow { max-width: none; margin: 0; }
.home .home-tl-chip { white-space: nowrap; font-size: var(--home-card); padding: 2px 10px; }
.home .home-tl-step.is-keep .home-tl-chiprow { grid-column: 2 / -1; grid-row: 2; }
.home .home-tl-step.is-keep .home-tl-sr,
.home .home-tl-step.is-keep .home-tl-you { grid-row: 3; }
.home .home-tl-you { align-self: start; }

/* Fault 7: product rows on phones carry a wide photo where the stop has
   room (rows 1 and 2); row 3 shares its stop with the bonus line. */
@media (max-width: 699px) {
  .home .home-reg > .home-part:nth-child(-n+2) .home-row-id { flex-direction: column; align-items: stretch; gap: 10px; }
  .home .home-reg > .home-part:nth-child(-n+2) .home-row-photo { width: 100%; aspect-ratio: 16 / 7; }
  .home .home-reg > .home-part:first-child .home-row-photo { aspect-ratio: 16 / 5; }
}

/* Fault 16: the price unit and the row links never wrap awkwardly. */
.home .home-row .price { white-space: nowrap; }
.home .srk-row-actions .srk-arrow { white-space: nowrap; }

/* Fault 18: the desk caption breaks evenly, no lone last word. */
.home .home-desk-cap .srk-figcap { text-wrap: balance; }

/* Fault 8: on short screens back to top would sit over text; the up chevron
   and the header do its job there. */
@media (max-height: 700px) { .home .srk-top { display: none; } }

/* Fault 4: the phone caption, lockup first, one sentence. */
.home .srk-phone-caption.home-lk-line { flex-wrap: nowrap; text-align: left; justify-content: center; }
.home .srk-phone-caption.home-lk-line span { text-wrap: balance; }

/* Records on phones: each node's lockup sits beside its title and the line
   runs the full width under both, so the bigger lockups fit the stop. */
@media (max-width: 699px) {
  .home .home-flow li { grid-template-columns: var(--node-w) minmax(0, 1fr); grid-template-rows: auto auto; }
  .home .home-flow li > div { display: contents; }
  .home .home-flow li > div > h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
  .home .home-flow li > div > p,
  .home .home-flow li > div > .when { grid-column: 1 / -1; }
  .home .home-flow li > div > .when { justify-self: start; margin-top: 0; }
  .home .home-flow li::before { display: none; }
}
@media (max-width: 699px) { .home .home-flow p { max-width: none; } }
@media (max-width: 699px) { .home .home-node { height: 42px; } .home .home-flow li { row-gap: 4px; padding-bottom: 8px; } }

/* Fault 20: a reset changes nothing in layout. The answers keep one
   containing block (their hidden "Instead:" prefix never re-parents), and
   the clip control keeps one width for both labels. */
.home .home-new { position: relative; }
.home .home-desk-fig .srk-play { min-width: 7.4em; justify-content: center; }
@media (max-width: 699px) {
  .home .home-panel.is-bookmakers .home-panel-media::after {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--srk-ground-live) 84%, transparent) 0,
      color-mix(in srgb, var(--srk-ground-live) 58%, transparent) 62%,
      color-mix(in srgb, var(--srk-ground-live) 12%, transparent) 100%); }
}
/* Keep cards: the line stays beside the photo at every size; tablets stack
   the three cards (the keep cards have a stop of their own there). */
.home .home-card.has-thumb h4,
.home .home-card.has-thumb p { grid-column: 2; }
@media (max-width: 699px) {
  .home .home-card.has-thumb { grid-template-columns: 84px minmax(0, 1fr); gap: 2px 12px; padding: 0 12px 0 0; }
  .home .home-card.has-thumb h4 { padding-top: 10px; }
  .home .home-card.has-thumb p { padding-bottom: 10px; }
  .home .home-card-thumb { min-height: 84px; }
}
/* Panels two and three enter by fading and settling from a hair smaller, anchored
   at the top, so their boxes never reach past the hero into the next stop. */
.home-motion .home .home-tri:not(.is-played) .home-panel.is-realestate,
.home-motion .home .home-tri:not(.is-played) .home-panel.is-bookmakers { transform: scale(0.97); transform-origin: 50% 0; }

/* ======================================================================
 * Fix pass 2 (after the re-checks).
 * ====================================================================== */

/* High: the clip's Play/Pause control sits in the frame's address bar, in
   the flow, visible and clickable at every size, with a visible focus ring
   (the screen below clips the zoomed clip, so nothing may hang over it). */
.home .home-desk-fig .srk-vframe-bar span { padding-right: 0; }
.home .home-desk-fig .srk-vframe-bar .srk-play {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  margin-left: auto;
  flex: none; }
.home .home-desk-fig .srk-play:focus-visible { outline: 2px solid var(--srk-accent-text); outline-offset: 2px; }

/* N2: on the band's own stop (phones, short screens), the three industries
   as photo links to their product rows, so the stop is never bare. On tall
   screens the band shares the hero's screen and the panels do this job. */
.home .home-tri-pick { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 699px), (min-width: 700px) and (max-height: 820px) {
  .home .home-tri-pick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: clamp(18px, 3vh, 28px); }
  .home .home-tri-pick a {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--srh-hairline);
    border-radius: 14px;
    background: color-mix(in srgb, var(--srh-navy-deep) 82%, transparent);
    color: var(--srh-pale);
    text-decoration: none;
    transition: border-color 240ms var(--srk-ease), transform 260ms var(--srk-spring); }
  .home .home-tri-pick a:hover { border-color: var(--srk-accent-text); transform: translateY(-2px); }
  .home .home-tri-pick-photo { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
  .home .home-tri-pick-photo img { width: 100%; height: 100%; object-fit: cover; }
  .home .home-tri-pick-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 32, 0.05), rgba(5, 10, 32, 0.35)); }
  .home .home-tri-pick-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 12px 12px;
    font-size: var(--home-card);
    font-weight: 700;
    line-height: 1.25; }
  .home .home-tri-pick-name::after {
    content: "";
    flex: none;
    width: 0.45em;
    height: 0.45em;
    border-top: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    transform: rotate(45deg); }
}
@media (max-width: 699px) {
  .home .home-tri-pick { gap: 8px; }
  .home .home-tri-pick-name { padding: 8px 9px 10px; font-size: 15px; }
  .home .home-tri-pick-name::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .home .home-tri-pick a { transition: none; } .home .home-tri-pick a:hover { transform: none; } }

/* N5: on short screens the down chevron steps aside while text sits under
   it (home-motion.js); it stays focusable and focus shows it. */
.home .srk-nav--down.is-aside { opacity: 0; animation: none; }
.home .srk-nav--down.is-aside:focus-visible { opacity: 1; }
/* ======================================================================
 * Round 3 (8 Oct 2026): larger industry photos, red straight strikes,
 * the payoff beats, the regulation moment, brand sweeps and the synced
 * sandbox. Tablet and desktop rules are in home-wide.css. The specs
 * behind these rules: round-3 LAYOUT.md and MOTION-3.md.
 * ====================================================================== */

@media (max-width: 999px) {
  .home .home-keep .home-card.has-thumb { grid-template-columns: 44% minmax(0, 1fr); column-gap: 16px; padding: 0 16px 0 0; }
  .home .home-keep .home-card-thumb { min-height: clamp(150px, 22vh, 220px); }
}

@media (max-width: 699px) {
  .home .home-guide-cards .home-card.has-photo {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px; }
  .home .home-guide-cards .home-card-photo { position: absolute; inset: 0; z-index: -1; height: auto; grid-row: auto; margin: 0; }

  .home .home-guide-cards .home-card-photo img { position: absolute; top: 0; right: 0; width: 72%; height: 100%; }
  .home .home-guide-cards .home-card-photo::after {
    background: linear-gradient(90deg,
      var(--srh-navy-deep) 0,
      var(--srh-navy-deep) 28%,
      color-mix(in srgb, var(--srh-navy-deep) 90%, transparent) 50%,
      color-mix(in srgb, var(--srh-navy-deep) 76%, transparent) 64%,
      color-mix(in srgb, var(--srh-navy-deep) 0%, transparent) 86%); }
  .home .home-guide-cards .home-card.has-photo h3,
  .home .home-guide-cards .home-card.has-photo p,
  .home .home-guide-cards .home-card.has-photo .home-card-btn { grid-column: 1; max-width: 66%; }
  .home .home-guide-cards .home-card.has-photo p { max-width: 66%; text-shadow: 0 1px 8px rgba(1, 4, 15, 0.8); }
  .home .home-guide-cards .home-card.has-photo h3 { text-shadow: 0 1px 8px rgba(1, 4, 15, 0.8); }
  .home .home-guide-cards .home-card.has-photo .home-card-btn { background: color-mix(in srgb, var(--srh-navy-deep) 70%, transparent); }
}

@media (max-width: 699px) {
  .home #products .home-part > .home-row { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
  .home #products .home-row > .home-row-id { flex: 1 1 0; align-self: stretch; position: relative; display: block; min-height: 72px; max-height: 260px; }
  .home #products .home-reg > .home-part .home-row-photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .home #products .home-row-tag { position: absolute; left: 12px; bottom: 10px; z-index: 1; }
  .home #products .home-row-tag .home-row-glyph { stroke: #FFFFFF; }
  .home #products .home-row-tag .srk-row-num { color: #FFFFFF; text-shadow: 0 1px 6px rgba(1, 4, 15, 0.7); }
}

.home .home-card-thumb picture,
.home .home-card-photo picture,
.home .home-row-photo picture { display: contents; }

/* ---------- Round 3, point 2: focal points for the v3 photos ---------- */

.home .home-panel.is-accountants img { object-position: 45% 45%; }
.home .home-panel.is-realestate img { object-position: 55% 40%; }
.home .home-panel.is-realestate .home-panel-media img { transform-origin: 50% 55%; }

@media (max-width: 699px) {
  .home .home-panel.is-accountants img { object-position: 50% 50%; }
  .home .home-panel.is-realestate img { object-position: 50% 30%; }
}

.home :is(.home-card-thumb, .home-card-photo, .home-row-photo) img[src*="real-estate"] { object-position: 50% 35%; }
.home .home-tri-pick-photo img[src*="real-estate"] { object-position: 50% 30%; }

/* ---------- Round 3: red, straight strikes ---------- */
.home .home-old::after { content: none; }
.home .home-old-x {
  position: absolute; inset: 0;
  color: transparent; pointer-events: none; user-select: none; }
.home .home-old-x > span {
  --t: max(3px, 0.09em);
  background: linear-gradient(#FF5A5F, #FF5A5F) no-repeat;
  background-position: 0 calc(0.695em - var(--t) / 2);
  background-size: 100% var(--t);
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  padding-inline: 0.08em; margin-inline: -0.08em; }

.home-motion .home .home-struck.is-armed .home-old-x > span { background-size: 0% var(--t); transition: background-size 520ms cubic-bezier(0.65, 0, 0.35, 1); }
.home-motion .home .home-struck.is-armed li.is-struck .home-old-x > span { background-size: 100% var(--t); }

/* ---------- Round 3: the payoff beats ---------- */
.home .home-beat {
  background: linear-gradient(var(--srk-accent-text), var(--srk-accent-text)) no-repeat;
  background-position: 0 100%;
  background-size: 0% 0.07em;
  padding-bottom: 0.04em; }
.home .home-beat-tick {
  display: inline-block; width: 0.82em; height: 0.82em; margin-left: 0.18em; vertical-align: -0.06em;
  fill: none; stroke: var(--srk-accent-text); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 0; overflow: visible; }
.home .home-beats-sub { font-size: var(--home-lede); color: var(--srh-ink-read); }

.home-motion .home .home-beats.is-armed .home-beat {
  opacity: 0.28;
  transition: opacity 360ms var(--srk-ease), background-size 360ms cubic-bezier(0.65, 0, 0.35, 1); }
.home-motion .home .home-beats.is-armed .home-beat.is-lit { opacity: 1; background-size: 100% 0.07em; }
.home-motion .home .home-beats.is-armed .home-beat.is-past { opacity: 1; background-position: 100% 100%; background-size: 0% 0.07em; transition-duration: 360ms, 300ms; }
.home-motion .home .home-beats.is-armed .home-beat-tick { stroke-dashoffset: 100; transition: stroke-dashoffset 560ms cubic-bezier(0.65, 0, 0.35, 1); }
.home-motion .home .home-beats.is-armed.is-ticked .home-beat-tick { stroke-dashoffset: 0; }
.home .home-nowrap { white-space: nowrap; }

.home .home-aha-pay .home-beats-sub { margin-bottom: 0.5em; }
.home .home-aha-more { max-width: 40em; margin: 0; font-size: var(--home-body); color: var(--srh-ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .home .home-old-x > span, .home .home-beat, .home .home-beat-tick { transition: none !important; }
}

/* ---------- Round 3: brand sweep (wipe, glint, glow) ---------- */
.home .home-brand {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
  vertical-align: middle; }
.home .home-brand.is-group { display: inline-flex; line-height: normal; }
.home .home-sol.home-brand { display: inline-flex; }
.home .home-lk-line > .home-brand,
.home .home-new.is-lk > .home-brand,
.home .srk-step-num > .home-brand { display: block; }

.home .home-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, transparent 40%, var(--brand-glint, #FFFFFF) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-mask: var(--brand-src, none) 0 0 / auto 100% no-repeat;
          mask: var(--brand-src, none) 0 0 / auto 100% no-repeat; }
.home .home-brand { --brand-glint: color-mix(in srgb, var(--srk-accent-live) 72%, #FFFFFF); }
.home .home-brand.is-navy { --brand-glint: #7FA6FF; }

.home-motion .home .home-brand {
  clip-path: inset(-16px 100% -16px -16px);
  transition: clip-path 700ms cubic-bezier(0.65, 0, 0.35, 1); }
.home-motion .home .home-brand.is-swept { clip-path: inset(-16px -16px -16px -16px); }
.home-motion .home .home-brand.is-swept::after { animation: home-glint 900ms cubic-bezier(0.4, 0, 0.2, 1) 380ms both; }
.home-motion .home .home-brand.is-swept > img,
.home-motion .home .home-brand.is-swept .home-sol-word { animation: home-glow 1100ms ease-out 500ms both; }

@keyframes home-glint {
  0% { opacity: 1; background-position: 100% 0; }
  100% { opacity: 1; background-position: 0% 0; } }
@keyframes home-glow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  40% { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--srk-accent-live) 70%, transparent)); } }

.home-motion .home .home-brand.is-group.is-swept .home-sol-word,
.home-motion .home .home-brand.is-group.is-swept > span:not(.home-sol-word) {
  background: linear-gradient(100deg, currentColor 40%, var(--brand-glint) 50%, currentColor 60%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: home-glint-text 900ms cubic-bezier(0.4, 0, 0.2, 1) 520ms both, home-glow 1100ms ease-out 500ms both; }
@keyframes home-glint-text { from { background-position: 100% 0; } to { background-position: 0% 0; } }

@media (prefers-reduced-motion: reduce) {
  .home .home-brand { clip-path: none !important; transition: none !important; }
  .home .home-brand::after,
  .home .home-brand > img,
  .home .home-brand .home-sol-word { animation: none !important; } }

/* ---------- Round 3: the regulation moment ---------- */
.home .home-law-stage { display: grid; justify-items: center; gap: clamp(16px, 2.4vh, 28px); }
.home .home-law-art { position: relative; width: min(100%, 400px); }
.home .home-law-art .home-seal { width: 100%; }

.home .home-law-tick {
  position: absolute; right: -2%; bottom: -2%; width: 24%; aspect-ratio: 1;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45)); }
.home .home-law-tick svg { display: block; width: 100%; height: 100%; overflow: visible; }
.home .home-law-tick-disc { fill: var(--srk-accent-live); }
.home .home-law-tick-path { fill: none; stroke: var(--srk-on-accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.home .home-law-answer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 0; max-width: 26em; text-align: center; text-wrap: balance; }
.home .home-law-answer .home-brand img { height: clamp(36px, 3.4vw, 48px); width: auto; display: block; }
.home .home-law-line { font-size: var(--home-body); font-weight: 600; color: var(--srh-pale); }

.home-motion .home .home-law-tick { transform: scale(0.6); opacity: 0; transition: transform 420ms var(--srk-spring), opacity 300ms var(--srk-ease); }
.home-motion .home .home-law-tick-path { stroke-dashoffset: 100; transition: stroke-dashoffset 520ms cubic-bezier(0.65, 0, 0.35, 1); }
.home-motion .home .home-law-line { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--srk-ease), transform 500ms var(--srk-ease); }
.home-motion .home .home-law-stage.is-ticked .home-law-tick { transform: none; opacity: 1; }
.home-motion .home .home-law-stage.is-drawn .home-law-tick-path { stroke-dashoffset: 0; }
.home-motion .home .home-law-stage.is-said .home-law-line { opacity: 1; transform: none; }

@media (max-width: 699px) {
  .home .home-law-art { width: min(68vw, 270px); }
  .home .home-law-answer .home-brand img { height: 36px; } }
@media (prefers-reduced-motion: reduce) {
  .home .home-law-tick, .home .home-law-tick-path, .home .home-law-line { transition: none !important; }
}

/* ---------- Round 3, point 6: larger lockups ---------- */

.home { --lk-scale: 1.3; }
@media (max-width: 699px) { .home { --lk-scale: 1.2; } }
.home .home-lk.is-me   { height: calc(var(--cap) * var(--lk-scale) / 0.345); }
.home .home-lk.is-link { height: calc(var(--cap) * var(--lk-scale) / 0.487); }
.home .home-sol        { --h: calc(var(--cap) * var(--lk-scale) / 0.504); }
.home .home-tri-brand .home-sol { --h: clamp(34px, 3.4vw, 52px); }
.home .home-tl-lane.is-sr img { height: calc(var(--home-card) * 0.727 * var(--lk-scale) / 0.504); }

.home .home-node-link { height: calc(var(--lk) * 1.2); }
.home .home-node-me   { height: calc(var(--lk) * 1.414 * 1.2); }
.home .home-flow { --node-w: 310px; }
@media (max-width: 999px) { .home .home-flow { --node-w: 240px; } }
@media (max-width: 699px) { .home .home-flow { --node-w: 216px; } }

.home .home-tl-sr .home-brand + span + .home-brand { margin-top: 8px; }
@media (max-width: 699px) {
  .home .home-aha-grid, .home .home-how-head { --lk-scale: 1.1; }
}

@media (max-width: 699px) {
  .home .home-law-art { width: min(80vw, 320px); }
  .home .home-law-answer .home-brand img { height: 40px; }
}
@media (max-width: 699px) {
  .home .home-how-head { --lk-scale: 1.05; }
  .home .home-lk-lines { gap: 3px; }
  .home .home-how-sees { margin-top: 5px; }
}

/* ---------- Round 3: the synced sandbox ---------- */
.home .home-sbx { margin: 0; --sbx-phone: clamp(200px, 17vw, 250px); }
.home .home-sbx-grid { display: grid; grid-template-columns: var(--sbx-phone) minmax(0, 1fr); gap: 24px; align-items: start; }
.home .home-sbx-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: var(--home-card); color: var(--srh-ink-soft); --cap: calc(var(--home-card) * 0.727); }
.home .home-sbx-phone { --srk-phone-width: var(--sbx-phone); width: var(--sbx-phone); margin: 0; }
.home .home-sbx-phone .srk-phone-screen { aspect-ratio: 786 / 1704; background: #F6F8FC; }
.home .home-sbx-cap { margin-top: 14px; font-size: var(--home-card); color: var(--srh-ink-soft); }

.home .sbx-scr { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(10px);
  font-size: clamp(9px, calc(var(--sbx-phone) * 0.052), 14px); line-height: 1.35; color: #0A0D31;
  transition: opacity 420ms var(--srk-ease), transform 420ms var(--srk-ease), visibility 0s linear 420ms; }
.home .sbx-scr.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms var(--srk-ease), transform 420ms var(--srk-ease), visibility 0s; }
.home .sbx-scr.is-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.home .sbx-bar, .home .sbx-hdr { background: linear-gradient(160deg, #2B3C7A, #132059); color: #FFFFFF; }
.home .sbx-bar { display: flex; justify-content: space-between; padding: 6% 8% 3%; font-weight: 600; }
.home .sbx-hdr { padding: 16% 8% 7%; font-weight: 700; font-size: 1.15em; text-align: center; }
.home .sbx-mail, .home .sbx-body { display: flex; flex-direction: column; gap: 0.7em; padding: 7% 7%; flex: 1; }
.home .sbx-scr h4 { margin: 0; font-size: 1.35em; line-height: 1.15; letter-spacing: -0.02em; color: #0A0D31; }
.home .sbx-scr p { margin: 0; max-width: none; color: rgba(10, 13, 49, 0.72); }
.home .sbx-from { display: flex; align-items: center; gap: 0.6em; }
.home .sbx-from i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 0.5em; background: #2ECD70; color: #FFFFFF; font-style: normal; font-weight: 700; }
.home .sbx-from small { display: block; color: rgba(10, 13, 49, 0.6); }
.home .sbx-btn { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: center; height: 3em; border-radius: 0.8em; background: #1D5AD7; color: #FFFFFF; font-weight: 600; overflow: hidden; }
.home .sbx-mail .sbx-btn { margin-top: 0.4em; }
.home .sbx-view { margin: 0.4em 0; }
.home .sbx-chip { align-self: center; padding: 0.35em 0.9em; border-radius: 999px; background: #E8F9F1; color: #1B7F4B; font-weight: 600; }
.home .sbx-fields { list-style: none; margin: 0.4em 0; padding: 0; border: 1px solid #E3E7EF; border-radius: 0.8em; background: #FFFFFF; }
.home .sbx-fields li { padding: 0.65em 0.8em; border-top: 1px solid #EEF1F6; }
.home .sbx-fields li:first-child { border-top: 0; }
.home .sbx-small { font-size: 0.85em; }

.home .sbx-btn::after, .home .sbx-tapmark { content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: rgba(255, 255, 255, 0.55); opacity: 0; transform: scale(0.2); pointer-events: none; }
.home .sbx-tapmark { background: rgba(29, 90, 215, 0.35); }
.home .is-tap::after, .home .sbx-tapmark.is-tap { animation: sbx-tap 480ms ease-out both; }
@keyframes sbx-tap { 0% { opacity: 0.9; transform: scale(0.2); } 100% { opacity: 0; transform: scale(1.8); } }

.home-motion .home .home-sbx.is-armed .sbx-chip { opacity: 0; transform: scale(0.8); transition: opacity 260ms var(--srk-ease), transform 380ms var(--srk-spring); }
.home-motion .home .home-sbx.is-armed .is-captured .sbx-chip { opacity: 1; transform: none; }
.home .sbx-view .corner { transition: stroke 260ms var(--srk-ease); }
.home .is-captured .sbx-view .corner { stroke: #2ECD70; }

.home .sbx-panel { border-radius: 16px; background: #F4F6FB radial-gradient(circle, #DCE2EE 1px, transparent 1.2px) 0 0 / 16px 16px; color: #0A0D31; padding: 12px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); }
.home .sbx-panel-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; }
.home .sbx-tag { padding: 2px 10px; border-radius: 999px; background: #E6EDFF; color: #1D4FC4; font-size: 13px; font-weight: 600; }
.home .sbx-nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.home .sbx-node { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(10, 13, 49, 0.08), 0 0 0 1px #E6E9F0; }

.home .sbx-node + .sbx-node::before { content: ""; position: absolute; left: 28px; top: -14px; width: 2px; height: 14px; background: #2B5BD7; transform-origin: top; }
.home .sbx-ico { width: 34px; height: 34px; border-radius: 9px; background: #EEF3FF center / 60% no-repeat; }

.home .sbx-txt b { display: block; font-size: 15px; line-height: 1.25; }
.home .sbx-txt small { display: grid; font-size: 13px; line-height: 1.3; color: rgba(10, 13, 49, 0.66); }
.home .sbx-txt small > span { grid-area: 1 / 1; transition: opacity 300ms var(--srk-ease); }
.home .sbx-a { opacity: 0; }
.home .sbx-checks { display: grid; gap: 2px; margin-top: 4px; font-size: 13px; }
.home .sbx-checks span::before { content: ""; display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.4em; vertical-align: -0.12em; border-radius: 50%; background: #22A45D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; transition: transform 300ms var(--srk-spring), background-color 250ms; }
.home .sbx-st { box-sizing: border-box; width: 22px; height: 22px; border: 2px solid transparent; border-radius: 50%; background: #22A45D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.home .sbx-rate { padding: 4px 12px; border-radius: 999px; background: #EAF8F0; color: #157A44; font-weight: 700; font-size: 15px; }
.home .sbx-zone { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 2px 10px; font-size: 13px; color: rgba(10, 13, 49, 0.66); }
.home .sbx-zone img { height: 20px; width: auto; display: block; }
.home .sbx-zone-word { font-size: 13.9px; line-height: 20px; font-weight: 500; color: #0A1F44; margin-left: 5.6px; }

.home-motion .home .home-sbx.is-armed .sbx-node { opacity: 0.45; transition: opacity 300ms var(--srk-ease), box-shadow 300ms var(--srk-ease); }
.home-motion .home .home-sbx.is-armed .sbx-node + .sbx-node::before { transform: scaleY(0); transition: transform 300ms var(--srk-ease); }
.home-motion .home .home-sbx.is-armed .sbx-node .sbx-st { background: #FFFFFF; box-shadow: inset 0 0 0 2px #D5DBE7; transition: background-color 250ms; }
.home-motion .home .home-sbx.is-armed .sbx-node.is-active { opacity: 1; box-shadow: 0 0 0 2px #2B5BD7, 0 8px 24px rgba(43, 91, 215, 0.18); }
.home-motion .home .home-sbx.is-armed .sbx-node.is-active .sbx-st { box-shadow: none; border-color: #2B5BD7; border-top-color: transparent; animation: sbx-spin 900ms linear infinite; }
.home-motion .home .home-sbx.is-armed .sbx-node.is-done { opacity: 1; }

.home-motion .home .home-sbx.is-armed .sbx-node.is-active::before,
.home-motion .home .home-sbx.is-armed .sbx-node.is-done::before { transform: none; }
.home-motion .home .home-sbx.is-armed .sbx-node.is-done .sbx-st { background-color: #22A45D; box-shadow: none; animation: none; }
.home-motion .home .home-sbx.is-armed .sbx-node:not(.is-alt) .sbx-a { opacity: 1; }
.home-motion .home .home-sbx.is-armed .sbx-node:not(.is-alt) .sbx-b { opacity: 0; }
.home-motion .home .home-sbx.is-armed .sbx-checks span:not(.is-done)::before { background-color: #D5DBE7; transform: scale(0.7); }
.home-motion .home .home-sbx.is-armed .sbx-rate { opacity: 0; transform: scale(0.7); transition: opacity 260ms var(--srk-ease), transform 420ms var(--srk-spring); }
.home-motion .home .home-sbx.is-armed .sbx-node.is-rated .sbx-rate { opacity: 1; transform: none; }
@keyframes sbx-spin { to { transform: rotate(1turn); } }

@media (max-width: 699px) {
  .home .home-sbx { --sbx-phone: 150px; }
  .home .home-sbx-grid { gap: 12px; }
  .home .sbx-panel { padding: 8px; }
  .home .sbx-node { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; padding: 7px 8px; }
  .home .sbx-ico { width: 26px; height: 26px; }
  .home .sbx-node small, .home .sbx-panel-bar b { display: none; }
  .home .sbx-checks { font-size: 13px; } }

@media (prefers-reduced-motion: reduce) {
  .home .sbx-scr, .home .sbx-node, .home .sbx-rate, .home .sbx-chip { transition: none !important; }
  .home .sbx-st { animation: none !important; }
  .home .home-sbx .scanline { animation: none; } }

.home .home-sbx-head > span:first-child { line-height: 1.3; }
.home .home-sbx-head .home-brand { display: block; }

.home .sbx-ico.is-send { background-color: #F3EEFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B3FE4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10 14'/%3E%3Cpath d='M21 3l-7 18-4-7-7-4 18-7z'/%3E%3C/svg%3E"); }
.home .sbx-ico.is-id { background-color: #EEF3FF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B5BD7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16c.7-1.4 1.8-2 3-2s2.3.6 3 2M14 10h4M14 13h3'/%3E%3C/svg%3E"); }
.home .sbx-ico.is-doc { background-color: #FFF5E6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E58A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8.5 15l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.home .sbx-ico.is-rate { background-color: #EEF3FF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B5BD7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17a8 8 0 0 1 16 0'/%3E%3Cpath d='M12 17l4-5'/%3E%3C/svg%3E"); }
.home .sbx-ico.is-pass { background-color: #EAF8F0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322A45D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.5'/%3E%3C/svg%3E"); }

.home .sbx-zone .home-sol { --h: 22px; }
.home .sbx-zone .home-sol-word { color: #0A1F44; }
.home .sbx-zone > span:last-child { white-space: nowrap; }

.home .sbx-bar.is-light { background: #FFFFFF; color: #0A0D31; }
.home .sbx-hdr.is-light { background: #FFFFFF; color: #0A0D31; padding: 3% 8% 6%; border-bottom: 1px solid #E8ECF3; font-size: 1.05em; }
.home .sbx-scr.is-light { background: #F1F3F6; }
.home .sbx-label { margin: 0.2em 0 0; font-weight: 700; color: #0A0D31; }
.home .sbx-fields.is-pairs li { display: flex; justify-content: space-between; gap: 0.6em; }
.home .sbx-fields.is-pairs li span { color: rgba(10, 13, 49, 0.6); }
.home .sbx-fields.is-pairs li b { font-weight: 600; white-space: nowrap; }
.home .sbx-scr.is-light .sbx-fields { margin: 0; }

.home .home-sbx-phone .srk-phone-screen { overflow: hidden; }
@media (max-width: 699px) {
  .home .home-sbx-head { --cap: calc(15px * 0.727); --lk-scale: 1; font-size: 15px; gap: 4px; }
  .home .home-sbx-cap { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .home .sbx-tapmark, .home .sbx-btn::after { animation: none !important; }
}

.home-motion .home .home-sbx.is-armed .sbx-node .sbx-st { background-color: #FFFFFF; background-image: none; }
.home-motion .home .home-sbx.is-armed .sbx-node.is-done .sbx-st { background-color: #22A45D; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-size: 70%; background-repeat: no-repeat; }
.home .sbx-from strong { color: #0A0D31; }
@media (max-width: 699px) {
  .home .sbx-zone { margin: 10px 2px 8px; }
  .home .sbx-zone .home-sol { --h: 18px; }
  .home .sbx-zone > span:last-child { display: none; }
}

.home .home-step-box .home-step-note { margin-top: 0.6em; }

@media (max-width: 379px) {
  .home .home-sbx { --sbx-phone: 124px; }
  .home .home-sbx-grid { gap: 10px; }
  .home .sbx-ico { display: none; }
  .home .sbx-node { grid-template-columns: minmax(0, 1fr) auto; padding: 7px 7px 7px 9px; }
  .home .home-sbx-head .home-brand { max-width: 100%; width: 100%; align-self: stretch; }
  /* Sized by the column, with the box reserved before the SVG loads. */
  .home .home-sbx-head .home-lk { width: 100%; max-width: 100%; height: auto; }
  .home .home-sbx-head .home-lk.is-me { aspect-ratio: 424 / 100; }
  .home .home-sbx-head .home-lk.is-link { aspect-ratio: 665 / 100; }
  .home .sbx-zone .home-sol { --h: 15px; }
  .home .sbx-checks { font-size: 12px; }
}
@media (max-width: 379px) {
  .home .sbx-scr { font-size: 7.5px; }
  .home .sbx-checks { display: none; }
  .home .sbx-zone .home-sol { --h: 13px; }
}

.home .home-sbx .scanline {
  top: 20%; height: 58%;
  background: linear-gradient(#4E7CFF, #4E7CFF) 0 0 / 100% 2px no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(78, 124, 255, 0.8));
  animation: sbx-scan 2.6s ease-in-out infinite alternate; }
@keyframes sbx-scan { from { transform: translateY(0); } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .home .home-sbx .scanline { animation: none; } }

/* ---------- Fix pass 0 (inbox 17:36): the payoff tick and scale ---------- */
/* The tick is a check mark at the headline's cap height or a little more,
   drawn in the accent at the type's stroke weight, sitting on the baseline
   right after "sorted". */
.home .home-beat-tick {
  width: 1.15em;
  height: 1.15em;
  margin: -0.3em 0 0 0.08em; /* the box adds no height to the line */
  vertical-align: -0.2em;
  stroke-width: 3.1; }
/* The payoff carries the scene: larger on desktop. */
@media (min-width: 1000px) {
  .home .home-aha-pay h2.home-beats { font-size: clamp(44px, 4.4vw, 68px); line-height: 1.08; margin-bottom: 0.3em; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .home .home-aha-pay h2.home-beats { font-size: clamp(38px, 3.6vw, 52px); }
}

/* The hero takeover layers exist from 700px up (home-wide.css). */
.home .home-takes { display: none; }

/* ---------- Fix pass 1 (inbox 18:44): the staged payoff scene ---------- */
/* Start states exist only under html.home-motion and once home-motion.js
   has staged the scene (is-staged). JS off and reduced motion show the
   final state. Every row is a before and after pair on one level, with a
   hairline between rows (drawn in the row gap, so nothing moves). */
@media (min-width: 700px) {
  .home .home-struck li { position: relative; align-items: center; }
  .home .home-struck li + li::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(clamp(10px, 1.6vh, 18px) / -2);
    height: 1px;
    background: var(--srh-hairline-soft);
    pointer-events: none; }
}
.home-motion .home .home-aha.is-staged .home-aha-eb.is-new { opacity: 0; transform: translateY(6px); transition: opacity 600ms var(--srk-ease), transform 600ms var(--srk-ease); }
.home-motion .home .home-aha.is-staged .home-aha-eb.is-new.is-in { opacity: 1; transform: none; }
.home-motion .home .home-aha.is-staged .home-old { opacity: 0; color: var(--srh-pale); transition: opacity 450ms var(--srk-ease), color 600ms var(--srk-ease); }
.home-motion .home .home-aha.is-staged li.is-old .home-old { opacity: 1; }
.home-motion .home .home-aha.is-staged li.is-struck .home-old { color: rgba(234, 240, 255, 0.62); }
.home-motion .home .home-aha.is-staged .home-old-x > span { background-size: 0% var(--t); transition: background-size 600ms cubic-bezier(0.65, 0, 0.35, 1); }
.home-motion .home .home-aha.is-staged li.is-struck .home-old-x > span { background-size: 100% var(--t); }
.home-motion .home .home-aha.is-staged .home-new { opacity: 0; transform: translateX(-16px); transition: opacity 500ms var(--srk-ease), transform 500ms var(--srk-ease); }
.home-motion .home .home-aha.is-staged li.is-new .home-new { opacity: 1; transform: none; }
/* Typed characters: each one fades in at its own moment (inline delay). */
.home-motion .home .home-aha.is-staged .home-ch { opacity: 0; transition: opacity 80ms linear; }
.home-motion .home .home-aha.is-staged .home-aha-pay.is-go .home-ch { opacity: 1; }
/* The tick draws after "sorted" is typed: both strokes in one quick pass. */
.home-motion .home .home-aha.is-staged .home-beat-tick { stroke-dashoffset: 100; transition: stroke-dashoffset 450ms cubic-bezier(0.3, 0, 0.2, 1); }
.home-motion .home .home-aha.is-staged .home-beats.is-ticked .home-beat-tick { stroke-dashoffset: 0; }
.home .home-aha-pay .home-next.home-aha-lede { transition-duration: 900ms; }

/* ---------- Fix pass 1: every scene animation about 1.5x slower ---------- */
/* Durations and delays only: the reduced motion rules still switch every
   transition off. The hero takeover keeps its 450 ms (responsive). */
.js .home .srk-reveal, .js .home .reveal { transition-duration: 1050ms; }
.js .home .srk-reveal.d1 { transition-delay: 135ms; }
.js .home .srk-reveal.d2 { transition-delay: 270ms; }
.js .home .srk-reveal.d3 { transition-delay: 405ms; }
.js .home .srk-stamp .draw { transition-duration: 2700ms; transition-delay: 300ms; }
.home .home-typing .home-w { transition-duration: 390ms; transition-delay: calc(var(--w, 0) * 82ms); }
.home .home-typing.is-typed .home-w--last::after { animation-delay: calc(var(--w, 0) * 82ms); }
.home-motion .home .home-panel { transition-duration: 1050ms; }
.home-motion .home .home-panel.is-realestate { transition-delay: 210ms; }
.home-motion .home .home-panel.is-bookmakers { transition-delay: 420ms; }
.home-motion .home .home-flow > li { transition-duration: 750ms; }
.home-motion .home .home-tl-step { transition-duration: 630ms; }
.home-motion .home .home-tl-node { transition-duration: 780ms, 630ms; }
.home-motion .home .home-guide-cards > li { transition-duration: 1050ms; }
.home-motion .home .home-guide-cards > li:nth-child(2) { transition-delay: 120ms; }
.home-motion .home .home-guide-cards > li:nth-child(3) { transition-delay: 240ms; }
.home-motion .home .home-brand { transition-duration: 1050ms; }
.home-motion .home .home-brand.is-swept::after { animation-duration: 1350ms; animation-delay: 570ms; }
.home-motion .home .home-brand.is-swept > img,
.home-motion .home .home-brand.is-swept .home-sol-word { animation-duration: 1650ms; animation-delay: 750ms; }
.home-motion .home .home-brand.is-group.is-swept .home-sol-word,
.home-motion .home .home-brand.is-group.is-swept > span:not(.home-sol-word) { animation-duration: 1350ms, 1650ms; animation-delay: 780ms, 750ms; }
.home-motion .home .home-law-tick { transition-duration: 630ms, 450ms; }
.home-motion .home .home-law-tick-path { transition-duration: 780ms; }
.home-motion .home .home-law-line { transition-duration: 750ms; }
.home .sbx-scr { transition-duration: 630ms, 630ms, 0s; transition-delay: 0s, 0s, 630ms; }
.home .sbx-scr.is-on { transition-duration: 630ms, 630ms, 0s; transition-delay: 0s; }
.home .is-tap::after, .home .sbx-tapmark.is-tap { animation-duration: 720ms; }
.home-motion .home .home-sbx.is-armed .sbx-chip { transition-duration: 390ms, 570ms; }
.home-motion .home .home-sbx.is-armed .sbx-node { transition-duration: 450ms; }
.home-motion .home .home-sbx.is-armed .sbx-node + .sbx-node::before { transition-duration: 450ms; }
.home-motion .home .home-sbx.is-armed .sbx-rate { transition-duration: 390ms, 630ms; }
.home .sbx-txt small > span { transition-duration: 450ms; }
.home .home-sbx .scanline { animation-duration: 3.9s; }

/* ---------- Fix pass 1: step 04's ShareRing Solutions lockup ---------- */
/* The lockup is one unbreakable unit everywhere (it was a block in the step
   label, so "Solutions" could drop onto the heading). */
.home .home-sol.home-brand,
.home .srk-step-num > .home-sol.home-brand { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; }
.home .srk-step-num { row-gap: 0.4rem; }

/* ---------- Fix pass 1: the phone bookmakers product photo ---------- */
/* Its stop also carries the bonus, the roadmap line and the sandbox link,
   so the spacing there is tightened (no copy moves or shrinks) and the
   room goes to the photo: 157px tall at 390x844 instead of 77px. */
@media (max-width: 699px) {
  .home #products .home-reg > .home-part:last-child { gap: 12px; }
  .home #products .home-reg > .home-part:last-child > .home-row { padding-block: 6px; gap: 6px; }
  .home #products .home-reg > .home-part:last-child > .srk-bonus,
  .home #products .home-reg > .home-part:last-child > .srk-later,
  .home #products .home-reg > .home-part:last-child > .home-next { margin-top: 0; }
}

/* ---------- Fix pass 1: a metric-matched fallback for Inter Tight ---------- */
/* The woff2 is preloaded (index.html). If it still arrives after first
   paint, the fallback is Arial scaled to Inter Tight's width (measured:
   96% of Arial's advance at 400 and 700) with Inter Tight's ascent and
   descent, so the swap moves no line. */
@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 96%;
  ascent-override: 101%;
  descent-override: 25%;
  line-gap-override: 0%;
}
.home { --font-ui: "Inter Tight", "Inter Tight Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; }
/* The smallest phones (320 to 379 wide, under 600 tall): the Link panel's
   rows sit closer so the stage stays one screen. */
@media (max-width: 379px) and (max-height: 600px) {
  .home .sbx-nodes { gap: 6px; }
  .home .sbx-node { padding-block: 5px; }
  .home .sbx-panel-bar { display: none; } /* the caption says it is simulated */
  .home .sbx-zone { margin: 6px 2px 5px; }
  .home .home-sbx-cap { margin-top: 6px; }
}

/* ======================================================================
 * Review fixes (Rohan, 21:26, on commit 1cc45b0)
 * ====================================================================== */

/* ---------- Item 2: records nodes without their boxes ---------- */
/* The lockups and the storage mark sit straight on the scene; the node
   keeps its width and height, so each still lines up with its description
   and the dotted connector between them stays. */
.home .home-node,
.home .home-node.is-yours {
  border-color: transparent;
  background: none;
  box-shadow: none; }

/* ---------- Item 3: the payoff scene's left column eyebrow ---------- */
.home-motion .home .home-aha.is-staged .home-aha-eb.is-old { opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--srk-ease), transform 500ms var(--srk-ease); }
.home-motion .home .home-aha.is-staged .home-aha-eb.is-old.is-in { opacity: 1; transform: none; }

/* ---------- Item 4: the timeline, no blue on blue ---------- */
/* ShareRing's column: near-white cards with dark text and the navy
   lockups. Your column: an outline only, light text on the scene. */
.home .home-tl-sr {
  border: 1px solid #F3F6FD;
  background: #F3F6FD;
  color: #0A0D31; }
.home .home-tl-you {
  border: 1px solid rgba(234, 240, 255, 0.5);
  background: none;
  color: var(--srh-pale); }

/* ---------- Item 6: the sandbox phone and Link panel, aligned ---------- */
/* One grid: the two labels share row 1 (same size, top aligned, so the
   same baseline), the phone and the panel share row 2. On tablet and
   desktop the panel stretches to the phone's height (same top and bottom
   edge) and spreads its rows; on phones the panel is the taller one and
   the phone is centred on it. The caption stays under the phone. */
.home .home-sbx-grid { grid-template-rows: auto auto; align-items: stretch; }
.home .home-sbx-col { display: contents; }
.home .home-sbx-col.is-me > .home-sbx-head { grid-column: 1; grid-row: 1; }
.home .home-sbx-col.is-me > .home-sbx-phone { grid-column: 1; grid-row: 2; align-self: start; }
.home .home-sbx-col.is-link > .home-sbx-head { grid-column: 2; grid-row: 1; }
.home .home-sbx-col.is-link > .sbx-panel { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; }
.home .home-sbx-head { align-self: start; margin: 0 0 12px; }
.home .sbx-panel > .sbx-nodes { flex: 3 1 auto; grid-auto-rows: 1fr; }
.home .sbx-panel > .sbx-nodes + .sbx-zone + .sbx-nodes { flex-grow: 2; }
.home .home-sbx-cap { max-width: var(--sbx-phone); }
@media (max-width: 699px) {
  .home .home-sbx-col.is-me > .home-sbx-phone { align-self: center; }
  .home .home-sbx-head { margin-bottom: 8px; }
}
/* Item 6, refined: the figure itself is the grid, so the caption can sit
   in the phone's column straight under the phone. Labels row 1, phone and
   panel row 2 (same top; on tablet and desktop the panel stretches to the
   phone's bottom), caption row 3 under the phone. On phones the panel is
   longer than the phone and runs on beside the caption. */
.home .home-sbx { display: grid; grid-template-columns: var(--sbx-phone) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 24px; align-items: stretch; }
.home .home-sbx > .home-sbx-grid { display: contents; }
.home .home-sbx-col.is-me > .home-sbx-phone { align-self: start; }
.home .home-sbx > .home-sbx-cap { grid-column: 1; grid-row: 3; align-self: start; margin-top: 14px; }
.home .sbx-node { padding-block: 8px; }
@media (max-width: 699px) {
  .home .home-sbx { column-gap: 12px; }
  .home .home-sbx-col.is-me > .home-sbx-phone { align-self: start; }
  .home .home-sbx-col.is-link > .sbx-panel { grid-row: 2 / 4; align-self: start; }
  .home .home-sbx > .home-sbx-cap { margin-top: 10px; }
}
@media (max-width: 379px) { .home .home-sbx { column-gap: 10px; } }
@media (max-width: 379px) and (max-height: 600px) { .home .sbx-node { padding-block: 5px; } }
/* Short laptops: the panel drops its node sub-lines (as on phones), so it
   fits beside the phone and stretches to the phone's bottom edge. */
@media (min-width: 1000px) and (max-height: 820px) {
  .home .sbx-node small { display: none; }
}
@media (max-width: 699px) {
  /* Phones: the panel is content-sized, its rows keep their own heights. */
  .home .sbx-panel > .sbx-nodes { flex: none; grid-auto-rows: auto; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  /* Rows keep their own heights here, so the panel fits the phone. */
  .home .sbx-panel > .sbx-nodes { grid-auto-rows: auto; align-content: space-between; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .home .sbx-node { padding-block: 6px; }
  .home .home-sbx-head { margin-bottom: 6px; }
  .home .home-sbx > .home-sbx-cap { margin-top: 6px; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .home .sbx-panel { padding: 10px; }
  .home .sbx-panel-bar { margin-bottom: 6px; }
  .home .sbx-nodes { gap: 8px; }
  .home .sbx-node + .sbx-node::before { top: -8px; height: 8px; }
}

/* ---------- Review 22:14: sandbox swaps go out, then in ---------- */
/* Phone screens: the old screen fades out in 150 ms, then the new one
   fades and rises in, so two screens never show at once. */
.home .sbx-scr { transition: opacity 150ms linear, transform 150ms linear, visibility 0s linear 150ms; }
.home .sbx-scr.is-on { transition: opacity 320ms var(--srk-ease) 160ms, transform 320ms var(--srk-ease) 160ms, visibility 0s linear 0s; }
/* Link panel sub-lines: the same, out then in. */
.home-motion .home .home-sbx.is-armed .sbx-txt small > span { transition: opacity 150ms linear; }
.home-motion .home .home-sbx.is-armed .sbx-node:not(.is-alt) .sbx-a,
.home-motion .home .home-sbx.is-armed .sbx-node.is-alt .sbx-b { transition: opacity 260ms linear 160ms; }
@media (prefers-reduced-motion: reduce) {
  .home .sbx-scr, .home .sbx-scr.is-on, .home .sbx-txt small > span { transition: none !important; }
}
/* The two lockups over the windows share the wordmark baseline: the Me
   file's baseline sits 0.67 of its height down, the Link file's 0.74, so
   at a matched cap height the Link lockup steps down 0.422 cap heights. */
.home .home-sbx-col.is-link .home-sbx-head .home-brand { margin-top: calc(var(--cap) * var(--lk-scale) * 0.422); }
@media (max-width: 379px) {
  .home .home-sbx-col.is-link .home-sbx-head .home-brand { margin-top: 3px; }
}
@media (max-width: 379px) {
  /* "The checks run through" wraps here: both labels keep two lines of
     room, so the lockups under them still share a line. */
  .home .home-sbx-head > span:first-child { min-height: 2.6em; }
}

/* ======================================================================
 * Review fixes 2 (Rohan, 22:46 to 22:49)
 * ====================================================================== */

/* ---------- Item 1: no divider lines in the payoff rows ---------- */
.home .home-struck li + li::before { content: none; }

/* ---------- Item 2: records, one set of three marks, then a process ---------- */
/* "Your storage" is built like the two lockups above it: the cloud at the
   Link lockup's height, the label in white at the wordmark's cap height and
   regular weight, the same gap; all three marks start on one x. (The
   wordmark itself is outlined artwork; Inter Tight 400 at the same cap
   height stands in for its typeface.) */
.home .home-node { justify-content: flex-start; --mk-h: calc(var(--lk) * 1.2); }
/* The cloud's drawing (not its box) is the Link icon's height; the gap is
   the Link lockup's own (0.39 of its height); the label's line box is the
   icon's height, which puts its baseline at 0.745 of it, as the wordmark's. */
.home .home-node.is-yours { gap: calc(var(--mk-h) * 0.39); }
.home .home-node.is-yours .home-node-glyph { width: calc(var(--mk-h) * 42.4 / 31.4); height: var(--mk-h); stroke: #FFFFFF; stroke-width: 2; }
.home .home-node.is-yours span {
  font-size: calc(var(--mk-h) * 0.487 / 0.727);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: var(--mk-h);
  color: #FFFFFF; }
/* The connector runs down from under the marks. */
@media (min-width: 700px) {
  .home .home-flow li::before { left: calc(12px + var(--mk-h, 40px) / 2 - 1px); }
}
.home .home-flow { --mk-h: calc(var(--lk) * 1.2); }
/* The process: each step appears in turn, then its connector draws down. */
.home-motion .home .home-flow.is-armed > li:not(.is-lit) { opacity: 0; transform: translateY(12px); }
.home-motion .home .home-flow.is-armed > li { transition: opacity 700ms var(--srk-ease), transform 700ms var(--srk-ease); }
.home-motion .home .home-flow.is-armed > li.is-lit { opacity: 1; transform: none; }
.home-motion .home .home-flow.is-armed > li::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1); }
.home-motion .home .home-flow.is-armed > li.is-drawn::before { transform: none; }

/* ---------- Item 3: the timeline never dims ---------- */
/* Every card and pill is full strength at all times. Progress shows only
   in the rail drawing down and each dot lighting as the rail reaches it. */
.home-motion .home .home-tl.is-armed .home-tl-step:not(.is-lit) { opacity: 1; }

/* ---------- Item 4: prices roll into place ---------- */
/* The price is its own mask (clip-path: its text box); each character
   rolls up from below inside it, 55 ms apart, with one small settle. */
.home [data-price] { font-variant-numeric: tabular-nums; }
.home .home-price { clip-path: inset(0.02em -0.04em 0.12em); } /* the glyphs' own band: cap top to just under the baseline */
.home .home-roll-c { display: inline-block; }
.home-motion .home .home-price .home-roll-c {
  transform: translateY(105%);
  transition: transform 560ms cubic-bezier(0.25, 1.25, 0.45, 1); }
.home-motion .home .home-price.is-in .home-roll-c { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .home .home-price .home-roll-c { transform: none !important; transition: none !important; }
}

/* ======================================================================
 * Round 3B (9 Oct): How it works as one story
 * ====================================================================== */
/* Without JS everything shows in one plain column: the intro, the four
   steps and the phone on its first screen. home-motion.js sets .is-story,
   and from then on the stage holds still (sticky, one screen tall) over
   four empty spacers, one per step, which the chevrons land on. The stage
   shows the intro at the section's own stop, then a step at each spacer.
   Every change is opacity and transform inside reserved space. */
.home .home-story {
  max-width: var(--home-max);
  margin-inline: auto;
  padding: var(--home-top) 0 var(--home-gutter);
  display: grid;
  gap: 40px; }
.home .home-how-list,
.home .home-how-ways,
.home .home-qr-card,
.home .home-how .home-step { display: none; }
.home .home-how-panes { display: grid; gap: 32px; }
@media (min-width: 700px) {
  .home .home-how:not(.is-story) .home-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); }
  .home .home-how:not(.is-story) .home-how-intro,
  .home .home-how:not(.is-story) .home-how-text { grid-column: 1; }
  .home .home-how:not(.is-story) .home-phone-fig { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--home-header) + 24px); }
}

/* The intro: eyebrow, headline, a two-row process, the cue. */
.home .home-how-intro h2 { font-size: clamp(30px, 4.2vw, 60px); line-height: 1.1; margin-bottom: 0; }
.home .home-how-proc {
  list-style: none;
  margin: clamp(22px, 4vh, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(44px, 7vh, 64px);
  --cap: calc(var(--home-lede) * 0.727 * 1.2); }
.home .home-how-proc li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.home .home-how-proc li p { margin: 0; font-size: var(--home-lede); line-height: 1.4; color: var(--srh-ink-read); max-width: 34ch; }
/* The dotted connector runs from under one row down to the next. */
.home .home-how-proc li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--cap) * 1.15);
  top: calc(100% + 8px);
  height: calc(clamp(44px, 7vh, 64px) - 16px);
  border-left: 2px dotted var(--srk-accent-text);
  transform-origin: 50% 0; }
.home .home-how-sees { display: flex; align-items: center; gap: 10px; margin: clamp(22px, 4vh, 40px) 0 0; font-size: var(--home-lede); color: var(--srh-pale); }
/* The cue is a button that does what the page's down chevron does (same
   label, colours and hover, a 44px target). It needs the story, so it only
   shows once JS has set .is-story. */
.home .home-how-cue { display: none; place-items: center; flex: none; width: 44px; height: 44px; margin: -10px 0; padding: 0; border: 0; border-radius: 8px; background: none; color: rgba(234, 240, 255, 0.72); cursor: pointer; transition: color 300ms var(--srk-ease); }
.home .home-how.is-story .home-how-cue { display: grid; }
.home .home-how-cue:hover { color: rgba(234, 240, 255, 0.98); }
.home .home-how-cue:focus-visible { outline: 2px solid var(--srk-accent-text); outline-offset: 3px; }
.home .home-how-cue svg { width: 26px; height: 26px; }

/* A step: label and lockup, headline, body. */
.home .home-how-pane .srk-step-num { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.8rem; --cap: calc(var(--home-card) * 0.727); }
.home .home-how-pane h3 { font-size: clamp(24px, 2.7vw, 40px); letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 0.45em; }
.home .home-how-pane p.home-how-body { margin: 0; font-size: var(--home-body); line-height: 1.5; color: var(--srh-ink-read); max-width: 32em; }
.home .home-how-pane p.home-how-body + p.home-how-body { margin-top: 0.65em; }
.home .home-how-pane .home-lk-line { --cap: calc(var(--home-body) * 0.727); }
.home .home-how-pane .home-step-note { color: var(--srh-ink-soft); }

/* The step list: always full strength. The current step is marked by its
   dot and by the accent line, drawn down the rail to it (as the "What we
   do" timeline does); the dots it has passed stay lit. */
.home .home-how-list {
  list-style: none;
  margin: 0 0 clamp(24px, 4.5vh, 48px);
  padding: 0;
  position: relative;
  gap: 14px;
  --how-fill: 0; }
.home .home-how-list::before,
.home .home-how-list::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--srh-hairline-soft); }
.home .home-how-list::after {
  background: var(--srk-accent-text);
  transform: scaleY(var(--how-fill));
  transform-origin: 50% 0;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1); }
.home .home-how-list li {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 24px;
  font-size: var(--home-card-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--srh-pale); }
.home .home-how-list b { min-width: 1.75em; font-variant-numeric: tabular-nums; font-size: 0.8em; font-weight: 700; letter-spacing: 0.1em; color: var(--srk-accent-text); }
.home .home-how-dot {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--srk-accent-text);
  background: var(--srh-navy-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--srk-ground-live) 90%, transparent);
  transition: background-color 500ms var(--srk-ease), transform 500ms var(--srk-spring), box-shadow 500ms var(--srk-ease); }
.home .home-how-list li.is-past .home-how-dot { background: var(--srk-accent-live); }
.home .home-how-list li.is-on .home-how-dot {
  background: var(--srk-accent-live);
  transform: scale(1.3);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--srk-ground-live) 90%, transparent), 0 0 0 7px color-mix(in srgb, var(--srk-accent-live) 40%, transparent); }

/* Two ways in: the tabs under the phone. */
.home .home-how-ways { justify-content: center; gap: 8px; margin-top: 14px; }
.home .home-how-way {
  min-height: 40px;
  min-width: 64px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--srh-hairline-soft);
  background: transparent;
  color: var(--srh-pale);
  font: inherit;
  font-size: var(--home-card);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 300ms var(--srk-ease), color 300ms var(--srk-ease), border-color 300ms var(--srk-ease); }
.home .home-how-way[aria-pressed="true"] { background: #EAF0FF; border-color: #EAF0FF; color: #0A0D31; }
.home .home-how-way:focus-visible { outline: 2px solid var(--srk-accent-text); outline-offset: 3px; }

/* The sample open-home sign beside the phone. */
.home .home-qr-card {
  position: relative;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  width: calc(var(--srk-phone-width) * 0.52);
  padding: 1em 0.8em 0.9em;
  border-radius: 14px;
  background: #FFFFFF;
  color: #0A0D31;
  text-align: center;
  line-height: 1.2;
  font-size: clamp(11px, calc(var(--srk-phone-width) * 0.043), 14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: box-shadow 400ms var(--srk-ease); }
.home .home-qr-tag { position: absolute; top: -0.9em; right: -0.6em; padding: 0.3em 0.75em; border-radius: 999px; background: #010ED0; color: #FFFFFF; font-size: 0.85em; font-weight: 700; letter-spacing: 0.04em; }
.home .home-qr-org { display: flex; align-items: center; gap: 0.4em; font-size: 0.85em; font-weight: 600; }
.home .home-qr-org b { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.45em; background: #010ED0; color: #FFFFFF; font-size: 0.85em; }
.home .home-qr-title { font-size: 1.2em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.home .home-qr { display: block; width: 100%; height: auto; fill: #0A0D31; shape-rendering: crispEdges; }
.home .home-qr-cta { font-weight: 700; color: #010ED0; }

/* The text message screen. */
.home .app.home-scr-sms { padding: 15% 0 0; }
.home .home-sms-head { display: flex; align-items: center; gap: 0.6em; padding: 0.3em 6% 0.7em; border-bottom: 1px solid rgba(10, 13, 49, 0.1); }
.home .home-sms-back { flex: none; width: 0.55em; height: 0.55em; border-left: 2px solid #010ED0; border-bottom: 2px solid #010ED0; transform: rotate(45deg); }
.home .home-sms-head b { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #010ED0; color: #FFFFFF; font-size: 0.85em; }
.home .home-sms-head strong { display: block; font-size: 0.95em; line-height: 1.2; color: #0A0D31; }
.home .home-sms-head small { display: block; font-size: max(11px, 0.78em); color: rgba(10, 13, 49, 0.68); }
.home .home-sms-time { display: block; margin: 1em 0 0.6em; text-align: center; font-size: max(11px, 0.75em); color: rgba(10, 13, 49, 0.62); }
.home .home-sms-bubble { margin: 0 12% 0.55em 6%; padding: 0.7em 0.9em; border-radius: 1.1em 1.1em 1.1em 0.3em; background: #E4E8F2; color: #0A0D31; font-size: 0.92em; line-height: 1.35; }
.home .home-sms-bubble.is-link { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2em; background: #FFFFFF; border: 1px solid rgba(10, 13, 49, 0.12); }
.home .home-sms-bubble.is-link img { height: 1.7em; width: auto; margin-bottom: 0.2em; }
.home .home-sms-bubble.is-link strong { color: #010ED0; text-decoration: underline; text-underline-offset: 0.15em; }
.home .home-sms-bubble.is-link small { font-size: max(11px, 0.8em); color: rgba(10, 13, 49, 0.68); }
.home .home-tap { position: absolute; left: 50%; top: 55%; width: 2.8em; height: 2.8em; margin: -1.4em 0 0 -1.4em; border-radius: 50%; background: rgba(1, 14, 208, 0.28); opacity: 0; pointer-events: none; }
.home .home-sms-input { margin: 0 6% 7%; padding: 0.6em 1em; border: 1px solid rgba(10, 13, 49, 0.16); border-radius: 999px; font-size: max(11px, 0.85em); color: rgba(10, 13, 49, 0.6); }

/* The camera screen: the phone's own camera finds the code on the sign. */
.home .app.home-scr-cam { padding: 0; background: #0B0E33; }
.home .home-scr-cam h4 { margin: 0; padding: 16% 6% 0.6em; background: #F7F8FB; font-size: 1.1em; }
.home .home-cam-view { position: relative; flex: 1; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, #2B3466, #0B0E33 72%); }
.home .home-cam-sign { display: flex; flex-direction: column; align-items: center; gap: 0.35em; width: 62%; padding: 0.7em 0.6em; border-radius: 0.8em; background: #FFFFFF; color: #0A0D31; font-size: max(11px, 0.72em); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 1em 2em rgba(0, 0, 0, 0.45); }
.home .home-cam-sign > span:last-child { color: #010ED0; letter-spacing: 0; text-transform: none; }
.home .home-cam-qr { position: relative; display: block; width: 86%; }
.home .home-cam-qr svg { display: block; width: 100%; height: auto; fill: #0A0D31; shape-rendering: crispEdges; }
.home .home-cam-frame {
  --c: #2CE5A7;
  position: absolute;
  inset: -9%;
  background:
    linear-gradient(var(--c), var(--c)) left top / 26% 3px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 3px 26% no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 26% 3px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 3px 26% no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 26% 3px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 3px 26% no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 26% 3px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 3px 26% no-repeat; }
.home .home-cam-scan { position: absolute; left: -4%; right: -4%; top: 0; height: 2px; background: #2CE5A7; box-shadow: 0 0 8px 2px rgba(44, 229, 167, 0.55); opacity: 0; pointer-events: none; }
.home-motion .home .home-how.is-story .home-scr-cam.is-scan .home-cam-scan { animation: home-cam-scan 650ms ease-in-out both; }
@keyframes home-cam-scan { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.home .home-cam-hint { padding: 0.6em 6% 0; text-align: center; font-size: max(11px, 0.8em); color: rgba(234, 240, 255, 0.85); }
.home .home-cam-pill { display: flex; align-items: center; justify-content: center; gap: 0.45em; margin: 0.7em 7% 9%; padding: 0.5em 0.9em; border-radius: 999px; background: #FFFFFF; color: #0A0D31; font-size: 0.85em; font-weight: 600; }
.home .home-cam-pill img { height: 2.1em; width: auto; }

/* ---------- The story layout (home-motion.js sets .is-story) ---------- */
.home .home-how.is-story .home-chapter { position: relative; }
.home .home-how.is-story .home-story {
  --srk-phone-width: min(320px, calc((var(--home-scene) - 200px) / 2.295 + 24px));
  position: sticky;
  top: var(--home-header);
  height: var(--home-scene);
  padding: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
  align-items: center; }
.home .home-how.is-story .home-step { display: block; height: var(--home-scene); }
.home .home-how.is-story .home-how-intro { grid-column: 1 / -1; grid-row: 1; justify-self: center; max-width: 56rem; text-align: center; }
.home .home-how.is-story .home-how-proc { justify-items: center; }
.home .home-how.is-story .home-how-proc li { align-items: center; }
.home .home-how.is-story .home-how-proc li p { text-align: center; }
.home .home-how.is-story .home-how-proc li:not(:last-child)::after { left: 50%; margin-left: -1px; }
.home .home-how.is-story .home-how-sees { justify-content: center; max-width: none; }
.home .home-how.is-story .home-how-text { grid-column: 1; grid-row: 1; }
.home .home-how.is-story .home-how-list { display: grid; }
.home .home-how.is-story .home-how-panes { gap: 0; }
.home .home-how.is-story .home-how-pane { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 220ms linear; }
.home .home-how.is-story .home-how-pane.is-on { opacity: 1; pointer-events: auto; transition: opacity 300ms var(--srk-ease) 240ms; }
.home .home-how.is-story .home-phone-fig { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; }
.home .home-how.is-story .home-how-device { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 1.6vw, 24px); }
.home .home-how.is-story .home-qr-card { display: flex; margin-bottom: calc(var(--srk-phone-width) * 0.5); }
.home .home-how.is-story .srk-phone { margin: 0; }
.home .home-how.is-story .home-how-ways { display: flex; }
.home .home-how.is-story .srk-phone-caption { margin-top: 10px; text-align: center; max-width: 30em; }

/* Phone screens in the story: out, then in. The old screen fades out in
   200 ms; the new one starts once it is gone, so two never show at once.
   (.is-shown is this page's own class: site.js still sets .is-on, which
   the story ignores.) */
.home .home-how.is-story .app { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 200ms linear, transform 200ms linear, visibility 0s linear 200ms; }
.home .home-how.is-story .app.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 360ms var(--srk-ease) 230ms, transform 360ms var(--srk-ease) 230ms, visibility 0s linear 230ms; }

/* Stops. The intro (data-at 0): no phone. Leaving it, the intro lifts and
   fades, the phone rises into place, and the left column comes in; coming
   back, the reverse. */
.home .home-how.is-story .home-how-intro { transition: opacity 600ms var(--srk-ease) 380ms, transform 800ms var(--srk-ease) 380ms; }
.home .home-how.is-story .home-story:not([data-at="0"]) .home-how-intro { opacity: 0; transform: translateY(-56px); pointer-events: none; transition: opacity 450ms var(--srk-ease), transform 650ms var(--srk-ease); }
.home .home-how.is-story .home-how-list,
.home .home-how.is-story .home-how-panes { transition: opacity 500ms var(--srk-ease) 450ms; }
.home .home-how.is-story .home-story[data-at="0"] .home-how-list,
.home .home-how.is-story .home-story[data-at="0"] .home-how-panes { opacity: 0; pointer-events: none; transition: opacity 300ms var(--srk-ease); }
.home .home-how.is-story .home-qr-card,
.home .home-how.is-story .srk-phone,
.home .home-how.is-story .home-how-ways,
.home .home-how.is-story .srk-phone-caption { transition: opacity 700ms var(--srk-ease) 260ms, transform 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) 260ms, visibility 0s linear 0s; }
.home .home-how.is-story .home-story[data-at="0"] .home-qr-card,
.home .home-how.is-story .home-story[data-at="0"] .srk-phone,
.home .home-how.is-story .home-story[data-at="0"] .home-how-ways,
.home .home-how.is-story .home-story[data-at="0"] .srk-phone-caption { opacity: 0; transform: translateY(110px); pointer-events: none; transition: opacity 350ms var(--srk-ease), transform 500ms var(--srk-ease); }
/* The sign and the tabs belong to step 01 only; their space stays. */
.home .home-how.is-story .home-story:not([data-at="1"]) .home-qr-card,
.home .home-how.is-story .home-story:not([data-at="1"]) .home-how-ways { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 250ms linear, transform 500ms var(--srk-ease), visibility 0s linear 250ms; }
.home .home-how.is-story .home-story.is-qr .home-qr-card { box-shadow: 0 0 0 3px #2CE5A7, 0 24px 60px rgba(0, 0, 0, 0.45); }

/* Motion start states (html.home-motion only): typing, the process rows,
   the cue, each step's label and body lines, the phone's small moments. */
.home-motion .home .home-how.is-story .home-ch { opacity: 0; transition: opacity 80ms linear; }
.home-motion .home .home-how.is-story .is-go .home-ch { opacity: 1; }
.home-motion .home .home-how.is-story .home-how-proc li { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--srk-ease), transform 700ms var(--srk-ease); }
.home-motion .home .home-how.is-story .home-how-proc li.is-lit { opacity: 1; transform: none; }
.home-motion .home .home-how.is-story .home-how-proc li::after { transform: scaleY(0); transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1); }
.home-motion .home .home-how.is-story .home-how-proc li.is-drawn::after { transform: none; }
.home-motion .home .home-how.is-story .home-how-sees { opacity: 0; transform: translateY(8px); transition: opacity 700ms var(--srk-ease), transform 700ms var(--srk-ease); }
.home-motion .home .home-how.is-story .home-how-intro.is-sees .home-how-sees { opacity: 1; transform: none; }
.home-motion .home .home-how.is-story .home-how-intro.is-sees .home-how-cue svg { animation: home-cue 1600ms ease-in-out 600ms infinite; }
@keyframes home-cue { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }
.home-motion .home .home-how.is-story .home-how-pane .srk-step-num { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--srk-ease), transform 500ms var(--srk-ease); }
.home-motion .home .home-how.is-story .home-how-pane.is-lab .srk-step-num { opacity: 1; transform: none; }
.home-motion .home .home-how.is-story .home-how-body .home-w { opacity: 0; transition: opacity 600ms var(--srk-ease); transition-delay: calc(var(--ln, 0) * 300ms); }
.home-motion .home .home-how.is-story .home-how-pane.is-body .home-how-body .home-w { opacity: 1; }
.home-motion .home .home-how.is-story .home-sms-bubble { opacity: 0; transform: translateY(0.8em); transition: opacity 400ms var(--srk-ease), transform 400ms var(--srk-ease); }
.home-motion .home .home-how.is-story .home-scr-sms.is-play .home-sms-bubble { opacity: 1; transform: none; }
.home-motion .home .home-how.is-story .home-scr-sms.is-play .home-sms-bubble.is-link { transition-delay: 700ms; }
.home-motion .home .home-how.is-story .home-scr-sms.is-tap .home-tap { animation: home-tap 650ms ease-out both; }
@keyframes home-tap { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
/* The QR line-up: the sign starts small, off-centre and off-angle, then
   straightens, centres and grows into place; the brackets close in and
   lock, and one scan line confirms. The end frame is straight and centred,
   which is also what reduced motion and JS off show. */
.home-motion .home .home-how.is-story .home-cam-sign { transform: translate(-24%, 18%) rotate(-10deg) scale(0.58); transition: transform 1300ms cubic-bezier(0.25, 0.8, 0.25, 1); }
.home-motion .home .home-how.is-story .home-scr-cam.is-aim .home-cam-sign { transform: none; }
.home-motion .home .home-how.is-story .home-cam-frame { --c: #FFFFFF; transform: scale(1.6); opacity: 0; transition: transform 700ms cubic-bezier(0.3, 0, 0.2, 1), opacity 300ms; }
.home-motion .home .home-how.is-story .home-scr-cam.is-lock .home-cam-frame { --c: #2CE5A7; transform: none; opacity: 1; }
.home-motion .home .home-how.is-story .home-cam-pill { opacity: 0; transform: translateY(0.8em); transition: opacity 400ms var(--srk-ease), transform 400ms var(--srk-ease); }
.home-motion .home .home-how.is-story .home-scr-cam.is-open .home-cam-pill { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .home .home-how.is-story .home-story *,
  .home .home-how.is-story .home-story *::after { transition: none !important; animation: none !important; }
}

/* Phones and portrait tablets: the intro alone; then the phone on the left
   with the step list, the two tabs and the sign beside it, and the step
   under them. The up chevron sits clear of the phone, to its right. */
@media (max-width: 699px), (max-width: 999px) and (orientation: portrait) {
  .home .home-how.is-story .home-story {
    --srk-phone-width: max(104px, min(44vw, 260px, calc((var(--home-scene) - 340px) / 2.295)));
    grid-template-columns: var(--srk-phone-width) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "phone list" "phone ways" "phone card" "panes panes";
    column-gap: 14px;
    row-gap: 12px;
    align-content: center;
    align-items: start;
    padding: 44px 0 52px; }
  .home .home-how.is-story .home-how-text,
  .home .home-how.is-story .home-phone-fig,
  .home .home-how.is-story .home-how-device { display: contents; }
  .home .home-how.is-story .home-how-intro { grid-area: 1 / 1 / -1 / -1; align-self: center; text-align: center; }
  .home .home-how.is-story .home-how-list { grid-area: list; margin: 0; gap: 10px; align-self: start; }
  .home .home-how.is-story .home-how-list li { font-size: var(--home-card); gap: 10px; }
  .home .home-how.is-story .srk-phone { grid-area: phone; }
  .home .home-how.is-story .home-how-ways { grid-area: ways; justify-content: flex-start; margin: 0; }
  .home .home-how.is-story .home-qr-card { grid-area: card; margin: 6px 0 0; width: min(100%, 150px, calc(var(--srk-phone-width) * 0.82)); }
  .home .home-how.is-story .srk-phone-caption { display: none; }
  .home .home-how.is-story .home-how-panes { grid-area: panes; }
  .home .home-how.is-story .home-how-pane h3 { font-size: clamp(20px, 5.4vw, 30px); }
  .home .home-how.is-story .home-how-pane p.home-how-body { font-size: var(--home-card); line-height: 1.45; }
  .home .home-how.is-story .home-how-pane .srk-step-num { margin-bottom: 0.5rem; }
  .home .home-how-intro h2 { font-size: clamp(28px, 8.4vw, 44px); }
  .home .home-how-proc { --cap: calc(var(--home-body) * 0.727 * 1.1); }
  .home .home-how-proc li p { font-size: var(--home-body); }
  .home .home-how-sees { font-size: var(--home-body); }
}
/* Short phones (320x568): the phone moves up beside the up chevron (it sits
   left of it), the list starts under the chevron, the step text tightens,
   and the sign gives way: the camera screen shows the same sign. */
@media (max-width: 699px) and (max-height: 699px) {
  .home .home-how.is-story .home-story { --srk-phone-width: max(100px, min(44vw, calc((var(--home-scene) - 340px) / 2.295))); padding: 6px 0 10px; row-gap: 10px; }
  .home .home-how.is-story .home-how-list { margin-top: 34px; gap: 6px; }
  .home .home-how.is-story .home-how-list li { min-height: 22px; }
  .home .home-how.is-story .home-how-list::before, .home .home-how.is-story .home-how-list::after { top: 11px; bottom: 11px; }
  .home .home-how.is-story .home-qr-card { display: none; }
  .home .home-how.is-story .home-how-pane h3 { font-size: 18px; }
  .home .home-how.is-story .home-how-pane p.home-how-body { line-height: 1.4; }
  .home .home-how.is-story .home-how-pane p.home-how-body + p.home-how-body { margin-top: 0.4em; }
  .home .home-how.is-story .home-how-pane .srk-step-num { margin-bottom: 0.35rem; row-gap: 0.25rem; }
}

/* ---------- Round 3B fix loop ---------- */
/* Narrow phones (360 to 379 wide): the sign gives way as on short phones
   (the camera screen shows the same sign), so the step text stays clear. */
@media (max-width: 379px) {
  .home .home-how.is-story .home-qr-card { display: none; }
}
/* The phone's status bar stays on top of every screen (the camera too). */
.home .home-how.is-story .app-status { z-index: 2; }
.home .home-scr-cam h4 { padding-top: 24%; }
/* The camera's pill and the message header hold one line. */
.home .home-cam-pill { white-space: nowrap; gap: 0.35em; margin-inline: 4%; padding-inline: 0.7em; }
.home .home-cam-pill img { height: 1.9em; }
.home .home-sms-head > span { min-width: 0; }
.home .home-sms-head strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The step 04 link keeps normal word spacing, left aligned. */
.home .home-how-pane .home-next .srk-arrow { justify-content: flex-start; }
/* Short landscape screens (a 1366 laptop at 150%, 911x512): the intro and
   each step tighten, the stage clears the up chevron at the top and the
   down chevron at the bottom, and the step list runs across in one row. */
@media (min-width: 700px) and (max-height: 620px) and (orientation: landscape) {
  .home .home-how.is-story .home-story { --srk-phone-width: calc((var(--home-scene) - 150px) / 2.295 + 12px); padding: 40px 0 34px; }
  .home .home-how.is-story .home-how-intro h2 { font-size: clamp(26px, 3.4vw, 40px); }
  .home .home-how.is-story .home-how-proc { margin-top: 14px; gap: 30px; --cap: calc(var(--home-card) * 0.727 * 1.15); }
  .home .home-how.is-story .home-how-proc li { gap: 6px; }
  .home .home-how.is-story .home-how-proc li:not(:last-child)::after { top: calc(100% + 5px); height: 20px; }
  .home .home-how.is-story .home-how-proc li p,
  .home .home-how.is-story .home-how-sees { font-size: var(--home-card); }
  .home .home-how.is-story .home-how-sees { margin-top: 14px; }
  .home .home-how.is-story .home-story { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 32px; }
  .home .home-how.is-story .home-how-list { grid-template-columns: repeat(2, max-content); justify-content: start; gap: 6px 28px; margin-bottom: 14px; }
  .home .home-how.is-story .home-how-list::before,
  .home .home-how.is-story .home-how-list::after { display: none; }
  .home .home-how.is-story .home-how-list li { font-size: var(--home-card); gap: 8px; white-space: nowrap; }
  .home .home-how.is-story .home-how-pane h3 { font-size: clamp(20px, 2.4vw, 28px); }
  .home .home-how.is-story .home-how-pane p.home-how-body { font-size: 17px; line-height: 1.45; }
  .home .home-how.is-story .home-how-ways { margin-top: 8px; }
  .home .home-how.is-story .home-how-way { min-height: 34px; padding: 6px 14px; }
  .home .home-how.is-story .srk-phone-caption { display: none; }
}

/* ---------- Rohan 09:57: tabs and caption centred on the phone ---------- */
/* The sign hangs beside the phone (out of flow), so the tabs and the
   caption centre on the phone itself. Off step 01 the caption moves up by
   the tabs' height (a transform, so nothing re-lays out) and sits the same
   small gap under the phone as the tabs do on step 01. */
.home .home-how.is-story .home-how-device { position: relative; display: block; }
.home .home-how.is-story .home-qr-card { position: absolute; right: calc(100% + clamp(14px, 1.6vw, 24px)); bottom: calc(var(--srk-phone-width) * 0.5); margin: 0; }
.home .home-how.is-story .home-how-ways { margin-top: 14px; min-height: 40px; }
.home .home-how.is-story .srk-phone-caption { margin-top: 14px; }
.home .home-how.is-story .home-story:is([data-at="2"], [data-at="3"], [data-at="4"]) .srk-phone-caption { transform: translateY(-54px); }
@media (max-width: 699px), (max-width: 999px) and (orientation: portrait) {
  .home .home-how.is-story .home-qr-card { position: relative; right: auto; bottom: auto; }
  .home .home-how.is-story .home-how-device { display: contents; }
}
/* Portrait tablets: the caption sits under the phone, centred on it. */
@media (min-width: 700px) and (max-width: 999px) and (orientation: portrait) {
  .home .home-how.is-story .home-story { grid-template-areas: "phone list" "phone ways" "phone card" "cap ." "panes panes"; grid-template-rows: auto auto auto auto auto; }
  .home .home-how.is-story .srk-phone-caption { display: block; grid-area: cap; margin: 0; max-width: var(--srk-phone-width); justify-self: center; text-align: center; }
  .home .home-how.is-story .home-story:is([data-at="2"], [data-at="3"], [data-at="4"]) .srk-phone-caption { transform: none; }
}

/* ---------- Rohan 10:40: a Next button on every stop ---------- */
/* The site's primary pill (srk-btn) with a down arrow. Each one does what
   the page's down chevron does. In a step it is the body's last line, so it
   fades in after the text; under reduced motion it shows at once. Without
   JS (no story) there is nothing for it to do, so it stays hidden. */
.home .home-how-go { display: none; }
.home .home-how.is-story .home-how-go { display: block; max-width: none; }
.home .home-how.is-story .home-how-intro .home-how-go { margin-top: clamp(16px, 3vh, 28px); }
.home .home-how.is-story .home-how-pane p.home-how-go { margin-top: clamp(16px, 2.6vh, 26px); }
.home .home-how-next { min-height: 48px; gap: 0.55rem; }
.home-motion .home .home-how.is-story .home-how-intro .home-how-go { opacity: 0; transform: translateY(8px); transition: opacity 700ms var(--srk-ease) 450ms, transform 700ms var(--srk-ease) 450ms; }
.home-motion .home .home-how.is-story .home-how-intro.is-sees .home-how-go { opacity: 1; transform: none; }
.home .home-how-next svg { flex: none; }
.home .home-how-next:focus-visible { outline: 2px solid var(--srk-accent-text); outline-offset: 3px; }
@media (max-width: 699px), (max-width: 999px) and (orientation: portrait) {
  .home .home-how.is-story .home-how-pane .home-how-next { width: 100%; }
  .home .home-how.is-story .home-how-pane p.home-how-go { margin-top: 12px; }
  .home .home-how.is-story .home-qr-card { width: min(100%, 132px, calc(var(--srk-phone-width) * 0.78)); }
}
@media (max-width: 699px) and (max-height: 699px) {
  .home .home-how.is-story .home-how-next { min-height: 44px; padding-block: 9px; }
  .home .home-how.is-story .home-how-pane p.home-how-go { margin-top: 8px; }
  .home .home-how.is-story .home-how-intro .home-how-go { margin-top: 10px; }
}
@media (min-width: 700px) and (max-height: 620px) and (orientation: landscape) {
  .home .home-how.is-story .home-how-next { min-height: 44px; padding-block: 9px; }
  .home .home-how.is-story .home-how-pane p.home-how-go { margin-top: 10px; }
  .home .home-how.is-story .home-how-intro .home-how-go { margin-top: 10px; }
}
/* Room for the Next buttons: the phone gives a little height on phones and
   tablets, and the tightest screens tighten further, so every stop stays
   one screen with the buttons clear of the page chevrons. */
@media (max-width: 699px), (max-width: 999px) and (orientation: portrait) {
  .home .home-how.is-story .home-story { --srk-phone-width: max(104px, min(44vw, 230px, calc((var(--home-scene) - 400px) / 2.295))); row-gap: 8px; }
  .home .home-how.is-story .home-qr-card { width: min(100%, 116px, calc(var(--srk-phone-width) * 0.72)); }
}
@media (max-width: 699px) and (max-height: 699px) {
  .home .home-how.is-story .home-story { --srk-phone-width: max(88px, min(44vw, calc((var(--home-scene) - 400px) / 2.295))); row-gap: 8px; }
  .home .home-how-intro h2 { font-size: 26px; }
  .home .home-how.is-story .home-how-proc { margin-top: 14px; gap: 30px; }
  .home .home-how.is-story .home-how-proc li:not(:last-child)::after { top: calc(100% + 4px); height: 22px; }
  .home .home-how.is-story .home-how-sees { margin-top: 12px; }
}
@media (max-width: 699px) and (max-height: 599px) {
  .home .home-how.is-story .home-story { --srk-phone-width: 74px; row-gap: 6px; padding: 4px 0 6px; }
  .home .home-how.is-story .home-how-list { margin-top: 30px; }
  .home .home-how.is-story .home-how-pane .srk-step-num { margin-bottom: 0.25rem; }
  .home .home-how.is-story .home-how-pane h3 { margin-bottom: 0.3em; }
}
@media (min-width: 700px) and (max-height: 620px) and (orientation: landscape) {
  .home .home-how.is-story .home-how-intro h2 { font-size: clamp(24px, 3vw, 36px); }
  .home .home-how.is-story .home-how-proc { margin-top: 10px; gap: 22px; }
  .home .home-how.is-story .home-how-proc li:not(:last-child)::after { top: calc(100% + 3px); height: 16px; }
  .home .home-how.is-story .home-how-sees { margin-top: 10px; }
  .home .home-how.is-story .home-how-intro .home-how-go { margin-top: 6px; }
}
/* The intro on shorter desktop screens: the first process line holds one
   line and the gaps tighten, so it clears both page chevrons. */
@media (min-width: 700px) { .home .home-how.is-story .home-how-proc li p { max-width: 48ch; } }
@media (min-width: 700px) and (max-height: 820px) {
  .home .home-how.is-story .home-how-intro h2 { font-size: clamp(30px, 3.8vw, 52px); }
  .home .home-how.is-story .home-how-proc { margin-top: 20px; gap: 36px; }
  .home .home-how.is-story .home-how-proc li:not(:last-child)::after { height: 20px; }
  .home .home-how.is-story .home-how-sees { margin-top: 16px; }
  .home .home-how.is-story .home-how-intro .home-how-go { margin-top: 12px; }
}
@media (min-width: 700px) and (max-height: 620px) and (orientation: landscape) {
  .home .home-how.is-story .home-how-proc { margin-top: 8px; gap: 20px; }
  .home .home-how.is-story .home-how-proc li { gap: 4px; }
  .home .home-how.is-story .home-how-proc li:not(:last-child)::after { height: 14px; }
  .home .home-how.is-story .home-how-sees { margin-top: 8px; }
  .home .home-how.is-story .home-how-intro .home-how-go { margin-top: 4px; }
}
@media (max-width: 699px) and (max-height: 599px) {
  .home .home-how.is-story .home-how-list { margin-top: 26px; }
  .home .home-how.is-story .home-how-pane h3 { line-height: 1.1; }
  .home .home-how.is-story .home-how-pane p.home-how-body { line-height: 1.35; }
  .home .home-how.is-story .home-how-pane p.home-how-body + p.home-how-body { margin-top: 0.3em; }
  .home .home-how.is-story .home-how-pane p.home-how-go { margin-top: 6px; }
}
@media (max-width: 699px) { .home .home-how.is-story .home-how-ways { margin-top: 4px; } }
@media (min-width: 700px) and (max-height: 620px) and (orientation: landscape) {
  .home .home-how.is-story .home-how-intro { max-width: none; }
  .home .home-how.is-story .home-how-intro h2 { font-size: clamp(24px, 3.2vw, 34px); }
}
/* The smallest phones (under 600 tall): the step text is one size down
   (14px) so the step and its Next button fit one screen. */
@media (max-width: 699px) and (max-height: 599px) {
  .home .home-how.is-story .home-how-pane p.home-how-body { font-size: 14px; }
}
@media (min-width: 700px) and (max-height: 620px) and (orientation: landscape) {
  .home .home-how.is-story .home-how-sees { margin-top: 4px; }
  .home .home-how.is-story .home-how-intro .home-how-go { margin-top: 0; }
}

/* ---------- Rohan 11:21: one even rhythm for the four old ways ---------- */
/* On two columns the old lines no longer share rows with the answers (the
   ShareRing Me and Link rows are taller, which spread lines 1 and 2). Each
   old line is one line, stacked from the top of the first row, one line
   height plus the list's row gap apart: the gap lines 3 and 4 had. The
   answers keep their rows. Only grid placement changes; the markup (each
   old way paired with its answer for screen readers) stays as it is. */
@media (min-width: 700px) {
  .home .home-struck li { display: contents; }
  .home .home-struck li > .home-old {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    white-space: nowrap;
    font-size: min(clamp(23px, 2.8vw, 38px), 3.05vw);
    margin-top: calc(var(--i, 0) * (1lh + clamp(10px, 1.6vh, 18px))); }
  .home .home-struck li:nth-child(2) > .home-old { --i: 1; }
  .home .home-struck li:nth-child(3) > .home-old { --i: 2; }
  .home .home-struck li:nth-child(4) > .home-old { --i: 3; }
  .home .home-struck li > .home-new { grid-column: 2; }
  .home .home-struck li:nth-child(1) > .home-new { grid-row: 1; }
  .home .home-struck li:nth-child(2) > .home-new { grid-row: 2; }
  .home .home-struck li:nth-child(3) > .home-new { grid-row: 3; }
  .home .home-struck li:nth-child(4) > .home-new { grid-row: 4; }
}