/* ==========================================================================
   SMEMinds Playbook Master — application shell & page components
   Depends on system.css for every token.
   ========================================================================== */

/* ==========================================================================
   header
   ========================================================================== */
.site-header {
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.7) blur(16px);
  -webkit-backdrop-filter:saturate(1.7) blur(16px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.site-header .wrap { height:var(--header-h); display:flex; align-items:center; gap:var(--s-5); }

.brand { display:flex; align-items:center; gap:10px; flex:none; }
.brand:hover { text-decoration:none; }
.brand img { height:30px; width:auto; }
/* one logo file per theme — the wordmark is white and vanishes on light */
.logo-dark { display:none; }
:root[data-theme="dark"] .logo-dark { display:block; }
:root[data-theme="dark"] .logo-light { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-dark { display:block; }
  :root:not([data-theme="light"]) .logo-light { display:none; }
}

.nav-main { display:flex; align-items:center; gap:2px; }
.nav-main a {
  padding:8px 13px; border-radius:var(--r-sm);
  font-size:var(--t-sm); font-weight:600; color:var(--ink-2);
  transition:background var(--fast) linear, color var(--fast) linear;
}
.nav-main a:hover { background:var(--surface-3); color:var(--ink); text-decoration:none; }
.nav-main a[aria-current="page"] { color:var(--brand-ink); background:var(--brand-wash); }

.header-search {
  flex:1 1 auto; max-width:420px; position:relative;
}
.header-search input {
  width:100%; height:40px; padding:0 14px 0 38px;
  border-radius:var(--r-full); border:1px solid var(--line-2);
  background:var(--surface-2); color:var(--ink); font-size:var(--t-sm);
}
.header-search input:focus {
  outline:none; border-color:var(--focus); background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
}
.header-search .ico {
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); pointer-events:none; font-size:14px;
}
.search-results {
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:70;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-3);
  max-height:min(70vh, 460px); overflow:auto; padding:6px;
}
.search-results a {
  display:block; padding:9px 12px; border-radius:var(--r-sm); color:var(--ink);
}
.search-results a:hover, .search-results a.is-active {
  background:var(--surface-3); text-decoration:none;
}
.search-results .k { font-size:var(--t-xs); color:var(--brand-ink); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; }
.search-results mark { background:var(--orange-100); color:inherit; border-radius:3px; }

.avatar {
  width:34px; height:34px; border-radius:50%; flex:none;
  background:linear-gradient(140deg,var(--navy-600),var(--navy-800));
  color:#fff; display:grid; place-items:center;
  font-size:var(--t-sm); font-weight:800; overflow:hidden;
}
.avatar img { width:100%; height:100%; object-fit:cover; }

.menu {
  position:absolute; right:0; top:calc(100% + 10px); z-index:70;
  min-width:250px; padding:7px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-3);
}
.menu a, .menu button {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; border-radius:var(--r-sm);
  font-size:var(--t-sm); color:var(--ink); text-align:left;
}
.menu a:hover, .menu button:hover { background:var(--surface-3); text-decoration:none; }
.menu hr { margin:6px 4px; }
.menu-head { padding:11px 12px 9px; border-bottom:1px solid var(--line); margin-bottom:5px; }

/* mobile nav ---------------------------------------------------------- */
.burger { display:none; }
.mobile-nav {
  position:fixed; inset:var(--header-h) 0 0; z-index:59;
  background:var(--surface); padding:var(--s-5) var(--gutter);
  overflow-y:auto; display:none;
  padding-bottom:calc(var(--s-9) + env(safe-area-inset-bottom));
}
.mobile-nav.open { display:block; }
.mobile-nav a {
  display:block; padding:14px 4px; border-bottom:1px solid var(--line);
  font-size:var(--t-lg); font-weight:650; color:var(--ink);
}
@media (max-width: 980px) {
  .nav-main, .header-search { display:none; }
  .burger { display:inline-flex; }
}

/* ==========================================================================
   footer
   ========================================================================== */
