/* RowBranch home · v3. Shared tokens, chrome and components are in site.css. */

/* ---- hero: the console with events on the ground ---- */
.hero{padding:56px 0 64px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:42%;right:-12%;top:-10%;bottom:-20%;background:radial-gradient(closest-side,rgba(231,240,237,.95),rgba(245,236,215,.4) 55%,transparent 78%);pointer-events:none}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:56px;align-items:center}
.hero h1{margin-bottom:22px;max-width:560px}
.hero .lead{max-width:520px;margin-bottom:30px;font-size:19px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--muted)}
.hero-trust li{display:flex;align-items:center;gap:7px}
.hero-trust svg{width:16px;height:16px;stroke:var(--ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-visual{position:relative;padding:22px 0 0}
.frame{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--wash)}
.frame-bar span{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.frame-bar i{margin-left:10px;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 10px;flex:1;max-width:260px;text-align:center}
.frame img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:var(--wash)}
.chips{list-style:none;margin:0;padding:0}
.chip{position:absolute;display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px 10px 10px;box-shadow:0 2px 4px rgba(14,50,54,.05),0 16px 36px rgba(14,50,54,.14);font-size:13.5px;line-height:1.25;white-space:nowrap;z-index:2}
.chip b{display:block;color:var(--ink);font-weight:600}
.chip small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.chip .ic{width:34px;height:34px;border-radius:10px}
.chip .ic svg{width:17px;height:17px}
.chip.c1{top:-6px;right:-22px}
.chip.c2{top:38%;left:-40px}
.chip.c3{bottom:34%;right:-32px}
.chip.c4{bottom:32px;left:6%}
@media(prefers-reduced-motion:no-preference){
  .chip{animation:float 7s ease-in-out infinite}
  .chip.c2{animation-delay:-2s}.chip.c3{animation-delay:-4s}.chip.c4{animation-delay:-1s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}
.hero-note{font-size:12.5px;color:var(--faint);margin-top:44px;text-align:center}
@media(max-width:1000px){.chip.c1{right:-8px}.chip.c2{left:-12px}.chip.c3{right:-10px}}
@media(max-width:900px){
  .hero{padding:40px 0 48px}
  .hero::before{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero-visual{padding:0}
  .hero-note{margin-top:8px}
  .chips{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 6px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{position:static;flex:none;animation:none}
  .hero-note{text-align:left}
}

/* ---- facts strip under the hero ---- */
.facts{padding:0 0 8px}

/* ---- products bento ---- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.bento>*{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh);padding:32px}
.tag{display:block;font-size:14px;font-weight:600;color:var(--muted)}
.avail{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--ink)}
.avail::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.b-ground{grid-column:span 6;background:var(--ink);border-color:var(--ink);color:#CFDDDB;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;padding:40px}
.b-ground .tag{color:#E4C079}
.b-ground h3{color:#fff;font-size:clamp(24px,2.6vw,34px);line-height:1.1;margin:10px 0 14px;max-width:440px}
.b-ground p{color:#CFDDDB;font-size:15.5px;line-height:1.62;max-width:440px}
.b-ground .fit{margin-top:22px;padding:13px 15px;border:1px solid rgba(255,255,255,.16);border-radius:12px;font-size:14px;color:#E4E9E8;line-height:1.5}
.b-ground .fit b{color:#E4C079}
.b-ground .ic{background:rgba(255,255,255,.1);color:#fff}
.b-ground .avail{color:#E4E9E8}
.gf-lead{font-size:13.5px;color:#9DB6B4;font-weight:600;margin-bottom:14px}
.gfeats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.gfeats li{display:flex;gap:10px;align-items:flex-start}
.gfeats .ic{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.08);color:#E4C079}
.gfeats .ic svg{width:15px;height:15px}
.gfeats h4{color:#fff;font-size:14.5px;margin-bottom:2px}
.gfeats p{font-size:13.5px;line-height:1.45;color:#B6C9C6}
.gf-note{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:#B6C9C6;line-height:1.5}
.stmt-strip{margin-top:20px;background:var(--brass-soft);border:1px solid #EBDDB9;border-radius:var(--r-lg);padding:26px 30px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center}
.ss-lead{display:flex;gap:16px;align-items:flex-start}
.ss-lead .ic{background:#fff;color:var(--brass);flex:none}
.ss-lead .ic{display:inline-flex}
.ss-lead b{display:block;font-family:var(--display);font-size:19px;color:var(--ink);letter-spacing:-.015em;margin-bottom:6px}
.ss-lead p{font-size:14.5px;line-height:1.55;color:var(--body)}
.ss-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.ss-list li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink);line-height:1.4}
.ss-list svg{width:16px;height:16px;flex:none;stroke:var(--brass);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
@media(max-width:900px){.stmt-strip{grid-template-columns:1fr;gap:20px;padding:22px 22px}}
@media(max-width:560px){.ss-list{grid-template-columns:1fr}}
.b-prod{grid-column:span 3;display:flex;flex-direction:column}
.b-prod h3{font-size:22px;margin:10px 0 12px;line-height:1.14}
.b-prod p{font-size:15px;line-height:1.6}
.b-prod p+p{margin-top:10px}
.b-prod .avail{margin-top:auto;padding-top:20px}
@media(max-width:960px){.b-ground{grid-template-columns:1fr;gap:26px;padding:32px}}
@media(max-width:820px){.b-prod{grid-column:span 6}}
@media(max-width:820px){.bento{grid-template-columns:1fr}.bento>*{grid-column:auto!important;padding:26px 24px}.gfeats{grid-template-columns:1fr}}

/* ---- how it runs: four steps, then the month ---- */
.timeline{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.timeline li{position:relative;padding-top:28px}
.timeline li::before{content:"";position:absolute;top:8px;left:0;right:-24px;height:2px;background:var(--line)}
.timeline li:last-child::before{right:0}
.tl-n{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--brass);color:#fff;font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--paper)}
.timeline h3{font-size:19px;margin-bottom:8px}
.timeline p{font-size:15px;line-height:1.6}
.rhythm-wrap{margin-top:48px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:26px 28px}
.rhythm-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;margin-bottom:18px}
.rhythm-head h3{font-size:18px}
.rhythm-head span{font-size:13.5px;color:var(--muted)}
.rhythm{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rhythm div{display:flex;align-items:baseline;gap:10px;background:var(--wash);border-radius:14px;padding:14px 16px}
.rhythm b{font-family:var(--mono);font-size:22px;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.rhythm b sup{font-size:10px;margin-left:1px;color:var(--muted)}
.rhythm span{font-size:14px;line-height:1.35}
.rhythm .last b{color:var(--ok)}
.payouts{margin-top:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.payouts p{font-size:14px;line-height:1.45}
.rail{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.rail-k{font-size:12px;color:var(--muted)}
.rail{gap:10px}
.rail-logo{height:11px;width:auto;display:block;position:relative;top:1px}
.rail-sep{color:var(--faint);font-size:14px;line-height:1}
.rail-wm{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.01em;line-height:1}
@media(max-width:820px){.timeline{grid-template-columns:1fr 1fr}.timeline li:nth-child(2n)::before{right:0}.rhythm{grid-template-columns:1fr 1fr}.rail{margin-left:0}.rhythm-wrap{padding:20px}}
@media(max-width:480px){.timeline{grid-template-columns:1fr}.timeline li::before{right:0}.rhythm{grid-template-columns:1fr}}

/* ---- console tour (tabs only when JS runs; every panel visible otherwise) ---- */
.tour-tabs{display:none;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.js .tour-tabs{display:flex}
.tour-tabs button{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--body);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tour-tabs button:hover{border-color:var(--line-2);color:var(--ink)}
.tour-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tour-panel{display:grid;gap:16px}
.tour-panel[hidden]{display:none}
.tour-panel+.tour-panel{margin-top:28px}
.js .tour-panel+.tour-panel{margin-top:0}
.tour-panel .cap{font-size:15px;line-height:1.5;color:var(--body);max-width:760px}
.tour-panel .cap b{color:var(--ink)}
@media(prefers-reduced-motion:no-preference){.js .tour-panel{animation:fadein .25s ease}@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}}

/* ---- compare: your own entity, a global platform, RowBranch ---- */
.compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh)}
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;min-width:760px}
.compare th,.compare td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.compare thead th{font-family:var(--sans);font-size:13.5px;color:var(--muted);font-weight:600;background:var(--wash)}
.compare thead th.us{color:var(--ink);background:var(--water)}
.compare tbody th{font-weight:600;color:var(--ink);font-size:14.5px;width:22%;background:var(--surface);position:sticky;left:0}
.compare td{color:var(--body);width:26%}
.compare td.us{background:var(--water);color:var(--ink);font-weight:500}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:none}
.compare td.us svg{width:16px;height:16px;stroke:var(--ok);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-3px;margin-right:6px}
@media(max-width:720px){
  .compare{min-width:0}
  .compare thead{display:none}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare tr{padding:16px 18px;border-bottom:1px solid var(--line)}
  .compare tr:last-child{border-bottom:none}
  .compare tbody th{position:static;padding:0 0 10px;border:none;font-size:15.5px}
  .compare td{padding:8px 0 0;border:none;font-size:14.5px}
  .compare td::before{content:attr(data-col);display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}
  .compare td.us{background:var(--water);border-radius:10px;padding:10px 12px;margin-top:10px}
  .compare td.us::before{color:var(--ink)}
}

/* ---- protection ---- */
.protect{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.protect .sec-head{margin-bottom:0}
.risks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.risks li{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-size:15px;color:var(--ink);box-shadow:var(--sh-sm);line-height:1.4}
@media(max-width:820px){.protect{grid-template-columns:1fr;gap:28px}}
@media(max-width:480px){.risks{grid-template-columns:1fr}}

/* ---- proof ---- */
.proof{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof .ctx{max-width:680px;font-size:16.5px;margin-bottom:32px}
.proof-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:24px;align-items:stretch}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:36px 40px;display:flex;flex-direction:column;gap:26px}
.quote blockquote{font-family:var(--display);font-size:clamp(20px,2.4vw,27px);line-height:1.35;color:var(--ink);font-weight:500;letter-spacing:-.015em}
.quote blockquote::before{content:"\201C";display:block;font-size:56px;line-height:.6;color:var(--brass);margin-bottom:14px;font-weight:700}
.attrib{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto}
.attrib .face{width:54px;height:54px;border-radius:50%;object-fit:cover}
.attrib .nm{color:var(--ink);font-weight:600;font-size:15.5px}
.attrib .rl{font-size:13.5px;margin-top:2px}
.attrib .rl2{color:var(--muted);font-size:12.5px;margin-top:1px}
.attrib .logo{height:24px;margin-left:auto;width:auto}
.proof-side{display:grid;gap:16px}
.proof-side .card{padding:22px 24px;display:flex;flex-direction:column;justify-content:center}
.proof-side b{display:block;font-family:var(--display);font-size:30px;color:var(--ink);letter-spacing:-.03em;line-height:1}
.proof-side span{display:block;font-size:14px;color:var(--muted);margin-top:6px;line-height:1.45}
@media(max-width:900px){.proof-grid{grid-template-columns:1fr}.proof-side{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.proof-side{grid-template-columns:1fr}.quote{padding:26px 22px}.attrib .logo{margin-left:0}}

/* ---- pricing, explained without a price list ---- */
.formula{font-family:var(--mono);font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);border-radius:var(--r);padding:16px 20px;display:inline-block;margin-bottom:28px}
.formula b{color:var(--brass);font-weight:500}
.minimum{margin-top:24px;padding:20px 24px;border-left:3px solid var(--brass);background:var(--brass-soft);border-radius:14px;max-width:760px;font-size:15.5px;color:var(--ink);line-height:1.6}
.pricing-links{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:22px;align-items:center}