/* FS Poster SaaS section. Linked only from resources/views/saas/layouts/app.blade.php and
   resources/views/saas/layouts/checkout.blade.php, so every rule is scoped to body.saas and cannot
   reach the regular site. */

body.saas {
    --saas-purple-25:   #F7F6FE;
    --saas-purple-50:   #F1EFFD;
    --saas-purple-300:  #B4AEF7;
    --saas-purple-500:  #8F83F1;
    --saas-purple-600:  #7061EF;
    --saas-purple-700:  #4B39E3;
    --saas-pink-500:    #F63D68;

    --saas-white:       #FFFFFF;
    --saas-gray-100:    #F2F4F7;
    --saas-gray-200:    #EAECF0;
    --saas-gray-300:    #D0D5DD;
    --saas-gray-400:    #98A2B3;
    --saas-gray-500:    #667085;
    --saas-gray-600:    #475467;
    --saas-ink:         #2F1D49;

    --saas-header-height: 5rem;
    --saas-radius-8:      .5rem;
    --saas-radius-16:     1rem;
    --saas-shadow-lg:     0 .75rem 1rem -.25rem rgba(16, 24, 40, .08), 0 .25rem .375rem -.125rem rgba(16, 24, 40, .03);

    padding-top: var(--saas-header-height);
}

body.saas .container {
    /* width:100% is load-bearing. style.css sets `body .container { width: 1280px }` below 1520px and
       relies on a `max-width: calc(100vw - 160px)` at 1280px to claw it back; this rule's higher
       specificity defeats that clamp, so without width:100% every SaaS page overflows under 1280px. */
    width:          100%;
    max-width:      1280px;
    padding-inline: 1.5rem;
}

body.saas .sr-only {
    position: absolute;
    width:    1px;
    height:   1px;
    padding:  0;
    margin:   -1px;
    overflow: hidden;
    clip:     rect(0, 0, 0, 0);
    border:   0;
}

/* ---------------------------------------------------------------- header */

.saas .header-container {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    1002;
    transition: all 250ms ease-in-out;
}

.saas .header-container .header {
    /* border-box so the token is the FULL occupied height — body reserves the same value as padding-top,
       and a mismatch hides the top of every page under the fixed header. */
    box-sizing:    border-box;
    height:        var(--saas-header-height);
    padding-block: 1rem;
    border-bottom: thin solid var(--saas-gray-100);
    background:    var(--saas-white);
    color:         var(--saas-gray-600);
    font-family:   "Poppins", sans-serif;
    font-size:     1rem;
    font-weight:   600;
    line-height:   1.5rem;
}

/* :not(.btn) matters — this rule outranks .btn_secondary's own white, so without it every button
   variant in the header inherits the header's grey text on its coloured background. */
.saas .header-container .header a:not(.btn) {
    color:           inherit;
    text-decoration: none;
}

.saas .header-container .header a.btn {
    text-decoration: none;
}

.saas .header-container .header li {
    cursor:      pointer;
    list-style:  none;
    position:    relative;
}

.saas .header-container .header svg {
    transition: transform 250ms ease-in-out;
}

.saas .header-container .header-content,
.saas .header-container .header-left,
.saas .header-container .header-right,
.saas .header-container .header-menu-desktop > ul,
.saas .header-container .header-menu-item,
.saas .header-container .dropdown-btn,
.saas .header-container .header-action-buttons,
.saas .header-container .dropdown-menu-list a,
.saas .header-container .fs-code-products-dropdown a {
    display:     flex;
    align-items: center;
}

.saas .header-container .header-content {
    height:          100%;
    justify-content: space-between;
}

.saas .header-container .header-left {
    gap: 2.5rem;
}

