@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Caveat:wght@500;600&family=Manrope:wght@500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&display=swap");

:root {
    --cream: #fbf6e4;
    --cream-strong: #efe8cf;
    --olive: #5f6f35;
    --olive-dark: #2f431f;
    --olive-soft: #dfe8d3;
    --orange: #cf5c22;
    --ink: #182018;
    --muted: #5d674d;
    --panel: #e3e3df;
    --field: #f3f8ee;
    --blue: #55add5;
    --danger: #cc1717;
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    background: var(--cream);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cream);
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 44px;
    border-bottom: 1px solid rgba(47, 67, 31, 0.18);
    background: rgba(251, 246, 228, 0.97);
    box-shadow: 0 2px 8px rgba(24, 32, 24, 0.12);
}

.site-name {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--olive);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.brand-notes {
    color: var(--orange);
}

.brand-tor {
    color: var(--olive);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--olive-dark);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-icon:hover,
.nav-icon:focus {
    color: var(--orange);
    background: rgba(95, 111, 53, 0.1);
    outline: none;
}

.nav-icon svg {
    width: 29px;
    height: 29px;
    stroke: currentColor;
}

main {
    width: min(1120px, calc(100% - 40px));
    flex: 1;
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 56px;
}

.site-footer {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: 28px 0 34px;
    border-top: 1px solid rgba(47, 67, 31, 0.18);
    color: var(--muted);
    font-size: 0.92rem;
}

.site-footer p {
    max-width: 760px;
    margin: 12px 0 0;
    line-height: 1.5;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-links a {
    color: var(--olive-dark);
    font-weight: 700;
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus {
    color: var(--orange);
    text-decoration: underline;
}

.page-heading {
    margin: 0;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.15;
}

.page-text {
    max-width: 720px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.eyebrow {
    width: fit-content;
    margin: 0 0 30px;
    padding: 14px 24px;
    border-radius: 8px;
    color: var(--olive-dark);
    background: #ceddbc;
    font-size: 1rem;
    font-weight: 700;
}

.home-hero {
    min-height: calc(100vh - 150px);
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.9fr);
    align-items: center;
    gap: 54px;
}

.hero-title {
    margin: 0;
    color: var(--olive);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.45rem;
    font-weight: 800;
    line-height: 1.03;
}

.hero-title span {
    color: #9db747;
}

.hero-title strong {
    color: var(--orange);
    font-style: normal;
}

.hero-text {
    max-width: 640px;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: 1.12rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 36px;
}

.campus-visual {
    min-height: 390px;
    display: grid;
    place-items: center;
    padding: 34px;
    border-radius: 8px;
    background: #e2eadc;
    box-shadow: 0 18px 42px rgba(95, 111, 53, 0.14);
}

.campus-frame {
    width: 100%;
    min-height: 280px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    border: 3px dashed rgba(95, 111, 53, 0.6);
    border-radius: 8px;
    color: var(--olive);
    text-align: center;
}

.campus-frame h2 {
    margin: 12px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 800;
}

.campus-frame p {
    margin: 0;
    color: #728044;
}

.campus-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: end center;
    overflow: hidden;
    border: 5px solid #d7864c;
    background: linear-gradient(#8ed1ff 0 44%, #92d66d 44% 66%, #37a748 66%);
}

.campus-icon span {
    width: 13px;
    height: 13px;
    display: block;
    margin-bottom: 34px;
    border-radius: 50%;
    background: #ffad23;
}

.page-intro {
    margin-bottom: 28px;
}

.legal-page {
    max-width: 900px;
}

.legal-updated {
    margin: 16px 0 0;
    color: var(--olive-dark);
    font-weight: 700;
}

.legal-sections,
.legal-summary {
    display: grid;
    gap: 18px;
    margin-top: 30px;
}

.legal-sections section,
.legal-summary {
    padding: 24px;
    border-radius: 8px;
    background: #e6ecd8;
}

.legal-sections h2,
.legal-summary h2 {
    margin: 0 0 10px;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.28rem;
}

.legal-sections p,
.legal-summary p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.legal-sections ul,
.legal-summary ul {
    margin: 10px 0 0;
    padding-left: 22px;
    color: var(--muted);
    line-height: 1.6;
}

.legal-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}

.search-board {
    display: grid;
    gap: 28px;
    padding: 28px;
    border-radius: 8px;
    background: var(--panel);
}

.search-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 16px;
}

.search-row label,
.auth-form label,
.profile-form label {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.search-row input,
.auth-form input,
.profile-form input,
.profile-form select,
.profile-form textarea {
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(47, 67, 31, 0.18);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    background: var(--field);
}

.search-row input:focus,
.auth-form input:focus,
.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus {
    border-color: var(--blue);
    outline: 3px solid rgba(85, 173, 213, 0.28);
}

.profile-form textarea {
    resize: vertical;
}

.note-grid,
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.note-card,
.info-grid article {
    min-height: 160px;
    padding: 22px;
    border-radius: 8px;
    background: var(--cream);
}

.note-card span,
.info-grid strong {
    color: var(--orange);
    font-weight: 800;
}

.note-card h2,
.info-grid h2,
.annunci-strip h2 {
    margin: 12px 0 10px;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 800;
}

.note-card p,
.info-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.info-grid article {
    background: #e6ecd8;
}

.info-section-title {
    margin: 30px 0 18px;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.7rem;
}

.button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.button-primary {
    color: #ffffff;
    background: var(--blue);
}

.button-primary:hover,
.button-primary:focus {
    background: #3f9ac4;
}

.button-secondary,
.button-cream {
    color: var(--olive-dark);
    background: var(--cream-strong);
}

.button-secondary:hover,
.button-secondary:focus,
.button-cream:hover,
.button-cream:focus {
    color: var(--orange);
    background: #e6ddbe;
}

.button-danger {
    color: #ffffff;
    background: var(--danger);
}

.button-google {
    width: 100%;
    color: var(--ink);
    background: #fee69a;
}

.profile-card {
    width: min(100%, 1020px);
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 32px;
    margin: 18px auto 36px;
    padding: 32px;
    border-radius: 8px;
    background: var(--panel);
}

.profile-avatar {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    background: var(--cream);
}

.profile-main {
    min-width: 0;
}

.profile-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 26px 0 0;
}

.profile-details-main {
    grid-template-columns: 1fr 1fr 1fr;
}

.profile-details dt {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.profile-details dd {
    height: 44px;
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    color: var(--ink);
    overflow: hidden;
    font-size: 0.88rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #d8c4c4;
}

.profile-field-bio {
    grid-column: 1 / -1;
}

.profile-field-bio dd {
    height: 82px;
    line-height: 1.35;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.profile-email {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.profile-privacy-note,
.form-help {
    margin: 14px 0 0;
    color: var(--olive-dark);
    font-size: 0.92rem;
    line-height: 1.5;
}

.form-help {
    margin: 4px 0;
}

.profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 28px;
}

.annunci-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
}

.add-button {
    min-width: 160px;
    min-height: 52px;
    border: 0;
    border-radius: 8px;
    color: var(--ink);
    background: var(--panel);
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
}

.profile-empty,
.message-panel {
    max-width: 760px;
    padding: 28px;
    border-radius: 8px;
    background: #e6ecd8;
}

.message-meta {
    margin: 20px 0 0;
    color: var(--olive-dark);
}

.message-actions {
    margin-top: 22px;
}

.message-help {
    max-width: 560px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.profile-modal-backdrop {
    z-index: 22;
}

.profile-modal {
    width: min(100%, 520px);
    max-height: calc(100vh - 120px);
    overflow: auto;
    padding: 30px;
    background: var(--olive-soft);
}

.profile-modal h2 {
    margin: 0 0 20px;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
}

.profile-form {
    display: grid;
    gap: 14px;
}

.avatar-picker {
    margin: 0;
    padding: 0;
    border: 0;
}

.avatar-picker legend {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.avatar-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.avatar-attribution {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.profile-modal .avatar-attribution a {
    color: #a84318;
    font-weight: 700;
}

.profile-modal .avatar-attribution a:hover,
.profile-modal .avatar-attribution a:focus {
    color: #7f3010;
}
.avatar-choice {
    position: relative;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid rgba(47, 67, 31, 0.18);
    border-radius: 8px;
    background: rgba(251, 246, 228, 0.72);
    cursor: pointer;
}

.profile-form .avatar-choice > .avatar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    min-height: 0;
    opacity: 0;
    pointer-events: none;
}

.profile-form .avatar-choice > .avatar-image {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cream);
}

.profile-form .avatar-choice > .avatar-input:checked + .avatar-image {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.profile-form .avatar-choice > .avatar-input:focus-visible + .avatar-image {
    outline: 3px solid rgba(85, 173, 213, 0.28);
    outline-offset: 3px;
}

.profile-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 86px 24px 24px;
    background: rgba(24, 32, 24, 0.28);
}

.auth-modal {
    position: relative;
    width: min(100%, 430px);
    padding: 32px;
    border-radius: 8px;
    color: var(--ink);
    background: var(--olive);
    box-shadow: 0 20px 50px rgba(24, 32, 24, 0.22);
}

.auth-modal h2 {
    margin: 0 0 20px;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    font-weight: 800;
}

.auth-panel {
    display: none;
}

.auth-panel.is-active {
    display: block;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.auth-form {
    display: grid;
    gap: 12px;
}

.auth-form .auth-consent {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
}

.auth-form .auth-consent input {
    width: 18px;
    min-height: 18px;
    height: 18px;
    margin: 1px 0 0;
    padding: 0;
    accent-color: var(--blue);
}

.auth-consent a {
    color: var(--orange);
    font-weight: 800;
}

.auth-consent a:hover,
.auth-consent a:focus {
    text-decoration: underline;
}

.legal-confirmation {
    margin: 0 auto;
}

.legal-confirmation-form {
    display: grid;
    gap: 20px;
    margin-top: 24px;
}

.legal-confirmation-form .auth-consent {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    color: var(--ink);
    line-height: 1.5;
}

.legal-confirmation-form .auth-consent input {
    width: 18px;
    min-height: 18px;
    height: 18px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--blue);
}

.legal-confirmation-form .auth-consent a {
    color: var(--olive-dark);
}

.auth-submit {
    width: min(100%, 210px);
    margin: 12px auto 0;
}

.auth-link-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
}

.auth-link-row a {
    color: var(--orange);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.auth-link-row a:hover,
.auth-link-row a:focus {
    text-decoration: underline;
}

.auth-secondary-action {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    height: 2px;
    flex: 1;
    background: rgba(24, 32, 24, 0.65);
}

.auth-switch {
    margin: 16px 0 0;
    color: #ffffff;
    text-align: center;
}

.auth-switch a {
    color: var(--orange);
    font-weight: 800;
}

.form-error {
    margin: 0 0 16px;
    padding: 12px;
    border-radius: 8px;
    color: var(--ink);
    background: #ffe2dc;
}

.form-success {
    margin: 16px 0 0;
    padding: 12px;
    border-radius: 8px;
    color: var(--olive-dark);
    background: #d7ead0;
}

.is-hidden {
    display: none;
}

@media (max-width: 1000px) {
    .home-hero {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .campus-visual {
        min-height: 340px;
    }

    .note-grid,
    .info-grid {
        grid-template-columns: 1fr;
    }

    .profile-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .navbar {
        min-height: 66px;
        padding: 0 16px;
    }

    .site-name {
        gap: 6px;
        font-size: 1.35rem;
    }

    .nav-actions {
        gap: 6px;
    }

    .nav-icon {
        width: 36px;
        height: 34px;
    }

    .nav-icon svg {
        width: 24px;
        height: 24px;
    }

    main {
        width: min(100% - 28px, 1120px);
        padding-top: 94px;
    }

    .eyebrow {
        margin-bottom: 22px;
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    .page-heading {
        font-size: 1.95rem;
    }

    .page-text {
        font-size: 1rem;
    }

    .hero-title {
        font-size: 3.1rem;
    }

    .hero-text {
        font-size: 1rem;
    }

    .button {
        width: 100%;
    }

    .campus-visual,
    .search-board,
    .profile-card,
    .profile-empty,
    .message-panel {
        padding: 22px;
    }

    .search-row,
    .profile-details,
    .profile-details-main {
        grid-template-columns: 1fr;
    }

    .profile-actions,
    .annunci-strip,
    .profile-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .add-button {
        width: 100%;
        min-width: 0;
    }

    .auth-modal {
        padding: 28px 22px;
    }

    .profile-modal {
        padding: 24px 20px;
    }
}

@media (max-width: 480px) {
    .brand-logo-full { display: none; }
    .brand-logo-symbol { display: block; }
    .nav-icon { width: 40px; height: 40px; }
    .nav-icon svg { width: 21px; height: 21px; }
}
/* Hamburger Menu Drawer */
.hamburger-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
    transition: opacity 0.3s ease;
}

.hamburger-backdrop.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.hamburger-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background-color: var(--cream);
    z-index: 101;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.hamburger-drawer.is-open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    border-bottom: 1px solid rgba(47, 67, 31, 0.1);
}

.drawer-close {
    background: none;
    border: none;
    color: var(--olive-dark);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.drawer-close:hover {
    background-color: rgba(95, 111, 53, 0.1);
    color: var(--orange);
}

.drawer-auth {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(47, 67, 31, 0.1);
}

.drawer-auth form {
    margin: 0;
}

.drawer-auth-btn {
    width: 100%;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.drawer-link {
    padding: 16px 24px;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    transition: background-color 0.2s, color 0.2s;
}

.drawer-link:hover:not(.disabled) {
    background-color: rgba(95, 111, 53, 0.05);
    color: var(--orange);
}

.drawer-link.disabled {
    color: var(--muted);
    opacity: 0.6;
    cursor: not-allowed;
}

.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
}

/* Toast Notification Styles */
.toast-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--ink);
    color: var(--cream);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(24, 32, 24, 0.2);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    pointer-events: none;
}

.toast-notification.toast-show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
/* ShareVergata design system */
:root {
    --cream: #fff4e6;
    --cream-strong: #f6e8d5;
    --olive: #a0c49d;
    --olive-dark: #1b3012;
    --olive-soft: #e4f0e2;
    --orange: #ff8a4d;
    --orange-dark: #df6830;
    --ink: #0d1912;
    --muted: #526052;
    --panel: #f8eddf;
    --field: #fffaf4;
    --blue: #bcdbf0;
    --blue-dark: #244f68;
    --danger: #b93838;
    --white: #fff;
    --border: rgba(27, 48, 18, 0.16);
    --shadow-small: 0 2px 8px rgba(13, 25, 18, 0.08);
    --shadow-medium: 0 6px 18px rgba(13, 25, 18, 0.10);
    --shadow-floating: 0 10px 30px rgba(13, 25, 18, 0.12);
    --radius-small: 8px;
    --radius: 16px;
    --radius-nav: 24px;
    color: var(--ink);
    font-family: "Nunito Sans", Arial, sans-serif;
    background: var(--cream);
}

body { overflow-x: clip; background: var(--cream); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .button, label, .eyebrow, .drawer-link { font-family: "Manrope", Arial, sans-serif; letter-spacing: 0; }
a { color: var(--olive-dark); text-underline-offset: 3px; }
a:hover { color: var(--orange-dark); }

.navbar {
    top: 16px; left: 50%; width: min(calc(100% - 32px), 1180px); min-height: 72px;
    padding: 0 20px 0 24px; border: 1px solid rgba(27, 48, 18, 0.10); border-radius: var(--radius-nav);
    background: rgba(255, 250, 244, 0.96); box-shadow: var(--shadow-floating);
    transform: translateX(-50%); backdrop-filter: blur(14px);
}
.site-name { align-items: center; gap: 0; }
.brand-logo { display: block; width: auto; }
.brand-logo-full { height: 54px; }
.brand-logo-symbol { display: none; height: 38px; }
.nav-icon {
    width: 44px; height: 44px; border: 0; border-radius: 12px; color: var(--olive-dark); background: transparent;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 100ms ease;
}
.nav-icon:hover { color: var(--olive-dark); background: var(--olive-soft); box-shadow: var(--shadow-small); transform: translateY(-1px); }
.nav-icon:active { transform: scale(.96); }
.nav-icon:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: 3px solid rgba(36, 79, 104, .35); outline-offset: 3px;
}
main { padding-top: 120px; }

.page-heading, .hero-title, .legal-sections h2, .legal-summary h2, .note-card h2, .info-grid h2,
.annunci-strip h2, .info-section-title, .profile-modal h2, .auth-modal h2 { font-family: "Manrope", Arial, sans-serif; }
.page-heading { color: var(--olive-dark); }
.page-text, .hero-text, .note-card p, .info-grid p { color: var(--muted); }
.eyebrow { border-radius: 999px; color: var(--olive-dark); background: var(--olive-soft); }
.hero-title span { color: var(--blue-dark); }
.hero-title strong, .note-card span, .info-grid strong { color: var(--orange-dark); }

.legal-sections section, .legal-summary, .info-grid article, .profile-empty, .message-panel {
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--olive-soft);
}
.search-board, .profile-card {
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-medium);
}
.note-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--field); box-shadow: var(--shadow-small); }

