/* ============================================================
   BlueSystm — how-it-works-mobile.css
   The How It Works page refitted for phones, ported from Design's
   How It Works Mobile.dc.html.

   GENERATED — do not hand-edit. Change the source in
   design-handoff/how-it-works-mobile/delivered/ or the drop/rename lists
   in scripts/port-hiw-mobile.py, then re-run:

       python3 scripts/port-hiw-mobile.py

   Everything is inside @media (max-width: 900px); the desktop page is
   untouched. Linked AFTER the page's own <style>, so equal-specificity
   rules fall this way.
   ============================================================ */

@media (max-width: 900px) {

  /* ── Design's starting point ──
     Design's page is a reset and nothing else under its own rules, so every
     property it never mentions sits at its initial or inherited value. Here
     the desktop layout is underneath and Design wrote no overrides for it,
     because on its page there was nothing to override — so a desktop gap, a
     line-height folded into a `font:` shorthand, an uppercase, a grid, all
     just stand.

     `all: revert` is the whole of that problem in one declaration: inside
     Design's sections every author declaration goes back to the user agent,
     which is precisely the ground Design draws on. Carrying its reset back
     down on top restores its page, and every rule below outweighs this one.

     Anything the live page keeps in here and Design has no equivalent for —
     the MacBook artifacts, the Act I dot controls — reverts to a bare block
     and must be hidden deliberately rather than by accident. */
  .hero.hero.hero,
  .hero.hero.hero *:not(:where(svg, svg *)),
  .hero.hero.hero *::before,
  .hero.hero.hero *::after,
  .creed.creed.creed,
  .creed.creed.creed *:not(:where(svg, svg *)),
  .creed.creed.creed *::before,
  .creed.creed.creed *::after,
  .rail.rail.rail,
  .rail.rail.rail *:not(:where(svg, svg *)),
  .rail.rail.rail *::before,
  .rail.rail.rail *::after,
  .showcase.showcase.showcase,
  .showcase.showcase.showcase *:not(:where(svg, svg *)),
  .showcase.showcase.showcase *::before,
  .showcase.showcase.showcase *::after,
  .territory-section.territory-section.territory-section,
  .territory-section.territory-section.territory-section *:not(:where(svg, svg *)),
  .territory-section.territory-section.territory-section *::before,
  .territory-section.territory-section.territory-section *::after,
  .cta-section.cta-section.cta-section,
  .cta-section.cta-section.cta-section *:not(:where(svg, svg *)),
  .cta-section.cta-section.cta-section *::before,
  .cta-section.cta-section.cta-section *::after {
    all: revert;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .hero.hero.hero :where(a),
  .creed.creed.creed :where(a),
  .rail.rail.rail :where(a),
  .showcase.showcase.showcase :where(a),
  .territory-section.territory-section.territory-section :where(a),
  .cta-section.cta-section.cta-section :where(a) {
    text-decoration: none;
    color: inherit;
  }

  .hero.hero.hero :where(button),
  .creed.creed.creed :where(button),
  .rail.rail.rail :where(button),
  .showcase.showcase.showcase :where(button),
  .territory-section.territory-section.territory-section :where(button),
  .cta-section.cta-section.cta-section :where(button) {
    font: inherit;
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
  }

  .hero.hero.hero :where(input),
  .creed.creed.creed :where(input),
  .rail.rail.rail :where(input),
  .showcase.showcase.showcase :where(input),
  .territory-section.territory-section.territory-section :where(input),
  .cta-section.cta-section.cta-section :where(input) {
    font: inherit;
  }

  .rail-head.rail-head.rail-head h2 {
      font-size: 32px;
      line-height: 1.06;
      letter-spacing: var(--ls-tight);
      font-weight: 800;
      color: var(--dark);
      text-wrap: pretty;
  }
  .rail-head h2 .accent.accent.accent {
      color: var(--blue);
  }
  .lede.lede.lede {
      font-size: 16px; line-height: 1.55; color: var(--body); text-wrap: pretty;
  }
  .hero.hero.hero,
    .creed.creed.creed,
    .rail.rail.rail,
    .showcase.showcase.showcase,
    .territory-section.territory-section.territory-section,
    .cta-section.cta-section.cta-section {
      position: relative; scroll-margin-top: 80px;
  }
  .hero.hero.hero {
      padding: calc(104px + env(safe-area-inset-top, 0px)) 20px 0; text-align: center;
  }
  .hero.hero.hero h1 {
      font-size: 40px;
      line-height: 1.04;
      letter-spacing: var(--ls-tight);
      font-weight: 800;
      color: var(--dark);
      text-wrap: pretty;
  }
  .hero h1 .accent.accent.accent {
      color: var(--blue);
  }
  .hero-sub.hero-sub.hero-sub {
      margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--muted); text-wrap: pretty;
  }
  .b2.b2.b2 {
      margin-top: 30px;
  }
  .b2-rail.b2-rail.b2-rail {
      position: relative; display: flex; gap: 6px;
  }
  .b2-thumb.b2-thumb.b2-thumb {
      position: absolute;
      top: 0;
      left: 0;
      height: 3px;
      border-radius: 999px;
      background: var(--blue);
      box-shadow: 0 3px 10px rgba(37,99,235,.35);
      pointer-events: none;
  }
  .b2-step.b2-step.b2-step {
      flex: 1;
      min-height: 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      padding: 0 2px 8px;
  }
  .b2-pill.b2-pill.b2-pill {
      width: 100%; height: 3px; border-radius: 999px; background: var(--border);
  }
  .b2-step-k.b2-step-k.b2-step-k {
      font-size: 15px; font-weight: 700; letter-spacing: var(--ls-snug); color: var(--muted); transition: color var(--dur-fast) var(--ease-standard);
  }
  .b2-step.active .b2-step-k.b2-step-k.b2-step-k {
      color: var(--dark);
  }
  .b2-step-d.b2-step-d.b2-step-d {
      display: none;
  }
  .b2-viewport.b2-viewport.b2-viewport {
      overflow: hidden; margin: 0 -6px;
  }
  .b2-track.b2-track.b2-track {
      display: flex; align-items: stretch; transition: transform .76s cubic-bezier(0.5, 0, 0.12, 1);
  }
  .b2-slide.b2-slide.b2-slide {
      flex: 0 0 100%; display: flex; padding: 0 6px;
  }
  .b2-panel.b2-panel.b2-panel {
      width: 100%;
      margin-top: 18px;
      padding: 26px 18px 24px;
      background: linear-gradient(158deg, #EEF1F8 0%, #E3E8F2 100%);
      border: 1px solid rgba(11,16,34,0.08);
      border-radius: var(--r-lg);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
      overflow: hidden;
      transform: translateY(0);
      transition: transform .7s var(--ease-standard);
  }
  .b2-slide.active .b2-panel.b2-panel.b2-panel {
      transform: translateY(-6px);
  }
  .b2-head.b2-head.b2-head {
      text-align: center;
  }
  .b2-head.b2-head.b2-head h4 {
      font-size: 27px; line-height: 1.08; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark); text-wrap: pretty;
  }
  .b2-head .b2-lead-copy.b2-lead-copy.b2-lead-copy {
      margin-top: 9px; font-size: 15px; line-height: 1.5; color: var(--muted);
  }
  .b2-list.b2-list.b2-list {
      list-style: none; margin-top: 0; display: flex; flex-direction: column; gap: 13px;
  }
  .b2-list.b2-list.b2-list li {
      display: flex; gap: 10px; text-align: left; font-size: 14px; line-height: 1.5; color: var(--body); text-wrap: pretty;
  }
  .ck.ck.ck {
      width: 14px; height: 14px; color: var(--blue); flex-shrink: 0; margin-top: 4px;
  }
  .b2-chips.b2-chips.b2-chips {
      margin-top: 20px; display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px;
  }
  .b2-chip.b2-chip.b2-chip {
      flex: 0 0 auto; white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: -0.005em; color: var(--blue); background: var(--blue-tint); padding: 8px 9px; border-radius: var(--r-pill);
  }
  .b2-phone.b2-phone.b2-phone {
      display: block; width: 344px; max-width: 100%; margin: 22px auto 24px;
  }
  .creed.creed.creed {
      padding: 56px 20px 0; text-align: center;
  }
  .creed-eyebrow.creed-eyebrow.creed-eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--blue);
  }
  .creed .lead-line.lead-line.lead-line {
      margin-top: 14px; font-size: 23px; line-height: 1.24; letter-spacing: var(--ls-snug); font-weight: 800; color: var(--dark); text-wrap: pretty;
  }
  .creed .lead-line .accent.accent.accent {
      color: var(--blue);
  }
  .creed .sub-line.sub-line.sub-line {
      margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty;
  }
  .hiw-phone.hiw-phone.hiw-phone {
      display: block; width: 100%; margin: 0 auto;
  }
  .rail.rail.rail {
      padding: 64px 0 0;
  }
  .rail-head.rail-head.rail-head {
      padding: 0 20px;
  }
  .rail-link.rail-link.rail-link {
      display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--blue); white-space: nowrap;
  }
  .rail-link.rail-link.rail-link svg {
      width: 13px; height: 13px;
  }
  .rail-viewport.rail-viewport.rail-viewport {
      margin-top: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .rail-viewport.rail-viewport.rail-viewport::-webkit-scrollbar {
      display: none;
  }
  .rail-track.rail-track.rail-track {
      display: flex; gap: 12px; padding: 0 20px; width: max-content;
  }
  .panel.panel.panel {
      flex: 0 0 auto;
      width: 330px;
      scroll-snap-align: start;
      padding: 20px 16px;
      background: linear-gradient(158deg, #EEF1F8 0%, #E3E8F2 100%);
      border: 1px solid rgba(11,16,34,0.08);
      border-radius: var(--r-lg);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .panel-eyebrow.panel-eyebrow.panel-eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--blue);
  }
  .panel-cap.panel-cap.panel-cap h3 {
      margin-top: 8px; font-size: 24px; line-height: 1.08; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark);
  }
  .panel-cap h3 .accent.accent.accent {
      color: var(--blue);
  }
  .panel-cap.panel-cap.panel-cap p {
      margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--body); text-wrap: pretty;
  }
  .panel-frame.panel-frame.panel-frame {
      margin-top: 18px;
  }
  .panel-frame .hiw-phone.hiw-phone.hiw-phone {
      max-width: 274px;
  }
  .showcase.showcase.showcase {
      padding: 64px 20px 0; text-align: center;
  }
  .showcase-eyebrow.showcase-eyebrow.showcase-eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--blue);
  }
  .showcase-head.showcase-head.showcase-head h2 {
      margin-top: 12px; font-size: 32px; line-height: 1.06; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark); text-wrap: pretty;
  }
  .showcase-head h2 .accent.accent.accent {
      color: var(--blue);
  }
  .showcase-head.showcase-head.showcase-head p {
      margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty;
  }
  .showcase .hiw-phone.hiw-phone.hiw-phone {
      margin-top: 30px; max-width: 390px;
  }
  .territory-section.territory-section.territory-section {
      padding: 64px 20px 0;
  }
  .territory-headline.territory-headline.territory-headline {
      font-size: 34px; line-height: 1.04; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark);
  }
  .territory-headline .accent.accent.accent {
      color: var(--blue);
  }
  .territory-lede.territory-lede.territory-lede {
      margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--body); text-wrap: pretty;
  }
  .territory-stat-list.territory-stat-list.territory-stat-list {
      margin-top: 28px; display: flex; flex-direction: column; gap: 20px;
  }
  .territory-stat-row.territory-stat-row.territory-stat-row {
      display: flex; gap: 16px; align-items: flex-start;
  }
  .territory-stat-num.territory-stat-num.territory-stat-num {
      font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: var(--ls-tight); color: var(--blue); min-width: 62px;
  }
  .territory-stat-num .unit.unit.unit {
      font-size: 18px; opacity: .6;
  }
  .territory-stat-k.territory-stat-k.territory-stat-k {
      font-size: 12px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dark);
  }
  .territory-stat-d.territory-stat-d.territory-stat-d {
      margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--muted);
  }
  .territory-search-card.territory-search-card.territory-search-card {
      margin-top: 32px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      box-shadow: var(--e3);
      padding: 22px 18px;
  }
  .territory-card-label.territory-card-label.territory-card-label {
      font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--blue);
  }
  .territory-card-title.territory-card-title.territory-card-title {
      margin-top: 8px; font-size: 24px; line-height: 1.12; letter-spacing: var(--ls-snug); font-weight: 800; color: var(--dark);
  }
  .territory-step-group.territory-step-group.territory-step-group {
      margin-top: 22px; transition: opacity var(--dur-base) var(--ease-standard);
  }
  .territory-step-group.locked.locked.locked {
      opacity: .45; pointer-events: none;
  }
  .territory-step-label-row.territory-step-label-row.territory-step-label-row {
      display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
  }
  .territory-step-badge.territory-step-badge.territory-step-badge {
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--bg); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; color: var(--muted);
      transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  }
  .territory-step-badge.done.done.done {
      background: var(--blue); border-color: var(--blue); color: #FFFFFF;
  }
  .territory-trade-row.territory-trade-row.territory-trade-row {
      display: flex; flex-wrap: wrap; gap: 8px;
  }
  .territory-trade-chip.territory-trade-chip.territory-trade-chip {
      min-height: 44px;
      display: flex; align-items: center;
      padding: 0 16px;
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      font-size: 14px; font-weight: 600; color: var(--body);
      transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  }
  .territory-trade-chip.active.active.active {
      background: var(--blue); border-color: var(--blue); color: #FFFFFF;
  }
  .territory-search-wrap.territory-search-wrap.territory-search-wrap {
      position: relative;
  }
  .territory-search-box.territory-search-box.territory-search-box {
      display: flex; align-items: center; gap: 10px;
      height: 52px; padding: 0 6px 0 14px;
      border: 1px solid var(--border); border-radius: var(--r-pill);
      background: var(--bg);
      transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  }
  .territory-search-box.territory-search-box.territory-search-box:focus-within {
      border-color: var(--blue); box-shadow: var(--ring);
  }
  .territory-search-icon.territory-search-icon.territory-search-icon {
      width: 17px; height: 17px; color: var(--muted); flex-shrink: 0;
  }
  .territory-search-input.territory-search-input.territory-search-input {
      flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 15px; color: var(--dark);
  }
  .territory-search-input.territory-search-input.territory-search-input::placeholder {
      color: var(--muted);
  }
  .territory-check-btn.territory-check-btn.territory-check-btn {
      min-height: 40px; padding: 0 18px;
      background: var(--blue); border-radius: var(--r-pill);
      color: #FFFFFF; font-size: 13px; font-weight: 600;
      flex-shrink: 0;
  }
  .territory-check-btn.territory-check-btn.territory-check-btn:disabled {
      background: var(--border); color: var(--muted);
  }
  .territory-autocomplete.territory-autocomplete.territory-autocomplete {
      display: none;
      position: absolute; left: 0; right: 0; top: calc(100% + 6px);
      z-index: 5; max-height: 232px; overflow-y: auto;
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--r-md); box-shadow: var(--e3); padding: 5px;
  }
  .territory-autocomplete.open.open.open {
      display: block;
  }
  .territory-ac-item.territory-ac-item.territory-ac-item {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--dark);
  }
  .territory-ac-item.active.active.active {
      background: var(--blue-tint);
  }
  .territory-ac-item.territory-ac-item.territory-ac-item mark {
      background: none; color: var(--blue); font-weight: 700;
  }
  .territory-ac-state.territory-ac-state.territory-ac-state {
      font-size: 12px; color: var(--muted);
  }
  .territory-ac-empty.territory-ac-empty.territory-ac-empty,
    .territory-ac-loading.territory-ac-loading.territory-ac-loading {
      padding: 14px 12px; font-size: 13px; color: var(--muted);
  }
  .dym.dym.dym {
      color: var(--blue); font-weight: 600;
  }
  .territory-suggest.territory-suggest.territory-suggest {
      display: none; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted);
  }
  .territory-suggest.show.show.show {
      display: block;
  }
  .territory-result-slot.territory-result-slot.territory-result-slot {
      margin-top: 20px;
  }
  .territory-empty-state.territory-empty-state.territory-empty-state {
      border: 1.5px dashed var(--border); border-radius: var(--r-md); padding: 26px 18px; text-align: center;
  }
  .territory-empty-state.hidden.hidden.hidden {
      display: none;
  }
  .territory-empty-icon.territory-empty-icon.territory-empty-icon {
      width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: flex; align-items: center; justify-content: center;
  }
  .territory-empty-title.territory-empty-title.territory-empty-title {
      font-size: 15px; font-weight: 700; color: var(--dark); letter-spacing: var(--ls-snug);
  }
  .territory-empty-sub.territory-empty-sub.territory-empty-sub {
      margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted);
  }
  .territory-result.territory-result.territory-result {
      display: none; opacity: 0; transform: translateY(10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .territory-result.show.show.show {
      opacity: 1; transform: none;
  }
  .territory-result-top.territory-result-top.territory-result-top {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  }
  .territory-result-city.territory-result-city.territory-result-city {
      font-size: 21px; font-weight: 800; letter-spacing: var(--ls-snug); color: var(--dark);
  }
  .territory-result-meta.territory-result-meta.territory-result-meta {
      margin-top: 3px; font-size: 13px; color: var(--muted);
  }
  .territory-status-pill.territory-status-pill.territory-status-pill {
      display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--green); background: var(--green-tint); padding: 6px 11px; border-radius: var(--r-pill); white-space: nowrap;
  }
  .territory-status-pill .dot.dot.dot {
      width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  }
  .territory-result-stats.territory-result-stats.territory-result-stats {
      margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  }
  .territory-stat-k2.territory-stat-k2.territory-stat-k2 {
      font-size: 10px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted);
  }
  .territory-stat-v2.territory-stat-v2.territory-stat-v2 {
      margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--dark);
  }
  .territory-result-cta.territory-result-cta.territory-result-cta {
      margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
  }
  .territory-cta-note.territory-cta-note.territory-cta-note {
      font-size: 13px; line-height: 1.5; color: var(--muted);
  }
  .territory-cta-note .hl.hl.hl {
      color: var(--dark); font-weight: 600;
  }
  .territory-lock-btn.territory-lock-btn.territory-lock-btn {
      width: 100%; min-height: 50px; margin-top: 14px; background: var(--blue); border-radius: var(--r-pill); color: #FFFFFF; font-size: 14px; font-weight: 600;
  }
  .territory-lock-btn.territory-lock-btn.territory-lock-btn:active {
      background: var(--blue-hover);
  }
  .cta-section.cta-section.cta-section {
      padding: 64px 20px 0;
  }
  .cta-left.cta-left.cta-left h2 {
      font-size: 32px; line-height: 1.06; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark);
  }
  .cta-left h2 .accent.accent.accent {
      color: var(--blue);
  }
  .cta-left .lede.lede.lede {
      margin-top: 16px;
  }
  .cta-proof-row.cta-proof-row.cta-proof-row {
      margin-top: 28px; display: flex; flex-direction: column; gap: 16px;
  }
  .cta-proof-item.cta-proof-item.cta-proof-item {
      display: flex; align-items: baseline; gap: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  }
  .cta-proof-num.cta-proof-num.cta-proof-num {
      font-size: 22px; font-weight: 800; letter-spacing: var(--ls-tight); color: var(--blue); min-width: 112px; flex-shrink: 0;
  }
  .cta-proof-label.cta-proof-label.cta-proof-label {
      font-size: 13px; line-height: 1.45; color: var(--muted);
  }
  .cta-actions.cta-actions.cta-actions {
      margin-top: 28px;
  }
  .cta-btn.cta-btn.cta-btn {
      display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 16px; background: var(--blue); border-radius: var(--r-pill); color: #FFFFFF; font-size: 15px; font-weight: 600;
  }
  .cta-btn.cta-btn.cta-btn:active {
      background: var(--blue-hover);
  }
  .cta-micro.cta-micro.cta-micro {
      display: block; margin-top: 12px; text-align: center; font-size: 13px; color: var(--muted);
  }
  .calc-card.calc-card.calc-card {
      margin-top: 32px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e3); overflow: hidden;
  }
  .calc-topbar.calc-topbar.calc-topbar {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border);
  }
  .calc-topbar-title.calc-topbar-title.calc-topbar-title {
      display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--dark);
  }
  .calc-topbar-title.calc-topbar-title.calc-topbar-title svg {
      color: var(--blue); flex-shrink: 0;
  }
  .calc-topbar-pill.calc-topbar-pill.calc-topbar-pill {
      font-size: 10px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); background: var(--bg); border: 1px solid var(--border); padding: 4px 9px; border-radius: var(--r-pill);
  }
  .calc-row.calc-row.calc-row {
      display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border);
  }
  .calc-row-label.calc-row-label.calc-row-label {
      font-size: 14px; font-weight: 600; color: var(--dark);
  }
  .calc-row-label .sub.sub.sub {
      display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--muted);
  }
  .calc-row-value.calc-row-value.calc-row-value {
      font-size: 19px; font-weight: 700; color: var(--dark); white-space: nowrap;
  }
  .calc-row-value .u.u.u {
      font-size: 14px; color: var(--muted);
  }
  .calc-result.calc-result.calc-result {
      padding: 22px 16px; background: var(--blue-tint); text-align: center;
  }
  .calc-result-label.calc-result-label.calc-result-label {
      font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--blue);
  }
  .calc-result-value.calc-result-value.calc-result-value {
      margin-top: 8px; font-size: 38px; line-height: 1; font-weight: 800; letter-spacing: var(--ls-tight); color: var(--dark);
  }
  .calc-result-value .dollar.dollar.dollar {
      font-size: 24px; vertical-align: 6px; color: var(--blue);
  }
  .calc-result-sub.calc-result-sub.calc-result-sub {
      margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--muted);
  }
  .calc-hint.calc-hint.calc-hint {
      display: flex; align-items: center; gap: 8px; padding: 13px 16px; font-size: 12px; color: var(--muted);
  }
  .calc-hint.calc-hint.calc-hint svg {
      color: var(--blue); flex-shrink: 0;
  }
  .site-footer.site-footer.site-footer {
      padding: 64px 0 28px;
  }
  .footer-nav.footer-nav.footer-nav {
      margin: 36px 0 0; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px;
  }
  .footer-brand.footer-brand.footer-brand {
      grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start;
  }
  .footer-brand.footer-brand.footer-brand img {
      height: 112px; width: auto; margin: -40px 0 -40px -12px;
  }
  .footer-brand.footer-brand.footer-brand p {
      font-size: 14px; line-height: 1.6; color: var(--body);
  }
  .footer-col.footer-col.footer-col {
      display: flex; flex-direction: column; gap: 12px;
  }
  .footer-col.footer-col.footer-col h4 {
      font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--body); margin-bottom: 2px;
  }
  .footer-col.footer-col.footer-col a {
      font-size: 14px; color: var(--body);
  }
  .footer-legal.footer-legal.footer-legal {
      margin: 36px 20px 0; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px;
  }
  .footer-legal.footer-legal.footer-legal p {
      font-size: 13px; color: var(--muted);
  }

  /* ── where the two markups differ — see the note in the port script ── */
  .b2-panel.b2-panel.b2-panel {
      display: flex; flex-direction: column;
  }
  .b2-copy.b2-copy.b2-copy {
      display: contents;
  }
  .b2-step-label.b2-step-label.b2-step-label {
      display: contents;
  }
  .b2-head.b2-head.b2-head {
      order: 1;
  }
  .b2-phone.b2-phone.b2-phone {
      order: 2;
  }
  .b2-list.b2-list.b2-list {
      order: 3;
  }
  .b2-chips.b2-chips.b2-chips {
      order: 4;
  }
  .rail .macbook.macbook.macbook {
      display: none;
  }
  .rail-controls.rail-controls.rail-controls {
      display: none;
  }
  .b2-slide.b2-slide.b2-slide {
      min-width: 0;
  }
  .b2-phone--w.b2-phone--w.b2-phone--w {
      display: none;
  }
  .b2-phone.b2-phone.b2-phone {
      width: 274px;
  }
  .panel.panel.panel {
      padding-bottom: 0; overflow: hidden;
  }
  .panel-frame.panel-frame.panel-frame {
      height: 426px; overflow: hidden;
  }
  .b2-viewport.b2-viewport.b2-viewport {
      overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .b2-viewport.b2-viewport.b2-viewport::-webkit-scrollbar {
      display: none;
  }
  .b2-slide.b2-slide.b2-slide {
      scroll-snap-align: start; scroll-snap-stop: always;
  }

  /* ── Act II stays live — see the note in the port script ── */
  .showcase .hero-artifact.hero-artifact.hero-artifact {
      position: relative; width: 340px; max-width: 100%; margin: 30px auto 0; aspect-ratio: 1350 / 2760; container-type: inline-size;
  }
  .showcase .hiw-phone.hiw-phone.hiw-phone {
      position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; max-width: none; z-index: 0;
  }
  .showcase .hero-artifact.hero-artifact.hero-artifact::after {
      content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("../img/iphone-frame.webp") center / 100% 100% no-repeat;
  }
  .showcase .macbook.macbook.macbook {
      position: absolute; left: 5.3333%; top: 2.5%; width: 89.3333%; height: 95%; z-index: 1; background: transparent; border-radius: 15.5cqw; clip-path: inset(0 round 15.5cqw); overflow: hidden;
  }
  .showcase .macbook-screen.macbook-screen.macbook-screen {
      display: contents;
  }
  .showcase .macbook-menubar.macbook-menubar.macbook-menubar {
      display: none;
  }
  .showcase .macbook-bezel.macbook-bezel.macbook-bezel {
      display: none;
  }
  .showcase .macbook-view.macbook-view.macbook-view {
      position: absolute; left: 0; top: 6.7506%; width: 100%; height: 93.2494%;
  }
  .showcase .macbook-view.macbook-view.macbook-view > img {
      display: none;
  }
  .showcase .macbook-view.macbook-view.macbook-view > iframe {
      position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .b2-slide.active.active.active {
      animation: none;
  }
}