.page-hero{background:#EBDDC8}
.page-hero .inner{padding-block:56px 48px; text-align:center; max-width:760px}
.page-hero h1{font-size:clamp(2rem,4.2vw,3rem); line-height:1.3; margin-block:10px 14px}
.page-hero .lead{font-size:1.1rem; color:#4a4337; margin-inline:auto; max-width:600px}
.crumbs{font-size:.82rem; color:#6b604c; display:flex; gap:8px; margin-bottom:18px; justify-content:center}
.crumbs a{color:#6b604c; text-decoration:none} .crumbs a:hover{color:var(--gold)}
.filters{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px}
.filters button{background:rgba(255,255,255,.55); border:1px solid rgba(34,34,34,.18); color:var(--ink); border-radius:999px; padding:9px 18px; font:500 .9rem/1.4 var(--f-body); white-space:nowrap; flex:none; cursor:pointer; min-height:40px; transition:background .2s, border-color .2s, color .2s}
.filters button:hover{border-color:var(--gold)}
.filters button.active{background:var(--gold); border-color:var(--gold); color:#fff; font-weight:700}
.p-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:stretch}
@media (max-width:980px){ .p-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .p-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto} }
.p-card{background:var(--card-bg); border:1px solid var(--border); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease, opacity .3s ease}
.p-card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(60,45,20,.45); border-color:rgba(178,141,74,.55)}
.p-card.dim{display:none}
.p-media{background:#F1E9DC; padding:32px 32px 0; display:flex; justify-content:center}
.p-media .arch-box{width:100%; max-width:280px; aspect-ratio:4/5; border-radius:200px 200px 0 0; overflow:hidden; background:#F7F1E7; box-shadow:0 0 0 8px rgba(255,255,255,.55), 0 0 0 9px rgba(178,141,74,.35)}
.p-media img{width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.p-card:hover .p-media img{transform:scale(1.05)}
.p-body{padding:26px 24px 28px; display:flex; flex-direction:column; gap:12px; flex:1}
.p-meta{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.82rem}
.p-meta .tier-tag{font-size:.8rem; letter-spacing:0; direction:rtl}
.p-size{color:#6b604c}
.p-body h2{font-size:1.4rem}
.p-claim{font-weight:500; font-size:1rem; line-height:1.75; color:var(--olive)}
.p-list{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--border); padding-top:14px}
.p-list li{display:grid; grid-template-columns:8px minmax(0,1fr); gap:10px; font-size:.9rem; line-height:1.7}
.p-list li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); margin-top:.7em}
.p-list b{display:block; font-size:.92rem}
.p-list span{opacity:.8}
.p-for{font-size:.86rem; background:var(--off); border-radius:4px; padding:10px 12px; line-height:1.7}
.p-for b{color:var(--olive)}
.p-warn{font-size:.84rem; background:var(--sand); border-radius:4px; padding:10px 12px; line-height:1.7; display:flex; gap:8px}
.p-warn .ic{width:20px; height:20px; color:var(--olive); flex:none; margin-top:2px}
.p-actions{display:flex; gap:10px; margin-top:auto; padding-top:8px; flex-wrap:wrap}
.p-actions .btn{flex:1; padding-inline:14px}
.p-actions .btn-ghost{color:var(--olive); border-color:rgba(65,82,31,.4)}
.empty-note{text-align:center; opacity:.7; margin-top:20px; display:none}
.cmp-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:4px; background:var(--card-bg)}
table.cmp{width:100%; border-collapse:collapse; min-width:760px; font-size:.92rem}
.cmp th,.cmp td{padding:16px 18px; text-align:right; vertical-align:top; border-bottom:1px solid var(--border); line-height:1.75}
.cmp thead th{background:var(--olive); color:#fff; font-weight:700; font-size:.98rem}
.cmp thead th:first-child{background:#36451a}
.cmp tbody th{font-weight:700; color:var(--olive); width:150px; background:var(--off)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.routines{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:760px){ .routines{grid-template-columns:1fr} }
.routine-card{background:var(--card-bg); border:1px solid var(--border); border-radius:4px; padding:28px; display:flex; flex-direction:column; gap:16px}
.routine-card{position:relative; overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease}
.routine-card::after{content:""; position:absolute; inset-inline:0; top:0; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.routine-card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(60,45,20,.45); border-color:rgba(178,141,74,.55)}
.routine-card:hover::after{transform:scaleX(1)}
.r-step{transition:background .3s ease, padding .3s ease}
.r-step:hover{background:var(--off); padding-inline:10px}
.routine-card h3{font-size:1.25rem; transition:color .3s ease}
.routine-card:hover h3{color:var(--olive)}
@media (prefers-reduced-motion:reduce){ .routine-card,.routine-card::after,.r-step{transition:none} .routine-card:hover{transform:none} }
.routine-card > p{opacity:.8; font-size:.94rem}
.r-steps{display:flex; flex-direction:column; gap:0}
.r-step{display:grid; grid-template-columns:84px minmax(0,1fr); gap:14px; padding-block:14px; border-top:1px solid var(--border); align-items:start}
.r-when{font-weight:700; color:var(--gold); font-size:.9rem}
.r-step b{display:block}
.r-step span{font-size:.88rem; opacity:.8}
.cta-band{background:#EBDDC8; text-align:center}
.cta-band h2{font-size:clamp(1.5rem,3vw,2rem)}
.cta-band p{opacity:.82; margin-top:10px; max-width:560px; margin-inline:auto}
.cta-band .cta-row{justify-content:center; margin-top:24px}
@media (prefers-reduced-motion:reduce){ .p-card,.p-media img{transition:none} .p-card:hover,.p-card:hover .p-media img{transform:none} }