.search-row input, .auth-form input, .profile-form input, .profile-form select, .profile-form textarea,
select, textarea {
    border-color: var(--border); border-radius: var(--radius); color: var(--ink); background: var(--field);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.search-row input:focus, .auth-form input:focus, .profile-form input:focus, .profile-form select:focus,
.profile-form textarea:focus, select:focus, textarea:focus {
    border-color: var(--blue-dark); outline: 3px solid rgba(188, 219, 240, .75);
}
.profile-details dd { border-radius: var(--radius-small); background: var(--field); }

.button {
    min-height: 44px; border-radius: 14px; font-family: "Manrope", Arial, sans-serif; box-shadow: var(--shadow-small);
    transition: color 180ms ease, background-color 200ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 100ms ease;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-medium); }
.button:active { transform: scale(.98); box-shadow: var(--shadow-small); }
.button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; transform: none; }
.button-primary { color: var(--white); background: var(--olive-dark); }
.button-primary:hover, .button-primary:focus { color: var(--white); background: var(--orange); }
.button-secondary, .button-cream { color: var(--olive-dark); border-color: var(--border); background: var(--olive-soft); }
.button-secondary:hover, .button-secondary:focus, .button-cream:hover, .button-cream:focus { color: var(--olive-dark); border-color: var(--olive); background: #c9dfc6; }
.button-danger { color: var(--white); background: var(--danger); }
.button-google { color: var(--ink); border-color: var(--border); background: var(--white); }
.add-button { border-radius: 14px; color: var(--olive-dark); background: var(--blue); }

.modal-backdrop { background: rgba(13, 25, 18, .42); }
.auth-modal { border: 1px solid rgba(27, 48, 18, .12); border-radius: 20px; background: var(--olive-dark); box-shadow: var(--shadow-floating); }
.auth-modal h2, .modal-close { color: var(--white); }
.profile-modal { border-radius: 20px; background: var(--olive-soft); }
.profile-modal h2 { color: var(--ink); }
.form-error { border-radius: var(--radius-small); color: #711f1f; background: #ffe2dc; }
.form-success { border-radius: var(--radius-small); color: var(--olive-dark); background: #dcefd9; }
.toast-notification { border-radius: 12px; background: var(--olive-dark); box-shadow: var(--shadow-floating); }

.hamburger-drawer { background: var(--cream); box-shadow: var(--shadow-floating); }
.drawer-close { color: var(--olive-dark); border-radius: 12px; }
.drawer-close:hover, .drawer-link:hover:not(.disabled) { color: var(--olive-dark); background: var(--olive-soft); }
.site-footer { border-top-color: var(--border); }

@media (max-width: 720px) {
    .navbar { top: 8px; width: calc(100% - 16px); min-height: 64px; padding: 0 10px 0 16px; border-radius: 20px; }
    main { width: min(100% - 28px, 1120px); padding-top: 92px; }
    .brand-logo-full { height: 44px; }
    .nav-actions { gap: 2px; }
    .nav-icon { width: 40px; height: 40px; }
    .hero-title { font-size: 2.65rem; }
    .button { width: 100%; }
}

@media (max-width: 480px) {
    .brand-logo-full { display: none; }
    .brand-logo-symbol { display: block; }
    .nav-icon { width: 38px; height: 38px; }
    .nav-icon svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Legacy inline-style harmonization */
.home-search-container {
    color: var(--ink) !important; background: var(--field) !important;
    border: 1px solid var(--border); border-radius: var(--radius) !important; box-shadow: var(--shadow-medium) !important;
}
#home-macroaree {
    position: relative;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    border-bottom-color: var(--border) !important;
}
.home-macroarea-btn {
    position: relative;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px !important;
    border: 1px solid color-mix(in srgb, var(--macro-border-color, var(--macro-color)) 50%, transparent) !important;
    border-radius: 999px !important;
    color: var(--macro-color, var(--olive-dark)) !important;
    background: color-mix(in srgb, var(--macro-color, var(--olive-dark)) 10%, var(--cream-strong)) !important;
    font-family: "Manrope", Arial, sans-serif;
    font-size: .84rem !important;
    font-weight: 800 !important;
    line-height: 1;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
}
.home-macroarea-btn:hover,
.home-macroarea-btn:focus-visible {
    transform: translateY(-1px);
    border-color: var(--macro-border-color, var(--macro-color)) !important;
    box-shadow: 0 8px 18px rgba(27, 48, 18, .1);
}
.home-macroarea-btn.active {
    color: var(--macro-text-on-color, #fff) !important;
    border-color: var(--macro-border-color, var(--macro-color)) !important;
    background: var(--macro-color, var(--olive-dark)) !important;
    box-shadow: 0 10px 22px rgba(27, 48, 18, .16);
}
.home-macroarea-color {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 999px;
    background: var(--macro-color, var(--olive-dark));
    box-shadow: inset 0 0 0 1px rgba(27, 48, 18, .12);
}
.home-macroarea-btn.active .home-macroarea-color {
    background: currentColor;
}
.home-macroarea-icon {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    flex: 0 0 21px;
}
.home-macroarea-icon svg {
    width: 21px;
    height: 21px;
}
.home-macroarea-label {
    max-width: 86px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-macroarea-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 30;
    width: max-content;
    max-width: min(260px, 80vw);
    padding: 7px 10px;
    border: 1px solid var(--macro-border-color, var(--macro-color));
    border-radius: 9px;
    color: var(--macro-text-on-color, var(--white));
    background: var(--macro-color, var(--olive-dark));
    box-shadow: 0 10px 22px rgba(27, 48, 18, .14);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 140ms ease, transform 140ms ease;
}
.home-macroarea-btn:hover::after,
.home-macroarea-btn:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}
.home-search-type-toggle {
    position: relative;
    width: fit-content;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(132px, 1fr));
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 auto 1rem;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--cream-strong);
}
.home-search-type-toggle::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 12px) / 2);
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 6px 14px rgba(27, 48, 18, .08);
    transform: translateX(0);
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}
.home-search-type-toggle:has(input[value="corso"]:checked)::before {
    transform: translateX(calc(100% + 4px));
}
.home-search-type-option {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.home-search-type-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.home-search-type-option span {
    width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px 0 12px;
    border-radius: 999px;
    color: var(--muted);
    font-family: "Manrope", Arial, sans-serif;
    font-size: .86rem;
    font-weight: 800;
    line-height: 1;
    transition: color 160ms ease;
}
.home-search-type-option span::before {
    content: "";
    width: 6px;
    height: 18px;
    border-radius: 999px;
    background: transparent;
    transition: background-color 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1);
}
.home-search-type-option input:checked + span {
    color: var(--olive-dark);
}
.home-search-type-option input:checked + span::before {
    background: var(--olive-dark);
    transform: scaleY(1.08);
}
.home-search-type-option input:focus-visible + span {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
#home_search_input, #home_prof_select {
    min-height: 48px; border-color: var(--border) !important; border-radius: 14px !important; color: var(--ink); background: var(--white) !important;
}
#home_search_btn {
    min-height: 48px; border-radius: 14px !important; color: var(--white) !important; background: var(--olive-dark) !important;
    font-family: "Manrope", Arial, sans-serif; transition: background-color 200ms ease, transform 100ms ease, box-shadow 180ms ease !important;
}
#home_search_btn:hover { background: var(--orange) !important; transform: translateY(-1px); box-shadow: var(--shadow-medium); }

