/* rosefall.ai's article layer (Oct 19 2026). Adam, 7:17 PM, on the light rebuild of the 46-hour article: "why doesn't
   it follow our color scheme and button style? ... just use our landing pages; if not the color scheme, then at least
   the buttons and the same typography."
   It loads after bavlio.com's compiled article CSS (styles, home, OfferPieces, AnswerPage), which keeps the article
   model's layout: the rail, the 760px column, the phone bar, the sticky table column. This file gives that layout the
   live rosefall.ai homepage's colours, type and buttons, copied from the homepage's own <style>: canvas #160C03,
   raised #1F150C, paper #FCFCF8, gold #FFC947, ember #FF6B35, action #FF5B24; Archivo (wdth 125, uppercase) for
   headings, Geist for text and buttons, Geist Mono for labels; the .pill and .go buttons. Long text uses paper at
   76% on the canvas so it stays readable. */

html:has(.bv-home), html:has(.bv-home.art) { background:#160C03; color-scheme:dark; }
body { margin:0; background:#160C03; }

.bv-home.art {
  color-scheme:dark;
  --rf-canvas:#160C03; --rf-raised:#1F150C; --rf-paper:#FCFCF8; --rf-muted:rgba(252,252,248,.58);
  --rf-gold:#FFC947; --rf-ember:#FF6B35; --rf-action:#FF5B24; --rf-ink:#0C0C0B; --rf-line:rgba(252,252,248,.09);
  --spring: linear(0, .0543 4%, .1784 8%, .3291 12%, .4798 16%, .6156 20%, .7296 24%, .8201 28%, .8886 32%, .9378 36%,
                   .9716 40%, .9932 44%, 1.006 48%, 1.0126 52%, 1.015 56%, 1.0149 60%, 1.0133 64%, 1.0111 68%, 1.0088 72%,
                   1.0066 76%, 1.0048 80%, 1.0032 84%, 1.0021 88%, 1.0012 92%, 1.0006 96%, 1);
  --display:'Archivo', system-ui, sans-serif; --ui:'Geist', system-ui, sans-serif; --mono:'Geist Mono', ui-monospace, monospace;
  /* bavlio.com's article tokens, given the homepage's colours. A neutral is paper mixed into the canvas. */
  --canvas:#160C03; --canvas-deep:#2B2117; --face:#281B0F; --paper:#1F150C; --stage:#1B1007;
  --ink:#FCFCF8; --ink-2:#C5C2BD; --ink-3:#95908A; --rule:#3B322A; --line:#2D241C; --bar:#443C34; --bubble:#241A12;
  --accent:#FF6B35; --accent-l:#FF8C4F; --accent-r:#FFC947;
  --art-zebra:#231910; --art-tint:rgba(255,201,71,.10);
  --sans:var(--ui);
  --card-bg: radial-gradient(120% 80% at 50% 0%, rgba(255,170,80,.07), transparent 60%),
             linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), #1A1008;
  --card-line: rgba(255,201,71,.16);
  background:var(--canvas); color:var(--ink); font-family:var(--ui);
}
.bv-home.art ::selection { background:rgba(255,201,71,.32); color:var(--rf-paper); }
.bv-home.art :focus-visible { outline:2px solid var(--rf-gold); outline-offset:3px; border-radius:6px; }

/* ---- type: the homepage's display face for headings, Geist for text, Geist Mono for labels */
.bv-home.art .art-head h1 { font-family:var(--display); font-variation-settings:'wdth' 125; font-weight:800; text-transform:uppercase;
  font-size:clamp(30px, 3.3vw, 46px); line-height:.97; letter-spacing:-.018em; max-width:none; color:var(--rf-paper); }
.bv-home.art .art-section h2, .bv-home.art .art-related h2 { font-family:var(--display); font-variation-settings:'wdth' 125;
  font-weight:800; text-transform:uppercase; font-size:clamp(23px, 2.2vw, 30px); line-height:1.02; letter-spacing:-.012em; }
.bv-home.art .art-related h2 { font-size:22px; }
.bv-home.art .art-section h3, .bv-home.art .art-faq-item h3, .bv-home.art .wyg h3 { font-family:var(--display);
  font-variation-settings:'wdth' 112; font-weight:760; text-transform:uppercase; font-size:18px; line-height:1.18; letter-spacing:0; }
.bv-home.art .label, .bv-home.art .art-toc-title { font:500 12px/1.2 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--rf-gold); }
.bv-home.art .art-section { color:var(--ink-2); }
.bv-home.art :is(.art-section, .art-takeaway, .art-call, .art-faq) strong { color:var(--rf-paper); }
.bv-home.art .ans-link { color:var(--rf-paper); text-decoration-color:rgba(255,201,71,.6); }
.bv-home.art .ans-link:hover { color:var(--rf-gold); text-decoration-color:var(--rf-gold); }

