/* ═══════════════════════════════════════════════════════════════
   DOUBLEDOWN BOOKS — get-started wizard, page-specific styles.

   Loaded AFTER th.css and th-gs.css. It adds only what the Books
   checkout needs on top of the AE component set and overrides only where
   a rule was written for the /test/ demo (which sits under a full site
   nav; this page has a slim checkout bar instead).

   Everything is scoped under `body.bo` or a `bo`-prefixed class, so it
   cannot leak into the 106 pages that share th.css and th-gs.css.
   ═══════════════════════════════════════════════════════════════ */

body.bo { --bo-bar: 62px; }

/* ══════════ the checkout bar ══════════
   A payment page carries no site navigation on purpose — every extra link
   is an exit. What stays is the brand (so you know whose card form you are
   about to fill in) and the fact that it is secure. */
.bobar {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--bo-bar);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(4, 7, 6, .82); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.bobar__b { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.bobar__mark { display: block; width: 34px; color: #fff; }
.bobar__mark svg { width: 100%; height: auto; display: block; }
.bobar__n { font-family: 'Satoshi'; font-weight: 500; font-size: .98rem; letter-spacing: -.03em; color: rgba(255,255,255,.62); }
.bobar__n b { font-weight: 900; color: #fff; }
.bobar__s { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 600;
  letter-spacing: .04em; color: rgba(255,255,255,.42); }
.bobar__s svg { width: 15px; height: 15px; color: var(--mint); }
@media (max-width: 560px) { .bobar__s span { display: none; } .bobar__s { font-size: 0; } .bobar__s svg { font-size: 1rem; } }

/* The hero's top padding was sized for the full site nav (~94px). */
body.bo .gs-hero { padding-top: clamp(112px, 15vh, 160px); }
body.bo .gsrail { top: calc(var(--bo-bar) + 10px); }
body.bo .gserr { top: calc(var(--bo-bar) + 92px); }

/* ══════════ resume banner ══════════ */
.boresume {
  position: sticky; top: var(--bo-bar); z-index: 55;
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  max-width: 1180px; margin: 0 auto; padding: .85rem clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgba(52,245,173,.22); background: rgba(52,245,173,.07);
  font-size: .9rem; color: rgba(255,255,255,.78);
}
.boresume[hidden] { display: none; }
.boresume > span { flex: 1 1 260px; }

/* ══════════ per-field error ══════════
   th-gs.css styles a single sticky banner. A form with 30 fields needs the
   message next to the field that is wrong, not only at the top. */
.gsf__e {
  display: block; margin-top: .45rem; font-size: .82rem; font-weight: 600;
  line-height: 1.5; color: #FFC9C9;
}
body.bo .pinput.is-bad,
body.bo select.is-bad,
body.bo textarea.is-bad {
  border-color: rgba(255,110,110,.62) !important;
  box-shadow: 0 0 0 3px rgba(255,110,110,.14) !important;
}

/* ══════════ numbered questions ══════════
   th-gs.css styles .gsq__n as a flex child of .gsq__head; here the numeral
   sits directly inside .gsq. */
body.bo .gsq { display: flex; align-items: baseline; gap: .6rem; }
body.bo .gsq__n { flex: none; }

/* ══════════ capability picker ══════════ */
.bofeat { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .55rem; margin-top: 1rem; }
.bofeat__i {
  text-align: left; padding: .9rem 1.05rem; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  transition: border-color .45s var(--e-soft), background .45s var(--e-soft), transform .5s var(--e-soft);
}
.bofeat__i:hover { border-color: rgba(52,245,173,.34); transform: translateY(-2px); }
.bofeat__i.is-on { border-color: var(--mint); background: rgba(52,245,173,.1); }
.bofeat__t {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  font-family: 'Satoshi'; font-weight: 700; font-size: .92rem; letter-spacing: -.025em; color: #fff;
}
.bofeat__tag {
  font-family: 'Switzer'; font-weight: 600; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 999px; color: var(--mint); background: rgba(52,245,173,.11);
  border: 1px solid rgba(52,245,173,.22);
}
.bofeat__i.is-on .bofeat__tag { color: var(--on-mint); background: var(--mint); border-color: transparent; }
.bofeat__d { display: block; margin-top: .35rem; font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.44); }

/* ══════════ plan cards ══════════ */
.boplan__meta { display: block; margin: .8rem 0 .2rem; padding: .7rem 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.boplan__meta span { display: block; font-size: .8rem; line-height: 1.7; color: rgba(255,255,255,.5); }
.boplan__meta b { color: #fff; font-weight: 700; }
.gsplan.is-locked { opacity: .38; filter: saturate(.4); cursor: not-allowed; }
.gsplan.is-locked:hover { transform: none; border-color: var(--line); }
/* The bullets carry <strong> from src/features.py — keep them readable. */
body.bo .gsplan__f li strong { color: #fff; font-weight: 700; }

/* ══════════ notes and panels ══════════ */
.bonote {
  display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.4rem;
  padding: 1.1rem 1.25rem; border-radius: 20px;
  border: 1px solid rgba(52,245,173,.24); background: linear-gradient(160deg, rgba(52,245,173,.08), rgba(4,7,6,.5) 72%);
}
.bonote[hidden] { display: none; }
.bonote__ic { flex: none; width: 24px; height: 24px; color: var(--mint); }
.bonote b { display: block; font-family: 'Satoshi'; font-weight: 900; font-size: 1rem; letter-spacing: -.03em; color: #fff; }
.bonote p { margin: .4rem 0 0; font-size: .87rem; line-height: 1.6; color: rgba(255,255,255,.55); }

.bopanel { margin-top: 1.6rem; padding: 1.3rem 1.4rem; border-radius: 20px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.bolist { margin: .6rem 0 0; padding-left: 1.15rem; }
.bolist li { margin: .45rem 0; font-size: .87rem; line-height: 1.6; color: rgba(255,255,255,.55); }
.bolist li b { color: #fff; }

/* ══════════ acknowledgements ══════════ */
.boack .gsaccept__t b { display: block; font-family: 'Satoshi'; font-weight: 700; font-size: .95rem;
  letter-spacing: -.02em; color: #fff; }
.boack .gsaccept__t small { display: block; margin-top: .35rem; font-size: .82rem; line-height: 1.55;
  color: rgba(255,255,255,.44); }

/* ══════════ branding step ══════════ */
body.bo .gspal { grid-template-columns: repeat(8, 1fr); }
.bologo { display: block; max-width: 180px; max-height: 90px; margin-top: 1rem;
  padding: .7rem .9rem; border-radius: 14px; background: #fff; }
.bologo[hidden] { display: none; }

/* The document sketch. Three template styles, one element — the data-tpl
   attribute is the same value that lands in books.settings.template_style,
   so what they pick here is what the PDF renderer is told. */
.bodoc {
  --bo-brand: #4FD8A6; --bo-font: 'Switzer';
  position: sticky; top: calc(var(--bo-bar) + 190px);
  padding: 1.5rem 1.4rem; border-radius: 18px; background: #fff; color: #12211c;
  font-family: var(--bo-font), ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 40px 90px -50px #000;
}
@media (max-width: 980px) { .bodoc { position: static; } }
.bodoc__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: .9rem; border-bottom: 2px solid var(--bo-brand); }
.bodoc__logo { display: inline-block; padding: .45rem .8rem; border-radius: 8px;
  background: rgba(18,33,28,.06); font-size: .72rem; font-weight: 600; color: rgba(18,33,28,.45); }
.bodoc__no { text-align: right; }
.bodoc__no span { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bo-brand); }
.bodoc__no b { display: block; margin-top: .2rem; font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.bodoc__meta { margin: .9rem 0 1.1rem; font-size: .78rem; }
.bodoc__meta span { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(18,33,28,.4); }
.bodoc__meta b { font-size: .92rem; font-weight: 700; }
.bodoc__ln { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; font-size: .84rem; border-bottom: 1px solid rgba(18,33,28,.09); }
.bodoc__ln b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bodoc__ln--sub { color: rgba(18,33,28,.6); font-size: .79rem; }
.bodoc__ln--tot { border-bottom: 0; border-top: 2px solid var(--bo-brand); margin-top: .3rem;
  padding-top: .7rem; font-size: 1rem; font-weight: 800; }
.bodoc__ln--tot b { font-weight: 900; color: var(--bo-brand); }
.bodoc__ft { margin: 1.1rem 0 0; font-size: .68rem; line-height: 1.5; color: rgba(18,33,28,.38); }

.bodoc[data-tpl="modern"] { border-radius: 6px; padding: 1.9rem 1.6rem; }
.bodoc[data-tpl="modern"] .bodoc__hd { border-bottom-width: 4px; }
.bodoc[data-tpl="modern"] .bodoc__ln { border-bottom-color: transparent; padding: .62rem 0; }
.bodoc[data-tpl="modern"] .bodoc__no b { font-size: 1.3rem; }

.bodoc[data-tpl="minimal"] { border-radius: 2px; }
.bodoc[data-tpl="minimal"] .bodoc__hd { border-bottom: 1px solid rgba(18,33,28,.14); }
.bodoc[data-tpl="minimal"] .bodoc__ln { border-bottom: 0; }
.bodoc[data-tpl="minimal"] .bodoc__ln--tot { border-top: 1px solid rgba(18,33,28,.2); }
.bodoc[data-tpl="minimal"] .bodoc__ln--tot b { color: #12211c; }
.bodoc[data-tpl="minimal"] .bodoc__no span { color: rgba(18,33,28,.45); }

/* ══════════ honeypot ══════════
   Off-screen rather than display:none — some bots skip hidden inputs, and
   a bot that skips it is a bot we do not catch. aria-hidden + tabindex=-1
   keep it away from anybody real. */
.bohp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ══════════ full-width field inside a grid ══════════ */
.gsf--wide { grid-column: 1 / -1; }

/* ══════════ pay button while working ══════════ */
body.bo #boPayBtn[disabled] { opacity: .62; cursor: progress; }

/* ══════════ footer ══════════ */
.bofoot { max-width: 900px; margin: clamp(40px, 7vh, 80px) auto 0; padding: 0 clamp(16px, 4vw, 40px) 60px;
  text-align: center; }
.bofoot p { margin: .5rem 0; font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.32); }
.bofoot a { color: rgba(255,255,255,.55); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.16); }
.bofoot a:hover { color: var(--mint); border-bottom-color: var(--mint); }

/* ══════════ mobile ══════════
   A base rule qualified by an element beats a bare-class media query, so
   every override below is written at the same specificity as the rule it
   is replacing. That is how the footer columns ended up 38px wide on 106
   pages once already. */
@media (max-width: 680px) {
  body.bo .gspay { grid-template-columns: 1fr; }
  body.bo .gspal { grid-template-columns: repeat(6, 1fr); }
  .bofeat { grid-template-columns: 1fr; }
  .boresume { flex-direction: column; align-items: stretch; }
  .boresume .btn { width: 100%; justify-content: space-between; }
}

/* ══════════ free trial ══════════
   Entered with ?trial=1. The eight screens are identical — a trial still has
   to provision a real business — so the only visual difference is the banner,
   the plan framing, and a last screen with no card on it. */
.botrial {
  position: sticky; top: var(--bo-bar); z-index: 55;
  display: flex; align-items: flex-start; gap: .8rem;
  max-width: 1180px; margin: 0 auto; padding: .9rem clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgba(52,245,173,.24); background: rgba(52,245,173,.09);
  font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.8);
}
.botrial[hidden] { display: none; }
.botrial svg { flex: none; width: 20px; height: 20px; margin-top: .1rem; color: var(--mint); }
.botrial b { color: #fff; }

/* Both sets ship hidden-by-default in the markup and are switched on at boot,
   so a customer never sees the wrong framing flash before the JS runs. */
body.bo .bo-trial-only[hidden] { display: none; }
body.bo .bo-paid-only[hidden]  { display: none; }