/* An original paper ledger illustration, not an imitation of an app screen. */
.account-page {
  --account-sheet: #f9faf5;
  --account-soft: #e9ede2;
  --account-shadow: rgb(39 63 53 / .1);
}
html[data-theme="dark"] .account-page {
  --account-sheet: #19231d;
  --account-soft: #26352b;
  --account-shadow: rgb(3 9 5 / .38);
}
.account-main { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
.account-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: 24px;
  min-height: 610px;
  padding-block: 52px 58px;
  overflow: clip;
  border-bottom: 1px solid var(--line);
}
.account-intro { position: relative; z-index: 1; padding-bottom: 20px; }
.account-eyebrow { display: flex; align-items: center; gap: 15px; margin: 0; color: var(--muted); font-family: var(--sans); font-size: 12px; letter-spacing: .08em; }
.account-seal { display: inline-grid; place-items: center; width: 28px; height: 32px; border: 1px solid var(--accent); outline: 1px solid var(--accent); outline-offset: -4px; color: var(--accent); font-family: var(--serif); font-size: 19px; line-height: 1; }
.account-intro h1 { margin: 27px 0 25px -4px; font-weight: 400; font-size: clamp(64px, 6.6vw, 94px); line-height: 1.12; letter-spacing: .07em; }
.account-lede { max-width: 23em; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.95; letter-spacing: .03em; }
.account-more { margin-top: 32px; font-size: 18px; gap: 20px; }
.account-more .arrow { width: 42px; }

.account-visual { position: relative; height: 476px; margin: 0; isolation: isolate; }
.account-art { position: absolute; top: -80px; right: -24px; width: 121%; margin: 0; opacity: .4; z-index: -1; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at 54% 50%, #111 35%, transparent 73%); mask-image: radial-gradient(ellipse at 54% 50%, #111 35%, transparent 73%); }
.account-art picture { display: block; width: 100%; }
.account-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
html[data-theme="dark"] .account-page .account-art { opacity: .65; }
.account-book {
  position: absolute;
  top: 22px;
  right: 28px;
  width: 370px;
  padding: 26px 25px 19px 36px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--account-sheet);
  box-shadow: 0 14px 40px var(--account-shadow);
  transform: rotate(-4deg);
  isolation: isolate;
}
.account-book::before { content: ""; position: absolute; inset: 7px -7px -7px 7px; z-index: -1; border: 1px solid var(--line); border-radius: 2px; background: var(--account-sheet); }
.account-book::after { content: ""; position: absolute; top: 15px; bottom: 15px; left: 21px; width: 1px; background: var(--accent); opacity: .3; }
.book-heading { display: flex; align-items: center; justify-content: space-between; }
.book-heading p { margin: 0; font-size: 22px; letter-spacing: .12em; }
.book-stamp { display: inline-grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; }
.book-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 23px; margin-bottom: 14px; }
.book-total > span { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.book-total strong { font-family: Georgia, "Times New Roman", serif; font-size: 37px; font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; }
.book-total small { margin-right: 5px; font-size: 20px; }
.book-entry { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 13px; border-top: 1px solid var(--line); }
.book-entry > div { display: flex; align-items: center; gap: 16px; }
.book-entry > div > span { font-size: 15px; }
.book-entry small { color: var(--muted); font-size: 11px; }
.book-amount { font-family: var(--sans); font-size: 15px; font-variant-numeric: tabular-nums; }
.book-footnote { margin: 14px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .05em; }
.account-slip { position: absolute; left: -8px; bottom: 60px; width: 247px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 2px; background: var(--account-sheet); box-shadow: 0 9px 26px var(--account-shadow); transform: rotate(3deg); }
.slip-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; color: var(--muted); font-size: 12px; letter-spacing: .05em; }
.slip-heading span { color: var(--accent); font-size: 10px; }
.slip-merchant { margin: 0 0 5px; font-size: 16px; }
.slip-amount { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 29px; line-height: 1.3; }
.slip-amount span { margin-right: 4px; font-size: 17px; }
.slip-confirm { margin: 13px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--accent); font-size: 12px; }
.account-visual figcaption { position: absolute; bottom: 0; left: 0; right: 0; color: var(--muted); font-family: var(--sans); font-size: 12px; line-height: 1.8; letter-spacing: .03em; text-align: center; }

