/* ============================================================
   GLOBAL YES-STYLE UI REFRESH
   Applied to ALL content pages in ES / EN / NL / RU.
   Presentation only: no copy, URL, schema, tool or language logic changes.
   ============================================================ */

body.yes-ui{
  --yes-soft: rgba(90,108,255,.055);
  --yes-soft-2: rgba(129,140,248,.085);
  --yes-line: rgba(90,108,255,.18);
  --yes-line-strong: rgba(90,108,255,.32);
  --yes-shadow: 0 18px 44px -32px rgba(37,52,116,.42);
  --yes-shadow-hover: 0 22px 50px -31px rgba(90,108,255,.48);
}

/* Consistent section rhythm on every language/page */
body.yes-ui main .section,
body.yes-ui main .content-section,
body.yes-ui main .article-section{
  scroll-margin-top:88px;
}
body.yes-ui main > .section{
  padding-top:clamp(3.4rem,6vw,5rem);
  padding-bottom:clamp(3.4rem,6vw,5rem);
}

/* YES-style centered section headings used by home/landing sections */
body.yes-ui main :is(.section-header) > h2,
body.yes-ui main .author-section > .container > h2{
  position:relative !important;
  width:fit-content;
  max-width:100%;
  margin:.1rem auto 1rem !important;
  padding:0 0 .7rem !important;
  text-align:center;
  font-size:clamp(1.7rem,3.2vw,2.35rem) !important;
  font-weight:850 !important;
  line-height:1.14 !important;
  letter-spacing:-.035em !important;
  color:var(--fg,#111827) !important;
  background:linear-gradient(135deg,var(--fg,#111827) 22%,var(--primary,#5a6cff) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.yes-ui main :is(.section-header) > h2::before{
  content:none !important;
}
body.yes-ui main :is(.section-header) > h2::after,
body.yes-ui main .author-section > .container > h2::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:76px !important;
  height:4px !important;
  transform:translateX(-50%) !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#5a6cff,#8b5cf6) !important;
  box-shadow:0 8px 18px rgba(90,108,255,.20);
}
body.yes-ui main .section-header > p{
  max-width:720px;
  margin-left:auto !important;
  margin-right:auto !important;
  line-height:1.78;
  text-align:center;
  color:var(--muted,#667085);
}

/* Long-form content containers found across the whole site */
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  article.image-translator-article,
  article.audio-translator-article,
  div.article-content,
  div.lang-block,
  section.content-section,
  div.narrow
) h2,
body.yes-ui main :is(.related-blogs-inner,.related-links,.contact-form-copy) > h2{
  position:relative !important;
  margin:2.25rem 0 1rem !important;
  padding:0 0 .58rem 1.08rem !important;
  font-size:clamp(1.48rem,2.8vw,2.08rem) !important;
  font-weight:850 !important;
  line-height:1.18 !important;
  letter-spacing:-.03em !important;
  color:var(--fg,#111827) !important;
  text-align:left !important;
  background:none !important;
  -webkit-text-fill-color:initial !important;
}
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  article.image-translator-article,
  article.audio-translator-article,
  div.article-content,
  div.lang-block,
  section.content-section,
  div.narrow
) h2::before,
body.yes-ui main :is(.related-blogs-inner,.related-links,.contact-form-copy) > h2::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.12em !important;
  width:5px !important;
  height:1.08em !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#5a6cff,#8b5cf6) !important;
  box-shadow:0 8px 20px rgba(90,108,255,.22) !important;
}
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  article.image-translator-article,
  article.audio-translator-article,
  div.article-content,
  div.lang-block,
  section.content-section,
  div.narrow
) h2::after,
body.yes-ui main :is(.related-blogs-inner,.related-links,.contact-form-copy) > h2::after{
  content:"" !important;
  display:block !important;
  position:static !important;
  width:76px !important;
  height:3px !important;
  margin:.48rem 0 0 !important;
  transform:none !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#5a6cff,rgba(90,108,255,0)) !important;
}

