/* GENERATED by build/port_captured.py - do not hand-edit.
   Every rule is a verbatim port of an inline style, style-hover or
   style-focus from the Claude Design prototype.
   Layer order is declared in css/fonts.css; it reproduces the
   prototype's real precedence, where inline styles beat the page's own
   stylesheet and JS-applied hover beats both. */

@layer proto-scoped {
:root{
    --cream:#EAE3D6;
    --paper:#F4F0E8;
    --ink:#3B3128;
    --brown:#494134;
    --slate:#6B6459;
    --mist:#9dacb5;
    --line:#DCD4C5;
    --serif:'STIX Two Text', Georgia, serif;
    --sans:'neue-haas-grotesk-text','Neue Haas Grotesk Text Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);font-weight:300;background:var(--paper);color:var(--ink);font-size:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased}
  img{display:block;width:100%;height:auto}
  a{color:inherit;text-decoration:none}
  .label{font-size:var(--eyebrow);letter-spacing:.28em;text-transform:uppercase;font-weight:400;color:var(--brown)}
  h1,h2,h3{font-family:var(--serif);font-weight:400}
  .btn{display:inline-block;font-size:var(--eyebrow);letter-spacing:.28em;text-transform:uppercase;border:1px solid var(--ink);padding:16px 42px;transition:all .3s;font-weight:400;cursor:pointer;background:transparent;font-family:var(--sans)}
  .btn:hover{background:var(--ink);color:var(--paper)}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  .custom{background:var(--ink);color:var(--cream);text-align:center;padding:var(--space-6) var(--margin-page)}
  .custom h2{color:var(--cream);font-size:var(--h2);margin:14px 0 18px}
  .custom p{color:var(--line);max-width:54ch;margin:0 auto 36px}
  .custom .label{color:var(--mist);display:block}
  .custom .btn{border-color:rgba(234,227,214,.4);color:var(--cream)}
  .custom .btn:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
  @media(max-width:900px){
    [data-mq="nav-links"]{gap:18px!important}
    [data-mq="band"]{grid-template-columns:1fr!important;gap:44px!important}
    [data-mq="chart"]{font-size:11px!important}
    [data-mq="chart"]>div{grid-template-columns:1.4fr 1fr 1fr 1fr!important;gap:8px!important}
    [data-mq="homes"]{grid-template-columns:1fr!important}
    [data-mq="included"]{grid-template-columns:1fr!important;gap:40px!important}
    [data-mq="footer"]{grid-template-columns:1fr!important}
    .custom{padding:70px 24px}
  }
}

@layer proto-inline {
.pl-s1{position: fixed; top: 0px; left: 0px; right: 0px; z-index: 20; background: rgba(244, 240, 232, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line)}
.pl-s2{margin: 0px auto; padding: 0 0 0 0; height: 76px; display: flex; align-items: center; justify-content: space-between}
.pl-s3{height: 26px; display: block}
.pl-s4{display: flex; gap: 40px; align-items: center}
.pl-s5{font-size: var(--small); letter-spacing: 0.06em; text-decoration: none; color: var(--brown)}
.pl-s6{margin: 76px auto 0px; padding: var(--space-6) 0 var(--space-5) 0}
.pl-s7{display: block; margin-bottom: 26px}
.pl-s8{font-size: var(--h1); line-height: 1.14; margin: 0px; max-width: 20ch}
.pl-s9{margin: 26px 0px 0px; max-width: 56ch; color: var(--warm-gray)}
.pl-s10{margin: 0px auto; padding: 0 0 var(--space-6) 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px}
.pl-s11{display: flex; flex-direction: column}
.pl-s12{overflow: hidden; position: relative; background: var(--cream)}
.pl-s13{aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%; display: block}
.pl-s14{position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; background: rgba(20, 17, 14, 0); opacity: 0; transition: opacity 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.pl-s15{font-size: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: rgb(244, 240, 232)}
.pl-s16{font-size: var(--h4); margin: 20px 0px 4px}
.pl-s17{font-size: var(--eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin: 0px 0px 20px}
.pl-s18{font-size: var(--small); color: var(--warm-gray); margin: 0px 0px 14px; max-width: 44ch}
.pl-s19{aspect-ratio: 4 / 3; object-fit: cover; object-position: center 38%; display: block}
.pl-s20{aspect-ratio: 4 / 3; width: 100%; object-fit: cover; object-position: center 36%; transform: translateX(4.56%) scale(1.12); display: block}
.pl-s21{font-size: var(--eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin: 0px 0px 14px}
.pl-s22{padding: var(--space-5) 0 var(--space-5) 0; background: var(--cream)}
.pl-s23{margin: 0px auto; display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start}
.pl-s24{font-size: var(--h4); line-height: 1.4; margin: 0px; max-width: 20ch}
.pl-s25{color: var(--warm-gray); max-width: 52ch; margin: 0px}
.pl-s26{display: inline-block; margin-top: 24px; font-size: var(--small); letter-spacing: 0.06em; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px}
.pl-s27{padding: var(--space-6) 0 var(--space-6) 0}
.pl-s28{margin: 0px auto}
.pl-s29{margin-bottom: 56px}
.pl-s30{color: var(--warm-gray); max-width: 56ch; margin: 18px 0px 0px; font-size: var(--body)}
.pl-s31{overflow-x: auto}
.pl-s32{display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 16px; align-items: end; padding: 0px 0px 18px}
.pl-s33{margin: 0px}
.pl-s34{text-align: center}
.pl-s35{font-size: var(--eyebrow); letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); margin: 0px 0px 6px}
.pl-s36{font-size: var(--h4); margin: 0px}
.pl-s37{display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 16px; align-items: center; padding: 15px 0px; border-top: 1px solid var(--line)}
.pl-s38{margin: 0px; font-size: var(--small); color: var(--warm-gray); line-height: 1.5}
.pl-s39{margin: 0px; text-align: center}
.pl-s40{font-size: var(--body); color: var(--ink)}
.pl-s41{color: var(--line)}
.pl-s42{border-top: 1px solid var(--line)}
.pl-s43{font-size: var(--eyebrow); color: var(--slate); margin: 16px 0px 0px; line-height: 1.6}
.pl-s44{background: var(--ink); color: var(--cream); padding: 0px}
.pl-s45{margin: 0px auto; padding: var(--space-5) 0 var(--space-4) 0; display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr; gap: 24px; align-items: start}
.pl-s46{height: 22px; width: auto; filter: invert(93%) sepia(8%) saturate(300%) hue-rotate(340deg) brightness(103%)}
.pl-s47{font-size: var(--eyebrow); font-family: var(--sans); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(234, 227, 214, 0.65); margin: 0px 0px 30px}
.pl-s48{display: flex; flex-direction: column; gap: 12px; font-size: var(--small)}
.pl-s49{color: var(--cream); text-decoration: none}
.pl-s50{transform: translateX(-18px)}
.pl-s51{color: rgba(234, 227, 214, 0.85)}
.pl-s52{margin: 0px auto; padding: var(--space-4) 0 var(--space-4) 0; display: flex; justify-content: space-between; gap: 16px; font-size: var(--small); letter-spacing: 0.02em; color: rgba(234, 227, 214, 0.55)}
}

@layer proto-state {
.pl-h1:hover,a:hover .pl-h1,a:focus-visible .pl-h1{color:var(--ink)}
.pl-h2:hover,a:hover .pl-h2,a:focus-visible .pl-h2{opacity:1;background:rgba(20,17,14,.58)}
.pl-h3:hover,a:hover .pl-h3,a:focus-visible .pl-h3{color:var(--brown);border-color:var(--brown)}
.pl-h4:hover,a:hover .pl-h4,a:focus-visible .pl-h4{text-decoration:underline;text-underline-offset:3px}
}