.saas .header-container .header-logo,
.saas .header-container .header-logo-mobile {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.saas .header-container .header-logo-saas {
    margin-left:   .5rem;
    padding:       4px 10px;
    border-radius: 10px;
    background:    var(--saas-purple-50);
    color:         var(--saas-purple-600);
    font-size:     12px;
    font-weight:   500;
    line-height:   18px;
}

.saas .header-container .header-menu-item,
.saas .header-container .dropdown-btn {
    gap: .5rem;
}

.saas .header-container .header-action-buttons {
    gap: 1rem;
}

.saas .header-container .header-menu-desktop ul {
    gap: 2rem;
}

.saas .header-container .header-menu-dropdown,
.saas .header-container .fs-code-products-dropdown {
    position:      absolute;
    top:           100%;
    margin-top:    1.25rem;
    padding:       .75rem;
    z-index:       9;
    background:    var(--saas-white);
    border:        thin solid var(--saas-gray-200);
    border-radius: var(--saas-radius-16);
    box-shadow:    var(--saas-shadow-lg);
    color:         var(--saas-gray-600);
    opacity:       0;
    visibility:    hidden;
    transform:     translateY(1.5rem);
    transition:    all 250ms ease-in-out;
}

.saas .header-container .header-menu-dropdown {
    width: 300px;
}

.saas .header-container .fs-code-products-dropdown {
    width: 380px;
}

.saas .header-container .header-menu-dropdown li,
.saas .header-container .fs-code-products-dropdown li {
    padding:       .75rem;
    border-radius: var(--saas-radius-8);
}

.saas .header-container .header-menu-dropdown li:hover,
.saas .header-container .fs-code-products-dropdown li:not(.is-soon):hover {
    background: var(--saas-purple-25);
}

.saas .header-container .dropdown-menu-list a,
.saas .header-container .fs-code-products-dropdown a {
    gap: 1rem;
}

.saas .header-container .dropdown-menu-list svg {
    width:       20px;
    height:      20px;
    flex-shrink: 0;
}

.saas .header-container .fs-code-products-dropdown a {
    gap:         .75rem;
    align-items: flex-start;
}

.saas .header-container .fs-code-product-icon {
    width:       24px;
    height:      24px;
    flex-shrink: 0;
    margin-top:  2px;
}

.saas .header-container .fs-code-product-body {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}

.saas .header-container .fs-code-product-title {
    color:       var(--saas-ink);
    font-weight: 600;
}

.saas .header-container .fs-code-product-desc {
    color:       var(--saas-gray-500);
    font-size:   .875rem;
    font-weight: 400;
    line-height: 1.2;
}

.saas .header-container .fs-code-coming-soon-item {
    padding: .75rem .75rem 0;
}

.saas .header-container .fs-code-coming-soon-label {
    color:       var(--saas-gray-400);
    font-size:   .875rem;
    line-height: 1.2;
}

.saas .header-container .is-soon a {
    cursor:  default;
    opacity: .6;
}

.saas .header-container .header-menu-desktop li:hover > .header-menu-dropdown,
.saas .header-container .header-menu-desktop li:focus-within > .header-menu-dropdown,
.saas .header-container .header-menu-desktop li:hover > .fs-code-products-dropdown,
.saas .header-container .header-menu-desktop li:focus-within > .fs-code-products-dropdown,
.saas .header-container .header-menu-dropdown.is-open {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

.saas .header-container .header-menu-desktop li:hover > .header-menu-item,
.saas .header-container .header-menu-desktop li:hover > .dropdown-btn {
    color: var(--saas-purple-600);
}

.saas .header-container .header-menu-desktop li:hover > .header-menu-item svg path,
.saas .header-container .header-menu-desktop li:hover > .dropdown-btn svg path {
    stroke: var(--saas-purple-600);
}

.saas .header-container .header-menu-desktop li:hover > .header-menu-item > svg,
.saas .header-container .header-menu-desktop li:hover > .dropdown-btn > svg {
    transform: rotate(180deg);
}

.saas .header-container .site-langs {
    position:      relative;
    font-size:     .875rem;
    border-bottom: thin solid var(--saas-gray-200);
}

.saas .header-container .site-langs .selected-lang {
    display:     flex;
    align-items: center;
    gap:         4px;
    padding:     4px;
    cursor:      pointer;
}

.saas .header-container .site-langs svg {
    width:  1rem;
    height: 1rem;
}

.saas .header-container .site-langs .lang-dropdown {
    position:      absolute;
    top:           100%;
    right:         50%;
    transform:     translateX(50%);
    margin-top:    .5rem;
    padding:       .5rem;
    max-height:    320px;
    overflow-y:    auto;
    background:    var(--saas-white);
    border:        thin solid var(--saas-gray-200);
    border-radius: var(--saas-radius-8);
    box-shadow:    var(--saas-shadow-lg);
    opacity:       0;
    visibility:    hidden;
    transition:    all 250ms ease-in-out;
}

.saas .header-container .site-langs:hover .lang-dropdown,
.saas .header-container .site-langs:focus-within .lang-dropdown {
    opacity:    1;
    visibility: visible;
}

.saas .header-container .site-langs .lang-dropdown a {
    display: block;
    padding: .5rem;
}

.saas #btn-mobile-menu-show,
.saas .mobile-menu {
    display: none;
}

.saas .mobile-menu {
    position:   fixed;
    inset:      0;
    height:     100vh;
    overflow-y: auto;
    background: rgba(0, 0, 0, .7);
    z-index:    1001;
    opacity:    0;
    visibility: hidden;
    transition: all 250ms ease-in-out;
}

.saas .mobile-menu.show {
    opacity:    1;
    visibility: visible;
}

.saas .mobile-menu.show .mobile-menu-content {
    left: 0;
}

.saas .mobile-menu .mobile-menu-content {
    position:       fixed;
    top:            0;
    bottom:         0;
    left:           -100%;
    width:          80%;
    min-width:      320px;
    display:        flex;
    flex-direction: column;
    background:     var(--saas-white);
    transition:     all 250ms ease-in-out;
}

.saas .mobile-menu .mobile-menu-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.5rem 1rem;
    border-bottom:   thin solid var(--saas-gray-100);
}

.saas .mobile-menu .mobile-menu-body {
    flex-grow:     1;
    overflow-y:    auto;
    padding-block: 1.5rem;
}

.saas .mobile-menu .mobile-menu-footer {
    display:    grid;
    gap:        .75rem;
    padding:    1.5rem 1rem;
    border-top: thin solid var(--saas-gray-100);
}

.saas .mobile-menu .header-menu.mobile ul {
    flex-direction: column;
    align-items:    stretch;
    gap:            .5rem;
}

.saas .mobile-menu .header-menu.mobile > ul > li {
    padding: .75rem 1rem;
}

.saas .mobile-menu .header-menu-item,
.saas .mobile-menu .dropdown-btn {
    justify-content: space-between;
}

.saas .mobile-menu .header-menu-dropdown,
.saas .mobile-menu .fs-code-products-dropdown {
    position:   static;
    width:      auto;
    max-height: 0;
    margin:     0;
    padding:    0;
    border:     0;
    box-shadow: none;
    overflow:   hidden;
    opacity:    1;
    visibility: visible;
    transform:  none;
    transition: max-height 300ms ease-in-out;
}

.saas .mobile-menu .header-menu-dropdown.is-open,
.saas .mobile-menu li:hover > .fs-code-products-dropdown,
.saas .mobile-menu li:focus-within > .fs-code-products-dropdown {
    max-height:    1000px;
    margin-top:    1rem;
    padding-block: .75rem;
}

@media (max-width: 991px) {
    .saas .header-menu-desktop {
        display: none;
    }

    .saas .mobile-menu,
    .saas #btn-mobile-menu-show {
        display: block;
    }

    .saas .header-container .header-right {
        gap: .75rem;
    }
}

