/* ============================================================================
   Steamboat Software brand layer  —  sb-brand.css
   Sits on top of Bootstrap 5.3.3. Named tokens only; NEVER put raw hex in HTML.
   Every color, font and spacing value on the site comes from :root below.

   SOURCE OF TRUTH: brand/Steamboat-Software-brand-1.00.pptx (Brand v1.00).
     Colors: Steamboat Blue #1F2A59 · Gray #808080 · Green #C8F146 · Sky #005DAA
             · Lite Gray #DCDCDC                                   (LOCKED)
     Fonts:  Roboto — URL name + headlines · Montserrat — body copy (LOCKED)
     Tagline: "Mobile Apps Perfected" (Roboto Medium)
   Tokens marked DERIVED are not in the deck; they are tints/shades of the
   locked colors needed for contrast (#808080 alone fails AA for text) and
   pressed states. Change locked values in the deck first, then here.

   USAGE RULES
     - Blue is ink and the hero/footer field. Sky is the link + eyebrow color on
       light surfaces. Green is the accent ON blue only (eyebrow, primary CTA,
       the rays) — never text on white (fails contrast).
     - Gray is decorative/structural (borders, mountain fill); use --sb-muted for text.
   ============================================================================ */

/* ---- 0. Fonts (self-hosted; latin subset; SIL OFL via @fontsource) ------------
   Served from /fonts so visitors' browsers never contact Google Fonts. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/roboto-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

/* ---- 1. Design tokens ---------------------------------------------------- */
:root {
  /* Locked brand palette (brand deck v1.00) */
  --sb-navy:       #1F2A59;   /* Steamboat Blue — ink, hero + footer field */
  --sb-gray:       #808080;   /* Steamboat Gray — decorative only */
  --sb-green:      #C8F146;   /* Steamboat Green — accent on blue */
  --sb-sky:        #005DAA;   /* Steamboat Sky — links, eyebrows on light */
  --sb-gray-lite:  #DCDCDC;   /* Steamboat Lite Gray — hairlines */

  /* Derived (contrast + states) */
  --sb-navy-deep:  #151D40;   /* pressed/hover blue, phone chrome */
  --sb-navy-light: #2E3D7A;   /* raised blue surface */
  --sb-sky-deep:   #004A88;   /* link hover */
  --sb-sky-wash:   #EAF2FA;   /* faint sky tint (callouts) */
  --sb-text:       #2B3145;   /* body copy on white (AA) */
  --sb-muted:      #565C6B;   /* secondary text on white (AA) */
  --sb-panel:      #F5F6F9;   /* soft section band */
  --sb-white:      #FFFFFF;
  --sb-on-ink:     #F4F6FB;   /* text on blue */
  --sb-on-ink-dim: #C3CAE0;   /* secondary text on blue */
  --sb-divider:    rgba(255,255,255,0.14);  /* rule on blue */
  --sb-scrim:      rgba(21,29,64,0.45);     /* photo overlay (navy-deep at 45%) */

  /* Type */
  --sb-font-head: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sb-font:      "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale / rhythm */
  --sb-radius:       14px;
  --sb-radius-pill:  999px;
  --sb-container-max: 1400px;
  --sb-section-y:    clamp(3.5rem, 7vw, 6.5rem);
  --sb-shadow-card:  0 6px 24px rgba(31, 42, 89, 0.08);
  --sb-shadow-soft:  0 18px 40px rgba(31, 42, 89, 0.16);

  /* Bootstrap variable overrides (so utilities inherit the brand) */
  --bs-body-font-family: var(--sb-font);
  --bs-body-color: var(--sb-text);
  --bs-body-bg: var(--sb-white);
  --bs-primary: var(--sb-navy);
  --bs-link-color: var(--sb-sky);
  --bs-link-hover-color: var(--sb-sky-deep);
}

/* ---- 2. Base ------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--sb-font);
  color: var(--sb-text);
  background: var(--sb-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Content column: grows with the viewport from 992px up, capped at 1400px.
   Below 992px nothing changes from Bootstrap. */
@media (min-width: 992px) {
  .container { max-width: clamp(960px, calc(100% - 5rem), var(--sb-container-max)); }
}

h1, h2, h3, .sb-display {
  font-family: var(--sb-font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sb-navy);
  line-height: 1.1;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { line-height: 1.7; }
.sb-lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: var(--sb-muted);
}
.sb-muted { color: var(--sb-muted); }
.sb-tagline { font-family: var(--sb-font-head); font-weight: 500; }

a { color: var(--sb-sky); text-decoration: none; }
a:hover { color: var(--sb-sky-deep); }
:focus-visible { outline: 3px solid var(--sb-sky); outline-offset: 2px; }

