/* Jolly skin for My Jolly Home (the homeowner side). Loaded after app.css.
   Jolly blue #13A0D8 and navy #22526C from Jolly's logo, yellow #F8D03B.
   Action blue #0B6FA4 is the logo blue darkened for white text (contrast 5.3:1). */
:root, html[data-side] {
  --crimson: #0B6FA4; --crimson-deep: #1F4E66; --crimson-soft: #DDF0FA;
  --parchment: #F8D03B; --parchment-2: #FDF1C2; --ochre: #D9A400;
  --navy: #1F4E66; --navy-2: #2A6383; --door: #F8D03B; --door-ink: #0B6FA4; --door-soft: #FDF1C2;
  --gold: #D9A400; --slate: #2B4757; --slate-2: #5F7A89;
  --surface-2: #F1F7FB; --line: #B7CCD9; --line-strong: #89A7B9; --dot: rgba(16,42,56,.08);
  --ink: #0F2A38; --ink-2: #2B4757; --ink-3: #4F6B7B; --on-navy: #FFFFFF;
  --primary: #0B6FA4; --primary-ink: #1F4E66; --primary-soft: #DDF0FA;
  --info: #0B6FA4; --info-soft: #DDF0FA;
  --frame: #EAF5FB; --frame-2: #D6EBF6; --on-frame: #0F2A38; --fill: #CFE8F6; --on-fill: #1F4E66; --logo-on-frame: #13A0D8;
  --bezel: #1F4E66;
  --shadow-card: 0 1px 2px rgba(16,42,56,.05), 0 4px 16px rgba(16,42,56,.07);
  --shadow-pop: 0 2px 6px rgba(16,42,56,.08), 0 16px 36px rgba(16,42,56,.16);
  --shadow-device: 0 34px 80px rgba(16,42,56,.22), 0 8px 20px rgba(16,42,56,.08);
  --font-display: 'Nunito', 'Archivo', system-ui, sans-serif;
  --font-body: 'Nunito', 'Archivo', system-ui, sans-serif;
  --font-label: 'Nunito', 'Archivo', system-ui, sans-serif;
  --font-mono: 'Nunito', 'Archivo', system-ui, sans-serif;
}
html:not([data-side="navy"]) .btn:not(.ghost):not(.quiet):not(.danger):not(.brand) { box-shadow: inset 0 0 0 1px rgba(31,78,102,.25); }
.h1, .h2, .h3 { font-weight: 800; letter-spacing: -.01em; }
.h1 { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; letter-spacing: 0; }
.eyebrow, .rail-group, .kicker { font-stretch: normal; letter-spacing: .06em; }
/* the presenter rail */
.rail .brand { display: inline-flex; align-items: center; }
.jl-rail { width: 112px; height: auto; display: block; }
.jl-presented { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.jl-presented img { width: 64px; height: auto; display: block; }
/* Jolly's own mark wherever a pro's initial would be */
.pmark.jl { background: #fff; border: 1px solid var(--line); padding: 3px; overflow: hidden; }
.pmark.jl img { width: 100%; height: auto; display: block; }
/* the landing band: Jolly's wordmark on white, with the yellow rule */
.brandband .jl-word { width: 168px; height: auto; display: block; background: #fff; border-radius: 14px; padding: 8px 12px; }
/* the center Home button: navy disc, yellow door */
.tabbar .disc { background: #1F4E66; color: #fff; }
/* pros you can add */
.jl-grp { font-size: 12px; font-weight: 800; color: var(--ink-3); margin: 12px 0 6px; }
.jl-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.jl-cats span { padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.jl-own { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.jl-own svg { color: #0B6FA4; flex: 0 0 auto; margin-top: 2px; }