/* POS2026 — keyword landing pages (includes/seo-page.php). Builds on style.css tokens. */

/* Breadcrumb */
.crumbs{ margin-bottom:clamp(20px,3vw,32px); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:6px; font-size:.875rem; color:var(--mut); }
.crumbs li{ display:inline-flex; align-items:center; gap:6px; }
.crumbs li + li::before{ content:"/"; color:var(--line-soft); }
.crumbs a{ color:var(--mut); font-weight:600; }
.crumbs a:hover{ color:var(--primary); }
.crumbs [aria-current]{ color:var(--secondary); font-weight:600; }

/* Hero variants */
.seo-hero .fhero-grid--solo{ grid-template-columns:minmax(0,1fr); }
.seo-hero .fhero-grid--solo h1{ max-width:24ch; }
.seo-meta{ font-size:.875rem; color:var(--mut); margin:-12px 0 24px; }
@media (max-width:900px){ .seo-hero .fhero-grid{ grid-template-columns:1fr; } }

/* Direct answer + intro */
.seo-intro{ background:var(--panel); border-bottom:1px solid var(--border); padding:clamp(48px,7vw,96px) 0; }
.seo-intro-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(28px,5vw,72px); align-items:start; }
.seo-intro-grid > :only-child{ grid-column:1 / -1; max-width:820px; }
.answer{ background:var(--accent); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px 26px; }
.answer-k{ font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:10px; }
.answer p:last-child{ font-size:1.125rem; line-height:1.65; color:var(--secondary); font-weight:500; }
@media (max-width:900px){ .seo-intro-grid{ grid-template-columns:1fr; } }

/* Prose (intro and articles) */
.prose{ max-width:72ch; }
.prose p{ color:var(--ink); line-height:1.75; margin-bottom:18px; }
.prose p:last-child{ margin-bottom:0; }
.prose a{ font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prose ul{ margin:0 0 20px; display:grid; gap:10px; }
.prose ul li{ position:relative; padding-left:22px; line-height:1.65; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.65em; width:8px; height:8px; border-radius:2px; background:var(--cyan); }
.prose .fsteps{ margin:0 0 20px; }
.prose .fsteps li{ font-size:1rem; line-height:1.65; }

/* Challenges */
.seo-pains{ background:var(--bg); }
.pain-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gap); }
.pain{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px; transition:border-color .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); }
.pain:hover{ border-color:var(--line-soft); transform:translateY(-3px); box-shadow:0 20px 40px -30px rgba(16,42,86,.45); }
.pain .ico{ width:44px; height:44px; border-radius:8px; background:var(--accent); color:var(--primary); display:grid; place-items:center; margin-bottom:16px; }
.pain .ico svg{ width:22px; height:22px; }
.pain h3{ font-size:1.125rem; margin-bottom:8px; }
.pain p{ color:var(--mut); font-size:var(--fs-small); line-height:1.6; }

/* Detail sections: headings are h3 inside h2 sections for a clean outline */
.fd .fd-t{ font-size:1.0625rem; margin-bottom:4px; }
.fdeep .module-copy > p{ color:var(--mut); font-size:1.0625rem; margin-bottom:18px; max-width:60ch; }
.fdeep .module-copy > p + .fd-list{ margin-top:28px; }
.module--text{ grid-template-columns:minmax(0,1fr); }
.module--text .module-copy{ max-width:820px; }

/* Comparison table */
.seo-table{ background:var(--panel); border-bottom:1px solid var(--border); }
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); -webkit-overflow-scrolling:touch; }
.table-wrap:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
.seo-table table{ width:100%; min-width:620px; border-collapse:collapse; font-size:var(--fs-small); }
.seo-table th,.seo-table td{ padding:16px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); line-height:1.55; }
.seo-table thead th{ background:var(--sidebar); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.9375rem; }
.seo-table thead th.is-us{ background:var(--primary); }
.seo-table tbody th{ font-weight:700; color:var(--secondary); width:24%; }
.seo-table td.is-us{ background:var(--tint); color:var(--secondary); font-weight:600; }
.seo-table tbody tr:last-child > *{ border-bottom:0; }
.table-note{ margin-top:16px; font-size:.875rem; color:var(--mut); max-width:80ch; }

/* Articles */
.seo-article{ background:var(--panel); }
.seo-article-grid{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start; }
.seo-article-grid.no-toc{ grid-template-columns:minmax(0,1fr); }
.toc{ position:sticky; top:calc(var(--nav-h) + 24px); border-left:2px solid var(--border); padding-left:18px; }
.toc-h{ font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:12px; }
.toc ol{ display:grid; gap:8px; counter-reset:toc; }
.toc li{ counter-increment:toc; }
.toc a{ display:block; color:var(--secondary); font-size:.9375rem; font-weight:600; line-height:1.4; }
.toc a::before{ content:counter(toc) ". "; color:var(--primary); }
.toc a:hover{ color:var(--primary); text-decoration:none; }
.prose-block{ padding:0 0 clamp(32px,4vw,48px); scroll-margin-top:calc(var(--nav-h) + 16px); }
.prose-block + .prose-block{ padding-top:clamp(32px,4vw,48px); border-top:1px solid var(--border); }
.prose-block h2{ font-size:clamp(1.5rem,2.6vw,2.125rem); margin-bottom:18px; }
.tip{ background:var(--accent); border-radius:var(--radius-sm); padding:16px 18px; color:var(--secondary)!important; }
@media (max-width:900px){ .seo-article-grid{ grid-template-columns:1fr; } .toc{ position:static; } }