@media (max-width: 520px) {
    .home-search-container { padding: 18px !important; }
    #home_search_input { min-width: 0; }
    #home_search_btn { padding: 0 16px !important; }
}
/* Home */
.home-page { margin-top: 12px; }
.home-hero { min-height: 0; display: grid; grid-template-columns: minmax(0,.95fr) minmax(420px,1.05fr); align-items: center; gap: 72px; padding: 12px 0 50px; }
.home-hero .hero-copy { max-width: 590px; }
.home-hero .hero-title { margin: 0 0 20px; color: var(--olive-dark); font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif; font-size: clamp(3.3rem,5.2vw,4.9rem); font-weight: 700; line-height: .98; }
.home-hero .hero-title-line { display: block; width: fit-content; color: var(--olive-dark); animation: home-title-write 1300ms cubic-bezier(.22,.76,.24,1) both; }
.home-hero .hero-title-line-accent { color: var(--orange-dark); animation-delay: 620ms; }
.home-hero .hero-text { max-width: 570px; margin: 0; font-size: 1.14rem; line-height: 1.65; }
.home-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.home-search-jump { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; font-family: "Manrope",Arial,sans-serif; font-size: .9rem; font-weight: 700; text-decoration: none; }
.home-search-jump span { color: var(--orange-dark); font-size: 1.2rem; }
.home-hero-visual { position: relative; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; border: 1px solid rgba(27,48,18,.14); border-radius: 16px; color: var(--olive-dark); background: var(--blue); box-shadow: var(--shadow-medium); }
.home-hero-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-visual-copy { position: absolute; top: 34px; left: 34px; z-index: 2; max-width: 260px; }
.hero-visual-copy span, .floating-note span, .home-about-visual span { display: block; margin-bottom: 4px; font-family: "Manrope",Arial,sans-serif; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.hero-visual-copy strong { display: block; font-family: "Manrope",Arial,sans-serif; font-size: 1.7rem; line-height: 1.15; }
.student-stack { position: absolute; right: -14px; bottom: -22px; width: 82%; height: 78%; }
.student-stack img { position: absolute; width: 180px; height: 180px; border: 8px solid rgba(255,244,230,.92); border-radius: 50%; background: var(--cream); box-shadow: var(--shadow-medium); }
.student-stack img:nth-child(1) { right: 190px; bottom: 24px; }
.student-stack img:nth-child(2) { right: 30px; bottom: 90px; }
.student-stack img:nth-child(3) { right: 42px; bottom: -48px; }
.floating-note { position: absolute; z-index: 3; width: 180px; padding: 16px; border: 1px solid rgba(27,48,18,.12); border-radius: 12px; background: var(--field); box-shadow: var(--shadow-medium); }
.floating-note strong { font-family: "Manrope",Arial,sans-serif; font-size: .95rem; }
.floating-note-top { top: 118px; right: 24px; }
.floating-note-bottom { bottom: 24px; left: 24px; }
.home-search-bridge { position: relative; z-index: 4; width: min(100% - 48px,820px); margin: -32px auto -96px; scroll-margin-top: 100px; }
.home-search-heading { padding: 0 8px 8px; }
.home-search-heading h2 { margin: 0; color: var(--olive-dark); font-size: 1.35rem; line-height: 1.2; }
.home-search-kicker { color: var(--orange-dark); font-family: "Manrope",Arial,sans-serif; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.home-community-band { width: 100vw; margin-left: calc(50% - 50vw); padding: 176px 24px 88px; border-radius: 50% 50% 0 0 / 84px 84px 0 0; color: var(--white); background: var(--olive-dark); }
.home-band-inner { width: min(100%,1120px); margin: 0 auto; }
.home-section-heading { margin-bottom: 32px; }
.home-section-heading h2, .home-about-copy h2 { margin: 4px 0 0; color: var(--white); font-size: 2.35rem; }
.home-section-kicker { margin: 0; color: var(--olive); font-family: "Manrope",Arial,sans-serif; font-size: .82rem; font-weight: 800; text-transform: uppercase; }
.home-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.home-step { position: relative; min-height: 300px; padding: 28px; overflow: hidden; border-radius: 16px; color: var(--ink); }
.home-step-orange { background: #f7c767; } .home-step-blue { background: #9ec4f5; } .home-step-green { background: #b9f5a3; }
.home-step-number { position: absolute; top: 18px; right: 22px; color: rgba(13,25,18,.35); font-family: "Manrope",Arial,sans-serif; font-weight: 800; }
.home-step-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 44px; border-radius: 12px; background: rgba(255,255,255,.58); }
.home-step-icon svg { width: 25px; height: 25px; }
.home-step h3 { margin: 0 0 12px; font-size: 1.35rem; line-height: 1.25; }
.home-step p { margin: 0; line-height: 1.55; }
.home-motion-ready .home-step { opacity: 0; transform: translateY(28px); }
.home-motion-ready .home-steps.is-visible .home-step { animation: home-step-enter 560ms cubic-bezier(.22,.76,.24,1) forwards; }
.home-motion-ready .home-steps.is-visible .home-step:nth-child(2) { animation-delay: 140ms; }
.home-motion-ready .home-steps.is-visible .home-step:nth-child(3) { animation-delay: 280ms; }
.home-about { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(340px,1fr); align-items: center; gap: 72px; margin-top: 96px; }
.home-about-visual { width: min(100%,430px); aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: var(--olive); box-shadow: var(--shadow-medium); }
.home-about-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-about-copy > p:not(.home-section-kicker) { margin: 18px 0 26px; color: #dce9d9; font-size: 1.05rem; line-height: 1.65; }
.button-light { color: var(--olive-dark); background: var(--cream); }
.button-light:hover, .button-light:focus { color: var(--olive-dark); background: var(--orange); }
@media (max-width:1000px) {
 .home-hero { grid-template-columns: 1fr; gap: 32px; padding-bottom: 112px; } .home-hero .hero-copy { max-width:760px; }
 .home-steps { gap:16px; } .home-about { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:720px) {
 .home-page { margin-top:0; } .home-hero { min-height:0; gap:28px; padding:16px 0 110px; } .home-hero .hero-title { margin-top:0; font-size:3.4rem; } .home-hero .hero-text { font-size:1rem; }
 .home-hero .hero-actions { display:grid; grid-template-columns:1fr 1fr; }  .hero-visual-copy { top:24px; left:24px; }
 .student-stack { width:100%; } .student-stack img { width:138px; height:138px; } .student-stack img:nth-child(1) { right:140px; } .student-stack img:nth-child(2) { right:18px; bottom:82px; } .student-stack img:nth-child(3) { right:28px; }
 .floating-note { width:150px; padding:12px; } .floating-note-top { display:none; }
 .home-search-bridge { width:calc(100% - 12px); margin-top:-72px; margin-bottom:-110px; } .home-search-heading { padding-left:4px; }
 .home-community-band { padding:188px 14px 64px; border-radius:50% 50% 0 0 / 48px 48px 0 0; } .home-steps { grid-template-columns:1fr; } .home-step { min-height:250px; }
 .home-about { margin-top:64px; } .home-about-visual { width:min(100%,360px); margin:0 auto; }
}
@media (max-width:430px) {
 .home-hero .hero-title { font-size:3rem; } .home-hero .hero-actions { grid-template-columns:1fr; }  .hero-visual-copy strong { font-size:1.35rem; }
 .student-stack img { width:116px; height:116px; } .student-stack img:nth-child(1) { right:110px; } .student-stack img:nth-child(2) { right:8px; } .student-stack img:nth-child(3) { right:20px; }

}
@keyframes home-title-write {
    from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(10px); }
    to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes home-step-enter {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero .hero-title-line,
    .home-motion-ready .home-step,
    .home-motion-ready .home-steps.is-visible .home-step {
        opacity: 1;
        transform: none;
        clip-path: none;
        animation: none;
    }
}
/* Home hierarchy revision */
.home-page { margin-top: 0; }
.home-hero {
    display: grid;
    grid-template-columns: minmax(0,.92fr) minmax(400px,1.08fr);
    align-items: center;
    gap: 20px 64px;
    padding: 4px 0 48px;
}
.home-hero .hero-copy { max-width: 590px; }
.home-hero-context {
    margin: 0 0 12px;
    color: var(--blue-dark);
    font-family: "Manrope",Arial,sans-serif;
    font-size: .84rem;
    font-weight: 800;
    text-transform: uppercase;
}
.home-hero .hero-title {
    margin-bottom: 16px;
    font-size: clamp(2.8rem,4vw,3.6rem);
    line-height: 1;
}
.home-hero .hero-title-line-accent { color: var(--blue-dark); }
.home-hero .hero-text { max-width: 600px; font-size: 1.06rem; line-height: 1.55; }
.home-hero .hero-actions { margin-top: 20px; }
.home-hero-visual { width: 100%; max-width: 440px; justify-self: end; }
.home-search-bridge {
    grid-column: 1 / -1;
    width: min(100%,960px);
    margin: 4px auto 0;
    scroll-margin-top: 100px;
}
.home-search-heading { padding: 0 8px 8px; }
.home-search-heading h2 { font-size: 1.35rem; }
.home-search-kicker { color: var(--blue-dark); }
.home-search-container { padding: 16px 20px !important; }
#home-macroaree { margin-bottom: 10px !important; padding-bottom: 10px !important; }
.home-macroarea-btn { min-height: 44px; padding: 7px 13px !important; }
#home_search_btn:hover { background: var(--orange) !important; }
.home-community-band {
    padding: 92px 24px 88px;
    border-radius: 50% 50% 0 0 / 64px 64px 0 0;
}
.home-step-orange { background: #dcefd9; }
.home-step-blue { background: var(--blue); }
.home-step-green { background: var(--cream); }
.home-step-green .home-step-icon { color: var(--orange-dark); }
.button-light:hover, .button-light:focus { background: var(--blue); }

@media (max-width: 1000px) {
    .home-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 0 48px;
    }
    .home-hero .hero-copy { max-width: 760px; }
    .home-search-bridge { grid-row: 2; width: 100%; margin: 0; }
    .home-hero-visual { grid-row: 3; width: min(100%,720px); max-width: none; justify-self: center; }
}

@media (max-width: 720px) {
    .home-hero { gap: 18px; padding: 4px 0 40px; }
    .home-hero-context { margin-bottom: 8px; font-size: .74rem; }
    .home-hero .hero-title { margin-bottom: 14px; font-size: 2.65rem; }
    .home-hero .hero-text { font-size: .98rem; line-height: 1.5; }
    .home-hero .hero-actions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
    .home-hero .hero-actions .button { min-width: 0; padding-inline: 10px; font-size: .85rem; }
    .home-search-bridge { width: 100%; margin: 0; }
    .home-search-heading { padding: 0 4px 8px; }
    .home-search-container { padding: 16px !important; }
    .home-hero-visual { margin-top: 4px; }
    .home-community-band { padding: 76px 14px 64px; border-radius: 50% 50% 0 0 / 42px 42px 0 0; }
}

@media (max-width: 430px) {
    .home-hero .hero-title { font-size: 2.35rem; }
    .home-hero .hero-actions { grid-template-columns: 1fr 1fr; }
    .home-hero .hero-actions .button { font-size: .78rem; }
    .home-search-heading h2 { font-size: 1.25rem; }
}
/* Safe Drive teaser */
.safe-drive-cta {
    position: absolute; right: 14px; bottom: 14px; left: 14px; z-index: 2;
    min-height: 86px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center; gap: 12px; padding: 13px 14px; overflow: hidden;
    border: 1px solid rgba(36,79,104,.22); border-radius: 14px;
    color: var(--olive-dark); background: rgba(188,219,240,.96);
    box-shadow: var(--shadow-floating); cursor: default;
    animation: safe-drive-enter 700ms 1450ms cubic-bezier(.22,.76,.24,1) both;
}
.safe-drive-icon {
    width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px;
    color: var(--blue-dark); background: rgba(255,255,255,.72);
    animation: safe-drive-pulse 2800ms 2200ms ease-in-out infinite;
}
.safe-drive-icon svg { width: 27px; height: 27px; }
.safe-drive-copy { min-width: 0; }
.safe-drive-copy strong, .safe-drive-copy small { display: block; }
.safe-drive-copy strong { font-family: "Manrope",Arial,sans-serif; font-size: .92rem; line-height: 1.25; }
.safe-drive-copy small { margin-top: 3px; color: var(--blue-dark); font-size: .76rem; line-height: 1.3; }
.safe-drive-badge {
    padding: 6px 9px; border-radius: 999px; color: var(--white); background: var(--olive-dark);
    font-family: "Manrope",Arial,sans-serif; font-size: .68rem; font-weight: 800;
    text-transform: uppercase; white-space: nowrap;
}
@keyframes safe-drive-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes safe-drive-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@media (max-width: 720px) {
    .safe-drive-cta { top: 14px; bottom: auto; grid-template-columns: 44px minmax(0,1fr); }
    .safe-drive-icon { width: 44px; height: 44px; }
    .safe-drive-badge { grid-column: 2; justify-self: start; margin-top: -4px; }
}
@media (prefers-reduced-motion: reduce) {
    .safe-drive-cta, .safe-drive-icon { opacity: 1; transform: none; animation: none; }
}
/* Hero CTA alignment */
.home-hero {
    grid-template-columns: minmax(0,1.12fr) minmax(390px,.88fr);
    row-gap: 8px;
    column-gap: 48px;
}
.home-hero .hero-copy { max-width: 650px; }
.home-hero .hero-text { max-width: 650px; }
.home-hero-visual { max-width: 420px; }
.hero-cta-stack { width: min(100%,358px); margin-top: 18px; }
.hero-cta-stack .hero-actions {
    width: 100%; display: grid; grid-template-columns: 1.15fr .95fr;
    gap: 10px; margin: 0;
}
.hero-cta-stack .hero-actions .button { width: 100%; min-width: 0; padding-inline: 12px; }
.hero-cta-stack .safe-drive-cta {
    position: relative; inset: auto; width: 100%; min-height: 68px;
    grid-template-columns: 40px minmax(0,1fr); gap: 9px;
    margin-top: 9px; padding: 9px 10px; border-radius: 12px;
}
.hero-cta-stack .safe-drive-icon { width: 40px; height: 40px; }
.hero-cta-stack .safe-drive-icon svg { width: 24px; height: 24px; }
.hero-cta-stack .safe-drive-copy strong { font-size: .8rem; }
.hero-cta-stack .safe-drive-copy small { font-size: .68rem; }
.hero-cta-stack .safe-drive-badge { padding: 5px 7px; font-size: .6rem; }
@keyframes safe-drive-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
@media (max-width:1000px) {
    .home-hero { grid-template-columns:1fr; row-gap:18px; }
    .hero-cta-stack { width:min(100%,420px); }
    .home-hero-visual { max-width:none; }
}
@media (max-width:720px) {
    .hero-cta-stack { width:100%; margin-top:16px; }
    .hero-cta-stack .hero-actions { grid-template-columns:1fr 1fr; }
    .hero-cta-stack .safe-drive-cta { grid-template-columns:40px minmax(0,1fr); }
    .hero-cta-stack .safe-drive-badge { grid-column:auto; justify-self:auto; margin-top:0; }
}
@media (max-width:430px) {
    .hero-cta-stack .safe-drive-cta { grid-template-columns:38px minmax(0,1fr); }
    .hero-cta-stack .safe-drive-badge { grid-column:2; justify-self:start; margin-top:-3px; }
}
/* Profile page */
.profile-page { width: min(100%,1120px); margin: 12px auto 0; }
.profile-overview {
    position: relative; padding: 32px; border: 1px solid var(--border); border-radius: 16px;
    background: var(--panel); box-shadow: var(--shadow-medium);
}
.profile-overview-main { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: start; gap: 32px; }
.profile-incomplete-alert + .profile-overview-main { padding-top: 54px; }
.profile-avatar-container { width: 150px; }
.profile-avatar-modern {
    width: 150px; height: 150px; display: block; border: 6px solid var(--cream);
    border-radius: 50%; object-fit: cover; background: var(--cream); box-shadow: var(--shadow-medium);
    cursor: default; transform: none;
}
.profile-avatar-modern:hover { transform: none; }
.profile-info-main { min-width: 0; }
.profile-identity-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.profile-username { margin: 0; color: var(--olive-dark); font-family: "Manrope",Arial,sans-serif; font-size: 2.45rem; line-height: 1.1; }
.profile-course-chip {
    max-width: min(100%,420px); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
    border-radius: 999px; color: var(--olive-dark); background: var(--olive);
    font-family: "Manrope",Arial,sans-serif; font-size: .84rem; font-weight: 700;
}
.profile-course-chip svg { width: 17px; height: 17px; flex: 0 0 auto; }
.profile-bio-text {
    max-width: 650px; min-height: 78px; margin: 16px 0 20px; padding: 16px;
    border: 1px solid var(--border); border-radius: 12px; color: var(--muted); background: var(--field); line-height: 1.55;
}
.profile-contacts { display: grid; grid-template-columns: repeat(2,minmax(0,238px)); gap: 16px; }
.profile-contact { min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.profile-contact-whatsapp { background: var(--olive-soft); }
.profile-contact-telegram { background: var(--blue); }
.profile-contact span, .profile-contact strong { display: block; }
.profile-contact span { margin-bottom: 3px; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.profile-contact strong { overflow: hidden; color: var(--ink); font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-incomplete-alert {
    position: absolute; top: 24px; right: 24px; z-index: 2; width: min(300px,calc(100% - 48px));
    display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid rgba(223,104,48,.35);
    border-radius: 12px; color: var(--olive-dark); text-align: left; background: #ffe4d2; cursor: pointer;
    box-shadow: var(--shadow-small); transition: background-color 180ms ease, box-shadow 180ms ease, transform 100ms ease;
}
.profile-incomplete-alert:hover { background: #ffd7be; box-shadow: var(--shadow-medium); transform: translateY(-1px); }
.profile-incomplete-alert svg { width: 23px; height: 23px; flex: 0 0 auto; color: var(--orange-dark); }
.profile-incomplete-alert span, .profile-incomplete-alert strong, .profile-incomplete-alert small { display: block; }
.profile-incomplete-alert strong { font-family: "Manrope",Arial,sans-serif; font-size: .9rem; }
.profile-incomplete-alert small { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.profile-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.profile-action-buttons form { margin: 0; }
.profile-action-buttons svg, .profile-upload-button svg { width: 18px; height: 18px; }
.profile-edit-button { color: var(--olive-dark); border-color: rgba(36,79,104,.2); background: var(--blue); }
.profile-edit-button:hover { background: #a9cee7; }
.profile-feedback { margin: 16px 0 0; }
.notes-section { width: 100%; padding: 54px 0 72px; }
.profile-notes-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-title { margin: 0; color: var(--olive-dark); font-family: "Manrope",Arial,sans-serif; font-size: 2rem; }
.section-subtitle { margin: 6px 0 0; color: var(--muted); }
.profile-upload-button { flex: 0 0 auto; }
.profile-notes-grid-wrap { width: 100%; }
.empty-modern { padding: 48px 24px; border: 1px dashed rgba(27,48,18,.28); border-radius: 16px; text-align: center; background: var(--field); }
.empty-modern svg { width: 54px; height: 54px; color: var(--olive); }
.empty-modern h3 { margin: 14px 0 6px; color: var(--olive-dark); font-family: "Manrope",Arial,sans-serif; }
.empty-modern p { margin: 0; color: var(--muted); }
.profile-form-group, .profile-course-picker { padding: 14px; border: 1px solid transparent; border-radius: 14px; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.profile-form-group { display: grid; gap: 8px; }
.profile-course-picker { --color-primary: var(--olive-dark); display: flex; flex-direction: column; gap: 8px; border-color: var(--border); background: var(--field); }
.profile-field-missing { border-color: var(--orange) !important; background: #fff4ec !important; box-shadow: 0 0 0 4px rgba(255,138,77,.18); }
.profile-macroarea-btn.active { background: var(--olive-dark) !important; color: var(--white) !important; }
.profile-modal .profile-form label { color: var(--ink); }

@media (max-width:720px) {
    .profile-page { margin-top: 0; }
    .profile-overview { padding: 20px; }
    .profile-incomplete-alert { position: static; width: 100%; margin-bottom: 22px; }
    .profile-incomplete-alert + .profile-overview-main { padding-top: 0; }
    .profile-overview-main { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
    .profile-info-main { width: 100%; }
    .profile-identity-row { justify-content: center; text-align: center; }
    .profile-username { width: 100%; font-size: 2rem; }
    .profile-bio-text { max-width: none; text-align: left; }
    .profile-contacts { grid-template-columns: 1fr; }
    .profile-action-buttons { display: grid; grid-template-columns: 1fr; }
    .profile-action-buttons .button, .profile-action-buttons form, .profile-action-buttons form .button { width: 100%; }
    .profile-notes-header { align-items: stretch; flex-direction: column; }
    .profile-upload-button { width: 100%; }
}
/* Profile character and emphasis */
.profile-overview {
    border-top: 6px solid var(--olive);
    background: var(--field);
}
.profile-contact {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    align-items: center;
    gap: 11px;
}
.profile-contact-icon {
    width: 42px;
    height: 42px;
    display: grid !important;
    place-items: center;
    margin: 0 !important;
    border-radius: 11px;
    background: rgba(255,255,255,.68);
}
.profile-contact-icon svg { width: 22px; height: 22px; }
.profile-contact-whatsapp .profile-contact-icon { color: var(--olive-dark); }
.profile-contact-telegram .profile-contact-icon { color: var(--blue-dark); }
.profile-contact-copy { min-width: 0; }
.profile-action-buttons .button { gap: 8px; }
.profile-action-buttons .button svg { width: 19px; height: 19px; }
.profile-notes-header {
    align-items: center;
    padding: 0;
}
.profile-notes-header .section-title {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 9px 20px;
    border: 1px solid var(--border);
    border-left: 6px solid var(--blue-dark);
    border-radius: 12px;
    background: var(--olive-soft);
    box-shadow: var(--shadow-small);
    font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif;
    font-size: 2.35rem;
    font-weight: 700;
}
.profile-upload-button {
    min-height: 52px;
    padding-inline: 24px;
    font-size: 1rem;
    box-shadow: var(--shadow-medium);
}
.profile-upload-button svg { width: 21px; height: 21px; }
@media (max-width:720px) {
    .profile-username {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: clamp(1.55rem,9vw,2rem);
    }
    .profile-notes-header {
        align-items: center;
        flex-direction: row;
        gap: 10px;
    }
    .profile-notes-header .section-title {
        min-width: 0;
        min-height: 48px;
        padding: 8px 13px;
        font-size: 1.45rem;
        line-height: 1.1;
    }
    .profile-upload-button {
        width: auto;
        min-height: 48px;
        padding-inline: 14px;
        font-size: .88rem;
        line-height: 1.15;
    }
}
/* Stable home search expansion */
.home-search-bridge { height: 232px; overflow: visible; }
.home-community-band { margin-top: -80px; padding-top: 160px; }
.home-band-inner { transition: transform 420ms cubic-bezier(.22,.76,.24,1); }
.home-professor-visible .home-band-inner { transform: translateY(68px); }
@media (max-width:1000px) {
    .home-search-bridge { height: 315px; }
    .home-hero-visual { transition: transform 420ms cubic-bezier(.22,.76,.24,1); }
    .home-professor-visible .home-hero-visual { transform: translateY(68px); }
}
@media (max-width:720px) {
    .home-community-band { padding-top: 120px; }
}
@media (prefers-reduced-motion:reduce) {
    .home-band-inner, .home-hero-visual { transition: none; }
}
/* Filled profile icons */
.profile-contact-whatsapp .profile-contact-icon {
    color: #fff;
    background: #25d366;
    box-shadow: 0 3px 10px rgba(37,211,102,.22);
}
.profile-contact-whatsapp .profile-contact-icon svg { width: 24px; height: 24px; }
.profile-contact-telegram .profile-contact-icon {
    color: #fff;
    background: #229ed9;
    box-shadow: 0 3px 10px rgba(34,158,217,.24);
}
.profile-contact-telegram .profile-contact-icon svg { width: 24px; height: 24px; }
.profile-promote-button {
    color: var(--olive-dark);
    border-color: rgba(255,138,77,.34);
    background: #ffe4d2;
}
.profile-promote-button:hover,
.profile-promote-button:focus {
    color: var(--olive-dark);
    background: #ffd2b9;
}
.profile-promote-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: var(--orange);
    box-shadow: 0 3px 9px rgba(223,104,48,.22);
}
.profile-action-buttons .profile-promote-icon svg { width: 19px; height: 19px; }
/* Advertise profile modal */
.advertise-modal {
    width: min(100%,550px);
    padding: 32px;
    border: 1px solid var(--border);
    border-top: 6px solid var(--orange);
    border-radius: 20px;
    color: var(--ink);
    background: var(--cream);
    box-shadow: var(--shadow-floating);
}
.advertise-modal .advertise-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    color: var(--olive-dark);
    font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
}
.advertise-modal-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--white);
    background: var(--orange);
}
.advertise-modal-icon svg { width: 23px; height: 23px; }
.advertise-modal .advertise-modal-help {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.5;
}
.advertise-modal-text {
    width: 100%;
    min-height: 240px;
    margin: 0 0 20px;
    padding: 15px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--ink);
    background: var(--field);
    font: inherit;
    line-height: 1.55;
}
.advertise-modal-text:focus {
    border-color: var(--blue-dark);
    outline: 3px solid rgba(36,79,104,.18);
    outline-offset: 2px;
}
.advertise-modal-actions .button { gap: 8px; }
@media (max-width:720px) {
    .advertise-modal {
        max-height: calc(100dvh - 110px);
        padding: 24px 18px;
    }
    .advertise-modal-text { min-height: 200px; }
}
/* Personal area drawer */
.nav-user-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    overflow: hidden;
    border: 2px solid var(--olive);
    border-radius: 50%;
    background: var(--olive-soft);
    transition: border-color 180ms ease, transform 180ms ease;
}
.nav-user-avatar:hover { border-color: var(--orange); transform: translateY(-1px); }
.nav-user-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hamburger-drawer {
    width: min(340px,100vw);
    height: 100dvh;
    border-left: 1px solid var(--border);
}
.drawer-header {
    min-height: 90px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.drawer-title {
    color: var(--olive-dark);
    font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif;
    font-size: 1.35rem;
}
.drawer-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--olive-dark);
    text-decoration: none;
}
.drawer-user:hover { color: var(--olive-dark); }
.drawer-user img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    object-fit: cover;
    border: 2px solid var(--olive);
    border-radius: 50%;
    background: var(--olive-soft);
}
.drawer-user strong {
    min-width: 0;
    overflow: hidden;
    font-family: "Manrope",Arial,sans-serif;
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-close { flex: 0 0 40px; width: 40px; height: 40px; }
.drawer-close svg { width: 22px; height: 22px; }
.drawer-nav {
    flex: 1 1 auto;
    gap: 4px;
    padding: 18px 14px;
    overflow-y: auto;
}
.drawer-link {
    padding: 13px 12px;
    border-radius: 10px;
    color: var(--olive-dark);
    font-size: 1rem;
}
.drawer-primary-actions {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.drawer-upload-button { width: 100%; min-height: 48px; justify-content: center; gap: 8px; }
.drawer-upload-button svg,
.drawer-safe-drive svg,
.drawer-auth-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.drawer-safe-drive {
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid rgba(36,79,104,.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--olive-dark);
    background: var(--blue);
    font: 700 .98rem "Manrope",Arial,sans-serif;
    cursor: default;
    opacity: 1;
}
.drawer-auth {
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid var(--border);
    border-bottom: 0;
}
.drawer-auth form { width: 100%; }
.drawer-auth-btn { min-height: 48px; justify-content: center; }
@media (max-width:480px) {
    .nav-user-avatar { width: 38px; height: 38px; flex-basis: 38px; }
    .drawer-header { min-height: 82px; padding: 15px 16px; }
    .drawer-nav { padding-inline: 12px; }
    .drawer-auth { padding: 16px; }
}
/* Refined authentication modal */
body.auth-modal-open { overflow: hidden; }
.auth-modal-backdrop {
    z-index: 120;
    place-items: center;
    padding: 24px;
    background: rgba(13,25,18,.42);
    animation: auth-backdrop-in 240ms ease both;
}
.auth-modal-backdrop.is-closing { animation: auth-backdrop-out 220ms ease both; }
.auth-modal-backdrop .auth-modal {
    width: min(100%,440px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 34px;
    border: 1px solid var(--border);
    border-top: 6px solid var(--olive);
    border-radius: 20px;
    color: var(--ink);
    background: var(--cream);
    box-shadow: var(--shadow-floating);
    animation: auth-modal-in 320ms cubic-bezier(.22,.76,.24,1) both;
}
.auth-modal-backdrop.is-closing .auth-modal { animation: auth-modal-out 220ms ease both; }
.auth-modal-backdrop .auth-modal h2 {
    margin: 0 0 22px;
    color: var(--olive-dark);
    font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif;
    font-size: 2rem;
    font-weight: 750;
    line-height: 1.1;
}
.auth-modal-backdrop .auth-panel.is-active { animation: auth-panel-in 220ms ease both; }
.auth-modal-backdrop .modal-close {
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: var(--olive-dark);
    background: var(--olive-soft);
    cursor: pointer;
    line-height: 0;
    user-select: none;
    touch-action: manipulation;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.auth-modal-backdrop .modal-close:hover { background: #c9dfc6; }
.auth-modal-backdrop .modal-close:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
    background: #c9dfc6;
}
.auth-modal-backdrop .modal-close svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}

.auth-modal-backdrop .auth-form label { color: var(--olive-dark); }
.auth-modal-backdrop .auth-form input {
    border-color: var(--border);
    color: var(--ink);
    background: var(--field);
}
.auth-modal-backdrop .auth-separator { color: var(--muted); }
.auth-modal-backdrop .auth-separator::before,
.auth-modal-backdrop .auth-separator::after { background: var(--border); }
.auth-modal-backdrop .auth-separator span { background: var(--cream); }
.auth-modal-backdrop .auth-switch,
.auth-modal-backdrop .auth-link-row { color: var(--muted); }
.auth-modal-backdrop .auth-consent a,
.auth-modal-backdrop .auth-link-row a,
.auth-modal-backdrop .auth-switch a {
    color: var(--orange);
}
.auth-modal-backdrop .auth-consent a:hover,
.auth-modal-backdrop .auth-consent a:focus,
.auth-modal-backdrop .auth-link-row a:hover,
.auth-modal-backdrop .auth-link-row a:focus,
.auth-modal-backdrop .auth-switch a:hover,
.auth-modal-backdrop .auth-switch a:focus {
    color: var(--orange-dark);
}
.auth-modal-backdrop .button-google {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #d6d9de;
    color: #202124;
    background: #fff;
}
.auth-modal-backdrop .button-google:hover {
    border-color: #b9bec5;
    color: #202124;
    background: #f7f8f8;
    transform: translateY(-1px);
}
.google-logo { width: 21px; height: 21px; flex: 0 0 21px; }
.drawer-upload-button,
.profile-upload-button {
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.drawer-upload-button:hover,
.profile-upload-button:hover { transform: translateY(-2px); }
.drawer-upload-button:active,
.profile-upload-button:active { transform: translateY(0) scale(.98); }
@keyframes auth-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes auth-modal-in {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes auth-modal-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(10px) scale(.98); }
}
@keyframes auth-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width:480px) {
    .auth-modal-backdrop { padding: 12px; }
    .auth-modal-backdrop .auth-modal {
        max-height: calc(100dvh - 24px);
        padding: 28px 20px 24px;
    }
    .auth-modal-backdrop .auth-modal h2 { padding-right: 42px; font-size: 1.75rem; }
}
@media (prefers-reduced-motion:reduce) {
    .auth-modal-backdrop,
    .auth-modal-backdrop .auth-modal,
    .auth-modal-backdrop .auth-panel.is-active { animation: none; }
    .drawer-upload-button,
    .profile-upload-button { transition: none; }
}
/* Mobile navigation and modal refinements. Desktop styles remain unchanged. */
@media (max-width: 600px) {
    .brand-logo-full {
        display: none;
    }

    .brand-logo-symbol {
        display: block;
    }
}

@media (max-width: 720px) {
    .navbar {
        gap: 8px;
    }

    .site-name {
        flex: 0 0 auto;
    }

    .nav-actions {
        min-width: 0;
        margin-left: auto;
    }

    .nav-icon,
    .nav-user-avatar {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .hamburger-drawer {
        width: min(90vw, 340px);
    }

    .drawer-close {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .profile-modal-backdrop {
        padding: 12px;
        place-items: end center;
    }

    .profile-modal {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 24px 18px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .avatar-options {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, 58px);
        grid-auto-columns: 58px;
        overflow-x: auto;
        padding: 4px 3px 10px;
        scroll-snap-type: x proximity;
    }

    .avatar-choice {
        scroll-snap-align: start;
    }

    [data-profile-modal] .profile-modal-actions {
        position: sticky;
        bottom: 0;
        z-index: 3;
        padding: 12px 0;
        border-top: 1px solid var(--border);
        background: var(--olive-soft);
    }

    .profile-username {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .auth-modal-backdrop .auth-modal {
        width: 100%;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}
/* Note cards and results refresh */
.home-hero .hero-title-line-primary { font-size: 1em; }
.home-hero .hero-title-line-accent { font-size: .68em; line-height: 1.16; }
.results-container { width: min(100%,1200px); margin: 0 auto; padding: 28px 16px 64px; }
.results-header { margin-bottom: 24px; }
.results-header .eyebrow { display: inline-flex; margin: 0 0 8px; }
.results-header h1 { margin: 0; color: var(--olive-dark); font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif; font-size: clamp(2rem,4vw,3rem); line-height: 1.08; }
.results-subtitle { margin: 8px 0 0; color: var(--muted); font-size: 1.05rem; }
.results-header-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.results-back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.results-back-link svg, .results-share-button svg { width: 18px; height: 18px; }
.results-share-button { width: auto; min-height: 48px; gap: 7px; }
.results-filters { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: end; gap: 22px; margin: 16px 0 34px; padding: 16px 18px; border: 1px solid var(--border); border-left: 5px solid var(--blue-dark); border-radius: 12px; background: var(--olive-soft); box-shadow: var(--shadow-small); }
.results-filters-heading { display: flex; align-items: center; gap: 8px; padding-bottom: 11px; color: var(--olive-dark); font: 750 .95rem "Manrope",Arial,sans-serif; white-space: nowrap; }
.results-filters-heading svg { width: 20px; height: 20px; }
.results-filter-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.results-filter-field { min-width: 0; display: grid; gap: 6px; color: var(--olive-dark); font-size: .78rem; font-weight: 750; }
.results-filter-field select { width: 100%; min-height: 42px; padding: 8px 34px 8px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--ink); background: var(--field); font: 650 .9rem "Nunito Sans",Arial,sans-serif; cursor: pointer; }
.note-grid-container { margin-top: 24px; }
.note-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr)); align-items: start; gap: 28px 22px; }
.note-card { width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.note-card-author-row { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px 10px; }
.note-card-author { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; text-decoration: none; }
.note-card-author:hover { color: var(--olive-dark); }
.note-card-author img, .note-card-avatar-fallback { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; }
.note-card-avatar-fallback { display: grid; place-items: center; color: var(--white); background: var(--olive-dark); }
.note-card-author > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-card-owner-actions { display: flex; gap: 7px; }
.note-card-icon-action { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; cursor: pointer; transition: transform 160ms ease,filter 160ms ease; }
.note-card-icon-action:hover { transform: translateY(-2px); filter: brightness(.96); }
.note-card-icon-action svg { width: 19px; height: 19px; }
.note-card-edit { color: var(--olive-dark); background: var(--blue); }
.note-card-delete { color: var(--white); background: var(--danger); }
.note-card-shell { width: 100%; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--field); box-shadow: var(--shadow-small); transition: transform 180ms ease,box-shadow 180ms ease; }
.note-card-shell:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }
.note-card-image { aspect-ratio: 4/3; display: block; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--cream); }
.note-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 260ms ease; }
.note-card-shell:hover .note-card-image img { transform: scale(1.025); }
.note-card-image-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--olive); }
.note-card-image-placeholder svg { width: 58px; height: 58px; }
.note-card-save { position: absolute; top: 0; right: 16px; width: 48px; height: 58px; display: grid; place-items: center; padding: 0 0 5px; border: 1px solid rgba(166,145,0,.18); border-top: 0; border-radius: 0 0 9px 9px; color: #756800; background: #fff9a8; box-shadow: 0 4px 10px rgba(13,25,18,.12); cursor: pointer; transition: color 160ms ease,background-color 160ms ease,transform 160ms ease; }
.note-card-save:hover { transform: translateY(2px); background: #fff275; }
.note-card-save.is-saved { color: #8b6d00; background: #ffd84d; }
.note-card-save svg { width: 25px; height: 25px; }
.note-card-content { min-height: 250px; display: flex; flex-direction: column; padding: 17px 18px 15px; }
.note-card-course { overflow: hidden; color: var(--blue-dark); font: 750 .7rem "Manrope",Arial,sans-serif; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.note-card-title-link { margin-top: 5px; color: var(--olive-dark); text-decoration: none; }
.note-card-title-link:hover { color: var(--orange-dark); }
.note-card-title-link h3 { margin: 0; font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif; font-size: 1.35rem; line-height: 1.16; }
.note-card-meta { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin-top: 14px; color: var(--muted); font-size: .82rem; }
.note-card-meta span { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-card-meta svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--olive); }
.note-card-description { display: -webkit-box; overflow: hidden; margin: 14px 0 16px; color: var(--ink); font-size: .9rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.note-card-price { margin-top: auto; align-self: flex-end; color: var(--olive-dark); font: 800 1.05rem "Manrope",Arial,sans-serif; }
.note-grid-empty { display: grid; justify-items: center; gap: 8px; padding: 46px 20px; border: 1px dashed rgba(27,48,18,.28); border-radius: 14px; text-align: center; background: var(--field); }
.note-grid-empty > svg { width: 52px; height: 52px; color: var(--olive); }
.note-grid-empty h3,.note-grid-empty p { margin: 0; }
.note-grid-empty .button { width: auto; margin-top: 10px; }
@media (max-width:760px) {
    .home-hero .hero-title-line-accent { font-size: .64em; }
    .results-container { padding-inline: 0; }
    .results-header-actions { align-items: stretch; flex-direction: column; }
    .results-share-button { width: 100%; }
    .results-filters { grid-template-columns: 1fr; gap: 10px; }
    .results-filters-heading { padding-bottom: 0; }
    .results-filter-form { grid-template-columns: 1fr; }
    .note-card-grid { grid-template-columns: 1fr; }
    .note-card-content { min-height: 220px; }
}
@media (prefers-reduced-motion:reduce) {
    .note-card-shell,.note-card-image img,.note-card-icon-action,.note-card-save { transition: none; }
}
/* Note detail refresh */
.note-detail-page { padding-bottom: 64px; }
.note-detail-container { width: min(100%,1100px); margin: 0 auto; padding: 24px 16px; }
.note-detail-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-weight: 700; text-decoration: none; }
.note-detail-back svg { width: 18px; height: 18px; }
.note-detail-card { padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--field); box-shadow: var(--shadow-medium); }
.note-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.note-detail-heading { min-width: 0; }
.note-detail-heading > span { color: var(--blue-dark); font: 750 .72rem "Manrope",Arial,sans-serif; text-transform: uppercase; }
.note-detail-heading h1 { margin: 4px 0 12px; overflow-wrap: anywhere; color: var(--olive-dark); font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif; font-size: clamp(2rem,4vw,3rem); line-height: 1.08; }
.note-detail-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--muted); font-size: .9rem; }
.note-detail-meta span { display: inline-flex; align-items: center; gap: 7px; }
.note-detail-meta i { width: 13px; height: 13px; border-radius: 50%; background: var(--olive); }
.note-detail-top-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.note-detail-action,.note-detail-save { width: auto; min-height: 44px; gap: 8px; }
.note-detail-action svg,.note-detail-save svg { width: 19px; height: 19px; }
.note-detail-save { color: #6f6100; border: 1px solid rgba(166,145,0,.25); background: #fff9a8; }
.note-detail-save:hover,.note-detail-save.is-saved { color: #5c4b00; background: #ffd84d; }
.note-detail-promote { min-height: 48px; }
.note-detail-body { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); gap: 32px; padding: 32px 16px 26px; }
.note-detail-main-image { position: relative; overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--border); border-radius: 12px; background: var(--cream); }
.note-detail-main-image > img { width: 100%; height: 100%; display: block; object-fit: cover; cursor: zoom-in; }
.note-detail-image-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--olive); }
.note-detail-image-placeholder svg { width: 72px; height: 72px; }
.note-slider-arrow { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; display: none; place-items: center; border: 0; border-radius: 50%; color: var(--white); background: rgba(13,25,18,.72); cursor: pointer; transform: translateY(-50%); }
.note-slider-prev { left: 12px; }.note-slider-next { right: 12px; }
.note-slider-counter { position: absolute; top: 12px; left: 12px; display: none; padding: 4px 9px; border-radius: 999px; color: var(--white); background: rgba(13,25,18,.72); font-size: .75rem; }
.note-detail-info { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.note-detail-label { display: block; margin-bottom: 8px; color: var(--olive-dark); font: 750 .78rem "Manrope",Arial,sans-serif; text-transform: uppercase; }
.note-detail-creator { min-width: 0; display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 12px; padding: 14px; border-radius: 12px; color: var(--ink); background: var(--olive-soft); text-decoration: none; }
.note-detail-creator:hover { color: var(--ink); background: #c9dfc6; }
.note-detail-creator > img,.note-detail-creator > span { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.note-detail-creator > span { display: grid; place-items: center; color: var(--white); background: var(--olive-dark); }
.note-detail-creator strong,.note-detail-creator small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-detail-creator small { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.note-detail-description p { margin: 0; color: var(--ink); line-height: 1.55; white-space: pre-wrap; }
.note-detail-price { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.note-detail-price span { color: var(--muted); font-size: .82rem; }.note-detail-price strong { color: var(--olive-dark); font: 800 1.25rem "Manrope",Arial,sans-serif; }
.note-detail-contact-actions { width: min(100%,620px); display: grid; gap: 10px; margin: 4px auto 0; }
.note-contact-button { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 18px; border: 0; border-radius: 11px; color: var(--white); font: 750 .95rem "Manrope",Arial,sans-serif; text-decoration: none; cursor: pointer; }
.note-contact-button:hover { color: var(--white); filter: brightness(.95); }
.note-contact-button svg { width: 22px; height: 22px; }.note-contact-whatsapp { background: #25d366; }.note-contact-telegram { background: #229ed9; }
.note-contact-empty { margin: 0; padding: 12px; border-radius: 10px; text-align: center; background: var(--olive-soft); }
.note-detail-owner-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.note-detail-owner-actions .button { width: auto; gap: 8px; }.note-detail-owner-actions svg { width: 19px; height: 19px; }
.note-detail-report { display: block; margin: 24px 0 0 auto; padding: 8px 0; border: 0; color: var(--danger); background: transparent; font-weight: 700; cursor: pointer; }
@media (max-width:800px) {
    .note-detail-card { padding: 20px; }
    .note-detail-header { flex-direction: column; }
    .note-detail-top-actions { width: 100%; justify-content: stretch; }
    .note-detail-top-actions .button { flex: 1 1 150px; }
    .note-detail-body { grid-template-columns: 1fr; padding-inline: 0; }
}
@media (max-width:480px) {
    .note-detail-container { padding-inline: 0; }
    .note-detail-card { padding: 17px; border-radius: 12px; }
    .note-detail-owner-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .note-detail-owner-actions .button { width: 100%; }
}
/* Compact note refinements */
.note-card-shell { cursor: pointer; }
.note-card-shell:hover { transform: translateY(-2px) scale(1.012); }
.note-card-hit-area { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.note-card-hit-area:focus-visible { outline: 3px solid rgba(36,79,104,.4); outline-offset: -4px; }
.note-card-image,.note-card-content { pointer-events: none; }
.note-card-image { aspect-ratio: 16/10; }
.note-card-save { z-index: 4; height: 52px; color: var(--olive-dark); border-color: var(--border); background: var(--cream); transform: none; }
.note-card-save:hover { color: var(--olive-dark); background: var(--olive-soft); transform: none; }
.note-card-save.is-saved,.note-card-save.is-saved:hover { color: #6d5700; background: #ffd84d; }
.note-card-save:disabled { opacity: .7; }
.note-card-content { min-height: 184px; padding: 13px 16px 12px; }
.note-card-course { color: var(--olive-dark); font-size: .68rem; }
.note-card-title { margin: 4px 0 0; color: var(--olive-dark); font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif; font-size: 1.22rem; line-height: 1.14; }
.note-card-meta { margin-top: 10px; color: var(--olive-dark); }
.note-card-meta svg { color: var(--olive); fill: none; }
.note-card-description { margin: 10px 0 11px; font-size: .86rem; line-height: 1.34; }
.note-card-price { font-size: .98rem; }
.note-detail-meta svg { width: 16px; height: 16px; color: var(--olive); }
.note-detail-meta i { display: none; }
.note-detail-save { color: var(--olive-dark); border-color: var(--border); background: var(--cream); }
.note-detail-save:hover { color: var(--olive-dark); background: var(--olive-soft); }
.note-detail-save.is-saved,.note-detail-save.is-saved:hover { color: #6d5700; background: #ffd84d; }
.note-detail-price { padding-block: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.note-detail-contact-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
.note-contact-button { width: 100%; min-height: 50px; padding: 11px 16px; border-radius: 11px; font-size: .92rem; line-height: 1.15; }
.note-contact-button svg { width: 23px; height: 23px; flex: 0 0 23px; }
.note-contact-empty { grid-column: 1/-1; }
.note-detail-report { display: inline-flex; align-items: center; gap: 7px; }
.note-detail-report svg { width: 18px; height: 18px; }
.note-detail-promote { min-height: 44px; }
.note-detail-promote .profile-promote-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; }
.note-detail-promote .profile-promote-icon svg { width: 17px; height: 17px; }
@media (max-width:560px) {
    .note-detail-contact-actions { grid-template-columns: 1fr; }
}
/* Note alignment corrections */
.note-card-save:hover,
.note-detail-save:hover {
    color: #6d5700;
    background: #fff3a3;
}
.note-contact-button:only-child {
    grid-column: 1 / -1;
    width: min(100%,305px);
    justify-self: center;
}
.note-detail-report {
    display: flex;
    width: fit-content;
    margin-left: auto;
}
/* Illustrated utility pages */
main:has(.results-page) { width: 100%; }
.results-page { width: 100%; }
.results-hero { width: 100%; margin-left: 0; }
.results-hero { width: 100%; margin: -20px 0 0; padding: 38px 28px 92px; border-radius: 0 0 50% 50% / 0 0 34px 34px; color: var(--white); background: var(--olive-dark); }
.results-hero-inner { width: min(100%,1120px); min-height: 135px; display: grid; grid-template-columns: 42px minmax(0,1fr) 150px; align-items: start; gap: 18px; margin: 0 auto; }
.results-hero-back { width: 42px; height: 42px; display: grid; place-items: center; margin-top: 2px; border-radius: 10px; color: var(--white); }
.results-hero-back:hover { color: var(--olive-dark); background: var(--olive); }
.results-hero-back svg { width: 29px; height: 29px; }
.results-hero-copy { padding-top: 2px; }
.results-hero-copy h1 { margin: 0; color: var(--white); font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif; font-size: clamp(1.7rem,3.2vw,2.6rem); line-height: 1.12; }
.results-hero-copy p { margin: 8px 0 0; color: rgba(255,255,255,.82); font-size: 1rem; }
.results-hero-image { width: 150px; height: 150px; object-fit: cover; border-radius: 34px; background: var(--cream); box-shadow: var(--shadow-medium); }
.results-container { padding-top: 0; }
.results-search-stack { position: relative; z-index: 3; margin-top: -70px; }
.results-search-stack > .home-search-container { width: min(100%,620px); margin: 0 auto 18px !important; border: 1px solid var(--border); border-radius: 12px !important; background: var(--field) !important; box-shadow: var(--shadow-floating) !important; }
.results-search-stack .results-filters { width: min(100%,620px); margin: 0 auto 36px; }
.upload-container { width: min(100%,860px); margin: 0 auto; padding: 12px 0 64px; }
.upload-heading { margin-bottom: 24px; }
.upload-heading .eyebrow { display: inline-flex; margin: 0 0 8px; }
.upload-heading h1 { margin: 0; color: var(--olive-dark); font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif; font-size: clamp(2rem,4vw,3rem); }
.upload-heading > p:last-child { margin: 7px 0 0; color: var(--muted); }
.upload-page .upload-card { padding: 28px !important; border: 1px solid var(--border); border-top: 6px solid var(--olive); border-radius: 16px !important; background: var(--field) !important; box-shadow: var(--shadow-medium) !important; }
.upload-page .upload-card h2 { color: var(--olive-dark) !important; border-bottom-color: var(--olive-soft) !important; font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif !important; }
.upload-page [style*="border: 2px solid #f5c000"],.upload-page [style*="background-color: #e8f5e9"] { padding: 20px !important; border: 1px solid var(--border) !important; border-left: 5px solid var(--orange) !important; border-radius: 12px !important; background: var(--cream) !important; box-shadow: var(--shadow-small); }
.upload-page input:not([type="hidden"]):not([type="file"]),.upload-page select,.upload-page textarea { min-height: 46px; padding: 11px 12px !important; border: 1px solid var(--border) !important; border-radius: 9px !important; color: var(--ink); background: var(--cream) !important; font: inherit; }
.upload-page textarea { min-height: 112px; }
.upload-page label { color: var(--olive-dark); }
.upload-page .macroarea-btn,.upload-page .missing-macroarea-btn { min-height: 34px; padding: 5px 12px !important; border: 1px solid var(--border) !important; border-radius: 999px !important; color: var(--olive-dark) !important; background: var(--olive-soft) !important; }
.upload-page .macroarea-btn.active,.upload-page .missing-macroarea-btn.active { color: var(--white) !important; background: var(--olive-dark) !important; }
.upload-page label[for="foto_input"] { min-height: 112px; border: 2px dashed var(--olive) !important; border-radius: 12px !important; color: var(--olive-dark) !important; background: var(--olive-soft) !important; }
.upload-page #upload-nota-form > .button-primary { min-height: 52px; color: var(--white) !important; background: var(--olive-dark) !important; }
.upload-page #upload-nota-form > .button-primary:hover { background: var(--orange) !important; }
.email-wait-page,.info-hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr); align-items: center; gap: 42px; margin-bottom: 54px; }
.email-wait-visual,.info-hero-visual { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--cream); box-shadow: var(--shadow-medium); }
.email-wait-visual { aspect-ratio: 1/1; }
.info-hero-visual { aspect-ratio: 4/3; }
.email-wait-visual img,.info-hero-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.info-hero-visual img { object-position: 72% center; }
.email-wait-content,.info-hero-copy { min-width: 0; }
.email-wait-content .eyebrow,.info-hero-copy .eyebrow { display: inline-flex; margin: 0 0 10px; }
.email-wait-content h1,.info-hero-copy h1 { margin: 0 0 14px; color: var(--olive-dark); font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif; font-size: clamp(2.2rem,4.5vw,3.5rem); line-height: 1.05; }
.email-wait-content > p,.info-hero-copy .page-text { color: var(--muted); line-height: 1.6; }
.email-wait-address { display: grid; gap: 3px; margin: 22px 0 16px; padding: 14px 16px; border-left: 5px solid var(--blue-dark); border-radius: 10px; background: var(--blue); }
.email-wait-address span { color: var(--muted); font-size: .78rem; }.email-wait-address strong { overflow-wrap: anywhere; color: var(--olive-dark); }
.email-wait-actions .button { width: 100%; }
.email-wait-help { margin: 9px 0 0; font-size: .8rem; }
@media (max-width:760px) {
    .results-hero { padding: 26px 16px 82px; border-radius: 0 0 50% 50% / 0 0 24px 24px; }
    .results-hero-inner { min-height: 105px; grid-template-columns: 36px minmax(0,1fr) 86px; gap: 10px; }
    .results-hero-back { width: 36px; height: 36px; }.results-hero-back svg { width: 25px; height: 25px; }
    .results-hero-image { width: 86px; height: 86px; border-radius: 22px; }
    .results-search-stack { margin-top: -54px; }
    .upload-container { padding-top: 0; }
    .upload-page .upload-card { padding: 20px 16px !important; }
    .email-wait-page,.info-hero { grid-template-columns: 1fr; gap: 24px; }
    .email-wait-visual,.info-hero-visual { aspect-ratio: 16/11; }
}
/* Design system cohesion pass */
.note-card .note-card-course,.note-card .note-card-meta span { color: var(--olive-dark); }
.note-card .note-card-meta svg { color: var(--olive); }
.results-hero { margin-top: -120px; padding-top: 138px; padding-bottom: 104px; }
.results-hero-inner { grid-template-columns: 42px minmax(0,1fr) 180px; }
.results-hero-image { width: 180px; height: 180px; border-radius: 38px; }
.results-search-stack { margin-top: -82px; }
.results-search-stack > .home-search-container,.results-search-stack .results-filters { width: min(100%,960px); }
.info-hero { display: block; margin-bottom: 54px; }
.info-hero::after { content: ""; display: block; clear: both; }
.info-hero-visual { float: right; width: min(54%,620px); aspect-ratio: 16/10; margin: 0 0 28px 42px; }
.info-hero-visual img { object-position: 72% center; }
.info-hero-copy > .eyebrow,.legal-page > .eyebrow { display: none; }
.info-hero-copy h1,.legal-page > .page-heading,.saved-notes-heading h1 { color: var(--olive-dark); font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif; font-weight: 700; letter-spacing: 0; }
.info-hero-copy h1 { margin-bottom: 18px; }
.info-hero-copy .page-text { color: var(--ink); font-family: "Nunito Sans",Arial,sans-serif; font-size: 1rem; line-height: 1.68; }
.legal-page { width: min(100%,920px); margin: 0 auto; }
.legal-page > .page-heading { margin: 0 0 10px; font-size: clamp(2.35rem,5vw,3.6rem); line-height: 1.05; }
.legal-page > .page-text { color: var(--ink); font-size: 1rem; line-height: 1.65; }
.legal-updated { color: var(--muted); font-size: .88rem; }
.legal-sections { gap: 0; margin-top: 34px; }
.legal-sections section { padding: 25px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.legal-sections section:last-child { border-bottom: 1px solid var(--border); }
.legal-sections h2,.legal-summary h2,.info-section-title { color: var(--olive-dark); font-family: "Manrope",Arial,sans-serif; font-weight: 750; }
.legal-sections p,.legal-sections li,.legal-summary p,.legal-summary li { color: var(--ink); font-family: "Nunito Sans",Arial,sans-serif; }
.legal-summary { padding: 24px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.saved-notes-page { width: min(100%,1200px); margin: 0 auto; padding: 12px 0 64px; }
.saved-notes-heading { margin-bottom: 28px; }
.saved-notes-heading h1 { margin: 0; font-size: clamp(2.35rem,5vw,3.5rem); line-height: 1.05; }
.saved-notes-heading p { margin: 9px 0 0; color: var(--muted); font-size: 1.02rem; }
.saved-notes-empty { display: grid; justify-items: center; gap: 9px; margin-top: 28px; padding: 58px 24px; border: 1px dashed rgba(27,48,18,.3); border-radius: 14px; text-align: center; background: var(--field); }
.saved-notes-empty-icon { width: 64px; height: 72px; display: grid; place-items: center; color: var(--olive-dark); background: var(--olive-soft); border-radius: 8px; }
.saved-notes-empty-icon svg { width: 34px; height: 34px; }
.saved-notes-empty h2 { margin: 8px 0 0; color: var(--olive-dark); font-family: "Bricolage Grotesque","Manrope",Arial,sans-serif; font-size: 1.6rem; }
.saved-notes-empty p { margin: 0 0 10px; color: var(--muted); }
.saved-notes-empty .button { width: auto; }
.home-about-copy .button-secondary:hover,.home-about-copy .button-secondary:focus { color: var(--olive-dark); border-color: var(--olive); background: #c9dfc6; }
@media (max-width:760px) {
    .results-hero { margin-top: -94px; padding-top: 112px; padding-bottom: 88px; }
    .results-hero-inner { grid-template-columns: 36px minmax(0,1fr) 104px; }
    .results-hero-image { width: 104px; height: 104px; border-radius: 24px; }
    .results-search-stack { margin-top: -58px; }
    .info-hero-visual { float: none; width: 100%; aspect-ratio: 16/10; margin: 0 0 24px; }
    .legal-page,.saved-notes-page { padding-inline: 0; }
    .legal-sections section { padding: 21px 0; }
    .saved-notes-empty { padding: 44px 18px; }
}
@media (max-width:430px) {
    .results-hero-inner { grid-template-columns: 32px minmax(0,1fr) 82px; gap: 8px; }
    .results-hero-image { width: 82px; height: 82px; border-radius: 20px; }
    .results-hero-copy h1 { font-size: 1.45rem; }
}
/* Closed drawer overflow containment */
.hamburger-drawer:not(.is-open) { visibility: hidden; }
.hamburger-drawer.is-open { visibility: visible; }
html { overflow-x: clip; }

/* Mobile-first structural pass */
@media (max-width: 720px) {
    main { width: min(100% - 24px, 1120px); padding-top: 86px; }
    .button { width: auto; min-height: 40px; padding: 8px 13px; font-size: .86rem; }
    .drawer-upload-button, .drawer-auth-btn, .auth-modal .button, .profile-modal-actions .button,
    .upload-page #upload-nota-form > .button-primary, .email-wait-actions .button { width: 100%; }

    .profile-page { margin-top: 2px; }
    .profile-overview { padding: 14px; border-top-width: 4px; border-radius: 14px; box-shadow: var(--shadow-small); }
    .profile-incomplete-alert { gap: 9px; min-height: 48px; margin-bottom: 16px; padding: 9px 11px; border-radius: 10px; }
    .profile-incomplete-alert svg { width: 19px; height: 19px; }
    .profile-incomplete-alert strong { font-size: .82rem; }
    .profile-incomplete-alert small { font-size: .7rem; }

    .profile-overview-main { grid-template-columns: 82px minmax(0, 1fr); justify-items: stretch; align-items: center; gap: 12px; }
    .profile-avatar-container { width: 82px; align-self: start; }
    .profile-avatar-modern { width: 82px; height: 82px; border-width: 3px; box-shadow: var(--shadow-small); }
    .profile-info-main { display: contents; }
    .profile-identity-row { min-width: 0; align-content: center; justify-content: flex-start; gap: 7px; text-align: left; }
    .profile-username { width: 100%; font-size: clamp(1.2rem, 6.2vw, 1.55rem); line-height: 1.05; }
    .profile-course-chip { max-width: 100%; padding: 5px 9px; gap: 5px; font-size: .7rem; }
    .profile-course-chip svg { width: 14px; height: 14px; }
    .profile-bio-text { grid-column: 1 / -1; width: 100%; min-height: 0; margin: 2px 0 0; padding: 10px 11px; border-radius: 9px; font-size: .84rem; line-height: 1.4; }
    .profile-contacts { grid-column: 1 / -1; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 0; }
    .profile-contact { grid-template-columns: 30px minmax(0, 1fr); gap: 7px; min-height: 50px; padding: 7px 8px; border-radius: 9px; }
    .profile-contact-icon { width: 30px; height: 30px; border-radius: 8px; }
    .profile-contact-whatsapp .profile-contact-icon svg, .profile-contact-telegram .profile-contact-icon svg { width: 18px; height: 18px; }
    .profile-contact-copy > span { margin-bottom: 1px; font-size: .58rem; }
    .profile-contact strong { font-size: .72rem; }
    .profile-feedback { grid-column: 1 / -1; }

    .profile-action-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 14px; padding-top: 12px; }
    .profile-action-buttons form { width: 100%; }
    .profile-action-buttons .button, .profile-action-buttons form .button { width: 100%; min-width: 0; min-height: 42px; padding: 6px 7px; gap: 5px; font-size: .72rem; line-height: 1.1; }
    .profile-action-buttons .button svg, .profile-action-buttons .profile-promote-icon svg { width: 16px; height: 16px; }
    .profile-promote-icon { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 7px; }
    .profile-action-buttons > .button:only-child { grid-column: 2 / 4; justify-self: end; }

    .notes-section { padding: 28px 0 48px; }
    .profile-notes-header { align-items: center; gap: 8px; margin-bottom: 15px; }
    .profile-notes-header .section-title { min-height: 42px; padding: 7px 10px; border-left-width: 4px; border-radius: 9px; font-size: 1.15rem; }
    .profile-upload-button { min-height: 42px; padding: 7px 10px; font-size: .76rem; }
    .profile-upload-button svg { width: 17px; height: 17px; }
    .empty-modern, .saved-notes-empty { padding: 30px 16px; border-radius: 12px; }
    .note-grid { gap: 16px; }
    .note-card { border-radius: 12px; }
    .legal-page > .page-heading, .saved-notes-heading h1, .info-hero-copy h1, .email-wait-content h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); }
}

@media (max-width: 430px) {
    main { width: min(100% - 20px, 1120px); }
    .profile-overview { padding: 12px; }
    .profile-overview-main { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
    .profile-avatar-container, .profile-avatar-modern { width: 72px; height: 72px; }
    .profile-contact { grid-template-columns: 26px minmax(0, 1fr); padding-inline: 7px; }
    .profile-contact-icon { width: 26px; height: 26px; }
    .profile-action-buttons .button, .profile-action-buttons form .button { font-size: .68rem; }
    .profile-notes-header .section-title { font-size: 1.02rem; }
    .profile-upload-button { padding-inline: 8px; font-size: .7rem; }
}
/* Compact mobile profile controls */
@media (max-width: 720px) {
    .profile-contact { grid-template-columns: 25px minmax(0, 1fr); min-height: 42px; padding: 5px 7px; }
    .profile-contact-icon { width: 25px; height: 25px; border-radius: 7px; }
    .profile-contact-whatsapp .profile-contact-icon svg,
    .profile-contact-telegram .profile-contact-icon svg { width: 16px; height: 16px; }
    .profile-contact-copy > span { font-size: .54rem; }
    .profile-contact strong { font-size: .66rem; }

    .profile-action-buttons { display: flex; justify-content: flex-end; gap: 6px; }
    .profile-action-buttons form { width: auto; }
    .profile-action-buttons .button,
    .profile-action-buttons form .button { width: auto; min-height: 36px; padding: 5px 9px; font-size: .68rem; }
    .profile-promote-icon { width: 22px; height: 22px; flex-basis: 22px; }
    .profile-action-buttons .button svg,
    .profile-action-buttons .profile-promote-icon svg { width: 14px; height: 14px; }
    .profile-action-buttons > .button:only-child { margin-left: auto; }
}
/* Icon-only mobile profile actions */
@media (max-width: 720px) {
    .profile-action-buttons { flex-wrap: nowrap; }
    .profile-action-buttons .button,
    .profile-action-buttons form .button { width: 38px; height: 38px; min-height: 38px; justify-content: center; padding: 0; }
    .profile-action-buttons form { flex: 0 0 38px; }
    .profile-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* Plain profile notes heading */
.profile-notes-header .section-title {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
/* Profile modal: vertical scrolling only on mobile */
@media (max-width: 720px) {
    .profile-modal { max-width: 100%; overflow-x: hidden; overflow-y: auto; }
    .profile-form, .profile-form > *, .avatar-picker, .profile-course-picker, .profile-form-group { min-width: 0; max-width: 100%; }
    .avatar-picker { min-inline-size: 0; }
    .avatar-options { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); grid-auto-columns: auto; width: 100%; overflow-x: hidden; overflow-y: visible; padding: 4px 0; scroll-snap-type: none; }
    .avatar-choice { width: 48px; height: 48px; justify-self: center; padding: 3px; }
    .profile-form .avatar-choice > .avatar-image { width: 38px !important; height: 38px !important; max-width: 38px; }
    #profile-macroaree-buttons { width: 100%; min-width: 0; }
    #profile-macroaree-buttons .profile-macroarea-btn { max-width: 100%; overflow-wrap: anywhere; }
}
/* Keep profile form actions anchored to the mobile modal bottom */
@media (max-width: 720px) {
    .profile-modal { display: flex; flex-direction: column; }
    .profile-modal .profile-form { flex: 1 0 auto; min-height: 100%; }
    [data-profile-modal] .profile-modal-actions {
        position: sticky;
        bottom: -24px;
        z-index: 5;
        margin: auto -18px -24px;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: var(--olive-soft);
        box-shadow: 0 -10px 22px rgba(13, 25, 18, .1);
    }
}
/* Profile actions remain in the normal mobile form flow */
@media (max-width: 720px) {
    .profile-modal .profile-form { flex: none; min-height: 0; }
    [data-profile-modal] .profile-modal-actions {
        position: static;
        margin: 8px 0 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}
/* Safe Drive dashboard */
.safe-drive-page {
    --safe-blue: var(--blue);
    --safe-blue-dark: #247ea8;
    --safe-blue-soft: #d9eef8;
    width: min(1040px, 100%);
    margin: 24px auto 0;
}

.safe-drive-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    margin-bottom: 22px;
    padding: 30px clamp(22px, 4vw, 42px);
    border: 1px solid rgba(85, 173, 213, .32);
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 20%, rgba(85, 173, 213, .22), transparent 28%),
        linear-gradient(135deg, #f7fcff 0%, var(--cream) 68%);
    box-shadow: 0 18px 34px rgba(36, 126, 168, .12);
}

.safe-drive-kicker,
.safe-drive-section-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--safe-blue-soft);
    color: var(--safe-blue-dark);
    font-family: "Manrope", Arial, sans-serif;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.safe-drive-hero h1,
.safe-drive-info-panel h2,
.safe-drive-form-panel h2 {
    margin: 0;
    color: var(--olive-dark);
    font-family: "Bricolage Grotesque", "Manrope", Arial, sans-serif;
    letter-spacing: 0;
}

.safe-drive-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: .94;
}

.safe-drive-hero p {
    max-width: 640px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: clamp(1rem, 2vw, 1.14rem);
    line-height: 1.58;
}

.safe-drive-mark {
    width: clamp(88px, 14vw, 142px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: #fff;
    color: var(--safe-blue);
    box-shadow: inset 0 0 0 1px rgba(85, 173, 213, .24), 0 14px 26px rgba(36, 126, 168, .14);
}

.safe-drive-mark svg {
    width: 68%;
    height: 68%;
}

.safe-drive-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 22px;
    align-items: start;
}

.safe-drive-info-panel,
.safe-drive-form-panel {
    border-radius: 20px;
    border: 1px solid rgba(47, 67, 31, .14);
    background: rgba(255, 252, 244, .94);
    box-shadow: 0 12px 26px rgba(24, 32, 24, .08);
}

.safe-drive-info-panel {
    padding: clamp(22px, 4vw, 34px);
}

.safe-drive-info-panel > p {
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.safe-drive-info-grid {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.safe-drive-info-grid article {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    min-height: 92px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f6fbfd, var(--safe-blue-soft));
    border: 1px solid rgba(85, 173, 213, .24);
}

.safe-drive-info-icon {
    grid-row: span 2;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    color: var(--safe-blue-dark);
    box-shadow: inset 0 0 0 1px rgba(85, 173, 213, .22);
}

.safe-drive-info-icon svg {
    width: 26px;
    height: 26px;
}

.safe-drive-info-grid h3 {
    margin: 1px 0 4px;
    color: var(--olive-dark);
    font-family: "Manrope", Arial, sans-serif;
    font-size: 1rem;
}

.safe-drive-info-grid p {
    margin: 0;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.45;
}

.safe-drive-form-panel {
    padding: clamp(20px, 3.5vw, 30px);
}

.safe-drive-panel-heading {
    margin-bottom: 20px;
}

.safe-drive-form {
    display: grid;
    gap: 18px;
}

.safe-drive-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--olive-dark);
    font-family: "Manrope", Arial, sans-serif;
    font-weight: 800;
}

.safe-drive-field input[type="email"],
.safe-drive-select-trigger {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(47, 67, 31, .22);
    border-radius: 14px;
    background: var(--field);
    color: var(--ink);
    font: 600 1rem/1.35 "Nunito Sans", Arial, sans-serif;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.safe-drive-field input[type="email"]:focus,
.safe-drive-select-trigger:focus {
    outline: none;
    border-color: var(--safe-blue);
    box-shadow: 0 0 0 4px rgba(85, 173, 213, .2);
    background: #fff;
}

.safe-drive-field input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 1.5px dashed rgba(36, 126, 168, .38);
    border-radius: 14px;
    background: #f6fbfd;
    color: var(--muted);
}

.safe-drive-select {
    position: relative;
}

.safe-drive-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    text-align: left;
}

.safe-drive-select-trigger svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.safe-drive-select-options {
    position: absolute;
    inset: calc(100% + 6px) 0 auto;
    z-index: 20;
    display: none;
    max-height: 250px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(47, 67, 31, .18);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 28px rgba(24, 32, 24, .14);
}

.safe-drive-select-options.is-open {
    display: grid;
    gap: 4px;
}

.safe-drive-select-option {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: 700 .95rem/1.35 "Nunito Sans", Arial, sans-serif;
    text-align: left;
    cursor: pointer;
}

.safe-drive-select-option:hover,
.safe-drive-select-option:focus {
    background: var(--safe-blue-soft);
    outline: none;
}

.safe-drive-error {
    display: none;
    margin-top: 7px;
    color: var(--danger);
    font-weight: 700;
}

.safe-drive-error.is-visible {
    display: block;
}

.safe-drive-field .is-invalid,
.safe-drive-select-trigger.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(204, 23, 23, .12);
}

.safe-drive-submit.button-primary {
    width: 100%;
    min-height: 52px;
    border-color: var(--safe-blue-dark);
    background: var(--safe-blue);
    color: #fff;
    box-shadow: 0 12px 20px rgba(36, 126, 168, .18);
}

.safe-drive-submit.button-primary:hover,
.safe-drive-submit.button-primary:focus {
    background: var(--safe-blue-dark);
    border-color: var(--safe-blue-dark);
    color: #fff;
}

.safe-drive-submit:disabled {
    cursor: wait;
    opacity: .72;
}

.safe-drive-success {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(95, 111, 53, .22);
    background: var(--olive-soft);
    color: var(--olive-dark);
}

.safe-drive-success h3 {
    margin: 0 0 10px;
    font-family: "Manrope", Arial, sans-serif;
}

.safe-drive-success p {
    margin: 8px 0;
    line-height: 1.5;
}

@media (max-width: 820px) {
    .safe-drive-page {
        margin-top: 12px;
    }

    .safe-drive-hero,
    .safe-drive-layout {
        grid-template-columns: 1fr;
    }

    .safe-drive-hero {
        gap: 18px;
        padding: 24px 18px;
        border-radius: 18px;
    }

    .safe-drive-mark {
        width: 86px;
        border-radius: 22px;
        justify-self: start;
    }

    .safe-drive-info-panel,
    .safe-drive-form-panel {
        border-radius: 18px;
    }
}

@media (max-width: 520px) {
    .safe-drive-page {
        width: 100%;
    }

    .safe-drive-hero h1 {
        font-size: 2.6rem;
    }

    .safe-drive-info-grid article {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 0;
        padding: 14px;
    }

    .safe-drive-info-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .safe-drive-info-icon svg {
        width: 23px;
        height: 23px;
    }

    .safe-drive-field input[type="email"],
    .safe-drive-select-trigger,
    .safe-drive-submit.button-primary {
        min-height: 46px;
        font-size: .96rem;
    }
}
.safe-drive-form[hidden],
.safe-drive-success[hidden] {
    display: none !important;
}
.safe-drive-panel-intro {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.5;
}

.safe-drive-form-panel-compact {
    width: 100%;
}

.safe-drive-locked-note {
    min-height: 56px;
    padding: 13px 14px;
    border: 1px solid rgba(47, 67, 31, .16);
    border-radius: 14px;
    background: linear-gradient(135deg, #f6fbfd, var(--safe-blue-soft));
    color: var(--ink);
}

.safe-drive-locked-note strong,
.safe-drive-locked-note span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.safe-drive-locked-note strong {
    color: var(--olive-dark);
    font: 800 1rem/1.25 "Manrope", Arial, sans-serif;
}

.safe-drive-locked-note span {
    margin-top: 3px;
    color: var(--muted);
    font-size: .86rem;
}

.note-detail-safe-drive {
    margin-top: 24px;
}

.note-detail-safe-drive .safe-drive-form-panel {
    --safe-blue: var(--blue);
    --safe-blue-dark: #247ea8;
    --safe-blue-soft: #d9eef8;
}

@media (max-width: 520px) {
    .note-detail-safe-drive {
        margin-top: 18px;
    }
}
.safe-drive-history-panel {
    margin-top: 22px;
    padding: clamp(20px, 3.5vw, 30px);
    border: 1px solid rgba(47, 67, 31, .14);
    border-radius: 20px;
    background: rgba(255, 252, 244, .94);
    box-shadow: 0 12px 26px rgba(24, 32, 24, .08);
}

.safe-drive-history-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(47, 67, 31, .12);
    border-radius: 14px;
    background: #fff;
}

.safe-drive-history-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.safe-drive-history-table th,
.safe-drive-history-table td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(47, 67, 31, .1);
    text-align: left;
    vertical-align: top;
}

.safe-drive-history-table th {
    color: var(--olive-dark);
    background: var(--cream);
    font: 800 .78rem/1.3 "Manrope", Arial, sans-serif;
    text-transform: uppercase;
}

.safe-drive-history-table tbody tr:last-child td {
    border-bottom: 0;
}

.safe-drive-history-table a,
.safe-drive-history-table strong {
    display: block;
    color: var(--olive-dark);
    font-weight: 800;
    text-decoration: none;
}

.safe-drive-history-table a:hover {
    text-decoration: underline;
}

.safe-drive-history-table span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .86rem;
}

.safe-drive-history-table code {
    display: inline-flex;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 7px;
    border-radius: 8px;
    background: #f6fbfd;
    color: var(--safe-blue-dark, #247ea8);
    font-size: .78rem;
    white-space: nowrap;
}

.safe-drive-history-empty {
    margin: 0;
    padding: 18px;
    border-radius: 14px;
    background: var(--cream);
    color: var(--muted);
    font-weight: 700;
}

.note-detail-safe-drive .safe-drive-history-panel {
    margin-top: 18px;
}

@media (max-width: 520px) {
    .safe-drive-history-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .safe-drive-history-table {
        min-width: 640px;
    }
}
.profile-copisteria-button {
    color: var(--olive-dark);
    border-color: rgba(95, 111, 53, .28);
    background: var(--olive-soft);
}

.profile-copisteria-button:hover,
.profile-copisteria-button:focus {
    color: var(--olive-dark);
    background: #c9dfc6;
}

/* Safe Drive official Tabler icon states */
.safe-drive-status {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.safe-drive-status[hidden] {
    display: none !important;
}

.safe-drive-status-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px currentColor;
}

.safe-drive-status-icon svg {
    width: 28px;
    height: 28px;
}

.safe-drive-error-box {
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(204, 23, 23, .22);
    background: #fff1ee;
    color: var(--danger);
}

.safe-drive-error-box h3 {
    margin: 0 0 6px;
    color: var(--danger);
    font-family: "Manrope", Arial, sans-serif;
}

.safe-drive-error-box p {
    margin: 0;
    color: #7b1d17;
    line-height: 1.45;
}

.safe-drive-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.safe-drive-submit svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.safe-drive-mark svg,
.safe-drive-icon svg,
.drawer-safe-drive svg {
    stroke-width: 2;
}

@media (max-width: 520px) {
    .safe-drive-status {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
    }

    .safe-drive-status-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .safe-drive-status-icon svg {
        width: 24px;
        height: 24px;
    }
}
/* Auth email/message pages and Safe Drive notices */
.message-panel {
    width: min(720px, 100%);
    margin: 34px auto 0;
    padding: clamp(24px, 5vw, 40px);
    border: 1px solid rgba(47, 67, 31, .14);
    border-radius: 22px;
    background: rgba(255, 252, 244, .96);
    box-shadow: 0 14px 32px rgba(24, 32, 24, .1);
}

.message-panel .page-heading {
    margin: 0 0 12px;
    color: var(--olive-dark);
    font-family: "Bricolage Grotesque", "Manrope", Arial, sans-serif;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.02;
}

.message-panel .page-text,
.message-help {
    color: var(--muted);
    line-height: 1.62;
}

.message-help {
    margin: 14px 0 0;
    padding: 14px 16px;
    border-left: 5px solid var(--blue);
    border-radius: 14px;
    background: #f6fbfd;
    font-weight: 700;
}

.message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.message-actions.auth-form {
    display: grid;
}

.email-wait-page {
    min-height: calc(100vh - 190px);
}

.email-wait-visual {
    border-color: rgba(85, 173, 213, .24);
    background: linear-gradient(135deg, #fffdf6, #f6fbfd);
}

.email-wait-content {
    padding: clamp(18px, 3vw, 28px);
    border-radius: 22px;
    background: rgba(255, 252, 244, .78);
}

.email-wait-address {
    border-left-color: var(--blue);
    background: linear-gradient(135deg, #f6fbfd, #d9eef8);
    box-shadow: inset 0 0 0 1px rgba(85, 173, 213, .2);
}

.email-wait-address span {
    color: var(--safe-blue-dark, #247ea8);
    font-weight: 800;
    text-transform: uppercase;
}

.email-wait-help {
    color: var(--muted);
}

.safe-drive-empty-notes {
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(85, 173, 213, .28);
    background: linear-gradient(135deg, #f6fbfd, var(--safe-blue-soft, #d9eef8));
    color: var(--olive-dark);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.safe-drive-empty-notes h3 {
    margin: 0 0 7px;
    color: var(--olive-dark);
    font-family: "Manrope", Arial, sans-serif;
}

.safe-drive-empty-notes p {
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.5;
}

.safe-drive-empty-notes .button {
    width: fit-content;
}

.safe-drive-empty-notes.is-highlighted {
    transform: translateY(-2px);
    border-color: var(--safe-blue, var(--blue));
    box-shadow: 0 14px 26px rgba(36, 126, 168, .18);
}

@media (max-width: 560px) {
    .message-panel {
        margin-top: 18px;
        border-radius: 18px;
    }

    .message-actions,
    .message-actions .button,
    .safe-drive-empty-notes .button {
        width: 100%;
    }

    .email-wait-content {
        padding: 0;
        background: transparent;
    }
}
/* Safe Drive file picker and softer submit button */
.safe-drive-file-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px;
    border: 1.5px dashed rgba(36, 126, 168, .34);
    border-radius: 15px;
    background: #f6fbfd;
}

.safe-drive-file-control input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.safe-drive-file-button {
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 0 13px;
    border: 1px solid rgba(36, 126, 168, .28);
    border-radius: 12px;
    background: #fff;
    color: var(--safe-blue-dark, #247ea8) !important;
    font-family: "Manrope", Arial, sans-serif;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.safe-drive-file-button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.safe-drive-file-button:hover,
.safe-drive-file-control input[type="file"]:focus + .safe-drive-file-button {
    border-color: var(--safe-blue, var(--blue));
    background: var(--safe-blue-soft, #d9eef8);
    box-shadow: 0 6px 12px rgba(36, 126, 168, .1);
    transform: translateY(-1px);
}

.safe-drive-file-name {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.safe-drive-submit.button-primary {
    border-color: rgba(36, 126, 168, .42);
    background: #6bb9dc;
    box-shadow: 0 9px 16px rgba(36, 126, 168, .13);
}

.safe-drive-submit.button-primary:hover,
.safe-drive-submit.button-primary:focus {
    border-color: rgba(36, 126, 168, .58);
    background: #55add5;
    box-shadow: 0 10px 18px rgba(36, 126, 168, .16);
    transform: translateY(-1px);
}

@media (max-width: 520px) {
    .safe-drive-file-control {
        grid-template-columns: 1fr;
    }

    .safe-drive-file-button {
        width: 100%;
    }
}
/* Safe Drive dashboard redesign */
.safe-drive-page-redesign {
    --safe-blue: #1f91d0;
    --safe-blue-dark: #0d6f9f;
    --safe-blue-soft: #dff3fb;
    width: min(1180px, 100%);
    margin: 24px auto 0;
    padding: clamp(18px, 3vw, 34px) clamp(14px, 3vw, 28px) 44px;
    overflow: visible;
}

.safe-drive-page-redesign .safe-drive-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: start;
    gap: clamp(24px, 5vw, 72px);
    margin: 0;
    padding: 0 clamp(8px, 2vw, 18px) 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.safe-drive-page-redesign .safe-drive-kicker,
.safe-drive-page-redesign .safe-drive-section-label {
    margin-bottom: 10px;
    background: var(--safe-blue-soft);
    color: var(--safe-blue-dark);
}

.safe-drive-page-redesign .safe-drive-hero h1 {
    color: var(--ink);
    font-size: clamp(3.8rem, 8vw, 6.2rem);
    line-height: .92;
}

.safe-drive-page-redesign .safe-drive-hero p {
    max-width: 650px;
    margin-top: 18px;
    color: var(--ink);
    font-size: clamp(1.08rem, 1.8vw, 1.3rem);
    line-height: 1.44;
}

.safe-drive-page-redesign .safe-drive-mark {
    width: 190px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(85, 173, 213, .2);
    border-radius: 0;
    color: var(--safe-blue-dark);
    background: #d8d8d8;
    box-shadow: none;
}

.safe-drive-page-redesign .safe-drive-mark svg {
    width: 58%;
    height: 58%;
}

.safe-drive-page-redesign .safe-drive-dashboard-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(24px, 4vw, 56px);
    margin-top: 0;
}

.safe-drive-page-redesign .safe-drive-info-panel,
.safe-drive-page-redesign .safe-drive-form-stage {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    align-self: start !important;
    transform: none !important;
}

.safe-drive-page-redesign .safe-drive-info-panel {
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid rgba(47, 67, 31, .14);
    border-radius: 18px;
    background: rgba(255, 252, 244, .96);
    box-shadow: 0 12px 26px rgba(24, 32, 24, .08);
}

.safe-drive-page-redesign .safe-drive-info-panel h2,
.safe-drive-page-redesign .safe-drive-form-panel h2 {
    margin: 0;
    color: var(--olive-dark);
    font-family: "Bricolage Grotesque", "Manrope", Arial, sans-serif;
}

.safe-drive-page-redesign .safe-drive-info-panel h2 {
    font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.safe-drive-page-redesign .safe-drive-info-panel > p {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.62;
}

.safe-drive-page-redesign .safe-drive-info-grid {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.safe-drive-page-redesign .safe-drive-info-grid article {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 16px;
    border: 1px solid rgba(85, 173, 213, .35);
    border-radius: 16px;
    background: var(--safe-blue-soft);
}

.safe-drive-page-redesign .safe-drive-info-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--safe-blue-dark);
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(85, 173, 213, .2);
}

.safe-drive-page-redesign .safe-drive-info-icon svg {
    width: 24px;
    height: 24px;
}

.safe-drive-page-redesign .safe-drive-info-grid h3 {
    margin: 0 0 5px;
    color: var(--olive-dark);
    font-family: "Manrope", Arial, sans-serif;
    font-size: 1rem;
}

.safe-drive-page-redesign .safe-drive-info-grid p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
}

.safe-drive-page-redesign .safe-drive-form-stage {
    margin: 0 !important;
    padding: 16px 18px 16px 16px;
    display: block;
    border-radius: 26px 0 0 26px;
    background: var(--safe-blue);
    box-shadow: 0 18px 36px rgba(36, 126, 168, .14);
}

.safe-drive-page-redesign .safe-drive-form-inner {
    width: 100% !important;
    max-width: none !important;
}

.safe-drive-page-redesign .safe-drive-form-panel {
    width: 100%;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid rgba(13, 111, 159, .12);
    border-radius: 18px;
    background: #fffaf0;
    box-shadow: 0 14px 28px rgba(13, 111, 159, .14);
}

.safe-drive-page-redesign .safe-drive-panel-intro,
.safe-drive-page-redesign .safe-drive-file-name,
.safe-drive-page-redesign .safe-drive-locked-note span,
.safe-drive-page-redesign .safe-drive-empty-notes p,
.safe-drive-page-redesign .safe-drive-success p {
    color: var(--muted);
}

.safe-drive-page-redesign .safe-drive-field label {
    color: var(--olive-dark);
}

.safe-drive-page-redesign .safe-drive-field input[type="email"],
.safe-drive-page-redesign .safe-drive-select-trigger,
.safe-drive-page-redesign .safe-drive-file-control,
.safe-drive-page-redesign .safe-drive-locked-note {
    border-color: rgba(47, 67, 31, .16);
    background: var(--field);
}

.safe-drive-page-redesign .safe-drive-submit.button-primary {
    border-color: rgba(13, 111, 159, .28);
    background: #61d7e7;
    color: #0d1912;
}

.safe-drive-page-redesign .safe-drive-submit.button-primary:hover,
.safe-drive-page-redesign .safe-drive-submit.button-primary:focus {
    background: #7ee3ef;
    color: #0d1912;
}

.safe-drive-page-redesign .safe-drive-illustration-final {
    width: min(100%, 760px);
    max-width: 760px;
    margin: 36px auto 0;
    border: 1px solid rgba(85, 173, 213, .22);
    border-radius: 22px;
    overflow: hidden;
    background: var(--safe-blue-soft);
    box-shadow: 0 18px 34px rgba(36, 126, 168, .14);
}

.safe-drive-page-redesign .safe-drive-illustration-final img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: center 45%;
}

@media (min-width: 1181px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        width: calc(100% + 48px) !important;
        margin-right: -48px !important;
        padding-right: 48px;
    }
}

@media (max-width: 900px) {
    .safe-drive-page-redesign .safe-drive-hero,
    .safe-drive-page-redesign .safe-drive-dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .safe-drive-page-redesign .safe-drive-mark {
        width: 118px;
        justify-self: start;
    }

    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 22px;
    }
}

@media (max-width: 560px) {
    .safe-drive-page-redesign {
        margin-top: 12px;
        padding-inline: 0;
    }

    .safe-drive-page-redesign .safe-drive-hero {
        padding-inline: 14px;
    }

    .safe-drive-page-redesign .safe-drive-hero h1 {
        font-size: 3.45rem;
    }

    .safe-drive-page-redesign .safe-drive-info-panel,
    .safe-drive-page-redesign .safe-drive-form-stage,
    .safe-drive-page-redesign .safe-drive-form-panel,
    .safe-drive-page-redesign .safe-drive-illustration-final {
        border-radius: 18px;
    }

    .safe-drive-page-redesign .safe-drive-info-grid article {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 13px;
    }

    .safe-drive-page-redesign .safe-drive-illustration-final img {
        aspect-ratio: 16 / 10;
    }
}

/* Safe Drive final refinements */
.safe-drive-page-redesign .safe-drive-mark {
    border: 1px solid rgba(85, 173, 213, .24);
    border-radius: 24px;
    background: #f7fcff;
    box-shadow: 0 14px 28px rgba(36, 126, 168, .12);
}

@media (min-width: 901px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        width: calc(100% + max(80px, calc((100vw - 1180px) / 2 + 96px))) !important;
        margin-right: calc(-1 * max(80px, calc((100vw - 1180px) / 2 + 96px))) !important;
        padding-right: max(48px, calc((100vw - 1180px) / 2 + 70px));
        border-radius: 30px 0 0 30px;
    }
}

.safe-drive-page-redesign .safe-drive-illustration-final {
    width: min(100%, 560px);
    max-width: 560px;
    margin-top: 30px;
}

.safe-drive-page-redesign .safe-drive-illustration-final img {
    aspect-ratio: 16 / 8;
}

@media (max-width: 560px) {
    .safe-drive-page-redesign .safe-drive-illustration-final {
        width: 100%;
    }
}
/* Safe Drive hero cleanup */
.safe-drive-page-redesign {
    margin-top: 8px;
    padding-top: 10px;
}

.safe-drive-page-redesign .safe-drive-hero {
    padding-top: 0;
    padding-bottom: 18px;
}

.safe-drive-page-redesign .safe-drive-hero-copy {
    padding-top: 0;
}

.safe-drive-page-redesign .safe-drive-hero h1 {
    position: relative;
    width: fit-content;
    margin-top: 0;
    font-size: clamp(3.35rem, 6.8vw, 5.45rem);
}

.safe-drive-page-redesign .safe-drive-hero h1::after {
    content: "";
    position: absolute;
    left: 5px;
    right: 10px;
    bottom: 4px;
    z-index: -1;
    height: 14px;
    border-radius: 999px;
    background: rgba(188, 219, 240, .78);
}

.safe-drive-page-redesign .safe-drive-hero p {
    max-width: 590px;
    margin-top: 14px;
    font-size: clamp(1rem, 1.55vw, 1.14rem);
    color: var(--muted);
}

.safe-drive-page-redesign .safe-drive-info-panel h2,
.safe-drive-page-redesign .safe-drive-form-panel h2,
.safe-drive-page-redesign .safe-drive-history-panel h2 {
    margin-top: 0;
}

.safe-drive-page-redesign .safe-drive-history-table {
    min-width: 560px;
}

@media (max-width: 560px) {
    .safe-drive-page-redesign .safe-drive-hero h1 {
        font-size: 3rem;
    }
}
/* Safe Drive typography aligned with home */
.safe-drive-page-redesign .safe-drive-hero h1 {
    font-size: clamp(2.8rem, 4vw, 3.6rem);
    line-height: 1;
}

.safe-drive-page-redesign .safe-drive-hero p {
    max-width: 600px;
    font-size: 1.06rem;
    line-height: 1.55;
}

.safe-drive-page-redesign .safe-drive-info-panel h2,
.safe-drive-page-redesign .safe-drive-form-panel h2,
.safe-drive-page-redesign .safe-drive-history-panel h2 {
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    line-height: 1.08;
}

.safe-drive-page-redesign .safe-drive-info-panel > p,
.safe-drive-page-redesign .safe-drive-panel-intro {
    font-size: 1rem;
    line-height: 1.55;
}

.safe-drive-page-redesign .safe-drive-info-grid h3,
.safe-drive-page-redesign .safe-drive-field label {
    font-size: .95rem;
}

.safe-drive-page-redesign .safe-drive-info-grid p,
.safe-drive-page-redesign .safe-drive-file-name,
.safe-drive-page-redesign .safe-drive-error {
    font-size: .88rem;
}

@media (max-width: 720px) {
    .safe-drive-page-redesign .safe-drive-hero h1 {
        font-size: 2.65rem;
    }

    .safe-drive-page-redesign .safe-drive-hero p {
        font-size: .98rem;
        line-height: 1.5;
    }
}

@media (max-width: 430px) {
    .safe-drive-page-redesign .safe-drive-hero h1 {
        font-size: 2.35rem;
    }
}
/* Safe Drive organic band and title motion */
.safe-drive-page-redesign .safe-drive-hero h1 {
    animation: home-title-write 1300ms cubic-bezier(.22,.76,.24,1) both;
}

.safe-drive-page-redesign .safe-drive-form-stage {
    border-radius: 46% 0 0 46% / 52% 0 0 52%;
}

@media (min-width: 901px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 46% 0 0 46% / 52% 0 0 52%;
    }
}

@media (max-width: 900px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .safe-drive-page-redesign .safe-drive-hero h1 {
        opacity: 1;
        transform: none;
        animation: none;
    }
}
/* Safe Drive larger blue band behind share box */
.safe-drive-page-redesign .safe-drive-form-stage {
    padding: 24px 30px 24px 28px;
    min-height: calc(100% + 34px);
}

@media (min-width: 901px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        width: calc(100% + max(112px, calc((100vw - 1180px) / 2 + 128px))) !important;
        margin-right: calc(-1 * max(112px, calc((100vw - 1180px) / 2 + 128px))) !important;
        padding: 28px max(70px, calc((100vw - 1180px) / 2 + 96px)) 28px 34px;
    }
}

@media (max-width: 900px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        min-height: 0;
        padding: 20px;
    }
}
/* Safe Drive blue band shaped closer to home curve */
.safe-drive-page-redesign .safe-drive-form-stage {
    border-radius: 96px 0 0 96px / 44px 0 0 44px;
}

@media (min-width: 901px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 120px 0 0 120px / 52px 0 0 52px;
    }
}

