/* Kondomino: variabili, base, componenti, pagine, responsive. */
@font-face {
    font-family:Parkinsans;
    src:url(parkinsans.woff2) format('woff2');
    font-style:normal;
    font-weight:300 800;
    font-display:swap
}

:root {
    --navy:#0c1929;
    --green:#08d65c;
    --ink:#344052;
    --muted:#657080;
    --line:#dce2e7;
    --radius:24px;
    --page:1280px;
    --narrow:1160px
}

*,*::before,*::after {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:24px
}

body {
    margin:0;
    color:var(--ink);
    background:#fff;
    font:300 clamp(16px,1.1vw,18px)/1.5 Parkinsans,sans-serif
}

img {
    display:block;
    max-width:100%;
    height:auto
}

a {
    color:inherit;
    text-decoration:none
}

button,input,textarea {
    font:inherit
}

button,a,input,textarea,summary {
    -webkit-tap-highlight-color:transparent
}

button,summary {
    cursor:pointer
}

button {
    border:0
}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible {
    outline:3px solid var(--green);
    outline-offset:5px
}

h1,h2,h3,p {
    margin:0
}

h1,h2,h3 {
    font-weight:300;
    line-height:1.15;
    letter-spacing:-.045em
}

h1 {
    font-size:clamp(38px,3.24vw,52px)
}

h2 {
    font-size:clamp(30px,2.97vw,48px)
}

h3 {
    font-size:clamp(22px,1.9vw,32px)
}

strong {
    font-weight:600
}

p+p {
    margin-top:1em
}

.wrap {
    width:min(var(--page),86%);
    margin-inline:auto
}

.narrow {
    width:min(var(--narrow),78%);
    margin-inline:auto
}

.dark {
    background-color:var(--navy);
    color:#e5e8ee
}

.dot,.green {
    color:var(--green)
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    min-height:44px;
    padding:.55em 1.8em;
    border:1px solid var(--green);
    border-radius:99px;
    background:var(--green);
    color:var(--navy);
    font-size:15px;
    line-height:1.5;
    font-weight:400;
    transition:background .18s,transform .18s
}

.button:hover {
    background:#31e47b;
    transform:translateY(-1px)
}

.button-outline {
    background:transparent;
    color:inherit
}

.button-outline:hover {
    color:var(--navy)
}

.sr-only,.skip-link:not(:focus) {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

.skip-link:focus {
    position:absolute;
    top:15px;
    left:15px;
    padding:12px 20px;
    background:#fff;
    color:var(--navy);
    z-index:100
}

/* Intestazione */
.site-header {
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px max(7%,calc((100% - var(--page))/2));
    gap:32px;
    color:#e5e8ee
}

.brand {
    flex:0 0 220px;
    max-width:30%
}

.brand img {
    width:100%
}

.site-header nav {
    display:flex;
    align-items:center;
    gap:clamp(13px,1.5vw,24px);
    font-size:14px;
    white-space:nowrap
}

.site-header nav>a:hover,.site-header [aria-current] {
    color:#fff
}

.site-header [aria-current] {
    font-weight:600
}

.nav-subscribe {
    border:1px solid var(--green);
    border-radius:99px;
    padding:.05em 1.4em
}

.site-header .nav-subscribe[aria-current] {
    background:var(--green);
    color:var(--navy)
}

.nav-login {
    display:grid;
    place-items:center
}

.menu-toggle {
    display:none
}

/* Prima schermata e presentazione */
.home-hero {
    background-image:url(images/sfondo.webp);
    background-size:cover;
    background-position:center
}

.home-hero {
    min-height:clamp(540px,46vw,760px);
    padding-top:clamp(170px,15.5vw,250px)
}

.hero-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start
}

.hero-subtitle {
    font-size:clamp(18px,1.65vw,28px);
    margin-top:.25em
}

.hero-small {
    font-size:clamp(13px,0.95vw,15px);
    margin-top:clamp(50px,4.1vw,80px);
    line-height:1.5
}

.hero-actions {
    padding:clamp(55px,4.7vw,90px) 0 0 15%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px
}

.intro-section {
    position:relative;
    min-height:clamp(620px,52vw,860px)
}

.intro-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    position:relative
}

.intro-logo {
    width:clamp(220px,20vw,310px);
    margin-bottom:clamp(55px,5vw,80px)
}