@media (max-width: 575px) {
    .saas .header-container .header-action-buttons > a {
        display: none;
    }
}

/* ---------------------------------------------------------------- footer */

.saas footer.footer {
    background:  var(--saas-ink);
    color:       var(--saas-gray-200);
    font-family: "Poppins", sans-serif;
    font-size:   1rem;
    font-weight: 400;
    line-height: 1.5rem;
}

.saas footer.footer .container {
    display:     block;
    padding:     0 1.5rem;
    border-top:  0;
}

.saas footer.footer a {
    color:           inherit;
    text-decoration: none;
    transition:      color .2s;
}

.saas footer.footer a:hover {
    color: var(--saas-purple-300);
}

.saas footer.footer .footer-content {
    padding-block: 4rem 3rem;
}

.saas footer.footer .footer-grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap:                   2rem;
}

.saas footer.footer .footer-item-header {
    display:        block;
    margin-bottom:  1rem;
    color:          var(--saas-purple-300);
    font-size:      .875rem;
    font-weight:    600;
    line-height:    1.25rem;
    text-transform: uppercase;
}

.saas footer.footer .footer-item-list {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
    font-size:      .875rem;
}

.saas footer.footer .footer-credits {
    margin-top: 4rem;
}

.saas footer.footer .multi-lang-container,
.saas footer.footer .contact-info,
.saas footer.footer .social-list {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
}

