/* Account gateway: premium local presentation with authentication delegated to the live secure portal. */
.account-page { background: #fff; color: #29322c; }
.account-page main { overflow: clip; }
.account-page :is(h1, h2, h3) { margin-top: 0; color: #244b38; font-family: 'Manrope', sans-serif; letter-spacing: -.045em; text-transform: none; }
.account-page :is(a, button, summary):focus-visible { outline: 2px solid #244b38; outline-offset: 4px; }
.account-container { width: min(1320px, calc(100% - var(--pad) * 2)); margin-inline: auto; }
.account-kicker { margin: 0 0 15px; color: #315944; font-size: 10px; font-weight: 600; letter-spacing: .17em; line-height: 1.5; text-transform: uppercase; }
.account-button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 14px 24px; border: 1px solid #244b38; border-radius: 6px; background: #244b38; color: #fff; font-size: 12px; font-weight: 600; text-align: center; transition: background .18s, color .18s, transform .18s; }
.account-button:hover { background: #183a29; transform: translateY(-1px); }

.account-hero { padding-block: 38px; background: #f3f0e7; }
.account-hero-grid { min-height: 590px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr); overflow: hidden; border: 1px solid #d5ddd2; border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgb(22 54 40 / 10%); }
.account-hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(44px, 7vw, 92px); }
.account-hero h1 { margin-bottom: 0; font-size: clamp(64px, 7.6vw, 110px); font-weight: 500; line-height: .91; letter-spacing: -.065em; }
.account-hero-copy > p:not(.account-kicker) { max-width: 610px; margin: 30px 0 22px; color: #5e685f; font-size: 16px; line-height: 1.8; }
.account-secure-note { display: flex; align-items: center; gap: 10px; max-width: 520px; color: #405247; font-size: 11px; line-height: 1.5; }
.account-secure-note svg { flex: 0 0 25px; width: 25px; fill: none; stroke: #315944; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.account-hero-art { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; background: #183c2c; }
.account-hero-art > span { position: absolute; width: 480px; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 10%); border-radius: 50%; }
.account-hero-art > span:nth-of-type(2) { width: 360px; }
.account-hero-art > span:nth-of-type(3) { width: 240px; background: rgb(255 255 255 / 3%); }
.account-profile-icon { position: relative; z-index: 1; width: 150px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 19%); border-radius: 50%; background: rgb(255 255 255 / 7%); box-shadow: 0 24px 60px rgb(0 0 0 / 15%); }
.account-profile-icon svg { width: 76px; fill: none; stroke: #d1dfd2; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.account-access { padding-block: clamp(78px, 9vw, 126px); background: #fff; }
.account-section-head { display: flex; align-items: end; justify-content: space-between; gap: 60px; margin-bottom: 46px; }
.account-section-head h2 { max-width: 800px; margin-bottom: 0; font-size: clamp(44px, 5.5vw, 76px); font-weight: 500; line-height: 1.04; }
.account-section-head > p { max-width: 490px; margin: 0; color: #5e685f; font-size: 13px; line-height: 1.75; }
.account-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.account-card { position: relative; min-height: 520px; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(36px, 5vw, 62px); overflow: hidden; border: 1px solid #d9e2d7; border-radius: 18px; background: #f7f9f4; box-shadow: 0 18px 48px rgb(36 75 56 / 7%); }
.account-card-register { background: #244b38; }
.account-card-number { position: absolute; top: 34px; right: 38px; color: #93a597; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.account-card-register .account-card-number { color: #9ab09e; }
.account-card-icon { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid #cedbcd; border-radius: 16px; background: #eaf1e7; }
.account-card-icon svg { width: 31px; fill: none; stroke: #244b38; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.account-card-register .account-card-icon { border-color: rgb(255 255 255 / 16%); background: rgb(255 255 255 / 7%); }
.account-card-register .account-card-icon svg { stroke: #d4e2d5; }
.account-card h3 { margin: 62px 0 16px; font-size: clamp(34px, 4vw, 52px); font-weight: 500; }
.account-card-register h3 { color: #fff; }
.account-card > p { max-width: 520px; margin: 0 0 28px; color: #5d6960; font-size: 14px; line-height: 1.8; }
.account-card-register > p { color: #c0cec3; }
.account-card .account-button { margin-top: auto; }
.account-button-light { border-color: #fff; background: #fff; color: #244b38; }
.account-button-light:hover { background: #e7eee7; color: #244b38; }
.account-text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; color: #244b38; font-size: 11px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.account-card .account-privacy { max-width: 480px; margin: 15px 0 0; color: #aebfb2; font-size: 10px; line-height: 1.6; }
.account-privacy a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.account-help { padding: 0 0 clamp(78px, 9vw, 120px); background: #fff; }
.account-help-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: clamp(40px, 6vw, 72px); border-radius: 20px; background: #edf2e9; box-shadow: inset 0 0 0 1px #d6e0d3; }
.account-help-card h2 { margin-bottom: 14px; font-size: clamp(38px, 4.7vw, 64px); font-weight: 500; line-height: 1.05; }
.account-help-card > div:first-child > p:last-child { max-width: 700px; margin: 0; color: #5e695f; font-size: 14px; line-height: 1.75; }
.account-help-actions { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 280px; text-align: center; }
.account-help-actions > a:not(.account-button) { min-height: 40px; display: flex; align-items: center; justify-content: center; color: #244b38; font-size: 11px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.account-page .home-footer-grid h2 { color: #fff; letter-spacing: normal; }
.account-page .home-footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; color: #fff; }

@media (max-width: 980px) {
  .account-hero-grid { min-height: 0; grid-template-columns: 1fr; }
  .account-hero-art { min-height: 480px; }
  .account-section-head { align-items: flex-start; flex-direction: column; gap: 22px; }
  .account-help-card { grid-template-columns: 1fr; }
  .account-help-actions { min-width: 0; width: min(340px, 100%); }
}
@media (max-width: 720px) {
  .account-container { width: calc(100% - 40px); }
  .account-hero { padding-block: 22px; }
  .account-hero-grid { border-radius: 17px; }
  .account-hero-copy { padding: 50px 28px; }
  .account-hero h1 { font-size: clamp(58px, 17vw, 82px); }
  .account-hero-copy > p:not(.account-kicker) { font-size: 14px; }
  .account-hero-art { min-height: 410px; }
  .account-card-grid { grid-template-columns: 1fr; }
  .account-card { min-height: 470px; }
  .account-help-card { gap: 30px; padding: 38px 28px; border-radius: 15px; }
}
@media (max-width: 420px) {
  .account-container { width: calc(100% - 32px); }
  .account-hero-copy { padding-inline: 24px; }
  .account-hero-art { min-height: 360px; }
  .account-card { min-height: 450px; padding: 32px 24px; }
  .account-card .account-button { width: 100%; }
  .account-help-card { padding-inline: 24px; }
  .account-help-actions .account-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .account-page *, .account-page *::before, .account-page *::after { scroll-behavior: auto !important; transition: none !important; }
}