.intro-copy {
    padding-top:clamp(45px,4vw,78px)
}

.intro-copy h2 {
    margin-bottom:clamp(54px,5vw,96px)
}

.intro-copy p {
    font-size:clamp(15px,1.25vw,19px);
    line-height:1.4
}

.intro-copy .button {
    margin-top:30px
}

.intro-visual {
    position:relative;
    padding-top:min(30.8vw,450px);
    display:flex;
    flex-direction:column;
    align-items:center
}

.mascot {
    position:absolute;
    right:-2%;
    top:max(-14vw,-210px);
    width:90%;
    max-width:none
}

.intro-benefits {
    position:relative;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.25em 2em;
    padding:clamp(30px,3vw,58px) clamp(28px,2.6vw,50px) clamp(40px,3.5vw,68px);
    border-radius:16px;
    color:#d6dce4;
    background:var(--navy);
    font-size:clamp(14px,1.25vw,18px)
}

.intro-visual>.button {
    position:relative;
    margin-top:-24px
}

.checklist {
    list-style:none;
    margin:0
}

.checklist li {
    position:relative;
    padding-left:1.65em
}

.checklist li::before {
    content:'✓';
    position:absolute;
    left:0;
    color:var(--green);
    font-size:1.35em;
    line-height:1.15;
    font-weight:700
}

/* Servizi */
.services-section {
    text-align:center;
    padding:clamp(40px,4vw,78px) 0 clamp(70px,6vw,115px)
}

.services-section h2 {
    margin-bottom:clamp(52px,5.2vw,100px)
}

.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(20px,2vw,38px);
    margin-bottom:50px
}

.service-card {
    position:relative;
    overflow:hidden;
    aspect-ratio:471/588;
    border-radius:var(--radius);
    text-align:left;
    color:#fff;
    background:var(--navy)
}

.service-card>img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s
}

.service-card:hover>img {
    transform:scale(1.025)
}

.service-card>div {
    position:absolute;
    inset:auto 0 0;
    padding:clamp(20px,2vw,40px);
    min-height:36%;
    background:linear-gradient(0deg,rgba(12,25,41,.98),rgba(12,25,41,.86))
}

.service-card h3 {
    font-size:clamp(20px,1.71vw,30px);
    letter-spacing:-.04em
}

.service-card p {
    font-size:clamp(12px,0.9vw,18px);
    line-height:1.4;
    margin-top:1em
}

.mission-section {
    text-align:center;
    padding-top:clamp(60px,6vw,115px);
    overflow:hidden
}

.mission-section>h2 {
    margin-bottom:clamp(50px,5vw,96px)
}

.mission-scene {
    position:relative;
    max-width:1440px;
    margin:auto
}

.ally {
    width:100%
}

.mission-bubble {
    position:absolute;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    text-align:left;
    width:26%;
    min-height:60%;
    padding:14% 3.5% 10%;
    background:url(images/mission.webp) center/100% 100% no-repeat
}

.mission-bubble h3 {
    font-size:clamp(26px,3.06vw,53px);
    margin-bottom:1.3em
}

.mission-bubble p {
    font-size:clamp(12px,1.2vw,23px);
    line-height:1.35
}

.mission-bubble-left {
    left:7%;
    bottom:0
}

.mission-bubble-right {
    right:7%;
    top:22%;
    background-image:url(images/vision.webp)
}

/* Vantaggi con disclosure native */
.feature-section {
    position:relative;
    padding:clamp(64px,5.92vw,114px) 0;
    overflow:hidden
}

.feature-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8%;
    align-items:center
}

.feature-layout>div {
    position:relative
}

.feature-layout h2 {
    margin-bottom:clamp(56px,5.6vw,108px)
}

.feature-list details {
    margin-bottom:20px;
    color:#8c96a5
}

.feature-list summary {
    display:flex;
    align-items:center;
    gap:1em;
    list-style:none;
    font-size:clamp(18px,1.6vw,24px);
    min-height:44px
}

summary::-webkit-details-marker {
    display:none
}

.feature-list summary span {
    min-width:2em
}

.feature-list summary i {
    font-style:normal;
    width:24%;
    color:var(--green);
    opacity:0
}

.feature-list summary strong {
    font-size:clamp(17px,1.4vw,21px);
    font-weight:400;
    opacity:0
}

