.catage-page{
background:#f8f2e9;
color:#30231d;
}

.catage-page .topbar{
background:#57352b;
border-bottom-color:#70493d;
box-shadow:0 8px 24px rgba(70,39,30,.16);
}

.catage-page .brand,
.catage-page .topnav a{
color:#fff;
}

.catage-page .brand span,
.catage-page .topnav a:first-child{
color:#f2bd87;
}

.catage-page .topnav a:hover{
color:#ffddba;
}

.catage-page .lang-switch{
max-width:none;
margin:0;
padding:10px max(18px,calc((100% - 1180px)/2 + 18px));
background:#f3e5d7;
border-bottom:1px solid #d9bda8;
color:#5d4136;
}

.catage-page .lang-switch-label{
color:#775448;
font-weight:700;
}

.catage-page .lang-switch a{
padding:2px 5px;
border-radius:4px;
color:#8c5038;
font-weight:700;
}

.catage-page .lang-switch a:hover{
background:#e5ccba;
color:#4d2c23;
text-decoration:none;
}

.catage-page .lang-switch strong{
padding:2px 7px;
border-radius:4px;
background:#6d3d30;
color:#fff9f3;
}

.catage-hero{
position:relative;
isolation:isolate;
overflow:hidden;
background-color:#e7c89f;
background-image:
linear-gradient(90deg,rgba(255,248,234,.99) 0%,rgba(249,228,196,.93) 39%,rgba(225,183,132,.19) 67%,rgba(225,183,132,.03) 100%),
url('/images/catage-hero.webp');
background-repeat:no-repeat;
background-position:center right;
background-size:cover;
color:#39271f;
border-bottom:1px solid rgba(121,73,45,.18);
box-shadow:0 18px 42px rgba(81,50,32,.12);
}

.catage-hero-inner{
width:min(1200px,calc(100% - 48px));
margin:0 auto;
padding:76px 0 78px;
}

.catage-hero-copy{
width:min(610px,56%);
}

.catage-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 13px;
border:1px solid rgba(126,77,47,.27);
border-radius:999px;
background:rgba(255,252,245,.84);
color:#74452f;
font-size:1rem;
font-weight:800;
line-height:1.4;
box-shadow:0 7px 20px rgba(103,63,38,.08);
}

.catage-eyebrow::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#b5663d;
box-shadow:0 0 0 5px rgba(181,102,61,.13);
}

.catage-hero h1{
margin:22px 0 16px;
color:#2d1e18;
font-size:3.45rem;
font-weight:900;
line-height:1.15;
letter-spacing:0;
text-wrap:balance;
text-shadow:0 1px 0 rgba(255,255,255,.45);
}

.catage-hero h1 strong{
color:#a34f2d;
font-weight:900;
}

.catage-hero-copy>p{
max-width:570px;
margin:0 0 24px;
color:#594237;
font-size:1.18rem;
line-height:1.8;
}

.catage-hero-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding:14px 20px;
border:1px solid #42291f;
border-radius:8px;
background:#5b3729;
color:#fff;
font-size:1.08rem;
font-weight:900;
line-height:1.4;
text-decoration:none;
box-shadow:0 13px 28px rgba(76,43,27,.24);
transition:background-color .18s ease,transform .18s ease;
}

.catage-hero-button:hover{
background:#74452f;
transform:translateY(-2px);
}

.catage-hero-button:focus-visible{
outline:3px solid #543123;
outline-offset:3px;
}

.catage-age-guide{
display:flex;
flex-wrap:wrap;
gap:10px 24px;
margin-top:26px;
width:fit-content;
padding:13px 0;
border-top:1px solid rgba(109,65,39,.22);
border-bottom:1px solid rgba(109,65,39,.22);
color:#604536;
font-size:1rem;
line-height:1.6;
}

.catage-age-guide span{
display:inline-flex;
align-items:baseline;
gap:6px;
}

.catage-age-guide b{
color:#783b23;
font-size:1.12rem;
}

.catage-page>.container{
padding-top:34px;
}

.catage-page .percent-desc{
border-left-color:#9b5735;
background:#fffaf2;
box-shadow:0 10px 28px rgba(96,57,33,.07);
}

.catage-page .percent-card.card-1{
scroll-margin-top:20px;
}

.catage-page .calculator-footer-bar{
background:#57352b;
color:#f8e8dc;
}

.catage-page .calculator-footer-brand strong span{
color:#f2bd87;
}

.catage-page .calculator-footer-brand p{
color:#edceba;
}

.catage-page .calculator-footer-nav a{
color:#fff9f3;
}

.catage-page .calculator-footer-bottom{
border-top-color:rgba(255,236,222,.2);
color:#e8bca4;
}

.percent-card.card-1{
--accent:#8f4d32;
border-color:#dfc6aa;
border-top-color:#8f4d32;
box-shadow:0 16px 38px rgba(78,46,29,.09);
}

.percent-card.card-1 .card-num{
background:#8f4d32;
box-shadow:0 5px 14px rgba(101,54,34,.28);
}

.percent-card.card-1 .date-select:focus{
outline:none;
border-color:#8f4d32;
box-shadow:0 0 0 4px rgba(143,77,50,.13);
}

body .percent-card.card-1 .result-coffee.result-coffee{
background:#f8e8d5;
border:1px solid #dab68f;
border-top:3px solid #8f4d32;
color:#783c27;
box-shadow:none;
font-weight:900;
}

@media(max-width:820px){
.catage-hero{
background-position:62% center;
background-image:
linear-gradient(90deg,rgba(255,248,234,.99) 0%,rgba(249,228,196,.95) 52%,rgba(225,183,132,.57) 100%),
url('/images/catage-hero.webp');
}

.catage-hero-inner{
width:min(100% - 32px,680px);
padding:54px 0 58px;
}

.catage-hero-copy{
width:72%;
}

.catage-hero h1{
font-size:2.65rem;
}

.catage-hero-copy>p{
font-size:1.08rem;
}
}

@media(max-width:560px){
.catage-hero{
background-position:68% center;
background-image:
linear-gradient(90deg,rgba(255,248,234,.99) 0%,rgba(249,228,196,.96) 68%,rgba(225,183,132,.72) 100%),
url('/images/catage-hero.webp');
}

.catage-hero-inner{
width:calc(100% - 28px);
padding:38px 0 42px;
}

.catage-hero-copy{
width:88%;
}

.catage-eyebrow{
font-size:.94rem;
}

.catage-hero h1{
margin-top:18px;
font-size:2.15rem;
line-height:1.22;
}

.catage-hero-copy>p{
font-size:1rem;
line-height:1.7;
}

.catage-hero-button{
width:100%;
padding:13px 16px;
}

.catage-age-guide{
gap:6px 16px;
margin-top:20px;
font-size:.95rem;
}

.catage-page>.container{
padding-top:22px;
}
}