.saas footer.footer .footer-separator {
    width:       100%;
    height:      1px;
    margin-block: 2rem;
    background:  var(--saas-gray-500);
}

.saas footer.footer .contact-info {
    font-size: .875rem;
}

.saas footer.footer .social-list {
    justify-content: flex-end;
    flex-wrap:       wrap;
}

.saas footer.footer .social-list svg [fill]:not([fill="none"]) {
    transition: fill .2s;
}

.saas footer.footer .social-list a:hover svg [fill]:not([fill="none"]) {
    fill: var(--saas-purple-300);
}

.saas footer.footer .site-langs {
    position:  relative;
    font-size: .875rem;
}

.saas footer.footer .site-langs .selected-lang {
    display:     flex;
    align-items: center;
    gap:         4px;
    cursor:      pointer;
    color:       var(--saas-white);
}

.saas footer.footer .site-langs .selected-lang svg path {
    stroke: currentColor;
}

.saas footer.footer .site-langs .lang-dropdown {
    position:      absolute;
    right:         0;
    bottom:        100%;
    margin-bottom: .75rem;
    padding:       .5rem;
    max-height:    320px;
    overflow-y:    auto;
    background:    var(--saas-white);
    border-radius: var(--saas-radius-8);
    box-shadow:    var(--saas-shadow-lg);
    color:         var(--saas-gray-600);
    opacity:       0;
    visibility:    hidden;
    transition:    all 250ms ease-in-out;
}

.saas footer.footer .site-langs:hover .lang-dropdown,
.saas footer.footer .site-langs:focus-within .lang-dropdown {
    opacity:    1;
    visibility: visible;
}

.saas footer.footer .site-langs .lang-dropdown a {
    display:     block;
    padding:     .5rem;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .saas footer.footer .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap:               3rem;
    }
}

