/* =========================================================
   Main — buttons, forms, homepage, footer, assessment,
          WooCommerce overrides
   ========================================================= */

/* -------------------------------------------------------------------------
   Site main content area
   ------------------------------------------------------------------------- */
.site-main {
    min-height: 60vh;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.button-primary {
    display:         inline-block;
    background:      var(--color-primary);
    color:           white;
    padding:         12px 20px;
    border-radius:   var(--radius);
    font-size:       0.9rem;
    font-weight:     600;
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    line-height:     1;
}

.button-primary:hover {
    opacity:         0.85;
    text-decoration: none;
    color:           white;
}

.button-secondary {
    display:         inline-block;
    background:      transparent;
    color:           var(--color-primary);
    padding:         11px 20px;
    border-radius:   var(--radius);
    font-size:       0.9rem;
    font-weight:     600;
    border:          1px solid var(--color-primary);
    cursor:          pointer;
    text-decoration: none;
    line-height:     1;
}

.button-secondary:hover {
    background:      var(--color-primary);
    color:           white;
    text-decoration: none;
}

.button-lg {
    padding:   16px 28px;
    font-size: 1rem;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
    padding: var(--size-3xl) 0;
    border-bottom: 1px solid var(--color-border);
}

.hero__inner {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap:         var(--size-2xl);
}

.hero__eyebrow {
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-muted);
    margin-bottom:  var(--size-md);
}

.hero__title {
    font-size:      3rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.04em;
    line-height:    1.1;
    margin-bottom:  var(--size-lg);
}

.hero__desc {
    font-size:     1.1rem;
    color:         var(--color-muted);
    max-width:     480px;
    line-height:   1.7;
    margin-bottom: var(--size-xl);
}

.hero__actions {
    display:     flex;
    gap:         var(--size-md);
    align-items: center;
    flex-wrap:   wrap;
}

@media (max-width: 768px) {
    .hero__inner {
        grid-template-columns: 1fr;
    }

    .hero__title {
        font-size: 2rem;
    }
}

/* -------------------------------------------------------------------------
   Assessment CTA section
   ------------------------------------------------------------------------- */
.assessment-cta {
    padding:       var(--size-2xl) 0;
    border-bottom: 1px solid var(--color-border);
}

.assessment-cta__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--size-lg);
    flex-wrap:       wrap;
}

.assessment-cta__copy {}

.assessment-cta__title {
    font-size:   1.1rem;
    font-weight: 600;
    color:       var(--color-primary);
}

.assessment-cta__subtitle {
    font-size:  0.9rem;
    color:      var(--color-muted);
    margin-top: var(--size-xs);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
    border-top:  1px solid var(--color-border);
    margin-top:  var(--size-3xl);
    background:  var(--color-bg);
}

.site-footer__inner {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    padding-top:     var(--size-2xl);
    padding-bottom:  var(--size-2xl);
    gap:             var(--size-2xl);
    flex-wrap:       wrap;
}

.site-footer__wordmark {
    font-size:      1rem;
    font-weight:    700;
    color:          var(--color-primary);
    text-decoration: none;
}

.site-footer__tagline {
    font-size:  0.85rem;
    color:      var(--color-muted);
    margin-top: var(--size-sm);
    max-width:  280px;
}

.site-footer__menu {
    display:    flex;
    gap:        var(--size-xl);
    list-style: none;
    flex-wrap:  wrap;
}

.site-footer__menu a {
    font-size:   0.875rem;
    color:       var(--color-muted);
    text-decoration: none;
}

.site-footer__menu a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.site-footer__bottom {
    border-top:     1px solid var(--color-border);
    padding:        var(--size-md) 0;
}

.site-footer__copy {
    font-size: 0.8rem;
    color:     var(--color-muted);
}

.site-footer__copy a {
    color: var(--color-muted);
}

/* -------------------------------------------------------------------------
   Assessment template
   ------------------------------------------------------------------------- */
.assessment-page {
    padding: var(--size-2xl) 0 var(--size-3xl);
    max-width: 680px;
    margin: 0 auto;
}

.assessment-page__title {
    font-size:      2rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.03em;
    margin-bottom:  var(--size-sm);
}