/* ---- 3. Eyebrow ---------------------------------------------------------- */
.sb-eyebrow {
  display: inline-block;
  font-family: var(--sb-font-head);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sb-sky);
  margin-bottom: .8rem;
}

/* ---- 4. Sections --------------------------------------------------------- */
.sb-section { padding-block: var(--sb-section-y); }
.sb-section--soft { background: var(--sb-panel); }
.sb-section--ink, .sb-hero { background: var(--sb-navy); color: var(--sb-on-ink); }
.sb-section--ink h1, .sb-section--ink h2, .sb-section--ink h3,
.sb-hero h1 { color: var(--sb-on-ink); }
.sb-section--ink .sb-lead, .sb-hero .sb-lead { color: var(--sb-on-ink-dim); }
.sb-section--ink .sb-eyebrow, .sb-hero .sb-eyebrow { color: var(--sb-green); }
.sb-section--ink a:not([class*="btn-sb"]) { color: var(--sb-on-ink); text-decoration: underline; }

/* ---- 5. Buttons ---------------------------------------------------------- */
.btn-sb, .btn-sb-lime, .btn-sb-outline, .btn-sb-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sb-radius-pill);
  padding: .8rem 1.5rem;
  font-family: var(--sb-font-head);
  font-weight: 700;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
/* On light: blue button */
.btn-sb { background: var(--sb-navy); color: var(--sb-white); border-color: var(--sb-navy); }
.btn-sb:hover { background: var(--sb-navy-deep); color: var(--sb-white); box-shadow: var(--sb-shadow-card); transform: translateY(-1px); }
.btn-sb-outline { background: transparent; color: var(--sb-navy); border-color: var(--sb-gray-lite); }
.btn-sb-outline:hover { border-color: var(--sb-navy); color: var(--sb-navy); }
/* On blue: green primary, ghost secondary */
.btn-sb-lime { background: var(--sb-green); color: var(--sb-navy); border-color: var(--sb-green); }
.btn-sb-lime:hover { background: var(--sb-white); color: var(--sb-navy); border-color: var(--sb-white); transform: translateY(-1px); }
.btn-sb-ghost { background: transparent; color: var(--sb-on-ink); border-color: var(--sb-divider); }
.btn-sb-ghost:hover { border-color: var(--sb-on-ink); color: var(--sb-on-ink); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }

/* ---- 6. Cards ------------------------------------------------------------ */
.sb-card {
  background: var(--sb-white);
  border: 1px solid var(--sb-gray-lite);
  border-radius: var(--sb-radius);
  padding: 1.6rem;
  box-shadow: var(--sb-shadow-card);
  height: 100%;
}
.sb-card--soft { background: var(--sb-panel); }
.sb-card h2, .sb-card h3 { font-size: 1.35rem; margin-bottom: .75rem; }
.sb-callout {
  background: var(--sb-sky-wash);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  color: var(--sb-navy);
  margin-top: 1rem;
}
.sb-email {
  display: inline-block;
  font-weight: 600;
  background: var(--sb-white);
  border: 1px solid var(--sb-gray-lite);
  border-radius: 10px;
  padding: .55rem .9rem;
  word-break: break-all;
}

/* Trait strip (Independent / Agile / Fast) */
.sb-trait h3 { margin-bottom: .5rem; }
.sb-trait-num {
  font-family: var(--sb-font-head); font-weight: 900; font-size: .9rem;
  letter-spacing: .1em; color: var(--sb-sky); display: block; margin-bottom: .6rem;
}

/* ---- 7. Product tiles (HeyGroop / KinectedCare) -------------------------- */
.sb-product { padding-block: var(--sb-section-y); }
.sb-product h2 a { color: var(--sb-navy); }
.sb-product h2 a:hover { color: var(--sb-sky); }
.sb-product img, .sb-figure img { border-radius: var(--sb-radius); }

/* ---- 8. Story band (full-bleed photo with scrim) ------------------------- */
.sb-story {
  position: relative;
  min-height: min(100vh, 46rem);
  display: flex; align-items: center;
  background-size: cover; background-position: center;
  color: var(--sb-on-ink);
}
.sb-story::before { content: ""; position: absolute; inset: 0; background: var(--sb-scrim); }
.sb-story > .container { position: relative; }
.sb-story h2 { color: var(--sb-on-ink); font-size: clamp(2rem, 5vw, 3rem); }
.sb-story p { font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.7; }

