:root{--ink:#0b1734;--muted:#46516b;--green:#006b2c;--green-dark:#005721;--mint:#e9f7ef;--success:#e2f9dc;--page:#f9fbfc;--border:#d9e1e9;--blue:#14518c;--footer:#142b43;--shadow:0 6px 18px rgb(11 23 52 / 11%)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--page);color:var(--ink);font-family:Arial,"Noto Sans",sans-serif;line-height:1.4}button,input,select{font:inherit}button,select{cursor:pointer}a{color:inherit}img{max-width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.icon{object-fit:contain;flex:none;vertical-align:middle}h1,h2,h3,p{margin-top:0}h2{font-size:20px;font-weight:800}h3{font-size:16px;font-weight:800}p{margin-bottom:0}:focus-visible{outline:3px solid #145db0;outline-offset:3px}section[id]{scroll-margin-top:60px}
.site-header{height:46px;background:#fffdfdf2;position:relative;z-index:5;box-shadow:0 1px 4px #0b17341a}.header-inner{max-width:1280px;margin:auto;height:100%;padding:0 30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}.brand{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-weight:800;font-size:22px;white-space:nowrap}.brand .icon{width:32px;height:26px}.top-nav{height:100%;display:flex;align-items:center;gap:37px}.top-nav a{text-decoration:none;font-size:12px;font-weight:700;height:100%;display:flex;align-items:center;position:relative}.top-nav a.active::after{content:"";height:3px;background:var(--green);position:absolute;bottom:6px;left:0;right:0}.language-picker{justify-self:end;display:flex;align-items:center;gap:3px;border:1px solid #8295a9;border-radius:7px;padding:2px 7px;background:white;min-height:34px}.language-picker .icon{width:17px;height:17px}.language-picker .chevron{width:12px}.language-picker select{border:0;background:transparent;appearance:none;outline:0;max-width:145px;font-size:12px;font-weight:700;color:var(--ink);padding:2px}.language-picker:focus-within{outline:3px solid #145db0}.menu-button,.mobile-nav{display:none}
.hero{height:134px;background:linear-gradient(90deg,#e8f5ff 0%,#eaf6ff 40%,#e7f3f4aa 53%,transparent 69%),url('/assets/images/hero-fence-reference.webp') right center/auto 100% no-repeat,#e7f5ff}.hero-inner{width:min(calc(100% - 76px),1280px);height:100%;margin:auto;padding-top:17px}.hero h1{font-size:clamp(27px,3.3vw,35px);line-height:1.1;font-weight:800;letter-spacing:-.04em;margin-bottom:4px}.hero p{font-size:18px;line-height:1.25;max-width:520px}.main-wrap{width:min(calc(100% - 28px),1280px);margin:0 auto}.calculator-panel{margin-top:0;min-height:321px;padding:14px 15px;display:grid;grid-template-columns:minmax(210px,.95fr) minmax(350px,1.85fr) minmax(250px,1.15fr);gap:12px;background:#fff;border-radius:15px;box-shadow:var(--shadow);position:relative;z-index:1}.calculator-panel>*,.guide-grid>*,.examples-grid>*{min-width:0}.input-column{display:flex;flex-direction:column;min-height:290px}.input-column h2,.results-column h2{display:flex;align-items:center;gap:7px;font-size:18px;margin:2px 0 13px;line-height:1.2}.input-column h2 .icon,.results-column h2 .icon{width:23px;height:23px}.field{margin-bottom:10px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:4px}.field label .tiny{width:13px;height:13px}.input-row{display:grid;grid-template-columns:minmax(0,1fr) 61px;gap:4px}.input-row input,.input-row select{height:34px;border:1px solid #8295a9;border-radius:6px;background:white;color:var(--ink)}.input-row input{width:100%;min-width:0;padding:3px 13px;font-size:19px;font-weight:700}.input-row select{padding:2px 7px;font-size:13px;font-weight:700}.input-row input[aria-invalid=true]{border-color:#b2242b}.error{font-size:11px;color:#a3171f;margin-top:3px;min-height:0}.error:empty{display:none}.input-hint{font-size:11px;color:var(--muted);margin-top:-2px}.calculate-button{margin-top:auto;width:100%;min-height:40px;border:0;border-radius:6px;background:linear-gradient(#07853c,#006b2c);color:white;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}.calculate-button:hover{background:var(--green-dark)}.calculate-button .icon{filter:brightness(0) invert(1);width:19px;height:19px}
.diagram-column{padding-top:5px;align-self:stretch;min-width:0}.diagram{width:100%;aspect-ratio:440/285;border-radius:9px;overflow:hidden;background:#c7e9fb url('/assets/images/simulation-fence-reference.webp') center/cover no-repeat}.diagram svg{display:block;width:100%;height:100%}.svg-total{fill:white;font:bold 16px Arial,sans-serif}.svg-spacing{fill:white;font:bold 13px Arial,sans-serif;paint-order:stroke;stroke:#17451b;stroke-width:2px}.svg-posts{fill:#101b29;font:bold 14px Arial,sans-serif}.schematic-note{font-size:10px;color:var(--muted);text-align:center;margin-top:3px}.results-column{background:radial-gradient(circle at 100% 0,#d5f6e4,#f5fff8 70%);border-radius:11px;padding:8px 6px 9px;display:flex;flex-direction:column;min-width:0}.results-column h2{margin:0 4px 11px}.result-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}.result-card{height:94px;background:#fff;border:1px solid #dce5e8;border-radius:8px;box-shadow:0 1px 3px #0b173415;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:5px 3px}.result-card .icon{width:26px;height:26px}.result-card span{font-size:11px;font-weight:700;line-height:1.1;margin-top:4px}.result-card strong{color:var(--green);font-size:33px;line-height:1.1;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}.result-card:nth-child(2) strong{font-size:28px}.result-description{background:var(--success);border-radius:8px;min-height:74px;padding:10px 9px;margin-top:10px;font-size:12px;font-weight:500}.result-status{color:#865b00;font-size:11px;min-height:14px}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto}.share-actions button{min-width:0;min-height:36px;border:1px solid var(--blue);border-radius:6px;background:#f3f8fe;color:#092b58;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px}.share-actions button:hover{background:#e4f0fb}.share-actions .icon{width:17px;height:17px}.share-feedback{font-size:11px;color:var(--blue);min-height:14px}.manual-url{width:100%;font-size:12px;border:1px solid #93aac5;padding:6px}.manual-url[hidden]{display:none}
.how-section{background:linear-gradient(100deg,#e8f4ef,#effaf5);border-radius:13px;margin-top:27px;padding:12px 16px 19px}.section-head{display:flex;align-items:center;gap:17px;margin:0 5px 11px}.section-head h2{display:flex;align-items:center;gap:8px;white-space:nowrap;margin:0;font-size:23px}.section-head h2 .icon{width:31px;height:31px}.section-head p{font-size:13px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.step{min-height:115px;display:flex;align-items:flex-start;gap:10px;padding:13px 17px;background:white;border-radius:12px;position:relative}.step:not(:last-child)::after{content:'→';position:absolute;right:-23px;top:40%;color:var(--green);font-size:26px}.step-number{background:linear-gradient(#5ebd52,#007128);color:white;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800}.step>.icon{width:25px;height:25px;margin-top:1px}.step h3{margin:0 0 6px}.step p{font-size:12px;line-height:1.4}
.content-section{margin:20px 5px 0}.guide-grid,.examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.guide-card,.example-card{background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 2px 6px #0b173414;overflow:hidden}.guide-card{padding:9px 12px}.guide-card h3{display:flex;align-items:center;gap:6px;margin:0 0 6px}.guide-card h3 .icon{width:22px;height:22px}.formula-box{background:#e7fadf;border-radius:8px;padding:10px 8px;text-align:center;min-height:86px}.formula-box strong{font-size:15px}.formula-box p{font-size:12px;margin-top:10px}.formula-example{background:#edf2f5;border-radius:7px;font-size:12px;padding:7px 10px;margin-top:8px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:10px}th,td{border:1px solid #cbd9e8;padding:5px;text-align:start;vertical-align:top}thead th{background:#e3effb}tbody th{font-weight:700}.caveat{font-size:10px;margin-top:5px;color:var(--muted)}.tips{padding:0;margin:8px 0 0;list-style:none}.tips li{display:flex;align-items:flex-start;gap:8px;font-size:12px;margin:0 0 10px}.tips .icon{width:15px;height:15px}
.examples-grid{gap:20px}.example-card{padding-bottom:10px}.example-image{height:101px;overflow:hidden}.example-image img{width:100%;height:100%;object-fit:cover;display:block}.example-card h3{font-size:14px;background:#e5fbdf;border-radius:8px;padding:6px 11px;position:relative;margin:-16px 10px 7px;width:max-content;max-width:calc(100% - 20px)}.example-card dl{font-size:12px;margin:0 12px}.example-card dl div{display:flex;gap:6px;margin:3px 0}.example-card dt{font-weight:700}.example-card dd{margin:0}.example-card>p{display:flex;gap:8px;background:#e8f9e4;border-radius:7px;font-size:12px;margin:6px 10px 0;padding:6px}.example-card>p .icon{width:17px;height:17px}
.faq-section{margin-bottom:30px}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}.faq-grid details{background:white;border:1px solid var(--border);box-shadow:0 2px 5px #0b173416;border-radius:8px;font-size:12px}.faq-grid summary{cursor:pointer;font-weight:700;padding:6px 24px 6px 15px;min-height:27px;list-style:none;position:relative}.faq-grid summary::-webkit-details-marker{display:none}.faq-grid summary::after{content:'⌄';position:absolute;right:12px;font-size:18px;top:1px}.faq-grid details[open] summary::after{transform:rotate(180deg)}.faq-grid details p{padding:0 15px 10px;line-height:1.45}
.site-footer{background:var(--footer);color:#fff;padding:15px 28px 17px}.footer-main{max-width:1280px;margin:auto;display:flex;align-items:center;gap:15px}.footer-brand{font-size:18px}.footer-brand .icon{width:29px;height:24px}.footer-main p{border-left:1px solid #adbac6;padding-left:15px;font-size:12px}.footer-main nav{display:flex;gap:25px;margin-left:auto;font-size:12px}.site-footer nav a,.footer-legal a{text-decoration:none}.site-footer a:hover{text-decoration:underline}.footer-legal{max-width:1280px;margin:12px auto 0;border-top:1px solid #50647a;padding-top:10px;display:flex;gap:15px;flex-wrap:wrap;font-size:11px}.legal-page{max-width:800px;margin:42px auto 80px;padding:0 20px;min-height:50vh}.legal-page nav{font-size:13px;margin-bottom:20px}.legal-page h1{font-size:32px}.legal-page p{font-size:17px;line-height:1.7;margin:20px 0}
.legal-page{overflow-wrap:anywhere}.legal-page section{margin-top:30px}.legal-page h2{font-size:22px;line-height:1.3;margin:0 0 10px}.legal-page section p{margin:0}.legal-page a{overflow-wrap:anywhere}
@media(max-width:1099px){.calculator-panel{grid-template-columns:minmax(200px,.95fr) minmax(330px,1.85fr) minmax(245px,1.15fr)}.header-inner{padding:0 25px}.top-nav{gap:30px}}
@media(max-width:1023px){.calculator-panel{grid-template-columns:minmax(210px,1fr) minmax(0,1.5fr)}.results-column{grid-column:1/-1}.results-column{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}.results-column h2{grid-column:1/-1}.result-description{margin-top:0}.result-status{grid-column:1/-1}.share-actions{grid-column:1/-1}.share-feedback{grid-column:1/-1}.steps{gap:12px}.step{padding:12px;gap:6px}.step:not(:last-child)::after{display:none}.guide-grid,.examples-grid{gap:10px}.top-nav{gap:18px}}
@media(max-width:767px){.site-header{height:auto;min-height:48px}.header-inner{display:flex;justify-content:space-between;padding:6px 14px;gap:8px}.brand{font-size:19px}.brand .icon{width:27px}.top-nav{display:none}.language-picker{margin-left:auto;min-width:0}.language-picker select{max-width:100px}.menu-button{display:block;border:1px solid #8295a9;border-radius:6px;background:white;color:var(--ink);min-width:39px;min-height:36px;font-size:20px}.mobile-nav:not([hidden]){display:flex;flex-wrap:wrap;gap:6px 20px;padding:8px 15px;border-top:1px solid #e4e9ed;background:white}.mobile-nav a{font-size:13px;text-decoration:none;font-weight:700;min-height:30px}.hero{height:auto;min-height:150px;background:linear-gradient(90deg,#e8f5ffed 0%,#e8f5ffde 68%,#e8f5ff30 100%),url('/assets/images/hero-fence-reference.webp') right center/auto 100% no-repeat,#e8f5ff}.hero-inner{width:calc(100% - 32px);padding:16px 0 24px}.hero h1{font-size:26px;max-width:520px}.hero p{font-size:15px;max-width:440px}.main-wrap{width:calc(100% - 20px)}.calculator-panel{grid-template-columns:1fr;padding:12px;gap:14px}.input-column{min-height:auto}.calculate-button{margin-top:18px;min-height:45px}.input-row input,.input-row select{height:43px}.input-row input{font-size:18px}.diagram-column{padding:0}.results-column{display:flex}.result-description{margin-top:10px}.share-actions{margin-top:6px}.how-section{margin-top:20px}.section-head{display:block;margin-bottom:11px}.section-head h2{white-space:normal;font-size:21px}.section-head p{margin-top:4px;font-size:13px}.steps,.guide-grid,.examples-grid,.faq-grid{grid-template-columns:1fr}.step{min-height:92px}.content-section{margin-top:22px}.guide-card{padding:12px}.example-image{height:150px}.faq-grid{gap:6px}.faq-grid summary{font-size:14px;min-height:44px;display:flex;align-items:center}.footer-main{align-items:flex-start;flex-wrap:wrap}.footer-main nav{width:100%;margin-left:0}.footer-main p{flex:1}.footer-legal{gap:10px 18px}}
@media(max-width:390px){.header-inner{flex-wrap:wrap}.language-picker{order:2}.menu-button{order:3}.brand{font-size:18px}.language-picker select{max-width:88px;font-size:11px}.result-card strong{font-size:30px}.result-card:nth-child(2) strong{font-size:25px}.svg-spacing{font-size:12px}.footer-main nav{flex-wrap:wrap;gap:12px 18px}}
[dir=rtl] .top-nav a.active::after{left:0;right:0}[dir=rtl] .faq-grid summary{padding:6px 15px 6px 24px}[dir=rtl] .faq-grid summary::after{right:auto;left:12px}[dir=rtl] .footer-main p{border-left:0;border-right:1px solid #adbac6;padding-left:0;padding-right:15px}[dir=rtl] .step:not(:last-child)::after{content:'←';right:auto;left:-23px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* 1024px mockup refinements */
.hero h1{font-size:clamp(27px,3.15vw,34px)}
.input-column h2{font-size:17px;gap:5px;white-space:nowrap}
.guide-card{padding:7px 10px}
.guide-card h3{font-size:15px;margin-bottom:4px}
.table-scroll table{font-size:9.5px;line-height:1.12}
.table-scroll th,.table-scroll td{padding:3px}
.table-scroll th:first-child{width:30%}
.table-scroll th:nth-child(2){width:30%}
.table-scroll th:nth-child(3){width:40%}
.formula-box{min-height:75px;padding:7px 6px}
.formula-box p{margin-top:6px}
.faq-grid{grid-auto-flow:column;grid-template-rows:repeat(4,auto)}
.example-image img{transform:scale(1.18);transform-origin:top center}
@media(max-width:767px){.input-column h2{white-space:normal}.faq-grid{grid-auto-flow:row;grid-template-rows:none}}
@media(max-width:479px){.svg-spacing{font-size:18px}.svg-posts{font-size:18px}.svg-total{font-size:17px}}
.ad-slot{width:min(calc(100% - 28px),1280px);min-height:260px;margin:24px auto;padding:12px;border:1px solid #d9e1e9;background:#f6f8fa;text-align:center;color:#46516b}.ad-slot>span{display:block;font-size:11px;margin-bottom:8px}.ad-slot ins{min-height:220px}
/* Keep the supplied SVG artwork while matching the mockup's icon accents. */
.brand .icon,.section-head .icon,.step>.icon,.guide-card h3 .icon,.tips .icon,.example-card>p .icon{filter:invert(26%) sepia(66%) saturate(947%) hue-rotate(94deg) brightness(88%) contrast(104%)}
.faq-section .section-head .icon{filter:invert(28%) sepia(65%) saturate(968%) hue-rotate(177deg) brightness(86%) contrast(92%)}
@media (min-width:768px) and (max-width:1023px){.hero{height:170px;background:linear-gradient(90deg,#e8f5ff 0%,#e8f5fff2 58%,#e8f5ff33 100%),url('/assets/images/hero-fence-reference.webp') right center/auto 100% no-repeat,#e7f5ff}.hero h1{font-size:29px;max-width:470px}.hero p{font-size:16px;max-width:450px}}
@media(max-width:767px){.step p,.tips li,.example-card dl,.example-card>p,.result-description,.formula-box p,.formula-example,.section-head p,.input-hint,.share-actions button{font-size:14px}.result-card span{font-size:13px}.caveat,.schematic-note{font-size:12px}.table-scroll table{min-width:420px;font-size:12px}.table-scroll th,.table-scroll td{padding:5px}}
.result-status:empty,.share-feedback:empty{display:none}
.share-actions button:disabled{cursor:not-allowed;opacity:.5;background:#eef1f3;color:#66727e;border-color:#aab5bf}
@media(min-width:1024px){.input-column{align-self:start;min-height:270px}.results-column{align-self:start;min-height:275px}.diagram-column{position:relative}.diagram-column .schematic-note{position:absolute;top:calc(100% - 1px);left:0;right:0}.how-section .section-head{margin-bottom:3px}#guide .section-head{margin-bottom:5px}.guide-grid .guide-card{min-height:194px}#examples{margin-top:23px}.faq-section .section-head{margin-bottom:5px}.faq-grid summary{padding-top:3px;padding-bottom:3px;min-height:24px}}
.result-description::before{content:"";float:left;width:17px;height:17px;margin:2px 6px 0 0;background:url('/assets/icons/check-circle.svg') center/contain no-repeat;filter:invert(26%) sepia(66%) saturate(947%) hue-rotate(94deg) brightness(88%) contrast(104%)}
[dir=rtl] .result-description::before{float:right;margin-right:0;margin-left:6px}
.site-footer .language-picker{margin-left:0;background:transparent;border-color:#dae5ef}.site-footer .language-picker select{color:white}.site-footer .language-picker option{color:#0b1734}.site-footer .language-picker .icon{filter:brightness(0) invert(1)}
@media(min-width:768px) and (max-width:1023px){.footer-main{flex-wrap:wrap}.footer-main nav{margin-left:auto}}
/* Asset accents from the supplied SVG family. External SVG images need filters for color. */
.results-column h2 .icon,.result-card:nth-child(2) .icon{filter:invert(26%) sepia(66%) saturate(947%) hue-rotate(94deg) brightness(88%) contrast(104%)}
.guide-card h3 .icon[src$="lightbulb.svg"]{filter:invert(76%) sepia(76%) saturate(1297%) hue-rotate(352deg) brightness(104%) contrast(100%)}
.faq-grid summary::after{content:"";width:16px;height:16px;top:50%;transform:translateY(-50%);background:url('/assets/icons/chevron-down.svg') center/contain no-repeat}
.faq-grid details[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.step:not(:last-child)::after{content:"";width:22px;height:22px;right:-24px;top:42%;background:url('/assets/icons/arrow-right.svg') center/contain no-repeat;filter:invert(26%) sepia(66%) saturate(947%) hue-rotate(94deg) brightness(88%) contrast(104%)}
.example-card dl dt{display:flex;align-items:center;gap:5px;min-width:0}
.example-card dl dt .icon{width:15px;height:15px;filter:invert(26%) sepia(66%) saturate(947%) hue-rotate(94deg) brightness(88%) contrast(104%)}
.example-card dl div:last-child dt .icon{filter:none}
@media(max-width:767px){.example-card dl dt .icon{width:18px;height:18px}}
[dir=rtl] .step:not(:last-child)::after{content:"";right:auto;left:-24px;transform:scaleX(-1)}
@media(min-width:768px) and (max-width:1023px){
  .guide-grid,.examples-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .guide-grid .guide-card:last-child{grid-column:1/-1}
  .examples-grid .example-card:last-child{grid-column:1/-1;width:calc(50% - 7px);justify-self:center}
  .table-scroll table{min-width:420px;font-size:12px;line-height:1.3}
  .table-scroll th,.table-scroll td{padding:5px}
}
@media(max-width:767px){.share-actions button,.language-picker,.menu-button,.input-row input,.input-row select{min-height:44px}}
@media(max-width:360px){.header-inner{padding:4px 8px;gap:4px;flex-wrap:nowrap}.header-inner .brand{font-size:16px;gap:2px}.header-inner .brand .icon{width:24px;height:22px}.header-inner .language-picker{padding:2px 4px;gap:1px}.header-inner .language-picker select{max-width:62px;font-size:10px}.header-inner .language-picker .chevron{width:10px}.header-inner .menu-button{min-width:44px}}
.language-picker{position:relative;display:block;padding:0;min-height:34px}
.language-picker summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:32px;padding:3px 7px;cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap}
.language-picker summary::-webkit-details-marker{display:none}
.language-picker summary:focus-visible,.language-options a:focus-visible{outline:3px solid #145db0;outline-offset:2px}
.language-picker .locale-flag{display:block;flex:none;width:24px;height:18px;object-fit:contain;border:1px solid #c5cbd1;border-radius:2px}
.language-picker summary .chevron{width:12px;height:12px;flex:none}
.language-picker[open] summary .chevron{transform:rotate(180deg)}
.language-options{position:absolute;top:calc(100% + 6px);right:0;z-index:30;display:grid;width:max-content;min-width:190px;max-width:min(90vw,280px);max-height:min(65vh,340px);overflow-y:auto;overscroll-behavior:contain;background:white;color:var(--ink);border:1px solid #8295a9;border-radius:8px;box-shadow:var(--shadow);padding:5px}
.language-picker:not([open]) .language-options{display:none}
.language-options a{display:flex;align-items:center;gap:8px;min-height:42px;padding:5px 8px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:600;border-radius:5px;white-space:normal}
.language-options a:hover,.language-options a[aria-current=page]{background:var(--mint)}
.site-footer .language-picker summary{color:white}
.site-footer .language-options{top:auto;bottom:calc(100% + 6px);color:var(--ink)}
[dir=rtl] .language-options{right:auto;left:0}
@media(max-width:767px){.language-picker summary{min-height:42px}.header-inner .language-picker{margin-left:auto}.language-options{max-width:min(90vw,260px)}}
@media(max-width:360px){.header-inner{flex-wrap:wrap}.header-inner .brand{margin-right:auto}.header-inner .language-picker{padding:0}.header-inner .language-picker summary{font-size:11px}.header-inner .language-picker summary span{max-width:145px;white-space:normal}.header-inner .menu-button{order:3}}
@media(min-width:768px){.header-inner{grid-template-columns:clamp(253px,calc(48vw - 238.5px),454px) auto minmax(0,1fr)}}
/* Align the desktop hero and calculator geometry with the 1024px reference. */
@media(min-width:1024px){
  .hero{position:relative;isolation:isolate;background:linear-gradient(90deg,#e8f5ff 0%,#eaf6ff 58%,#e7f5ff 100%)}
  .hero::before{content:"";position:absolute;inset:0;background:url('/assets/images/hero-fence-reference.webp') right center/auto 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent calc(100% - 389px),#000 calc(100% - 315px));mask-image:linear-gradient(90deg,transparent calc(100% - 389px),#000 calc(100% - 315px));z-index:0}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(105,165,61,.55) 0%,rgba(150,200,110,.22) 18%,transparent 46%);mask-image:linear-gradient(90deg,transparent calc(100% - 666px),#000 calc(100% - 492px),#000 calc(100% - 399px),transparent calc(100% - 348px));z-index:1}
  .hero-inner{position:relative;z-index:2}
  .calculator-panel{padding-right:10px}
  .input-column h2{margin-top:7px}
  .input-column .field{margin-left:4px;margin-right:5px;margin-bottom:14px}
  .input-column .input-hint{margin-left:4px}
  .results-column{padding-left:4px}
  .hero h1{font-size:clamp(27px,3vw,34px);letter-spacing:-.06em}
  .hero p{margin-top:2px}
  .steps{grid-template-columns:1.05fr .96fr 1fr;gap:24px}
  .guide-grid{grid-template-columns:1fr 1.075fr .95fr}
  .table-scroll table{font-size:10.5px}
  .tips li{font-size:13px}
  .example-card h3{font-size:13px}
  .example-card dd{font-weight:700}
  html[lang=en] .faq-grid{counter-reset:faq}
  html[lang=en] .faq-grid details{counter-increment:faq}
  html[lang=en] .faq-grid summary::before{content:"Q" counter(faq) ". ";margin-right:4px}
}
.result-description::before{background-color:#d6f76c;background-size:15px 15px;border-radius:50%;filter:none}
@media(min-width:1040px){.calculator-panel{grid-template-columns:minmax(220px,.85fr) 440px minmax(250px,1fr)}.calculator-panel>.input-column,.calculator-panel>.results-column{align-self:stretch}}
@media(min-width:1024px) and (max-width:1099px){.header-inner{padding-inline:30px}.top-nav{gap:35px}}
.input-column h2 .icon{filter:invert(21%) sepia(46%) saturate(1062%) hue-rotate(169deg) brightness(87%) contrast(100%)}
.results-column.wide-metric .result-cards{grid-template-columns:minmax(0,1fr)}
.results-column.wide-metric .result-card{min-width:0;min-height:94px;height:auto}
.results-column.wide-metric .result-card strong{max-width:100%;white-space:normal;overflow-wrap:anywhere}