/* Shared presentation for Petonly's procurement website. */
:root{--paper:#fff;--ink:#242a28;--muted:#58615e;--line:#dce1df;--light:#f4f6f5}
body{font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65}
h1,h2,h3,.trust strong{font-family:Arial,Helvetica,sans-serif;letter-spacing:-.025em;color:var(--ink)}
h1{font-size:clamp(34px,3.7vw,50px);font-weight:700;line-height:1.14}
h2{font-size:clamp(27px,2.6vw,36px);font-weight:600;line-height:1.22}
h3{font-size:22px;line-height:1.3}
.topline{font-size:11px;letter-spacing:.025em;text-transform:none;padding:6px 16px}
.header{height:88px;border-bottom:1px solid var(--line)}
.brand small{letter-spacing:.12em}.nav a:hover{color:var(--green);text-decoration:underline;text-underline-offset:5px}
.btn{gap:10px;padding:12px 20px;border-radius:3px;font-size:14px}
.arrow,.product-card h3>span[aria-hidden],.step i,.photo-label .mark{display:none}
.eyebrow{text-transform:none;letter-spacing:.015em;font-size:12px;color:#53675c;margin-bottom:12px}
.eyebrow:before{display:none}
.hero{padding-top:30px;padding-bottom:30px;gap:45px}
.hero h1,.localized .hero h1{font-size:clamp(34px,3.7vw,50px)}
.hero h1 em{font-family:inherit;font-style:normal;font-weight:700;color:var(--green)}
.hero p{font-size:16px;line-height:1.7;max-width:500px}
.hero-photo{border-radius:4px;background:#f5f6f5;min-height:400px}
.hero-photo>img{height:400px;object-fit:contain;padding:12px 20px 72px}
.photo-label{background:#fff;border:1px solid var(--line);backdrop-filter:none;left:18px;right:18px;bottom:18px;padding:12px 16px}
.photo-label strong{font-size:13px}.photo-label small{font-size:11px}
.actions{margin:22px 0}
.procurement-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:20px 0;margin:0;border-top:1px solid var(--line)}
.procurement-facts dt{font-size:12px;color:var(--muted);margin-bottom:4px}
.procurement-facts dd{margin:0;font-size:15px;font-weight:600;line-height:1.5}
.trust{padding:20px 0}.trust strong{font-size:26px}.trust>div{padding:0 24px}
.section{padding:56px 0}.section-head{margin-bottom:24px}.split{gap:48px}
.text-link{white-space:normal;font-size:14px;border-bottom-color:#9baaa2;padding-bottom:3px}
.text-link span{margin-left:8px}
.product-image{background:#f4f6f5;border-radius:3px;margin-bottom:16px}
.product-card h3{font-size:21px}.product-card p{font-size:14px}
.tag{text-transform:none;letter-spacing:0;border:1px solid #e1e6e2;background:#fff;font-size:11px}
.chips span{font-size:11px;background:#fff}
.leaf-panel{background:#edf2ee;border:1px solid #dce5de;min-height:330px;border-radius:3px}
.plant-word{font:600 38px/1.25 Arial,Helvetica,sans-serif;letter-spacing:-.02em;color:var(--green)}
.plant-word small{font:12px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.04em;color:#52645a}
.panel-caption{color:#52645a;border-color:#cbd7ce}
.factory-img{border-radius:3px}
.features{gap:24px;padding-top:24px}.features .num{margin-bottom:10px;color:#607066}
.page-intro{padding:32px 0 26px;max-width:900px}
.page-intro h1,.localized .page-intro h1{font-size:clamp(32px,3.4vw,44px);margin-bottom:16px}
.page-intro p{max-width:760px;font-size:16px;margin-bottom:12px}
.breadcrumb{margin-bottom:22px;color:#66716a}
.guide-grid{display:block;margin-bottom:44px;border-top:1px solid var(--line)}
.guide-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 92px;column-gap:30px;row-gap:9px;padding:24px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;align-items:start}
.guide-card:hover{background:#f8faf9}
.guide-card .eyebrow{grid-column:1/-1;font-size:12px;margin:0;color:#586c5e}
.guide-card h2,.guide-card h3{grid-column:1;font-size:21px;line-height:1.35;letter-spacing:-.015em;margin:0}
.guide-card p{grid-column:2;font-size:14px;line-height:1.65;margin:0}
.guide-card .text-link{grid-column:3;justify-self:start;font-size:13px}
.option-grid{gap:24px}
.option{border:0;border-top:2px solid #c7d3cb;border-radius:0;padding:20px 0}
.option h3{font-size:20px}
.long-step{padding:20px 0}.long-step b{margin-bottom:12px}.long-step p{font-size:14px}
.detail-hero{gap:44px;padding-bottom:40px}
.detail-hero h1,.localized .detail-hero h1{font-size:clamp(32px,3.4vw,44px)}
th{background:#f1f4f2;color:var(--ink);text-transform:none;letter-spacing:0;font-size:13px}
td,th{padding:15px 16px}
.form-card{background:#f5f7f6;border:1px solid var(--line);border-radius:3px}
.field input,.field select,.field textarea{background:#fff;color:var(--ink);border-color:#bfcac3;font-size:14px}
.field label{font-size:13px}.form-note,.note{font-size:12px;color:#617066}
.contact-layout{gap:54px;padding-bottom:56px}
.contact-card small{color:#617066;letter-spacing:0;text-transform:none}
.contact-card a,.contact-card strong{font-size:18px}
.buyer-article{max-width:900px;padding-bottom:48px}.buyer-article section{padding:14px 0}
.buyer-article h2{font-size:28px}.buyer-article h3{font-size:22px}
.buyer-article p{line-height:1.8;color:#414b46}
.buyer-callout{border-left:3px solid var(--green);border-radius:0;padding:22px}
.cta{padding:32px 0}.cta h2{font-size:30px;color:#fff}.cta p{color:#e0e8e2;font-size:14px}
.footer{border-top:1px solid var(--line);padding-top:36px}.footer-main{gap:30px}
.footer p,.footer a{font-size:13px}.footer-bottom{font-size:11px}
.floating{border-radius:4px;box-shadow:none;padding:10px 13px}
.language-switch ul{background:#fff}
@media(min-width:761px) and (max-width:1200px){.header{height:auto}}
@media(max-width:760px){
 .header{height:76px}
 .header .nav{background:#fff}
 .hero{gap:24px;padding:24px 0}
 .hero h1,.localized .hero h1{font-size:36px}
 .hero-photo,.localized .hero-photo{min-height:330px;height:auto}
 .hero-photo>img,.localized .hero-photo>img{height:330px;min-height:330px}
 .procurement-facts{grid-template-columns:1fr;gap:12px;padding:18px 0}
 .procurement-facts>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px}
 .procurement-facts dt{margin:0}.procurement-facts dd{font-size:14px}
 .trust{gap:18px;padding:18px 0}.trust>div{padding:0}
 .section{padding:36px 0}.split{gap:28px}
 .page-intro{padding:24px 0}.page-intro h1,.localized .page-intro h1{font-size:32px}
 .detail-hero h1,.localized .detail-hero h1{font-size:32px}
 .breadcrumb{margin-bottom:18px}
 .guide-card{grid-template-columns:1fr;gap:10px;padding:20px 0}
 .guide-card h2,.guide-card h3,.guide-card p,.guide-card .text-link{grid-column:1}
 .guide-card h2,.guide-card h3{font-size:21px}
 .leaf-panel{min-height:280px}.plant-word{font-size:34px}
 .cta h2{font-size:26px}.cta .wrap{align-items:flex-start}
 .contact-layout{gap:28px}.form-card{padding:22px}
 .footer-main{gap:24px}.floating{font-size:10px}
}