:root{color:#18211c;background:#f6f4ec;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}main{min-height:100vh}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:32px;align-items:end;min-height:78vh;padding:56px clamp(20px,5vw,72px) 36px;background:linear-gradient(90deg,#131f1bcc,#131f1b61 58%,#131f1bb3),url(/assets/deck-hero.png) center / cover;color:#fffdf7}.hero-copy{max-width:760px}.eyebrow{margin:0 0 10px;color:#d66f43;font-size:.78rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.hero .eyebrow{color:#ffcf93}h1,h2,h3,p{margin-top:0}h1{margin-bottom:16px;font-size:clamp(3.5rem,9vw,7rem);line-height:.9;letter-spacing:0}h2{margin-bottom:20px;font-size:clamp(1.75rem,4vw,3rem);line-height:1;letter-spacing:0}h3{margin-bottom:8px;font-size:1rem}.hero p{max-width:620px;margin-bottom:0;color:#fff6e4;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.5}.hero-panel{display:grid;gap:8px;padding:24px;border:1px solid rgba(255,255,255,.4);border-radius:8px;background:#131f1bb8;box-shadow:0 24px 60px #0003;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.hero-panel span,.hero-panel small{color:#fee8c7;font-weight:700}.hero-panel strong{font-size:clamp(1.8rem,4vw,3rem)}.material-toggle{display:grid;gap:8px;margin-top:8px;color:#fee8c7;font-weight:800}.hero-panel .segmented{border-color:#ffffff57;background:#fffdf71f}.hero-panel .segmented button{color:#fffdf7}.hero-panel .segmented button.active{background:#ffcf93;color:#17231d}.section-nav{position:sticky;top:0;z-index:10;display:flex;gap:6px;overflow-x:auto;padding:10px clamp(16px,5vw,72px);border-bottom:1px solid #ded8c9;background:#f6f4eceb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.section-nav a{flex:0 0 auto;padding:9px 12px;border-radius:999px;color:#213228;font-size:.9rem;font-weight:750;text-decoration:none}.section-nav a:hover{background:#e8dfcf}.band,.split,.stats{padding:72px clamp(20px,5vw,72px)}.band{background:#f6f4ec}.split{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(320px,1.22fr);gap:clamp(28px,5vw,64px);align-items:start;background:#fffdf7}.overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.overview-grid article,.stats article{min-height:150px;padding:22px;border:1px solid #ded8c9;border-radius:8px;background:#fffdf7}.overview-grid p,.body-copy,.steps,.checklist,.table-wrap{color:#405147;line-height:1.55}.control-card{display:grid;gap:16px;padding:18px;border:1px solid #dad3c3;border-radius:8px;background:#f8f4e9}.control-card label{display:grid;gap:8px;color:#26342c;font-weight:800}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid #cdc5b3;border-radius:8px;background:#fffdf7}.segmented button{min-height:42px;border:0;border-radius:6px;background:transparent;color:#314238;font-weight:800;cursor:pointer}.segmented button.active{background:#274437;color:#fffdf7}.number-field div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border:1px solid #cdc5b3;border-radius:8px;background:#fffdf7}.number-field input{width:100%;min-height:44px;border:0;border-radius:8px;background:transparent;padding:0 12px;color:#17231d}.number-field small{padding-right:12px;color:#68766d;font-size:.85rem;font-weight:750}.diagram-card{margin:0}.diagram-card figcaption{margin-bottom:10px;color:#44534a;font-weight:800}svg{display:block;width:100%;height:auto;border:1px solid #d9d1bf;border-radius:8px;background:#efe7d6}svg text{fill:#203027;font-size:18px;font-weight:800}.house{fill:#c05f3c}.deck-surface{fill:#d7b47f;stroke:#8d6841;stroke-width:3}.board-line{stroke:#8d6841;stroke-width:2}.joist-line{stroke:#1f2f278c;stroke-dasharray:7 8;stroke-width:3}.diagram-label{fill:#314238;font-size:16px}.trough{fill:#9cc8cf;stroke:#397586;stroke-width:2}.flow{stroke:#1b6677;stroke-width:4}.arrow{fill:#1b6677}.gutter{fill:#516260}.downspout{fill:#344341}.table-wrap{overflow-x:auto;border:1px solid #ded8c9;border-radius:8px;background:#fffdf7}table{width:100%;min-width:1040px;border-collapse:collapse}th,td{padding:16px;border-bottom:1px solid #e6dfd0;text-align:left;vertical-align:top}th{color:#17231d;font-size:.8rem;text-transform:uppercase}tr:last-child td{border-bottom:0}.product-link{color:#1f6f5a;font-weight:850;text-decoration-color:#1f6f5a59;text-underline-offset:3px}.product-link:hover{color:#154a3d}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;background:#2b4336}.stats article{min-height:132px;background:#f8f3e7}.stats span{display:block;margin-bottom:10px;color:#59685f;font-weight:800}.stats strong{color:#17231d;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1}.steps{display:grid;gap:14px;margin:0;padding-left:24px}.steps li{padding-left:8px}.note-grid{display:grid;gap:10px;margin-top:22px}.note-grid span,.tools span{display:inline-flex;align-items:center;min-height:44px;padding:10px 13px;border:1px solid #d9d1bf;border-radius:8px;background:#fffdf7;color:#314238;font-weight:750}.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.tools>div{grid-column:1 / -1}.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.checklist label{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:16px;border:1px solid #ded8c9;border-radius:8px;background:#fffdf7}.checklist input{width:18px;height:18px;margin-top:2px;accent-color:#2b6b55}@media(max-width:900px){.hero,.split{grid-template-columns:1fr}.hero{min-height:720px}.overview-grid,.stats,.tools,.checklist{grid-template-columns:1fr 1fr}}@media(max-width:620px){.hero{min-height:680px;padding-top:38px}h1{font-size:3.25rem}.band,.split,.stats{padding:52px 16px}.overview-grid,.stats,.tools,.checklist,.segmented{grid-template-columns:1fr}}