/* rb-steps v1: the RunupBiz base template (the hub and every product landing start here). One source:
   framework/templates/landing-static/system/rb-steps.css, released and never edited (a new look is a new version).
   It is BUILT INTO each page at that page's own deploy (core/scaffold/landing_steps.mjs; the hub copies it at build), never
   linked across products. A product adds its accent (--p, --p-on, --p-ink, generated) and may add its own theme.css after
   this file. Colours use light-dark(): one declaration per role, the theme comes from color-scheme. */

@font-face {
  font-family: "RB Display";
  src: url("rb-display.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2190-2193;
}

:root {
  color-scheme: light dark;
  --rb-violet: #7C3AED;
  --rb-bg: light-dark(#FBFAFE, #0C0A12);
  --rb-surface: light-dark(#FFFFFF, #15121D);
  --rb-surface-2: light-dark(#F3F0FA, #1D1928);
  --rb-line: light-dark(#E4DEEF, #2A2438);
  --rb-line-strong: light-dark(#8C84A3, #6F6688);
  --rb-ink-1: light-dark(#15121D, #F4F1FA);
  --rb-ink-2: light-dark(#4A4358, #C9C1DA);
  --rb-ink-3: light-dark(#655D7A, #A39BB8);
  --rb-link: light-dark(#6D28D9, #C4A6FF);
  --rb-focus: light-dark(#6D28D9, #E3D0FF);
  --rb-ok: light-dark(#166534, #86EFAC);
  --rb-ok-bg: light-dark(#E7F6EC, #10261A);
  --rb-info: light-dark(#5B21B6, #C9B6FF);
  --rb-info-bg: light-dark(#EFE8FF, #221A38);
  --rb-wait: light-dark(#8A4B08, #FCD34D);
  --rb-wait-bg: light-dark(#FFF3DC, #2A2210);
  /* the product accent; a landing overrides these three, the hub keeps violet */
  --p: var(--rb-violet);
  --p-ink: var(--rb-link);
  --p-on: #FFFFFF;
  --p-glow: color-mix(in srgb, var(--p) 34%, transparent);

  --rb-font-display: "RB Display", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --rb-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --rb-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --rb-t-display: clamp(2.5rem, 1.55rem + 4.2vw, 5rem);
  --rb-t-h2: clamp(1.875rem, 1.4rem + 1.9vw, 3rem);
  --rb-t-h3: 1.25rem;
  --rb-t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  --rb-t-body: 1rem;
  --rb-t-small: 0.875rem;
  --rb-t-label: 0.8125rem;

  --rb-s1: 0.25rem; --rb-s2: 0.5rem; --rb-s3: 0.75rem; --rb-s4: 1rem; --rb-s5: 1.5rem;
  --rb-s6: 2rem; --rb-s7: 3rem; --rb-s8: 4rem; --rb-s9: 6rem; --rb-s10: 8rem;
  --rb-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --rb-max: 75rem;
  --rb-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --rb-header: 4rem;
  --rb-r1: 6px; --rb-r2: 12px; --rb-r3: 20px;
  --rb-step: 0.25em;
  --rb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (min-width: 768px) { :root { --rb-step: 0.5em; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--rb-bg); color: var(--rb-ink-2);
  font: 400 var(--rb-t-body)/1.6 var(--rb-font-body);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
:lang(zh) body, body:lang(zh) { line-height: 1.75; line-break: strict; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--rb-link); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--rb-focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--rb-ink-1); margin: 0; font-family: var(--rb-font-display); font-weight: 800; text-wrap: balance; }
h2 { font-size: var(--rb-t-h2); line-height: 1.08; letter-spacing: -0.025em; }
h3 { font-size: var(--rb-t-h3); line-height: 1.3; letter-spacing: -0.01em; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { font-weight: 700; letter-spacing: 0; }
:lang(zh) h2 { line-height: 1.3; }
p { margin: 0; }
.rb-skip { position: absolute; left: var(--rb-s4); top: -100px; z-index: 50; background: var(--rb-surface); color: var(--rb-ink-1); padding: var(--rb-s3) var(--rb-s4); border-radius: var(--rb-r2); }
.rb-skip:focus { top: var(--rb-s3); }
.rb-wrap { width: 100%; max-width: calc(var(--rb-max) + 2 * var(--rb-gutter)); margin-inline: auto; padding-inline: var(--rb-gutter); }

/* header: one row, 64px, at every width */
.rb-header { position: sticky; top: 0; z-index: 20; height: var(--rb-header); background: color-mix(in srgb, var(--rb-bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rb-line); }
.rb-header__in { height: 100%; display: flex; align-items: center; gap: var(--rb-s5); }
.rb-brand { display: inline-flex; align-items: center; gap: var(--rb-s2); min-height: 44px; color: var(--rb-ink-1); text-decoration: none; font: 800 1.125rem/1 var(--rb-font-display); letter-spacing: -0.02em; white-space: nowrap; }
.rb-brand img { width: 28px; height: 28px; border-radius: 7px; }
.rb-brand b { color: var(--rb-link); font-weight: 800; }
.rb-nav { display: none; gap: var(--rb-s1); }
.rb-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--rb-s3); color: var(--rb-ink-2); text-decoration: none; font-size: var(--rb-t-small); font-weight: 600; border-radius: var(--rb-r1); }
.rb-nav a:hover, .rb-nav a[aria-current="page"] { color: var(--rb-ink-1); background: var(--rb-surface-2); }
.rb-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--rb-s2); }
.rb-lang { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: var(--rb-s3); white-space: nowrap; color: var(--rb-ink-1); text-decoration: none; font-size: var(--rb-t-small); font-weight: 600; border: 1px solid var(--rb-line); border-radius: var(--rb-r2); }
.rb-lang:hover { border-color: var(--rb-line-strong); }
.rb-only-wide { display: none !important; }
@media (min-width: 768px) { .rb-nav { display: flex; } .rb-only-wide { display: inline-flex !important; } }

/* buttons */
.rb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rb-s2); min-height: 48px; padding: 0 var(--rb-s5); border-radius: var(--rb-r2); font: 700 var(--rb-t-body)/1 var(--rb-font-body); text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s var(--rb-ease), background-color 0.15s; }
.rb-btn--primary { background: var(--p); color: var(--p-on); box-shadow: 0 10px 30px -10px var(--p-glow); }
.rb-btn--primary:hover { transform: translateY(-1px); }
.rb-btn--quiet { background: transparent; color: var(--rb-ink-1); border-color: var(--rb-line-strong); }
.rb-btn--quiet:hover { background: var(--rb-surface-2); }
.rb-btn--sm { min-height: 44px; padding: 0 var(--rb-s4); font-size: var(--rb-t-small); }
.rb-actions-row { display: flex; flex-wrap: wrap; gap: var(--rb-s3); }
@media (max-width: 479px) { .rb-actions-row > .rb-btn { flex: 1 1 100%; } }
.rb-stamp { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--rb-s5); border: 1.5px dashed var(--rb-line-strong); border-radius: var(--rb-r2); color: var(--rb-ink-2); font-weight: 700; }

/* eyebrow */
.rb-eyebrow { display: inline-flex; align-items: center; gap: var(--rb-s2); padding: var(--rb-s1) var(--rb-s3); border: 1px solid var(--rb-line); border-radius: 999px; background: var(--rb-surface); color: var(--rb-ink-2); font-size: var(--rb-t-label); font-weight: 600; }
.rb-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p); }

/* S1 the climb: each headline line starts one step further in; the full stop is the mark's dot */
.rb-climb { font-size: var(--rb-t-display); line-height: 1.0; letter-spacing: -0.035em; }
:lang(zh) .rb-climb, .rb-climb:lang(zh) { line-height: 1.2; letter-spacing: 0; }
.rb-climb__l { display: block; white-space: nowrap; }
.rb-climb__l:nth-child(2) { padding-inline-start: var(--rb-step); }
.rb-climb__l:nth-child(3) { padding-inline-start: calc(2 * var(--rb-step)); }
.rb-dot { position: relative; color: transparent; }
.rb-dot::after { content: ""; position: absolute; left: 0.04em; bottom: 0.08em; width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--p); box-shadow: 0 0 0.35em var(--p-glow); }
:lang(zh) .rb-dot::after { left: 0.1em; bottom: 0.14em; }

/* S2 the ladder: a product's state as three rising steps plus the words */
.rb-ladder { display: inline-flex; align-items: center; gap: var(--rb-s2); padding: 0.1875rem var(--rb-s3) 0.1875rem var(--rb-s2); border-radius: 999px; font-size: var(--rb-t-label); font-weight: 700; line-height: 1.4; white-space: nowrap; }
.rb-ladder__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.rb-ladder__bars i { width: 4px; border-radius: 1px; background: currentColor; opacity: 0.28; }
.rb-ladder__bars i:nth-child(1) { height: 6px; } .rb-ladder__bars i:nth-child(2) { height: 10px; } .rb-ladder__bars i:nth-child(3) { height: 14px; }
.rb-ladder[data-step="1"] { color: var(--rb-wait); background: var(--rb-wait-bg); }
.rb-ladder[data-step="2"] { color: var(--rb-info); background: var(--rb-info-bg); }
.rb-ladder[data-step="3"] { color: var(--rb-ok); background: var(--rb-ok-bg); }
.rb-ladder[data-step="1"] i:nth-child(-n+1), .rb-ladder[data-step="2"] i:nth-child(-n+2), .rb-ladder[data-step="3"] i { opacity: 1; }

/* S3 the catalogue number */
.rb-no { font: 600 var(--rb-t-label)/1 var(--rb-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--rb-ink-3); }

/* the product mark tile */
.rb-mark { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; overflow: hidden; background: var(--rb-surface-2); }
.rb-mark img { width: 100%; height: 100%; }
.rb-mark--lg { width: 64px; height: 64px; border-radius: 16px; }

/* sections */
.rb-section { padding-block: var(--rb-section) 0; }
.rb-section:last-of-type { padding-bottom: var(--rb-section); }
.rb-head { display: grid; gap: var(--rb-s3); margin-bottom: var(--rb-s7); max-width: 46rem; }
.rb-head__kicker { font: 600 var(--rb-t-label)/1 var(--rb-font-mono); color: var(--rb-ink-3); letter-spacing: 0.04em; }
:lang(zh) .rb-head__kicker { font-family: var(--rb-font-body); letter-spacing: 0.12em; }
.rb-head p { font-size: var(--rb-t-lead); color: var(--rb-ink-2); }
.rb-head--split { max-width: none; }
.rb-head__more { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (min-width: 768px) {
  .rb-head--split { grid-template-columns: minmax(0, 46rem) auto; justify-content: space-between; align-items: end; }
  .rb-head--split > :not(.rb-head__more) { grid-column: 1; }
  .rb-head--split .rb-head__more { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}
.rb-lead { font-size: var(--rb-t-lead); line-height: 1.55; color: var(--rb-ink-2); max-width: 36rem; }
:lang(zh) .rb-lead { line-height: 1.8; max-width: 34em; }

/* hero (hub and landing share the frame; the right column differs) */
.rb-hero { position: relative; isolation: isolate; padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.rb-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; z-index: -1; pointer-events: none; background: radial-gradient(48rem 28rem at 82% 8%, var(--p-glow), transparent 62%), radial-gradient(30rem 20rem at 0% 0%, color-mix(in srgb, var(--p) 10%, transparent), transparent 70%); }
.rb-hero__grid { display: grid; gap: var(--rb-s7); align-items: center; }
.rb-hero__copy { display: grid; gap: var(--rb-s5); justify-items: start; min-width: 0; }
.rb-hero__facts { display: flex; flex-wrap: wrap; gap: var(--rb-s2) var(--rb-s5); margin: 0; padding: 0; list-style: none; font-size: var(--rb-t-small); color: var(--rb-ink-2); }
.rb-hero__facts li { display: inline-flex; align-items: center; gap: var(--rb-s2); }
.rb-hero__facts li::before { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--p); border-bottom: 2px solid var(--p); transform: rotate(-45deg) translateY(-2px); }
@media (min-width: 1024px) { .rb-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--rb-s8); } }

/* media frame: a product's own picture with its accent glowing behind it */
.rb-media { position: relative; margin: 0; }
.rb-media::before { content: ""; position: absolute; inset: 8% 0 -4% 8%; z-index: -1; border-radius: 40px; background: var(--p-glow); filter: blur(48px); }
.rb-media img { max-width: 100%; margin-inline: auto; height: auto; border-radius: var(--rb-r3); border: 1px solid var(--rb-line); background: var(--rb-surface); box-shadow: 0 30px 60px -30px rgba(12, 10, 18, 0.45); }

/* hairline grid: the shared surface for tiles and features (no floating cards) */
.rb-lines { display: grid; gap: 1px; background: var(--rb-line); border: 1px solid var(--rb-line); border-radius: var(--rb-r3); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.rb-lines > * { background: var(--rb-surface); min-width: 0; }
@media (min-width: 640px) { .rb-lines--2, .rb-lines--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rb-lines--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* product tile (hub index, landing "more from runupbiz") */
.rb-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; gap: var(--rb-s2) var(--rb-s4); padding: var(--rb-s5); min-height: 100%; color: inherit; text-decoration: none; transition: background-color 0.15s; }
.rb-tile:hover { background: var(--rb-surface-2); }
.rb-tile .rb-mark { grid-row: 1 / span 2; }
.rb-tile__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rb-s3); }
.rb-tile__name { font: 800 1.1875rem/1.25 var(--rb-font-display); color: var(--rb-ink-1); letter-spacing: -0.01em; }
:lang(zh) .rb-tile__name { font-weight: 700; }
.rb-tile__tag { grid-column: 2; font-size: var(--rb-t-small); color: var(--rb-ink-2); }
.rb-tile__foot { grid-column: 1 / -1; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: var(--rb-s3); padding-top: var(--rb-s3); }
.rb-tile__go { color: var(--rb-ink-3); font-weight: 700; transition: transform 0.15s var(--rb-ease); }
.rb-tile:hover .rb-tile__go { transform: translateX(3px); color: var(--rb-ink-1); }

/* numbered features */
.rb-feature { padding: var(--rb-s6) var(--rb-s5); display: grid; gap: var(--rb-s2); align-content: start; }
.rb-feature .rb-no { color: var(--p-ink); }
.rb-feature p { font-size: var(--rb-t-small); }

/* steps: three numbered actions that climb (lowest first) */
.rb-steps { display: grid; gap: var(--rb-s5); margin: 0; padding: 0; list-style: none; counter-reset: rb-step; }
.rb-steps > li { counter-increment: rb-step; position: relative; padding: var(--rb-s5) 0 0; border-top: 3px solid var(--p); display: grid; gap: var(--rb-s2); align-content: start; }
.rb-steps > li::before { content: counter(rb-step, decimal-leading-zero); font: 600 var(--rb-t-label)/1 var(--rb-font-mono); color: var(--p-ink); }
.rb-steps > li::after { content: ""; position: absolute; top: -7px; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--p); opacity: 0; }
.rb-steps > li:last-child::after { opacity: 1; }
.rb-steps p { font-size: var(--rb-t-small); }
@media (min-width: 768px) {
  .rb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rb-s6); align-items: start; }
  .rb-steps > li:nth-child(1) { margin-top: var(--rb-s8); }
  .rb-steps > li:nth-child(2) { margin-top: var(--rb-s6); }
}

/* showcase rows: media + words, alternating on wide screens */
.rb-show { display: grid; gap: var(--rb-s6); align-items: center; }
.rb-show + .rb-show { margin-top: var(--rb-s9); }
.rb-show__text { display: grid; gap: var(--rb-s4); }
@media (min-width: 1024px) { .rb-show { grid-template-columns: 5fr 7fr; gap: var(--rb-s8); } .rb-show:nth-of-type(even) .rb-show__text { order: 2; } }

/* FAQ */
.rb-faq { border-top: 1px solid var(--rb-line); }
.rb-faq details { border-bottom: 1px solid var(--rb-line); }
.rb-faq summary { display: flex; justify-content: space-between; gap: var(--rb-s4); min-height: 56px; align-items: center; cursor: pointer; list-style: none; color: var(--rb-ink-1); font-weight: 700; }
.rb-faq summary::-webkit-details-marker { display: none; }
.rb-faq summary::after { content: "+"; font: 400 1.5rem/1 var(--rb-font-body); color: var(--rb-ink-3); }
.rb-faq details[open] summary::after { content: "\2212"; }
.rb-faq details p { padding-bottom: var(--rb-s5); max-width: 46rem; }

/* closing band */
.rb-band { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--rb-section); padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--rb-gutter); border-radius: 28px; border: 1px solid var(--rb-line); background: var(--rb-surface); text-align: center; display: grid; gap: var(--rb-s5); justify-items: center; }
.rb-band::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; z-index: -1; background: radial-gradient(closest-side, var(--p-glow), transparent); }
.rb-band .rb-actions-row { justify-content: center; }

/* footer */
.rb-footer { margin-top: var(--rb-section); border-top: 1px solid var(--rb-line); padding-block: var(--rb-s8) var(--rb-s6); font-size: var(--rb-t-small); }
.rb-footer__grid { display: grid; gap: var(--rb-s6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rb-footer__brand { grid-column: 1 / -1; display: grid; gap: var(--rb-s3); align-content: start; }
.rb-footer h2 { font: 700 var(--rb-t-label)/1 var(--rb-font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rb-ink-3); margin-bottom: var(--rb-s3); }
:lang(zh) .rb-footer h2 { text-transform: none; letter-spacing: 0.04em; }
.rb-footer ul { list-style: none; margin: 0; padding: 0; }
.rb-footer li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--rb-ink-2); text-decoration: none; }
.rb-footer li a:hover { color: var(--rb-ink-1); text-decoration: underline; }
.rb-footer__base { margin-top: var(--rb-s7); padding-top: var(--rb-s5); border-top: 1px solid var(--rb-line); display: flex; flex-wrap: wrap; gap: var(--rb-s2) var(--rb-s5); justify-content: space-between; color: var(--rb-ink-3); font-size: var(--rb-t-label); }
@media (min-width: 768px) { .rb-footer__grid { grid-template-columns: 2fr 1fr 1fr; } .rb-footer__brand { grid-column: auto; } }

/* legal and long text */
.rb-prose { max-width: 46rem; padding-block: var(--rb-s8); }
.rb-prose h1 { font-size: var(--rb-t-h2); line-height: 1.1; margin-bottom: var(--rb-s5); }
.rb-prose h2 { font-size: 1.375rem; margin: var(--rb-s7) 0 var(--rb-s3); }
.rb-prose p, .rb-prose li { margin-bottom: var(--rb-s3); }

/* motion: only opacity and transform, only when the visitor has not asked for less */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .rb-climb__l { animation: rb-rise 0.7s var(--rb-ease) both; }
  .rb-climb__l:nth-child(2) { animation-delay: 0.08s; }
  .rb-climb__l:nth-child(3) { animation-delay: 0.16s; }
  .rb-dot::after { animation: rb-pop 0.5s var(--rb-ease) 0.55s both; }
  @keyframes rb-rise { from { opacity: 0; transform: translateY(0.25em); } to { opacity: 1; transform: none; } }
  @keyframes rb-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
}
@media print { .rb-header, .rb-band { display: none; } }

/* the landing kicker: "runupbiz No.01" back to the hub, then the product's ladder */
.rb-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rb-s3); }
.rb-by { display: inline-flex; align-items: center; gap: var(--rb-s2); min-height: 44px; color: var(--rb-ink-2); text-decoration: none; font-size: var(--rb-t-small); font-weight: 700; }
.rb-by img { width: 20px; height: 20px; border-radius: 5px; }
.rb-by:hover { color: var(--rb-ink-1); }
.rb-hero__grid > *, .rb-show > *, .rb-head > * { min-width: 0; }

/* the store badge: Google's official artwork, unmodified (its own clear space is inside the file) */
.rb-badge { display: inline-flex; align-items: center; min-height: 48px; border-radius: var(--rb-r2); }
.rb-badge img { height: 58px; width: auto; }
.rb-header .rb-badge img { height: 44px; }