/* TtsPlus public SEO/content layer. Kept separate from studio.css so the
   production workspace remains stable while editorial pages can evolve. */
.seo-body { overflow-x: clip; }
.seo-main { position: relative; z-index: 1; flex: 1; width: 100%; }
.seo-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.seo-top { padding-inline: max(var(--gutter), calc((100vw - 1280px)/2)); }
.seo-nav { gap: 16px; }

.seo-hero { padding: clamp(64px, 8vw, 108px) 0 58px; text-align: center; }
.seo-hero.compact { padding-bottom: 34px; }
.seo-hero h1,
.landing-hero h1 { max-width: 970px; margin: 10px auto 18px; font-size: clamp(38px, 6.2vw, 72px); line-height: 1.02; letter-spacing: -.045em; }
.seo-hero p { max-width: 820px; margin: 0 auto; color: var(--text-2); font-size: clamp(17px, 2vw, 20px); line-height: 1.8; }
.seo-hero-actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.seo-section { padding: 54px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 4px; }
.section-heading > p { max-width: 620px; color: var(--muted); line-height: 1.75; }

.seo-card { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); border-radius: var(--r-lg); backdrop-filter: blur(18px); }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.category-card { padding: 24px; color: inherit; min-height: 230px; transition: transform .24s var(--ease), border-color .2s, box-shadow .24s; }
.category-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.category-card > span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 10px; border-radius: 13px; background: linear-gradient(130deg, rgba(255,77,109,.16), rgba(160,107,255,.15)); color: var(--brand-1); font-family: var(--font-display); font-weight: 800; }
.category-card h3 { margin: 18px 0 8px; font-size: var(--fs-xl); }
.category-card p { color: var(--muted); line-height: 1.72; margin-bottom: 16px; }
.category-card b { color: var(--brand-1); font-size: var(--fs-sm); }

.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.compact-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.article-card { overflow: hidden; min-width: 0; transition: transform .24s var(--ease), border-color .2s, box-shadow .24s; }
.article-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.article-image { display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, rgba(255,77,109,.13), rgba(45,212,191,.11)); }
.article-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.article-card:hover .article-image img { transform: scale(1.035); }
.article-card-body { padding: 20px 20px 22px; }
.article-kicker { color: var(--brand-1); font-size: 13px; text-transform: uppercase; letter-spacing: .11em; font-weight: 800; }
.article-card h3 { margin: 8px 0 9px; font-size: 20px; line-height: 1.35; }
.article-card h3 a { color: var(--text); }
.article-card p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.68; }
.article-meta { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; color: var(--faint); font-size: 13px; }

.seo-breadcrumb { padding-top: 30px; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seo-breadcrumb a { color: var(--muted); }
.seo-breadcrumb a:hover { color: var(--brand-1); }
.seo-breadcrumb b { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }

.article-page { padding-bottom: 30px; }
.article-header { max-width: 940px; margin: 0 auto; padding: 50px 0 30px; text-align: center; }
.article-header h1 { margin: 10px 0 17px; font-size: clamp(38px, 5.6vw, 66px); line-height: 1.055; letter-spacing: -.045em; }
.article-deck { max-width: 820px; margin: 0 auto; color: var(--text-2); font-size: clamp(17px, 2vw, 20px); line-height: 1.78; }
.article-byline { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 20px; color: var(--faint); font-size: 14px; }
.article-byline span + span::before { content: '•'; margin-right: 18px; color: var(--line-strong); }
.article-hero-image { width: min(1040px,100%); margin: 18px auto 48px; }
.article-hero-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.article-hero-image figcaption { margin-top: 8px; text-align: center; color: var(--faint); font-size: 13px; }
.article-layout { display: grid; grid-template-columns: 230px minmax(0,760px); justify-content: center; gap: 44px; align-items: start; }
.article-toc { position: sticky; top: 94px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 17px; background: var(--surface); display: grid; gap: 3px; }
.article-toc strong { margin: 0 7px 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.article-toc a { padding: 7px; border-radius: 8px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.article-toc a:hover { color: var(--text); background: var(--surface-3); }
.article-content { min-width: 0; }
.article-intro { padding: 22px 24px; margin-bottom: 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(130deg, rgba(255,77,109,.07), rgba(160,107,255,.06)); }
.article-content p { color: var(--text-2); font-size: 17px; line-height: 1.9; margin: 0 0 17px; }
.article-content section { scroll-margin-top: 100px; margin: 0 0 40px; }
.article-content section h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 14px; line-height: 1.2; }
.article-content section h3 { font-size: 21px; margin: 26px 0 10px; }
.article-content ul { margin: 12px 0 18px; padding-left: 22px; }
.article-content li { color: var(--text-2); font-size: 16px; line-height: 1.8; margin: 8px 0; }
.takeaway-box { padding: 24px; border: 1px solid rgba(45,212,191,.25); border-radius: var(--r-lg); background: rgba(45,212,191,.06); }
.article-faq details { border-top: 1px solid var(--line); padding: 15px 0; }
.article-faq details:last-child { border-bottom: 1px solid var(--line); }
.article-faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.article-faq details p { margin-top: 12px; }
.article-cta { margin-top: 50px !important; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-xl); background: linear-gradient(125deg, rgba(255,77,109,.12), rgba(160,107,255,.11), rgba(45,212,191,.08)); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.article-cta h2 { margin-top: 5px !important; }
.article-cta p { margin-bottom: 0; }
.related-guides { border-top: 1px solid var(--line); }

.landing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.landing-grid.small { grid-template-columns: repeat(4,minmax(0,1fr)); }
.landing-card { overflow: hidden; color: inherit; transition: transform .24s var(--ease), border-color .2s; }
.landing-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.landing-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--surface-3); }
.landing-card > div { padding: 20px; }
.landing-card h2,.landing-card h3 { margin: 6px 0 8px; }
.landing-card p { color: var(--muted); line-height: 1.7; }
.landing-card b { color: var(--brand-1); }
.landing-card.small > div { padding: 18px; }
.landing-card.small p { font-size: 14px; }
.landing-hero { padding: 64px 0 46px; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(340px,.75fr); align-items: center; gap: 46px; }
.landing-hero h1 { margin-inline: 0; }
.landing-hero p { color: var(--text-2); max-width: 720px; font-size: 19px; line-height: 1.8; }
.landing-hero .seo-hero-actions { justify-content: flex-start; }
.landing-hero > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.landing-content { max-width: 840px; padding: 20px 0 40px; }
.landing-content > section { padding: 26px 0; border-bottom: 1px solid var(--line); }
.landing-content h2 { font-size: clamp(26px,3vw,36px); margin-bottom: 12px; }
.landing-content p { color: var(--text-2); font-size: 17px; line-height: 1.9; margin-bottom: 14px; }
.landing-content ul { padding-left: 22px; }
.landing-content li { color: var(--text-2); line-height: 1.8; margin: 8px 0; }