@media (max-width: 900px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 24px;
    }
}
/* Safe Drive blue band intermediate curve */
.safe-drive-page-redesign .safe-drive-form-stage {
    border-radius: 64px 0 0 64px / 48px 0 0 48px;
}

@media (min-width: 901px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 78px 0 0 78px / 56px 0 0 56px;
    }
}

@media (max-width: 900px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 24px;
    }
}
/* Safe Drive v71 size with selected curve radius */
.safe-drive-page-redesign .safe-drive-form-stage {
    border-radius: 86px 0 0 86px / 30px 0 0 30px;
}

@media (min-width: 901px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 112px 0 0 112px / 36px 0 0 36px;
    }
}

@media (max-width: 900px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 24px;
    }
}
/* Safe Drive return to v71 blue band curve */
.safe-drive-page-redesign .safe-drive-form-stage {
    border-radius: 46% 0 0 46% / 52% 0 0 52%;
}

@media (min-width: 901px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 46% 0 0 46% / 52% 0 0 52%;
    }
}

@media (max-width: 900px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 28px;
    }
}
/* Home hero spacing and Safe Drive CTA link mask */
.home-hero {
    padding-bottom: clamp(82px, 8vw, 132px);
}

.home-hero .hero-copy {
    max-width: 690px;
}