.feature-list details[open] {
    color:#e5e8ee
}

.feature-list details[open] summary i,.feature-list details[open] summary strong {
    opacity:1
}

.feature-list details p {
    margin:12px 0 20px 44%;
    max-width:500px;
    font-size:clamp(13px,1.1vw,18px);
    line-height:1.4
}

.feature-image {
    width:100%;
    max-height:850px;
    object-fit:contain
}

.feature-section[id] .feature-image {
    order:-1;
    object-fit:contain
}

.feature-section[id] .feature-layout h2 {
    font-size:clamp(32px,2.97vw,52px)
}

/* Bundle */
.pricing-section {
    text-align:center;
    padding:clamp(72px,5.92vw,114px) 0 clamp(85px,7vw,135px)
}

.pricing-section h2 {
    margin-bottom:20px
}

.section-lead {
    font-size:clamp(14px,1.2vw,18px)
}

.pricing-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(25px,2.2vw,42px);
    margin-top:clamp(50px,4.2vw,80px)
}

.plan {
    position:relative;
    text-align:left;
    background:#fff;
    color:var(--ink);
    border:1px solid #cdd3dc;
    border-radius:24px;
    padding:clamp(25px,2vw,40px);
    display:flex;
    flex-direction:column
}

.plan h3 {
    font-size:clamp(25px,1.62vw,30px);
    font-weight:500;
    margin-bottom:25px
}

.plan-limit {
    position:absolute;
    top:9%;
    right:7%;
    padding:.25em .75em;
    border:1px solid var(--green);
    border-radius:9px;
    font-size:clamp(9px,0.8vw,16px)
}

.plan-price {
    display:flex;
    align-items:baseline;
    gap:12px;
    white-space:nowrap;
    line-height:1
}

.plan-price strong {
    font-size:clamp(34px,2.52vw,44px);
    letter-spacing:-.05em
}

.plan-price small {
    font-size:clamp(11px,0.8vw,16px)
}

.plan-cancel {
    font-size:clamp(9px,0.65vw,13px);
    color:#9199a5;
    margin-top:8px
}

.plan .button {
    min-width:0;
    align-self:center;
    width:80%;
    margin:clamp(25px,2.2vw,42px) 0
}

.plan .checklist {
    padding:0;
    font-size:clamp(14px,1.3vw,20px);
    line-height:1.6
}

.plan-terms {
    font-size:clamp(8px,0.6vw,12px);
    line-height:1.4;
    color:#8b94a3;
    text-align:center;
    margin-top:auto;
    padding-top:40px
}

.preview-note {
    font-size:12px;
    color:#8794a4;
    margin-top:30px;
    line-height:1.5
}

/* Contatti e footer */
.contact-section {
    text-align:center;
    position:relative;
    padding:clamp(80px,6.4vw,123px) 7% clamp(140px,12vw,230px);
    background-image:url(images/sfondo.webp);
    background-size:cover;
    background-position:bottom
}

.contact-section>p {
    font-size:clamp(14px,1.2vw,18px);
    margin-top:24px
}

.down-arrow {
    display:grid;
    place-items:center;
    border:1px solid #8b95a4;
    color:#8b95a4;
    border-radius:50%;
    width:44px;
    height:44px;
    line-height:1;
    font-size:30px;
    margin:clamp(60px,5vw,96px) auto
}

.contact-form {
    max-width:690px;
    width:100%;
    margin:auto;
    display:grid;
    gap:14px;
    justify-items:center
}

.contact-form input:not([type=hidden]),.contact-form textarea {
    width:100%;
    color:#e5e8ee;
    background:transparent;
    border:1px solid #87919f;
    border-radius:99px;
    padding:.35em 1.1em;
    line-height:1.5;
    resize:vertical;
    min-height:42px
}

input::placeholder,textarea::placeholder {
    color:inherit;
    opacity:.85
}

.contact-form .button {
    margin-top:12px
}

.form-note {
    font-size:11px;
    color:#9ba6b7
}

.form-feedback {
    font-size:14px;
    line-height:1.4;
    margin-top:12px
}

.site-footer {
    position:relative;
    background:var(--navy);
    color:#d8dce4;
    padding:clamp(56px,5.6vw,107px) 0 45px;
    overflow:hidden
}