.assessment-page__desc {
    font-size:     1rem;
    color:         var(--color-muted);
    margin-bottom: var(--size-2xl);
}

.assessment-step {
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       var(--size-xl);
    margin-bottom: var(--size-lg);
    display:       none;
}

.assessment-step.is-active {
    display: block;
}

.assessment-step__question {
    font-size:     1.1rem;
    font-weight:   600;
    color:         var(--color-primary);
    margin-bottom: var(--size-lg);
    line-height:   1.4;
}

.assessment-options {
    display:       flex;
    flex-direction: column;
    gap:           var(--size-sm);
}

.assessment-option {
    display:       flex;
    align-items:   center;
    gap:           var(--size-md);
    padding:       var(--size-md);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    cursor:        pointer;
    transition:    border-color 0.15s ease, background 0.15s ease;
}

.assessment-option:hover {
    border-color: var(--color-primary);
}

.assessment-option input[type="radio"] {
    accent-color: var(--color-primary);
    width:        16px;
    height:       16px;
    flex-shrink:  0;
}

.assessment-option input[type="radio"]:checked + .assessment-option__label {
    font-weight: 600;
    color:       var(--color-primary);
}

.assessment-option__label {
    font-size: 0.95rem;
    color:     var(--color-text);
    cursor:    pointer;
}

.assessment-nav {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      var(--size-lg);
}

.assessment-progress {
    margin-bottom: var(--size-2xl);
}

.assessment-progress__bar {
    height:        4px;
    background:    var(--color-border);
    border-radius: 2px;
    overflow:      hidden;
}

.assessment-progress__fill {
    height:           100%;
    background:       var(--color-primary);
    transition:       width 0.3s ease;
    border-radius:    2px;
}

.assessment-progress__label {
    font-size:  0.8rem;
    color:      var(--color-muted);
    margin-top: var(--size-sm);
}

/* Result */
.assessment-result {
    display:    none;
}

.assessment-result.is-visible {
    display: block;
}

.assessment-result__title {
    font-size:     1.5rem;
    font-weight:   700;
    color:         var(--color-primary);
    margin-bottom: var(--size-md);
}

.assessment-result__body {
    font-size:     1rem;
    color:         var(--color-text);
    margin-bottom: var(--size-xl);
    line-height:   1.7;
}

.assessment-result__recommendations {
    border-top: 1px solid var(--color-border);
    padding-top: var(--size-xl);
}

.assessment-result__section-title {
    font-size:     0.8rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         var(--color-muted);
    margin-bottom: var(--size-md);
}

/* -------------------------------------------------------------------------
   WooCommerce overrides
   ------------------------------------------------------------------------- */
.woocommerce-page .woocommerce,
.woocommerce {
    max-width: var(--max-width);
    margin:    0 auto;
    padding:   var(--size-2xl) var(--size-lg);
}

.woocommerce .products {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--size-lg);
    list-style:            none;
    padding:               0;
    margin:                0;
}

.woocommerce ul.products li.product {
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       var(--size-lg);
    background:    var(--color-bg);
    float:         none !important;
    width:         auto !important;
    margin:        0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--color-primary);
    padding:     0;
    margin-bottom: var(--size-sm);
}