@media (max-width: 768px) {
    .saas footer.footer .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .saas footer.footer .footer-content {
        padding-block: 3rem;
    }

    .saas footer.footer .footer-credits {
        margin-top: 3rem;
    }

    .saas footer.footer .contact-info {
        flex-direction: column-reverse;
        align-items:    flex-start;
        gap:            1.5rem;
    }

    .saas footer.footer .social-list {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .saas footer.footer .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── /saas/pricing ─────────────────────────────────────────────────────────── */

.saas .saas-pricing,
.saas .saas-compare,
.saas .testimonials,
.saas .faq {
    padding-block: 4rem;
}

.saas .saas-pricing-title,
.saas .saas-compare-title {
    margin:      0 0 .75rem;
    color:       var(--saas-ink);
    font-family: "Poppins", sans-serif;
    font-size:   2.25rem;
    font-weight: 700;
    line-height: 1.2;
    text-align:  center;
}

.saas .saas-pricing-subtitle {
    margin:      0 0 3rem;
    color:       var(--saas-gray-600);
    font-size:   1.125rem;
    text-align:  center;
}

.saas .saas-pricing-empty {
    max-width:     32rem;
    margin-inline: auto;
    padding:       2.5rem 2rem;
    border:        thin dashed var(--saas-gray-300);
    border-radius: var(--saas-radius-16);
    background:    var(--saas-purple-25);
    color:         var(--saas-gray-600);
    text-align:    center;
}

.saas .saas-pricing-empty p { margin: 0 0 1.25rem; }

/* Comparison matrix. The wrapper scrolls on its own so a wide table never makes
   the page scroll sideways. */
.saas .saas-compare-scroll {
    overflow-x:                 auto;
    -webkit-overflow-scrolling: touch;
}

.saas .saas-compare-table {
    width:           100%;
    min-width:       44rem;
    border-collapse: collapse;
    font-size:       .9375rem;
}

.saas .saas-compare-table th,
.saas .saas-compare-table td {
    padding:       .875rem 1rem;
    border-bottom: thin solid var(--saas-gray-200);
    text-align:    left;
    vertical-align: top;
}

.saas .saas-compare-table thead th {
    position:      sticky;
    top:           var(--saas-header-height);
    background:    var(--saas-white);
    color:         var(--saas-ink);
    font-weight:   600;
    white-space:   nowrap;
}

.saas .saas-compare-group th {
    background:     var(--saas-purple-50);
    color:          var(--saas-purple-700);
    font-size:      .8125rem;
    font-weight:    700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.saas .saas-compare-feature {
    display: block;
    color:   var(--saas-ink);
}

.saas .saas-compare-hint {
    display:   block;
    margin-top: .125rem;
    color:     var(--saas-gray-500);
    font-size: .8125rem;
}

.saas .saas-compare-cell { text-align: center; }

.saas .saas-compare-cell .is-included { color: var(--saas-purple-600); font-weight: 700; }
.saas .saas-compare-cell .is-excluded { color: var(--saas-gray-400); }

/* Testimonials + FAQ, shared by the home and pricing pages. */
.saas .testimonials .container {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap:                   1.5rem;
}

.saas .testimonial {
    margin:        0;
    padding:       1.75rem;
    border:        thin solid var(--saas-gray-200);
    border-radius: var(--saas-radius-16);
    background:    var(--saas-white);
    box-shadow:    var(--saas-shadow-lg);
}

.saas .testimonial p { margin: 0 0 1rem; color: var(--saas-gray-600); }
.saas .testimonial cite { color: var(--saas-ink); font-style: normal; font-weight: 600; }

.saas .faq-item {
    padding-block: 1.25rem;
    border-bottom: thin solid var(--saas-gray-200);
}

.saas .faq-item summary {
    color:       var(--saas-ink);
    cursor:      pointer;
    font-weight: 600;
    list-style:  none;
}

.saas .faq-item summary::-webkit-details-marker { display: none; }

.saas .faq-item summary::after {
    float:       right;
    content:     "+";
    color:       var(--saas-purple-600);
    font-size:   1.25rem;
    line-height: 1;
}

.saas .faq-item[open] summary::after { content: "\2013"; }

.saas .faq-answer {
    padding-top: .75rem;
    color:       var(--saas-gray-600);
}

@media (max-width: 48rem) {
    .saas .saas-pricing-title,
    .saas .saas-compare-title { font-size: 1.75rem; }
    .saas .saas-compare-table thead th { position: static; }
}

/* Plan cards. `.pricing-plan` and friends also exist in the regular site's
   css/front/pricing/, which the SaaS layout does not load — these are the SaaS copies. */
.saas .pricing-table {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap:                   1.5rem;
    align-items:           start;
    margin-bottom:         1rem;
}

.saas .pricing-plan {
    position:      relative;
    display:       flex;
    flex-direction: column;
    height:        100%;
    padding:       2rem 1.75rem;
    border:        thin solid var(--saas-gray-200);
    border-radius: var(--saas-radius-16);
    background:    var(--saas-white);
    box-shadow:    var(--saas-shadow-lg);
}

.saas .pricing-plan-badge {
    position:       absolute;
    top:            1rem;
    right:          1rem;
    padding:        .25rem .625rem;
    border-radius:  999px;
    background:     var(--saas-pink-500);
    color:          var(--saas-white);
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .02em;
}

.saas .pricing-plan-name {
    margin:      0 0 .25rem;
    color:       var(--saas-ink);
    font-family: "Poppins", sans-serif;
    font-size:   1.5rem;
    font-weight: 700;
}

.saas .pricing-plan-heading {
    margin:    0 0 1.25rem;
    color:     var(--saas-purple-600);
    font-size: .9375rem;
    font-weight: 600;
}

.saas .pricing-plan-price {
    display:     flex;
    align-items: baseline;
    gap:         .5rem;
    margin-bottom: .5rem;
}

.saas .pricing-plan-price-old {
    color:           var(--saas-gray-400);
    font-size:       1.125rem;
    text-decoration: line-through;
}

.saas .pricing-plan-price-now {
    color:       var(--saas-ink);
    font-family: "Poppins", sans-serif;
    font-size:   2.25rem;
    font-weight: 700;
    line-height: 1;
}

.saas .pricing-plan-save {
    display:       inline-block;
    margin-bottom: 1rem;
    padding:       .1875rem .5rem;
    border-radius: var(--saas-radius-8);
    background:    var(--saas-purple-50);
    color:         var(--saas-purple-700);
    font-size:     .8125rem;
    font-weight:   600;
}

.saas .pricing-plan-description {
    margin:    0 0 1.25rem;
    color:     var(--saas-gray-600);
    font-size: .9375rem;
}

.saas .pricing-plan-highlights {
    margin:     0 0 1.75rem;
    padding:    0;
    list-style: none;
}

.saas .pricing-plan-highlights li {
    position:      relative;
    padding-left:  1.5rem;
    margin-bottom: .625rem;
    color:         var(--saas-gray-600);
    font-size:     .9375rem;
}

.saas .pricing-plan-highlights li::before {
    position:    absolute;
    left:        0;
    content:     "\2713";
    color:       var(--saas-purple-600);
    font-weight: 700;
}

.saas .pricing-plan-highlights li.is-excluded {
    color: var(--saas-gray-400);
}

.saas .pricing-plan-highlights li.is-excluded::before {
    content: "\2715";
    color:   var(--saas-gray-400);
}

/* Pushed to the bottom so cards of unequal height keep their CTAs aligned. */
.saas .pricing-plan-cta {
    margin-top:      auto;
    justify-content: center;
    text-align:      center;
}

.saas a.pricing-plan-cta.is-hidden { display: none; }

.saas .pricing-cycle-toggle {
    display:        inline-flex;
    gap:            .25rem;
    margin:         0 auto 2rem;
    padding:        .25rem;
    border-radius:  999px;
    background:     var(--saas-purple-50);
}

.saas .saas-pricing .pricing-cycle-toggle { display: flex; width: fit-content; }

.saas .pricing-cycle-option {
    padding:       .5rem 1.25rem;
    border:        0;
    border-radius: 999px;
    background:    transparent;
    color:         var(--saas-gray-600);
    cursor:        pointer;
    font-family:   inherit;
    font-size:     .9375rem;
    font-weight:   600;
}

.saas .pricing-cycle-option.is-active {
    background: var(--saas-white);
    color:      var(--saas-purple-700);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.saas .pricing-plan-cycle.is-hidden { display: none; }

.saas .pricing-plan-period {
    color:     var(--saas-gray-500);
    font-size: .875rem;
}

/* ------------------------------------------------------------- feature list
   The page reuses css/front/features/features.css + features-list.css verbatim. Only the three
   points where the SaaS shell contradicts that markup are re-stated here. */

/* features.css clears the regular site's overlaying fixed header with a 162px hero pad. body.saas
   already reserves --saas-header-height as body padding, so the ported value stacks on top of it. */
body.saas #hero .container .hero {
    padding-top: 4.5rem;
}

/* features-list.css styles .features-tab as a <button>; on this page the audience and tag filters
   are separate routes, so the tabs are links and arrive underlined. */
body.saas .features-tab {
    text-decoration: none;
}

/* The regular page filters one flat grid client-side and so has no per-category heading. The SaaS
   page groups server-side by tag and needs one. */
body.saas .saas-features-group-title {
    margin:      0;
    padding:     1.5rem 1.5rem .75rem;
    font-family: 'Poppins', sans-serif;
    font-size:   .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color:       var(--saas-ink);
}

/* --------------------------------------------------------------- documentation
   The page reuses css/front/documentation/documentation.css verbatim; body.saas #hero already
   restates the hero pad above. */

/* The regular index always has categories, so documentation.css styles no empty state. reset.css
   strips p to font:inherit, which would otherwise render this at the browser default in black. */
body.saas .saas-docs-empty {
    font-family: 'Poppins', sans-serif;
    font-size:   .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color:       var(--saas-ink);
}

/* features-list.css carries `body:has(#features) .container { padding-inline: 0 !important }`. That is
   harmless on the regular site, where .container gets its inset from max-width: calc(100vw - 160px),
   but body.saas .container insets with padding — so the rule flattens the SaaS header, footer and page
   against the viewport edge. Re-assert it for SaaS pages only. */
body.saas:has(#features) .container {
    padding-inline: 1.5rem !important;
}

/* ------------------------------------------------------------------- checkout
   /saas/checkout runs on its own shell (saas/layouts/checkout.blade.php) and reuses
   css/front/pricing/checkout.css + css/front/checkout/checkout-header.css. Only the points where the
   SaaS body contradicts that markup are re-stated here. */

/* The checkout shell renders the checkout bar, not the marketing header, and #checkout-page already
   clears that bar with its own margin-top. */
body.saas.saas-checkout {
    padding-top: 0;
}

body.saas.saas-checkout .checkout-header-logo {
    gap:             .5rem;
    text-decoration: none;
}

body.saas.saas-checkout .checkout-header-logo-saas {
    padding:       4px 10px;
    border-radius: 10px;
    background:    var(--saas-purple-50);
    color:         var(--saas-purple-600);
    font-size:     12px;
    font-weight:   500;
    line-height:   18px;
}

body.saas.saas-checkout .saas-checkout-includes {
    padding:       1.5rem;
    border:        1px solid var(--saas-gray-200);
    border-radius: var(--saas-radius-16);
    background:    var(--saas-purple-25);
}

body.saas.saas-checkout .saas-checkout-includes-title {
    margin-bottom: .75rem;
    font-family:   'Poppins', sans-serif;
    font-size:     1rem;
    font-weight:   600;
    line-height:   1.5rem;
    color:         var(--saas-ink);
}

body.saas.saas-checkout .saas-checkout-includes ul {
    display:        flex;
    flex-direction: column;
    gap:            .625rem;
    list-style:     none;
}

body.saas.saas-checkout .saas-checkout-includes li {
    padding-left:    1.75rem;
    background:      url("../../../img/saas/icons/check.svg") no-repeat left .1875rem;
    background-size: 1rem 1rem;
    font-size:       .875rem;
    font-weight:     400;
    line-height:     1.25rem;
    color:           var(--saas-gray-600);
}

/* ----------------------------------------------------------------- thank you
   The page reuses css/front/pricing/thank-you.css, whose 90px hero pad clears the regular site's
   overlaying fixed header. body.saas already reserves --saas-header-height as body padding. */
body.saas #hero:has(.faq-welcome) {
    padding-top: 1.5rem;
}

/* thank-you.css floats the banner out of flow and drops the card 250px to overlap it. The card's
   margin collapses through .container and carries the banner's static position down with it, so the
   banner lands on top of the card's first lines. Put both back in flow. */
body.saas #hero:has(.faq-welcome) .faq-welcome {
    position: static;
}

body.saas #hero:has(.faq-welcome) .privacy {
    margin-top: 0;
}