/* Long-tail pages (area + style). Reuses app.css tokens; only layout the home page lacks. */
body.sub .top { position: sticky; background: rgba(26,21,18,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
body.sub .mark { text-decoration: none; color: var(--paper); }
.top-back { margin-left: auto; padding: .55rem 1rem; font-size: .85rem; }
.hero-sub { padding-top: calc(var(--sec) + 64px); }
.hero-sub h1 { font-size: var(--t-display); color: var(--paper); line-height: .98; margin: calc(var(--u)*2) 0; max-width: 16ch; }
.hero-sub .lede { font-size: clamp(1.05rem, 1.4vw, 1.3rem); max-width: 52ch; color: var(--paper); margin-bottom: var(--u); }
.hero-sub .muted { max-width: 52ch; }
.cta-row { display: flex; gap: var(--u); flex-wrap: wrap; margin-top: calc(var(--u)*3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u)*2); margin-top: calc(var(--u)*3); }
.card-link { text-decoration: none; color: inherit; }
.card-link img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; transition: transform .35s cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) { .card-link:hover img { transform: scale(1.02); } }
.card-link h3 { margin-top: var(--u); font-size: 1.15rem; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*2); }
.two-up figure { margin: 0; }
.two-up img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.two-up figcaption { margin-top: calc(var(--u)*.75); }
.expect { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: calc(var(--u)*2); margin: calc(var(--u)*3) 0 0; }
.expect div { border-top: 1px solid var(--line); padding-top: var(--u); }
.expect dt { font-family: var(--ui); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--platinum-d); }
.expect dd { margin: .4rem 0 0; }
.expect a { color: var(--paper); }
.qa { margin-top: calc(var(--u)*3); max-width: 70ch; }
.qa details { border-top: 1px solid var(--line); padding: var(--u) 0; }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; font-family: var(--display); font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: var(--u); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--accent); }
.qa details[open] summary::after { content: "–"; }
.qa p { margin: var(--u) 0 0; color: var(--platinum-d); }
.cta-final { text-align: center; max-width: 60ch; }
.cta-final h2 { font-size: var(--t-h1); }
.cta-final .btn { margin-top: calc(var(--u)*2); }
.cta-final .fine { margin-top: calc(var(--u)*3); }
.cta-final .fine a { color: var(--platinum-d); }
@media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr 1fr; } .two-up { grid-template-columns: 1fr; } .hero-sub h1 { font-size: clamp(2.2rem, 11vw, 3.4rem); } }
@media (prefers-reduced-motion: reduce) { .card-link img { transition: none; } }