.woocommerce ul.products li.product .price {
    color:     var(--color-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.woocommerce a.button,
.woocommerce button.button {
    background:    var(--color-primary) !important;
    color:         white !important;
    border-radius: var(--radius) !important;
    font-size:     0.875rem !important;
    font-weight:   600 !important;
    padding:       10px 18px !important;
    border:        none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
    opacity:    0.85 !important;
    background: var(--color-primary) !important;
    color:      white !important;
}

.woocommerce div.product .product_title {
    font-size:      2rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.03em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color:     var(--color-primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.woocommerce-breadcrumb {
    font-size: 0.8rem;
    color:     var(--color-muted);
    margin-bottom: var(--size-xl);
}

.woocommerce-breadcrumb a {
    color: var(--color-muted);
}

/* Notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    border-radius: var(--radius) !important;
    border-left-color: var(--color-primary) !important;
    font-size: 0.9rem !important;
}

@media (max-width: 768px) {
    .woocommerce .products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .woocommerce .products {
        grid-template-columns: 1fr !important;
    }
}

/* -------------------------------------------------------------------------
   Standard page / 404
   ------------------------------------------------------------------------- */
.page-standard,
.error-404 {
    padding: var(--size-2xl) 0 var(--size-3xl);
}

.page-standard__title,
.error-404__title {
    font-size:      2rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.03em;
    margin-bottom:  var(--size-xl);
}

/* -------------------------------------------------------------------------
   Comments (minimal)
   ------------------------------------------------------------------------- */
.comments-area {
    margin-top: var(--size-3xl);
    padding-top: var(--size-xl);
    border-top: 1px solid var(--color-border);
    max-width: 720px;
}

.comments-title {
    font-size:     1.1rem;
    font-weight:   600;
    color:         var(--color-primary);
    margin-bottom: var(--size-lg);
}

.comment-body {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--size-md);
    margin-bottom: var(--size-md);
}

.comment-author b {
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--color-primary);
}

.comment-meta {
    font-size: 0.8rem;
    color:     var(--color-muted);
}

.comment-content {
    font-size:  0.9rem;
    color:      var(--color-text);
    margin-top: var(--size-sm);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
textarea,
select {
    width:         100%;
    padding:       10px 14px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-family:   var(--font-sans);
    font-size:     0.9rem;
    color:         var(--color-text);
    background:    var(--color-bg);
    outline:       none;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--color-primary);
}

label {
    font-size:     0.85rem;
    font-weight:   500;
    color:         var(--color-text);
    display:       block;
    margin-bottom: var(--size-xs);
}

.form-submit input[type="submit"] {
    background:    var(--color-primary);
    color:         white;
    border:        none;
    padding:       10px 20px;
    border-radius: var(--radius);
    font-size:     0.9rem;
    font-weight:   600;
    cursor:        pointer;
    font-family:   var(--font-sans);
}

.form-submit input[type="submit"]:hover {
    opacity: 0.85;
}

/* -------------------------------------------------------------------------
   Hero — headline line
   ------------------------------------------------------------------------- */
.hero {
    padding: 80px 0;
    border-bottom: 1px solid #E6EAEA;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
}

.hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B7C80;
    margin-bottom: 12px;
}

.hero__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: #2E3A3F;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 8px;
}

.hero__headline {
    font-size: 1.25rem;
    font-weight: 500;
    color: #2E3A3F;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.hero__desc {
    font-size: 1rem;
    color: #6B7C80;
    max-width: 440px;
    line-height: 1.75;
    margin-bottom: 32px;
}

.hero__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.hero__visual {
    display: none;
}

@media (max-width: 768px) {
    .hero {
        padding: 56px 0;
    }
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .hero__title {
        font-size: 2.2rem;
    }
}

/* -------------------------------------------------------------------------
   How It Works — 3-step
   ------------------------------------------------------------------------- */
.section-how-it-works {
    padding: 80px 0;
    background: #F7F9FA;
    border-top: 1px solid #E6EAEA;
    border-bottom: 1px solid #E6EAEA;
}

.section-how-it-works .section__header {
    text-align: center;
    margin-bottom: 56px;
}

.section-how-it-works .section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2E3A3F;
}

.how-it-works__steps {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid #E6EAEA;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.how-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 28px;
    border-right: 1px solid #E6EAEA;
}

.how-step:last-child {
    border-right: none;
}

.how-step__num {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6B7C80;
    margin-bottom: 4px;
}

.how-step__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2E3A3F;
    margin-bottom: 4px;
}

.how-step__desc {
    font-size: 0.9rem;
    color: #6B7C80;
    line-height: 1.65;
    flex: 1;
    margin-bottom: 20px;
}

.how-step__btn {
    display: inline-block;
    margin-top: auto;
}

.how-step__divider {
    display: none;
}

@media (max-width: 768px) {
    .how-it-works__steps {
        flex-direction: column;
        border-radius: 8px;
    }
    .how-step {
        border-right: none;
        border-bottom: 1px solid #E6EAEA;
    }
    .how-step:last-child {
        border-bottom: none;
    }
}

/* -------------------------------------------------------------------------
   Five Layers
   ------------------------------------------------------------------------- */
.section-five-layers {
    padding: 80px 0;
    border-bottom: 1px solid #E6EAEA;
}