/* Make sub-heads consistent instead of plain old bold text */
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  article.image-translator-article,
  article.audio-translator-article,
  div.article-content,
  div.lang-block,
  section.content-section,
  div.narrow
) h3{
  position:relative;
  display:flex !important;
  align-items:flex-start !important;
  gap:.65rem !important;
  margin:1.65rem 0 .72rem !important;
  font-size:clamp(1.08rem,2vw,1.3rem) !important;
  font-weight:780 !important;
  line-height:1.36 !important;
  letter-spacing:-.015em !important;
  color:var(--fg,#111827) !important;
}
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  article.image-translator-article,
  article.audio-translator-article,
  div.article-content,
  div.lang-block,
  section.content-section,
  div.narrow
) h3::before{
  content:"" !important;
  width:.58rem !important;
  height:.58rem !important;
  margin-top:.36em !important;
  flex:0 0 auto !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#5a6cff,#8b5cf6) !important;
  box-shadow:0 0 0 5px rgba(90,108,255,.10) !important;
}

/* Old plain lists -> YES-style point cards on all article/content pages */
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  div.article-content,
  div.lang-block
) > :is(ul,ol):not([class]),
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  div.article-content,
  div.lang-block
) > div:not([class]) > :is(ul,ol):not([class]){
  display:grid !important;
  gap:.7rem !important;
  margin:1rem 0 1.45rem !important;
  padding:0 !important;
  list-style:none !important;
}
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  div.article-content,
  div.lang-block
) > :is(ul,ol):not([class]) > li,
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  div.article-content,
  div.lang-block
) > div:not([class]) > :is(ul,ol):not([class]) > li{
  position:relative !important;
  list-style:none !important;
  margin:0 !important;
  min-height:3rem;
  padding:.86rem 1rem .86rem 3rem !important;
  border:1px solid var(--yes-line) !important;
  border-radius:17px !important;
  background:linear-gradient(135deg,var(--card,#fff),var(--yes-soft)) !important;
  box-shadow:var(--yes-shadow) !important;
  line-height:1.66 !important;
  color:var(--muted,#667085);
}
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  div.article-content,
  div.lang-block
) > ul:not([class]) > li::before,
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  div.article-content,
  div.lang-block
) > div:not([class]) > ul:not([class]) > li::before{
  content:"✓" !important;
  position:absolute !important;
  left:.9rem !important;
  top:.8rem !important;
  width:1.5rem !important;
  height:1.5rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#5a6cff,#8b5cf6) !important;
  color:#fff !important;
  font-size:.74rem !important;
  font-weight:900 !important;
  box-shadow:0 7px 16px rgba(90,108,255,.22) !important;
}
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  div.article-content,
  div.lang-block
) > ol:not([class]){
  counter-reset:yes-global-step;
}
body.yes-ui main :is(
  section.article-section,
  article.article-wrap,
  article.prose,
  article.legal-page,
  article.trust-page,
  div.article-content,
  div.lang-block
) > ol:not([class]) > li::before{
  counter-increment:yes-global-step;
  content:counter(yes-global-step) !important;
  position:absolute !important;
  left:.82rem !important;
  top:.76rem !important;
  width:1.6rem !important;
  height:1.6rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#5a6cff,#8b5cf6) !important;
  color:#fff !important;
  font-size:.76rem !important;
  font-weight:900 !important;
}

/* Purpose-built lists on tool/about/contact pages get the same radius/shadow,
   without destroying their existing grid layout. */
body.yes-ui main :is(
  .pretty-steps,.feature-grid-list,.tip-grid-list,.warning-list,.morse-pattern-list,
  .process-list,.users-list,.check-list,.faq-benefit-list,.faq-steps-list
) > li{
  border-radius:17px !important;
  border-color:var(--yes-line) !important;
  box-shadow:var(--yes-shadow) !important;
}