/* Crawlable product explanation appended below the public studio. */
.seo-home { width: min(1180px, calc(100% - 36px)); margin: 36px auto 20px; padding-top: 18px; }
.seo-home .seo-home-intro { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.seo-home h2 { font-size: clamp(30px,4vw,46px); margin: 7px 0 14px; }
.seo-home .seo-home-intro p { color: var(--text-2); font-size: 18px; line-height: 1.8; }
.seo-home-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.seo-home-card { padding: 22px; }
.seo-home-card h3 { font-size: 21px; margin-bottom: 8px; }
.seo-home-card p { color: var(--muted); line-height: 1.75; }
.seo-home-card a { display: inline-block; margin-top: 10px; color: var(--brand-1); font-weight: 700; }
.seo-home-copy { max-width: 900px; margin: 42px auto 0; }
.seo-home-copy h2 { font-size: 30px; margin-top: 34px; }
.seo-home-copy p { color: var(--text-2); line-height: 1.86; margin-bottom: 15px; }
.seo-home-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.seo-home-links a { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-size: 14px; }
.seo-home-links a:hover { color: var(--text); border-color: var(--line-strong); }

@media (max-width: 1050px) {
  .seo-nav a:not(.btn) { display:none; }
  .category-grid,.article-grid,.landing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .landing-grid.small { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns: minmax(0,760px); }
  .article-toc { display:none; }
  .landing-hero { grid-template-columns: 1fr; }
  .landing-hero > img { max-width: 720px; }
  .seo-home-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .seo-wrap { width: min(100% - 28px,1180px); }
  .seo-top { padding: 12px 14px; }
  .seo-top .theme-switch { display:none; }
  .seo-nav { margin-left:auto; }
  .seo-hero { padding-top: 48px; }
  .seo-hero h1,.landing-hero h1,.article-header h1 { font-size: clamp(34px,11vw,50px); }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .category-grid,.article-grid,.landing-grid,.landing-grid.small,.seo-home-grid { grid-template-columns: 1fr; }
  .article-header { padding-top: 36px; }
  .article-hero-image { margin-bottom: 34px; }
  .article-content p,.landing-content p { font-size:16px; }
  .article-cta { align-items:flex-start; flex-direction:column; }
  .article-byline span + span::before { display:none; }
  .article-meta { flex-direction:column; }
  .seo-home { width: calc(100% - 28px); }
}
.article-resource-links { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin: 0 0 34px; padding: 16px 18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.article-resource-links strong { margin-right:4px; font-size:14px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }
.article-resource-links a { padding:8px 10px; border-radius:9px; background:var(--surface-3); color:var(--brand-1); font-size:14px; font-weight:700; }
.article-resource-links a:hover { color:var(--text); }

/* Public pricing page ----------------------------------------------------- */
.pricing-hero{padding:72px 0 34px;text-align:center;max-width:920px}.pricing-hero h1{font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.02;margin:.35rem 0 1rem}.pricing-hero>p{max-width:780px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.8}.pricing-hero .seo-hero-actions{justify-content:center}.pricing-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:24px;padding-bottom:34px}.pricing-card{border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,var(--panel),var(--panel-2));padding:30px;box-shadow:var(--shadow)}.pricing-card.featured{position:relative;overflow:hidden}.pricing-card.featured:before{content:"";position:absolute;inset:-1px auto auto -1px;width:65%;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent)}.pricing-card-top{display:flex;justify-content:space-between;gap:16px;align-items:center}.pricing-badge{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(80,210,150,.12);color:#44ce96;font-size:.78rem;font-weight:800}.pricing-card h2{font-size:clamp(1.8rem,3vw,2.8rem);margin:.75rem 0}.pricing-price{display:flex;align-items:flex-end;gap:13px;margin:0 0 20px}.pricing-price strong{font-size:4rem;line-height:1}.pricing-price span{color:var(--muted);padding-bottom:8px}.pricing-card>p{color:var(--muted);line-height:1.75}.pricing-features{display:grid;gap:12px;padding:0;margin:25px 0;list-style:none}.pricing-features li{position:relative;padding-left:28px;line-height:1.55}.pricing-features li:before{content:"✓";position:absolute;left:0;color:#44ce96;font-weight:900}.pricing-compare-row{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--line)}.pricing-compare-row span{color:var(--muted);line-height:1.65}.pricing-note{margin-top:22px;padding:18px;border-radius:18px;background:rgba(124,92,255,.09);border:1px solid rgba(124,92,255,.2)}.pricing-note p{margin:.55rem 0 0;color:var(--muted);line-height:1.65}.pricing-details{padding-top:38px}.pricing-faq{padding-bottom:70px}.pricing-faq details{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:17px 20px;margin:11px 0}.pricing-faq summary{font-weight:800;cursor:pointer}.pricing-faq p{color:var(--muted);line-height:1.7;margin:.8rem 0 0}@media(max-width:820px){.pricing-grid{grid-template-columns:1fr}.pricing-hero{padding-top:48px}.pricing-card{padding:23px}.pricing-price strong{font-size:3.25rem}}

/* Missing editorial artwork is hidden cleanly until the matching WebP file is
   uploaded. Cards keep a deliberate branded placeholder instead of a broken
   image icon, while XML sitemaps already use the final expected filenames. */
.article-image-placeholder,
.landing-card-placeholder {
  display:grid;
  place-items:center;
  min-height:100%;
  color:rgba(255,255,255,.94);
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.08em;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,77,109,.55),transparent 42%),
    radial-gradient(circle at 78% 76%,rgba(45,212,191,.42),transparent 45%),
    linear-gradient(135deg,#211535,#101d32);
}
.article-image-placeholder > span { font-size:clamp(1.7rem,4vw,3rem); }
.landing-card-placeholder { width:100%; aspect-ratio:16/9; font-size:2rem; }
.landing-hero-no-image { grid-template-columns:minmax(0,900px); justify-content:center; text-align:center; }
.landing-hero-no-image > div { margin-inline:auto; }
.landing-hero-no-image .seo-hero-actions { justify-content:center; }

