@import url("tokens.css");
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:110px}
body{
margin:0;
background:var(--white);
color:var(--ink);
font-family:Instrument,Arial,sans-serif;
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased}
body.locked{
overflow:hidden}
::selection{
background:var(--signal);
color:var(--ink)}
a{
color:inherit;
text-decoration:none}
button,input,select{
font:inherit}
button,a,summary{
-webkit-tap-highlight-color:transparent}
button{
cursor:pointer;
color:inherit}
button:disabled{
cursor:default}
img,svg{
max-width:100%;
height:auto}
button,select{
touch-action:manipulation}
:focus-visible{
outline:3px solid var(--red-text);
outline-offset:5px}
a:hover .arrow,button:hover .arrow{
transform:translate(3px,-3px)}
.arrow{
display:inline-block;
transition:transform .18s var(--ease);
font-family:Arial,sans-serif;
font-weight:400}
.container{
width:min(calc(100% - 112px),var(--max));
margin-inline:auto}
.section{
padding-block:112px}
.section-tight{
padding-block:72px}
h1,h2,h3,h4,p{
margin:0}
h1,h2,h3,h4{
font-weight:600}
h1{
font-size:clamp(58px,7.1vw,104px);
letter-spacing:-.065em;
line-height:1.02;
max-width:1000px}
h2{
font-size:clamp(38px,4.2vw,62px);
letter-spacing:-.05em;
line-height:1.08}
h3{
font-size:29px;
line-height:1.18;
letter-spacing:-.035em}
p+p{
margin-top:18px}
.lead{
font-size:22px;
line-height:1.5;
letter-spacing:-.02em}
.muted{
color:var(--muted)}
.eyebrow{
font-size:12px;
font-weight:600;
letter-spacing:.13em;
text-transform:uppercase;
display:flex;
align-items:center;
gap:12px}
.eyebrow:before{
content:"";
width:7px;
height:7px;
background:var(--signal);
flex-shrink:0}
.eyebrow.plain:before{
display:none}
.kicker{
margin-bottom:30px}
.caption{
font-size:13px;
line-height:1.5;
color:var(--muted)}
.rule{
border-top:1px solid var(--line)}
.text-link{
display:inline-flex;
align-items:center;
gap:24px;
font-weight:500;
padding-block:12px;
border-bottom:1px solid currentColor;
line-height:1.3}
.text-link:hover{
text-decoration:underline;
text-underline-offset:5px}
.btn{
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:30px;
min-height:52px;
padding:14px 23px;
border:1px solid var(--ink);
border-radius:7px;
font-size:15px;
line-height:1.3;
font-weight:500;
background:var(--ink);
color:white;
transition:background .16s,color .16s,transform .16s}
.btn:hover{
background:#37332c}
.btn:active{
transform:translateY(1px)}
.btn.signal{
background:var(--signal);
color:var(--ink);
border-color:var(--signal)}
.btn.signal:hover{
background:#f46b57}
.btn.outline{
background:transparent;
color:var(--ink)}
.btn.outline:hover{
background:var(--paper)}
.actions{
display:flex;
gap:20px;
align-items:center;
flex-wrap:wrap;
margin-top:30px}
.skip{
position:fixed;
top:-100px;
left:20px;
padding:16px;
background:white;
z-index:100}
.skip:focus{
top:10px}
.preview-strip{
background:var(--paper);
font-size:11px;
color:var(--muted);
text-align:center;
padding:6px 20px;
letter-spacing:.04em}
.site-header{
position:sticky;
top:0;
z-index:20;
background:rgba(255,255,255,.98);
border-bottom:1px solid var(--line)}
.header-inner{
height:88px;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px}
.brand{
display:inline-flex;
width:130px;
flex-shrink:0}
.brand img{
display:block;
width:100%;
height:auto}
.desktop-nav{
display:flex;
align-items:center;
gap:34px;
margin-left:auto;
font-size:14px}
.desktop-nav a{
padding-block:12px}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{
text-decoration:underline;
text-underline-offset:7px}
.header-cta{
font-size:13px;
padding:12px 17px;
min-height:46px}
.menu-toggle{
display:none;
background:none;
border:1px solid var(--ink);
border-radius:5px;
padding:8px 15px;
min-height:44px}
.mobile-dialog{
border:0;
max-width:none;
width:100%;
height:100dvh;
max-height:none;
margin:0;
padding:24px;
background:var(--paper)}
.mobile-dialog .menu-head{
display:flex;
align-items:center;
justify-content:space-between}
.mobile-dialog nav{
display:flex;
flex-direction:column;
gap:0;
margin-top:65px}
.mobile-dialog nav a{
font-size:32px;
letter-spacing:-.04em;
padding:18px 0;
border-bottom:1px solid var(--line)}
.mobile-dialog .caption{
margin-top:32px}
.hero{
padding:72px 0 0}
.hero .eyebrow{
margin-bottom:34px}
.hero h1 .soft{
color:#817d76}
.hero-bottom{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
margin-top:36px;
align-items:end}
.hero-bottom .lead{
max-width:550px;
font-size:20px}
.hero-note{
font-size:12px;
color:var(--muted);
display:flex;
gap:10px;
align-items:center}
.hero-note:before{
content:"";
display:inline-block;
width:22px;
height:1px;
background:var(--signal)}
.hero .actions{
margin-top:25px}
.hero-stage{
position:relative;
background:var(--paper);
margin-top:64px;
padding:50px 56px 0;
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px;
overflow:hidden;
min-height:405px}
.stage-copy{
padding-top:12px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:25px}
.stage-copy h2{
font-size:34px;
max-width:300px}
.stage-copy p{
font-size:15px;
max-width:310px;
color:var(--muted)}
.stage-no{
font-size:11px;
color:var(--red-text);
letter-spacing:.08em;
text-transform:uppercase}
.paper-document{
background:white;
border:1px solid var(--line);
border-bottom:0;
box-shadow:0 18px 35px #19171409;
padding:32px 35px 28px;
transform:rotate(-2deg);
transform-origin:bottom center;
position:relative}
.doc-header{
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line);
padding-bottom:20px;
font-size:10px;
letter-spacing:.08em;
text-transform:uppercase}
.doc-header img{
width:65px}
.doc-title{
margin-top:23px;
font-size:30px;
font-weight:600;
letter-spacing:-.035em}
.doc-question{
font-size:14px;
margin-top:8px!important;
max-width:400px}
.doc-line{
display:grid;
grid-template-columns:28px 1fr auto;
gap:10px;
align-items:center;
border-top:1px solid var(--line);
padding:14px 0;
font-size:13px}
.doc-line:first-of-type{
margin-top:22px}
.doc-line .number{
color:var(--red-text);
font-size:11px}
.tag{
font-size:10px;
letter-spacing:.02em;
border:1px solid var(--line);
padding:3px 7px;
border-radius:3px;
white-space:nowrap}
.doc-line.active{
border-top-color:var(--signal)}
.doc-foot{
display:flex;
align-items:center;
justify-content:space-between;
font-size:10px;
color:var(--muted);
margin-top:18px;
padding-top:12px;
border-top:1px solid var(--line)}
.section-heading{
display:grid;
grid-template-columns:1.1fr .9fr;
align-items:end;
gap:100px;
margin-bottom:48px}
.section-heading p{
max-width:450px;
color:var(--muted)}
.section-heading .eyebrow{
margin-bottom:24px}
.concern-row{
display:grid;
grid-template-columns:60px 1.25fr 1fr 45px;
gap:22px;
align-items:center;
min-height:119px;
padding:28px 10px;
border-top:1px solid var(--line);
transition:background .18s,padding .18s}
.concern-row:last-child{
border-bottom:1px solid var(--line)}
.concern-row:hover{
background:var(--paper);
padding-inline:20px}
.concern-row .num{
color:var(--red-text);
font-size:12px}
.concern-row h3{
font-size:30px}
.concern-row p{
font-size:15px;
color:var(--muted);
max-width:350px}
.concern-row .arrow{
font-size:30px;
justify-self:end}
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:100px;
align-items:start}
.paper-section{
background:var(--paper)}
.pillar{
border-top:1px solid var(--line);
padding:25px 0;
display:grid;
grid-template-columns:38px 1fr;
gap:12px}
.pillar span{
font-size:12px;
color:var(--red-text);
padding-top:5px}
.pillar h3{
font-size:23px;
margin-bottom:14px}
.pillar p{
font-size:16px;
color:var(--muted);
max-width:450px}
.split-intro h2{
margin-bottom:25px}
.split-intro p{
max-width:475px}
.value-layout{
align-items:center}
.value-sheet{
padding:35px;
background:var(--paper);
border-radius:12px}
.value-sheet h3{
margin:23px 0}
.value-rows{
margin:0}
.value-rows>div{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:15px;
padding:13px 0;
border-top:1px solid var(--line);
font-size:14px}
.value-rows dt{
color:var(--muted)}
.value-rows dd{
margin:0}
.value-sheet .caption{
margin-top:24px}
.annotation-buttons{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:25px}
.annotation-buttons button{
background:white;
border:1px solid #8b857c;
padding:10px 14px;
border-radius:5px;
font-size:13px;
min-height:44px}
.annotation-buttons button[aria-pressed=true]{
background:var(--ink);
border-color:var(--ink);
color:white}
.annotation{
margin-top:16px;
font-size:14px;
min-height:70px}
.feature-offer{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:70px;
padding:54px;
background:var(--paper);
border-top:3px solid var(--signal)}
.feature-offer h2{
font-size:55px;
margin-top:26px}
.feature-offer p{
max-width:510px}
.offer-facts{
display:flex;
gap:20px;
flex-wrap:wrap;
font-size:12px;
margin-top:20px;
color:var(--muted)}
.offer-facts span+span{
border-left:1px solid var(--line);
padding-left:20px}
.output-sheet{
background:white;
padding:30px;
border:1px solid var(--line);
display:flex;
flex-direction:column;
justify-content:space-between}
.output-sheet h3{
font-size:32px;
margin:20px 0 25px}
.output-sheet ol{
padding-left:18px;
font-size:15px;
margin:0}
.output-sheet li{
padding:9px 0}
.output-sheet .caption{
margin-top:24px}
.offer-row{
border-top:1px solid var(--line);
padding:29px 0;
display:grid;
grid-template-columns:44px 1.2fr 1fr auto;
gap:25px;
align-items:center}
.offer-row:last-of-type{
border-bottom:1px solid var(--line)}
.offer-row .num{
font-size:12px;
color:var(--red-text)}
.offer-row h3{
font-size:27px}
.offer-row .type{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
margin-top:8px}
.offer-row .offer-summary{
font-size:15px;
max-width:370px}
.offer-row .offer-summary small{
display:block;
color:var(--muted);
font-size:12px;
margin-top:8px}
.row-actions{
display:flex;
align-items:center;
gap:12px}
.row-actions>a{
font-size:13px;
border-bottom:1px solid var(--line);
padding:10px 0}
.round-btn{
background:transparent;
border:1px solid #999289;
border-radius:50%;
width:48px;
height:48px;
font-size:26px;
display:none;
align-items:center;
justify-content:center}
.enhanced .round-btn{
display:flex}
.round-btn:hover{
background:var(--signal);
border-color:var(--signal)}
.dark{
background:var(--ink);
color:white}
.dark .muted,.dark .caption{
color:#c1bcb4}
.dark .text-link{
color:white}
.principles{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:36px;
margin-top:65px}
.principles article{
border-top:1px solid #625d55;
padding-top:25px}
.principles .num{
color:#f58270;
font-size:12px}
.principles h3{
font-size:24px;
margin:35px 0 15px}
.principles p{
font-size:15px;
color:#c1bcb4}
.closing{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px}
.closing h2{
max-width:750px}
.site-footer{
background:var(--paper);
padding:55px 0 25px}
.footer-top{
display:flex;
justify-content:space-between;
gap:40px;
font-size:14px}
.footer-links{
display:flex;
gap:28px}
.footer-links a:hover{
text-decoration:underline}
.footer-wordmark{
display:block;
width:100%;
margin:68px 0 45px;
max-height:335px}
.footer-bottom{
display:flex;
justify-content:space-between;
gap:20px;
border-top:1px solid var(--line);
padding-top:22px;
font-size:11px;
color:var(--muted)}
.footer-bottom nav{
display:flex;
gap:22px}
.page-hero{
padding:65px 0 70px}
.page-hero h1{
font-size:clamp(52px,6.6vw,88px);
max-width:1000px;
margin:28px 0}
.page-hero .lead{
max-width:750px}
.breadcrumb{
font-size:12px;
display:flex;
gap:14px;
color:var(--muted);
flex-wrap:wrap;
margin-bottom:38px}
.breadcrumb a{
text-decoration:underline;
text-underline-offset:4px}
.review-note{
font-size:11px;
color:var(--red-text);
border:1px solid #d8ada5;
padding:5px 10px;
display:inline-block;
border-radius:3px}
.review-bar{
font-size:12px;
color:var(--muted);
margin-top:18px}
.choice-area{
background:var(--paper);
padding:50px;
border-radius:12px}
.choice-area h2{
font-size:40px;
margin-bottom:18px}
.choice-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:30px}
fieldset{
margin:0;
padding:0;
border:0}
legend{
font-size:14px;
font-weight:600;
margin-bottom:15px}
.radio-option{
display:flex;
gap:12px;
align-items:center;
padding:12px 15px;
background:white;
margin:7px 0;
border:1px solid #a19a90;
border-radius:6px;
min-height:48px;
font-size:14px;
cursor:pointer}
.radio-option:has(input:checked){
border-color:var(--ink);
box-shadow:inset 0 0 0 1px var(--ink)}
input[type=radio]{
accent-color:var(--ink);
width:17px;
height:17px;
flex-shrink:0}
.fit-result{
margin-top:30px;
padding:25px;
background:white;
border-left:3px solid var(--signal)}
.fit-result h3{
font-size:26px;
margin-bottom:12px}
.fit-result p{
font-size:15px}
.fit-result a{
display:inline-block;
margin-top:16px;
text-decoration:underline;
text-underline-offset:5px}
.compare-table{
border-collapse:collapse;
width:100%;
font-size:14px}
.compare-table th{
text-align:left;
font-size:12px;
color:var(--muted);
font-weight:500;
padding:18px 15px;
border-bottom:1px solid var(--ink)}
.compare-table td{
padding:20px 15px;
border-bottom:1px solid var(--line);
vertical-align:top}
.compare-table td:first-child{
font-weight:600}
.detail-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:100px}
.detail-body section{
padding:0 0 55px;
margin-bottom:45px;
border-bottom:1px solid var(--line)}
.detail-body h2{
font-size:36px;
margin-bottom:23px}
.detail-body h3{
font-size:23px;
margin-bottom:14px}
.detail-body p{
color:var(--muted);
max-width:680px}
.fact-panel{
background:var(--paper);
padding:28px;
position:sticky;
top:120px;
border-top:3px solid var(--signal)}
.fact-panel h2{
font-size:23px;
margin-bottom:25px}
.fact-panel dl{
margin:0}
.fact-panel dl>div{
border-top:1px solid var(--line);
padding:16px 0}
.fact-panel dt{
font-size:11px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.06em}
.fact-panel dd{
font-size:15px;
margin:5px 0 0}
.fact-panel .btn{
width:100%;
margin-top:20px;
font-size:13px;
gap:10px}
.fact-panel .caption{
margin-top:18px}
.plain-list{
padding-left:20px;
margin:0}
.plain-list li{
padding:5px 0}
.scope-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px}
.scope-grid>div{
padding:25px;
background:var(--paper);
border-radius:8px;
font-size:15px}
.process-step{
display:grid;
grid-template-columns:35px 1fr;
gap:20px;
padding:22px 0;
border-top:1px solid var(--line)}
.process-step .num{
font-size:12px;
color:var(--red-text);
padding-top:5px}
.process-step h3{
font-size:23px;
margin-bottom:10px}
.process-step p{
font-size:16px}
.edition-nav{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:30px}
.edition-nav a{
border:1px solid #8b857c;
padding:10px 15px;
border-radius:5px;
font-size:13px;
min-height:44px}
.edition-nav a[aria-selected=true]{
color:white;
background:var(--ink);
border-color:var(--ink)}
.edition-panel{
padding:30px;
background:var(--paper);
margin:20px 0;
border-radius:8px}
.edition-panel h3{
font-size:29px}
.edition-panel dl{
font-size:15px}
.edition-panel dt{
font-weight:600;
margin-top:16px}
.edition-panel dd{
margin:5px 0;
color:var(--muted)}
[hidden]{
display:none!important}
details{
border-top:1px solid var(--line);
padding:0}
details:last-child{
border-bottom:1px solid var(--line)}
summary{
padding:22px 38px 22px 0;
cursor:pointer;
font-size:18px;
line-height:1.4;
position:relative;
list-style:none}
summary::-webkit-details-marker{
display:none}
summary:after{
content:"+";
position:absolute;
right:8px;
top:19px;
font-size:25px}
details[open] summary:after{
content:"−"}
details p{
padding-bottom:24px;
font-size:16px;
max-width:650px}
.dialog{
padding:0;
border:0;
border-radius:16px;
width:min(780px,calc(100% - 48px));
max-height:calc(100dvh - 64px);
color:var(--ink);
box-shadow:0 30px 120px #0003;
overscroll-behavior:contain}
.dialog::backdrop,.mobile-dialog::backdrop{
background:#19171485}
.dialog[open]{
animation:panel-in .26s var(--ease)}
.dialog[open]::backdrop{
animation:backdrop-in .26s ease}
.dialog.is-closing{
animation:panel-out .18s ease forwards}
.dialog-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 32px;
position:sticky;
top:0;
z-index:1;
background:white;
border-bottom:1px solid var(--line)}
.close-button{
background:transparent;
border:1px solid #9c968c;
padding:9px 14px;
border-radius:5px;
font-size:13px;
min-height:44px}
.dialog-body{
padding:38px}
.dialog h2{
font-size:46px;
margin-bottom:20px}
.dialog .lead{
font-size:19px}
.dialog-output{
background:var(--paper);
padding:25px;
margin:28px 0;
border-left:3px solid var(--signal)}
.dialog-output h3{
font-size:24px;
margin:10px 0}
.dialog-output p{
font-size:15px}
.dialog .facts{
font-size:14px;
margin-bottom:20px}
.dialog .boundary{
font-size:14px;
color:var(--muted);
padding-top:20px;
border-top:1px solid var(--line)}
.contact-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:100px}
.contact-box{
background:var(--paper);
padding:36px;
border-radius:12px}
.field{
margin:24px 0}
.field label{
display:block;
font-size:14px;
margin-bottom:10px;
font-weight:500}
.field input,.field select{
width:100%;
border:1px solid #8b857c;
border-radius:5px;
min-height:50px;
padding:10px 13px;
background:white;
color:var(--ink);
font-size:16px}
.field input:read-only{
color:var(--muted)}
.error{
color:var(--red-text);
font-size:13px;
margin-top:6px}
.field [aria-invalid=true]{
border:2px solid var(--red-text)}
.preview-summary{
padding:25px;
background:white;
border-left:3px solid var(--signal);
margin-top:26px}
.preview-summary h3{
font-size:26px}
.preview-summary p{
font-size:15px;
margin-top:15px}
.wide-statement{
font-size:clamp(36px,5.4vw,76px);
letter-spacing:-.05em;
line-height:1.15;
max-width:1080px}
.wide-statement span{
color:var(--muted)}
.approach-step{
display:grid;
grid-template-columns:100px 1fr 1fr;
gap:35px;
padding:35px 0;
border-top:1px solid var(--line)}
.approach-step .step-number{
font-size:40px;
color:var(--red-text);
letter-spacing:-.04em}
.approach-step p{
color:var(--muted);
font-size:16px}
.method-aside{
padding:28px;
border-left:2px solid var(--signal);
background:var(--paper);
margin-top:35px}
.policy{
max-width:800px}
.policy h2{
font-size:30px;
margin:35px 0 18px}
.policy p{
color:var(--muted)}
.hero-enter{
animation:gentle-in .45s var(--ease)}
.seen{
animation:gentle-in .4s var(--ease)}
@keyframes gentle-in{
from{
opacity:.2;
transform:translateY(12px)}
to{
opacity:1;
transform:none}
}
@keyframes panel-in{
from{
opacity:0;
transform:translateY(16px)}
to{
opacity:1;
transform:none}
}
@keyframes panel-out{
to{
opacity:0;
transform:translateY(12px)}
}
@keyframes backdrop-in{
from{
opacity:0}
to{
opacity:1}
}
@media(min-width:1600px){
.hero{
padding-top:90px}
}
@media(max-width:1100px){
.container{
width:calc(100% - 64px)}
.header-inner{
gap:25px}
.desktop-nav{
gap:22px}
.header-cta{
display:none}
.hero-stage{
gap:35px;
padding-inline:35px}
.split,.section-heading{
gap:50px}
.feature-offer{
gap:40px;
padding:40px}
.detail-layout{
gap:50px;
grid-template-columns:minmax(0,1fr) 280px}
.offer-row{
grid-template-columns:30px 1fr 1fr auto;
gap:15px}
.offer-row h3{
font-size:24px}
.principles{
gap:22px}
.contact-layout{
gap:50px}
}
@media(max-width:767px){
:root{
--header:68px}
.container{
width:calc(100% - 40px)}
.section{
padding-block:70px}
.section-tight{
padding-block:48px}
.preview-strip{
font-size:10px;
padding:6px 12px}
.header-inner{
height:68px;
flex-wrap:wrap;
gap:12px}
.brand{
width:105px}
.desktop-nav{
gap:14px;
font-size:12px;
flex-wrap:wrap}
.enhanced .desktop-nav{
display:none}
.enhanced .menu-toggle{
display:block}
.site-header:not(.enhanced *) .header-inner{
height:auto;
min-height:68px}
h1{
font-size:clamp(42px,10.8vw,70px);
letter-spacing:-.055em;
line-height:1.05}
h2{
font-size:38px}
h3{
font-size:25px}
.eyebrow{
font-size:10px;
gap:8px;
letter-spacing:.11em}
.lead{
font-size:19px}
.hero{
padding-top:44px}
.hero .eyebrow{
margin-bottom:25px}
.hero-bottom{
grid-template-columns:1fr;
gap:24px;
margin-top:25px}
.hero-bottom .lead{
font-size:18px}
.hero-note{
order:2;
font-size:10px}
.hero .actions{
gap:16px}
.btn{
font-size:14px;
gap:20px;
padding:13px 18px;
min-height:50px}
.actions .text-link{
font-size:14px}
.hero-stage{
margin-top:38px;
padding:26px 22px 0;
grid-template-columns:1fr;
gap:30px;
min-height:0}
.stage-copy{
padding:0;
gap:15px}
.stage-copy h2{
font-size:28px;
max-width:100%}
.stage-copy p{
font-size:14px;
max-width:100%}
.stage-copy .stage-no{
display:none}
.paper-document{
padding:22px 20px;
transform:rotate(-1.5deg)}
.doc-title{
font-size:27px}
.doc-question{
font-size:12px}
.doc-line{
font-size:11px;
grid-template-columns:20px 1fr auto;
padding:13px 0;
gap:6px}
.tag{
font-size:9px;
padding:2px 4px}
.doc-header{
font-size:8px}
.doc-header img{
width:56px}
.doc-foot{
font-size:8px}
.section-heading,.split{
grid-template-columns:1fr;
gap:25px}
.section-heading{
margin-bottom:33px}
.section-heading p{
font-size:16px}
.section-heading .eyebrow{
margin-bottom:20px}
.concern-row{
grid-template-columns:25px 1fr 25px;
gap:12px;
padding:25px 0;
min-height:0}
.concern-row h3{
font-size:25px}
.concern-row p{
grid-column:2;
grid-row:2;
font-size:14px}
.concern-row .arrow{
grid-column:3;
grid-row:1;
font-size:25px}
.concern-row:hover{
padding-inline:7px}
.pillar h3{
font-size:23px}
.value-sheet{
padding:25px}
.value-rows>div{
font-size:13px}
.feature-offer{
padding:28px 24px;
grid-template-columns:1fr;
gap:32px}
.feature-offer h2{
font-size:43px;
margin-top:22px}
.offer-facts{
gap:10px;
font-size:11px}
.offer-facts span+span{
padding-left:10px}
.output-sheet{
padding:25px}
.output-sheet h3{
font-size:29px}
.offer-row{
grid-template-columns:23px 1fr auto;
gap:13px;
padding-block:27px}
.offer-row h3{
font-size:25px}
.offer-row .offer-summary{
grid-column:2;
grid-row:2;
font-size:14px}
.row-actions{
grid-column:3;
grid-row:1 / 3;
flex-direction:column;
gap:10px}
.row-actions>a{
font-size:11px}
.round-btn{
width:44px;
height:44px}
.principles{
grid-template-columns:1fr 1fr;
gap:35px 25px;
margin-top:42px}
.principles h3{
font-size:22px;
margin-top:22px}
.principles p{
font-size:14px}
.closing{
display:block}
.closing .btn{
margin-top:28px}
.closing h2{
font-size:40px}
.footer-top,.footer-bottom{
flex-direction:column;
gap:24px}
.footer-links{
flex-wrap:wrap;
gap:16px 25px}
.footer-wordmark{
margin:45px 0 32px}
.footer-bottom nav{
gap:20px}
.page-hero{
padding:38px 0 45px}
.page-hero h1{
font-size:clamp(42px,10.6vw,64px);
overflow-wrap:break-word;
margin-top:22px}
.breadcrumb{
margin-bottom:28px}
.page-hero .lead{
font-size:19px}
.detail-layout{
display:flex;
flex-direction:column;
gap:48px}
.fact-panel{
position:static;
width:100%;
order:-1;
padding:25px}
.fact-panel dl{
display:grid;
grid-template-columns:1fr 1fr;
gap:0 20px}
.fact-panel .btn{
width:auto}
.detail-body{
width:100%;
min-width:0}
.detail-body h2{
font-size:31px}
.detail-body section{
padding-bottom:35px;
margin-bottom:35px}
.scope-grid{
grid-template-columns:1fr;
gap:16px}
.scope-grid>div{
padding:22px}
.choice-area{
padding:28px 22px}
.choice-area h2{
font-size:32px}
.choice-grid{
grid-template-columns:1fr;
gap:25px}
.compare-table thead{
display:none}
.compare-table tbody{
display:grid;
gap:20px}
.compare-table tr{
display:block;
border:1px solid var(--line);
padding:18px;
border-radius:8px}
.compare-table td{
display:block;
border:0;
padding:8px 0;
font-size:14px}
.compare-table td:first-child{
font-size:22px;
letter-spacing:-.03em}
.compare-table td:not(:first-child):before{
content:attr(data-label);
font-size:11px;
display:block;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.04em}
.dialog{
width:100%;
height:100dvh;
max-width:none;
max-height:none;
margin:0;
border-radius:0}
.dialog-head{
padding:17px 20px}
.dialog-body{
padding:28px 23px 45px}
.dialog h2{
font-size:39px}
.dialog .lead{
font-size:18px}
.contact-layout{
grid-template-columns:1fr;
gap:35px}
.contact-box{
padding:27px 22px}
.approach-step{
grid-template-columns:40px 1fr;
gap:18px}
.approach-step .step-number{
font-size:28px}
.approach-step p{
grid-column:2;
font-size:15px}
.approach-step h3{
font-size:25px}
.wide-statement{
font-size:38px}
.edition-panel{
padding:24px}
.edition-panel h3{
font-size:27px}
}
@media(max-width:370px){
.container{
width:calc(100% - 32px)}
.principles{
grid-template-columns:1fr}
.hero-stage{
padding-inline:15px}
.paper-document{
padding-inline:15px}
.hero .actions{
align-items:flex-start;
flex-direction:column}
.hero .btn{
width:100%}
.fact-panel dl{
display:block}
.offer-facts{
gap:7px}
.footer-links{
font-size:13px}
}
@media(max-height:750px){
.fact-panel{
position:static}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*:before,*:after{
animation:none!important;
transition:none!important}
.arrow{
transform:none!important}
}
@media print{
.site-header,.preview-strip,.actions,.row-actions,dialog,.site-footer{
display:none!important}
.container{
width:100%}
.section{
padding-block:25px}
.detail-layout,.split{
display:block}
.fact-panel{
position:static}
body{
font-size:12pt}
.paper-document{
transform:none}
}
/* Progressive controls are shown only after their own handlers initialise. */
.choice-grid,[data-fit-reset],.annotation-buttons{
display:none}
.fit-enhanced .choice-grid{
display:grid}
.fit-enhanced [data-fit-reset]{
display:inline-flex}
.annotation-ready .annotation-buttons{
display:flex}
html{
scrollbar-gutter:stable}