/* Hubs */
.seo-hub{ background:var(--bg); }
.hub-group{ font-size:1.25rem; margin:clamp(36px,5vw,56px) 0 18px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.hub-group:first-of-type{ margin-top:0; }
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.hub-card{ display:grid; grid-template-columns:1fr 24px; grid-template-rows:auto auto; gap:6px 12px; height:100%; padding:22px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); color:var(--secondary); transition:border-color .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); }
.hub-card:hover{ text-decoration:none; border-color:var(--primary); transform:translateY(-3px); box-shadow:0 20px 40px -30px rgba(10,77,219,.6); }
.hub-t{ font-family:var(--font-display); font-weight:700; font-size:1.0625rem; line-height:1.3; }
.hub-d{ grid-column:1; color:var(--mut); font-size:var(--fs-small); line-height:1.5; }
.hub-go{ grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--primary); }
.hub-go svg{ width:20px; height:20px; transition:transform .3s var(--ease); }
.hub-card:hover .hub-go svg{ transform:translateX(4px); }

/* Module cards */
.seo-modules{ background:var(--panel); border-top:1px solid var(--border); }
.mod-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.mod-card{ display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; gap:4px 14px; height:100%; padding:20px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--secondary); transition:border-color .25s var(--ease),background .25s var(--ease),transform .3s var(--ease); }
.mod-card:hover{ text-decoration:none; border-color:var(--primary); background:var(--accent); transform:translateY(-2px); }
.mod-card .ico{ grid-row:1 / span 2; width:40px; height:40px; border-radius:8px; background:var(--panel); color:var(--primary); display:grid; place-items:center; }
.mod-card .ico svg{ width:20px; height:20px; }
.mod-t{ font-family:var(--font-display); font-weight:700; font-size:1rem; }
.mod-d{ color:var(--mut); font-size:.875rem; line-height:1.5; }

/* Getting started */
.seo-steps{ background:var(--bg); }
.seo-steps-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px); align-items:start; }
.seo-steps-grid .section-head{ margin-bottom:0; }
.seo-steps .fsteps-wrap{ margin-top:0; padding:28px; }
.seo-steps .fsteps li{ font-size:1rem; }
@media (max-width:900px){ .seo-steps-grid{ grid-template-columns:1fr; } }

/* Calculators */
.tool{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 30px 60px -40px rgba(16,42,86,.45); overflow:hidden; }
.tool-head{ background:var(--sidebar); color:#fff; padding:18px 24px; }
.tool-kicker{ font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:4px; }
.tool-title{ color:#fff; font-size:1.25rem; }
.tool-body{ padding:24px; display:grid; gap:18px; }
.tool-mode{ border:0; margin:0; padding:0; display:grid; gap:8px; }
.tool-mode legend{ font-weight:700; font-size:.875rem; color:var(--secondary); margin-bottom:8px; padding:0; }
.tool-mode label{ display:flex; align-items:center; gap:10px; min-height:40px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:var(--fs-small); cursor:pointer; }
.tool-mode label:has(input:checked){ border-color:var(--primary); background:var(--accent); color:var(--secondary); font-weight:600; }
.tool-mode input{ accent-color:var(--primary); width:18px; height:18px; margin:0; }
.tool-field{ display:grid; gap:6px; }
.tool-field label{ font-weight:700; font-size:.875rem; color:var(--secondary); }
.tool-field--inline{ grid-template-columns:auto 1fr; align-items:center; gap:12px; }
.tool-input{ display:flex; align-items:stretch; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; overflow:hidden; }
.tool-input:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(10,77,219,.15); }
.tool-input input{ flex:1; min-width:0; min-height:48px; border:0; padding:0 14px; font:inherit; font-size:16px; color:var(--ink); background:transparent; }
.tool-input input:focus{ outline:none; }
.tool-affix{ display:grid; place-items:center; padding:0 12px; background:var(--tint); color:var(--mut); font-weight:700; font-size:.9375rem; }
.tool select{ min-height:48px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; font:inherit; font-size:16px; color:var(--ink); }
.tool-hint{ font-size:.8125rem; color:var(--mut); }
.tool-out{ margin:6px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.tool-res{ background:var(--accent); border-radius:var(--radius-sm); padding:14px 16px; }
.tool-res dt{ font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-bottom:4px; }
.tool-res dd{ margin:0; font-family:var(--font-display); font-weight:800; font-size:1.375rem; color:var(--secondary); font-variant-numeric:tabular-nums; word-break:break-word; }