.section-five-layers .section__header {
    margin-bottom: 48px;
}

.section-five-layers .section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2E3A3F;
}

.section-five-layers .section__subtitle {
    font-size: 0.95rem;
    color: #6B7C80;
    margin-top: 8px;
    line-height: 1.6;
}

.five-layers__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.five-layer-card {
    border: 1px solid #E6EAEA;
    border-radius: 8px;
    padding: 24px 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease;
}

.five-layer-card:hover {
    border-color: #2E3A3F;
}

.five-layer-card__num {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B7C80;
}

.five-layer-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2E3A3F;
    line-height: 1.3;
}

.five-layer-card__desc {
    font-size: 0.83rem;
    color: #6B7C80;
    line-height: 1.55;
}

@media (max-width: 1024px) {
    .five-layers__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .five-layers__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .five-layers__grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   Sleep Problems (SEO entry)
   ------------------------------------------------------------------------- */
.section-sleep-problems {
    padding: 80px 0;
    background: #F7F9FA;
    border-top: 1px solid #E6EAEA;
    border-bottom: 1px solid #E6EAEA;
}

.section-sleep-problems .section__header {
    margin-bottom: 40px;
}

.section-sleep-problems .section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2E3A3F;
}

.sleep-problems__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sleep-problem-card {
    border: 1px solid #E6EAEA;
    border-radius: 8px;
    padding: 28px 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-height: 120px;
}

.sleep-problem-card:hover {
    border-color: #2E3A3F;
    text-decoration: none;
}

.sleep-problem-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #2E3A3F;
    line-height: 1.4;
}

.sleep-problem-card__arrow {
    font-size: 0.8rem;
    color: #6B7C80;
    font-weight: 500;
}

@media (max-width: 900px) {
    .sleep-problems__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .sleep-problems__grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   Section: Guides / Setups / Devices (alternating bg)
   ------------------------------------------------------------------------- */
.section-guides-home {
    padding: 80px 0;
    background: #fff;
    border-bottom: 1px solid #E6EAEA;
}

.section-setups-home {
    padding: 80px 0;
    background: #F7F9FA;
    border-bottom: 1px solid #E6EAEA;
}

.section-devices-home {
    padding: 80px 0;
    background: #fff;
    border-bottom: 1px solid #E6EAEA;
}

/* -------------------------------------------------------------------------
   Trust / Disclaimer section
   ------------------------------------------------------------------------- */
.section-trust {
    padding: 64px 0;
    background: #F7F9FA;
    border-top: 1px solid #E6EAEA;
    border-bottom: 1px solid #E6EAEA;
}

.trust__inner {
    max-width: 600px;
}

.trust__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2E3A3F;
    margin-bottom: 24px;
}

.trust__body p {
    font-size: 0.95rem;
    color: #6B7C80;
    margin-bottom: 10px;
    line-height: 1.75;
}

/* -------------------------------------------------------------------------
   About (homepage summary)
   ------------------------------------------------------------------------- */
.section-about {
    padding: 80px 0;
    border-top: 1px solid #E6EAEA;
}

.about-home__inner {
    max-width: 600px;
}

.about-home__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2E3A3F;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.about-home__body {
    font-size: 1rem;
    color: #1A1A1A;
    line-height: 1.75;
    margin-bottom: 14px;
}

.about-home__tagline {
    font-size: 1rem;
    font-weight: 600;
    color: #2E3A3F;
    font-style: italic;
    margin-top: 8px;
}

/* =========================================================
   About Page (page-about.php)
   ========================================================= */

.page-about {
    padding-bottom: 0;
}

/* -- Hero -- */
.about-hero {
    padding:       72px 0 64px;
    border-bottom: 1px solid var(--color-border);
    background:    #fff;
}

.about-hero__eyebrow {
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--color-muted);
    margin-bottom:  16px;
}

.about-hero__title {
    font-size:      2.8rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.04em;
    line-height:    1.1;
    max-width:      640px;
}

@media (max-width: 640px) {
    .about-hero__title { font-size: 2rem; }
}

/* -- Section base -- */
.about-section {
    padding:       72px 0;
    border-bottom: 1px solid var(--color-border);
    background:    #fff;
}

.about-section--alt {
    background: var(--color-surface);
}

