:root{--green-950:#003a34;--green-900:#00473e;--green-800:#07574b;--green-700:#0f6c5c;--cream:#f5e5c2;--paper:#fffaf0;--paper-2:#f8edda;--red:#d44738;--red-dark:#b92f25;--ink:#073f38;--muted:#5f6d68;--line:#c9b99b;--gold:#c5a46c;--shadow:0 24px 60px rgba(6,56,48,.12);--radius:18px;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}img,svg{max-width:100%}button,input,select{font:inherit}button{cursor:pointer}.container{width:min(calc(100% - 42px),var(--max));margin:auto}.narrow{width:min(calc(100% - 42px),820px);margin:auto}.skip-link{position:absolute;left:-9999px;top:10px;z-index:200}.skip-link:focus{left:10px;background:#fff;padding:10px 14px;border-radius:8px}h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;line-height:1.05;letter-spacing:-.025em;margin:0}h1{font-size:clamp(46px,7vw,88px)}h2{font-size:clamp(34px,4.4vw,54px)}h3{font-size:23px}.lead{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:680px}.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 15px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;font-size:13px}.eyebrow:after{content:"";width:48px;height:2px;background:var(--red)}.muted{color:var(--muted)}.red{color:var(--red)}
.site-header{position:sticky;top:0;z-index:100;background:rgba(0,66,58,.97);border-bottom:1px solid rgba(245,229,194,.18);backdrop-filter:blur(16px)}.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:inline-flex;align-items:center;text-decoration:none}.brand-logo{display:block;width:365px;max-width:38vw}.nav-links{display:flex;align-items:center;gap:40px}.nav-links>a{position:relative;color:var(--cream);text-decoration:none;font-weight:700;padding:28px 0 24px}.nav-links>a:hover,.nav-links>a.active{color:#fff}.nav-links>a.active:after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;background:var(--red)}.nav-dropdown{position:relative}.nav-dropdown summary{list-style:none;color:var(--cream);font-weight:700;cursor:pointer;padding:28px 0 24px}.nav-dropdown summary::-webkit-details-marker{display:none}.dropdown{display:none;position:absolute;top:68px;left:-22px;min-width:240px;padding:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.nav-dropdown[open] .dropdown{display:grid}.dropdown a{padding:11px 12px;border-radius:9px;text-decoration:none;font-size:14px}.dropdown a:hover{background:var(--paper-2)}.menu-button{display:none;background:none;border:0;color:var(--cream);font-size:26px}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 20%,#0b6759 0,#00473e 43%,#003a34 100%);color:var(--cream);padding:64px 0 42px}.hero:after,.dark-band:after{content:"";position:absolute;right:-95px;bottom:-145px;width:360px;height:360px;border:1px solid rgba(245,229,194,.2);border-radius:50%;box-shadow:0 0 0 58px rgba(245,229,194,.04),0 0 0 116px rgba(245,229,194,.035)}.hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:56px}.hero h1{max-width:640px}.hero .lead{color:rgba(255,250,240,.82)}.hero .eyebrow{color:var(--cream)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.button{min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:11px;background:var(--red);color:#fff;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 10px 25px rgba(151,39,30,.2);transition:.2s}.button:hover{transform:translateY(-2px);background:var(--red-dark)}.button.cream{background:var(--cream);color:var(--green-950);box-shadow:none}.button.outline{background:transparent;border-color:var(--line);color:var(--ink);box-shadow:none}.button.small{min-height:38px;padding:0 14px;font-size:13px}.text-link{font-weight:800;color:var(--red);text-decoration:none}.text-link:after{content:" ›"}.store-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}.store-badge{min-width:178px;padding:8px 15px;border-radius:10px;background:var(--cream);color:#122f2b;display:grid;grid-template-columns:34px 1fr;column-gap:8px;align-items:center;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.12)}.store-badge .store-icon{grid-row:1/3;font-size:28px}.store-badge small{font-size:10px;line-height:1}.store-badge strong{font-size:18px;line-height:1.1}
.quick-card{position:relative;z-index:1;background:rgba(255,250,240,.97);color:var(--ink);padding:28px;border-radius:18px;box-shadow:var(--shadow)}.quick-card h2{font-size:38px}.quick-input{display:grid;grid-template-columns:1fr 74px;gap:9px;margin-top:20px}.input,.select{width:100%;min-height:54px;padding:0 15px;background:#fffaf2;border:1px solid #a99779;border-radius:9px;color:var(--ink);outline:0}.input:focus,.select:focus{border-color:var(--green-700);box-shadow:0 0 0 4px rgba(15,108,92,.12)}.quick-card .input{font-size:28px;font-weight:800}.quick-card .button{min-height:54px;padding:0 17px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.segmented button{min-height:45px;border:1px solid #cdbd9f;background:transparent;border-radius:9px;font-weight:800;color:var(--ink)}.segmented button.active{background:var(--green-800);border-color:var(--green-800);color:#fff}.ruler-demo{height:104px;margin-top:24px;border:1px solid var(--green-800);border-radius:8px;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 10px,var(--green-800) 10px 11px)}.ruler-labels{height:43px;margin-top:60px;display:grid;grid-template-columns:repeat(5,1fr);background:var(--paper)}.ruler-labels span{display:grid;place-items:center;border-right:1px solid var(--line);font-family:Georgia,serif;font-weight:800}.ruler-labels .active{background:var(--red);color:#fff}
.section{padding:68px 0}.section.alt{background:var(--paper-2);border-block:1px solid rgba(116,92,55,.18)}.section.white{background:#fffdf8}.section-head{display:flex;justify-content:space-between;gap:36px;align-items:end;margin-bottom:30px}.section-head p{max-width:520px;margin:0;color:var(--muted)}.accent-line{width:46px;height:3px;background:var(--red);margin-bottom:14px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.card{background:rgba(255,250,240,.85);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 10px 25px rgba(0,55,47,.04)}.card p{color:var(--muted);margin:9px 0 0}.tool-card{display:flex;align-items:center;gap:18px;text-decoration:none}.tool-icon{flex:0 0 66px;height:58px;display:grid;place-items:center;border-right:1px solid var(--line);color:var(--green-800);font:700 31px/1 Georgia,serif}.tool-card .arrow{margin-left:auto;color:var(--red);font-size:27px}.topic-card{text-align:center;padding:18px 12px}.topic-card .tool-icon{margin:0 auto 10px;border:0}.topic-card h3{font-size:19px}.article-card{padding:0;overflow:hidden}.article-media{height:170px;background:#d9c7a7;position:relative;overflow:hidden}.article-media.door{background:linear-gradient(135deg,#dfe3d2,#d0b181 45%,#6e4428 46%,#3a2418 71%,#a3b989 72%)}.article-media.stairs{background:linear-gradient(145deg,#e7dfd1 0 46%,#9d866b 47% 52%,#f6f0e7 53%)}.article-media.compass-art{background:radial-gradient(circle,#f8e8c3 0 17%,#0b5b4f 18% 20%,#f8e8c3 21% 40%,#c5a46c 41% 43%,#f2dfb4 44%)}.article-media.room{background:linear-gradient(120deg,#e5dccd 0 55%,#b48b64 56% 72%,#d8c3a1 73%)}.article-body{padding:18px}.tag{display:inline-flex;padding:5px 9px;background:#efe1c6;border-radius:999px;font-size:11px;font-weight:800}.meta{display:flex;gap:12px;color:var(--muted);font-size:12px;margin-top:14px}.feature-article{display:grid;grid-template-columns:1.15fr .85fr;padding:0;overflow:hidden}.feature-article .article-media{height:auto;min-height:320px}.feature-article .article-body{padding:28px}.article-stack{display:grid;gap:14px}.article-small{display:grid;grid-template-columns:44% 56%;padding:0;overflow:hidden}.article-small .article-media{height:145px}.article-small .article-body{padding:16px}.article-small h3{font-size:20px}
.dark-band{position:relative;overflow:hidden;background:var(--green-900);color:var(--cream);padding:40px 0}.dark-band h2{font-size:40px}.app-strip{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.app-icon{width:142px;height:142px;border-radius:30px;background:var(--cream);display:grid;place-items:center}.app-icon img{width:92px}.phone-stage{display:flex;justify-content:center;align-items:end;gap:14px;min-height:450px}.phone{width:240px;border:4px solid #153d36;border-radius:34px;padding:10px;background:#173d37;box-shadow:0 25px 45px rgba(0,0,0,.22)}.phone.secondary{width:210px;transform:translateY(-8px)}.phone-screen{min-height:406px;border-radius:24px;background:var(--paper);overflow:hidden;color:var(--ink)}.phone-bar{padding:15px;background:var(--green-800);color:var(--cream);font-weight:800;text-align:center}.phone-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}.phone-tile{min-height:92px;padding:10px 5px;border:1px solid var(--line);border-radius:9px;text-align:center;font-size:12px;font-weight:800;display:grid;place-items:center}.mini-compass{position:relative;width:155px;height:155px;border:2px solid var(--green-800);border-radius:50%;margin:28px auto;background:repeating-conic-gradient(from 0deg,transparent 0 4deg,rgba(7,63,56,.25) 4deg 5deg,transparent 5deg 10deg)}.mini-compass:before{content:"";position:absolute;inset:24px;border:2px solid var(--gold);border-radius:50%;background:conic-gradient(from -18deg,var(--red) 0 18deg,transparent 18deg 180deg,var(--green-800) 180deg 198deg,transparent 198deg)}.mini-compass:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--cream);border:2px solid var(--green-800);left:50%;top:50%;transform:translate(-50%,-50%)}
.page-hero{background:var(--green-900);color:var(--cream);padding:34px 0 28px}.page-hero h1{font-size:clamp(42px,6vw,66px)}.page-hero .lead{color:rgba(255,250,240,.82);margin-bottom:0}.breadcrumbs{display:flex;gap:8px;margin-bottom:14px;font-size:13px}.breadcrumbs a{text-decoration:none}.breadcrumbs span:before{content:"/";margin-right:8px;opacity:.5}.tool-shell{display:grid;grid-template-columns:330px 1fr;gap:20px;align-items:start}.tool-controls,.tool-result,.calculator{background:var(--paper);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.tool-controls{position:sticky;top:102px;padding:24px}.tool-controls h2,.tool-result h2{font-size:28px}.field{margin-top:17px}.field label{display:block;margin-bottom:7px;font-weight:800;font-size:13px}.field-row{display:grid;grid-template-columns:1fr 82px;gap:8px}.hint,.tool-disclaimer{color:var(--muted);font-size:12px}.tool-disclaimer{margin-top:16px;padding:13px 15px;border-left:3px solid var(--gold);background:#f3ead9}.tool-result{overflow:hidden}.result-top{padding:27px;border-bottom:1px solid var(--line)}.result-status{display:inline-flex;padding:5px 9px;border-radius:7px;background:#dfeee6;color:#14624f;font-size:11px;font-weight:900;text-transform:uppercase}.result-status.bad{background:#f4dcd8;color:var(--red-dark)}.result-name{font:700 clamp(38px,6vw,64px)/1 Georgia,serif;margin-top:11px}.result-desc{color:var(--muted)}.result-meta{display:flex;flex-wrap:wrap;gap:24px;font-size:12px}.result-meta strong{display:block;font-size:15px}.ruler-stage{position:relative;padding:32px 22px;background:#f0e6d5}.ruler-pointer{position:absolute;z-index:2;top:18px;left:50%;width:2px;height:102px;background:var(--red)}.ruler-pointer:before{content:"";position:absolute;left:-5px;border:6px solid transparent;border-top-color:var(--red)}.ruler-track{display:flex;height:86px;overflow:hidden;border-radius:8px}.ruler-segment{min-width:20%;padding-top:43px;text-align:center;color:#fff;font-weight:800;font-size:12px;background:var(--green-700);background-image:repeating-linear-gradient(90deg,transparent 0 11px,rgba(255,255,255,.6) 11px 12px)}.ruler-segment.bad{background-color:var(--red)}.nearby{padding:22px}.content-layout{display:grid;grid-template-columns:1fr 290px;gap:48px;align-items:start}.prose{color:#31554e}.prose h2{color:var(--ink);font-size:36px;margin:42px 0 14px}.prose h3{color:var(--ink);margin:28px 0 9px}.callout{padding:20px;border-radius:12px;background:#e3eee8;color:var(--ink);margin:24px 0}.side-card{position:sticky;top:102px;padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:14px}.side-links{display:grid;margin-top:13px}.side-links a{padding:10px 0;border-top:1px solid rgba(77,63,43,.16);text-decoration:none;font-weight:700;font-size:14px}.faq{border-top:1px solid var(--line)}.faq details{padding:16px 0;border-bottom:1px solid var(--line)}.faq summary{font-weight:800;cursor:pointer}.calculator{padding:26px}.calc-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}.stairs-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.stair-option{padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff}.stair-option.recommended{border:2px solid var(--green-700)}.stair-option .big{font:700 38px/1 Georgia,serif}
.compass-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.compass-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px}.compass-dial{position:relative;width:min(430px,90%);aspect-ratio:1;margin:auto;border:3px solid var(--green-800);border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0 4deg,rgba(7,63,56,.45) 4deg 5deg,transparent 5deg 10deg)}.compass-dial:before{content:"Bắc\A\A Nam";white-space:pre;position:absolute;inset:14%;border:2px solid var(--gold);border-radius:50%;display:flex;justify-content:center;text-align:center;font:700 22px/1.75 Georgia,serif}.compass-needle{position:absolute;left:50%;top:50%;width:10px;height:43%;transform-origin:50% 0;transform:rotate(42deg);background:linear-gradient(to bottom,var(--red) 0 50%,var(--green-800) 50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.compass-center{position:absolute;left:50%;top:50%;width:26px;height:26px;border-radius:50%;background:var(--cream);border:2px solid var(--green-800);transform:translate(-50%,-50%)}.readout{text-align:center;margin-bottom:18px}.readout strong{font:700 48px/1 Georgia,serif}.status-line{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;background:#dfeee2;font-weight:800}.status-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#168551;color:white}.steps{counter-reset:step}.step{position:relative;padding-left:48px}.step:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-weight:900}
.knowledge-search{max-width:690px}.search-row{display:grid;grid-template-columns:1fr 58px;margin-top:18px}.search-row .input{border-radius:10px 0 0 10px;border:0}.search-row .button{border-radius:0 10px 10px 0;padding:0}.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.chip{padding:6px 17px;border:1px solid rgba(245,229,194,.65);border-radius:999px;font-size:13px}.intent-card{display:flex;align-items:center;gap:12px;min-height:78px;padding:15px}.intent-card span{font-size:26px}.newsletter{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px}.newsletter-form{display:grid;grid-template-columns:1fr 120px}.site-footer{background:var(--green-950);color:#fff;padding:46px 0 20px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:48px}.footer-logo{width:300px}.footer-grid p{color:rgba(255,255,255,.65);max-width:480px}.footer-links{display:grid;gap:9px}.footer-links a{color:rgba(255,255,255,.72);text-decoration:none}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.55);font-size:12px}
@media(max-width:940px){.hero-grid,.app-strip,.tool-shell,.content-layout,.compass-layout{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}.grid-5{grid-template-columns:repeat(3,1fr)}.tool-controls,.side-card{position:static}.hero{padding-top:45px}.quick-card{max-width:680px}.feature-article{grid-template-columns:1fr}.feature-article .article-media{min-height:260px}.phone-stage{min-height:390px}}
@media(max-width:760px){.container,.narrow{width:min(calc(100% - 28px),var(--max))}.nav{min-height:66px}.brand-logo{width:225px;max-width:70vw}.menu-button{display:block}.nav-links{display:none;position:absolute;left:0;right:0;top:66px;padding:14px;background:var(--green-950);flex-direction:column;align-items:stretch;gap:0}.nav-links.open{display:flex}.nav-links>a,.nav-dropdown summary{padding:13px 8px}.nav-links>a.active:after{bottom:5px}.dropdown{position:static;box-shadow:none}.section{padding:50px 0}.section-head{display:block}.section-head p{margin-top:12px}.grid-2,.grid-3,.grid-4,.grid-5,.article-small,.newsletter,.footer-grid,.stairs-results{grid-template-columns:1fr}.hero h1{font-size:52px}.hero-grid{gap:30px}.feature-article .article-media{min-height:220px}.article-small .article-media{height:180px}.phone-stage{transform:scale(.82);margin:-36px -50px;min-height:430px}.calc-grid{grid-template-columns:1fr}.newsletter-form{grid-template-columns:1fr}.newsletter-form .button{border-radius:10px;margin-top:8px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}.quick-card{padding:20px}.quick-card h2{font-size:32px}.result-meta{display:grid;grid-template-columns:1fr 1fr}.topic-card{display:flex;text-align:left;align-items:center}.topic-card .tool-icon{margin:0;border-right:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Refinements after responsive QA */
.ruler-labels span{white-space:nowrap;overflow:hidden;text-overflow:clip}
.article-media.door:after{content:"";position:absolute;left:47%;top:12%;width:24%;height:78%;background:linear-gradient(90deg,#835331,#3d291e);border:7px solid #d8c09a;box-shadow:13px 0 0 rgba(255,255,255,.35)}
.article-media.stairs:after{content:"";position:absolute;left:14%;bottom:13%;width:72%;height:62%;background:repeating-linear-gradient(165deg,transparent 0 22px,#5f716e 23px 26px,transparent 27px 45px);clip-path:polygon(0 100%,100% 0,100% 100%)}
.article-media.room:after{content:"";position:absolute;left:18%;right:15%;bottom:18%;height:30%;border-radius:12px 12px 3px 3px;background:#9f7656;box-shadow:0 14px 0 #e8d9c1}
.stair-showcase{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;margin-top:22px}
.stair-diagram{position:relative;min-height:300px;border-radius:16px;background:linear-gradient(155deg,#f4ead7,#e0cfb2);overflow:hidden;border:1px solid var(--line)}
.stair-diagram:before{content:"";position:absolute;left:9%;right:9%;bottom:16%;height:68%;background:repeating-linear-gradient(165deg,transparent 0 29px,var(--green-800) 30px 34px,transparent 35px 58px);clip-path:polygon(0 100%,100% 0,100% 100%)}
.stair-diagram:after{content:"Chiều cao tầng";position:absolute;left:18px;top:70%;transform:rotate(-90deg);transform-origin:left top;color:var(--red);font-weight:800}
.formula-list{display:grid;gap:12px}.formula-item{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.formula-item strong:first-child{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff}
.search-status{margin:16px 0 0;color:var(--cream);font-weight:700}.is-search-hidden{display:none!important}.chip{background:transparent;color:inherit;cursor:pointer}.chip:hover,.chip.active{background:var(--cream);color:var(--green-950)}
.not-found{min-height:68vh;display:grid;place-items:center;text-align:center}.not-found .app-icon{margin:0 auto 24px}
.nav-dropdown.active>summary{box-shadow:inset 0 -2px var(--red);color:#fff}

/* V7 interaction and editorial system */
.hero-accent{background:var(--cream);margin-top:20px}.quick-segments span{width:100%}.quick-segments .cream{border-color:var(--green-800)}.quick-result{margin:18px 0 0}.quick-result strong{font-size:26px}.tool-card small{display:block;margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.tool-card h3{margin:0}.tool-icon img{width:48px;height:48px}.article-media{display:block;width:100%;object-fit:cover}.article-card h3{min-height:2.45em}.article-card .text-link{margin-top:14px}.article-hero-image{display:block;width:100%;margin:0 0 34px;border:1px solid var(--line);border-radius:16px;background:var(--paper-2)}.grid-spaced{margin-top:24px}.app-icon-wrap{display:flex;justify-content:center}.tool-section{padding-top:18px}.tool-submit{width:100%;margin-top:20px}.nearby-app-link{margin-top:16px}.prose-first-title{margin-top:0!important}
.interactive-ruler{background:#f0e6d5;border-block:1px solid var(--line)}.ruler-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px 12px}.ruler-toolbar strong,.ruler-toolbar span{display:block}.ruler-toolbar span{margin-top:3px;color:var(--muted);font-size:12px}.step-control{display:flex;flex:0 0 auto;padding:3px;background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:9px}.step-control button{min-height:34px;padding:0 11px;border:0;border-radius:6px;background:transparent;color:var(--ink);font-weight:800}.step-control button.active{background:var(--green-800);color:#fff}.ruler-stage{--tick-offset:0px;position:relative;height:178px;padding:0;overflow:hidden;background-color:#f8f0e1;background-image:repeating-linear-gradient(90deg,transparent 0 3px,rgba(7,89,77,.32) 3px 4px),repeating-linear-gradient(90deg,transparent 0 19px,rgba(7,89,77,.58) 19px 20px),repeating-linear-gradient(90deg,transparent 0 39px,#07594d 39px 40px);background-position-x:calc(50% - var(--tick-offset));background-size:auto 56px;background-repeat:repeat-x;cursor:grab;touch-action:none;user-select:none;outline:0}.ruler-stage:focus-visible{box-shadow:inset 0 0 0 4px var(--gold)}.ruler-stage.is-dragging{cursor:grabbing}.ruler-scale{position:absolute;inset:56px 0 auto;height:28px;border-top:1px solid rgba(7,89,77,.32)}.ruler-scale span{position:absolute;transform:translateX(-50%);padding-top:6px;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}.ruler-track{position:absolute;inset:84px 0 0;display:block;height:auto;overflow:hidden;border-radius:0}.ruler-band{position:absolute;top:0;bottom:0;display:grid;place-items:center;padding:4px;color:#fff;background:var(--green-700);border-right:1px solid rgba(255,255,255,.48);font:700 13px/1.2 var(--font-serif);text-align:center}.ruler-band.bad{background:#b84a40}.ruler-pointer{position:absolute;z-index:4;top:0;bottom:0;left:50%;width:3px;height:auto;background:var(--red-accessible);transform:translateX(-50%);pointer-events:none}.ruler-pointer:before{top:0;left:-7px;border:8px solid transparent;border-top-color:var(--red-accessible)}.ruler-pointer span{position:absolute;top:10px;left:50%;transform:translateX(-50%);min-width:max-content;padding:6px 10px;border-radius:7px;background:var(--red-accessible);color:#fff;font-size:12px;font-weight:800;box-shadow:0 5px 14px rgba(100,30,20,.18)}
@media(max-width:760px){.ruler-toolbar{align-items:flex-start;padding:15px 14px 10px}.ruler-toolbar>div:first-child span{max-width:170px}.ruler-stage{height:164px}.ruler-band{font-size:11px}.article-card h3{min-height:0}}
.nowrap{white-space:nowrap}
@media(max-width:940px){.stair-showcase{grid-template-columns:1fr}}
@media(max-width:760px){.brand-logo{width:205px}.hero h1{font-size:48px;word-break:normal;overflow-wrap:normal;hyphens:none}.ruler-labels span{font-size:10px;letter-spacing:-.04em}.phone-stage{transform:none;margin:26px 0 0;min-height:0;gap:8px;align-items:flex-start}.phone,.phone.secondary{width:calc(50% - 4px);padding:6px;border-width:3px;border-radius:24px;transform:none}.phone-screen{min-height:330px;border-radius:17px}.phone-bar{padding:11px 4px;font-size:11px}.phone-grid{gap:5px;padding:7px}.phone-tile{min-height:70px;padding:6px 2px;font-size:9px}.mini-compass{width:125px;height:125px;margin:18px auto}.readout strong{font-size:38px}.stair-diagram{min-height:230px}}