/* Bunklow free guides: shared styles for /guides pages */
@font-face {
  font-family: Fredoka;
  src: url("/brand/fonts/Fredoka.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/brand/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/brand/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --orange: #FF8A00;
  --orange-dark: #FF8A00;
  --cream: #0A1736;
  --ink: #EEF3FC;
  --muted: #9AA9C7;
  --line: rgba(44, 201, 201, 0.45);
  --card: #10203c;
  --sky: #028EE1;
  --teal: #2CC9C9;
  --radius: 24px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(420px 220px at 8% -6%, rgba(255, 138, 0, 0.28), transparent 70%),
    radial-gradient(460px 240px at 96% 0%, rgba(2, 142, 225, 0.26), transparent 72%),
    radial-gradient(360px 220px at 72% 36%, rgba(44, 201, 201, 0.14), transparent 70%),
    var(--cream);
  color: var(--ink);
  font: 400 17px/1.55 Inter, ui-sans-serif, system-ui, sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); }
h1, h2 { font-family: Fredoka, ui-rounded, system-ui, sans-serif; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1120px; margin: 0 auto; padding: 18px 20px; }
.top .logo img { height: 32px; width: auto; max-width: none; display: block; }
@media (min-width: 1024px) { .top .logo img { height: 40px; } }
.top .logo { display: inline-flex; align-items: center; min-height: 44px; }
.top nav a { font-weight: 600; text-decoration: none; color: var(--ink); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #10203c; display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
.top nav a:hover { border-color: var(--orange); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 56px; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); margin: 4px 0 18px; }
.crumbs a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }

.hero { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; margin-bottom: 44px; }
.cover img { border-radius: 6px; box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .08); transition: transform .2s; }
.cover:hover img { transform: translateY(-3px) rotate(-.4deg); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--orange-dark); margin: 0 0 10px; }
.lede { font-size: 1.12rem; color: var(--muted); margin: 0 0 24px; max-width: 60ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px;
  font: 600 1rem Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; border: 2px solid transparent; }
/* Button look is Randy's Oct 31 choice, #6 Liquid Glass (PR 450): same values as /brand/bk-buttons.css and
   /brand/bk-glass-v1.css. Dark navy translucent glass pill, soft light edge, gentle sheen on the top half,
   quiet depth shadow, white Fredoka text. No orange fill or border. White on this navy is about 12 to 1. */
.btn.primary,
.bk-walk-btn {
  background: var(--bk-glass-bg, linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, rgba(22, 42, 80, 0.9) 0%, rgba(26, 46, 86, 0.9) 46%, rgba(44, 66, 108, 0.92) 100%));
  background-color: #162a50;
  color: #ffffff;
  font-family: Fredoka, ui-rounded, system-ui, sans-serif;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(2, 8, 24, 0.35);
  border: 1px solid rgba(206, 217, 240, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(8, 16, 40, 0.28), 0 6px 14px -6px rgba(2, 8, 24, 0.6);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  transition: transform .15s ease-out, filter .15s, border-color .15s;
}
.btn.primary:hover,
.btn.primary:focus-visible,
.bk-walk-btn:hover,
.bk-walk-btn:focus-visible {
  filter: brightness(1.14);
  border-color: rgba(232, 240, 255, 0.78);
}
.btn.primary:focus-visible, .bk-walk-btn:focus-visible { outline: 3px solid #2cc9c9; outline-offset: 2px; }
.btn.primary:active, .bk-walk-btn:active { transform: scale(.96); }
/* Guide quiz: always optional. Skip sits under each question's options. */
.bk-quiz button.skip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px; padding: 0 22px; border-radius: 999px; background: transparent; color: var(--ink); border: 2px solid rgba(238, 243, 252, 0.45); font: 600 .95rem Inter, system-ui, sans-serif; cursor: pointer; }
.bk-quiz button.skip:hover, .bk-quiz button.skip:focus-visible { border-color: var(--teal); }
.bk-quiz button.skip[hidden] { display: none; }
.bk-quiz fieldset.skipped legend { color: var(--muted); }
.bk-quiz button.opt:disabled:not(.right):not(.wrong):hover { border-color: rgba(238, 243, 252, 0.28); }
.btn.ghost { background: #10203c; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--orange); }
.btn:focus-visible, .chip:focus-visible, .gcard:focus-visible, input:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.meta { font-size: .88rem; color: var(--muted); margin: 14px 0 0; }

.panel, .cta { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 4vw, 34px); margin-bottom: 40px; }
.panel p { margin: 0 0 .8em; max-width: 72ch; }
.panel p:last-child { margin-bottom: 0; }

.rules { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rules li { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.rules .num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #0A1736; display: grid; place-items: center; font: 700 1rem Fredoka, sans-serif; }
.rules strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.rules p { margin: 0; color: var(--muted); font-size: .96rem; }

.tip { background: rgba(255, 138, 0, 0.12); border: 1px solid rgba(255, 138, 0, 0.45); border-left: 6px solid var(--orange); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 40px; }
.tip p { margin: 0; font-weight: 600; }
.tip .tip-label { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--orange-dark); margin-bottom: 6px; }

.cta { text-align: center; }
.cta p { color: var(--muted); max-width: 60ch; margin: 0 auto 20px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid.lib { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.gcard { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.gcard:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(15, 23, 42, .35); }
.gcard[hidden] { display: none; }
.gcard img { border-radius: 4px; border: 1px solid #eee; aspect-ratio: 300 / 388; object-fit: cover; }
.gcat { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--orange-dark); }
.gtitle { font-weight: 700; line-height: 1.3; }
.more .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 220px)); }
.all { margin-top: 16px; font-weight: 600; }
.all a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }

