/* SEO-01 - the search-engine content pages and the 404 of the public faces (layouts/site-seo.blade.php).
   Loaded AFTER resources/css/site-product.css, which brings the tokens (dark / light), the nav, the footer, .btn, .eyebrow, .lead, .fbul and the
   FAQ look (.faqitem). Here: tokens only (no hard-coded colour), logical properties (RTL by itself), no horizontal scroll at 390 px. */
.seo-page{min-height:100vh}
.seo-main{display:grid;gap:clamp(28px,5vw,56px);padding-block:clamp(10px,2vw,24px) clamp(40px,7vw,90px);max-width:1080px;margin-inline:auto}
.seo-main:focus{outline:none}
.seo-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font:500 13px/1.4 var(--f-mono);color:var(--muted)}
.seo-crumbs li+li::before{content:"/";margin-inline-end:6px;color:var(--rule)}
.seo-crumbs a{color:var(--muted);text-decoration:none}
.seo-crumbs a:hover{color:var(--ink)}
html[lang="ar"] .seo-crumbs ol{font-family:var(--f-ar)}
.seo-article{display:grid;gap:clamp(30px,5vw,60px);min-width:0}
.seo-head{display:grid;gap:14px;max-width:880px}
.seo-head h1,.seo-404 h1{font:700 clamp(28px,4.2vw,52px)/1.1 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
html[lang="ar"] .seo-head h1,html[lang="ar"] .seo-404 h1{line-height:1.35}
.seo-head .lead{margin:0;max-width:44em}
.seo-head .ctas{margin-top:8px}
.seo-sec{display:grid;gap:18px;min-width:0}
.seo-sec>h2,.seo-also>h2{font:600 clamp(22px,2.6vw,32px)/1.15 var(--f-display)}
html[lang="ar"] .seo-sec>h2,html[lang="ar"] .seo-also>h2{font-family:var(--f-ar)}
.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.seo-card{border:1px solid var(--rule);border-radius:18px;background:var(--panel);padding:clamp(18px,2.2vw,26px);display:grid;gap:8px;align-content:start;min-width:0;transition:border-color .2s}
.seo-card:hover{border-color:var(--teal)}
.seo-card h3{font:600 18px/1.3 var(--f-body)}
html[lang="ar"] .seo-card h3{font-family:var(--f-ar)}
.seo-card p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.seo-cta{border:1px solid var(--rule);border-radius:24px;background:var(--panel);padding:clamp(22px,3vw,40px)}
.seo-cta p{margin:0;color:var(--muted);max-width:44em}
.seo-cta .ctas{margin-top:6px}
.seo-fine{font:500 12.5px/1.4 var(--f-mono);color:var(--muted)}
html[lang="ar"] .seo-fine{font-family:var(--f-ar)}
.seo-table-wrap{border:1px solid var(--rule);border-radius:18px;background:var(--panel);overflow:hidden}
/* The comparison is an ARIA table made of divs (role=table / row / columnheader / rowheader / cell): same reading for screen readers and
   search engines as a <table>, and it can reflow into cards on a phone without display tricks on table elements. */
.seo-table{width:100%;font-size:15.5px;line-height:1.5}
.seo-row{display:grid;grid-template-columns:minmax(120px,24%) 1fr 1fr;border-bottom:1px solid var(--rule)}
.seo-row>*{padding:14px 18px;text-align:start}
.seo-table .seo-body .seo-row:last-child{border-bottom:0}
.seo-hd{font:600 12px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sand);background:color-mix(in srgb,var(--ink) 4%,transparent)}
html[lang="ar"] .seo-hd{letter-spacing:0;font-family:var(--f-ar)}
.seo-rh{font-weight:600;color:var(--ink)}
.seo-cell{color:var(--muted)}
.seo-cell:last-child{color:var(--ink)}
.seo-note{margin:0;color:var(--muted);max-width:52em}
.seo-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.seo-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--rule);border-radius:999px;background:var(--panel);color:var(--ink);text-decoration:none;font:500 14px/1.2 var(--f-body)}
html[lang="ar"] .seo-links a{font-family:var(--f-ar)}
.seo-links a:hover{border-color:var(--teal)}
.seo-also{display:grid;gap:14px}
.seo-404{padding-block:clamp(30px,8vw,100px);justify-items:start}
.seo-404 .lead{margin:0;max-width:38em}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:700px){
  /* the comparison table becomes a stack of cards: the column title is printed before each cell */
  .seo-thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .seo-row{display:block;padding:6px 0}
  .seo-row>*{display:block;padding:6px 16px}
  .seo-cell::before{content:attr(data-label);display:block;font:600 11.5px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sand);margin-bottom:2px}
  html[lang="ar"] .seo-cell::before{letter-spacing:0;font-family:var(--f-ar)}
}