/* casaroo-site.css: the shared look for every page on getcasaroo.com.
   ---------------------------------------------------------------------------
   One file, loaded LAST on every page, so it wins over the older page sheets
   (learn.css, tools.css, blindspots.css and the inline styles on hand built
   pages) without anyone having to edit them first. It holds:

     1. the self hosted fonts and the design tokens
     2. the shared header and footer (markup lives in learn/chrome/, written
        into every page by learn/apply_chrome.py and by the generators)
     3. the inner page treatment: a deep teal hero band behind the breadcrumb
        and the page title, the new type, costs on highlighter, agent
        questions as speech bubbles

   The same values are mirrored in the app's src/styles.css, so the site and
   casaroo.app cannot drift. Design source: the Casaroo Redesign canvas and the
   casaroo-house-style skill. Nov 2026. */

/* ---------------------------------------------------------------- 1. fonts */
@font-face{font-family:'Big Shoulders Display';font-weight:700;font-style:normal;font-display:swap;src:url('/assets/fonts/big-shoulders-display-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-weight:800;font-style:normal;font-display:swap;src:url('/assets/fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-weight:900;font-style:normal;font-display:swap;src:url('/assets/fonts/big-shoulders-display-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible Next';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible Next';font-weight:500;font-style:normal;font-display:swap;src:url('/assets/fonts/atkinson-hyperlegible-next-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible Next';font-weight:700;font-style:normal;font-display:swap;src:url('/assets/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible Next';font-weight:400;font-style:italic;font-display:swap;src:url('/assets/fonts/atkinson-hyperlegible-next-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap;src:url('/assets/fonts/poppins-latin-700-normal.woff2') format('woff2')}

:root{
  --cx-deep:#08332F; --cx-teal:#0F766E; --cx-pale:#8FBFB6; --cx-mint:#9FE0D3;
  --cx-amber:#F59E0B; --cx-warm:#F3C66B; --cx-hl:#FDE6B3; --cx-plaster:#EEF1EE;
  --cx-ink:#0C2A26; --cx-soft:#3D5550; --cx-line:#D3DAD6; --cx-paper:#FFFFFF;
  --cx-on-deep:#E3F2EE; --cx-on-deep-soft:#CFE7E1; --cx-on-deep-muted:#9FC4BC;
  --cx-display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --cx-body:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --cx-word:'Poppins',system-ui,sans-serif;
  --cx-grid:linear-gradient(rgba(159,224,211,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(159,224,211,.07) 1px,transparent 1px);
}

/* ------------------------------------------------------- base type, site wide */
body{font-family:var(--cx-body) !important;color:var(--cx-ink)}
h1,h2,h3,.cx-d{font-family:var(--cx-display) !important;font-weight:800 !important;letter-spacing:.005em !important;font-style:normal}
h1 em,h2 em,h3 em{font-style:normal !important;color:inherit !important}
h4,h5{font-family:var(--cx-body)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--cx-amber) !important;outline-offset:3px;border-radius:4px}
.cx-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------ 2. the header */
.cx-header{position:sticky;top:0;z-index:60;background-color:var(--cx-deep);background-image:var(--cx-grid);background-size:32px 32px;color:var(--cx-on-deep);border-bottom:1px solid rgba(159,224,211,.16)}
.cx-header.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.cx-hwrap{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px}
.cx-brand{display:flex;align-items:center;gap:10px;text-decoration:none !important;flex:none}
.cx-brand svg{width:38px;height:38px;display:block}
.cx-word{font-family:var(--cx-word);font-weight:700;font-size:23px;letter-spacing:-.01em;color:#FFFFFF;line-height:1}
.cx-word span{color:var(--cx-amber)}
.cx-nav{display:flex;align-items:center;gap:30px}
.cx-nav a{color:var(--cx-on-deep);text-decoration:none;font-weight:500;font-size:17px;padding:10px 2px;border-bottom:3px solid transparent;font-family:var(--cx-body)}
.cx-nav a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:6px}
.cx-nav a[aria-current="page"]{color:#FFFFFF;font-weight:700;border-bottom-color:var(--cx-amber)}
.cx-nav .cx-check-m,.cx-nav .cx-msearch{display:none}
.cx-actions{display:flex;align-items:center;gap:8px;flex:none}
.cx-iconbtn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(227,242,238,.35);border-radius:6px;color:var(--cx-on-deep);cursor:pointer;padding:0}
.cx-iconbtn:hover{border-color:var(--cx-mint);color:#FFFFFF}
.cx-check{display:inline-flex;align-items:center;height:44px;padding:0 18px;background:var(--cx-amber);color:var(--cx-ink) !important;text-decoration:none !important;border-radius:6px;font-weight:700;font-size:16px;font-family:var(--cx-body);white-space:nowrap}
.cx-check:hover{filter:brightness(1.05)}
.cx-check[aria-current="page"]{background:#FFFFFF;box-shadow:inset 0 -4px 0 var(--cx-amber)}
.cx-burger{display:none}
.cx-burger .cx-x{display:none}
@media (max-width:900px){
  .cx-hwrap{padding-left:16px;padding-right:16px;min-height:72px}
  .cx-word{font-size:21px}
  .cx-brand svg{width:34px;height:34px}
  .cx-check{display:none}
  .cx-burger{display:inline-flex}
  .cx-nav{display:none}
  .cx-header.cx-open .cx-nav{display:flex;position:fixed;left:0;right:0;top:72px;bottom:0;flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 40px;background-color:var(--cx-deep);background-image:var(--cx-grid);background-size:28px 28px;overflow-y:auto;z-index:61}
  .cx-header.cx-open .cx-nav a{font-family:var(--cx-display);font-weight:800;font-size:46px;line-height:1.15;color:#FFFFFF;padding:2px 0;border:0}
  .cx-header.cx-open .cx-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--cx-amber);text-decoration-thickness:4px;text-underline-offset:8px}
  .cx-header.cx-open .cx-nav .cx-check-m{display:block;color:var(--cx-amber) !important}
  .cx-header.cx-open .cx-nav .cx-msearch{display:block;margin:6px 0 22px}
  .cx-msearch input{width:100%;box-sizing:border-box;height:52px;border:0;border-radius:6px;padding:0 14px;font:inherit;font-family:var(--cx-body);font-size:17px;color:var(--cx-ink);background:#FFFFFF}
  .cx-header.cx-open .cx-burger .cx-bars{display:none}
  .cx-header.cx-open .cx-burger .cx-x{display:block}
  body.cx-menu-open{overflow:hidden}
}

/* ------------------------------------------------------------ the footer */
.cx-footer{background-color:var(--cx-deep);background-image:var(--cx-grid);background-size:32px 32px;color:var(--cx-on-deep-soft);padding:72px 0 44px;font-size:16px;line-height:1.6;font-family:var(--cx-body);margin-top:0;border:0;text-align:left}
.cx-fwrap{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px;box-sizing:border-box}
.cx-fcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.cx-fh{margin:0 0 10px;font-weight:700;color:#FFFFFF;font-size:16px}
.cx-fcols a{display:block;color:var(--cx-on-deep-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(207,231,225,.4);padding:3px 0}
.cx-fcols a:hover{color:#FFFFFF;text-decoration-color:#FFFFFF}
.cx-fword{margin:64px 0 0;font-family:var(--cx-word);font-weight:700;font-size:112px;line-height:.9;letter-spacing:-.02em;color:var(--cx-teal)}
.cx-fword span{color:#B87708}
.cx-fdisc{margin:20px 0 0;font-size:14px;max-width:62em;color:var(--cx-on-deep-muted)}
.cx-fdisc + .cx-fdisc{margin-top:6px}
@media (max-width:900px){
  .cx-footer{padding:52px 0 36px}
  .cx-fwrap{padding-left:16px;padding-right:16px}
  .cx-fcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .cx-fword{font-size:64px;margin-top:44px}
}

/* ------------------------------------------------- 3. inner pages: the hero band
   Library guides, year pages, tools and the hand built pages all open with a
   breadcrumb and a .page-head (or a .hero on tools). They sit inside narrow
   wrappers, so the band is drawn full width with a spread shadow and clipped
   at the sides. That keeps every generator's markup as it is. */
.crumbs,.page-head,.tool-hero,.cx-band{position:relative;background-color:var(--cx-deep);box-shadow:0 0 0 100vmax var(--cx-deep);clip-path:inset(0 -100vmax)}
.crumbs{color:var(--cx-on-deep-muted) !important;padding-top:22px !important;padding-bottom:6px !important;margin:0 !important;font-size:15px !important}
.crumbs a{color:var(--cx-mint) !important}
.crumbs span{color:var(--cx-on-deep-muted) !important}
.page-head{color:var(--cx-on-deep-soft);padding-top:14px !important;padding-bottom:52px !important;margin-bottom:44px !important;border:0 !important}
.page-head h1{color:#FFFFFF !important;font-size:clamp(44px,6.4vw,84px) !important;line-height:.94 !important;margin:6px 0 20px !important;max-width:14em}
.page-head .lead,.page-head p{color:var(--cx-on-deep-soft) !important;font-size:19px !important;max-width:38em}
.page-head .lead strong,.page-head p strong{color:#FFFFFF}
.page-head a{color:var(--cx-mint) !important}
.page-head .eyebrow{color:var(--cx-amber) !important;letter-spacing:0 !important;text-transform:none !important;font-size:16px !important;font-weight:700 !important}
.page-head .chips span,.page-head .chip{background:rgba(255,255,255,.08) !important;color:#FFFFFF !important;border-color:rgba(159,224,211,.3) !important}
.lib-search{margin-top:18px}

/* --------------------------------------------- costs, questions, findings */
.bs-cost b,.cost-figure,.bs-vc,.bs-sumc{font-family:var(--cx-display) !important;font-weight:800 !important;letter-spacing:.02em}
.bs-cost b{background:var(--cx-hl);color:var(--cx-ink) !important;padding:0 7px;border-radius:4px;font-size:1.3em}
.bs-unit h2.bs-h,.bs-rh,.bs-sec h3,.bs-next-h{font-family:var(--cx-display) !important;font-weight:800 !important;letter-spacing:.005em !important}
.bs-rh{font-size:clamp(34px,4.6vw,56px) !important;line-height:.95 !important;margin-bottom:8px !important}
.bs-it{font-family:var(--cx-display);font-weight:800;font-size:30px !important;line-height:1 !important;letter-spacing:.005em}
.bs-q{background:var(--cx-deep) !important;color:#FFFFFF !important;border:0 !important;border-radius:14px 14px 14px 2px !important;padding:14px 18px !important;font-size:16px !important;line-height:1.45}
.bs-q strong{color:var(--cx-amber) !important;letter-spacing:0 !important;text-transform:none !important;font-size:14px !important}
.bs-tag{letter-spacing:0 !important;text-transform:none !important;font-size:13px !important}
.bs-unit .bs-go{background:var(--cx-amber);color:var(--cx-ink);border-radius:6px;box-shadow:none}
.bs-item{border-radius:12px !important}

/* "N more that come with a house this age": a floor plan of rooms */
.bs-more{background:var(--cx-ink) !important;border:0 !important;border-radius:4px !important;padding:9px !important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.bs-more h3,.bs-more h4{grid-column:1/-1;background:var(--cx-paper);margin:0 !important;padding:20px 22px 6px;font-family:var(--cx-display) !important;font-size:30px !important;line-height:1}
.bs-more-item{background:var(--cx-paper);margin:0 !important;padding:18px 22px !important;border:0 !important}
.bs-more-item b{font-family:var(--cx-display);font-weight:800;font-size:24px !important;line-height:1.05;margin-bottom:6px !important}
.bs-more-item span{font-style:italic}
@media (max-width:640px){.bs-more{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------- shared big type helpers */
.cx-hl{background:var(--cx-hl);color:var(--cx-ink);padding:0 7px;border-radius:4px;font-family:var(--cx-display);font-weight:800;letter-spacing:.02em;white-space:nowrap}
.cx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;background:var(--cx-amber);color:var(--cx-ink) !important;text-decoration:none !important;border-radius:6px;font-weight:700;font-size:18px;font-family:var(--cx-body);border:0;cursor:pointer}
.cx-btn:hover{filter:brightness(1.05)}
.cx-btn-dark{background:var(--cx-deep);color:#FFFFFF !important}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important}}

/* ------------------------------------------------- year pages (/blind-spots/YYYY/) */
.yh{background-color:var(--cx-deep);background-image:var(--cx-grid);background-size:32px 32px;color:var(--cx-on-deep);margin-bottom:56px}
.yh-in{max-width:1240px;margin:0 auto;padding:22px 40px 28px;box-sizing:border-box}
.yh-crumbs{font-size:15px;color:var(--cx-on-deep-muted);margin-bottom:8px}
.yh-crumbs a{color:var(--cx-mint)}
.yh-crumbs span{padding:0 8px}
.yh-crumbs span:last-child{padding:0}
.yh-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center}
.yh-big{margin:0;font-family:var(--cx-display);font-weight:900;font-size:260px;line-height:.8;color:#FFFFFF;letter-spacing:-.01em;text-shadow:10px 10px 0 var(--cx-teal)}
.yh h1{font-size:52px !important;line-height:.95 !important;margin:26px 0 18px !important;color:#FFFFFF}
.yh-lead{margin:0;color:var(--cx-on-deep-soft);max-width:32em;font-size:18px}
.yh-lead strong{color:#FFFFFF}
.yh-art{width:100%;height:auto;display:block}
.yh-ruler{display:flex;align-items:flex-end;margin-top:24px;border-top:1px solid rgba(159,224,211,.25);padding-top:18px}
.yh-tick{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--cx-on-deep-muted);font-family:var(--cx-display);font-weight:700;font-size:18px}
.yh-tick:hover{color:#FFFFFF}
.yh-tick span{display:block;width:2px;height:18px;background:#3F7D73}
.yh-near{font-size:26px;color:#FFFFFF}
.yh-near span{height:26px;background:var(--cx-mint)}
.yh-now{font-size:34px;color:var(--cx-ink)}
.yh-now span{width:4px;height:34px;background:var(--cx-amber)}
.yh-now b{background:var(--cx-amber);padding:0 10px;border-radius:4px;font-weight:800}
.yh-cta{position:relative;background:var(--cx-teal);box-shadow:0 0 0 100vmax var(--cx-teal);clip-path:inset(0 -100vmax);color:#E8F6F2;margin:48px 0;padding:56px 0}
.yh-cta-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:center}
.yh-cta h2{font-size:52px !important;line-height:.95 !important;margin:0 0 10px;color:#FFFFFF}
.yh-cta p{margin:0}
.yh-cta-go{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.yh-cta-link{color:#FFFFFF !important;font-weight:700}
@media (max-width:900px){
  .yh-in{padding:18px 16px 22px}
  .yh-grid,.yh-cta-in{grid-template-columns:minmax(0,1fr);gap:20px}
  .yh-big{font-size:150px;text-shadow:7px 7px 0 var(--cx-teal)}
  .yh h1{font-size:40px !important}
  .yh-far{display:none}
  .yh-cta h2{font-size:40px !important}
}

/* the compact Blind Spots unit used on library pages: no capital letter labels */
.bs-compact .bs-eyebrow{text-transform:none !important;letter-spacing:0 !important;font-size:15px !important;color:var(--cx-teal) !important}
.bs-vh{text-transform:none !important;letter-spacing:0 !important;font-size:14px !important}
.lib-search:not([hidden]){position:relative;background-color:var(--cx-deep);box-shadow:0 0 0 100vmax var(--cx-deep);clip-path:inset(0 -100vmax);margin-top:0 !important;padding:16px 0 4px}

/* years and decades read better in the display face (Atkinson's zero is slashed) */
.bs-yeartap,.bs-unit .bs-year input,.bs-yearlinks a,.bs-yearnav a{font-family:var(--cx-display) !important;font-weight:700 !important;letter-spacing:.02em}
.bs-yeartap{font-size:18px !important}
.bs-unit .bs-year input{font-size:22px !important}
.page-head .flm-note{background:rgba(255,255,255,.07) !important;border:1px solid rgba(159,224,211,.3) !important;color:var(--cx-on-deep-soft) !important}
.page-head .flm-note a{color:var(--cx-mint) !important}

/* Font leak fix (Nov 2026 QA): a few older blocks still asked for Source Serif 4 or Inter,
   which are no longer loaded, so they fell back to Times or Arial. Point them at the
   house faces. The inline style on the email signup title needs !important. */
[style*="Source Serif"]{font-family:var(--cx-display) !important;font-weight:800 !important;letter-spacing:.005em !important;font-size:30px !important;line-height:1 !important}
.result .big,.plan .price{font-family:var(--cx-display) !important;font-weight:800;letter-spacing:.01em}
.plan .price small{font-family:var(--cx-body)}
.lib-search-clear,button.btn,.btn{font-family:inherit}
.oa-out .big,.basket .bk-v{font-family:var(--cx-display) !important;font-weight:800;letter-spacing:.01em}
.dl-card b,.lk-name,.gterm dt,.oa-script h2{font-family:var(--cx-display);font-weight:800;letter-spacing:.01em}
.dl-card b,.lk-name{font-size:19px}
.gterm dt{font-size:22px}