.about-section__inner {
    max-width: 680px;
}

.about-section__title {
    font-size:      1.5rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.02em;
    margin-bottom:  28px;
}

.about-section__lead {
    font-size:     1rem;
    color:         var(--color-text);
    margin-bottom: 32px;
    line-height:   1.7;
}

.about-section__body p {
    font-size:     1rem;
    color:         var(--color-text);
    line-height:   1.75;
    margin-bottom: 16px;
}

.about-section__body p:last-child {
    margin-bottom: 0;
}

.about-section__note {
    margin-top:  32px;
    font-size:   0.9rem;
    color:       var(--color-muted);
    line-height: 1.7;
    border-left: 3px solid var(--color-border);
    padding-left: 16px;
}

/* -- Blockquote -- */
.about-quote {
    margin:      32px 0 0;
    padding:     20px 24px;
    border-left: 3px solid var(--color-primary);
    background:  #fff;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size:   1.05rem;
    font-style:  italic;
    color:       var(--color-primary);
    line-height: 1.65;
}

/* -- Do / Don't columns -- */
.about-do-dont {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   32px;
    margin-bottom:         8px;
}

@media (max-width: 640px) {
    .about-do-dont { grid-template-columns: 1fr; }
}

.about-do-dont__label {
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  16px;
}

.about-do-dont__label--do   { color: #2E3A3F; }
.about-do-dont__label--dont { color: var(--color-muted); }

.about-do-dont__list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap: 12px;
}

.about-do-dont__list li {
    font-size:   0.95rem;
    color:       var(--color-text);
    line-height: 1.6;
    padding-left: 20px;
    position:    relative;
}

.about-do-dont__list li::before {
    content:   "—";
    position:  absolute;
    left:      0;
    color:     var(--color-muted);
}

/* -- Stages -- */
.about-stages {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   20px;
    margin:                32px 0;
}

@media (max-width: 768px) {
    .about-stages { grid-template-columns: 1fr; }
}

.about-stage {
    padding:       28px 24px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    background:    #fff;
}

.about-stage__label {
    display:        block;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-primary);
    margin-bottom:  12px;
}

.about-stage__desc {
    font-size:   0.9rem;
    color:       var(--color-muted);
    line-height: 1.65;
}

/* -- Criteria list -- */
.about-criteria {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap: 0;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    overflow:      hidden;
}

.about-criteria__item {
    display:     flex;
    align-items: center;
    gap:         16px;
    padding:     18px 24px;
    font-size:   0.95rem;
    color:       var(--color-text);
    border-bottom: 1px solid var(--color-border);
    background:  #fff;
}

.about-criteria__item:last-child {
    border-bottom: none;
}

.about-criteria__icon {
    color:      var(--color-muted);
    font-size:  1rem;
    flex-shrink: 0;
}

/* -- For grid -- */
.about-for-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   16px;
    margin-bottom:         8px;
}

@media (max-width: 640px) {
    .about-for-grid { grid-template-columns: 1fr; }
}

.about-for-card {
    padding:       24px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     0.95rem;
    color:         var(--color-text);
    line-height:   1.6;
    background:    #fff;
}

/* -- Position / Closing -- */
.about-closing {
    padding:    80px 0;
    background: var(--color-primary);
}

.about-closing__inner {
    max-width: 600px;
}

.about-position {
    margin-bottom: 40px;
}

.about-position__line {
    font-size:   1.1rem;
    color:       rgba(255,255,255,.65);
    line-height: 2;
}

.about-position__line--emphasis {
    color:       #fff;
    font-size:   1.25rem;
    margin-top:  8px;
}

.about-position__line--emphasis strong {
    color: #fff;
}

.about-closing__body {
    font-size:     1rem;
    color:         rgba(255,255,255,.8);
    line-height:   1.75;
    margin-bottom: 32px;
}

.about-closing__tagline {
    font-size:      1.5rem;
    font-weight:    700;
    color:          #fff;
    letter-spacing: -0.02em;
    margin-bottom:  40px;
}

.about-closing .button-primary {
    background: #fff;
    color:      var(--color-primary);
}

.about-closing .button-primary:hover {
    background:  rgba(255,255,255,.9);
    color:       var(--color-primary);
    opacity:     1;
}