/* ===== 2027 template components, added on the test page (2026-10-15) ===== */
html{scroll-padding-top:72px}
[hidden]{display:none!important}

/* Section bar: fixed, hidden until the hero scrolls away */
.ca-bar{position:fixed;top:0;left:0;right:0;z-index:70;background:#fff;border-bottom:1px solid var(--rule);box-shadow:0 8px 24px rgba(14,17,22,.06);
 transform:translateY(-100%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
.ca-bar.show{transform:none;visibility:visible;transition:transform .3s var(--ease)}
.ca-bar .wrap{display:flex;align-items:center;gap:24px;height:56px}
.ca-bar-name{font:600 20px/1 var(--display);color:var(--navy);white-space:nowrap}
.ca-bar nav{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto}
.ca-bar nav a{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:12px 8px;white-space:nowrap}
.ca-bar nav a:hover{color:var(--navy)}
.ca-bar nav a[aria-current=true]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.ca-bar .btn{min-height:40px;padding:8px 16px;margin-left:auto;white-space:nowrap}
@media (max-width:820px){.ca-bar nav{display:none}}

/* Notice journey (interactive "how it works") */
.journey{margin-top:var(--s6);display:grid;grid-template-columns:minmax(0,1fr)}
/* every panel shares one grid cell, so the row is as tall as the tallest step and the nav never moves */
.j-steps{grid-row:1}
.j-nav{grid-row:3}
.j-steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink)}
.j-steps [role=tab]{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:16px 16px 16px 0;border-bottom:1px solid var(--rule);cursor:pointer;position:relative;min-height:48px}
.j-steps [role=tab]::after{content:"";position:absolute;left:0;right:16px;bottom:-1px;height:3px;background:transparent;transition:background .25s var(--ease)}
.j-steps .n{font:500 13px var(--mono);letter-spacing:.12em;color:var(--muted)}
.j-steps .t{font:600 16px/24px var(--body);color:var(--muted)}
.j-steps [role=tab]:hover .t{color:var(--ink)}
.j-steps [aria-selected=true] .n{color:var(--red)}
.j-steps [aria-selected=true] .t{color:var(--navy)}
.j-steps [aria-selected=true]::after{background:var(--navy)}
.j-steps .past .n{color:var(--navy)}
.j-steps [role=tab]:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
.j-panel{grid-row:2;grid-column:1;display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:center;padding-top:var(--s6)}
.j-panel[hidden]{display:grid!important;visibility:hidden}
.j-panel:focus-visible{outline:3px solid var(--navy);outline-offset:8px}
.j-copy h3{font-size:30px;line-height:36px;margin-top:var(--s3)}
.j-copy p{color:#363b46}
.j-note{font-size:15px;line-height:24px;border-left:3px solid var(--navy);padding:8px 0 8px 16px;margin-top:var(--s4)}
.j-visual{min-height:440px}
.j-visual figure{margin:0;width:100%;max-width:460px;position:relative;z-index:2}
.j-cap{font:500 11px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--navy-200);margin-top:12px}
.j-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule)}
.j-nav [data-j-count]{margin-right:auto}
.j-nav .btn[disabled]{opacity:.4;cursor:default}
.mail{display:grid;grid-template-columns:72px 1fr;gap:8px 12px;padding-bottom:12px;border-bottom:1px solid #eee;margin-bottom:12px}
.mail .k,.ui .k{font:500 11px/20px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mail-body{font-size:14px;line-height:21px;color:#363b46;margin:0 0 12px}
.mail-link{color:var(--navy);text-decoration:underline;font-weight:600}
.st{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #eee;font:500 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.st i{width:8px;height:8px;border-radius:50%;background:var(--navy);flex:none}
.st i.alert{background:var(--red)}
.path{font:500 12px/18px var(--mono);color:var(--navy);background:var(--paper);border:1px solid #e6e2d8;padding:8px 12px;margin-bottom:12px;word-break:break-word}
.file{display:block;font:500 12px/18px var(--mono);color:var(--ink);border:1px dashed var(--navy-200);padding:8px 12px;margin-bottom:12px;word-break:break-all}
.chip-pdf{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);border:1px solid #e6e2d8;padding:4px 8px;margin-top:4px}
.chip-pdf::before{content:"PDF";font-size:10px;letter-spacing:.08em;background:var(--navy);color:#fff;padding:2px 4px}
@media (max-width:820px){
 .j-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
 .j-steps [role=tab]{padding:12px 4px 12px 0;align-items:flex-start}
 .j-steps .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .j-steps [role=tab]::after{right:4px}
 .j-panel{grid-template-columns:1fr;gap:var(--s4);padding-top:var(--s4)}
 .j-copy h3{font-size:24px;line-height:30px}
 .j-visual{min-height:0;padding:var(--s5) var(--s3)}
 .mail{grid-template-columns:1fr;gap:0}
}

/* Setup check */
.fit{display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);align-items:start;margin-top:var(--s5)}
.fit-q{border:0;margin:0;padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.fit-q:first-child{border-top:1px solid var(--ink)}
.fit-q legend{font:600 22px/28px var(--display);padding:0;margin-bottom:var(--s3);float:left;width:100%}
.fit-q legend .n{font:500 13px var(--mono);letter-spacing:.12em;color:var(--red);margin-right:8px;vertical-align:2px}
.fit-opts{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.fit-opts label{position:relative;cursor:pointer}
.fit-opts input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.fit-opts span{display:inline-flex;border-radius:var(--r-ctl);align-items:center;min-height:44px;padding:8px 16px;border:1.5px solid #8f8a7d;background:#fff;font:500 15px/20px var(--body);color:var(--ink);transition:background .2s var(--ease),border-color .2s var(--ease)}
.fit-opts label:hover span{border-color:var(--navy)}
.fit-opts input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.fit-opts input:focus-visible+span{outline:3px solid var(--navy);outline-offset:2px}
.fit-res{position:sticky;top:88px;background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--navy);padding:var(--s5)}
.fit-res h3{font-size:24px;line-height:30px;margin-top:8px}
.fit-empty{color:var(--muted);font-size:15px;line-height:24px}
.fit-list{list-style:none;margin:0;padding:0}
.fit-list li{padding:12px 0;border-bottom:1px solid var(--rule)}
.fit-list li .k{display:block;font:500 11px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fit-list li b{display:block;font-weight:600;color:var(--navy);margin:4px 0}
.fit-list li span:last-child{display:block;font-size:15px;line-height:23px;color:#363b46}
.fit-foot{margin-top:var(--s4)}
.fit-foot p{font-size:15px;line-height:23px;color:#363b46}
@media (max-width:940px){.fit{grid-template-columns:1fr;gap:var(--s5)}.fit-res{position:static}}

/* Pricing estimator */
.est{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:center;background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--navy);padding:var(--s5);margin-top:var(--s4)}
.est-q{display:block;font:600 22px/28px var(--display);margin-bottom:var(--s3)}
.est-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.est-cases{font:500 24px var(--mono);color:var(--navy);font-variant-numeric:tabular-nums}
.est input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0;display:block}
.est input[type=range]::-webkit-slider-runnable-track{height:4px;background:#d9d4c7}
.est input[type=range]::-moz-range-track{height:4px;background:#d9d4c7}
.est input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--navy);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--navy);margin-top:-10px}
.est input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--navy);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--navy)}
.est input[type=range]:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.est-out{background:#fff;border:1px solid var(--rule);padding:var(--s4)}
.est-num{display:block;font:600 48px/1 var(--display);color:var(--navy);margin:8px 0 12px;font-variant-numeric:tabular-nums lining-nums}
.est-note{font-size:15px;line-height:23px;color:#363b46;min-height:46px}
.est-out .btn{margin-top:8px}
@media (max-width:820px){.est{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4)}}

/* Savings calculator, collapsed until opened */
.calc-fold>summary{list-style:none;margin:var(--s4) 0 0 232px}
.calc-fold>summary::-webkit-details-marker{display:none}
.calc-fold>summary::after{content:"";width:8px;height:8px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.calc-fold[open]>summary::after{transform:rotate(-135deg) translateY(-3px)}
.calc-fold .c,.calc-fold[open] .o{display:none}
.calc-fold[open] .c{display:inline}
.calc-intro{font-size:17px;line-height:27px;color:#363b46;max-width:760px;margin:var(--s5) 0 0}
@media (max-width:820px){.calc-fold>summary{margin-left:0}}

/* Hero form on phones: hidden until "Book a demo" is tapped. Desktop always shows it. */
@media (max-width:820px){.js #hero-form:not(.open){display:none}}
#hero-form h3:focus{outline:none}

/* Form additions */
.form-carry{margin:0 0 var(--s3);padding:8px 12px;background:var(--paper);border-left:3px solid var(--navy);text-transform:none;letter-spacing:0;font:400 14px/20px var(--body);color:var(--ink)}
.navy .form-card .form-carry{color:var(--ink)}
.form-status{display:none;margin-top:var(--s3);padding:12px 16px;border-left:3px solid var(--red);background:#fff;font-size:15px;line-height:23px;color:var(--ink)}
.form-status.show{display:block}
.form-card .btn[aria-busy=true]{opacity:.7;cursor:progress}
.faq-more{margin-top:var(--s4);color:#363b46}