.hero-cta-stack {
    width: min(100%, 430px);
    margin: 24px auto 0;
    display: grid;
    justify-items: stretch;
}

.hero-cta-stack .hero-actions {
    justify-content: center;
}

.hero-cta-stack .safe-drive-cta {
    position: relative;
    isolation: isolate;
    color: var(--olive-dark);
    text-decoration: none;
    border-radius: 16px;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.hero-cta-stack .safe-drive-cta::before {
    content: "";
    position: absolute;
    inset: -7px;
    z-index: -1;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(85, 173, 213, .92), rgba(188, 219, 240, .72));
    box-shadow: 0 14px 28px rgba(36, 126, 168, .16);
}

.hero-cta-stack .safe-drive-cta:hover,
.hero-cta-stack .safe-drive-cta:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(36, 126, 168, .38);
    box-shadow: 0 16px 28px rgba(36, 126, 168, .16);
}

@media (max-width: 900px) {
    .home-hero {
        padding-bottom: 64px;
    }

    .hero-cta-stack {
        margin-inline: 0;
        width: min(100%, 460px);
    }
}

@media (max-width: 430px) {
    .hero-cta-stack {
        width: 100%;
    }

    .hero-cta-stack .safe-drive-cta::before {
        inset: -5px;
        border-radius: 18px;
    }
}

