/* Public guides and the landing share the product's fonts, colors and content. */
.seo-public { min-height:100vh; background:var(--bg); color:var(--text); }
.seo-header { max-width:1280px; margin:auto; padding:24px 32px; display:flex; align-items:center; flex-wrap:wrap; gap:24px; border-bottom:1px solid var(--border); }
.seo-brand { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:700; text-decoration:none; }
.seo-brand small { font-size:13px; color:var(--text-2); }
.seo-header nav { display:flex; flex-wrap:wrap; gap:20px; margin-inline-start:auto; }
.seo-header nav a { font-size:12px; text-decoration:none; color:var(--text-2); }
.seo-header nav a:hover,.seo-footer a:hover { color:var(--brand); text-decoration:underline; }
.seo-main { max-width:960px; padding:32px; margin:auto; }
.seo-main-wide { max-width:1280px; }
.seo-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--text-2); }
.seo-breadcrumb a { color:var(--brand); }
.seo-intro { margin:36px 0; padding:32px; border:1px solid var(--border); border-radius:24px; background:linear-gradient(135deg,var(--pastel-mint),var(--bg-elev)); }
.seo-eyebrow { color:var(--brand-ink); font-size:12px; font-weight:700; }
.seo-intro h1 { font-size:clamp(28px,4vw,44px); line-height:1.7; margin:14px 0; }
.seo-intro p { font-size:16px; line-height:2.3; color:var(--text-2); }
.seo-intro .seo-updated { font-size:12px; margin:18px 0; color:var(--text-3); }
.seo-section { margin:36px 0; scroll-margin-top:24px; }
.seo-section h2 { margin-bottom:16px; font-size:clamp(19px,2.8vw,25px); line-height:1.9; }
.seo-section p,.seo-section li { font-size:14px; line-height:2.4; color:var(--text-2); }
.seo-section p + p { margin-top:12px; }
.seo-section ul,.seo-section ol { padding-inline-start:24px; margin-top:16px; }
.seo-section li { padding-inline-start:4px; margin:8px 0; }
.seo-section a { color:var(--brand-ink); text-underline-offset:4px; }
.seo-table-hint { font-size:12px!important; margin-bottom:12px; }
.seo-table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; border:1px solid var(--border); border-radius:18px; background:var(--bg-elev); }
.seo-table-scroll:focus-visible { outline:3px solid var(--brand); outline-offset:4px; }
.seo-comparison { width:100%; min-width:1100px; border-collapse:separate; border-spacing:0; text-align:start; table-layout:fixed; }
.seo-comparison caption { caption-side:top; text-align:start; padding:20px; font-size:15px; font-weight:700; line-height:2; background:var(--pastel-mint); }
.seo-comparison th,.seo-comparison td { padding:18px; vertical-align:top; border-bottom:1px solid var(--border); border-inline-end:1px solid var(--border); font-size:12px; line-height:2.25; }
.seo-comparison thead th { font-size:13px; background:var(--pastel-mint); }
.seo-comparison tr > :last-child { border-inline-end:0; }
.seo-comparison tbody tr:last-child > * { border-bottom:0; }
.seo-comparison tbody th { position:sticky; inset-inline-start:0; width:150px; background:var(--bg-elev); font-weight:700; box-shadow:-4px 0 8px rgb(0 0 0 / 3%); }
.seo-comparison td { color:var(--text-2); }
.seo-table-sources { padding:18px 22px; margin-top:16px; border-inline-start:3px solid var(--brand); background:var(--bg-elev); border-radius:12px; }
.seo-table-sources h3 { font-size:13px; }
.seo-table-sources ul { margin-top:10px; }
.seo-table-sources li,.seo-table-sources a { font-size:12px; line-height:2; }
.seo-toc { display:grid; gap:10px; padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--bg-elev); }
.seo-toc a { font-size:13px; color:var(--text-2); text-decoration:none; }
.seo-toc a:hover { color:var(--brand); text-decoration:underline; }
.seo-faq details { border:1px solid var(--border); border-radius:16px; padding:18px 22px; background:var(--bg-elev); margin:12px 0; }
.seo-faq summary { cursor:pointer; font-weight:700; font-size:14px; line-height:2; min-height:28px; }
.seo-faq details p { margin-top:16px; }
.seo-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.seo-guide-card { display:flex; flex-direction:column; gap:12px; padding:24px; border:1px solid var(--border); border-radius:18px; text-decoration:none; background:var(--bg-elev); transition:border-color .2s; }
.seo-guide-card:hover { border-color:var(--brand); }
.seo-guide-card strong { line-height:1.9; font-size:15px; }
.seo-guide-card span { font-size:12px; line-height:2; color:var(--text-2); }
.seo-start { border:1px solid var(--border); background:var(--pastel-mint); border-radius:24px; padding:32px; margin:44px 0; }
.seo-start h2 { font-size:24px; line-height:1.8; }
.seo-start p { line-height:2; font-size:14px; margin:12px 0 20px; }
.seo-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:32px; max-width:1280px; margin:auto; border-top:1px solid var(--border); font-size:12px; }
.seo-footer nav { display:flex; flex-wrap:wrap; gap:24px; }
.seo-footer a { color:var(--text-2); text-decoration:none; }
.seo-noscript { max-width:900px; margin:24px auto; padding:20px; line-height:2; }
.seo-skip { position:absolute; top:-100px; right:20px; z-index:20; padding:12px 18px; border-radius:12px; background:var(--bg-elev); color:var(--brand); }
.seo-skip:focus { top:12px; }
.landing .seo-knowledge { max-width:1180px; margin:auto; padding:24px 40px 64px; }
.landing-vibe .landing-hero #landing-hero-title { font-size:clamp(36px,4.4vw,62px); }
.landing .seo-knowledge > .seo-section { margin-block:48px; }
.landing .seo-knowledge .seo-section p { max-width:900px; }
.landing .seo-guide-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.landing-footer nav { flex-wrap:wrap; }
@media(max-width:700px) {
  .seo-header { padding:18px; gap:18px; }
  .seo-header nav { order:3; margin:0; width:100%; gap:12px 20px; }
  .seo-header > .btn { margin-inline-start:auto; }
  .seo-main { padding:20px; }
  .seo-intro { padding:22px; margin-block:24px; }
  .seo-intro p { font-size:14px; }
  .seo-guide-grid,.landing .seo-guide-grid { grid-template-columns:1fr; }
  .seo-start { padding:24px; }
  .seo-footer { padding:24px 20px; }
  .landing .seo-knowledge { padding:12px 22px 40px; }
}