/* Branded, useful 404 page. */
.error-page { min-height:calc(100vh - 180px); display:grid; place-items:center; padding:70px 20px; }
.error-card { width:min(780px,100%); padding:clamp(28px,6vw,64px); text-align:center; border:1px solid var(--line); border-radius:var(--r-xl); background:linear-gradient(145deg,var(--surface),var(--surface-2)); box-shadow:var(--shadow); }
.error-code { display:inline-grid; place-items:center; min-width:108px; min-height:58px; padding:0 20px; border-radius:999px; color:var(--brand-1); background:rgba(255,77,109,.10); border:1px solid rgba(255,77,109,.22); font:800 1rem/1 var(--font-display); letter-spacing:.12em; }
.error-card h1 { margin:20px 0 12px; font-size:clamp(2.2rem,7vw,4.6rem); line-height:1.03; }
.error-card > p { max-width:620px; margin:0 auto; color:var(--muted); font-size:1.05rem; line-height:1.8; }
.error-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:28px; }
.error-links { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 18px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.error-links a { color:var(--brand-1); font-weight:700; }


/* Reduce below-the-fold rendering work without hiding content from the DOM. */
.article-card, .landing-card { content-visibility:auto; contain-intrinsic-size:420px; }
.article-hero-image img, .landing-hero > img, .article-card img, .landing-card img { color:transparent; }