/* Safe Drive blue mask: balanced lower curve */
.safe-drive-page-redesign .safe-drive-form-stage {
    border-radius: 46% 0 0 40% / 52% 0 0 44%;
    min-height: 100%;
}

@media (min-width: 901px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 46% 0 0 40% / 52% 0 0 44%;
        padding-top: 28px;
        padding-bottom: 24px;
    }
}

@media (max-width: 900px) {
    .safe-drive-page-redesign .safe-drive-form-stage {
        border-radius: 28px;
        min-height: 0;
    }
}

/* Home Safe Drive as real button with left blue mask */
.hero-cta-stack .safe-drive-cta {
    min-height: 56px;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    margin-top: 14px;
    padding: 10px 16px;
    overflow: visible;
    background: #dff3fb;
    border: 1px solid rgba(36, 126, 168, .24);
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(36, 126, 168, .12);
}

.hero-cta-stack .safe-drive-cta::before {
    inset: -6px auto -6px -28px;
    width: calc(100% + 54px);
    border-radius: 22px 16px 16px 22px;
    background: linear-gradient(90deg, #1f91d0 0%, #55add5 54%, rgba(188, 219, 240, .72) 100%);
    box-shadow: 0 14px 28px rgba(36, 126, 168, .18);
}

.hero-cta-stack .safe-drive-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,.86);
}