.site-footer {
  background:var(--navy-900); color:#c8d5e8;
  padding-block:var(--s-10) var(--s-6);
  margin-top:var(--s-11);
}
.site-footer a { color:#c8d5e8; }
.site-footer a:hover { color:#fff; }
.site-footer h4 { color:#fff; font-size:var(--t-sm); letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:var(--s-4); }
.footer-grid {
  display:grid;
  gap:var(--s-8) var(--s-7);
  align-items:start;
  /* NOT repeat(auto-fit, ...): an auto-repeat cannot sit in a track list that
     also has an `fr` track. That combination is invalid, the declaration is
     dropped, and the footer collapses to one column at every width. The shape
     here is known — brand + four link columns — so it is written out. */
  grid-template-columns:1.7fr repeat(4, minmax(130px, 1fr));
}
@media (max-width:1080px) {
  .footer-grid { grid-template-columns:repeat(3, 1fr); }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:640px) {
  .footer-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:400px) {
  .footer-grid { grid-template-columns:1fr; }
}
.footer-brand p { max-width:38ch; }
/* the Playbooks column is nine items long and would otherwise set the height
   of the whole footer on a wide screen */
.footer-links { columns:1; }
.footer-more { display:inline-block; margin-top:12px; font-size:var(--t-xs);
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.footer-grid ul li + li { margin-top:10px; }
.footer-grid ul a { font-size:var(--t-sm); }
.footer-bottom {
  margin-top:var(--s-8); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:var(--s-4);
  justify-content:space-between; font-size:var(--t-xs); color:#8fa4c2;
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position:relative; overflow:hidden;
  background-color: var(--navy-800);   /* real fallback; see .btn-primary */
  background-image:
    radial-gradient(1100px 560px at 78% -12%, rgba(254,120,7,.20), transparent 62%),
    radial-gradient(900px 520px at 6% 8%, rgba(20,66,127,.28), transparent 60%),
    linear-gradient(168deg, var(--navy-900), var(--navy-800) 52%, #06214f);
  color:#fff;
  padding-block:clamp(52px, 7.5vw, 96px) clamp(44px, 6vw, 84px);
}
/* An atmospheric layer under the gradients: flat navy over 500px of hero reads
   as an empty panel however good the type is. Masked away from the left third
   so it never competes with the headline, and `screen` so it only ever adds
   light — it cannot darken text that sits above it. */
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("/static/img/bg/hero-aurora.jpg") center/cover no-repeat;
  mix-blend-mode:screen; opacity:.55;
  -webkit-mask-image:linear-gradient(100deg, transparent 6%, #000 52%);
          mask-image:linear-gradient(100deg, transparent 6%, #000 52%);
}
.hero::after {           /* faint grid, purely structural */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.hero > .wrap { position:relative; z-index:1; }
.hero-grid {
  display:grid; gap:clamp(32px, 5vw, 64px);
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  align-items:center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns:1fr; } }

/* The headline names three categories now, roughly twice the character count
   it was set for. At --t-5xl that ran to five lines and pushed the panel out
   of the first screen, so the hero gets its own scale — still the largest type
   on the site, sized for the sentence it actually has to hold. */
.hero h1 {
  color:#fff; font-weight:900; letter-spacing:-.035em;
  font-size:clamp(2.05rem, 1.55rem + 2.05vw, 3.35rem);
  text-wrap:balance;
}
.hero .lead { color:#c5d6ee; font-size:clamp(1.02rem,.95rem+.5vw,1.28rem); max-width:56ch; }
.hero .eyebrow { color:var(--orange-300); }
.hero-ctas { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-7); }
.hero .btn-ghost { --btn-line:rgba(255,255,255,.34); --btn-ink:#fff; }
.hero .btn-ghost:hover { --btn-bg:rgba(255,255,255,.10); }

/* a divided band, not a flex run: the rules give the four numbers a shared
   baseline and stop them drifting apart on a wide screen */
.hero-stats {
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  margin:var(--s-8) 0 0; padding-top:var(--s-6);
  border-top:1px solid rgba(255,255,255,.14);
}
/* column-reverse, not source order: the label sits under the number, so a
   two-word label like "Quiz questions" wraps downward instead of pushing its
   own number out of line with the other three. The DOM order stays dt-then-dd
   for the definition list to remain a definition list. */
.hero-stats > div {
  padding-inline:var(--s-5);
  display:flex; flex-direction:column-reverse; justify-content:flex-end;
}
.hero-stats > div:first-child { padding-left:0; }
.hero-stats > div + div { border-left:1px solid rgba(255,255,255,.12); }
.hero-stats dd { margin:0; font-size:var(--t-2xl); font-weight:900;
  letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums;
  line-height:1.05; }
.hero-stats dt { font-size:var(--t-xs); color:#9db3d2; letter-spacing:.05em;
  text-transform:uppercase; font-weight:700; margin-top:6px; }
@media (max-width:560px) {
  .hero-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:var(--s-5); }
  .hero-stats > div:nth-child(3) { padding-left:0; border-left:0; }
}

/* hero visual: a compact "operating system" panel */
.hero-panel {
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);
  padding:var(--s-5);
  box-shadow:0 30px 80px rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
}
.hero-panel-head {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:var(--s-4); margin-bottom:var(--s-4);
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:var(--t-xs); color:#9fb4d2; letter-spacing:.08em; text-transform:uppercase;
}
/* the headline metric, with the trend beside it rather than under everything */
.hp-lead {
  display:grid;
  /* `auto` on the copy let the uppercase label hold the column open at its
     full unwrapped width, leaving the chart 209px of a 521px panel. Two
     flexible tracks give the trend the space it needs and let the label wrap. */
  grid-template-columns:minmax(0, .92fr) minmax(150px, 1.08fr);
  gap:var(--s-5); align-items:end;
  padding:var(--s-5) 0 var(--s-5);
}
.hp-lead-copy .t { font-size:var(--t-xs); color:#9fb4d2; letter-spacing:.04em;
  text-transform:uppercase; font-weight:700; }
.hp-lead-copy .v {
  font-size:clamp(2.5rem, 2rem + 2vw, 3.4rem); font-weight:900; color:#fff;
  letter-spacing:-.04em; line-height:1; margin-top:8px;
  font-variant-numeric:tabular-nums;
}
.hp-lead-copy .v em { font-style:normal; font-size:.5em; font-weight:800;
  color:#b9cbe6; margin-left:2px; }
.hp-lead-copy .d { margin-top:8px; }

/* a delta whose colour carries no meaning is just decoration: falling TACOS is
   good news and used to be painted the same orange as rising margin */
.hero-panel .d {
  font-size:var(--t-xs); font-weight:800; letter-spacing:.01em;
  display:flex; align-items:baseline; gap:5px; flex-wrap:wrap;
}
.hero-panel .d small { font-weight:600; color:#93aacb; letter-spacing:.02em; }
.hero-panel .is-good { color:#5ee9b5; }
.hero-panel .is-bad  { color:#ff9a8f; }
.hero-panel .is-flat { color:#9fb4d2; font-weight:700; }

.hp-chart { width:100%; height:clamp(78px, 9vw, 104px); display:block;
  --hc-accent:#fe9a3d; overflow:visible; }
.hp-grid line { stroke:rgba(255,255,255,.10); stroke-width:1; }
.hp-line { fill:none; stroke:var(--hc-accent); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 2px 10px rgba(254,154,61,.5)); }
.hp-dot  { fill:#fff; }
.hp-halo { fill:var(--hc-accent); opacity:.32; animation:hp-pulse 2.4s var(--ease) infinite; }
@keyframes hp-pulse { 0%,100% { opacity:.3; r:7; } 50% { opacity:.08; r:11; } }

.hero-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.hero-tile {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md); padding:11px 12px; min-width:0;
}
.hero-tile .t { font-size:var(--t-xs); color:#9fb4d2; letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-tile .v { font-size:var(--t-lg); font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums; margin:2px 0 3px; }

.hp-foot {
  margin:var(--s-5) 0 0; padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--t-xs); line-height:1.5; color:#93aacb;
}
.hp-name { display:flex; align-items:center; gap:7px; color:#dbe6f5; font-weight:700; }
.hp-src { color:#8aa2c4; text-transform:none; letter-spacing:.01em; }
/* the panel says LIVE; something on it should actually move */
.hp-live { width:7px; height:7px; border-radius:50%; background:#5ee9b5; flex:none;
  box-shadow:0 0 0 0 rgba(94,233,181,.55); animation:hp-live 2.2s var(--ease) infinite; }
@keyframes hp-live {
  0%   { box-shadow:0 0 0 0 rgba(94,233,181,.5); }
  70%  { box-shadow:0 0 0 7px rgba(94,233,181,0); }
  100% { box-shadow:0 0 0 0 rgba(94,233,181,0); }
}
@media (prefers-reduced-motion:reduce) {
  .hp-live, .hp-halo { animation:none; }
}
/* Between the two-column breakpoint and ~1150px the panel is barely 400px
   wide, and the display-size number left the chart 120px to draw twelve months
   in — narrower than it is tall. It stacks there instead. */
@media (min-width:981px) and (max-width:1150px) {
  .hp-lead { grid-template-columns:minmax(0,1fr); align-items:stretch; }
}
@media (max-width:420px) {
  .hp-lead { grid-template-columns:minmax(0,1fr); }
  .hero-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-tiles > :last-child { grid-column:1 / -1; }
}

/* ==========================================================================
   playbook card
   ========================================================================== */
.pb-grid { display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 328px), 1fr)); }

.pb-card {
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
             border-color var(--base) linear;
}
.pb-card:hover { transform:translateY(-4px); box-shadow:var(--sh-3);
  border-color:var(--line-2); }
.pb-card:focus-within { box-shadow:var(--sh-3); }

.pb-art {
  position:relative; aspect-ratio:16/9;
  background:linear-gradient(150deg, var(--pb-accent, var(--navy-700)), var(--navy-900) 78%);
  display:grid; place-items:center; overflow:hidden;
}
.pb-art::before {
  content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(70% 100% at 88% 8%, rgba(255,255,255,.24), transparent 62%);
}
.pb-art .ico { font-size:clamp(2.4rem, 6vw, 3.4rem); filter:drop-shadow(0 6px 16px rgba(0,0,0,.4)); }
.pb-art .mk {
  position:absolute; left:14px; bottom:12px; z-index:1;
  font-size:var(--t-xs); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.86);
}
.pb-body { padding:var(--s-5); display:flex; flex-direction:column; flex:1; }
.pb-body h3 { font-size:var(--t-lg); }
.pb-body h3 a { color:inherit; }
.pb-body h3 a::after { content:""; position:absolute; inset:0; }  /* whole-card target */
.pb-tagline { color:var(--ink-2); font-size:var(--t-sm); margin-top:6px; }
.pb-meta {
  display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:var(--s-4);
  font-size:var(--t-xs); color:var(--ink-3); font-weight:600;
}
.pb-meta b { color:var(--ink); font-weight:800; }
.pb-foot {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  margin-top:auto; padding-top:var(--s-4);
  border-top:1px solid var(--line);
}
.pb-price .from { font-size:var(--t-xs); color:var(--ink-3); display:block; }
.pb-price .amt { font-size:var(--t-lg); font-weight:800; letter-spacing:-.02em; }
.pb-price .per { font-size:var(--t-xs); color:var(--ink-3); font-weight:600; }
.pb-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s-3); }

/* ==========================================================================
   filters
   ========================================================================== */
.filters { display:grid; gap:var(--s-5); grid-template-columns:250px minmax(0,1fr); }
@media (max-width: 900px) { .filters { grid-template-columns:1fr; } }
.filter-group + .filter-group { margin-top:var(--s-6); }
.filter-group h4 { font-size:var(--t-xs); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:var(--s-3); }
.filter-group label { display:flex; align-items:center; gap:9px; padding:5px 0;
  font-size:var(--t-sm); color:var(--ink-2); cursor:pointer; }
.filter-group input { accent-color:var(--brand); width:16px; height:16px; }
.filter-bar { display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center;
  margin-bottom:var(--s-5); }

/* ==========================================================================
   pricing
   ========================================================================== */
.price-grid { display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.price-card {
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-6);
  transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.price-card:hover { transform:translateY(-3px); box-shadow:var(--sh-2); }
.price-card.featured {
  border-color:var(--brand); box-shadow:var(--sh-3);
  background:linear-gradient(180deg, var(--orange-050), var(--surface) 30%);
}
:root[data-theme="dark"] .price-card.featured {
  background:linear-gradient(180deg, rgba(254,120,7,.10), var(--surface) 34%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .price-card.featured {
    background:linear-gradient(180deg, rgba(254,120,7,.10), var(--surface) 34%);
  }
}
.price-card .plan-name { font-size:var(--t-xs); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }
.price-card .amt {
  display:flex; align-items:baseline; gap:6px; margin-top:var(--s-3);
  font-size:clamp(2rem,1.5rem+1.6vw,2.8rem); font-weight:900; letter-spacing:-.035em;
}
.price-card .amt small { font-size:var(--t-sm); font-weight:600; color:var(--ink-3);
  letter-spacing:0; }
.price-card .mrp { font-size:var(--t-sm); color:var(--ink-3); text-decoration:line-through; }
.price-card ul { margin:var(--s-5) 0; display:grid; gap:10px; }
.price-card li { display:flex; gap:9px; font-size:var(--t-sm); color:var(--ink-2);
  align-items:flex-start; }
.price-card li::before { content:"✓"; color:var(--ok-500); font-weight:900; flex:none; }
.price-card .btn { margin-top:auto; }

/* ==========================================================================
   dashboard
   ========================================================================== */
.app-shell { display:grid; grid-template-columns:264px minmax(0,1fr); min-height:100dvh; }
@media (max-width: 1080px) { .app-shell { grid-template-columns:1fr; } }

.side {
  background:var(--surface); border-right:1px solid var(--line);
  padding:var(--s-5) var(--s-4); position:sticky; top:var(--header-h);
  height:calc(100dvh - var(--header-h)); overflow-y:auto;
}
@media (max-width: 1080px) { .side { display:none; } }
.side-group + .side-group { margin-top:var(--s-6); }
.side-group h5 { font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:0 12px; margin-bottom:8px; }
.side a {
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:var(--r-sm);
  font-size:var(--t-sm); font-weight:600; color:var(--ink-2);
}
.side a:hover { background:var(--surface-3); color:var(--ink); text-decoration:none; }
.side a.active { background:var(--brand-wash); color:var(--brand-ink); }
.side a .ic { width:20px; text-align:center; flex:none; }

.main-pad { padding:var(--s-7) var(--gutter) var(--s-11); min-width:0; }

.kpi-row { display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.kpi {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s-5);
}
.kpi .t { font-size:var(--t-xs); color:var(--ink-3); font-weight:650;
  letter-spacing:.05em; text-transform:uppercase; }
.kpi .v { font-size:var(--t-2xl); font-weight:900; letter-spacing:-.03em; margin-top:6px;
  font-variant-numeric:tabular-nums; }
.kpi .d { font-size:var(--t-xs); font-weight:700; margin-top:3px; }
.kpi .d.up { color:var(--ok-ink); } .kpi .d.down { color:var(--err-ink); }

/* A tile with no number yet: the next step towards having one. Dashed edge and
   no big figure so it reads as guidance, never as a score of zero. */
.kpi-next {
  display:block; text-decoration:none; color:inherit;
  border-style:dashed; transition:border-color .15s ease, background .15s ease;
}
.kpi-next:hover, .kpi-next:focus-visible {
  border-color:var(--brand); background:var(--brand-wash);
}
.kpi-next .nx {
  font-size:var(--t-md); font-weight:800; line-height:1.25; margin-top:6px;
}
.kpi-next:hover .nx { color:var(--brand-ink); }
.kpi-next .why { font-size:var(--t-xs); color:var(--ink-3); margin-top:6px; }

/* The cart is the second path, for someone taking several Playbooks. It stays
   available and stops competing with the button that buys this plan. */
.cart-link {
  display:block; width:100%; background:none; border:0; cursor:pointer;
  font:inherit; font-size:var(--t-sm); font-weight:650; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px; padding:4px 0;
}
.cart-link:hover, .cart-link:focus-visible { color:var(--brand-ink); }
.cart-link[disabled] { opacity:.6; cursor:default; text-decoration:none; }
.cart-link.is-in-cart {
  color:var(--ok-ink); text-decoration:none; cursor:default; opacity:1;
}

.mp-line { color:var(--ink-2); }
.mp-line a { font-weight:700; }

.resume-card {
  display:grid; gap:var(--s-5); align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  background:linear-gradient(120deg, var(--navy-800), var(--navy-600));
  color:#fff; border-radius:var(--r-lg); padding:var(--s-6);
  box-shadow:var(--sh-2);
}
@media (max-width: 700px) { .resume-card { grid-template-columns:1fr; } }
.resume-card h3 { color:#fff; }
.resume-card .lead { color:#c5d6ee; }
.resume-card .bar { background:rgba(255,255,255,.2); }

.streak {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:var(--r-full);
  background:linear-gradient(120deg,#ff7a18,#ff4d00); color:#fff;
  font-weight:800; font-size:var(--t-sm);
}

/* ==========================================================================
   learn view
   ========================================================================== */
.learn { display:grid; grid-template-columns:300px minmax(0,1fr) 320px;
  gap:0; min-height:calc(100dvh - var(--header-h)); }
@media (max-width: 1280px) { .learn { grid-template-columns:280px minmax(0,1fr); } }
@media (max-width: 980px)  { .learn { grid-template-columns:1fr; } }

.learn-nav {
  background:var(--surface); border-right:1px solid var(--line);
  position:sticky; top:var(--header-h); height:calc(100dvh - var(--header-h));
  overflow-y:auto; padding:var(--s-4);
}
@media (max-width: 980px) { .learn-nav { display:none; position:static; height:auto; } }
.learn-nav .mod { border-radius:var(--r-sm); overflow:hidden; margin-bottom:4px; }
.learn-nav .mod > button {
  display:flex; align-items:center; gap:9px; width:100%;
  padding:11px 12px; text-align:left;
  font-size:var(--t-sm); font-weight:700; color:var(--ink);
  border-radius:var(--r-sm);
}
.learn-nav .mod > button:hover { background:var(--surface-3); }
.learn-nav .mod > button .cnt { margin-left:auto; font-size:var(--t-xs);
  color:var(--ink-3); font-weight:600; }
.learn-nav .lessons { display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--base) var(--ease); }
.learn-nav .mod.open .lessons { grid-template-rows:1fr; }
.learn-nav .lessons > div { overflow:hidden; }
.learn-nav .lessons a {
  display:flex; gap:9px; align-items:flex-start;
  padding:8px 12px 8px 22px; font-size:var(--t-sm); color:var(--ink-2);
  border-radius:var(--r-sm); line-height:1.4;
}
.learn-nav .lessons a:hover { background:var(--surface-3); text-decoration:none; }
.learn-nav .lessons a.active { background:var(--brand-wash); color:var(--brand-ink);
  font-weight:650; }
.learn-nav .tick { flex:none; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--line-strong); margin-top:2px; }
.learn-nav .tick.done { background:var(--ok-500); border-color:var(--ok-500); }
.learn-nav .tick.lock { border-style:dashed; }

.learn-main { padding:var(--s-7) clamp(18px,3.5vw,44px) var(--s-11); min-width:0; }
.learn-aside {
  border-left:1px solid var(--line); background:var(--surface-2);
  padding:var(--s-5); position:sticky; top:var(--header-h);
  height:calc(100dvh - var(--header-h)); overflow-y:auto;
}
@media (max-width: 1280px) { .learn-aside { display:none; } }

/* lesson body — styles the imported legacy HTML */
.lesson-body { font-size:clamp(.97rem,.94rem+.2vw,1.06rem); line-height:1.72; color:var(--ink-2); }
.lesson-body > * + * { margin-top:var(--s-4); }
.lesson-body h3 { font-size:var(--t-xl); color:var(--ink); margin-top:var(--s-8); }
.lesson-body h4 { font-size:var(--t-lg); color:var(--ink); margin-top:var(--s-6); }
.lesson-body strong { color:var(--ink); font-weight:700; }
.lesson-body ul, .lesson-body ol { padding-left:1.35em; }
.lesson-body ul { list-style:disc; } .lesson-body ol { list-style:decimal; }
.lesson-body li + li { margin-top:8px; }
.lesson-body a { color:var(--link); text-decoration:underline; text-underline-offset:2px; }
.lesson-body table {
  width:100%; font-size:var(--t-sm); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden;
}
.lesson-body th, .lesson-body td { padding:10px 13px; border-bottom:1px solid var(--line);
  text-align:left; }
.lesson-body th { background:var(--surface-3); font-weight:700; color:var(--ink); }
.lesson-body .data-table { display:block; overflow-x:auto; white-space:nowrap; }
@media (min-width: 720px) { .lesson-body .data-table { white-space:normal; } }
.lesson-body img, .lesson-body svg { border-radius:var(--r-sm); }
.lesson-body .svg-wrapper { overflow-x:auto; padding:var(--s-4); background:var(--surface-2);
  border-radius:var(--r-md); border:1px solid var(--line); }
.lesson-body code { font-family:var(--font-mono); font-size:.9em;
  background:var(--surface-3); padding:2px 6px; border-radius:4px; }
.lesson-body blockquote { border-left:3px solid var(--brand); padding-left:var(--s-4);
  color:var(--ink-2); font-style:italic; }

/* legacy pain-point blocks */
.pain-point-section { border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; margin-block:var(--s-6); }
.pain-point-header { display:flex; align-items:center; gap:10px;
  padding:13px 18px; background:var(--surface-3); }
.pain-point-header h4 { margin:0; font-size:var(--t-md); }
.pain-point-body { display:grid; gap:var(--s-4); padding:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.pp-card { padding:var(--s-4); border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--line); font-size:var(--t-sm); }
.pp-card-label { font-size:var(--t-xs); font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; margin-bottom:7px; color:var(--ink-3); }
.pp-pain { border-left:3px solid var(--err-500); }
.pp-solution { border-left:3px solid var(--ok-500); }
.pp-insight { border-left:3px solid var(--brand); }
.bookmarks-inline { padding:var(--s-4); background:var(--surface-2);
  border-radius:var(--r-md); border:1px solid var(--line); font-size:var(--t-sm); }
.bookmarks-inline a { display:inline-block; margin:5px 6px 0 0; padding:6px 12px;
  border-radius:var(--r-full); background:var(--navy-800); color:#fff;
  font-size:var(--t-xs); font-weight:650; text-decoration:none; }

/* ==========================================================================
   video player
   ========================================================================== */
.player { position:relative; background:#000; border-radius:var(--r-md);
  overflow:hidden; aspect-ratio:16/9; }
.player video { width:100%; height:100%; object-fit:contain; background:#000; }
.player-chrome {
  position:absolute; inset:auto 0 0 0; z-index:4;
  padding:34px 14px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.82));
  transition:opacity var(--base) var(--ease);
}
.player.idle .player-chrome { opacity:0; pointer-events:none; }
.player-scrub { position:relative; height:16px; display:flex; align-items:center;
  cursor:pointer; }
.player-scrub .track { height:4px; width:100%; border-radius:2px;
  background:rgba(255,255,255,.28); overflow:hidden; }
.player-scrub .fill { height:100%; background:var(--brand); width:0; }
.player-scrub .buf { position:absolute; height:4px; background:rgba(255,255,255,.42);
  border-radius:2px; }
.player-btns { display:flex; align-items:center; gap:6px; margin-top:6px; color:#fff; }
.player-btns button { color:#fff; width:38px; height:38px; border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:15px; }
.player-btns button:hover { background:rgba(255,255,255,.16); }
.player-time { font-size:var(--t-xs); font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.9); margin-inline:6px; }
.player-center {
  position:absolute; inset:0; display:grid; place-items:center; z-index:3;
}
.player-center button {
  width:72px; height:72px; border-radius:50%; background:rgba(0,0,0,.55);
  color:#fff; font-size:26px; backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
}
.player-poster { position:absolute; inset:0; z-index:2; object-fit:cover; width:100%;
  height:100%; }

/* ==========================================================================
   quiz
   ========================================================================== */
.quiz-q { border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s-5); background:var(--surface); }
.quiz-q + .quiz-q { margin-top:var(--s-4); }
.quiz-q h4 { font-size:var(--t-md); margin-bottom:var(--s-4); }
.quiz-opt {
  display:flex; align-items:flex-start; gap:11px; padding:12px 14px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  cursor:pointer; font-size:var(--t-sm); transition:border-color var(--fast) linear,
  background var(--fast) linear;
}
.quiz-opt + .quiz-opt { margin-top:9px; }
.quiz-opt:hover { border-color:var(--line-strong); background:var(--surface-2); }
.quiz-opt input { accent-color:var(--brand); margin-top:2px; flex:none; }
.quiz-opt.correct { border-color:var(--ok-500); background:var(--ok-bg); }
.quiz-opt.wrong { border-color:var(--err-500); background:var(--err-bg); }
.quiz-explain { margin-top:11px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--surface-2); font-size:var(--t-sm); color:var(--ink-2);
  border-left:3px solid var(--info-500); }

/* ==========================================================================
   AI mentor
   ========================================================================== */
.mentor { display:flex; flex-direction:column; height:100%; min-height:0; }
.mentor-log { flex:1; overflow-y:auto; display:flex; flex-direction:column;
  gap:var(--s-3); padding-right:4px; }
.msg { max-width:92%; padding:11px 14px; border-radius:var(--r-md);
  font-size:var(--t-sm); line-height:1.6; }
.msg.user { align-self:flex-end; background:var(--navy-800); color:#fff;
  border-bottom-right-radius:4px; }
.msg.ai { align-self:flex-start; background:var(--surface); border:1px solid var(--line);
  border-bottom-left-radius:4px; }
.msg.ai p + p { margin-top:9px; }
.mentor-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--s-3); }
.mentor-chips button { font-size:var(--t-xs); padding:6px 11px; border-radius:var(--r-full);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); }
.mentor-chips button:hover { border-color:var(--brand); color:var(--brand-ink); }
.mentor-form { display:flex; gap:8px; margin-top:var(--s-4); }
.typing { display:inline-flex; gap:4px; }
.typing i { width:6px; height:6px; border-radius:50%; background:var(--ink-3);
  animation:blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay:.2s; }
.typing i:nth-child(3) { animation-delay:.4s; }
@keyframes blink { 0%,60%,100% { opacity:.25; } 30% { opacity:1; } }

/* ==========================================================================
   certificate
   ========================================================================== */
.cert {
  position:relative; aspect-ratio:1.414/1; width:100%;
  background:linear-gradient(150deg,#fff,#f4f7fb);
  border:12px solid var(--navy-800); border-radius:var(--r-sm);
  padding:clamp(20px,4vw,48px); color:var(--navy-900);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  box-shadow:var(--sh-3);
}
.cert::after {
  content:""; position:absolute; inset:10px; border:2px solid var(--orange-400);
  border-radius:3px; pointer-events:none; opacity:.55;
}
.cert h2 { color:var(--navy-800); font-size:clamp(1.3rem,3.4vw,2.3rem); }
.cert .who { font-size:clamp(1.4rem,4vw,2.6rem); font-weight:900;
  color:var(--navy-900); margin:.4em 0; letter-spacing:-.02em; }
.cert .cid { font-family:var(--font-mono); font-size:var(--t-xs); color:#456; }

/* ==========================================================================
   exit intent / banners
   ========================================================================== */
.banner {
  display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap;
  padding:var(--s-5) var(--s-6); border-radius:var(--r-lg);
  background:linear-gradient(120deg, var(--navy-800), var(--navy-600));
  color:#fff;
}
.banner h3 { color:#fff; }
.banner p { color:#c5d6ee; font-size:var(--t-sm); }

.paywall {
  position:relative; margin-top:calc(var(--s-8) * -1); padding-top:var(--s-9);
  background:linear-gradient(transparent, var(--bg) 34%);
}
.paywall-card { text-align:center; max-width:560px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-8) var(--s-6); box-shadow:var(--sh-2); }

/* ==========================================================================
   breadcrumbs
   ========================================================================== */
.crumbs { display:flex; flex-wrap:wrap; gap:7px; align-items:center;
  font-size:var(--t-xs); color:var(--ink-3); margin-bottom:var(--s-4); }
.crumbs a { color:var(--ink-3); }
.crumbs a:hover { color:var(--brand-ink); }
.crumbs li { display:flex; align-items:center; gap:7px; }
.crumbs li + li::before { content:"›"; color:var(--line-strong); }

/* ==========================================================================
   tabs
   ========================================================================== */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button {
  padding:11px 16px; font-size:var(--t-sm); font-weight:650; color:var(--ink-3);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.tabs button:hover { color:var(--ink); }
.tabs button.active { color:var(--brand-ink); border-bottom-color:var(--brand); }

/* ==========================================================================
   mobile bottom bar (app feel)
   ========================================================================== */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:none; grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a {
  display:grid; place-items:center; gap:3px; padding:9px 4px 7px;
  font-size:10px; font-weight:650; color:var(--ink-3);
}
.tabbar a .ic { font-size:18px; }
.tabbar a.active { color:var(--brand-ink); }
@media (max-width: 980px) {
  .tabbar { display:grid; }
  body.has-tabbar { padding-bottom:64px; }
}

/* ==========================================================================
   imported diagram SVGs
   The legacy lesson HTML ships inline <svg> using these class names. Without
   them the boxes lose their fill and the labels stack as plain black text.
   The fills are FIXED hex, not tokens: a themed fill flips to a light colour
   in dark mode and the white label inside disappears.
   ========================================================================== */
.svg-wrapper {
  position: relative; overflow-x: auto; margin-block: var(--s-6);
  padding: 26px 18px 18px; min-height: 96px;
  display: flex; justify-content: center; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.svg-wrapper > svg { width: 100%; height: auto; min-width: 620px; }
.svg-wrapper::before {
  content: 'Process flow'; position: absolute; top: 8px; left: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.flow-step { fill: #1e3a5f; }
.flow-text {
  fill: #fff; font-family: var(--font); font-size: 13px; font-weight: 500;
  text-anchor: middle; dominant-baseline: middle;
}
.svg-watermark { display: none; }

/* outcome / audience lists on the playbook page */
.check-list { display: grid; gap: 12px; }
.check-list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: var(--t-md); color: var(--ink-2);
}
.check-list li::before {
  content: "✓"; flex: none; width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok-ink);
  font-size: 12px; font-weight: 900;
}



/* ==========================================================================
   imported process-flow blocks
   The lesson HTML carried over from the playbooks uses two different shapes:
   the newer .proc-flow markup and, on 13 older lessons, an inline <svg>.
   Both need their classes here or the diagram degrades to a list of words.
   `--pf-accent` is set inline per pillar by the source HTML; the fallback
   keeps it brand-coloured when it is not.
   ========================================================================== */
.proc-flow {
  --pf-accent: var(--brand);
  margin: var(--s-6) 0; padding: 20px 22px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 0% 0%,
      color-mix(in srgb, var(--pf-accent) 9%, transparent) 0%, transparent 60%),
    var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.pf-head {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  /* 11px uppercase needs 4.5:1; the accent at full strength gives 2.66
     on the light card. Darkened here, lifted again for dark below. */
  letter-spacing: .1em; color: color-mix(in srgb, var(--pf-accent) 72%, #000);
}
[data-theme="dark"] .pf-head {
  color: color-mix(in srgb, var(--pf-accent) 62%, #fff);
}
.pf-track { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px 30px; }
.pf-step {
  position: relative; flex: 1 1 130px; min-width: 122px;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  animation: pfIn .45s var(--ease-out) backwards;
}
.pf-step:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.pf-step:nth-child(2) { animation-delay: .06s; }
.pf-step:nth-child(3) { animation-delay: .12s; }
.pf-step:nth-child(4) { animation-delay: .18s; }
.pf-step:nth-child(5) { animation-delay: .24s; }
.pf-step:nth-child(6) { animation-delay: .30s; }
@keyframes pfIn { from { opacity: 0; transform: translateY(8px); } }
.pf-dot {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px; line-height: 1;
  color: #fff;
  /* the raw accent is too light behind white 13px text (2.66:1). Darkening the
     mix keeps any pillar accent legible without hard-coding a colour. */
  background: color-mix(in srgb, var(--pf-accent) 50%, #000);
  box-shadow: 0 3px 9px -3px var(--pf-accent);
}
.pf-label { font-weight: 600; font-size: 13.25px; line-height: 1.32; color: var(--ink); }
.pf-step:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; right: -20px;
  width: 9px; height: 9px;
  border-top: 2.5px solid var(--pf-accent);
  border-right: 2.5px solid var(--pf-accent);
  transform: translateY(-50%) rotate(45deg); opacity: .65;
}
.pf-goal {
  /* same reason: white label on the undiluted accent fails contrast */
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--pf-accent) 50%, #000),
              color-mix(in srgb, var(--pf-accent) 36%, #000));
  border-color: transparent;
}
.pf-goal .pf-label { color: #fff; font-weight: 700; }
.pf-goal .pf-dot { background: rgba(255,255,255,.24); color: #fff;
  box-shadow: none; font-size: 14px; }

@media (max-width: 620px) {
  .proc-flow { padding: 16px; }
  .pf-track { flex-direction: column; gap: 26px; }
  .pf-step { flex: 1 1 auto; width: 100%; min-width: 0; }
  .pf-step:not(:last-child)::after {
    top: auto; bottom: -19px; right: auto; left: 24px;
    transform: rotate(135deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pf-step { animation: none; }
  .pf-step:hover { transform: none; }
}

/* ==========================================================================
   two-column splits
   A fixed side column must collapse before it can push the page wider than
   the viewport — this is what caused horizontal scroll on the tool pages.
   ========================================================================== */
.split {
  display: grid; gap: var(--s-7); align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split-side-left  { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .split-side-right { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .split-2-1        { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
                      gap: var(--s-8); }
}

/* ==========================================================================
   chapters + scrubber marks
   ========================================================================== */
.chapters { display: grid; padding: 0 8px 10px; }
.chapters button {
  display: flex; gap: 12px; align-items: baseline; width: 100%;
  padding: 9px 12px; border-radius: var(--r-sm); text-align: left;
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4;
}
.chapters button:hover { background: var(--surface-3); color: var(--ink); }
.chapters button.active {
  background: var(--brand-wash); color: var(--brand-ink); font-weight: 650;
}
.chapters .ch-t {
  flex: none; width: 46px; font-variant-numeric: tabular-nums;
  font-size: var(--t-xs); color: var(--ink-3); font-weight: 650;
}
.chapters button.active .ch-t { color: var(--brand-ink); }
.chapters .ch-l { flex: 1; min-width: 0; }

.player-scrub .marks { position: absolute; inset: 0; pointer-events: none; }
.player-scrub .marks i {
  position: absolute; top: 50%; width: 2px; height: 9px;
  transform: translateY(-50%); background: rgba(255, 255, 255, .65);
  border-radius: 1px;
}
.player-btns [data-cc] { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
video::cue { font-size: .92em; background: rgba(0, 0, 0, .74); line-height: 1.4; }

/* ==========================================================================
   rotating playbook banner
   Every slide is in the DOM as a real link; the script only changes which one
   is shown, so it degrades to a stack of playbook links without JavaScript.
   ========================================================================== */
.pb-banner {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 460px at 88% -10%,
      color-mix(in srgb, var(--pb-accent, #fe7807) 26%, transparent), transparent 62%),
    linear-gradient(150deg, var(--navy-900), var(--navy-800) 58%, #06214f);
  color: #fff;
  padding-block: clamp(30px, 4vw, 54px) clamp(66px, 6.5vw, 84px);
  transition: background var(--slow) var(--ease);
}
.pbn-track { position: relative; list-style: none; margin: 0; padding: 0; }
.pbn-slide {
  display: grid; gap: clamp(22px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
}
/* stacked, so the container keeps the tallest slide's height and nothing jumps */
.pbn-slide + .pbn-slide { position: absolute; inset: 0; }
.pbn-slide:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; }
.pbn-slide.is-active {
  opacity: 1; visibility: visible;
  animation: pbn-in .5s var(--ease-out);
}
@keyframes pbn-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 900px) { .pbn-slide { grid-template-columns: 1fr; } }

.pb-banner h2 { color: #fff; font-size: var(--t-3xl); }
.pb-banner h2 a { color: inherit; }
.pb-banner h2 a:hover { text-decoration: none; color: var(--orange-300); }
.pb-banner .lead { color: #c5d6ee; max-width: 52ch; }
.pb-banner .eyebrow { color: var(--orange-300); }
.pb-banner .chip {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18);
  color: #dbe6f5;
}
.pb-banner .chip-ok { background: rgba(15, 157, 88, .2); border-color: transparent;
  color: #7ee2b0; }
.pb-banner .chip-brand { background: rgba(254, 120, 7, .2); border-color: transparent;
  color: #ffc08c; }
.pb-banner .btn-ghost { --btn-line: rgba(255,255,255,.34); --btn-ink: #fff; }
.pb-banner .btn-ghost:hover { --btn-bg: rgba(255,255,255,.1); }

/* the same divided stat band as the hero, so the two sections read as one
   system rather than two designs that happen to be stacked */
.pbn-meta {
  display: flex; flex-wrap: wrap; margin-top: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .13);
}
/* same column-reverse as the hero band: a two-word label wraps downward
   instead of shoving its own number out of line with its neighbours */
.pbn-meta > div {
  padding-inline: var(--s-5); min-width: 0;
  display: flex; flex-direction: column-reverse; justify-content: flex-end;
}
.pbn-meta > div:first-child { padding-left: 0; }
.pbn-meta > div + div { border-left: 1px solid rgba(255, 255, 255, .12); }
.pbn-meta b {
  display: block; color: #fff; font-weight: 900; font-size: var(--t-xl);
  letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.pbn-meta span {
  display: block; margin-top: 4px; font-size: var(--t-xs); color: #9db3d2;
  letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
}
.pbn-owned b { color: #7ee2b0; }
/* on a phone the fourth stat wrapped onto its own line and kept the divider
   rule that only makes sense between two stats on the same line */
@media (max-width: 560px) {
  .pbn-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--s-5); }
  .pbn-meta > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
.pbn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-5); }
.pbn-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.pbn-art {
  position: relative; aspect-ratio: 16/9; border-radius: var(--r-xl);
  overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--pb-accent, #14427f), var(--navy-900) 78%);
  border: 1px solid rgba(255, 255, 255, .14);
  /* the art was a flat rounded rectangle on a flat panel; an accent-tinted
     spill under it ties the image to the Playbook whose colour it carries */
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5),
              0 0 90px -30px color-mix(in srgb, var(--pb-accent, #14427f) 70%, transparent);
}
/* a soft top-light inside the frame, so the image reads as lit, not pasted */
.pbn-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(80% 62% at 50% -14%, rgba(255, 255, 255, .18), transparent 66%);
}
.pbn-art img { width: 100%; height: 100%; object-fit: cover; }
.pbn-ico { display: none; font-size: clamp(3rem, 8vw, 5rem);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)); }
.pbn-art-fallback .pbn-ico { display: block; }

/* The controls used to float, unattached, in dead space at the bottom of the
   section: four 34px targets adrift with nothing around them. They are now one
   grouped pill on a surface, thumb-sized, sitting inside the content column. */
.pbn-nav {
  position: absolute; left: 0; right: 0; bottom: clamp(14px, 2.2vw, 24px);
  display: flex; justify-content: center;
  padding-inline: var(--gutter); z-index: 2;
}
.pbn-ctrl {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  justify-content: center; padding: 5px 8px; border-radius: 999px;
  background: rgba(8, 20, 42, .62);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.pbn-arrow, .pbn-play {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; padding: 0;
  background: transparent; color: #dbe6f5; border: 0;
  transition: background var(--base) var(--ease), color var(--base) var(--ease);
}
.pbn-arrow svg, .pbn-play svg { width: 17px; height: 17px; }
.pbn-arrow svg { fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.pbn-play svg { fill: currentColor; }
.pbn-play .i-play { display: none; }
.pbn-play[aria-pressed="true"] .i-pause { display: none; }
.pbn-play[aria-pressed="true"] .i-play { display: block; }
.pbn-arrow:hover, .pbn-play:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.pbn-arrow:focus-visible, .pbn-play:focus-visible,
.pbn-dots button:focus-visible { outline: 2px solid var(--orange-300); outline-offset: 2px; }
.pbn-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .2); margin: 0 3px; }

.pbn-dots { display: flex; gap: 5px; align-items: center; padding-inline: 4px; }
.pbn-dots button {
  width: 22px; height: 30px; display: grid; place-items: center; padding: 0;
  background: none; border: 0;
}
.pbn-dots i {
  display: block; width: 100%; height: 4px; border-radius: 3px;
  background: rgba(255, 255, 255, .28);
  transition: background var(--base) var(--ease), transform var(--base) var(--ease);
}
.pbn-dots button[aria-selected="true"] i {
  background: var(--orange-400); transform: scaleY(1.5);
}
.pbn-dots button:hover i { background: rgba(255, 255, 255, .65); }
@media (max-width: 460px) {
  /* nine dots plus four buttons will not fit a phone; the dots go and the
     arrows carry the navigation, with the progress hairline showing position */
  .pbn-dots { display: none; }
}

/* progress hairline showing time to the next slide */
.pb-banner::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px;
  width: var(--pbn-progress, 0%); background: var(--orange-400);
  transition: width .25s linear; pointer-events: none;
}
.pb-banner.is-paused::after { background: rgba(255, 255, 255, .3); }

@media (prefers-reduced-motion: reduce) {
  .pbn-slide.is-active { animation: none; }
  .pb-banner::after { display: none; }
}
/* without JS every slide simply stacks as a normal linked block */
.no-js .pbn-slide + .pbn-slide { position: static; }
.no-js .pbn-slide:not(.is-active) { opacity: 1; visibility: visible; pointer-events: auto; }
.no-js .pbn-nav { display: none; }

/* generated key art sits behind the card's emoji fallback */
.pb-art img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.pb-art .ico { display: none; position: relative; z-index: 1; }
.pb-art-fallback .ico { display: block; }
.pb-art .mk { z-index: 2; }

/* ==========================================================================
   Master Pass — the single-payment offer
   ========================================================================== */
.master-pass {
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 320px);
  align-items: center;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--r-xl);
  background-color: var(--navy-800);   /* real fallback; see .btn-primary */
  background-image:
    radial-gradient(680px 320px at 92% 0%, rgba(254,120,7,.24), transparent 62%),
    linear-gradient(140deg, var(--navy-800), var(--navy-600));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: var(--sh-3);
}
/* minmax(0, 1fr), not 1fr: a bare `1fr` is `minmax(auto, 1fr)` and that auto
   floor is the content's min-content width, which held the single column at
   320px inside a 269px box and pushed the page sideways on a 360px phone. */
@media (max-width: 820px) {
  .master-pass { grid-template-columns: minmax(0, 1fr); }
}
.master-pass > * { min-width: 0; }
.master-pass h3 { color: #fff; font-size: var(--t-2xl); }
.master-pass p { color: #c5d6ee; font-size: var(--t-sm); max-width: 58ch; }
.master-pass .eyebrow { color: var(--orange-300); }
.mp-benefits { display: grid; gap: 9px; }
.mp-benefits li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: var(--t-sm); color: #dbe6f5;
}
.mp-benefits li::before { content: "✓"; color: #7ee2b0; font-weight: 900; flex: none; }
.mp-buy {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg); padding: var(--s-6); text-align: center;
  backdrop-filter: blur(8px);
}
.mp-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.mp-amt { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.7rem); font-weight: 900;
  letter-spacing: -.035em; }
.mp-per { font-size: var(--t-sm); color: #9fb4d2; font-weight: 600; }
.mp-strike { display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 6px; font-size: var(--t-sm); color: #9fb4d2; }
.mp-strike s { opacity: .8; }

/* ==========================================================================
   per-Playbook landing page
   ========================================================================== */
.lp-hero {
  position: relative; overflow: hidden; color: #fff;
  padding-block: clamp(44px, 6vw, 88px);
  background-color: var(--navy-700);   /* real fallback; see .btn-primary */
  background-image:
    radial-gradient(900px 460px at 84% -10%,
      color-mix(in srgb, var(--pb-accent, #fe7807) 30%, transparent), transparent 62%),
    linear-gradient(155deg, var(--navy-900), var(--navy-800) 56%, #06214f);
}
.lp-hero h1 { color: #fff; font-size: var(--t-4xl); }
.lp-hero .lead { color: #c5d6ee; max-width: 54ch; }
.lp-hero .eyebrow { color: var(--orange-300); }
.lp-hero .btn-ghost { --btn-line: rgba(255,255,255,.34); --btn-ink: #fff; }
.lp-hero .btn-ghost:hover { --btn-bg: rgba(255,255,255,.1); }
.lp-grid {
  display: grid; gap: clamp(26px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center;
}
@media (max-width: 900px) { .lp-grid { grid-template-columns: 1fr; } }
.lp-art {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
  aspect-ratio: 16/9;
}
.lp-art img { width: 100%; height: 100%; object-fit: cover; }

/* the Playbook film, in the landing and Playbook-page heroes */
.lp-film {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #060e1e; aspect-ratio: 16/9;
}
.lp-art { position: relative; }
.lp-film-badge {
  position: absolute; left: 14px; bottom: 14px; pointer-events: none;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(4, 25, 71, .78); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  backdrop-filter: blur(6px);
}



/* ===========================================================================
   AI tool cards
   ---------------------------------------------------------------------------
   The tools used to be an emoji, a name and a blurb, in a catalogue where
   every other card leads with a picture. They now carry the same three parts a
   Playbook card does — art, promise, provenance — so the two catalogues read
   as one product.

   The art is a dark neon render on #0A1628. It sits on its own dark plate in
   BOTH themes rather than inheriting the card surface, because a dark image
   fading into a white card looks like a rendering fault; a dark image on a
   deliberate dark plate looks like a frame.
   =========================================================================== */
.tool-card { display:flex; flex-direction:column; overflow:hidden; }
.tool-card-link {
  display:flex; flex-direction:column; flex:1;
  color:inherit; text-decoration:none;
}
.tool-card-link:hover .tool-name { color:var(--brand-ink); }

.tool-art {
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(155deg, #10233d, #0a1628 76%);
  display:grid; place-items:center;
}
.tool-art img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* the emoji is the fallback, not a badge: it only shows when there is no art */
.tool-art-icon { display:none; font-size:clamp(2rem, 5vw, 2.8rem);
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.tool-art-plain .tool-art-icon { display:block; }

.tool-body { padding:var(--s-5); display:flex; flex-direction:column; flex:1; }
.tool-name { font-size:var(--t-lg); transition:color var(--pbt, .18s) ease; }

/* the sentence that says what the tool does FOR you, as opposed to what it
   measures — set apart from the blurb so a scanning eye lands on it */
.tool-helps {
  margin-top:var(--s-4); padding-left:var(--s-4);
  border-left:3px solid var(--brand);
  font-size:var(--t-sm); line-height:1.55; color:var(--ink-1); font-weight:600;
}
.tool-helps-lg { margin-top:var(--s-5); font-size:var(--t-base); max-width:56ch; }

.tool-foot { padding:0 var(--s-5) var(--s-5); margin-top:auto; }
.tool-in {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:var(--t-xs); margin:0;
}
.tool-in-label {
  color:var(--ink-3); font-weight:800; letter-spacing:.06em;
  text-transform:uppercase;
}
.pb-chip {
  display:inline-block; padding:3px 10px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-2); font-weight:700; font-size:var(--t-xs);
  text-decoration:none; line-height:1.5;
}
.pb-chip:hover { border-color:var(--brand); color:var(--brand-ink);
  background:var(--brand-wash); }

/* homepage strip: the four-across teaser, art plus one line */
.tool-card-sm .tool-body { padding:var(--s-4) var(--s-5) var(--s-5); }
.tool-card-sm .tool-name { font-size:var(--t-base); }
.tool-card-sm .tool-helps {
  margin-top:10px; border-left-width:2px; padding-left:12px;
  font-size:var(--t-xs); font-weight:500; color:var(--ink-2);
}
.tool-card-sm .tool-in { margin-top:var(--s-4); }

/* tool detail hero: copy left, art right, stacked under 860px */
.tool-hero { display:grid; gap:var(--s-7); align-items:center; }
.tool-hero-art {
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:#0a1628; aspect-ratio:16/9;
}
.tool-hero-art img { width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:860px) {
  .tool-hero { grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); }
}

/* In the card grid the label shares a flex line with the first chip, so a
   three-Playbook tool reads "IN [chip] / [chip] / [chip]" with a ragged first
   row. Giving the label its own line costs ~18px and makes the group a block. */
.tool-foot .tool-in-label { flex:0 0 100%; margin-bottom:2px; }
/* the detail hero: the chips were sitting on the promise line */
.tool-hero .tool-in { margin-top:var(--s-5); }


/* an inert chip (inside an already-linked card) must not offer a hover it
   cannot honour */
span.pb-chip { cursor:inherit; }




/* ==========================================================================
   FAQ list and the pre-footer band
   Five collapsed questions used to occupy a full section — a 90px card each,
   one line of text inside, 22px apart, in a narrow centred column. A list of
   questions is a list: hairline rows, and the heading and closing CTA move
   beside it so the page ends with one band instead of three.
   ========================================================================== */
.faq-list { min-width: 0; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  /* both properties are needed: Safari uses the -webkit marker pseudo, the
     rest honour list-style on the summary itself */
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5); padding: 15px 0;
  font-weight: 700; font-size: var(--t-sm); line-height: 1.45;
  color: var(--ink); transition: color var(--base) var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: 5px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform var(--base) var(--ease), border-color var(--base) var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(225deg); }
.faq-item > summary:hover,
.faq-item[open] > summary { color: var(--brand-ink); }
.faq-item > summary:hover::after,
.faq-item[open] > summary::after { border-color: var(--brand); }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px;
}
.faq-item > p {
  margin: 0 0 16px; padding-right: 28px; max-width: 70ch;
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .faq-item > summary::after { transition: none; }
}

.prefoot { background: var(--bg-alt); padding-block: clamp(38px, 4.6vw, 68px); }
.prefoot-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) {
  .prefoot-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}
.prefoot-aside { min-width: 0; }
.faq-more {
  display: inline-block; margin-top: var(--s-5);
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand-ink);
}
.prefoot-cta {
  margin-top: var(--s-7); padding: var(--s-6);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
}
.prefoot-cta h3 { font-size: var(--t-lg); }

/* The footer carries a 96px top margin so it is not flush against ordinary
   page content. A full-bleed band that runs to the page edges already does
   that job with its own padding and its own background, so on a page ending
   in one the margin is just 96px of body colour between two dark surfaces. */
main:has(> .prefoot:last-child) + .site-footer { margin-top: 0; }

/* ---------------------------------------------------------------- tool gate
   Every ai_tools row is access='subscriber'. The card shows that before the
   click rather than after it, and the tool page replaces the form with the
   ways in instead of rendering a calculator that the API will refuse. */
.tool-lock {
  display: inline-flex; vertical-align: baseline; margin-right: 7px;
  color: var(--ink-3);
}
.tool-card-link:hover .tool-lock { color: var(--brand-ink); }

.tool-unlock { text-align: center; max-width: 62ch; margin-inline: auto; }
.tool-unlock-ico {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--brand-wash); color: var(--brand-ink);
  margin-bottom: var(--s-4);
}
.tool-unlock-ico svg { width: 20px; height: 20px; }
.tool-unlock h2 { font-size: var(--t-2xl); }
.tool-unlock-ways {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.tool-unlock-ways a {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-1);
  text-decoration: none;
}
.tool-unlock-ways a:hover { border-color: var(--brand); color: var(--brand-ink);
  background: var(--brand-wash); }
.tool-unlock-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center; }
.tool-inapp {
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--ok-bg); color: var(--ok-ink);
  font-size: var(--t-sm); font-weight: 600;
}
.tool-inapp a { color: inherit; text-decoration: underline; font-weight: 800; }

/* a locked calculator in the hub still reads as a card, just visibly shut */
.hub-tool.is-locked { opacity: .78; }
.hub-tool.is-locked:hover { opacity: 1; }
.hub-tool .tool-lock { margin-right: 5px; }

/* --------------------------------------------------------- seek gesture fx
   The +-10s buttons came off the bar; double-tapping either half of the
   picture seeks instead. The gesture is invisible without feedback, so each
   half flashes what it did. */
.player-seekfx {
  position: absolute; top: 50%; left: 8%; transform: translateY(-50%);
  z-index: 4; pointer-events: none; opacity: 0;
  padding: 12px 18px; border-radius: 999px;
  background: rgba(4, 12, 28, .72); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: .02em;
  backdrop-filter: blur(6px);
}
.player-seekfx-r { left: auto; right: 8%; }
.player-seekfx.is-on { animation: seekfx .48s ease-out; }
@keyframes seekfx {
  0%   { opacity: 0; transform: translateY(-50%) scale(.86); }
  30%  { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .player-seekfx.is-on { animation: none; }
}

/* ==========================================================================
   Site Master chrome — the announcement bar, footer social row and the
   feedback CTA. All three are operator-controlled and off/empty by default,
   so none of them costs anything on a page that has not configured them.
   ========================================================================== */
.ann { font-size: 13.5px; font-weight: 600; }
.ann-in {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 9px 0; position: relative;
}
.ann-info  { background: var(--navy-800); color: #e8eefa; }
.ann-brand { background: var(--orange-btn, #c25200); color: #fff; }
.ann-warn  { background: #8a5a00; color: #fff; }
.ann a.ann-cta {
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  font-weight: 750; white-space: nowrap;
}
.ann .ann-x {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 6px 8px; border-radius: 6px;
  opacity: .75;
}
.ann .ann-x:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.ann .ann-x:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.footer-social .soc {
  display: inline-flex; align-items: center; padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  font-size: 12.5px; font-weight: 650; color: #cfe0f2; text-decoration: none;
}
.footer-social .soc:hover { background: rgba(255, 255, 255, .09); color: #fff; }

.footer-fb { margin-top: 18px; }
.footer-fbcta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #eaf2fb; font-weight: 700; font-size: 13px; text-decoration: none;
}
.footer-fbcta:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.footer-fbcta:focus-visible { outline: 2px solid var(--orange-400); outline-offset: 2px; }

/* ------------------------------------------------------- Feedback Master
   One question first; the rest opens once there is something to send. */
.fb-form { max-width: 640px; }
.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fb-more { margin-top: 18px; display: grid; gap: 16px; }
.fb-rate { border: 0; padding: 0; margin: 0; }
.fb-rate legend { font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.fb-stars { display: inline-flex; gap: 4px; vertical-align: middle; }
.fb-star {
  background: none; border: 0; cursor: pointer; font-size: 26px; line-height: 1;
  padding: 2px 3px; border-radius: 6px;
  /* An unselected star still has to be perceivable: --line-2 measured 1.5:1,
     which is a shape you cannot see. Measured against the real page ground
     (#f6f8fb, not white) this is 3.16:1 — clears the floor for a UI component
     without shouting louder than the selected ones. */
  color: #7f8da5;
}
/* #e8a33d measured 2.16:1 on white — under the 3:1 floor for a control this
   size. #b8770f is 3.69:1 and still reads as gold rather than brown. */
.fb-star.on { color: #b8770f; }
.fb-star:hover { color: #b8770f; }
.fb-star:focus-visible { outline: 2px solid var(--orange-400); outline-offset: 1px; }
.fb-ratetext { margin-left: 10px; }
.fb-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
/* The honeypot must be unreachable by a person: off-screen, not display:none,
   because some bots skip fields that are explicitly hidden. */
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-done { padding: 28px 0; }
@media (max-width: 700px) { .fb-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- bookmarks list */
.bm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.bm-row{display:flex;align-items:center;gap:14px;
    padding:14px 16px;border:1px solid var(--line,rgba(0,0,0,.10));
    border-radius:12px;background:var(--surface,#fff);}
.bm-row:hover{border-color:rgba(254,120,7,.45);}
.bm-link{flex:1;display:flex;flex-direction:column;gap:3px;text-decoration:none;min-width:0;}
.bm-title{font-weight:700;color:var(--ink,#0f172a);}
.bm-meta{font-size:13px;color:var(--muted,#64748b);}
.bm-row .bm-drop{flex:none;}

/* ----------------------------------------------------------- launch offer
   Sits directly above the price grid it qualifies, because a deadline that
   is not next to the number it applies to is decoration. Amber rather than
   the brand orange: the CTA buttons below are orange, and a notice competing
   with them for the same attention makes both weaker. */
.launch-offer{display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:10px 14px;margin:0 auto 22px;max-width:760px;
    padding:12px 18px;border-radius:12px;
    border:1px solid rgba(245,158,11,.45);
    background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(245,158,11,.05));
    text-align:center;}
.launch-offer .lo-tag{flex:none;padding:3px 10px;border-radius:999px;
    background:#b45309;color:#fff;font-size:11px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.launch-offer .lo-text{color:var(--ink,#0f172a);font-size:14.5px;line-height:1.5;}
.launch-offer .lo-text strong{font-weight:800;}
.launch-offer .lo-left{flex:none;padding:3px 10px;border-radius:999px;
    /* One step darker than the tag's #b45309: on this banner's amber wash
       that shade measures 4.27:1, just under the 4.5 a 12px label needs. */
    border:1px solid rgba(245,158,11,.5);color:#92400e;
    font-size:12px;font-weight:700;white-space:nowrap;}
[data-theme="dark"] .launch-offer{border-color:rgba(251,191,36,.42);
    background:linear-gradient(135deg,rgba(251,191,36,.13),rgba(251,191,36,.04));}
[data-theme="dark"] .launch-offer .lo-tag{background:#f59e0b;color:#1c1206;}
[data-theme="dark"] .launch-offer .lo-text{color:#f1f5f9;}
[data-theme="dark"] .launch-offer .lo-left{color:#fcd34d;border-color:rgba(251,191,36,.5);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .launch-offer{border-color:rgba(251,191,36,.42);
      background:linear-gradient(135deg,rgba(251,191,36,.13),rgba(251,191,36,.04));}
  :root:not([data-theme="light"]) .launch-offer .lo-tag{background:#f59e0b;color:#1c1206;}
  :root:not([data-theme="light"]) .launch-offer .lo-text{color:#f1f5f9;}
  :root:not([data-theme="light"]) .launch-offer .lo-left{color:#fcd34d;
      border-color:rgba(251,191,36,.5);}
}
@media (max-width:560px){.launch-offer{padding:11px 14px;}
  .launch-offer .lo-text{font-size:13.5px;}}

/* === GENERATED: prefers-color-scheme mirror — do not edit by hand === */
/* Mirrors every [data-theme="dark"] rule above so it also applies when
   the OS is in dark mode and the user has made no explicit choice in the
   app. Without this the tokens flip and the component overrides do not,
   which is what put near-white text on a hard-coded white header.
   Regenerate with: python tools/fix_dark_media.py */
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme="light"]) .logo-dark { display:block; }
  :root:root:not([data-theme="light"]) .logo-light { display:none; }
  :root:root:not([data-theme="light"]) .price-card.featured { background:linear-gradient(180deg, rgba(254,120,7,.10), var(--surface) 34%); }
  :root:not([data-theme="light"]) .pf-head { color: color-mix(in srgb, var(--pf-accent) 62%, #fff); }
  :root:not([data-theme="light"]) .launch-offer { border-color:rgba(251,191,36,.42); background:linear-gradient(135deg,rgba(251,191,36,.13),rgba(251,191,36,.04)); }
  :root:not([data-theme="light"]) .launch-offer .lo-tag { background:#f59e0b;color:#1c1206; }
  :root:not([data-theme="light"]) .launch-offer .lo-text { color:#f1f5f9; }
  :root:not([data-theme="light"]) .launch-offer .lo-left { color:#fcd34d;border-color:rgba(251,191,36,.5); }
}
/* === END GENERATED === */

/* The festival variant of the launch notice: same shape, warmer ground, so a
   reader who has seen one recognises the other as the same kind of thing. */
.launch-offer.is-festival {
  border-color: rgba(251,191,36,.55);
  background: linear-gradient(135deg, #7c2d12, #9a3412 60%, #a3521a);
}