.account-page {
    max-width: 1080px;
    margin: 28px auto 72px;
    padding: 0 24px;
}

.account-breadcrumb {
    margin-bottom: 14px;
    color: #607384;
    font-size: 0.9rem;
}

.account-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: #93a3af;
}

.account-breadcrumb a,
.account-body a {
    color: #215f8f;
    text-underline-offset: 3px;
}

.account-article {
    overflow: hidden;
    border: 1px solid var(--brand-line, rgba(37, 63, 48, 0.14));
    border-radius: 20px;
    background: #fffdf8;
    box-shadow: var(--brand-shadow, 0 8px 20px rgba(38, 54, 42, 0.1));
}

.account-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: end;
    padding: clamp(32px, 6vw, 64px);
    border-bottom: 1px solid var(--brand-line, rgba(37, 63, 48, 0.14));
    background: linear-gradient(135deg, #fffdf8 0%, #f2f8f3 100%);
}

.account-eyebrow {
    margin: 0 0 12px;
    color: #52675a;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-code {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 16px;
    padding: 7px 13px;
    border: 1px solid #a9c7b3;
    border-radius: 8px;
    background: #edf7f0;
    color: #174b30;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.account-hero h1 {
    max-width: 16ch;
    margin: 0;
    color: #1b2a21;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.account-lead {
    max-width: 68ch;
    margin: 18px 0 0;
    color: #52645a;
    font-size: 1.06rem;
    line-height: 1.75;
}

.account-facts {
    margin: 0;
    border-top: 2px solid #24794a;
}

.account-facts div {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #dbe5dc;
}

.account-facts dt {
    color: #68786e;
    font-size: 0.84rem;
    font-weight: 750;
}

.account-facts dd {
    margin: 0;
    color: #203a2a;
    font-weight: 800;
}

.account-body {
    padding: clamp(28px, 5vw, 54px);
}

.account-body h2 {
    max-width: 26ch;
    margin: 40px 0 12px;
    color: #203a2a;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.18;
}

.account-body h2:first-child {
    margin-top: 0;
}

.account-body h3 {
    margin: 24px 0 8px;
    color: #294c36;
}

.account-body p,
.account-body li {
    max-width: 74ch;
    color: #4f6256;
    font-size: 1rem;
    line-height: 1.78;
}

.account-answer {
    margin: 0 0 32px;
    padding: 20px 22px;
    border-left: 5px solid #24794a;
    background: #f1f8f3;
}

.account-answer strong {
    display: block;
    margin-bottom: 6px;
    color: #174b30;
}

.account-answer p {
    margin: 0;
}

.account-booking {
    max-width: 760px;
    margin: 20px 0 28px;
    border: 1px solid #cfdcd2;
    background: #ffffff;
}

.account-booking-head {
    padding: 13px 16px;
    background: #203a2a;
    color: #ffffff;
    font-weight: 800;
}

.account-booking-row {
    display: grid;
    grid-template-columns: 86px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px 16px;
    border-top: 1px solid #e0e7e1;
}

.account-booking-side {
    color: #52675a;
    font-size: 0.82rem;
    font-weight: 850;
    text-transform: uppercase;
}

.account-booking-name {
    color: #203a2a;
    font-weight: 800;
}

.account-booking-amount {
    color: #203a2a;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.account-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 860px;
    margin: 18px 0 28px;
}

.account-compare section {
    padding: 20px;
    border-top: 3px solid #7a9a83;
    background: #f8faf7;
}

.account-compare h3 {
    margin-top: 0;
}

.account-related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 920px;
    margin-top: 18px;
}

.account-related a {
    display: block;
    min-height: 100%;
    padding: 17px;
    border: 1px solid #cad8cd;
    background: #ffffff;
    text-decoration: none;
}

.account-related a:hover {
    border-color: #24794a;
    background: #f4faf5;
}

.account-related strong,
.account-related span {
    display: block;
}

.account-related strong {
    color: #203a2a;
}

.account-related span {
    margin-top: 5px;
    color: #5e7064;
    font-size: 0.9rem;
    line-height: 1.5;
}

.account-source {
    margin-top: 38px;
    padding-top: 18px;
    border-top: 1px solid #d5dfd7;
    color: #65766b;
    font-size: 0.9rem;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 24px;
}

.account-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #aabdb0;
    border-radius: 8px;
    background: #ffffff;
    color: #234a32;
    text-decoration: none;
    font-weight: 800;
}

.account-actions a:first-child {
    border-color: #24794a;
    background: #24794a;
    color: #ffffff;
}

.account-page a:focus-visible,
.account-page button:focus-visible,
.seo-public-header a:focus-visible {
    outline: 3px solid var(--brand-focus, #155eef);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .account-hero,
    .account-compare,
    .account-related {
        grid-template-columns: 1fr;
    }

    .account-hero {
        align-items: start;
    }

    .account-booking-row {
        grid-template-columns: 70px 1fr;
    }

    .account-booking-amount {
        grid-column: 2;
    }

    .account-actions a {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-page *,
    .account-page *::before,
    .account-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