/* Existing cards across homepages and old pages get YES-like polish */
body.yes-ui main :is(
  .feature-card,.benefit-card,.use-card,.method-card,.why-card,.about-card,
  .mini-card,.fact-item,.morse-mini-card,.related-card,.related-blog-card,
  .info-box,.notice-card,.cta-box,.contact-form-card,.page-hero-card
){
  border-radius:18px !important;
  border-color:var(--yes-line) !important;
  box-shadow:var(--yes-shadow) !important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
body.yes-ui main :is(
  .feature-card,.benefit-card,.use-card,.method-card,.why-card,.about-card,
  .mini-card,.fact-item,.morse-mini-card,.related-card,.related-blog-card
):hover{
  transform:translateY(-2px);
  border-color:var(--yes-line-strong) !important;
  box-shadow:var(--yes-shadow-hover) !important;
}

/* Tables: same clean editorial surface */
body.yes-ui main :is(
  section.article-section,article.article-wrap,article.prose,article.legal-page,
  article.image-translator-article,article.audio-translator-article,div.article-content,
  div.lang-block,div.narrow
) table{
  overflow:hidden;
  border-radius:16px;
  box-shadow:var(--yes-shadow);
}
body.yes-ui main :is(
  section.article-section,article.article-wrap,article.prose,article.legal-page,
  article.image-translator-article,article.audio-translator-article,div.article-content,
  div.lang-block,div.narrow
) thead th{
  background:linear-gradient(135deg,rgba(90,108,255,.13),rgba(139,92,246,.09));
  color:var(--fg);
  font-weight:800;
}

/* Content images/infographics */
body.yes-ui main :is(
  .article-image,.image-card,.infographic,.features-infographic,.hero-img,
  .article-section,.article-content,.article-wrap,.image-translator-article,
  .audio-translator-article,.lang-block
) img:not(.author-avatar):not(.logo-icon){
  border-radius:20px;
}
body.yes-ui main :is(.article-image,.image-card,.infographic,.features-infographic) img{
  border:1px solid var(--yes-line);
  box-shadow:0 22px 55px -32px rgba(30,41,91,.38),0 10px 28px -22px rgba(90,108,255,.38);
}

/* FAQ surfaces */
body.yes-ui main :is(.faq-list,.faq-simple,.faq-accordion) details,
body.yes-ui main .faq-item{
  border-radius:15px !important;
  border-color:var(--yes-line) !important;
  box-shadow:0 10px 26px -25px rgba(90,108,255,.40);
}

/* Hero family: keep each page's own content, unify visual treatment */
body.yes-ui main :is(.blog-hero,.article-hero,.letter-hero,.legal-hero,.page-hero){
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 18%,rgba(90,108,255,.11),transparent 30%),
    radial-gradient(circle at 12% 80%,rgba(129,140,248,.08),transparent 26%),
    var(--gradient-subtle,linear-gradient(135deg,#f6f7ff,#f5fbff));
}
body.yes-ui main :is(.blog-hero,.article-hero,.letter-hero,.legal-hero,.page-hero)::after{
  content:"• • •  — — —  • • •";
  position:absolute;
  right:-1rem;
  bottom:-.2em;
  color:var(--primary,#5a6cff);
  opacity:.045;
  font:900 clamp(2.3rem,7vw,5.8rem)/1 ui-monospace,monospace;
  letter-spacing:.12em;
  white-space:nowrap;
  pointer-events:none;
}
body.yes-ui main :is(.blog-hero,.article-hero,.letter-hero,.legal-hero,.page-hero) h1{
  position:relative;
  z-index:1;
  font-weight:900 !important;
  letter-spacing:-.045em !important;
}

/* Reading measure on long copy */
body.yes-ui main :is(
  section.article-section,article.article-wrap,article.prose,article.legal-page,
  article.trust-page,article.image-translator-article,article.audio-translator-article,
  div.article-content,div.lang-block,section.content-section,div.narrow
) > p{
  line-height:1.82;
}

/* Do NOT visually alter the functional translator/result controls */
body.yes-ui main :is(
  .translator,.translator-card,.translator-head,.audio-input-card,.audio-result-card,
  .audio-settings-card,.audio-analysis-card,.image-result-card,.image-preview-card
) h2::before,
body.yes-ui main :is(
  .translator,.translator-card,.translator-head,.audio-input-card,.audio-result-card,
  .audio-settings-card,.audio-analysis-card,.image-result-card,.image-preview-card
) h2::after{
  content:none !important;
}

/* Dark mode */
[data-theme="dark"] body.yes-ui{
  --yes-soft:rgba(90,108,255,.10);
  --yes-line:rgba(139,150,255,.24);
  --yes-line-strong:rgba(139,150,255,.42);
}

/* Responsive */
@media(max-width:700px){
  body.yes-ui main > .section{
    padding-top:2.9rem;
    padding-bottom:2.9rem;
  }
  body.yes-ui main :is(.section-header) > h2{
    font-size:clamp(1.5rem,7vw,1.92rem) !important;
  }
  body.yes-ui main :is(
    section.article-section,article.article-wrap,article.prose,article.legal-page,
    article.trust-page,article.image-translator-article,article.audio-translator-article,
    div.article-content,div.lang-block,section.content-section,div.narrow
  ) h2{
    padding-left:.9rem !important;
    font-size:clamp(1.34rem,6.2vw,1.76rem) !important;
  }
  body.yes-ui main :is(
    section.article-section,article.article-wrap,article.prose,article.legal-page,
    article.trust-page,div.article-content,div.lang-block
  ) > :is(ul,ol):not([class]) > li{
    padding:.78rem .84rem .78rem 2.72rem !important;
    border-radius:15px !important;
  }
}

/* German static-page compatibility — 2026-08-08 */
body.yes-ui .static-hero{position:relative;overflow:hidden;padding:clamp(3.6rem,7vw,6rem) 1.25rem;background:radial-gradient(circle at 82% 15%,rgba(90,108,255,.12),transparent 30%),linear-gradient(135deg,#f6f7ff,#f4fbff);text-align:center}
body.yes-ui .static-hero .container{max-width:900px;margin:auto}
body.yes-ui .static-hero .eyebrow{display:inline-flex;margin-bottom:1rem;padding:.42rem .78rem;border:1px solid rgba(90,108,255,.28);border-radius:999px;color:#5a6cff;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}
body.yes-ui .static-hero h1{margin:.15rem auto .8rem;font-size:clamp(2.25rem,6vw,4.25rem);line-height:1.04;letter-spacing:-.055em;font-weight:900}
body.yes-ui .static-hero p{max-width:720px;margin:.8rem auto 0;color:var(--muted,#667085);line-height:1.75}
body.yes-ui .static-prose{max-width:850px;margin:auto}
body.yes-ui .static-prose h2{position:relative;padding-left:1rem;margin:2rem 0 .85rem;font-size:clamp(1.45rem,3vw,2rem);line-height:1.2}
body.yes-ui .static-prose h2:before{content:"";position:absolute;left:0;top:.1em;width:5px;height:1.1em;border-radius:99px;background:linear-gradient(#5a6cff,#8b5cf6)}
body.yes-ui .static-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
body.yes-ui .static-card{display:block;padding:1.15rem;border:1px solid rgba(90,108,255,.18);border-radius:18px;background:var(--card,#fff);box-shadow:0 18px 44px -32px rgba(37,52,116,.42);text-decoration:none;color:inherit}
body.yes-ui .static-card h2,body.yes-ui .static-card h3{margin:.1rem 0 .55rem!important;padding:0!important;font-size:1.08rem!important}
body.yes-ui .static-card h2:before,body.yes-ui .static-card h2:after,body.yes-ui .static-card h3:before{display:none!important}
body.yes-ui .static-card p{color:var(--muted,#667085);line-height:1.62}