.site-footer::before,.site-footer::after {
    content:'';
    position:absolute;
    background:url(images/mascotte.webp) center/contain no-repeat;
    opacity:.035;
    width:35%;
    height:90%;
    pointer-events:none
}

.site-footer::before {
    left:-10%;
    bottom:-55%;
    transform:rotate(90deg)
}

.site-footer::after {
    right:-20%;
    top:-60%
}

.footer-brand {
    display:block;
    width:clamp(230px,20vw,300px);
    margin:auto auto clamp(55px,6vw,90px)
}

.footer-columns {
    display:grid;
    grid-template-columns:1fr 1.65fr 1fr;
    gap:10%;
    font-size:clamp(13px,1.1vw,16px);
    line-height:1.6
}

.footer-columns h2 {
    font-size:clamp(17px,1.5vw,29px);
    font-weight:500;
    letter-spacing:0;
    margin-bottom:45px
}

.footer-columns nav a,.footer-columns address a {
    display:block
}

.footer-columns address {
    font-style:normal;
    justify-self:end
}

.footer-columns .button {
    margin-top:30px;
    min-width:clamp(150px,13vw,250px)
}

.social-links {
    display:flex;
    gap:15px;
    font-size:27px;
    margin-top:25px
}

.legal-links {
    display:flex;
    justify-content:center;
    gap:clamp(20px,2.5vw,48px);
    margin-top:clamp(80px,6.4vw,123px);
    font-size:clamp(10px,0.9vw,17px);
    flex-wrap:wrap
}

/* Pagine interne pubbliche */
.page-hero {
    padding-top:105px
}

.page-banner {
    width:100%;
    height:clamp(180px,18vw,290px);
    object-fit:cover;
    object-position:center 45%
}

.page-hero-copy {
    text-align:center;
    min-height:clamp(220px,18vw,300px);
    padding-block:clamp(40px,2.8vw,54px)
}

.page-hero h1 {
    font-size:clamp(38px,3.6vw,64px)
}

.page-hero p {
    font-size:clamp(16px,1.5vw,29px);
    margin-top:18px
}

.page-hero .down-arrow {
    margin:35px auto 0;
    width:35px;
    height:35px;
    font-size:25px
}

.services-intro {
    padding-block:clamp(72px,8vw,154px);
    min-height:clamp(420px,42vw,680px);
    display:flex;
    align-items:center
}

.services-intro>.wrap {
    display:grid;
    grid-template-columns:.65fr 1.25fr 1.4fr;
    gap:4%;
    align-items:center
}

.services-intro img {
    width:100%
}

.services-intro h2 {
    font-size:clamp(28px,3.06vw,53px)
}

.services-intro p {
    font-size:clamp(16px,1.4vw,20px)
}

.service-detail {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
    scroll-margin-top:20px
}

.service-detail>div {
    padding:clamp(50px,7vw,134px);
    align-self:center
}

.service-detail:nth-child(odd)>img {
    order:2
}

.service-detail>img {
    width:100%;
    height:clamp(420px,42vw,680px);
    object-fit:cover
}

.service-detail:first-child>img {
    object-position:top
}

.service-detail h2 {
    font-size:clamp(32px,2.88vw,51px);
    margin-bottom:45px
}

.service-detail p {
    font-size:clamp(15px,1.35vw,20px);
    line-height:1.5
}

.service-detail .button {
    margin-top:40px
}

.audience-section {
    display:grid;
    grid-template-columns:1fr 1fr
}

.audience-copy {
    padding:clamp(45px,5vw,96px) 13%
}

.audience-copy>h2 {
    margin-bottom:55px;
    font-size:clamp(30px,3.15vw,55px)
}

.audience-grid {
    display:grid;
    gap:35px
}

.audience-grid article {
    display:grid;
    grid-template-columns:65px 1fr;
    gap:0 25px
}

.audience-grid img {
    grid-row:1/3;
    width:65px
}

.audience-grid h3 {
    font-size:clamp(20px,1.62vw,29px);
    margin-bottom:15px
}

.audience-grid p {
    font-size:clamp(12px,1vw,18px)
}

.audience-photo {
    width:100%;
    height:100%;
    object-fit:cover
}

.payment-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6%
}

.payment-grid h3 {
    margin-bottom:25px
}

.payment-grid p {
    font-size:clamp(14px,1.2vw,18px)
}

