:root {
    --forest:#132a13;
    --green:#31572c;
    --lime:#ecf39e;
    --cream:#f7f8f2;
    --muted:#687260;
    --line:#dce1d2
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:32px
}
body {
    margin:0;
    background:#fff;
    color:var(--forest);
    font-family:Barlow,Arial,sans-serif;
    font-size:18px;
    line-height:1.6
}
button,a {
    -webkit-tap-highlight-color:transparent
}
a {
    color:inherit
}
button {
    font:inherit;
    cursor:pointer
}
a,button,summary {
    touch-action:manipulation
}
a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid #8c9d38;
    outline-offset:5px
}
img {
    max-width:100%;
    display:block
}
h1,h2,h3,h4,p,figure,blockquote {
    margin:0
}
h1,h2,h3 {
    line-height:1.16
}
h2 {
    font-size:44px;
    font-weight:600;
    letter-spacing:-1px
}
h2.slab {
    font-size:40px;
    line-height:1.25;
    letter-spacing:0
}
.slab,.hero h1,.step h3,.step-number,.price-card h3,.price {
    font-family:'Kelly Slab',Georgia,serif
}
.container {
    width:calc(100% - 160px);
    max-width:1280px;
    margin-inline:auto
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:56px;
    padding:14px 24px;
    border-radius:8px;
    background:var(--green);
    color:#fff;
    font-weight:700;
    font-size:16px;
    line-height:1.4;
    text-decoration:none;
    transition:background .18s,transform .18s
}
.button:hover {
    background:#23451e;
    transform:translateY(-2px)
}
.button.lime {
    background:var(--lime);
    color:var(--forest)
}
.button.lime:hover {
    background:#e1ec7c
}
.actions {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px
}
.text-link {
    font-size:16px;
    font-weight:700;
    text-underline-offset:4px
}
.text-link span {
    display:inline-block;
    margin-left:24px;
    font-size:26px;
    text-decoration:none;
    font-weight:400
}
.eyebrow {
    text-transform:uppercase;
    font-size:13px;
    line-height:1.4;
    margin-bottom:28px
}
.icon-library {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}
.skip-link {
    clip-path:inset(50%);
    position:fixed;
    top:-100px;
    left:20px;
    padding:10px 20px;
    background:var(--lime);
    z-index:10
}
.skip-link:focus {
    clip-path:none;
    top:10px
}
.hero-wrap {
    background:var(--cream);
    padding-top:24px
}
.header {
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    background:var(--forest);
    color:#fff;
    border-radius:18px;
    padding:18px 28px;
    position:relative
}
.logo {
    width:150px;
    height:44px;
    object-fit:contain
}
.desktop-nav {
    display:flex;
    gap:34px;
    align-items:center
}
.desktop-nav a {
    text-decoration:none;
    font-size:16px;
    font-weight:500
}
.desktop-nav a:hover {
    color:var(--lime)
}
.menu-toggle,.mobile-nav {
    display:none
}
.hero {
    text-align:center;
    padding-top:44px;
    padding-bottom:80px
}
.hero h1 {
    font-size:64px;
    line-height:1.1;
    letter-spacing:.2px;
    font-weight:700
}
.underline {
    position:relative;
    white-space:nowrap
}
.underline:after {
    content:'';
    position:absolute;
    left:0;
    right:-14px;
    bottom:-21px;
    height:24px;
    border-top:7px solid #ffd315;
    border-radius:50%;
    transform:rotate(-1deg)
}
.hero>p:not(.caption) {
    color:var(--muted);
    font-size:20px;
    line-height:1.5;
    margin:32px 0 28px
}
.dashboard {
    margin:48px 48px 0;
    background:var(--forest);
    padding:16px 12px 12px;
    border-radius:20px;
    box-shadow:0 28px 42px #132a1326;
    text-align:left
}
.window-dots {
    display:flex;
    gap:6px;
    height:32px;
    padding-left:16px;
    align-items:flex-start;
    padding-top:3px
}
.window-dots i {
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--lime)
}
.dashboard img {
    width:100%;
    height:auto;
    border-radius:10px
}
.hero .caption {
    font-size:15px;
    font-weight:700;
    color:#596352;
    margin-top:18px
}
.spotlight {
    display:grid;
    grid-template-columns:1.23fr 1fr;
    gap:48px;
    padding-block:80px;
    align-items:center
}
.video-placeholder {
    aspect-ratio:680/384;
    background:var(--cream);
    border:1px dashed var(--line);
    border-radius:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:18px
}
.play {
    width:46px;
    height:46px;
    border:2px solid var(--green);
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:21px;
    color:var(--green);
    padding-left:3px
}
.video-placeholder strong {
    font-size:18px;
    font-weight:600
}
.spotlight h2 {
    margin-bottom:20px
}
.spotlight .eyebrow {
    margin-bottom:28px
}
.spotlight .inline-link {
    display:inline-block;
    margin-top:22px;
    font-weight:600;
    text-underline-offset:3px
}
.steps {
    text-align:center;
    padding-top:80px;
    padding-bottom:160px
}
.mode-tabs {
    display:inline-flex;
    padding:8px;
    gap:8px;
    background:var(--cream);
    border-radius:12px;
    margin:44px 0 40px
}
.mode-tabs button {
    border:0;
    background:transparent;
    color:var(--forest);
    font-weight:700;
    min-width:126px;
    padding:12px 22px;
    border-radius:8px;
    font-size:16px
}
.mode-tabs [aria-selected=true] {
    background:var(--forest);
    color:#fff
}
.step-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    text-align:left;
    margin-bottom:40px
}
.step {
    padding:28px 24px 40px;
    background:var(--cream);
    border-radius:18px;
    min-height:240px
}
.step:last-child {
    background:var(--lime)
}
.step-number {
    font-size:38px;
    font-weight:700;
    line-height:1.3;
    color:var(--green)
}
.step h3 {
    font-size:20px;
    font-weight:400;
    margin:26px 0 22px
}
.step p {
    font-size:18px;
    color:var(--muted);
    line-height:1.4
}
.why {
    padding-bottom:80px
}
.why h2 {
    margin-bottom:32px
}
.solutions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    padding:32px;
    background:var(--cream);
    border-radius:24px;
    align-items:start
}
.accordion details {
    border-bottom:1px solid var(--line)
}
.accordion details:last-child {
    border:0
}
.accordion summary {
    list-style:none;
    position:relative;
    padding:18px 0 18px 32px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    line-height:1.5
}
.accordion summary::-webkit-details-marker {
    display:none
}
.accordion summary:before {
    content:'›';
    position:absolute;
    left:4px;
    top:12px;
    font-size:28px;
    color:var(--green);
    font-weight:400;
    transition:transform .15s
}
.accordion details[open] summary:before {
    transform:rotate(90deg)
}
.solution-body {
    font-size:18px;
    line-height:1.4;
    padding-bottom:20px
}
.solution-body ul {
    margin:0;
    padding:0;
    list-style:none
}
.solution-body li:before {
    content:'• ';
}
.platform-placeholder {
    background:#fff;
    border:1px dashed var(--line);
    border-radius:22px;
    min-height:520px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:24px;
    gap:18px
}
.platform-placeholder strong {
    font-size:18px
}
.features {
    padding-top:8px;
    padding-bottom:160px
}
.features>.eyebrow {
    color:var(--green);
    margin-bottom:40px
}
.features>h2 {
    margin-bottom:40px
}
.feature-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
}
.feature-column {
    display:flex;
    flex-direction:column;
    gap:24px
}
.feature-card {
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:24px;
    padding:28px
}
.feature-card h3 {
    display:flex;
    align-items:center;
    gap:20px;
    font-family:Barlow,Arial,sans-serif;
    font-size:23px;
    font-weight:400;
    margin-bottom:24px;
    letter-spacing:-.5px
}
.feature-icon {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:64px;
    height:64px;
    border-radius:20px;
    background:var(--lime);
    color:var(--green)
}
svg {
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round
}
.feature-icon svg {
    width:36px;
    height:36px
}
.feature-card dl {
    margin:0
}
.feature-card dt {
    font-weight:600;
    margin-top:16px
}
.feature-card dt:first-child {
    margin-top:0
}
.feature-card dd {
    margin:4px 0 0;
    color:var(--muted);
    line-height:1.6
}
.feature-card>p {
    color:var(--muted);
    margin-bottom:16px
}
.testimonial {
    background:var(--lime);
    border-radius:24px;
    padding:48px;
    display:grid;
    grid-template-columns:380px 1fr;
    gap:24px;
    margin-bottom:80px;
    min-height:267px
}
.testimonial .eyebrow {
    margin-bottom:12px
}
.testimonial blockquote {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between
}
.quote-mark {
    font-size:42px;
    line-height:1
}
.testimonial blockquote p {
    font-size:22px;
    font-weight:500;
    margin-top:35px
}
.testimonial cite {
    font-style:normal;
    color:var(--muted);
    margin-top:20px
}
.payments {
    background:var(--forest);
    color:#f7f8f2;
    padding:88px 0 90px
}
.payments .eyebrow,.country-grid h3 {
    color:var(--lime)
}
.payments-heading {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:start
}
.payments-heading h2 {
    margin-bottom:28px
}
.payments-heading>div>p:last-child {
    font-size:20px
}
.stats {
    background:var(--green);
    border-radius:24px;
    display:flex;
    justify-content:space-around;
    text-align:center;
    padding:28px 20px;
    margin-top:26px
}
.stats>div {
    display:flex;
    flex-direction:column;
    gap:12px
}
.stats strong {
    font-family:'Kelly Slab',Georgia,serif;
    font-size:58px;
    line-height:1.3;
    color:var(--lime);
    display:flex;
    align-items:center;
    gap:12px
}
.stats strong span {
    font-family:Arial,sans-serif;
    font-size:64px;
    line-height:1
}
.stats svg {
    width:48px;
    height:48px
}
.stats>div>span {
    font-size:20px
}
.payment-note {
    margin-top:44px;
    margin-bottom:40px
}
.country-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:24px
}
.country-grid h3 {
    font-size:16px;
    font-weight:700;
    margin-bottom:18px
}
.country-grid ul {
    list-style:none;
    margin:0;
    padding:0
}
.country-grid li {
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:10px;
    line-height:1.4
}
.country-grid li span {
    font-size:23px;
    line-height:1
}
.pricing {
    background:var(--cream);
    padding:88px 0
}
.section-heading {
    text-align:center;
    margin-bottom:44px
}
.section-heading .eyebrow {
    color:var(--green);
    margin-bottom:40px
}
.section-heading>p:last-child {
    font-size:20px;
    color:var(--muted);
    margin-top:44px
}
.pricing-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}
.price-card {
    background:#fff;
    padding:32px 28px 48px;
    border-radius:24px
}
.price-card.featured {
    background:var(--lime)
}
.price-card h3 {
    font-size:22px;
    font-weight:400
}
.price {
    font-size:58px;
    font-weight:700;
    margin-top:20px;
    line-height:1.4
}
.credits {
    font-size:16px;
    color:var(--green);
    font-weight:700;
    margin-top:22px
}
.commission {
    font-size:16px;
    font-weight:700;
    margin-top:24px;
    min-height:26px
}
.allowances {
    border-block:1px solid var(--line);
    padding-block:18px;
    margin:26px 0 24px;
    font-size:18px;
    line-height:1.5
}
.allowances p+p {
    margin-top:12px
}
.price-card>.button {
    display:flex;
    width:100%
}
.price-card h4 {
    font-size:16px;
    color:var(--green);
    margin:22px 0
}
.check-list {
    list-style:none;
    margin:0;
    padding:0
}
.check-list li {
    position:relative;
    padding-left:28px;
    margin-bottom:12px;
    color:var(--muted);
    line-height:1.5
}
.check-list li:before {
    content:'✓';
    position:absolute;
    left:0;
    color:var(--green)
}
.enterprise {
    margin-block:80px;
    padding:32px;
    border-radius:24px;
    background:var(--forest);
    color:var(--cream);
    display:grid;
    grid-template-columns:420px 1fr;
    gap:28px
}
.enterprise h2 {
    color:var(--lime);
    margin-bottom:20px
}
.enterprise p {
    font-size:20px
}
.custom-badge {
    display:inline-block;
    background:var(--lime);
    color:var(--forest);
    border-radius:14px;
    font-weight:500;
    padding:9px 12px;
    min-width:150px;
    margin-top:18px
}
.enterprise .check-list li {
    color:var(--cream);
    margin-bottom:14px
}
.enterprise .check-list li:before {
    color:var(--lime)
}
.enterprise .button {
    min-width:200px
}
.footer {
    background:var(--forest);
    color:var(--cream);
    padding:70px 0 40px
}
.footer-logo {
    width:100%;
    height:auto;
    opacity:1;
    margin-bottom:72px;
    image-rendering:auto
}
.footer-content {
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:60px
}
.footer .eyebrow {
    color:var(--lime);
    margin-bottom:28px
}
.footer h2 {
    margin-bottom:28px
}
.footer-content>div>p:not(.eyebrow) {
    font-size:20px;
    margin-bottom:24px
}
.footer .actions {
    justify-content:flex-start
}
.footer nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    padding-top:100px
}
.footer nav a {
    display:block;
    font-size:22px;
    text-decoration:none;
    margin-bottom:18px
}
.footer nav a:hover {
    color:var(--lime)
}
.footer-bottom {
    border-top:1px solid #375532;
    display:flex;
    justify-content:space-between;
    gap:24px;
    margin-top:48px;
    padding-top:28px
}
.footer-bottom span:last-child {
    font-size:14px
}
@media(min-width:1441px) {
    .container {
        max-width:1280px
    }
}
@media(max-width:1199px) {
    .container {
        width:calc(100% - 80px)
    }
    .desktop-nav {
        gap:20px
    }
    .header {
        gap:20px;
        padding-inline:20px
    }
    .header-cta {
        padding-inline:16px;
        font-size:14px
    }
    .hero h1 {
        font-size:48px
    }
    .hero .dashboard {
        margin-inline:20px
    }
    .testimonial {
        grid-template-columns:1fr 1.5fr
    }
    .enterprise {
        grid-template-columns:1fr 1.6fr
    }
    .step {
        padding:24px 20px
    }
    .step h3 {
        font-size:18px
    }
    .country-grid {
        gap:16px
    }
    .country-grid li {
        font-size:16px
    }
    .footer-content {
        gap:30px
    }
    .price-card {
        padding:28px 22px
    }
}
@media(max-width:900px) {
    .desktop-nav {
        gap:16px
    }
    .logo {
        width:120px
    }
    .header-cta {
        display:none
    }
    .hero h1 {
        font-size:42px
    }
    h2,h2.slab {
        font-size:34px
    }
    .step-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .steps {
        padding-bottom:100px
    }
    .solutions {
        gap:24px;
        padding:24px
    }
    .platform-placeholder {
        min-height:450px
    }
    .feature-card {
        padding:24px
    }
    .feature-card h3 {
        font-size:20px;
        gap:12px
    }
    .feature-icon {
        width:52px;
        height:52px;
        border-radius:16px
    }
    .payments-heading {
        grid-template-columns:1fr;
        gap:20px
    }
    .stats {
        margin-top:0
    }
    .country-grid {
        grid-template-columns:repeat(3,1fr);
        gap:30px
    }
    .pricing-grid {
        gap:14px
    }
    .price-card {
        padding:24px 18px
    }
    .allowances {
        font-size:16px
    }
    .commission {
        min-height:52px
    }
    .price {
        font-size:46px
    }
    .footer-content {
        grid-template-columns:1fr
    }
    .footer nav {
        padding-top:20px;
        max-width:400px
    }
    .footer-logo {
        margin-bottom:40px
    }
    .testimonial {
        padding:32px
    }
    .testimonial h2.slab {
        font-size:30px
    }
}
@media(max-width:600px) {
    body {
        font-size:17px
    }
    .container {
        width:calc(100% - 36px)
    }
    h2,h2.slab {
        font-size:30px;
        letter-spacing:-.5px
    }
    .hero-wrap {
        padding-top:14px
    }
    .header {
        min-height:72px;
        padding:12px 18px;
        border-radius:14px
    }
    .logo {
        width:125px;
        height:36px
    }
    .desktop-nav {
        display:none
    }
    .menu-toggle {
        width:40px;
        height:40px;
        border:1px solid #607657;
        border-radius:8px;
        background:transparent;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        color:#fff
    }
    .menu-toggle span {
        width:20px;
        height:2px;
        background:currentColor
    }
    .mobile-nav:not([hidden]) {
        display:flex;
        flex-direction:column;
        position:absolute;
        left:0;
        right:0;
        top:calc(100% + 8px);
        background:var(--forest);
        border-radius:14px;
        padding:16px 24px;
        z-index:5;
        box-shadow:0 10px 20px #132a1333
    }
    .mobile-nav a {
        padding:10px 0;
        text-decoration:none
    }
    .hero {
        padding:42px 0 48px
    }
    .hero h1 {
        font-size:clamp(27px,6.8vw,40px);
        line-height:1.3;
        letter-spacing:-.5px
    }
    .underline:after {
        height:12px;
        border-top-width:4px;
        bottom:-12px;
        right:-3px
    }
    .hero>p:not(.caption) {
        font-size:18px;
        margin:28px 8px 24px
    }
    .desktop-break {
        display:none
    }
    .actions {
        gap:16px;
        flex-wrap:wrap
    }
    .button {
        font-size:15px;
        padding:14px 18px;
        min-height:50px
    }
    .text-link {
        font-size:15px
    }
    .text-link span {
        margin-left:10px
    }
    .hero .dashboard {
        margin:34px 0 0;
        padding:10px 6px 6px;
        border-radius:12px;
        box-shadow:0 16px 24px #132a1322
    }
    .window-dots {
        height:22px;
        padding-left:8px
    }
    .window-dots i {
        height:7px;
        width:7px
    }
    .dashboard img {
        border-radius:6px
    }
    .hero .caption {
        font-size:12px;
        margin-top:16px
    }
    .spotlight {
        grid-template-columns:1fr;
        gap:32px;
        padding-block:48px
    }
    .eyebrow {
        font-size:12px;
        margin-bottom:20px
    }
    .spotlight .eyebrow {
        margin-bottom:18px
    }
    .steps {
        padding:48px 0 80px
    }
    .steps h2 {
        font-size:27px
    }
    .mode-tabs {
        margin:28px 0
    }
    .mode-tabs button {
        min-width:116px
    }
    .step-grid {
        gap:12px;
        margin-bottom:28px
    }
    .step {
        padding:20px 16px;
        min-height:220px;
        border-radius:16px
    }
    .step-number {
        font-size:30px
    }
    .step h3 {
        font-size:18px;
        margin:20px 0 16px;
        line-height:1.3
    }
    .step p {
        font-size:16px
    }
    .why {
        padding-bottom:56px
    }
    .why h2 {
        font-size:28px
    }
    .solutions {
        grid-template-columns:1fr;
        padding:20px;
        gap:24px;
        border-radius:20px
    }
    .accordion summary {
        font-size:16px;
        padding-left:25px
    }
    .solution-body {
        font-size:16px
    }
    .platform-placeholder {
        min-height:260px;
        padding:24px;
        border-radius:16px
    }
    .platform-placeholder strong {
        font-size:16px
    }
    .features {
        padding-bottom:72px
    }
    .features>.eyebrow {
        margin-bottom:24px
    }
    .features>h2 {
        margin-bottom:28px
    }
    .feature-grid {
        grid-template-columns:1fr;
        gap:18px
    }
    .feature-column {
        gap:18px
    }
    .feature-card {
        padding:24px 20px;
        border-radius:20px
    }
    .feature-card h3 {
        font-size:21px;
        margin-bottom:24px
    }
    .feature-card dd {
        font-size:17px
    }
    .testimonial {
        grid-template-columns:1fr;
        gap:32px;
        padding:28px;
        margin-bottom:48px
    }
    .testimonial h2.slab {
        font-size:30px
    }
    .testimonial blockquote p {
        margin-top:20px;
        font-size:20px
    }
    .testimonial cite {
        font-size:16px
    }
    .payments {
        padding:56px 0
    }
    .payments-heading h2 {
        font-size:30px
    }
    .payments-heading>div>p:last-child {
        font-size:18px
    }
    .stats {
        padding:24px 12px;
        margin-top:8px
    }
    .stats strong {
        font-size:40px;
        gap:8px
    }
    .stats strong span {
        font-size:44px
    }
    .stats svg {
        width:34px;
        height:34px
    }
    .stats>div>span {
        font-size:16px
    }
    .payment-note {
        font-size:16px;
        margin:28px 0
    }
    .country-grid {
        grid-template-columns:repeat(2,1fr);
        gap:28px 16px
    }
    .country-grid h3 {
        font-size:15px
    }
    .country-grid li {
        font-size:15px;
        gap:6px
    }
    .country-grid li span {
        font-size:20px
    }
    .pricing {
        padding:56px 0
    }
    .section-heading .eyebrow {
        margin-bottom:24px
    }
    .section-heading>p:last-child {
        font-size:18px;
        margin-top:24px
    }
    .pricing-grid {
        grid-template-columns:1fr;
        gap:20px
    }
    .price-card {
        padding:28px 24px 32px
    }
    .price {
        font-size:54px
    }
    .commission {
        min-height:0
    }
    .allowances {
        font-size:17px
    }
    .enterprise {
        margin-block:48px;
        padding:28px;
        grid-template-columns:1fr;
        gap:28px
    }
    .enterprise p {
        font-size:18px
    }
    .footer {
        padding:40px 0 28px
    }
    .footer-logo {
        margin-bottom:40px
    }
    .footer h2 {
        font-size:30px
    }
    .footer-content>div>p:not(.eyebrow) {
        font-size:18px
    }
    .footer .actions {
        align-items:flex-start
    }
    .footer nav a {
        font-size:20px
    }
    .footer-bottom {
        flex-direction:column;
        gap:12px;
        font-size:15px;
        margin-top:32px;
        padding-top:24px
    }
    .footer-bottom span:last-child {
        font-size:13px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important
    }
}