/* The initial HTML and interactive hero share exactly the same title treatment. */
.seo-intro-home { container-type:inline-size; }
/* Size the complete Persian phrase to its column, including the narrow desktop layout. */
.landing-title-phrase { position:relative; display:inline-block; max-width:100%; padding-bottom:.28em; white-space:nowrap; font-size:clamp(1rem,2.3vw,2.5rem); font-size:clamp(1rem,6cqi,2.5rem); line-height:1.55; letter-spacing:0; color:var(--text); }
.landing .landing-title-phrase .landing-title-highlight,.landing-title-phrase .landing-title-highlight { position:relative; display:inline-block; isolation:isolate; font:inherit; color:var(--text); }
.landing-title-phrase .landing-title-highlight::before { content:''; position:absolute; z-index:-1; inset:52% -.07em .08em; background:var(--vibe-lilac,#ceb8f2); transform:rotate(-3deg); border-radius:6px 60% 10px 50%; opacity:.9; }
.landing-title-underlines { position:absolute; inset-inline:0; bottom:0; width:100%; height:.55em; overflow:visible; fill:none; pointer-events:none; }
.landing-title-underlines path { stroke:var(--brand); stroke-width:2.5; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0; animation:landing-title-draw 1.25s cubic-bezier(.2,.7,.25,1) .15s both; }
.landing-title-underlines path+path { stroke:var(--lavender-ink,#6c51a3); animation-delay:.55s; }
@keyframes landing-title-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
.landing-vibe[data-motion="paused"] .landing-title-underlines path { animation:none!important; stroke-dashoffset:0; }
@supports not (font-size:1cqi) { @media(max-width:850px) { .landing-title-phrase { font-size:clamp(1rem,5.2vw,2.5rem); } } }

[data-theme="dark"] .landing-title-highlight::before { background:var(--pastel-lavender,#39314f); }

@media(prefers-reduced-motion:reduce) { .landing-title-underlines path { animation:none; stroke-dashoffset:0; } }
@media(forced-colors:active) { .landing-title-highlight::before { display:none; }.landing-title-underlines path { stroke:CanvasText; } }