.comparison-section {
    text-align:center;
    padding-block:clamp(80px,8vw,154px);
    background:var(--navy);
    color:#e5e8ee;
    width:100%
}

.comparison-section>p,.payment-section>p {
    margin-top:20px
}

.table-scroll {
    overflow-x:auto;
    margin:80px auto 0;
    width:min(var(--narrow),78%);
    border-radius:24px;
    padding:30px;
    background:#fff;
    color:var(--ink)
}

table {
    width:100%;
    border-collapse:collapse;
    text-align:center;
    font-size:clamp(13px,1.1vw,17px)
}

th,td {
    padding:24px 20px;
    border-bottom:1px solid var(--line)
}

thead th {
    font-size:clamp(20px,1.8vw,31px);
    font-weight:600
}

thead small {
    display:block;
    font-size:14px;
    font-weight:300;
    margin-top:15px
}

th:first-child {
    text-align:left;
    min-width:240px;
    font-weight:400
}

.included {
    color:var(--green);
    font-size:30px;
    font-weight:600
}

.excluded {
    color:#b4bdc8;
    font-size:25px
}

.payment-section {
    padding:0 11% clamp(100px,10vw,192px);
    text-align:center;
    background:var(--navy);
    color:#e5e8ee;
    width:100%
}

.payment-grid {
    margin-top:80px;
    text-align:left
}

.payment-grid img {
    height:85px;
    width:auto;
    object-fit:contain;
    margin-bottom:40px
}

.faq-section {
    padding-block:clamp(80px,7.2vw,138px)
}

.faq-section>h2 {
    text-align:center;
    margin-bottom:80px
}

.faq-grid {
    columns:3;
    column-gap:6%
}

.faq-grid details {
    break-inside:avoid;
    margin-bottom:22px;
    border-bottom:1px solid var(--line);
    padding:0 0 22px
}

.faq-grid summary {
    list-style:none;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:clamp(18px,1.55vw,24px);
    line-height:1.25;
    font-weight:400;
    min-height:54px
}

.faq-grid summary span {
    color:var(--green);
    font-size:35px;
    flex:none
}

.faq-grid details[open] summary span {
    transform:rotate(45deg)
}

.faq-grid p {
    font-size:clamp(15px,1.25vw,19px);
    margin-top:28px;
    line-height:1.5
}

.contact-details {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch
}

.contact-copy {
    padding:clamp(50px,5vw,96px) 13%
}

.contact-details h2 {
    font-size:clamp(32px,3.15vw,55px);
    margin-bottom:70px
}

.contact-details h3 {
    font-size:clamp(24px,2.07vw,36px);
    margin-bottom:20px
}

.contact-details address {
    font-style:normal
}

.contact-details dl {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:18px 25px;
    font-size:clamp(12px,1.2vw,18px)
}

.contact-photo {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
}

dd {
    margin:0
}

.newsletter-section {
    padding:0 0 45px
}

.newsletter-section p {
    font-size:clamp(13px,1.15vw,18px);
    max-width:500px
}

.newsletter-form {
    margin-top:35px
}

.newsletter-form input {
    width:100%;
    border:1px solid var(--ink);
    border-radius:99px;
    padding:10px 20px;
    color:var(--ink)
}

.newsletter-form .button {
    margin-top:22px
}

.newsletter-form small {
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-top:12px
}

.legal-page {
    padding-top:250px;
    padding-bottom:120px;
    min-height:65vh
}

.legal-page h1 {
    color:var(--navy);
    margin-bottom:50px
}

.legal-page h2 {
    font-size:30px;
    margin:40px 0 20px
}

.legal-page p,.legal-page ul {
    font-size:17px;
    line-height:1.8
}

body:not(.home):has(.legal-page) .site-header {
    background:var(--navy)
}

/* Accesso pubblico: disclosure HTML nativa, senza dipendenze JavaScript. */
.login-section {
    display:grid;
    place-items:center;
    min-height:max(640px,100svh);
    padding:150px 24px 90px;
    text-align:center;
    background:var(--navy) url(images/sfondo.webp) center/cover no-repeat
}

.login-panel {
    width:min(100%,340px)
}

.login-logo {
    width:100%;
    margin-bottom:34px
}