/* ---- the nav: the homepage's logo, text links and Get Started button (.nav .login, .nav .go) */
.bv-home.art header.nav { box-shadow:0 0 0 100vmax var(--canvas), 0 1px 0 var(--rf-line); }
.bv-home.art .brand svg.rf-nav { height:28px; width:auto; }
.bv-home.art .brand-foot svg.rf-foot { height:24px; width:auto; }
.bv-home.art header.nav .link { padding:6px 10px; border-radius:12px; color:var(--rf-paper); font:500 17px/1 var(--ui);
  letter-spacing:-.005em; text-decoration:none; transition:color .2s; }
.bv-home.art header.nav .link:hover { color:var(--rf-gold); text-decoration:none; }
.bv-home.art a.go { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 20px 0 18px; border-radius:27px;
  color:var(--rf-ink); font:620 16px/1 var(--ui); letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  background:linear-gradient(180deg, #FFFFFF 0%, #F4EFE6 60%, #E6DECF 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(12,12,11,.10), 0 4px 4px rgba(0,0,0,.25);
  transition:transform .35s var(--spring), filter .25s; }
.bv-home.art a.go svg { width:15px; height:15px; color:var(--rf-action); flex:none; transition:transform .5s var(--spring); }
.bv-home.art a.go:hover { transform:translateY(-1px); filter:brightness(1.03); }

/* ---- the homepage's pill buttons (.pill, .pill.ember, .pill.paper), copied as they are */
.bv-home.art a.pill { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:56px;
  padding:0 26px 0 22px; border:0; border-radius:999px; font:620 18px/1 var(--ui); letter-spacing:-.01em; cursor:pointer;
  white-space:nowrap; color:var(--rf-ink); text-decoration:none;
  transition:transform .35s var(--spring), filter .25s, box-shadow .3s; }
.bv-home.art a.pill svg { width:18px; height:18px; flex:none; transition:transform .5s var(--spring); }
.bv-home.art a.pill.ember { background:linear-gradient(180deg, #FF8C4F 0%, #FF5B24 55%, #E6461A 100%);
  box-shadow:0 0 0 5px rgba(12,8,4,.92), 0 0 0 6px rgba(255,201,71,.38), inset 0 1px 0 rgba(255,236,200,.9), inset 0 -3px 0 rgba(110,28,0,.35),
             0 22px 44px -12px rgba(0,0,0,.85), 0 0 60px -10px rgba(255,91,36,.75); }
.bv-home.art a.pill.paper { background:linear-gradient(180deg, #FFFFFF 0%, #F4EFE6 60%, #E4DBCB 100%);
  box-shadow:0 0 0 5px rgba(12,8,4,.92), 0 0 0 6px rgba(252,252,248,.22), inset 0 1px 0 #fff, inset 0 -3px 0 rgba(12,12,11,.10),
             0 22px 44px -12px rgba(0,0,0,.85), 0 0 70px -8px rgba(255,236,200,.42); }
.bv-home.art a.pill.paper svg { color:var(--rf-action); }
.bv-home.art a.pill:hover { transform:translateY(-2px); filter:brightness(1.05); }
.bv-home.art a.pill.ember:hover svg { transform:translateY(-1px) rotate(-8deg); }
.bv-home.art a.pill:active { transform:translateY(1px) scale(.98); }
.bv-home.art a.pill:focus-visible { outline:2px solid var(--rf-gold); outline-offset:9px; border-radius:999px; }
.bv-home.art .guarantee { margin:16px 0 0; font:500 15px/1.3 var(--ui); color:rgba(252,252,248,.82); text-decoration:underline;
  text-underline-offset:5px; text-decoration-color:rgba(255,201,71,.7); }

/* ---- the article's parts, as the homepage's cards */
.bv-home.art .art-crumbs ol { font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.bv-home.art .art-crumbs a { color:var(--ink-2); }
.bv-home.art .art-crumbs a:hover { color:var(--rf-gold); text-decoration:none; }
.bv-home.art .art-byline { border-bottom-color:var(--rf-line); }
.bv-home.art .art-byline img { border-radius:50%; }
.bv-home.art .art-byline-name { color:var(--rf-paper); }
.bv-home.art .art-byline p { color:var(--ink-3); }
.bv-home.art .art-toc-list a { border-radius:10px; color:var(--ink-2); }
.bv-home.art .art-toc-list a:hover { color:var(--rf-paper); background:var(--face); }
.bv-home.art .art-toc-list a[aria-current] { color:var(--rf-gold); background:var(--art-tint); }
.bv-home.art :is(.art-takeaway, .art-call, .art-pull, .art-fig) { background:var(--card-bg); border:1px solid var(--card-line);
  border-radius:24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
.bv-home.art .art-cover { border-color:var(--card-line); border-radius:24px; background:var(--stage); }
.bv-home.art .art-takeaway .label:before, .bv-home.art .art-pull:before { background:var(--rf-ember); border-radius:2px; }
.bv-home.art .art-takeaway p:last-child { color:var(--rf-paper); }
.bv-home.art .art-pull p { font-family:var(--display); font-variation-settings:'wdth' 125; font-weight:800; text-transform:uppercase;
  font-size:clamp(21px, 2.1vw, 28px); line-height:1.04; letter-spacing:-.012em; max-width:32ch;
  background:linear-gradient(90deg, var(--rf-gold), var(--rf-ember)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bv-home.art .art-call-short { color:var(--rf-paper); }
.bv-home.art .cta-note { color:var(--ink-2); }
.bv-home.art .art-guarantee { margin:8px 0 22px; padding:16px 20px; border-radius:16px; color:var(--rf-paper);
  background:linear-gradient(90deg, rgba(255,107,53,.16), rgba(255,201,71,.06)); border:1px solid rgba(255,107,53,.35); max-width:none; }

/* tables: the model's zebra rows and sticky first column, on the homepage's raised colours */
.bv-home.art .art-table { border-color:var(--rule); border-radius:18px; background:var(--paper); }
.bv-home.art .art-table thead>tr>* { background:var(--face); font:500 11.5px/1.35 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--rf-gold); }
.bv-home.art .art-table tbody td { color:var(--ink-2); }
.bv-home.art .art-table tbody th { color:var(--rf-paper); }
.bv-home.art .art-table th.is-price:after { background:var(--rf-ember); }

/* the chart */
.bv-home.art .art-fig-title { font-family:var(--display); font-variation-settings:'wdth' 112; font-weight:760; text-transform:uppercase;
  font-size:16px; letter-spacing:0; color:var(--rf-paper); }
.bv-home.art .art-fig-caption, .bv-home.art .art-fig-note { color:var(--ink-3); }
.bv-home.art .art-fig-source { border-top-color:var(--rf-line); }
.bv-home.art .art-prices-bar { color:var(--rf-ember); }
.bv-home.art .art-prices-ticks { color:var(--ink-3); font-family:var(--mono); font-size:11px; }
.bv-home.art .art-prices-name { color:var(--rf-paper); }
.bv-home.art .art-prices-value { color:var(--ink-2); font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; }

/* the rail box and, on a phone, the bar along the bottom */
.bv-home.art .art-box-title { font-family:var(--display); font-variation-settings:'wdth' 118; font-weight:780; text-transform:uppercase;
  font-size:17px; line-height:1.08; letter-spacing:-.005em; color:var(--rf-paper); }
@media (width>=1100px) {
  .bv-home.art .art-box { background:var(--card-bg); border:1px solid var(--card-line); border-radius:24px; padding:22px 20px 24px; gap:22px; }
  .bv-home.art .art-box .pill { width:100%; padding:0 18px; }
}
@media (width<=1099px) {
  .bv-home.art .art-toc { background:var(--paper); border-color:var(--rule); border-radius:16px; }
  .bv-home.art .art-toc-toggle { color:var(--rf-paper); font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; }
  .bv-home.art .art-box { background:rgba(22,12,3,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top-color:var(--rf-line); padding-top:14px; }
  .bv-home.art .art-box-title { font-size:13px; }
  .bv-home.art .art-box .pill { height:48px; padding:0 18px 0 16px; font-size:16px; gap:8px;
    box-shadow:0 0 0 4px rgba(12,8,4,.92), 0 0 0 5px rgba(255,201,71,.38), inset 0 1px 0 rgba(255,236,200,.9), inset 0 -3px 0 rgba(110,28,0,.35); }
  .bv-home.art .art-box .pill svg { width:16px; height:16px; }
}
@media (width<=359px) { .bv-home.art .art-box .pill { width:100%; } }

/* the end card: the homepage's closing card */
.bv-home.art .art-end { border:1px solid rgba(255,201,71,.18); border-radius:28px; padding:clamp(22px, 3vw, 34px);
  background:radial-gradient(80% 140% at 50% 140%, rgba(255,107,53,.42), transparent 62%),
             radial-gradient(60% 90% at 50% -30%, rgba(255,201,71,.14), transparent 60%), #1B1007; }
.bv-home.art .art-end img { border-radius:50%; }
.bv-home.art .art-end-title { font-family:var(--display); font-variation-settings:'wdth' 125; font-weight:800; text-transform:uppercase;
  font-size:clamp(19px, 1.9vw, 24px); line-height:1.04; letter-spacing:-.012em; color:var(--rf-paper); }
.bv-home.art .art-end-cta { display:flex; flex-direction:column; align-items:center; }
.bv-home.art .art-end-cta .guarantee { margin-top:18px; font-size:14px; }
@media (width<=639px) {
  .bv-home.art .art-end-cta { grid-column:1/-1; }
  .bv-home.art .art-end-cta .pill { width:min(320px, 100%); }
}

/* Keep reading and Compare: the homepage's cards */
.bv-home.art .art-card { background:var(--card-bg); border:1px solid var(--card-line); border-radius:20px; color:var(--rf-paper);
  transition:border-color .3s, transform .35s var(--spring); }
.bv-home.art .art-card:hover { border-color:rgba(255,201,71,.42); transform:translateY(-2px); }
.bv-home.art .art-card img { border-color:var(--card-line); background:var(--stage); }
.bv-home.art .art-card-title { font-family:var(--display); font-variation-settings:'wdth' 118; font-weight:780; text-transform:uppercase;
  font-size:15px; line-height:1.1; letter-spacing:0; }
.bv-home.art .art-card:hover .art-card-title { text-decoration:none; color:var(--rf-gold); }

/* the "What you get" table */
.bv-home.art .wyg .wyg-mark { background:rgba(255,107,53,.2); color:var(--rf-paper); }
.bv-home.art .wyg-costs .wyg-cost, .bv-home.art .wyg.wyg-valued .wyg-total { color:var(--rf-paper); }
.bv-home.art .wyg.wyg-valued .wyg-promises li:before { background:var(--rf-ember); }
.bv-home.art .art-person { display:flex; gap:18px; align-items:flex-start; margin:8px 0 22px; }
.bv-home.art .art-person img { width:72px; height:72px; border-radius:50%; flex:none; }
.bv-home.art .art-person ul { margin:6px 0 0; padding-left:1.1em; }

/* the footer: the homepage's mono family line */
.bv-home.art footer { color:var(--ink-3); }
.bv-home.art .foot, .bv-home.art .foot-guides { border-top-color:var(--rf-line); }
.bv-home.art footer .link { color:var(--ink-2); }
.bv-home.art footer .link:hover { color:var(--rf-gold); text-decoration:none; }
.bv-home.art .foot-family { font:500 12px/1.7 var(--mono); letter-spacing:.06em; color:rgba(252,252,248,.55); }
.bv-home.art .foot-family a { color:var(--rf-paper); text-decoration:underline; text-underline-offset:3px; }
.bv-home.art .foot > span { font:500 12px/1 var(--mono); letter-spacing:.14em; color:rgba(252,252,248,.4); }
.bv-home.art .foot-social a { color:var(--ink-2); }
.bv-home.art .foot-social a:hover { color:var(--rf-gold); }

@media (width<=760px) {
  .bv-home.art .brand svg.rf-nav { height:22px; }
  .bv-home.art header.nav .link { font-size:15px; padding:6px 8px; }
  .bv-home.art a.go { height:36px; padding:0 14px 0 16px; font-size:14px; gap:6px; }
  .bv-home.art a.go svg { width:13px; height:13px; }
}
@media (prefers-reduced-motion: reduce) {
  .bv-home.art a.pill, .bv-home.art a.go, .bv-home.art .art-card { transition:none; }
}

/* Four cards sit two by two, so none is left alone on a row. */
@media (width>=640px) {
  .bv-home.art .art-related ul:has(> li:nth-child(4):last-child) { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (width<=639px) {
  .bv-home.art .art-end-title { font-size:18px; }
}