.hero-cta-stack .safe-drive-copy strong {
    font-size: .9rem;
    line-height: 1.2;
}

.hero-cta-stack .safe-drive-copy small {
    display: none;
}

.hero-cta-stack .safe-drive-cta:hover,
.hero-cta-stack .safe-drive-cta:focus-visible {
    transform: translateY(-2px);
    background: #e9f7fc;
    box-shadow: 0 16px 28px rgba(36, 126, 168, .17);
}

@media (max-width: 720px) {
    .hero-cta-stack .safe-drive-cta::before {
        inset: -5px auto -5px -14px;
        width: calc(100% + 28px);
        border-radius: 18px;
    }
}
/* Home Safe Drive button: blue band coming from the left */
.hero-cta-stack .safe-drive-cta {
    background: #eaf7fc;
    border: 1px solid rgba(36, 126, 168, .24);
    box-shadow: 0 10px 20px rgba(36, 126, 168, .10);
}

.hero-cta-stack .safe-drive-cta::before {
    top: 0;
    right: 18px;
    bottom: 0;
    left: -96px;
    width: auto;
    border-radius: 30px 16px 16px 30px / 18px 16px 16px 18px;
    background: #1f91d0;
    box-shadow: 0 12px 24px rgba(36, 126, 168, .16);
}

