/* Per-bookmaker sign-up-offer page. Loaded after landing.css. */
:root{
  --fb-heading:#383838;
  --fb-text:#3a4340;
  --fb-muted:#5c6660;
  --fb-surface:#eef3ef;
  --fb-card:#ffffff;
  --fb-line:#dde5e0;
  --fb-star:#fa9600;
}

.fb-main{padding:30px 0 96px}
.fb-wrap{width:calc(100% - 100px);max-width:1290px;margin-inline:auto}

/* ---------- Hero ---------- */
.fb-hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:start}
.fb-hero > *{min-width:0}
.fb-h1{font-size:clamp(28px,3.8vw,46px);font-weight:700;line-height:1.18;color:var(--fb-heading)}

.fb-ratings{display:grid;gap:10px;margin-top:28px;max-width:560px}
.fb-star-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 16px;background:var(--fb-surface);border-radius:6px}
.fb-star-label{font-size:16px;font-weight:500;color:var(--fb-heading);min-width:0}
.fb-stars{display:flex;gap:3px;flex:none}
.fb-star{width:18px;height:18px;fill:#cfd8d3}
.fb-star.is-on{fill:var(--fb-star)}

.fb-hero-card{background:var(--fb-card);border:1px solid var(--fb-line);border-radius:6px;
  padding:20px;display:flex;flex-direction:column;align-items:center;gap:14px;position:sticky;top:18px}
.fb-hero-logo{max-width:130px;height:34px;object-fit:contain}
.fb-hero-art{width:100%;height:auto;border-radius:6px}
.fb-cta{width:100%;min-height:52px;font-size:17px;font-weight:700}
.fb-hero-note{font-size:11px;line-height:1.45;color:var(--fb-muted);text-align:center}

.fb-intro{margin-top:38px;max-width:900px}
.fb-lede{font-size:19px;font-weight:300;line-height:1.6;color:var(--fb-text)}
.fb-lede + .fb-lede{margin-top:16px}
.fb-inline-link{color:var(--color-brand-dark);font-weight:500;text-decoration:underline}

/* ---------- Sections ---------- */
.fb-body{margin-top:14px}
.fb-section{margin-top:52px;scroll-margin-top:24px}
.fb-h2{font-size:clamp(22px,2.6vw,32px);font-weight:700;line-height:1.25;color:var(--fb-heading);margin-bottom:18px}
.fb-h3{font-size:19px;font-weight:700;color:var(--fb-heading);margin:26px 0 12px}
.fb-p{font-size:17px;font-weight:300;line-height:1.62;color:var(--fb-text);max-width:900px}
.fb-p + .fb-p{margin-top:14px}
/* A paragraph following a list, table or card grid needs the same breathing
   room as one following another paragraph — several docs close a section with
   one. */
.fb-bullets + .fb-p,.fb-steps + .fb-p,.fb-table-wrap + .fb-p,
.fb-features + .fb-p,.fb-proscons + .fb-p{margin-top:20px}

.fb-bullets,.fb-steps{margin:16px 0 0;padding-left:22px;max-width:900px}
.fb-bullets li,.fb-steps li{font-size:17px;font-weight:300;line-height:1.6;color:var(--fb-text);margin-top:9px}
.fb-steps{counter-reset:none}

/* ---------- Contents ---------- */
.fb-toc{background:var(--fb-surface);border-radius:6px;padding:20px 24px;margin-top:44px}
.fb-toc-title{font-size:14px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--fb-muted)}
.fb-toc-list{margin:12px 0 0;padding-left:20px;columns:2;column-gap:32px}
.fb-toc-list li{margin:7px 0;font-size:15px}
.fb-toc-list a{color:var(--color-brand-dark)}
.fb-toc-list a:hover{text-decoration:underline}