.login-disclosure summary,.login-register {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:46px;
    border:1px solid var(--green);
    border-radius:99px;
    font-size:16px;
    font-weight:400;
    line-height:1.4;
    list-style:none
}

.login-disclosure summary {
    background:var(--green);
    color:var(--navy)
}

.login-disclosure[open] summary {
    background:transparent;
    color:inherit
}

.login-register {
    margin-top:20px
}

.kdm-login-form {
    display:grid;
    gap:10px;
    padding:28px 16px 8px;
    font-size:15px
}

.kdm-login-form input:not([type=checkbox]):not([type=hidden]) {
    width:100%;
    min-height:42px;
    padding:9px 16px;
    border:1px solid #b8c4d4;
    border-radius:99px;
    background:#edf2fc;
    color:var(--navy);
    font-size:16px
}

.login-remember {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:32px
}

.login-remember input {
    width:16px;
    height:16px;
    accent-color:var(--green)
}

.kdm-login-form .button {
    min-height:44px;
    margin-top:4px
}

.login-recovery {
    padding:6px 0;
    font-size:13px;
    text-decoration:underline;
    text-underline-offset:3px
}

@media(max-width:1000px) {
    .login-section {
        min-height:max(600px,100svh);
        padding:130px 24px 65px
    }

    .login-panel {
        width:min(100%,320px)
    }
}

/* Layout adattivi: stessi contenuti, struttura compatta senza duplicazioni. */
@media(max-width:1100px) {
    .site-header nav {
        gap:15px;
        font-size:13px
    }

    .brand {
        flex-basis:200px
    }

    .narrow {
        width:86%
    }

    .intro-benefits {
        gap:10px;
        padding:25px 22px 40px
    }

    .plan {
        padding:24px
    }

    .plan-limit {
        font-size:9px
    }

    .plan h3 {
        margin-bottom:30px
    }

    .plan-price {
        gap:6px
    }

    .mission-bubble {
        width:28%;
        padding-inline:3%
    }

    .mission-bubble p {
        font-size:12px
    }

    .footer-columns {
        gap:5%
    }

}

