/* AutoFeed content page — reusable template layer.
   Loads after autofeed-home.css (shared furniture: header, footer, buttons,
   labels, buttons, reveals). Mobile first; every query below is min-width. */

/* --- page hero --- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--surface-section);border-bottom:1px solid var(--border-default);padding-block:var(--space-8)}
@media (min-width:900px){.page-hero{padding-block:var(--space-10) var(--space-9);min-height:68svh;display:flex;align-items:center}}
@media (min-width:900px){.page-hero>.af-container{width:100%}}
.page-hero-bg{position:absolute;inset:0;z-index:-2}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:68% 60%}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(17,19,21,.97) 8%,rgba(17,19,21,.88) 38%,rgba(17,19,21,.62) 100%)}
@media (min-width:900px){.page-hero::after{background:linear-gradient(to right,rgba(17,19,21,.97) 0%,rgba(17,19,21,.92) 34%,rgba(17,19,21,.66) 56%,rgba(17,19,21,.2) 86%)}.page-hero-bg img{object-position:58% 62%}}
/* Text-only hero: used where a photograph would be decoration rather than proof. */
.page-hero--plain{background:var(--surface-section)}
.page-hero--plain::after{display:none}
.flowline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-6);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--text-body)}
.flowline span{border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:10px var(--space-4);background:var(--af-graphite)}
.flowline b{color:var(--af-orange-hover);font-weight:var(--weight-medium)}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-6)}
.crumb a{color:var(--text-muted);border-bottom:0}
.crumb a:hover{color:var(--af-orange-hover)}
.crumb .sep{color:var(--af-orange-hover)}
.page-hero h1{font-size:var(--display-sm);text-transform:uppercase;font-weight:800;max-width:17ch}
.page-hero .lede{margin-top:var(--space-5);font-size:var(--text-xl);max-width:52ch}
.page-hero .actions{margin-top:var(--space-7)}

/* --- opening copy: the one asymmetric text block before the chapters --- */
.opening{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
@media (min-width:900px){.opening{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-9);align-items:start}}
.opening .statement{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:.98;letter-spacing:var(--tracking-tight)}
.prose{display:flex;flex-direction:column;gap:var(--space-5)}
.prose p{font-size:var(--text-lg);color:var(--text-body);max-width:66ch;text-wrap:pretty}
.prose a{color:var(--af-orange-hover)}
.prose a:hover{color:var(--af-white)}

/* --- article: sticky contents rail beside the chapters --- */
.article{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding-bottom:var(--space-8)}
@media (min-width:600px){.article{padding-bottom:var(--space-9)}}
@media (min-width:900px){.article{padding-bottom:var(--space-10)}}
@media (min-width:1200px){.article{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--space-9);align-items:start}}
.toc{display:none}
@media (min-width:1200px){
  .toc{display:flex;flex-direction:column;gap:var(--space-4);position:sticky;top:calc(var(--header-height) + var(--space-7))}
  .toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--border-default)}
  .toc a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--border-default);font-size:var(--text-sm);color:var(--text-muted);border-left:0;border-right:0;border-top:0}
  .toc a span{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
  .toc a:hover{color:var(--af-white)}
  .toc a[aria-current="true"]{color:var(--af-white)}
  .toc a[aria-current="true"] span{color:var(--af-orange-hover)}
}
.chapters{display:flex;flex-direction:column;gap:var(--space-9)}
@media (min-width:900px){.chapters{gap:var(--space-10)}}
.chapter{display:flex;flex-direction:column;gap:var(--space-6);scroll-margin-top:calc(var(--header-height) + var(--space-6))}
.chapter h2{font-size:clamp(1.75rem,3.4vw,3rem);text-transform:uppercase;font-weight:800;line-height:.96;max-width:18ch}

/* --- flow list: an ordered mechanism, not a feature list --- */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--border-default)}
@media (min-width:600px){.flow{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-7)}}
.flow li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--border-default);font-size:var(--text-base);color:var(--text-body)}
.flow li b{font-family:var(--font-mono);font-weight:var(--weight-medium);font-size:var(--text-xs);color:var(--af-orange-hover)}

