/* Shared styles for the hobcompass.com landing pages. Colors match the training videos. */
:root {
  /* The Heart of Behavior colors: puzzle blue, yellow, red and navy. */
  --hob-blue: #1B95D2; --hob-yellow: #EBC925; --hob-red: #9C1D24; --hob-navy: #2D409A;
  --bg: #F6F8FB; --surface: #FFFFFF; --ink: #16203A; --muted: #4F5B72; --line: #DAE1EC;
  --accent: #2D409A; --accent-ink: #FFFFFF; --chip: #E6EAF3;
  --blue-soft: #DDF0FA; --yellow-soft: #FBF2CC; --red-soft: #F6DEDF; --navy-soft: #E1E5F5;
  --font-display: "Domine", Georgia, serif;
  --font-body: "Public Sans", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0D1328; --surface: #151D38; --ink: #E8ECF5; --muted: #A3ADC4; --line: #2A3456;
    --accent: #7FC6EE; --accent-ink: #0D1328; --chip: #212B4D;
    --blue-soft: #133A55; --yellow-soft: #3D3410; --red-soft: #45191C; --navy-soft: #232E5C; color-scheme: dark; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.band { height: 6px; background: linear-gradient(90deg, var(--hob-blue) 0 25%, var(--hob-yellow) 25% 50%, var(--hob-red) 50% 75%, var(--hob-navy) 75%); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.page { max-width: 1040px; margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left)); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { flex: none; width: 34px; height: 30px; }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
h1 { color: var(--accent); font-family: var(--font-display); font-size: clamp(30px, 6vw, 44px); line-height: 1.15; margin: 6px 0 10px; text-wrap: balance; }
.lede { margin: 0; color: var(--muted); max-width: 62ch; font-size: 17px; }
.hero { margin-bottom: 32px; }
.back { display: inline-block; margin-bottom: 20px; font-weight: 600; text-decoration: none; }
.back:hover { text-decoration: underline; }

/* Landing cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 20, 35, .12); }
.card h2 { font-family: var(--font-display); font-size: 22px; margin: 0; }
.card p { margin: 0; color: var(--muted); }
.card .note { color: var(--ink); font-weight: 600; }
.tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--ink); }
.go { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--accent); }
.go.muted { color: var(--muted); }
.soon { border-style: dashed; }
/* Each card wears one puzzle color along its top edge, with a matching tag. */
.card { border-top: 5px solid var(--card-color, var(--line)); }
.card.blue { --card-color: var(--hob-blue); } .card.blue .tag { background: var(--blue-soft); }
.card.yellow { --card-color: var(--hob-yellow); } .card.yellow .tag { background: var(--yellow-soft); }
.card.red { --card-color: var(--hob-red); } .card.red .tag { background: var(--red-soft); }
.card.navy { --card-color: var(--hob-navy); } .card.navy .tag { background: var(--navy-soft); }
.card.soon { border-top-style: solid; }
.foot { margin-top: 40px; color: var(--muted); font-size: 14px; }
.foot p { margin: 0; }

/* Training index */
.section { margin-top: 36px; }
.section h2 { font-family: var(--font-display); font-size: 24px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.section h2::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--section-color, var(--accent)); }
.section.blue { --section-color: var(--hob-blue); --code-bg: var(--blue-soft); }
.section.yellow { --section-color: var(--hob-yellow); --code-bg: var(--yellow-soft); }
.section > p { margin: 0 0 14px; color: var(--muted); }
.videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.video { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color .15s; }
.video:hover { border-color: var(--accent); }
.code { flex: none; min-width: 48px; text-align: center; font-weight: 700; font-size: 14px; padding: 6px 8px; border-radius: 8px;
  background: var(--code-bg, var(--chip)); color: var(--ink); font-variant-numeric: tabular-nums; }
.video .title { font-weight: 600; }
.video .sub { display: block; font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .card, .video { transition: none; } a.card:hover { transform: none; } }