h2:not(.slab), .feature-card h3, .desktop-nav a {
    font-family: Inter, Arial, sans-serif;
}
@media (min-width: 1200px) {
    .hero h1 {
        transform: scaleX(1.1);
    }
}

.products-dropdown { position:relative; }
.products-dropdown>summary { list-style:none; cursor:pointer; font:500 16px Inter,Arial,sans-serif; }
.products-dropdown>summary::-webkit-details-marker,.mobile-products>summary::-webkit-details-marker { display:none; }
.products-dropdown-panel { position:absolute; top:calc(100% + 22px); left:-20px; width:280px; padding:10px; background:var(--forest); border:1px solid #48633e; border-radius:12px; box-shadow:0 14px 30px #132a1333; z-index:20; }
.products-dropdown-panel a { display:block; padding:12px; border-radius:6px; }
.products-dropdown-panel a:hover { background:var(--green); }
.mobile-products>summary { list-style:none; cursor:pointer; padding:10px 0; }
.mobile-products>a { font-size:15px; padding-left:16px!important; color:var(--lime); }

@media(max-width:600px) {
    .mobile-nav:not([hidden]) { max-height:calc(100dvh - 108px); overflow-y:auto; overscroll-behavior:contain; }
}

.products-dropdown-panel { max-height:calc(100dvh - 160px); overflow-y:auto; overscroll-behavior:contain; }

.products-dropdown>summary,
.mobile-products>summary {
    display:flex;
    align-items:center;
    gap:9px;
}
.products-dropdown>summary::after,
.mobile-products>summary::after {
    content:'';
    width:7px;
    height:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    margin-top:-4px;
    transition:transform .15s ease;
}
.products-dropdown[open]>summary::after,
.mobile-products[open]>summary::after {
    transform:rotate(225deg);
    margin-top:4px;
}
.products-dropdown[open]::after {
    content:'';
    position:absolute;
    top:100%;
    left:-20px;
    width:280px;
    height:23px;
}
.products-dropdown>summary:hover,
.products-dropdown[open]>summary {
    color:var(--lime);
}