.lib-hero { max-width: 760px; margin: 12px 0 28px; }
.tools { display: flex; flex-direction: column; gap: 14px; margin-bottom: 10px; }
.search input { width: 100%; min-height: 54px; border: 1.5px solid var(--line); border-radius: 999px; padding: 0 22px; font: 500 1rem Inter, system-ui, sans-serif; background: #08101e; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--line); background: #10203c; color: var(--ink); border-radius: 999px; padding: 8px 16px; min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; font: 600 .92rem Inter, system-ui, sans-serif; cursor: pointer; }
.chip.on {
  background-color: #b75f13;
  background-image: none;
  border-color: rgba(255, 214, 170, 0.75);
  color: #ffffff;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 8px 16px rgba(255, 133, 27, 0.28);
}
.count { color: var(--muted); font-size: .92rem; margin: 6px 0 16px; }
.empty { color: var(--muted); }

.panel, .cta, .gcard, .rules li { border-color: rgba(44, 201, 201, 0.55); border-radius: 24px; }
@supports (backdrop-filter: blur(10px)) {
  .panel, .cta, .gcard, .rules li, .top nav a, .btn.ghost, .chip {
    background: linear-gradient(180deg, rgba(22, 38, 62, 0.78), rgba(11, 20, 36, 0.86));
    backdrop-filter: blur(10px);
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .panel, .cta, .gcard, .rules li { background: #10203c; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.primary, .chip.on { animation: none; transition: none; }
}
.foot { border-top: 1px solid var(--line); text-align: center; padding: 28px 20px 40px; color: var(--muted); font-size: .9rem; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot p { margin: 4px 0; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-text h1 { overflow-wrap: anywhere; }
  .cover { max-width: 260px; margin: 0 auto; }
  .hero-text { text-align: center; }
  .actions { justify-content: center; }
  .btn { flex: 1 1 100%; }
  .rules { grid-template-columns: minmax(0, 1fr); }
  .rules li > div { min-width: 0; overflow-wrap: break-word; }
  .grid, .grid.lib, .more .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gcard { padding: 10px; min-width: 0; }
  .gcat, .gtitle { overflow-wrap: anywhere; }
  main { overflow-wrap: break-word; }
}
@media (max-width: 360px) {
  .top { gap: 8px; }
  .grid, .grid.lib, .more .grid { grid-template-columns: minmax(0, 1fr); }
  .gcard, .gcard img { min-width: 0; max-width: 100%; }
}

.bunkly-hello{display:flex;align-items:center;gap:8px;height:48px;pointer-events:none}.bunkly-hello-art{height:44px;width:auto;flex:none;object-fit:contain;pointer-events:none}.bunkly-hello-say{position:relative;margin:0;max-width:36rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(44,201,201,.55);border-radius:16px;background:#10203c;padding:6px 12px 6px 16px;color:#EEF3FC;font-size:14px;font-weight:600;line-height:1.2;pointer-events:none}.bunkly-hello-say:before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;background:#10203c;border-left:1px solid rgba(44,201,201,.55);border-bottom:1px solid rgba(44,201,201,.55);transform:translateY(-50%) rotate(45deg);pointer-events:none}@media (prefers-reduced-motion:reduce){.bunkly-hello,.bunkly-hello-art,.bunkly-hello-say,.bunkly-hello-say:before{animation:none;transition:none}}


.bunkly-hello {
  max-width: 1120px;
  width: 100%;
  margin: 8px auto 0;
  padding: 0 20px;
  box-sizing: border-box;
}
.bunkly-hello-art { background: transparent; }

@property --bolt { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.guide-suggest {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px;
  padding: 8px;
  border-radius: 1.25rem;
  background: #10203c;
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(255, 138, 0, 0.72),
    0 0 16px 2px rgba(255, 138, 0, 0.55),
    0 0 32px 6px rgba(44, 201, 201, 0.35);
}
.guide-suggest[hidden] { display: none; }
.guide-suggest::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--bolt), rgba(44, 201, 201, 0.55) 0 58%, rgba(252, 128, 2, 0.35) 70%, #fdba74 82%, #fff7ed 89%, #fdba74 94%, rgba(255, 138, 0, 0.7) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: guide-bolt 2.8s linear infinite;
  pointer-events: none;
}
@keyframes guide-bolt { to { --bolt: 360deg; } }
.guide-suggest-row {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 14px;
  background: #10203c;
  color: #fff;
  font: 600 1rem/1.25 Inter, system-ui, sans-serif;
  text-decoration: none;
}
.guide-suggest-row strong { font-weight: 800; color: #fff; }
.guide-suggest-row.is-on,
.guide-suggest-row:hover,
.guide-suggest-row:focus-visible {
  background: #1a3358;
  box-shadow: 0 0 14px rgba(44, 201, 201, 0.55);
}
.guide-suggest-empty {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 8px 14px;
  color: #fff;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .guide-suggest::before { animation: none; }
}