.account-features { scroll-margin-top: 0; padding-top: 62px; }
.account-section-heading { margin-bottom: 34px; }
.account-section-heading h2 { margin: 0; font-weight: 400; font-size: 36px; line-height: 1.4; letter-spacing: .05em; }
.account-section-heading p { margin: 16px 0 0; color: var(--muted); font-size: 17px; line-height: 1.8; }
.account-feature { display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; gap: 80px; padding-block: 42px; border-top: 1px solid var(--line); }
.feature-copy h3 { margin: 0 0 14px; font-size: 26px; font-weight: 400; letter-spacing: .06em; }
.feature-copy p { max-width: 25em; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.95; }
.account-flow { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 22px; padding: 0; margin: 0; list-style: none; }
.account-flow li { position: relative; display: flex; flex-direction: column; gap: 10px; }
.account-flow li + li::before { content: "→"; position: absolute; left: -20px; top: 2px; color: var(--muted); font-family: var(--sans); font-size: 12px; }
.account-flow span { font-size: 16px; line-height: 1.5; white-space: nowrap; }
.account-flow small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ledger-notes { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ledger-categories { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.ledger-categories span { padding: 7px 14px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); font-size: 15px; }
.ledger-notes > p:last-child { margin: 0; color: var(--muted); font-size: 14px; letter-spacing: .03em; }
.ledger-notes > p:last-child span { margin-inline: 12px; }
.sync-note { display: flex; align-items: center; gap: 23px; }
.sync-seal { display: inline-grid; place-items: center; flex: 0 0 42px; width: 42px; height: 46px; border: 1px solid var(--accent); color: var(--accent); font-size: 25px; }
.sync-note p { margin: 0 0 10px; font-size: 18px; line-height: 1.5; }
.sync-note div > span { color: var(--muted); font-size: 13px; line-height: 1.7; }

.account-details { display: grid; grid-template-columns: 1fr 1.08fr; gap: 80px; padding-block: 46px 66px; border-top: 1px solid var(--line); }
.account-details h2 { margin: 0 0 24px; font-size: 23px; font-weight: 400; letter-spacing: .06em; }
.account-info dl { display: grid; gap: 15px; margin: 0; }
.account-info dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: baseline; line-height: 1.6; }
.account-info dt { color: var(--muted); font-size: 13px; }
.account-info dd { margin: 0; font-size: 15px; }
.account-info code { font-family: var(--sans); font-size: 12px; overflow-wrap: anywhere; letter-spacing: .02em; }
.account-developer { margin: 0 0 18px; font-size: 23px; }
.account-email { max-width: 100%; gap: 12px; font-size: 15px; letter-spacing: .01em; overflow-wrap: anywhere; }
.account-email .arrow { width: 32px; }