/* ---------- Tables ---------- */
.fb-table-wrap{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fb-table{width:100%;border-collapse:collapse;background:var(--fb-card);
  border:1px solid var(--fb-line);border-radius:6px;overflow:hidden;font-size:16px}
.fb-table th,.fb-table td{padding:13px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--fb-line);font-weight:300;color:var(--fb-text);line-height:1.5}
.fb-table thead th{background:var(--fb-surface);font-weight:700;color:var(--fb-heading);white-space:nowrap}
.fb-table tbody th{font-weight:500;color:var(--fb-heading)}
.fb-table tbody tr:last-child th,.fb-table tbody tr:last-child td{border-bottom:0}
.fb-table-compare thead th:first-child{min-width:0}

/* ---------- Key features ---------- */
.fb-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}
.fb-feature{background:var(--fb-surface);border-radius:6px;padding:20px 22px}
.fb-feature-name{font-size:18px;font-weight:700;color:var(--fb-heading)}
.fb-feature-text{font-size:16px;font-weight:300;line-height:1.55;color:var(--fb-text);margin-top:8px}

/* ---------- Pros and cons ---------- */
.fb-proscons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}
.fb-pros,.fb-cons{border-radius:6px;padding:20px 22px;border:1px solid var(--fb-line)}
.fb-pros{background:#eef7f1}
.fb-cons{background:#fbf1ef}
.fb-pc-title{font-size:17px;font-weight:500;color:var(--fb-heading)}
.fb-pc-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.fb-pc-list li{display:flex;gap:10px;align-items:flex-start}
.fb-pc-mark{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;margin-top:2px}
.fb-pros .fb-pc-mark{background:#1a8a5a}
.fb-cons .fb-pc-mark{background:#c0483a}
.fb-pc-text{font-size:16px;font-weight:300;line-height:1.5;color:var(--fb-text);min-width:0}

/* ---------- FAQs ---------- */
.fb-faq{background:var(--fb-card);border:1px solid var(--fb-line);border-radius:6px;
  padding:4px 18px;margin-top:10px}
.fb-faq-q{cursor:pointer;list-style:none;padding:15px 30px 15px 0;position:relative;
  font-size:17px;font-weight:500;color:var(--fb-heading)}
.fb-faq-q::-webkit-details-marker{display:none}
.fb-faq-q::after{content:'';position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--fb-muted);border-bottom:2px solid var(--fb-muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.fb-faq[open] .fb-faq-q::after{transform:translateY(-30%) rotate(225deg)}
.fb-faq-a{font-size:16px;font-weight:300;line-height:1.6;color:var(--fb-text);padding:0 0 16px}

/* ---------- Sticky claim bar ---------- */
.fb-stickybar{position:sticky;bottom:0;z-index:40;background:var(--color-brand-dark);color:#fff}
.fb-stickybar-inner{width:calc(100% - 100px);max-width:1290px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0}
.fb-stickybar-text{font-size:16px;min-width:0;line-height:1.35}
.fb-stickybar-cta{background:var(--color-accent-orange);min-height:44px;font-size:15px;
  font-weight:700;padding:10px 24px;flex:none}
.fb-stickybar-cta:hover{background:#e98b00}

@media(max-width:1350px){
  .fb-wrap,.fb-stickybar-inner{width:calc(100% - 64px)}
  .fb-hero{grid-template-columns:minmax(0,1fr) 320px;gap:32px}
}

@media(max-width:1050px){
  .fb-hero{grid-template-columns:1fr;gap:26px}
  .fb-hero-card{position:static;flex-direction:row;flex-wrap:wrap;align-items:center}
  .fb-hero-art{width:min(320px,52%);order:-1}
  .fb-hero-logo{order:-2}
  .fb-cta{width:auto;flex:1;min-width:200px}
  .fb-hero-note{flex-basis:100%;text-align:left}
  .fb-ratings{max-width:none}
  .fb-features,.fb-proscons{grid-template-columns:1fr}
  .fb-toc-list{columns:1}
}

@media(max-width:650px){
  .fb-wrap,.fb-stickybar-inner{width:calc(100% - 32px)}
  .fb-main{padding:20px 0 70px}
  .fb-section{margin-top:38px}
  .fb-lede{font-size:17px}
  .fb-p,.fb-bullets li,.fb-steps li{font-size:16px}
  .fb-star-row{padding:10px 13px;gap:10px}
  .fb-star-label{font-size:14px}
  .fb-star{width:15px;height:15px}
  .fb-hero-card{padding:16px;gap:12px}
  .fb-hero-art{width:100%}
  .fb-cta{width:100%;flex:none;min-width:0}
  .fb-intro{margin-top:26px}
  .fb-toc{padding:16px 18px}
  .fb-feature,.fb-pros,.fb-cons{padding:16px}

  /* Tables become labelled stacks — a 5-column payments table cannot be read
     on a phone, and a horizontal scroller hides half the data. */
  .fb-table-wrap{overflow:visible}
  .fb-table,.fb-table tbody,.fb-table tr{display:block;width:100%}
  .fb-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fb-table tr{border-bottom:1px solid var(--fb-line);padding:6px 0}
  .fb-table tbody tr:last-child{border-bottom:0}
  .fb-table th,.fb-table td{display:flex;gap:14px;justify-content:space-between;
    border-bottom:0;padding:7px 14px;text-align:right}
  .fb-table td[data-col]::before,.fb-table th[data-col]::before{
    content:attr(data-col);flex:none;font-weight:500;color:var(--fb-muted);text-align:left}
  .fb-table tbody th{background:var(--fb-surface);font-weight:700;text-align:left;justify-content:flex-start}
  .fb-table tbody th[data-col]::before{content:none}

  .fb-stickybar-inner{padding:10px 0;gap:12px}
  .fb-stickybar-text{font-size:13px}
  .fb-stickybar-cta{font-size:14px;padding:10px 16px;min-height:42px}
}

@media(max-width:400px){
  .fb-star-row{flex-direction:column;align-items:flex-start;gap:6px}
  .fb-toc-list{padding-left:18px}
  .fb-stickybar-text{display:none}
  .fb-stickybar-cta{flex:1}
}

/* Type scale matched to the homepage (landing.css): page title 50px,
   section heading 40px, panel heading 30px, sub-heading 23px, card title
   20px, lead 20px, body 16px, buttons 18px; headings Medium (500). Fine
   print is left as is. Desktop and tablet only; phones keep their sizes. */
@media(min-width:651px){
  main .fb-steps li:not([class]){font-size:16px !important}
  main .fb-bullets li:not([class]){font-size:16px !important}
  main p.fb-lede{font-size:20px !important}
  main h2.fb-h2{font-size:40px !important;font-weight:500 !important;line-height:1.2 !important}
  main p.fb-p{font-size:16px !important}
  main h3.fb-feature-name{font-size:20px !important;font-weight:500 !important}
  main h3.fb-pc-title{font-size:20px !important}
  main h3.fb-h3{font-size:20px !important;font-weight:500 !important}
}

/* Type scale matched to the homepage on phones: page title 32px, section
   heading 30px, panel heading 26px, sub-heading 20px, card title 16-18px,
   body 15-16px. Fine print is left as is. */
@media(max-width:650px){
  main p.fb-lede{font-size:16px !important}
  main h2.fb-h2{font-size:26px !important;font-weight:500 !important;line-height:1.2 !important}
  main h3.fb-feature-name{font-size:18px !important;font-weight:500 !important}
  main h3.fb-pc-title{font-size:16px !important}
  main h3.fb-h3{font-size:18px !important;font-weight:500 !important}
}

/* Desktop gutter: from 1051px up, content keeps at least 80px either side,
   so smaller laptops (1100-1440px) get the same breathing room as wide
   screens. Each container still stops at its own max-width. */
@media(min-width:1051px){.fb-wrap{box-sizing:border-box;width:calc(100% - 160px) !important;margin-left:auto !important;margin-right:auto !important}}