/* Refactoring UI principles within the Numerology Library design system.
   These rules apply only to screens. Printed reports keep their own layout. */
@media screen {
  .site-public { --ui-shell: 1180px; }
  .site-public > nav { background: rgb(var(--c-bg) / .97); }
  .site-public > nav > div:first-child { max-width: var(--ui-shell); }
  .site-public > nav a { line-height: 1.4; }
  .site-public > nav a[aria-current="page"] {
    color: rgb(var(--c-ink)); font-weight: 600;
    text-decoration: underline; text-decoration-color: rgb(var(--c-gold));
    text-underline-offset: .5em; text-decoration-thickness: 2px;
  }
  .site-public > footer { background: rgb(var(--c-bg)); }
  .site-public > footer h3 { font-size: 1.2rem; margin-bottom: .75rem; }
  .site-public > footer p { max-width: 40ch; }
  .ui-breadcrumbs { margin-bottom: 1.75rem; }
  .ui-breadcrumbs ol { gap: .4rem .75rem; font-size: .8125rem; }
  .ui-breadcrumbs li { min-width: 0; }
  .ui-breadcrumbs svg { flex-shrink: 0; }
  .ui-breadcrumbs [aria-current="page"] { color: rgb(var(--c-caption)); }

  .ui-page-shell { padding-top: 2rem; padding-bottom: 4rem; }
  .ui-page-header { text-align: left; max-width: 68ch; margin-bottom: 2.5rem; }
  .ui-page-header h1 {
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
    line-height: 1.08; letter-spacing: -.015em; text-wrap: balance;
  }
  .ui-page-header > p { margin-left: 0; font-size: 1.125rem; line-height: 1.6; max-width: 58ch; }
  .ui-article { max-width: 1180px; }
  .ui-article > .ui-page-header { margin-left: auto; margin-right: auto; }
  .ui-article .prose { max-width: 68ch; }
  .ui-article .prose h2 { margin-top: 2.5rem; line-height: 1.2; }
  .ui-article .prose h3 { margin-top: 1.75rem; line-height: 1.25; }
  .ui-article .prose a { text-decoration: underline; text-underline-offset: .2em; }
  .ui-article .prose :is(table, pre) { max-width: 100%; overflow-x: auto; }
  .ui-article .prose table { display: block; width: 100%; }
  .ui-article .prose table :is(th, td) { min-width: 7rem; }
  .ui-article .prose table caption { text-align: left; }
  .ui-article .prose > p:first-of-type { font-size: 1.15rem; line-height: 1.65; }
  .ui-article .prose > p:first-of-type::first-letter { font-size: 4rem; }
  .ui-article .toc-nav a { color: rgb(var(--c-caption)); }
  .ui-article .toc-nav :is(a:hover, a.active) { color: rgb(var(--c-link)); }
  .ui-article aside { min-width: 0; }
  .ui-page-shell .card { padding: 1.5rem; }
  .ui-page-shell .card h2 { font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }
  .ui-page-shell .card p { line-height: 1.6; }
  .ui-page-shell .card > time { color: rgb(var(--c-caption)); letter-spacing: .08em; }
  .ui-page-shell .card.group.mb-12 { padding: 0; border-top: 2px solid rgb(var(--c-gold)); }
  .ui-page-shell .card.group.mb-12 h2 { font-size: clamp(1.75rem, 2.3vw, 2.5rem); }
  .ui-article-meta > .text-gold { color: rgb(var(--c-caption)); }
  .ui-pagination { flex-wrap: wrap; row-gap: .75rem; }
  .ui-pagination :is(a, span) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .ui-pagination a:hover { background: rgb(var(--c-surface-2)); color: rgb(var(--c-link)); }

  .home-entry { max-width: 1180px; }
  .home-entry h1 { text-wrap: balance; }
  .home-entry .entry-deck { max-width: 40ch; }
  .home-entry [data-capture-cta] > .absolute { display: none; }
  .home-entry form { border-top: 2px solid rgb(var(--c-gold)); }
  .ui-reference-header { padding-top: 3rem; padding-bottom: 3rem; }
  .ui-reference-header h1 { text-wrap: balance; }
  .ui-reference-content { max-width: calc(68ch + 4rem); }
  .site-public form :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
  .ui-app form :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    border-color: rgb(var(--ui-field-border));
  }
  .site-public form :is(input, textarea, select):focus-visible,
  .ui-app form :is(input, textarea, select):focus-visible { border-color: rgb(var(--c-focus)); }
  .ui-auth { padding-top: 3rem; padding-bottom: 4rem; }
  .ui-auth form { border-top: 2px solid rgb(var(--c-gold)); }
  .ui-auth :is(h1, h2) { text-wrap: balance; }
  .ui-auth > .text-center { margin-bottom: 1.5rem; }
  .ui-sales-hero > div { padding-top: 3rem; padding-bottom: 3rem; }
  .ui-sales-hero h1 { text-wrap: balance; }
  .ui-sales-hero > div > p:not(.eyebrow) { max-width: 55ch; }
  .ui-sales-hero .btn-tertiary { padding: .5rem; }
  .ui-plan-secondary { border-color: rgb(var(--c-rule)); }
  .ui-plan-featured { border-top: 3px solid rgb(var(--c-gold)); background: rgb(var(--c-surface)); }
  .g27-offers { gap: 1rem; background: transparent; border: 0; }
  .g27-offer { border: 1px solid rgb(var(--c-rule)); }
  .g27-offer--featured { border-top: 3px solid rgb(var(--c-gold)); background: rgb(var(--c-surface)); }
  .g27-section-head > p { max-width: 55ch; }
  .g27-preview-grid { gap: 2rem; }
  .family-offer-page__purchase { border-top: 3px solid rgb(var(--c-gold)); }
  .family-offer-page__boundary { border-left: 2px solid rgb(var(--c-rule)); padding-left: 1rem; }

  .ui-app #app-sidebar { background: rgb(var(--c-bg)); }
  .ui-app .nav-section { padding-top: 1.5rem; letter-spacing: .12em; }
  .ui-app .nav-link { margin: .15rem .5rem; padding: .65rem .75rem; font-size: .9375rem; }
  .ui-app .nav-link svg { color: rgb(var(--c-caption)); }
  .ui-app .nav-link.active { background: rgb(var(--c-surface)); border-left-width: 3px; }
  .ui-app .nav-link.active svg { color: rgb(var(--c-link)); }
  .ui-app .ui-view-heading :is(h1, h2) { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); line-height: 1.12; text-wrap: balance; }
  .ui-app .ui-view-heading > p:last-child { max-width: 60ch; font-style: normal; }
  .ui-app .app-tile { border-top: 2px solid rgb(var(--c-rule)); }
  .ui-app .pw-modal-card { box-shadow: var(--ui-shadow-overlay); border-top: 3px solid rgb(var(--c-gold)); }
  .ui-app .pw-plan { padding-top: 1.5rem; }
  .ui-app .pw-plan-best { border-top-width: 3px; }
  .ui-app .day-chip { min-height: 5.5rem; }
  .ui-app .pw-email-row { border: 0; border-left: 2px solid rgb(var(--c-gold)); }
  .ui-app .hoje-details { border-left: 0; border-right: 0; background: rgb(var(--c-bg)); }
  .ui-app .hoje-details[open] { background: rgb(var(--c-surface)); }
  .ui-app .hoje-details summary:focus-visible { outline-offset: -3px; }
  .ui-app #app-main:not(.view-hoje) { max-width: 1100px; }

  #ob .ob-body { max-width: 45ch; line-height: 1.6; }
  #ob .ob-choices { gap: .75rem; }
  #ob .ob-choice { text-align: left; padding-left: 1.25rem; border-left: 2px solid rgb(var(--c-rule)); }
  #ob .ob-choice:hover, #ob .ob-choice:focus-visible { border-left-color: rgb(var(--c-gold)); }
  #ob .ob-input { background: rgb(var(--c-bg)); border-color: rgb(var(--ui-field-border)); }
  #ob .ob-plan { text-align: left; }
  #ob .ob-title { text-wrap: balance; }
  #ob .ob-fine { max-width: 48ch; }
  #ob #ob-close { min-height: 44px; }

  @media (min-width: 1024px) {
    .ui-page-shell { padding-top: 3rem; }
    .ui-article > .lg\:flex { gap: 3rem; }
    .ui-article > .lg\:flex > aside { width: 12rem; }
    .home-entry { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .home-entry h1 { font-size: clamp(3.5rem, 5.3vw, 4.75rem) !important; }
    .ui-app #app-sidebar { width: 16rem; }
    .ui-app #app-main { padding-left: 2rem; padding-right: 2rem; }
  }
  @media (max-width: 639px) {
    .ui-breadcrumbs { margin-bottom: 1.25rem; }
    .ui-breadcrumbs [aria-current="page"] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ui-page-header { margin-bottom: 1.75rem; }
    .ui-page-header h1 { font-size: 2.125rem !important; }
    .ui-page-header > p { font-size: 1.0625rem; margin-bottom: 1.25rem; }
    .ui-article .ui-article-meta { padding: .75rem 0; justify-content: flex-start; border-bottom: 0; }
    .ui-article .ui-page-header .eyebrow { margin-bottom: .75rem; }
    .ui-reference-header { padding-top: 2rem; padding-bottom: 2rem; }
    .ui-reference-header h1 { font-size: 2.125rem !important; }
    .ui-auth { padding-top: 2rem; }
    .ui-sales-hero > div { padding-top: 2rem; padding-bottom: 2rem; }
    .ui-app .nav-link { min-height: 44px; }
    .ui-app .day-chip { min-height: 5rem; }
    #ofertas .g27-offers { gap: .5rem; }
  }
}