/* ---- 8b. Apps page --------------------------------------------------------- */
.sb-hero--page { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.sb-hero--page a:not([class*="btn-sb"]) { color: var(--sb-on-ink-dim); }
.sb-hero--page a:not([class*="btn-sb"]):hover { color: var(--sb-green); }
.sb-app-logo { display: block; width: 56px; height: 56px; margin-bottom: 1rem; }
.sb-app-tagline { font-family: var(--sb-font-head); font-weight: 500; font-size: 1.15rem; color: var(--sb-sky); margin-bottom: 1rem; }
.sb-app-points { padding-left: 1.2rem; margin: 1.2rem 0 1.6rem; }
.sb-app-points li { margin-bottom: .5rem; }
.sb-pill { display: inline-block; font-family: var(--sb-font-head); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .8rem; border-radius: var(--sb-radius-pill); background: var(--sb-sky-wash); color: var(--sb-navy); }
.sb-pill--soon { background: var(--sb-green); color: var(--sb-navy); }
.sb-phone-shot { display: block; margin-inline: auto; width: min(100%, 290px); height: auto; border-radius: 40px; border: 8px solid var(--sb-navy-deep); box-shadow: var(--sb-shadow-soft); }
.sb-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--sb-on-ink); text-decoration: underline; cursor: pointer; }
.sb-linkbtn:hover { color: var(--sb-green); }
.sb-store-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---- 8c. Press page ------------------------------------------------------- */
.sb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2.5rem; margin: 0; }
.sb-facts dt { font-family: var(--sb-font-head); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-sky); }
.sb-facts dd { margin: .25rem 0 0; }
.sb-logo-tile { display: flex; align-items: center; justify-content: center; min-height: 220px; border: 1px solid var(--sb-gray-lite); border-radius: var(--sb-radius); background: var(--sb-white); padding: 1.5rem; }
.sb-logo-tile--dark { background: var(--sb-navy); border-color: var(--sb-navy); }
.sb-logo-tile img { max-width: 240px; height: auto; }
.sb-swatch { height: 72px; border-radius: 12px; border: 1px solid var(--sb-gray-lite); margin-bottom: .6rem; }
.sb-swatch--navy { background: var(--sb-navy); }
.sb-swatch--sky { background: var(--sb-sky); }
.sb-swatch--green { background: var(--sb-green); }
.sb-swatch--gray { background: var(--sb-gray); }
.sb-swatch--lite { background: var(--sb-gray-lite); }

/* ---- 8d. Resources (articles + hub) --------------------------------------- */
.sb-meta { color: var(--sb-muted); font-size: .9rem; margin-bottom: 1.25rem; }
.sb-tldr { background: var(--sb-sky-wash); border-left: 4px solid var(--sb-sky); border-radius: 10px; padding: 1.1rem 1.3rem; color: var(--sb-navy); font-size: 1.05rem; line-height: 1.6; }
.sb-prose { font-size: 1.05rem; line-height: 1.75; }
.sb-prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 2.4rem 0 .9rem; }
.sb-prose h3 { font-size: 1.2rem; margin: 1.8rem 0 .6rem; }
.sb-prose ul, .sb-prose ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.sb-prose li { margin-bottom: .5rem; }
.sb-prose a { text-decoration: underline; text-underline-offset: 2px; }
.sb-res-card { display: block; height: 100%; padding: 1.6rem; border: 1px solid var(--sb-gray-lite); border-radius: var(--sb-radius); background: var(--sb-white); box-shadow: var(--sb-shadow-card); color: var(--sb-text); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.sb-res-card:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-soft); color: var(--sb-text); }
.sb-res-card h3 { font-size: 1.3rem; margin: .2rem 0 .6rem; }
.sb-draft-banner { background: var(--sb-green); color: var(--sb-navy); text-align: center; padding: .6rem 1rem; font-size: .9rem; }
.sb-todo { background: var(--sb-panel); border: 2px dashed var(--sb-gray); border-radius: 10px; padding: .9rem 1.1rem; margin: 1.2rem 0; color: var(--sb-navy); font-size: .95rem; }

/* ---- 9. Nav -------------------------------------------------------------- */
.sb-nav { background: var(--sb-white); border-bottom: 1px solid var(--sb-gray-lite); }
.sb-nav .navbar-brand { display: inline-flex; align-items: center; gap: .6rem; }
.sb-wordmark { font-family: var(--sb-font-head); font-weight: 700; letter-spacing: -0.01em; color: var(--sb-navy); font-size: 1.15rem; }
.sb-nav .nav-link { color: var(--sb-navy); font-family: var(--sb-font-head); font-weight: 500; }
.sb-nav .nav-link:hover { color: var(--sb-sky); }

/* ---- 10. Footer ---------------------------------------------------------- */
.sb-footer { background: var(--sb-navy); color: var(--sb-on-ink); }
.sb-footer a { color: var(--sb-on-ink); }
.sb-footer a:hover { color: var(--sb-green); text-decoration: underline; }
.sb-footer .sb-wordmark { color: var(--sb-on-ink); }
.sb-footer-small { font-size: .85rem; color: var(--sb-on-ink-dim); }
.sb-footer-small a { color: var(--sb-on-ink-dim); text-decoration: underline; }
.sb-footer hr { border-color: var(--sb-divider); opacity: 1; }

