/* Shared layouts for the directory, product and company pages. */
.interior .site-header { position:relative; }
.interior nav a[aria-current="page"] { opacity:1; text-decoration:underline; text-decoration-color:var(--orange, #e65124); text-underline-offset:6px; }
.page-hero { padding-top:88px; padding-bottom:88px; }
.page-hero h1 { font-size:clamp(42px,5.4vw,72px); max-width:18ch; line-height:1.08; }
.page-lede { max-width:57ch; color:var(--muted); font-size:20px; margin:26px 0; }
.page-section { padding-top:80px; padding-bottom:80px; }
.page-section h2 { font-size:clamp(32px,3.5vw,46px); max-width:24ch; }
.cream { background:var(--cream); border-block:1px solid var(--line); }
.app-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.directory-card { display:grid; grid-template-columns:68px minmax(0,1fr); gap:22px; padding:32px; background:var(--cream); border:1px solid var(--line); border-radius:14px; transition:box-shadow .2s; }
.directory-card:hover { box-shadow:0 14px 34px #18232612; }
.directory-card h2 { font-size:34px; }
.directory-card p:not(.eyebrow) { color:var(--muted); }
.app-icon { display:block; width:68px; height:68px; filter:var(--icon-filter); }
.product-icon { display:block; width:56px; height:56px; margin-bottom:18px; filter:var(--icon-filter); }
.status-pill { display:inline-block; padding:5px 10px; border:1px solid var(--line-strong); background:var(--surface-subtle); color:var(--ink); border-radius:5px; font-size:12px; line-height:1.6; }
.directory-link { display:flex; justify-content:space-between; gap:16px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); font-weight:700; }
.directory-link:hover, .directory-card h2 a:hover { text-decoration:underline; text-underline-offset:5px; }
.product-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:72px; align-items:center; }
.product-hero h1 { font-size:clamp(40px,4.8vw,64px); }
.product-hero .actions { margin-top:28px; flex-wrap:wrap; }
.back-link { display:inline-block; margin-bottom:30px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; }
.product-facts { padding:32px; background:var(--cream); border:1px solid var(--line); border-radius:12px; }
.product-facts h2 { font-size:28px; }
.product-facts p, .product-facts dd { color:var(--muted); }
.product-facts dt { font-weight:700; margin-top:24px; }
.product-facts dd { margin:8px 0 0; font-size:14px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:48px; }
.feature-grid article { border-top:1px solid var(--line-strong); padding-top:24px; }
.feature-grid h3 { font-size:24px; line-height:1.2; }
.feature-grid p { color:var(--muted); }
.feature-number { display:block; color:var(--orange-text); font:12px/1.5 monospace; margin-bottom:20px; }
.architecture { margin:38px 0; padding:32px; background:var(--surface-subtle); border-radius:12px; }
.architecture ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; list-style:none; padding:0; margin:0; }
.architecture li { position:relative; padding:24px; border:1px solid var(--line-strong); background:var(--cream); border-radius:8px; font-weight:700; }
.architecture li + li::before { content:'→'; position:absolute; left:-26px; top:calc(50% - 12px); color:var(--orange); }
.architecture figcaption { margin-top:20px; color:var(--muted); font-size:12px; }
.screens { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin:0; }
.screens figure { margin:0; }
.screens img { display:block; width:100%; height:auto; border:1px solid var(--line-strong); border-radius:10px; background:var(--paper); }
.screens a { display:block; border-radius:10px; cursor:zoom-in; }
.screens a:hover img { border-color:var(--orange); }
.screens figcaption { margin-top:12px; color:var(--muted); font-size:13px; }
.practical-note { padding:30px; border:1px solid var(--line-strong); background:var(--surface-subtle); border-radius:8px; }
.practical-note h2, .practical-note h3 { font-size:26px; }
.note-spaced { margin-top:40px; }
.practical-note p, .practical-note li { max-width:80ch; color:var(--muted); }
.practical-note ul { margin:0; padding-left:20px; }
.practical-note li + li { margin-top:8px; }
.practical-note a { text-decoration:underline; text-underline-offset:3px; }
.page-ending { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.page-ending p { max-width:55ch; color:var(--muted); }
.resource-links { display:grid; gap:16px; min-width:230px; }
.resource-links a { padding:12px 0; border-bottom:1px solid var(--line); text-decoration:underline; text-underline-offset:4px; }
.operator-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 48px; margin:40px 0 0; }
.operator-list dt { font-weight:700; font-size:18px; }
.operator-list dd { margin:6px 0 0; color:var(--muted); }
.engagement-steps article { display:grid; grid-template-columns:200px minmax(0,700px); gap:60px; padding:40px 0; border-bottom:1px solid var(--line); }
.engagement-steps article:first-child { padding-top:0; }
.engagement-steps p { color:var(--muted); font-size:18px; }
.faq { max-width:850px; }
.faq h2 { margin-bottom:35px; }
.faq details { border-bottom:1px solid var(--line); padding:22px 0; }
.faq summary { cursor:pointer; font-size:19px; font-weight:700; }
.faq details p { color:var(--muted); max-width:70ch; }
.page-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.page-footer nav { flex-wrap:wrap; gap:18px; }
.page-footer small { color:var(--muted); }
@media (max-width:960px) {
  .screens { grid-template-columns:1fr; }
  .page-hero { padding-block:56px; }
  .product-hero, .app-directory, .feature-grid { grid-template-columns:1fr; gap:24px; }
  .product-hero h1 { max-width:18ch; }
  .page-section { padding-block:56px; }
  .page-ending { flex-direction:column; align-items:flex-start; }
  .engagement-steps article { grid-template-columns:1fr; gap:8px; }
  .operator-list { grid-template-columns:1fr; gap:22px; }
  .architecture ol { grid-template-columns:1fr; gap:32px; }
  .architecture li + li::before { content:'↓'; left:calc(50% - 6px); top:-29px; }
}
@media (max-width:680px) {
  .directory-card { padding:24px; grid-template-columns:1fr; gap:18px; }
  .page-hero h1 { font-size:40px; }
  .product-facts, .architecture { padding:24px; }
}
@media (prefers-reduced-motion:reduce) { .directory-card { transition:none; } }