@media (max-width: 1100px) {
  .account-main { width: calc(100% - 72px); }
  .account-hero { grid-template-columns: 1fr 1.08fr; gap: 12px; min-height: 568px; padding-block: 38px 44px; }
  .account-intro h1 { font-size: 74px; }
  .account-lede { font-size: 16px; }
  .account-desktop-break { display: none; }
  .account-visual { height: 464px; }
  .account-book { right: 15px; width: 325px; padding: 24px 22px 18px 32px; }
  .book-total strong { font-size: 33px; }
  .book-entry > div { gap: 12px; }
  .account-slip { left: -12px; width: 218px; }
  .account-feature, .account-details { gap: 36px; }
  .account-flow { gap: 18px; }
  .account-flow span { font-size: 14px; }
  .account-flow small { font-size: 11px; }
}
@media (max-width: 900px) {
  .account-flow { grid-template-columns: 1fr; gap: 18px; }
  .account-flow li { flex-direction: row; justify-content: space-between; gap: 12px; }
  .account-flow li + li::before { content: none; }
  .ledger-categories { gap: 8px; }
  .ledger-categories span { padding-inline: 11px; font-size: 14px; }
  .ledger-notes > p:last-child { font-size: 12px; }
  .ledger-notes > p:last-child span { margin-inline: 6px; }
  .sync-note { gap: 15px; }
  .sync-note p { font-size: 16px; }
}
@media (max-width: 767px) {
  .account-main { width: calc(100% - 48px); }
  .account-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 44px 35px; min-height: auto; overflow: visible; }
  .account-intro { padding-bottom: 0; }
  .account-eyebrow { font-size: 11px; }
  .account-intro h1 { margin-top: 23px; margin-bottom: 19px; font-size: clamp(57px, 16vw, 72px); }
  .account-lede { max-width: none; font-size: 16px; }
  .account-more { margin-top: 24px; font-size: 16px; }
  .account-visual { width: 100%; height: 405px; }
  .account-art { top: -54px; right: -20px; width: 110%; }
  .account-book { top: 15px; right: 10px; width: min(305px, 88%); padding: 23px 20px 18px 31px; }
  .book-heading p { font-size: 20px; }
  .book-total { margin-top: 20px; }
  .book-total strong { font-size: 32px; }
  .book-entry { padding-block: 12px; }
  .book-entry > div { gap: 10px; }
  .book-entry > div > span { font-size: 14px; }
  .book-amount { font-size: 14px; }
  .account-slip { left: 0; bottom: 48px; width: 207px; padding: 15px 18px; }
  .slip-heading { margin-bottom: 10px; }
  .slip-merchant { font-size: 15px; }
  .slip-amount { font-size: 26px; }
  .slip-confirm { margin-top: 10px; padding-top: 8px; font-size: 11px; }
  .account-visual figcaption { font-size: 11px; }
  .account-features { padding-top: 36px; }
  .account-section-heading { margin-bottom: 24px; }
  .account-section-heading h2 { font-size: 27px; letter-spacing: .035em; }
  .account-section-heading p { margin-top: 12px; font-size: 15px; }
  .account-feature { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 30px; }
  .feature-copy h3 { font-size: 24px; margin-bottom: 12px; }
  .feature-copy p { max-width: none; font-size: 15px; line-height: 1.95; }
  .account-flow { grid-template-columns: 1fr 1.25fr 1fr; gap: 14px; padding-block: 8px; }
  .account-flow li { flex-direction: column; gap: 7px; }
  .account-flow span { font-size: 13px; }
  .account-flow small { font-size: 10px; }
  .account-flow li + li::before { content: "→"; left: -14px; top: 2px; font-size: 10px; }
  .ledger-notes { gap: 16px; }
  .ledger-categories { gap: 10px; }
  .ledger-categories span { font-size: 13px; padding: 6px 13px; }
  .ledger-notes > p:last-child { font-size: 13px; }
  .sync-note { gap: 18px; }
  .sync-note p { font-size: 16px; }
  .sync-note div > span { font-size: 12px; }
  .account-details { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 32px 42px; }
  .account-details h2 { font-size: 22px; margin-bottom: 22px; }
  .account-contact { padding-top: 28px; border-top: 1px solid var(--line); }
  .account-email { font-size: 14px; }
  .account-email .arrow { width: 26px; }
}
@media (max-width: 360px) {
  .account-main { width: calc(100% - 40px); }
  .account-art { right: -12px; width: 110%; }
  .account-book { right: 7px; width: 91%; padding-right: 16px; }
  .book-entry > div { gap: 7px; }
  .book-total strong { font-size: 29px; }
  .book-total > span { font-size: 11px; }
  .book-heading p { font-size: 18px; }
  .account-flow { gap: 10px; }
  .account-flow span { font-size: 11px; }
  .account-flow small { font-size: 9px; }
  .account-flow li + li::before { left: -11px; font-size: 9px; }
  .account-email { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .account-page *, .account-page *::before, .account-page *::after { animation: none; transition: none; } }
@media (forced-colors: active) { .account-art { display: none; } .account-book, .account-book::before, .account-slip { box-shadow: none; border-color: CanvasText; } }