/* ---- 11. The logo mark (inline SVG; geometry in components.mark_svg) ------
   Default = blue + gray on light. --on-ink = green rays, light peak, sky fill,
   for blue surfaces. */
.sb-mark { display: block; width: auto; }
.sb-mark .sb-ray, .sb-mark .sb-peak { fill: var(--sb-navy); }
.sb-mark .sb-peak-fill { fill: var(--sb-gray); }
.sb-mark--on-ink .sb-ray { fill: var(--sb-green); }
.sb-mark--on-ink .sb-peak { fill: var(--sb-on-ink); }
.sb-mark--on-ink .sb-peak-fill { fill: var(--sb-sky); }

/* ---- 12. Signature hero --------------------------------------------------
   Story: a rough draft of a mobile app gets iterated at speed (v0.1 -> v1.0),
   snaps to a perfect grid, and ships — under the Steamboat sunrise.
   Authored as its FINAL state: visible by default, so no-JS, blocked CDN and
   prefers-reduced-motion all show the finished scene. The animation (GSAP,
   transform/opacity only) lives in build/fragments/index.post.html. html.sb-anim
   (set pre-paint only when motion is welcome) hides the [data-h] pieces until
   the timeline reveals them. */
.sb-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 5.5rem); }
.sb-hero h1 { line-height: 1.04; margin-bottom: 1.25rem; }
.sb-hero h1 em { font-style: normal; color: var(--sb-green); }
.sb-hero .sb-lead { max-width: 34rem; }
.sb-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.sb-scene { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; }

/* scene units = logo viewBox units; phone occupies x 368-618, y 390-850 */
.sb-scene .ph-body   { fill: var(--sb-navy-deep); stroke: var(--sb-navy-light); stroke-width: 3; }
.sb-scene .ph-screen { fill: var(--sb-white); }
.sb-scene .ph-notch  { fill: var(--sb-navy-deep); }
.sb-scene .ph-card   { fill: var(--sb-panel); stroke: var(--sb-gray-lite); stroke-width: 2; }
.sb-scene .ph-line   { fill: var(--sb-gray-lite); }
.sb-scene .ph-line-d { fill: var(--sb-navy); }
.sb-scene .ph-avatar { fill: var(--sb-sky); }
.sb-scene .ph-icon-a { fill: var(--sb-sky); }
.sb-scene .ph-icon-b { fill: var(--sb-green); }
.sb-scene .ph-btn    { fill: var(--sb-navy); }
.sb-scene .ph-btn-l  { fill: var(--sb-on-ink); }
.sb-scene .ph-home   { fill: var(--sb-gray-lite); }

/* Draft (wireframe) layer + alignment guides: transient, hidden in the final state */
.sb-scene .ph-wire   { fill: none; stroke: var(--sb-sky); stroke-width: 3; stroke-dasharray: 9 7; opacity: 0; }
.sb-scene .ph-guide  { fill: var(--sb-green); opacity: 0; }

.sb-scene .sb-chip     { fill: var(--sb-navy-deep); stroke: var(--sb-green); stroke-width: 2.5; }
.sb-scene .sb-chip-t   { font-family: var(--sb-font-head); font-weight: 700; font-size: 30px; fill: var(--sb-green); }
.sb-scene .sb-chip-l   { font-family: var(--sb-font-head); font-weight: 500; font-size: 18px; letter-spacing: .12em; fill: var(--sb-on-ink-dim); text-transform: uppercase; }
.sb-scene .sb-badge    { fill: var(--sb-green); }
.sb-scene .sb-badge-t  { font-family: var(--sb-font-head); font-weight: 700; font-size: 26px; fill: var(--sb-navy); }
.sb-scene .sb-badge-ck { fill: none; stroke: var(--sb-navy); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* Animation gate: pieces the timeline reveals start hidden ONLY under html.sb-anim */
html.sb-anim .sb-hero [data-h],
html.sb-anim .sb-hero .sb-ray,
html.sb-anim .sb-hero .sb-peak,
html.sb-anim .sb-hero .sb-peak-fill { opacity: 0; }
html.sb-hero-static .sb-hero [data-h],
html.sb-hero-static .sb-hero .sb-ray,
html.sb-hero-static .sb-hero .sb-peak,
html.sb-hero-static .sb-hero .sb-peak-fill { opacity: 1 !important; transform: none !important; }

@media (max-width: 991.98px) {
  .sb-scene { max-width: 460px; margin-top: 2.5rem; }
}

/* ---- 13. Scroll reveal (visible by default) ------------------------------
   Hidden only under html.sb-anim (pre-paint gate; motion welcome). */
.sb-anim .sb-reveal:not(.is-in) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .sb-reveal, .sb-hero [data-h] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}