@media(max-width:1000px) {
    body {
        font-size:16px
    }

    h1 {
        font-size:38px
    }

    h2 {
        font-size:31px
    }

    h3 {
        font-size:25px
    }

    .wrap,.narrow {
        width:86%
    }

    .button {
        min-height:44px;
        min-width:150px;
        padding:7px 24px;
        font-size:14px
    }

    .site-header {
        padding:25px 7%;
        align-items:center
    }

    .brand {
        flex-basis:auto;
        width:200px;
        max-width:70%
    }

    .menu-toggle {
        display:grid;
        min-width:44px;
        min-height:44px;
        align-content:center;
        gap:5px;
        background:none;
        padding:8px;
        color:#fff
    }

    .menu-toggle>span:not(.sr-only) {
        display:block;
        width:24px;
        height:2px;
        background:currentColor
    }

    .site-header nav {
        display:none;
        position:absolute;
        top:85px;
        left:5%;
        width:90%;
        background:var(--navy);
        padding:25px;
        border:1px solid #24354a;
        border-radius:18px;
        box-shadow:0 12px 30px #0004;
        font-size:16px;
        white-space:normal
    }

    .site-header nav.is-open {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0
    }

    .site-header nav a {
        padding:12px
    }

    .nav-subscribe {
        text-align:center;
        margin-top:10px
    }

    .nav-login {
        align-self:center
    }

    .home-hero {
        min-height:580px;
        padding-top:145px;
        background-position:center bottom
    }

    .hero-layout {
        display:block
    }

    .hero-subtitle {
        font-size:19px;
        max-width:280px;
        margin-top:15px
    }

    .hero-small {
        font-size:12px;
        margin-top:35px
    }

    .hero-actions {
        padding:30px 0 0;
        gap:12px
    }

    .hero-actions .button {
        width:165px
    }

    .intro-section {
        min-height:0
    }

    .intro-layout {
        grid-template-columns:1fr
    }

    .intro-copy {
        padding-top:55px
    }

    .intro-logo {
        width:240px;
        margin-bottom:65px
    }

    .intro-copy h2 {
        margin-bottom:35px
    }

    .intro-copy p {
        font-size:16px
    }

    .intro-copy .button {
        margin-top:25px
    }

    .intro-visual {
        padding-top:380px;
        margin:50px 0 30px;
        max-width:440px;
        width:100%;
        justify-self:center
    }

    .mascot {
        top:0;
        right:10%;
        width:80%;
        height:380px;
        object-fit:contain
    }

    .intro-benefits {
        padding:24px 24px 45px;
        font-size:13px;
        gap:12px
    }

    .intro-visual>.button {
        margin-top:-20px
    }

    .services-section {
        padding:70px 0
    }

    .services-section h2 {
        width:90%;
        margin:0 auto 45px
    }

    .service-grid {
        grid-template-columns:repeat(2,1fr);
        gap:15px;
        margin-bottom:35px
    }

    .service-card {
        border-radius:14px
    }

    .service-card>div {
        padding:14px;
        min-height:45%
    }

    .service-card h3 {
        font-size:17px
    }

    .service-card p {
        font-size:11px;
        margin-top:12px
    }

    .service-card strong {
        font-weight:500
    }

    .mission-section {
        padding-top:30px
    }

    .mission-section>h2 {
        margin-bottom:40px
    }

    .mission-scene {
        padding-bottom:270px;
        background:var(--green)
    }

    .ally {
        min-height:330px;
        object-fit:cover;
        object-position:center
    }

    .mission-bubble {
        width:43%;
        min-height:250px;
        max-height:275px;
        padding:65px 6% 50px;
        justify-content:center
    }

    .mission-bubble-left {
        left:5%;
        bottom:10px
    }

    .mission-bubble-right {
        right:5%;
        top:auto;
        bottom:10px
    }

    .mission-bubble h3 {
        font-size:25px;
        margin-bottom:18px
    }

    .mission-bubble p {
        font-size:11px
    }

    .feature-section {
        padding:70px 0
    }

    .feature-layout {
        grid-template-columns:1fr;
        gap:35px
    }

    .feature-layout h2 {
        margin-bottom:35px
    }

    .feature-list summary {
        font-size:21px;
        gap:15px
    }

    .feature-list summary i {
        width:18%
    }

    .feature-list summary strong {
        font-size:17px
    }

    .feature-list details p {
        font-size:14px;
        margin-left:35%;
        margin-bottom:30px
    }

    .feature-image {
        width:65%;
        margin:auto;
        max-height:390px
    }

    .pricing-section {
        padding:65px 0
    }

    .pricing-section h2 {
        width:90%;
        margin-inline:auto
    }

    .section-lead {
        font-size:13px
    }

    .pricing-grid {
        grid-template-columns:1fr;
        gap:24px;
        max-width:430px;
        margin-top:40px
    }

    .plan {
        border-radius:20px;
        padding:30px
    }

    .plan h3 {
        font-size:27px;
        margin-bottom:25px
    }

    .plan-limit {
        font-size:12px;
        top:30px;
        right:30px
    }

    .plan-price strong {
        font-size:42px
    }

    .plan-price small {
        font-size:13px
    }

    .plan-cancel {
        font-size:10px
    }

    .plan .button {
        margin:25px auto
    }

    .plan .checklist {
        font-size:17px
    }

    .plan-terms {
        font-size:10px;
        padding-top:25px
    }

    .preview-note {
        padding-inline:15px
    }

    .contact-section {
        padding:75px 7% 80px
    }

    .contact-section h2 {
        font-size:32px
    }

    .contact-section>p {
        font-size:14px
    }

    .down-arrow {
        width:34px;
        height:34px;
        font-size:24px;
        margin:40px auto
    }

    .contact-form {
        gap:12px
    }

    .contact-form input:not([type=hidden]),.contact-form textarea {
        font-size:15px;
        min-height:40px
    }

    .form-note {
        font-size:10px
    }

    .site-footer {
        padding:55px 0 30px
    }

    .footer-brand {
        width:230px;
        margin-bottom:60px
    }

    .footer-columns {
        grid-template-columns:1fr 1fr;
        gap:45px 30px;
        font-size:13px
    }

    .footer-columns h2 {
        font-size:17px;
        margin-bottom:20px
    }

    .footer-columns>section {
        grid-column:2;
        grid-row:1/3
    }

    .footer-columns address {
        grid-column:1;
        justify-self:start
    }

    .footer-columns .button {
        min-width:120px;
        font-size:13px;
        padding-inline:20px
    }

    .social-links {
        font-size:22px;
        margin-top:15px
    }

    .legal-links {
        gap:14px;
        font-size:10px;
        margin:65px 7% 0
    }

    .page-hero {
        min-height:0;
        padding:100px 0 0
    }

    .page-banner {
        height:190px
    }

    .page-hero-copy {
        padding:40px 0;
        min-height:290px
    }

    .page-hero h1 {
        font-size:37px
    }

    .page-hero p {
        font-size:18px;
        margin-top:25px
    }

    .services-intro {
        padding-block:65px
    }

    .services-intro>.wrap {
        grid-template-columns:75px 1fr;
        gap:25px
    }

    .services-intro p {
        grid-column:1/-1
    }

    .services-intro h2 {
        margin-bottom:0
    }

    .services-intro h2 {
        font-size:28px;
        margin-bottom:30px
    }

    .services-intro p {
        font-size:16px
    }

    .service-detail {
        grid-template-columns:1fr;
        gap:0;
        padding:0
    }

    .service-detail>div {
        padding:40px 7% 55px
    }

    .service-detail:nth-child(odd)>img,.service-detail:nth-child(even)>img {
        order:0
    }

    .service-detail>img {
        aspect-ratio:1.4;
        min-height:0;
        height:270px;
        border-radius:0
    }

    .service-detail h2 {
        font-size:32px;
        margin-bottom:25px
    }

    .service-detail p {
        font-size:16px
    }

    .service-detail .button {
        margin-top:25px
    }

    .audience-section {
        grid-template-columns:1fr
    }

    .audience-copy {
        padding:55px 7%
    }

    .audience-copy>h2 {
        margin-bottom:45px
    }

    .audience-photo {
        max-height:400px
    }

    .audience-grid article {
        grid-template-columns:45px 1fr;
        gap:0 20px
    }

    .audience-grid img {
        width:45px
    }

    .audience-grid,.payment-grid {
        grid-template-columns:1fr;
        gap:45px
    }

    .audience-grid img {
        margin-bottom:25px
    }

    .audience-grid p,.payment-grid p {
        font-size:16px
    }

    .audience-grid h3,.payment-grid h3 {
        font-size:27px
    }

    .comparison-section {
        padding-block:65px
    }

    .comparison-section h2,.payment-section h2 {
        font-size:32px
    }

    .table-scroll {
        margin-top:40px;
        width:86%;
        padding:15px
    }

    table {
        min-width:670px
    }

    th,td {
        padding:18px 15px
    }

    thead th {
        font-size:23px
    }

    .payment-section {
        padding-bottom:70px
    }

    .payment-grid {
        margin-top:45px
    }

    .payment-grid article {
        display:grid;
        grid-template-columns:75px 1fr;
        gap:0 25px
    }

    .payment-grid img {
        grid-row:1/3;
        height:65px;
        width:70px;
        margin:0
    }

    .payment-grid h3 {
        margin-bottom:15px
    }

    .faq-section {
        padding-block:65px
    }

    .faq-section>h2 {
        margin-bottom:45px
    }

    .faq-grid {
        columns:1
    }

    .faq-grid summary {
        font-size:21px
    }

    .faq-grid p {
        font-size:16px
    }

    .contact-details {
        grid-template-columns:1fr
    }

    .contact-copy {
        padding:55px 7%
    }

    .contact-photo {
        max-height:450px
    }

    .contact-details h2 {
        margin-bottom:40px
    }

    .contact-details h3 {
        font-size:27px
    }

    .newsletter-section {
        padding:0 0 40px
    }

    .contact-details article h3 {
        font-size:27px;
        margin-bottom:25px
    }

    .contact-details dl {
        font-size:16px;
        gap:20px
    }

    .newsletter-section p {
        font-size:16px
    }

    .legal-page {
        padding-top:155px
    }

    .legal-page h1 {
        font-size:37px
    }


}

@media(max-width:390px) {
    .service-grid {
        grid-template-columns:1fr;
        max-width:300px
    }

    .service-card h3 {
        font-size:25px
    }

    .service-card p {
        font-size:14px
    }

    .mission-bubble p {
        font-size:10px
    }

    .plan-limit {
        font-size:10px
    }

    .brand {
        width:180px
    }

    .footer-columns {
        gap:35px 20px
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    *,*::before,*::after {
        transition:none!important;
        animation:none!important
    }

}