.hero-cta-stack .safe-drive-cta:hover::before,
.hero-cta-stack .safe-drive-cta:focus-visible::before {
    background: #2da2dc;
}

@media (max-width: 720px) {
    .hero-cta-stack .safe-drive-cta::before {
        top: 0;
        right: 14px;
        bottom: 0;
        left: -34px;
        width: auto;
        border-radius: 22px 15px 15px 22px;
    }
}
/* Safe Drive mobile hero: mark beside the title */
@media (max-width: 720px) {
    .safe-drive-page-redesign .safe-drive-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 74px !important;
        align-items: center;
        column-gap: 14px;
        row-gap: 14px;
    }

    .safe-drive-page-redesign .safe-drive-hero-copy {
        display: contents;
    }

    .safe-drive-page-redesign .safe-drive-hero h1 {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        margin: 0;
    }

    .safe-drive-page-redesign .safe-drive-mark {
        grid-column: 2;
        grid-row: 1;
        width: 70px;
        justify-self: end;
        align-self: center;
        border-radius: 18px;
    }

    .safe-drive-page-redesign .safe-drive-mark svg {
        width: 58%;
        height: 58%;
    }

    .safe-drive-page-redesign .safe-drive-hero p {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 0;
    }
}

@media (max-width: 430px) {
    .safe-drive-page-redesign .safe-drive-hero {
        grid-template-columns: minmax(0, 1fr) 62px !important;
        column-gap: 10px;
    }

    .safe-drive-page-redesign .safe-drive-mark {
        width: 60px;
        border-radius: 16px;
    }
}
/* Home Safe Drive CTA: horizontal blue mask behind the button */
.hero-cta-stack .safe-drive-cta {
    width: calc(100% - 72px);
    justify-self: end;
    min-height: 50px;
    margin-top: 18px;
    padding: 8px 18px;
    background: #eef9fd;
    border: 1px solid rgba(13, 111, 159, .28);
    border-radius: 0 15px 15px 0;
    box-shadow: 0 10px 18px rgba(36, 126, 168, .12);
}

.hero-cta-stack .safe-drive-cta::before {
    top: -5px;
    right: -24px;
    bottom: -5px;
    left: -132px;
    width: auto;
    border-radius: 0 32px 32px 0 / 0 24px 24px 0;
    background: #1f91d0;
    box-shadow: 0 12px 24px rgba(36, 126, 168, .16);
}

.hero-cta-stack .safe-drive-cta:hover,
.hero-cta-stack .safe-drive-cta:focus-visible {
    background: #f6fcff;
}

.hero-cta-stack .safe-drive-cta:hover::before,
.hero-cta-stack .safe-drive-cta:focus-visible::before {
    background: #2a9fd8;
}

@media (max-width: 720px) {
    .hero-cta-stack .safe-drive-cta {
        width: calc(100% - 34px);
        border-radius: 0 14px 14px 0;
    }

    .hero-cta-stack .safe-drive-cta::before {
        top: -5px;
        right: -16px;
        bottom: -5px;
        left: -56px;
        border-radius: 0 24px 24px 0;
    }
}

@media (max-width: 430px) {
    .hero-cta-stack .safe-drive-cta {
        width: calc(100% - 22px);
    }

    .hero-cta-stack .safe-drive-cta::before {
        right: -12px;
        left: -42px;
    }
}
/* Home Safe Drive CTA final direction: longer left mask and side entrance */
.hero-cta-stack .safe-drive-cta {
    width: calc(100% - 82px);
    min-height: 50px;
    background: #fffaf0;
    border-color: rgba(13, 111, 159, .22);
    color: var(--olive-dark);
    animation: home-safe-drive-slide 520ms 180ms cubic-bezier(.22,.76,.24,1) both;
}

.hero-cta-stack .safe-drive-cta::before {
    top: -4px;
    right: -24px;
    bottom: -4px;
    left: calc(-1 * max(170px, calc((100vw - min(100vw, 1180px)) / 2 + 150px)));
    width: auto;
    background: #55add5;
    border-radius: 0 30px 30px 0 / 0 22px 22px 0;
    box-shadow: 0 10px 22px rgba(36, 126, 168, .13);
}

.hero-cta-stack .safe-drive-icon {
    background: #f7fcff;
    color: #0d6f9f;
}

.hero-cta-stack .safe-drive-cta:hover,
.hero-cta-stack .safe-drive-cta:focus-visible {
    background: #fffdf7;
}

.hero-cta-stack .safe-drive-cta:hover::before,
.hero-cta-stack .safe-drive-cta:focus-visible::before {
    background: #69b9dc;
}

@keyframes home-safe-drive-slide {
    from { opacity: 0; transform: translateX(-22px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 720px) {
    .hero-cta-stack .safe-drive-cta {
        width: calc(100% - 34px);
    }

    .hero-cta-stack .safe-drive-cta::before {
        left: -88px;
        right: -16px;
        background: #55add5;
        border-radius: 0 24px 24px 0;
    }
}

@media (max-width: 430px) {
    .hero-cta-stack .safe-drive-cta {
        width: calc(100% - 24px);
    }

    .hero-cta-stack .safe-drive-cta::before {
        left: -62px;
        right: -12px;
    }
}
/* Home Safe Drive: separate vector mask from the actual button */
.hero-cta-stack .safe-drive-cta-drawing {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 62px;
    margin-top: 18px;
    display: grid;
    justify-items: end;
    align-items: center;
    animation: home-safe-drive-slide 460ms 120ms cubic-bezier(.22,.76,.24,1) both;
}

.hero-cta-stack .safe-drive-cta-drawing::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 6px;
    bottom: 6px;
    left: calc(-1 * max(190px, calc((100vw - min(100vw, 1180px)) / 2 + 170px)));
    right: -28px;
    background: #55add5;
    border-radius: 0 34px 34px 0 / 0 24px 24px 0;
    box-shadow: 0 10px 22px rgba(36, 126, 168, .13);
}

.hero-cta-stack .safe-drive-cta {
    width: calc(100% - 82px);
    min-height: 48px;
    margin: 0;
    padding: 8px 18px;
    overflow: hidden;
    background: #fffaf0;
    border: 1px solid rgba(13, 111, 159, .22);
    border-radius: 0 15px 15px 0;
    box-shadow: 0 8px 16px rgba(36, 126, 168, .10);
    animation: none;
}

.hero-cta-stack .safe-drive-cta::before {
    content: none;
    display: none;
}

.hero-cta-stack .safe-drive-cta:hover,
.hero-cta-stack .safe-drive-cta:focus-visible {
    transform: translateX(2px);
    background: #fffdf7;
    box-shadow: 0 12px 20px rgba(36, 126, 168, .13);
}

.hero-cta-stack .safe-drive-cta-drawing:has(.safe-drive-cta:hover)::before,
.hero-cta-stack .safe-drive-cta-drawing:has(.safe-drive-cta:focus-visible)::before {
    background: #69b9dc;
}

@media (max-width: 720px) {
    .hero-cta-stack .safe-drive-cta-drawing::before {
        left: -92px;
        right: -16px;
        border-radius: 0 26px 26px 0;
    }

    .hero-cta-stack .safe-drive-cta {
        width: calc(100% - 34px);
    }
}

@media (max-width: 430px) {
    .hero-cta-stack .safe-drive-cta-drawing::before {
        left: -66px;
        right: -12px;
    }

    .hero-cta-stack .safe-drive-cta {
        width: calc(100% - 24px);
    }
}
/* Home Safe Drive wrapper slightly thicker than the button */
.hero-cta-stack .safe-drive-cta-drawing::before {
    top: 3px;
    bottom: 3px;
}

@media (max-width: 720px) {
    .hero-cta-stack .safe-drive-cta-drawing::before {
        top: 4px;
        bottom: 4px;
    }
}
/* Home Safe Drive: visibly thicker mask and softer button corners */
.hero-cta-stack .safe-drive-cta-drawing {
    min-height: 72px;
}

.hero-cta-stack .safe-drive-cta-drawing::before {
    top: 0;
    bottom: 0;
    border-radius: 0 38px 38px 0 / 0 30px 30px 0;
}

.hero-cta-stack .safe-drive-cta {
    min-height: 48px;
    border-radius: 16px 18px 18px 16px;
}

@media (max-width: 720px) {
    .hero-cta-stack .safe-drive-cta-drawing {
        min-height: 68px;
    }

    .hero-cta-stack .safe-drive-cta-drawing::before {
        top: 0;
        bottom: 0;
        border-radius: 0 32px 32px 0;
    }

    .hero-cta-stack .safe-drive-cta {
        border-radius: 15px 17px 17px 15px;
    }
}
/* Home Safe Drive centered under the two main buttons */
.hero-cta-stack .safe-drive-cta-drawing {
    justify-items: center;
}

.hero-cta-stack .safe-drive-cta {
    justify-self: center;
}
/* Drawer Safe Drive palette and softer left edge */
.hamburger-drawer {
    border-radius: 18px 0 0 18px;
    overflow: hidden;
}

.drawer-safe-drive,
.drawer-safe-drive:visited {
    border-color: rgba(13, 111, 159, .24);
    background: #dff3fb;
    color: var(--olive-dark);
    box-shadow: 0 10px 18px rgba(36, 126, 168, .10);
}

.drawer-safe-drive svg {
    color: #0d6f9f;
}

.drawer-safe-drive:hover,
.drawer-safe-drive:focus-visible {
    border-color: rgba(13, 111, 159, .34);
    background: #bcdbf0;
    color: var(--olive-dark);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(36, 126, 168, .14);
}

.drawer-safe-drive:hover svg,
.drawer-safe-drive:focus-visible svg {
    color: #0d6f9f;
}

@media (max-width: 520px) {
    .hamburger-drawer {
        border-radius: 16px 0 0 16px;
    }
}
/* Mobile: compact home search and Safe Drive share band continuing right */
@media (max-width: 720px) {
    .home-search-container {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .home-search-heading h2 {
        font-size: 1.08rem !important;
        line-height: 1.12;
    }

    .home-search-kicker {
        font-size: .66rem !important;
    }

    #home-macroaree {
        gap: 6px !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .home-macroarea-btn {
        min-height: 28px !important;
        padding: 3px 9px !important;
        font-size: .72rem !important;
        border-radius: 999px !important;
    }

    .home-search-container label {
        font-size: .82rem !important;
    }

    .home-search-container input[type="radio"] {
        transform: scale(1.02) !important;
    }

    #home_search_input,
    #home_prof_select {
        min-height: 40px !important;
        padding: .62rem .74rem !important;
        font-size: .86rem !important;
        border-radius: 11px !important;
    }

    #home_search_btn {
        min-height: 40px !important;
        padding: 0 12px !important;
        font-size: .84rem !important;
        border-radius: 11px !important;
    }

    #home_search_results {
        font-size: .86rem !important;
        max-height: 210px !important;
    }

    .safe-drive-page-redesign .safe-drive-form-stage {
        width: calc(100% + 34px) !important;
        margin-right: -34px !important;
        padding: 18px 34px 18px 18px !important;
        border-radius: 24px 0 0 24px !important;
    }
}

@media (max-width: 430px) {
    .home-search-container {
        padding: 10px !important;
    }

    .home-search-container > div[style*="justify-content: center"] {
        gap: 12px !important;
        margin-bottom: 10px !important;
    }

    #home_search_input,
    #home_prof_select {
        font-size: .82rem !important;
    }

    #home_search_btn {
        padding: 0 10px !important;
        font-size: .72rem !important;
    }

    .safe-drive-page-redesign .safe-drive-form-stage {
        width: calc(100% + 26px) !important;
        margin-right: -26px !important;
        padding-right: 26px !important;
    }
}
/* Home vertical realignment after CTA refinements */
.home-hero {
    padding-bottom: clamp(28px, 4vw, 58px);
    row-gap: 0;
}

.home-search-bridge {
    height: 220px;
    margin: -12px auto -104px;
}

.home-community-band {
    margin-top: -76px;
    padding-top: 166px;
}

@media (max-width: 1000px) {
    .home-search-bridge {
        height: 286px;
        margin-top: -4px;
        margin-bottom: -96px;
    }

    .home-community-band {
        margin-top: -68px;
        padding-top: 156px;
    }
}

@media (max-width: 720px) {
    .home-hero {
        padding-bottom: 34px;
        gap: 14px;
    }

    .home-search-bridge {
        height: auto;
        min-height: 0;
        margin: -2px auto -70px;
    }

    .home-community-band {
        margin-top: -58px;
        padding-top: 126px;
        border-radius: 50% 50% 0 0 / 40px 40px 0 0;
    }
}

@media (max-width: 430px) {
    .home-hero {
        padding-bottom: 28px;
    }

    .home-search-bridge {
        margin-bottom: -62px;
    }

    .home-community-band {
        margin-top: -50px;
        padding-top: 116px;
    }
}
/* Home spacing refinements: Safe Drive/search desktop and image/search mobile */
@media (min-width: 1001px) {
    .home-search-bridge {
        margin-top: 20px;
    }
}

@media (max-width: 720px) {
    .home-hero-visual {
        margin-bottom: 20px;
    }

    .home-search-bridge {
        margin-top: 8px;
    }
}

@media (max-width: 430px) {
    .home-hero-visual {
        margin-bottom: 16px;
    }

    .home-search-bridge {
        margin-top: 6px;
    }
}
/* Mobile: push hero image farther below the search box */
@media (max-width: 720px) {
    .home-hero-visual {
        margin-top: 28px !important;
    }
}

@media (max-width: 430px) {
    .home-hero-visual {
        margin-top: 34px !important;
    }
}
/* Mobile: stronger separation between search box and hero image */
@media (max-width: 720px) {
    .home-hero-visual {
        margin-top: 52px !important;
    }
}

@media (max-width: 430px) {
    .home-hero-visual {
        margin-top: 60px !important;
    }
}
/* Mobile: remove extra space after hero image before green section */
@media (max-width: 720px) {
    .home-hero {
        padding-bottom: 0 !important;
    }

    .home-community-band {
        margin-top: -86px;
        padding-top: 104px;
    }
}

@media (max-width: 430px) {
    .home-community-band {
        margin-top: -82px;
        padding-top: 98px;
    }
}
/* Home macroarea icon selector final layout */
.home-search-container #home-macroaree {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}
.home-search-container .home-macroarea-btn {
    min-width: 48px;
}
@media (max-width: 980px) {
    .home-search-container .home-macroarea-label {
        display: none;
    }
    .home-search-container .home-macroarea-btn {
        width: 48px;
        min-width: 48px;
        padding: 0 !important;
        gap: 0;
    }
    .home-search-container .home-macroarea-color {
        display: none;
    }
}
@media (max-width: 720px) {
    .home-search-container #home-macroaree {
        justify-content: space-between !important;
        gap: 5px !important;
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }
    .home-search-container .home-macroarea-btn {
        width: 40px;
        min-width: 40px;
        min-height: 40px !important;
        padding: 0 !important;
        font-size: .72rem !important;
    }
    .home-search-container .home-macroarea-icon,
    .home-search-container .home-macroarea-icon svg {
        width: 19px;
        height: 19px;
    }
}
@media (max-width: 380px) {
    .home-search-container .home-macroarea-btn {
        width: 36px;
        min-width: 36px;
        min-height: 36px !important;
    }
    .home-search-container .home-macroarea-icon,
    .home-search-container .home-macroarea-icon svg {
        width: 16px;
        height: 16px;
    }
}