/* MyBankroll 2.11 · Original public home, rubino / oro / avorio. */
:root{--ruby:#67162e;--ruby2:#902b49;--gold:#e4bc72;--cream:#faf5ee;--ink:#34242e;--muted:#756b71;--line:#e9dbcb}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#fdfaf6;color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}a{color:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #c69146;outline-offset:4px}.tf-skip{position:absolute;left:-9999px;top:12px;background:#fff;padding:12px;z-index:20}.tf-skip:focus{left:12px}.tf-home-wrap{width:min(1180px,calc(100% - 48px));margin:auto}.tf-home-header{position:sticky;top:0;z-index:10;background:#57132a;box-shadow:0 6px 20px #39152327}.tf-home-navigation{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0}.tf-home-logo{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:850;font-size:24px;line-height:1}.tf-home-logo>span>span{color:#f0ce91}.tf-home-logo small{display:block;letter-spacing:2.2px;font-size:8px;margin-top:6px;color:#f1cdaa;font-weight:700}.tf-home-navigation nav{display:flex;gap:26px;align-items:center}.tf-home-navigation nav a{color:#f6e7df;text-decoration:none;font-size:13px;font-weight:630}.tf-home-navigation nav a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:7px}.tf-home-header-actions{display:flex;align-items:center;gap:16px}.tf-home-signin{text-decoration:none;color:#fff;font-size:13px;font-weight:800}.tf-home-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:12px 19px;text-decoration:none;border-radius:12px;font-size:13px;font-weight:830;transition:transform .18s,box-shadow .18s}.tf-home-btn:hover{transform:translateY(-2px)}.tf-home-btn-gold{color:#4e2130;background:linear-gradient(120deg,#edcb8d,#dbaa58);box-shadow:0 7px 17px #24111822}.tf-home-btn-outline{border:1px solid #d4a87a;color:#fff;background:transparent}.tf-home-btn-ruby{background:#801f3f;color:#fff}.tf-home-eyebrow{font-size:11px;font-weight:850;letter-spacing:2px;color:#b98942}.tf-hero{background:radial-gradient(circle at 86% 7%,#a04454 0%,transparent 28%),linear-gradient(115deg,#61162e 4%,#401428 100%);color:#fff;overflow:hidden;padding:91px 0 102px}.tf-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:49px}.tf-hero-copy h1{font-size:clamp(39px,4.2vw,63px);line-height:1.13;letter-spacing:-2px;margin:20px 0 21px;font-weight:850}.tf-hero-copy h1 em{font-style:normal;color:#edc783}.tf-hero-copy>p{color:#ecdbe0;line-height:1.8;font-size:15px;max-width:540px}.tf-hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.tf-hero-proof{display:flex;gap:13px 20px;flex-wrap:wrap;color:#eddbd8;font-size:11px;font-weight:700}.tf-preview{background:#fbf7f2;border:1px solid #e7cda4;border-radius:19px;box-shadow:0 28px 65px #1b091d80;overflow:hidden;transform:rotate(-1deg)}.tf-preview-top{height:38px;background:#eae0d4;display:flex;gap:6px;align-items:center;padding:0 14px;color:#795d65;font-size:9px;letter-spacing:1.1px}.tf-preview-circle{width:8px;height:8px;border-radius:50%;background:#c7a5a6}.tf-preview-circle:nth-child(2){background:#d5ba80}.tf-preview-circle:nth-child(3){background:#a4bba4}.tf-preview-top span:nth-child(4){margin-left:12px}.tf-preview-top small{margin-left:auto;color:#9b8485;font-size:9px}.tf-preview-body{display:grid;grid-template-columns:49px 1fr;color:var(--ink)}.tf-preview-side{background:#521329;display:flex;align-items:center;flex-direction:column;gap:22px;padding:14px 0;color:#d8bc97;font-size:19px}.tf-preview-side .active{color:#fff;background:#81344b;padding:5px;border-radius:7px}.tf-preview-content{padding:24px 22px}.tf-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.tf-preview-heading>div{display:flex;flex-direction:column;gap:5px}.tf-preview-heading small,.tf-preview-metrics small{font-size:9px;color:#806c72;text-transform:uppercase;letter-spacing:.5px}.tf-preview-heading strong{font-size:19px}.tf-preview-pill{background:#f9ecdb;color:#86542e;border-radius:25px;font-size:9px;font-weight:800;padding:7px}.tf-preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.tf-preview-metrics>div{border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px;display:flex;flex-direction:column;gap:6px}.tf-preview-metrics strong{font-size:20px}.tf-positive{color:#26764b!important}.tf-negative{color:#b2384e!important}.tf-preview-chart{background:#fff;border:1px solid #eadfd5;padding:15px;border-radius:13px}.tf-preview-chart>div{display:flex;justify-content:space-between;gap:10px;align-items:center}.tf-preview-chart strong{font-size:12px}.tf-preview-chart small{font-size:9px;color:#998b91}.tf-preview-chart svg{width:100%;display:block;margin-top:8px}.tf-preview-bets{display:grid;gap:7px;margin-top:10px}.tf-preview-bets>div{display:grid;grid-template-columns:47px 1fr auto;gap:2px 10px;align-items:center;background:#fff;border:1px solid #eadfd5;border-radius:9px;padding:8px 10px}.tf-preview-result{grid-row:span 2;display:flex;align-items:center;justify-content:center;padding:7px 4px;border-radius:7px;font-size:9px;font-weight:850}.tf-preview-result.win{background:#dcf2e2;color:#266f49}.tf-preview-result.lost{background:#f9e1e7;color:#a52b46}.tf-preview-bets strong{font-size:11px}.tf-preview-bets small{font-size:9px;color:#937f85}.tf-preview-bets b{grid-column:3;grid-row:span 2;font-size:11px}.tf-trust{background:#f0e7db;border-bottom:1px solid #e4d5c5;text-align:center;padding:21px 0 23px}.tf-trust span{font-size:10px;letter-spacing:2px;color:#8e6a4a;font-weight:850}.tf-trust div div{font-size:15px;color:#5d394a;font-weight:820;margin-top:8px}.tf-trust i{color:#b99050;font-style:normal;padding:0 9px}.tf-home-section{padding:85px 0}.tf-section-intro{text-align:center;max-width:740px;margin:0 auto 34px}.tf-section-intro h2{font-size:clamp(29px,3.5vw,43px);letter-spacing:-1.2px;color:#4b1c31;line-height:1.2;margin:13px 0}.tf-section-intro p{color:#7c7374;line-height:1.75}.tf-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.tf-feature{display:flex;flex-direction:column;align-items:flex-start;border:1px solid #e8d9ca;border-radius:18px;background:linear-gradient(145deg,#fffaf3,#fffefd);padding:27px;box-shadow:0 8px 23px #4823310c}.tf-feature-icon{display:flex;align-items:center;justify-content:center;background:#f6e7d9;color:#7d2041;height:50px;width:50px;border-radius:14px;font-size:27px}.tf-feature h3{font-size:18px;color:#4f2237;margin:18px 0 5px}.tf-feature p{font-size:13px;line-height:1.75;color:#7f7276;flex:1}.tf-feature>span:last-child{font-size:9px;font-weight:800;letter-spacing:.9px;color:#aa7841;margin-top:18px}.tf-how{background:linear-gradient(135deg,#fbf3e9,#f4e9db);padding:79px 0}.tf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.tf-steps article{background:#fffaf4;padding:28px;border-radius:16px;border:1px solid #e9d7c1}.tf-steps article>span{font-size:37px;font-weight:900;color:#b1814c}.tf-steps h3{font-size:18px;color:#4c1f32;margin:13px 0}.tf-steps p{font-size:13px;line-height:1.7;color:#786b70}.tf-pricing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px;max-width:900px;margin:0 auto}.tf-plan{padding:34px;border:1px solid #e3d4c6;border-radius:20px;background:#fffaf4;box-shadow:0 12px 35px #4e2e3a11;display:flex;flex-direction:column}.tf-plan.featured{border:2px solid #b99051;background:linear-gradient(160deg,#fcf0e2,#fffaf6)}.tf-plan-label{font-size:10px;color:#946335;font-weight:850;letter-spacing:1.6px}.tf-plan h3{font-size:30px;color:#521d34;margin:15px 0 0}.tf-plan-price{font-size:25px;font-weight:850;margin:8px 0;color:#8e2a47}.tf-plan p{font-size:13px;line-height:1.65;color:#786b71}.tf-plan ul{list-style:none;padding:0;margin:15px 0 28px;display:grid;gap:13px;flex:1}.tf-plan li{font-size:13px;line-height:1.5}.tf-plan li:before{content:"✓";font-weight:900;color:#268054;margin-right:10px}.tf-plan .tf-home-btn{width:100%}.tf-plan-disclaimer{text-align:center;color:#8d8080;font-size:11px;line-height:1.6}.tf-faq{padding:30px 0 80px}.tf-faq details{max-width:800px;margin:10px auto;border:1px solid #e9d9ca;border-radius:12px;background:#fffaf5;padding:17px 20px}.tf-faq summary{font-size:14px;font-weight:780;color:#60223a;cursor:pointer}.tf-faq details p{font-size:13px;line-height:1.8;color:#796d72}.tf-final{text-align:center;background:linear-gradient(125deg,#541329,#821d3c);color:#fff;padding:75px 0 82px}.tf-final .tf-home-eyebrow{color:#e7be83}.tf-final h2{font-size:clamp(27px,4vw,41px);max-width:800px;line-height:1.25;margin:13px auto}.tf-final p{font-size:14px;color:#f1dbe1;margin-bottom:23px}.tf-home-footer{background:#391123;color:#ddc8d0;padding:28px 0}.tf-home-footer .tf-home-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}.tf-home-footer .tf-home-logo{font-size:21px}.tf-home-footer span{font-size:11px}.tf-home-footer a:not(.tf-home-logo){font-size:12px;text-decoration:none;color:#e8d9d8}
@media(max-width:980px){.tf-home-navigation nav{gap:13px}.tf-hero-grid{gap:23px}.tf-hero{padding:70px 0}.tf-feature-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.tf-home-wrap{width:min(100% - 30px,580px)}.tf-home-header{position:relative}.tf-home-navigation{gap:12px;flex-wrap:wrap}.tf-home-navigation nav{order:3;width:100%;justify-content:space-between;overflow:auto;padding:6px 0 3px}.tf-home-navigation nav a{font-size:11px;white-space:nowrap}.tf-home-logo{font-size:22px}.tf-home-header-actions{margin-left:auto;gap:10px}.tf-home-header-actions .tf-home-btn{min-height:37px;font-size:11px;padding:8px 12px}.tf-home-signin{font-size:11px}.tf-hero{padding:50px 0 66px}.tf-hero-grid{grid-template-columns:1fr;gap:38px}.tf-hero-copy h1{font-size:clamp(36px,9vw,50px);letter-spacing:-1.3px}.tf-hero-copy>p{font-size:14px}.tf-preview{max-width:600px;margin:auto;transform:none}.tf-home-section{padding:66px 0}.tf-feature-grid,.tf-steps,.tf-pricing{grid-template-columns:1fr}.tf-feature{padding:23px}.tf-how{padding:65px 0}.tf-home-footer .tf-home-wrap{flex-wrap:wrap;justify-content:center;text-align:center}.tf-home-footer .tf-home-wrap>span{width:100%;order:3}}
@media(max-width:390px){.tf-home-navigation nav{gap:10px}.tf-home-navigation nav a{font-size:10px}.tf-hero-buttons .tf-home-btn{width:100%}.tf-preview-content{padding:13px}.tf-preview-metrics{gap:5px}.tf-preview-metrics>div{padding:8px}.tf-preview-metrics strong{font-size:15px}.tf-preview-heading strong{font-size:16px}.tf-preview-pill{font-size:7px}.tf-preview-bets strong{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tf-home-btn{transition:none}.tf-home-btn:hover{transform:none}}

/* MyBankroll 2.13: slightly longer brand, keep desktop and mobile navigation aligned. */
.tf-home-logo{flex-shrink:0;font-size:22px;white-space:nowrap}
.tf-home-logo img{object-fit:contain;border-radius:50%;width:42px;height:42px}
.tf-home-navigation nav{gap:18px}
@media(max-width:1090px){.tf-home-logo{font-size:19px}.tf-home-navigation nav{gap:12px}}
@media(max-width:760px){.tf-home-logo{font-size:22px}.tf-home-navigation nav{gap:10px}}
@media(max-width:390px){.tf-home-logo{font-size:20px}.tf-home-logo img{width:38px;height:38px}}


/* MyBankroll 2.13.1 — tighter above-the-fold layout on desktop; mobile-first density. */
@media (min-width:761px) {
  .tf-home-navigation{padding:10px 0;gap:16px}
  .tf-hero{padding:48px 0 62px}
  .tf-hero-grid{align-items:start;gap:36px}
  .tf-hero-copy{align-self:start;padding-top:19px}
  .tf-hero-copy h1{margin:15px 0 16px;line-height:1.11}
  .tf-hero-copy>p{margin-top:0}
  .tf-hero-buttons{margin:23px 0 18px}
  .tf-preview{align-self:start}
  .tf-trust{padding:17px 0 18px}
}
@media (min-width:761px) and (max-width:980px) {
  .tf-hero{padding:40px 0 48px}
  .tf-hero-grid{gap:22px}
  .tf-hero-copy{padding-top:8px}
  .tf-hero-copy h1{font-size:clamp(34px,4.2vw,48px)}
}
/* Phones: compact 2-row header, headline and intro, more useful content per swipe. */
@media (max-width:760px) {
  .tf-home-navigation{padding:9px 0 8px;row-gap:7px;column-gap:8px}
  .tf-home-logo{font-size:20px;gap:8px}
  .tf-home-logo img{width:36px;height:36px}
  .tf-home-logo small{font-size:6.5px;letter-spacing:1.55px;margin-top:4px}
  .tf-home-header-actions{gap:8px}
  .tf-home-signin{font-size:11px}
  .tf-home-header-actions .tf-home-btn{padding:7px 11px;min-height:35px;border-radius:9px}
  .tf-home-navigation nav{gap:8px;min-width:0;padding:5px 0 1px}
  .tf-home-navigation nav a{font-size:11px}
  .tf-hero{padding:32px 0 41px}
  .tf-hero-grid{gap:24px}
  .tf-hero-copy h1{font-size:clamp(33px,8.5vw,44px);line-height:1.13;letter-spacing:-1px;margin:12px 0 13px}
  .tf-hero-copy>.tf-home-eyebrow{font-size:9px;letter-spacing:1.25px}
  .tf-hero-copy>p{font-size:13px;line-height:1.62;margin:0}
  .tf-hero-buttons{margin:19px 0 14px;gap:9px}
  .tf-hero-buttons .tf-home-btn{min-height:42px;padding:10px 15px}
  .tf-hero-proof{gap:6px 13px;font-size:10px;line-height:1.45}
  .tf-preview-content{padding:17px}
  .tf-preview-metrics{margin:12px 0}
  .tf-preview-chart{padding:11px}
  .tf-preview-chart svg{max-height:145px}
  .tf-preview-bets{margin-top:8px;gap:5px}
  .tf-trust{padding:14px 0 16px}
  .tf-trust span{font-size:9px;letter-spacing:1.1px}
  .tf-trust div div{font-size:12px;line-height:1.65}
  .tf-trust i{padding:0 5px}
  .tf-home-section{padding:47px 0}
  .tf-section-intro{margin-bottom:23px}
  .tf-section-intro h2{font-size:clamp(26px,7.6vw,34px);margin:8px 0;line-height:1.19}
  .tf-section-intro p{font-size:13px;line-height:1.6;margin:8px auto 0}
  .tf-feature-grid{gap:11px}
  .tf-feature{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:13px;row-gap:0;align-items:start;padding:17px 16px;border-radius:14px}
  .tf-feature-icon{grid-column:1;grid-row:1 / span 3;width:42px;height:42px;border-radius:11px;font-size:22px}
  .tf-feature h3{grid-column:2;font-size:16px;margin:0 0 5px}
  .tf-feature p{grid-column:2;font-size:12px;line-height:1.55;margin:0;min-width:0}
  .tf-feature>span:last-child{grid-column:2;font-size:9px;letter-spacing:.45px;line-height:1.45;margin-top:9px}
  .tf-how{padding:45px 0}
  .tf-steps{gap:10px}
  .tf-steps article{display:grid;grid-template-columns:50px minmax(0,1fr);align-items:start;column-gap:10px;padding:18px;border-radius:13px}
  .tf-steps article>span{grid-column:1;grid-row:1 / span 2;font-size:30px;line-height:1.2}
  .tf-steps h3{grid-column:2;margin:1px 0 5px;font-size:16px}
  .tf-steps p{grid-column:2;margin:0;font-size:12px;line-height:1.6}
  .tf-pricing{gap:13px}
  .tf-plan{padding:24px 21px;border-radius:16px}
  .tf-plan h3{font-size:27px;margin-top:10px}
  .tf-plan-price{font-size:21px;margin:5px 0}
  .tf-plan ul{margin:12px 0 20px;gap:9px}
  .tf-plan li{font-size:12px}
  .tf-plan .tf-home-btn{min-height:43px}
  .tf-faq{padding:9px 0 48px}
  .tf-faq details{margin:8px auto;padding:15px}
  .tf-final{padding:52px 0 56px}
  .tf-home-footer{padding:20px 0}
}
@media (max-width:390px) {
  .tf-home-logo{font-size:19px}
  .tf-home-logo img{width:34px;height:34px}
  .tf-home-navigation nav{gap:7px}
  .tf-home-navigation nav a{font-size:10px}
  .tf-hero{padding:28px 0 36px}
  .tf-hero-copy h1{font-size:clamp(31px,8.6vw,36px)}
  .tf-preview-content{padding:12px}
  .tf-preview-chart svg{max-height:125px}
}