/* --- next link: the sanctioned internal link block --- */
.next{display:flex;flex-direction:column;gap:var(--space-2);border-top:2px solid var(--af-orange);padding-top:var(--space-4);max-width:56ch}
.next .k{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.next p{font-size:var(--text-base);color:var(--text-body)}
.next a{color:var(--af-white);font-weight:var(--weight-semibold);border-bottom:1px solid var(--border-strong)}
.next a:hover{color:var(--af-orange-hover);border-bottom-color:var(--af-orange)}

/* --- media inside a chapter --- */
.shot{margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.shot .f{position:relative;overflow:hidden;border:1px solid var(--af-border);border-radius:var(--radius-md);background:var(--af-black)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.shot figcaption{font-size:var(--text-sm);color:var(--text-muted)}
.shot--wide .f{aspect-ratio:16/10}
@media (min-width:900px){.shot--wide .f{aspect-ratio:16/9}}
.proof{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
.proof .f{aspect-ratio:16/10}
@media (min-width:600px){.proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}}
@media (min-width:1200px){.proof{grid-template-columns:repeat(3,minmax(0,1fr))}.proof .f{aspect-ratio:16/9}}
.proof img{object-position:top center}
.proof h3{font-size:var(--text-base);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.proof .shot{gap:var(--space-3)}

/* Portrait asset: held to its own proportion beside the copy rather than cropped wide. */
.shot--tall .f{aspect-ratio:4/5}
.chapter>.shot--tall{max-width:620px}
.shot--tall img{object-position:center}
.chapter-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
.split-copy{display:flex;flex-direction:column;gap:var(--space-5)}
@media (min-width:900px){.chapter-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-7);align-items:start}.chapter-split .shot--tall .f{aspect-ratio:4/5}}

/* --- experience layer: hairline two-column index of what the customer meets --- */
.layer{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--border-default)}
@media (min-width:600px){.layer{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-8)}}
@media (min-width:1200px){.layer{grid-template-columns:repeat(3,minmax(0,1fr))}}
.layer div{padding:var(--space-4) 0;border-bottom:1px solid var(--border-default)}
.layer dt{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-heading)}
.layer dd{margin:0;margin-top:var(--space-2);font-size:var(--text-sm);color:var(--text-muted);max-width:40ch}

.layer--stacked{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.layer--stacked{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1200px){.layer--stacked{grid-template-columns:minmax(0,1fr)}}

/* --- two plain panels (stack choice) --- */
.panels{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
@media (min-width:900px){.panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
.panel{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-section);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.panel h3{font-size:var(--text-lg);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.panel p{font-size:var(--text-base);color:var(--text-body)}

/* --- closing --- */
.closing .actions{margin-top:var(--space-2)}

/* --- field tags: what the feed can supply, stated plainly --- */
.tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tags li{list-style:none;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-body);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:8px var(--space-3);background:var(--af-graphite)}

/* --- related solutions: the cluster link block, before the closing CTA --- */
.related{border-top:1px solid var(--border-default);background:var(--af-black)}
.related .head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
.related h2{font-size:var(--text-xl);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.rel-grid{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--border-default)}
@media (min-width:600px){.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-8)}}
@media (min-width:1200px){.rel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rel-grid a{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5) 0;border-bottom:1px solid var(--border-default);border-top:0;border-left:0;border-right:0}
.rel-grid a strong{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-heading);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.rel-grid a span{font-size:var(--text-sm);color:var(--text-muted);max-width:44ch}
.rel-grid a:hover strong{color:var(--af-orange-hover)}
.rel-grid a:hover span{color:var(--text-body)}

@media (min-width:1200px){.quick .stack h2{font-size:var(--display-sm)}}
/* A three-step flow stays a single column: a lone third row reads as a dangling item. */
.flow--short{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.flow--short{grid-template-columns:minmax(0,1fr);max-width:56ch}}

/* --- pricing: one tab per plan; without script every plan shows in order --- */
.pricing{display:flex;flex-direction:column;gap:var(--space-5)}
.pricing-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-1);padding:var(--space-1);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--af-graphite)}
.pricing-tabs[hidden]{display:none}
.pricing-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:var(--space-3) var(--space-4);font-family:var(--font-text);font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;text-align:left;color:var(--text-muted);background:transparent;border:0;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-control)}
.pricing-tabs button span{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:.04em;text-transform:none}
.pricing-tabs button:hover{color:var(--af-white)}
.pricing-tabs button[aria-selected="true"]{color:var(--af-white);background:var(--surface-panel);box-shadow:inset 0 -2px 0 var(--af-orange)}
.pricing-tabs button[aria-selected="true"] span{color:var(--af-orange-hover)}
.plan{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding:var(--space-6);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-section)}
@media (min-width:900px){.plan{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-7);padding:var(--space-7)}}
.plan[hidden]{display:none}
.plan h3,.plan-setup h3{font-size:var(--text-lg);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.plan-fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);margin-top:var(--space-4)}
.plan-fig b{font-family:var(--font-display);font-size:var(--display-sm);font-weight:800;line-height:1;letter-spacing:var(--tracking-display);color:var(--af-white)}
.plan-fig span{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.plan-alt{margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--af-orange-hover)}
.plan-basis{margin-top:var(--space-4);color:var(--text-body)}
.plan ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-default)}
.plan li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--border-default);color:var(--text-heading)}
.plan li::before{content:"";width:12px;height:2px;background:var(--af-orange);transform:translateY(-4px)}
.plan-suits{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--text-muted)}
.plan-setup{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);padding-top:var(--space-5);border-top:2px solid var(--af-orange)}
@media (min-width:900px){.plan-setup{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-7);align-items:end}}
.plan-setup .plan-fig b{font-size:var(--text-xl)}
.plan-setup>p{color:var(--text-body)}