/* Static pages (about, products, contact, privacy, 404). Reuses the tokens, nav, buttons,
   form and footer from style.css — this file only adds what those don't cover. */

/* the shared nav is fixed; these pages are always in its "solid" state */
.pg-body{padding-top:68px}
.ald-menu[hidden]{display:none}
.pg-nav{padding:9px var(--gut);background:rgba(247,245,240,.88);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-bottom-color:var(--line-soft)}
.ald-navlink[aria-current="page"]{color:var(--ink)}
.ald-navlink[aria-current="page"]::after{right:0}

/* ---------- page header ---------- */
.pg-hero{padding:clamp(56px,9vw,120px) var(--gut) clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.pg-h1{margin:0;max-width:18ch;font-size:clamp(38px,6.2vw,92px);font-weight:700;letter-spacing:-.035em;line-height:.98}
.pg-hero .ald-lead{max-width:60ch}

/* ---------- sections ---------- */
.pg-sec{padding:clamp(44px,6vw,88px) var(--gut)}
.pg-sec--alt{background:var(--bg-alt)}
.pg-sec+.pg-sec{border-top:1px solid var(--line)}
.pg-sec--alt+.pg-sec,.pg-sec+.pg-sec--alt{border-top:0}
.pg-h2{margin:0 0 clamp(20px,2.4vw,32px);font-size:clamp(26px,3.2vw,42px);font-weight:700;letter-spacing:-.025em;line-height:1.05}
.pg-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
@media (max-width:860px){.pg-split{grid-template-columns:1fr}}

/* ---------- prose (privacy policy, long copy) ---------- */
.pg-prose{max-width:72ch}
.pg-prose h2{margin:clamp(32px,4vw,48px) 0 12px;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.pg-prose h2:first-child{margin-top:0}
.pg-prose p,.pg-prose li{font-size:16px;line-height:1.7}
.pg-prose p{margin:0 0 14px}
.pg-prose ul{margin:0 0 14px;padding-left:22px}
.pg-prose li{margin:0 0 8px}
.pg-prose a{border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.pg-prose a:hover{color:var(--red);border-color:var(--red)}
.pg-meta{margin:20px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- cards and lists ---------- */
.pg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,1.6vw,20px)}
.pg-list{margin:0;padding:0;list-style:none}
.pg-list li{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.pg-list li:first-child{border-top:0;padding-top:0}
.pg-list strong{flex:none;min-width:7.5em;font-size:17px;letter-spacing:-.01em}
.pg-list span{color:var(--muted);line-height:1.6}
@media (max-width:560px){.pg-list li{flex-direction:column;gap:4px}}
.pg-tags{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--muted)}

/* ---------- product card ---------- */
.pg-product{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);padding:clamp(28px,4vw,56px);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-md)}
@media (max-width:860px){.pg-product{grid-template-columns:1fr}}
.pg-product-name{margin:0 0 10px;font-size:clamp(34px,5vw,64px);font-weight:700;letter-spacing:-.035em;line-height:1}
.pg-product-tag{margin:0 0 20px;font-size:clamp(18px,1.8vw,24px);font-weight:500;letter-spacing:-.015em}
.pg-product-az{margin:-8px 0 20px;font-size:14px;color:var(--muted);font-style:italic}
.pg-product p{margin:0 0 22px;line-height:1.7;color:var(--muted);max-width:56ch}
.pg-features{margin:0;padding:0;list-style:none}
.pg-features li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft);font-size:15px;line-height:1.5}
.pg-features li:first-child{border-top:0;padding-top:0}
.pg-features li::before{content:"♥";flex:none;color:var(--red);font-size:12px;padding-top:3px}
.pg-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(24px,3vw,36px)}

/* ---------- facts (company / contact details) ---------- */
.pg-facts{margin:0;display:grid;gap:0}
.pg-facts>div{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);gap:18px;padding:14px 0;border-top:1px solid var(--line)}
.pg-facts>div:first-child{border-top:0;padding-top:0}
.pg-facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.pg-facts dd{margin:0;font-size:15px;line-height:1.6}
.pg-facts a{border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.pg-facts a:hover{color:var(--red);border-color:var(--red)}
@media (max-width:560px){.pg-facts>div{grid-template-columns:1fr;gap:4px}}

/* ---------- contact form status ---------- */
.pg-form-status{min-height:1.5em;margin:0}
.pg-form[hidden],.pg-sent[hidden]{display:none}
.pg-sent{padding:clamp(24px,4vw,48px) 0}

/* ---------- 404 ---------- */
.pg-404{min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:center;gap:20px;padding:clamp(48px,8vw,96px) var(--gut)}

/* contact page: align the form with the details column instead of centring it */
.pg-sec .ald-contact{align-items:start}