/* Shared rhythm for Sonoma's marketing, utility, product and owner pages. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700;800&display=swap');
:root{--site-width:1160px;--site-gutter:clamp(20px,4vw,32px);--site-section:clamp(56px,7vw,96px);--site-gap:24px}
html{scroll-padding-top:96px}
body{font-family:Inter,system-ui,sans-serif;font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
img,video{max-width:100%}
input,select,textarea{min-width:0}
h1,h2,h3,h4{font-family:Sora,system-ui,sans-serif;text-wrap:balance}
p{overflow-wrap:break-word}
a,button,input,select,textarea{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:3px solid #4d8e95;outline-offset:5px}
.brand{flex-shrink:0;max-width:100%}
.brand img{display:block;width:clamp(165px,19vw,218px)!important;height:auto!important;aspect-ratio:1955/335;object-fit:contain!important;background:transparent!important;border-radius:0!important}
.brand>span,.brand>div{display:none}
:is(.btn,.button,.miniCta){min-height:48px;align-items:center;justify-content:center;line-height:1.4;text-align:center;white-space:normal}
:is(.eyebrow,.kicker,.tag,.crumbs){font-size:.875rem;line-height:1.5}
:is(.cards,.grid,.prods,.feature-grid,.two-col,.fitGrid,.explainGrid,.fgrid)>*{min-width:0}
.site-home .wrap{max-width:var(--site-width);padding-inline:var(--site-gutter)}
.site-home .section{padding-block:var(--site-section)}
.site-home .head{margin-bottom:40px;max-width:760px}
.site-home .head h2{line-height:1.18}
.site-home :is(.cards,.split,.prods,.finance-grid,.review-grid){gap:var(--site-gap);align-items:stretch}
.site-home :is(.how,.about,.contact){gap:clamp(28px,5vw,56px)}
.site-home .card{padding:clamp(24px,3vw,32px)}
.site-home .card h3{margin-bottom:12px}
.site-home .card p{font-size:1rem;line-height:1.7}
.site-home .prod{display:flex;flex-direction:column}
.site-home .prod p{line-height:1.7}
.site-home #about .about-photos img{aspect-ratio:4/5;margin-top:0}
.site-home .nav-shell{max-width:1184px;margin-inline:16px}
.site-home .nav{gap:20px;padding:16px 24px}
.site-home .nav-links{gap:clamp(14px,1.7vw,24px)}
.site-home .nav-cta{gap:16px}
.site-home footer{padding:64px 0 28px}
.site-home .fgrid{gap:40px 32px;align-items:start}
.site-home .fbrand img{width:220px!important;height:auto;max-width:100%;margin-bottom:24px;filter:none!important}
.site-home .fbrand p{font-size:1rem;line-height:1.7;max-width:30ch}
.site-home footer h4{font-size:.875rem;margin-bottom:20px}
.site-home footer ul{gap:12px}
.site-home footer ul a{font-size:.9375rem;line-height:1.6}
.site-home .socials{margin-top:24px}
.site-home .socials a{width:44px;height:44px}
:is(.site-guide,.site-plan)>header{max-width:var(--site-width);padding:24px var(--site-gutter);gap:24px;border-bottom:1px solid #dfe5df}
:is(.site-guide,.site-plan)>main{max-width:var(--site-width);padding:var(--site-section) var(--site-gutter)}
.site-guide h1{font-size:clamp(2.25rem,5.5vw,4.25rem);line-height:1.12;margin:16px 0 24px;max-width:950px}
.site-guide h2{line-height:1.25;margin-bottom:16px}
.site-guide .lead{font-size:1.125rem;line-height:1.8;margin-block:0 24px}
.site-guide :is(.grid,.role-grid,.two-col){gap:24px;margin-top:32px;align-items:stretch}
.site-guide :is(.grid section,.wide,.role-card){padding:clamp(24px,3vw,32px);border-radius:20px}
.site-guide :is(.grid section,.role-card) p:last-child{margin-bottom:0}
.site-guide li+li{margin-top:8px}
.site-guide .facts{gap:24px;margin-top:40px}
.site-guide .fact{padding:24px}
.site-guide .plan-note{font-size:.8125rem;line-height:1.6}
.site-guide .grid section .button{align-self:flex-start;margin-top:auto}
.site-guide .actions{gap:12px;margin-top:28px}
.site-guide .button{display:inline-flex;font-size:.9375rem}
:is(.site-guide,.site-plan)>footer{max-width:var(--site-width);padding:28px var(--site-gutter) 36px;line-height:2}
.site-product .nav{max-width:var(--site-width);padding:20px var(--site-gutter)}
.site-product .hero-inner{gap:clamp(32px,5vw,64px);padding:var(--site-section) var(--site-gutter) 88px}
.site-product h1{font-size:clamp(2.4rem,5.5vw,4.5rem);line-height:1.1}
.site-product .hero-copy{font-size:1.125rem;line-height:1.8}
.site-product .section{padding:var(--site-section) var(--site-gutter)}
.site-product .section-heading{margin-bottom:36px}
.site-product :is(.feature-grid,.two-col){gap:24px;align-items:stretch}
.site-product .feature{padding:32px;border:1px solid #dfe5df;box-shadow:0 12px 36px -24px #08202240}
.site-product .feature p{font-size:1rem;line-height:1.7}
.site-product .product-visual{min-height:0;aspect-ratio:1/1;padding:32px;border-radius:24px}
.site-product .product-visual.blueprint{padding:0}
.site-product .product-visual img{max-height:100%;object-fit:contain}
.site-product .product-visual.blueprint img{object-fit:contain}
.site-product .fact small{font-size:.8125rem;line-height:1.5}
.site-product .fact{padding:24px}
.site-product .panel{padding:clamp(24px,3vw,36px)}
.site-product .cta{margin-bottom:var(--site-section);padding:clamp(28px,4vw,48px);gap:32px}
.site-product .footer-inner{padding:32px var(--site-gutter);gap:24px;font-size:.9375rem}
.site-plan>main{padding-top:40px}
.site-plan .plan-hero{margin-bottom:40px}
.site-plan .plan-hero-content{max-width:var(--site-width);padding:88px var(--site-gutter) 64px}
.site-plan .form{margin:40px auto 0;padding:clamp(24px,4vw,40px)}
.site-plan :is(.path-grid,.example-controls,.example-grid,.fields,.plan-grid){gap:20px}
.site-plan .path-card{padding:24px;height:100%}
.site-plan .path-card p{font-size:1rem;line-height:1.7}
.site-plan :is(label,.hint,.consent){font-size:.9375rem;line-height:1.65}
.site-plan :is(.path-label,.fine,.example-note,.path-disclaimer,.plan-hero-caption){font-size:.8125rem!important;line-height:1.65}
.site-plan .path-example{padding:24px;margin-top:24px}
.site-plan .field{gap:8px}
.site-plan input:not([type=checkbox]),.site-plan select{min-height:48px}
.site-plan .plan-body{padding:clamp(24px,4vw,36px)}
:is(.aboutPage,.productsPage){font-family:Inter,system-ui,sans-serif;line-height:1.7}
:is(.aboutPage,.productsPage) .wrap{width:min(var(--site-width),calc(100% - var(--site-gutter)*2))}
:is(.aboutPage,.productsPage) .bar{padding:20px 0}
:is(.aboutPage,.productsPage) .hero{min-height:560px;padding:104px 0 72px}
:is(.aboutPage,.productsPage) h1{font-size:clamp(2.5rem,6vw,5rem);line-height:1.08;letter-spacing:-.045em}
:is(.aboutPage,.productsPage) h2{line-height:1.2}
:is(.aboutPage,.productsPage) .lead{font-size:1.125rem;line-height:1.8}
.aboutPage .story{gap:48px;padding-block:var(--site-section)}
.aboutPage .photos{gap:16px;align-items:stretch}
.aboutPage .photos img{height:auto;aspect-ratio:4/5;border-radius:20px;margin-top:0}
.aboutPage .photos img:last-child{margin-top:0}
.aboutPage .values{padding-block:var(--site-section)}
.aboutPage .cards{gap:24px;align-items:stretch}
.aboutPage .card{padding:28px}
.aboutPage .card p{margin-bottom:0}
.aboutPage .values .eyebrow{color:#89c7cd}
.productsPage :is(.catalog,.fit,.explain,.closing){padding-block:var(--site-section)}
.productsPage :is(.grid,.fitGrid,.explainGrid){gap:24px;align-items:stretch}
.productsPage .card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.productsPage .content{padding:28px}
.productsPage .card h3{font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.25}
.productsPage .pic img{height:100%;object-fit:contain}
:is(.aboutPage,.productsPage) footer{padding:36px 0;font-size:.9375rem;line-height:1.7}
:is(.aboutPage,.productsPage) .footerLinks{gap:16px 24px;margin-bottom:16px}
.ownerPage{width:100%;max-width:1160px!important;margin:0 auto!important;padding:clamp(24px,5vw,56px)!important;line-height:1.7}
.ownerPage nav{flex-wrap:wrap}
.ownerPage article{min-width:0;overflow-wrap:anywhere}
@media(min-width:1216px){.site-home .nav-shell{margin-inline:auto}}
@media(max-width:1100px){.site-home .nav-phone{display:none}.site-home .nav-links{gap:16px}.productsPage .phone{display:none}.productsPage .card{grid-template-columns:1fr}.productsPage .pic{aspect-ratio:4/3;max-height:340px}.productsPage .pic img{height:100%;max-height:100%}}
@media(max-width:900px){.site-home .nav-links{display:none}.site-home .hamburger{display:flex}.site-home .nav-shell.open .nav-links{display:flex;position:absolute;top:calc(100% + 12px);left:16px;right:16px;flex-direction:column;align-items:stretch;background:#081416;border:1px solid #ffffff25;border-radius:20px;padding:24px;gap:20px}.site-home .nav-shell.open .nav-links a{display:block;color:#fff;padding:4px 0}.aboutPage .story{grid-template-columns:1fr}.aboutPage .photos{max-width:650px}.site-product .hero-inner{grid-template-columns:1fr}.site-product .product-visual{width:100%;max-width:580px;margin:auto}.site-guide .grid{grid-template-columns:1fr}}
@media(max-width:700px){.brand img{width:165px!important}.site-home .nav{padding:14px 16px;gap:12px}.site-home .nav-shell{margin:12px 12px 0}.site-home .nav-cta{gap:8px}.site-home .nav-cta .btn{font-size:.875rem;padding:10px 14px}.site-home .head{margin-bottom:32px}.site-home :is(.cards,.split,.finance-grid,.review-grid,.fgrid){grid-template-columns:1fr}.site-home footer{padding-top:48px}.site-home .fgrid{gap:32px}.site-home .hero{padding-bottom:72px}.site-product .hero-inner{padding:56px var(--site-gutter) 72px}.site-product .feature-grid,.site-product .two-col{grid-template-columns:1fr}.site-guide .facts{grid-template-columns:1fr}.site-guide :is(.grid,.facts,.role-grid,.two-col){gap:20px}.site-plan :is(.fields,.path-grid,.example-controls,.example-grid,.plan-grid){grid-template-columns:1fr}.site-plan .plan-hero-content{padding:72px var(--site-gutter) 48px}.site-plan .form{margin-top:32px}.site-plan .field.full{grid-column:auto}.site-plan .path-card{padding:20px}:is(.aboutPage,.productsPage) .hero{min-height:460px;padding:72px 0 48px}.aboutPage .cards{grid-template-columns:1fr}.aboutPage .story{gap:32px}.productsPage .grid{grid-template-columns:1fr}.productsPage .nav{align-items:center;flex-wrap:wrap;gap:16px}.productsPage .navActions{width:100%;justify-content:space-between;gap:12px}.productsPage .email{font-size:.875rem}.aboutPage .nav{align-items:flex-start;gap:16px}.aboutPage .contactLinks{justify-content:flex-start;gap:12px 24px}.site-product .nav{gap:16px}.site-product .cta-actions{display:flex;width:100%}.site-product .cta-actions .button{flex:1 1 200px}.site-product .footer-inner{flex-wrap:wrap}.site-product .footer-links{gap:16px}.ownerPage header nav{gap:12px!important}}
@media(max-width:420px){.site-home .brand img{width:142px!important}.site-home .nav-cta .btn{font-size:.8125rem;padding:10px 12px}.site-home .hamburger{padding:8px 4px}.site-guide>header,.site-plan>header{flex-wrap:wrap;gap:16px}.site-product .nav-links .nav-cta{font-size:.8125rem;padding:10px 12px}.site-product .nav{gap:10px}.aboutPage .contactLinks{font-size:.875rem}.productsPage .navActions{justify-content:flex-start}.site-home .prods{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}
@media print{.site-plan>main{padding:0}.site-plan .plan-body{padding:18px}.site-plan .plan-grid{grid-template-columns:repeat(3,1fr)}}

/* Phone headers: a clear brand row and a separate, balanced primary action. */
@media(max-width:700px){
  :root{--site-gutter:20px;--site-section:56px}
  .site-home .nav-shell{position:relative;margin:10px 12px 0;border-radius:20px}
  .site-home .nav{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px 12px;padding:10px 14px}
  .site-home .brand{grid-column:1;grid-row:1;min-width:0;max-width:100%;align-self:center}
  .site-home .brand img{width:min(180px,100%)!important}
  .site-home .nav-cta{display:contents}
  .site-home .nav-cta>.btn{grid-column:1/-1;grid-row:2;min-height:44px;width:100%;margin:0;padding:10px 14px;border-radius:12px;font-size:.9375rem;line-height:1.4;box-shadow:none}
  .site-home .hamburger{grid-column:2;grid-row:1;width:44px;height:44px;padding:10px;align-items:center;justify-content:center;gap:5px;border-radius:10px}
  .site-home .hamburger:focus-visible{outline-offset:2px}
  .site-home .nav-shell.open .nav-links{top:calc(100% + 8px);left:0;right:0;padding:12px;border-radius:16px;gap:2px;max-height:calc(100dvh - 160px);overflow-y:auto}
  .site-home .nav-shell.open .nav-links a{min-height:44px;display:flex;align-items:center;padding:10px 12px;font-size:1rem}
  .site-home .nav-shell.open .nav-links a::after{display:none}
  .site-home .hero{min-height:0;padding:180px 0 64px}
  .site-home .hero-grid{gap:32px}
  .site-home .hero h1{font-size:clamp(2rem,8.5vw,3rem);line-height:1.16;letter-spacing:-.035em}
  .site-home .hero-cta{display:flex;flex-wrap:wrap;gap:12px}
  .site-home .hero-cta .btn{width:100%}
  .site-home .fab{right:16px;bottom:max(16px,env(safe-area-inset-bottom));font-size:.875rem;padding:12px 16px}
  :is(.site-guide,.site-plan)>header{flex-direction:column;align-items:flex-start;gap:12px;padding-block:18px}
  :is(.site-guide,.site-plan)>header .phone{font-size:.9375rem}
  .site-product .nav{flex-wrap:wrap;gap:14px;padding-block:18px}
  .site-product .nav>.nav-links{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
  .site-product .nav-links .nav-cta{font-size:.9375rem;padding:10px 14px}
  :is(.aboutPage,.productsPage) .bar{padding:18px 0}
  :is(.aboutPage,.productsPage) .nav{flex-direction:column;align-items:flex-start;gap:16px}
  .aboutPage .contactLinks{width:100%;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.9375rem}
  .productsPage .navActions{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:12px}
  .productsPage .navActions .email{font-size:.9375rem;overflow-wrap:anywhere;white-space:normal}
  .productsPage .miniCta{width:100%;border-radius:12px;font-size:.9375rem}
  .aboutPage .photos{gap:12px}
  .site-home .prods{grid-template-columns:1fr}
}