:root {
  --ink: #121212;
  --paper: #fff;
  --accent: #2de89d;
  --soft-sky: #bcebed;
  --soft-sun: #ecf479;
  --border: rgb(18 18 18 / 16%);
  --muted: rgb(18 18 18 / 57%);
  --faint: rgb(18 18 18 / 7%);
  --radius: 16px;
  font-family: Figtree, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }

.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: 156px; height: 40px; }
.app-header { display: flex; position: relative; z-index: 3; align-items: center; justify-content: space-between; width: min(100% - 100px, 1400px); margin: 0 auto; padding-top: 31px; }
.account { position: relative; }
.account-trigger { display: inline-flex; align-items: center; gap: 11px; padding: 0; border: 0; background: transparent; font-weight: 700; }
.avatar { display: grid; width: 35px; height: 35px; place-items: center; overflow: hidden; border-radius: 8px; background: var(--accent); font-size: 12px; font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-menu { position: absolute; top: calc(100% + 13px); right: 0; z-index: 5; width: 214px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--paper); box-shadow: 0 14px 35px rgb(18 18 18 / 12%); }
.account-menu button, .account-menu a { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 12px; }
.account-menu button:hover, .account-menu a:hover { background: var(--faint); }
.account-menu svg, .composer svg, .button svg, .file-chip svg, .attached-doc svg { width: 15px; height: 15px; stroke-width: 1.7; }
.account-menu .danger { color: #c82b2b; }
.menu-credit { padding: 8px 9px 10px; color: var(--muted); font-size: 12px; }

.app-background { position: relative; min-height: 100vh; overflow-x: hidden; background: #c9f1f3 url('images/gradient-background.png') center top / 100% auto repeat-y; }
html:has(body.app-background) { background: #c9f1f3 url('images/gradient-background.png') center top / 100% auto repeat-y; }
.hero { position: relative; z-index: 1; padding: 284px 24px 0; text-align: center; }
.hero h1 { margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 4vw, 64px); font-weight: 400; letter-spacing: .015em; line-height: 1; }
.hero h1 span { color: var(--paper); }
.hero p { margin: 20px 0 0; font-size: 14px; }
.composer { position: relative; z-index: 1; width: min(100% - 48px, 850px); margin: 66px auto 0; padding: 20px 37px 19px; border: 0; border-radius: 16px; background: var(--paper); box-shadow: 0 16px 38px rgb(18 18 18 / 4%); text-align: left; }
.composer textarea { display: block; width: 100%; min-height: 55px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--ink); line-height: 1.45; }
.composer textarea::placeholder { color: var(--muted); }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.composer-tools { display: flex; gap: 8px; }
.icon-button { display: inline-grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.icon-button:hover { background: var(--faint); color: var(--ink); }
.send-button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); }
.send-button:disabled { cursor: not-allowed; opacity: .35; }
.file-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.file-chip { display: inline-flex; max-width: 100%; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); font-size: 11px; }
.file-chip span { overflow: hidden; max-width: 180px; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { display: grid; width: 16px; height: 16px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--faint); }
.upload-state { display: flex; align-items: center; gap: 9px; padding: 7px 0 0; color: var(--muted); font-size: 11px; }
.upload-state .progress { width: 96px; height: 4px; overflow: hidden; border-radius: 99px; background: var(--faint); }.upload-state .progress i { display: block; width: 70%; height: 100%; background: var(--accent); }

.projects { position: relative; z-index: 1; width: min(100% - 190px, 1400px); margin: 174px auto 64px; padding: 39px 55px 54px; border-radius: 32px; background: var(--paper); }
.projects-heading { margin-bottom: 47px; }.projects h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.04em; }
.project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 35px; }
.project-card { display: flex; min-width: 0; flex-direction: column; gap: 11px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--paper); text-align: left; transition: transform .18s ease, box-shadow .18s ease; }
.project-card:hover { box-shadow: 0 12px 26px rgb(18 18 18 / 10%); transform: translateY(-3px); }
.paper-preview { position: relative; height: 116px; overflow: hidden; padding: 13px; background: var(--paper); color: rgb(18 18 18 / 68%); font-family: 'Times New Roman', serif; font-size: 5px; line-height: 1.25; }
.paper-preview::before { position: absolute; inset: 0; border: 1px solid rgb(18 18 18 / 7%); content: ''; pointer-events: none; }.paper-preview p { margin: 0; }
.project-card strong { overflow: hidden; font-size: 16px; font-weight: 600; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }.project-card small { color: var(--muted); font-size: 10px; }
.empty-projects { grid-column: 1/-1; padding: 46px; border: 1px dashed var(--border); border-radius: 16px; color: var(--muted); text-align: center; }
.app-footer { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 30px; width: min(100% - 190px, 1400px); margin: 0 auto 66px; padding: 40px 55px; border-radius: 32px; background: var(--paper); font-size: 12px; }.app-footer p { margin: 0; color: var(--muted); line-height: 1.7; }.app-footer .brand-logo { width: 117px; height: 30px; }

.modal { position: fixed; inset: 0; z-index: 20; display: none; padding: 24px; background: rgb(18 18 18 / 35%); overflow-y: auto; }.modal.is-open { display: grid; place-items: center; }.modal-card { position: relative; width: min(100%, 430px); max-height: calc(100vh - 48px); overflow: auto; padding: 27px; border-radius: 14px; background: var(--paper); box-shadow: 0 24px 70px rgb(18 18 18 / 22%); }.modal-card.wide { width: min(100%, 1220px); padding: 0; }.modal-card h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.04em; }.modal-card > p { margin: 13px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.55; }.modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 19px; }.modal-close:hover { background: var(--faint); }
.modal-illustration-image { display: block; width: 118px; height: 128px; margin: 0 auto 18px; object-fit: contain; }.modal-center { text-align: center; }.modal-center h3 { font-size: 18px; }.modal-center > p { max-width: 310px; margin-inline: auto; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 600; transition: transform .15s, background .15s; }.button:hover { transform: translateY(-1px); }.button.primary { background: var(--ink); color: var(--paper); }.button.accent { border-color: var(--accent); background: var(--accent); }.button.full { width: 100%; }.button-row { display: flex; gap: 10px; }.button-row .button { flex: 1; }.button.loading { pointer-events: none; opacity: .55; }
.cost-breakdown { display: grid; gap: 11px; margin: 20px 0; padding: 15px; border-radius: 9px; background: var(--faint); font-size: 12px; }.cost-breakdown > div { display: flex; justify-content: space-between; gap: 16px; }.cost-breakdown strong { font-weight: 600; }.price-value { margin: 5px 0 20px; font-size: 32px; font-weight: 600; letter-spacing: -.07em; }.tiny { color: var(--muted); font-size: 10px; line-height: 1.4; }
.form-field { display: grid; gap: 7px; margin-bottom: 14px; font-size: 11px; font-weight: 600; }.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 42px; padding: 11px 12px; outline: none; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); font-size: 12px; font-weight: 400; }.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--ink); }.form-field textarea { min-height: 85px; resize: vertical; }.field-hint { color: var(--muted); font-size: 10px; font-weight: 400; }
.upload-box { display: grid; min-height: 113px; place-items: center; padding: 18px; border: 1px dashed var(--border); border-radius: 9px; color: var(--muted); text-align: center; font-size: 11px; }.upload-box svg { width: 20px; height: 20px; }.upload-box input { display: none; }
.profile-photo { display: flex; align-items: center; gap: 13px; margin: 16px 0 22px; }.profile-photo .avatar { width: 48px; height: 48px; border-radius: 50%; }.profile-photo label { font-size: 11px; font-weight: 600; }.profile-photo input { display: none; }
.transaction-list { display: grid; gap: 2px; }.transaction { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--border); }.transaction-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--faint); font-size: 12px; }.transaction strong, .transaction small { display: block; }.transaction strong { font-size: 11px; font-weight: 600; }.transaction small { margin-top: 3px; color: var(--muted); font-size: 10px; }.transaction .positive { color: #087746; }.transaction .negative { color: var(--ink); }.receipt-thumb { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 4px; object-fit: cover; cursor: zoom-in; }
.referral-copy { display: flex; gap: 7px; margin: 16px 0; }.referral-copy input { min-width: 0; flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 11px; }.referral-copy .button { padding-inline: 12px; }

.document-modal { display: grid; min-height: min(730px, calc(100vh - 48px)); grid-template-columns: 250px 1fr; }.document-sidebar { padding: 32px 22px; border-right: 1px solid var(--border); }.document-sidebar h3 { padding-right: 20px; font-size: 15px; line-height: 1.2; }.task-details { margin-top: 32px; }.task-details summary { cursor: pointer; font-size: 13px; font-weight: 600; }.task-details dl { display: grid; gap: 15px; margin: 21px 0 0; }.task-details dt { margin-bottom: 4px; color: var(--muted); font-size: 10px; }.task-details dd { margin: 0; font-size: 11px; line-height: 1.45; }.attached-docs { display: flex; flex-wrap: wrap; gap: 7px; }.attached-doc { display: inline-flex; max-width: 100%; align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--border); border-radius: 6px; font-size: 9px; }.attached-doc span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.metric-row { display: flex; gap: 15px; }.metric { font-size: 11px; }.metric b { display: block; margin-top: 4px; font-size: 13px; }.export-menu { position: relative; margin-top: 26px; }.export-menu > .button { width: 100%; }.export-options { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; display: none; padding: 5px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); box-shadow: 0 8px 22px rgb(18 18 18 / 13%); }.export-options.is-open { display: grid; }.export-options a { padding: 8px; border-radius: 6px; font-size: 11px; }.export-options a:hover { background: var(--faint); }
.document-main { overflow: auto; padding: 27px; background: rgb(18 18 18 / 3%); }.receipt-image { display: block; width: 100%; max-height: 76vh; object-fit: contain; }

.auth-page { display: grid; min-height: 100vh; grid-template-rows: 1fr auto; padding: 25px 34px 15px; }.auth-card { width: min(100%, 392px); margin: auto; }.auth-brand { display: flex; justify-content: center; margin-bottom: 38px; }.auth-card h1 { margin: 0; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: -.04em; }.auth-card .subtitle { margin: 11px 0 30px; color: var(--muted); text-align: center; font-size: 10px; }.auth-card .form-field { margin-bottom: 15px; }.auth-card .button { min-height: 38px; }.auth-switch { margin: 10px 0 0; color: var(--muted); text-align: center; font-size: 10px; }.auth-switch a { color: var(--ink); font-weight: 600; }.auth-footer { color: var(--muted); font-size: 8px; }.flash { margin: 0 0 17px; padding: 10px; border: 1px solid rgb(200 43 43 / 30%); border-radius: 7px; background: rgb(200 43 43 / 6%); font-size: 11px; }.step-progress { display: flex; height: 2px; gap: 5px; margin: 20px 0 27px; }.step-progress i { flex: 1; background: var(--border); }.step-progress i.active { background: var(--ink); }.signup-step { display: none; }.signup-step.is-active { display: block; }.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.choice { min-height: 36px; padding: 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--paper); font-size: 10px; }.choice.is-selected { border-color: var(--accent); background: var(--accent); }.auth-actions { display: flex; gap: 10px; margin-top: 24px; }.auth-actions .button { flex: 1; }

.landing { min-height: 100vh; background: var(--paper); }.landing-page { min-height: 100vh; overflow-x: hidden; background: var(--paper); }.landing-promo { display: flex; height: 48px; align-items: center; gap: 91px; overflow: hidden; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; white-space: nowrap; }.landing-promo span { flex: 0 0 auto; }.landing-promo span:first-child { margin-left: 148px; }.landing-promo i { display: block; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--paper); }.landing-hero { height: 732px; overflow: hidden; background: #d9f1f8 url('images/gradient-background.png') center top / 100% auto no-repeat; text-align: center; }.landing-header { display: flex; align-items: center; justify-content: space-between; padding: 59px 83px 0 64px; }.landing-header .brand-logo { width: 220px; height: auto; }.landing-nav { display: flex; align-items: center; gap: 18px; }.landing-login, .landing-start, .landing-cta { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; font-weight: 600; }.landing-login { width: 125px; background: var(--paper); color: var(--ink); }.landing-start, .landing-cta { width: 150px; background: var(--ink); color: var(--paper); }.landing-hero-copy { margin-top: 133px; }.landing-hero h1 { margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 0; line-height: 1.2; }.landing-hero-copy p { width: min(100% - 48px, 688px); margin: 22px auto 0; font-size: 14px; line-height: 1.25; }.landing-composer { position: relative; display: flex; width: 768px; height: 154px; margin: 116px auto 0; align-items: stretch; border-radius: 24px; background: var(--paper); text-align: left; }.landing-composer textarea { width: 100%; min-height: 100%; padding: 19px 72px 54px 34px; resize: none; border: 0; outline: 0; background: transparent; color: #313131; font-size: 14px; line-height: 1.45; }.landing-composer textarea::placeholder { color: #313131; opacity: 1; }.landing-composer-tools { position: absolute; right: 29px; bottom: 26px; left: 34px; display: flex; align-items: center; justify-content: space-between; }.landing-composer-tools span { color: var(--muted); }.landing-composer-tools button { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); }.landing-composer svg, .landing-benefits svg, .landing-testimonials svg, .landing-faq svg { width: 16px; height: 16px; stroke-width: 1.8; }.landing-intro { padding: 167px 24px 0; text-align: center; }.landing-intro h2, .landing-benefits h2, .landing-steps h2, .landing-testimonials h2, .landing-faq h2, .landing-final-cta h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 1.2; }.landing-intro p { width: min(100% - 48px, 589px); margin: 57px auto 28px; font-size: 12px; line-height: 20px; }.landing-benefits { width: min(100% - 160px, 1440px); margin: 140px auto 0; padding: 47px 70px 33px; border: 1px solid rgb(251 228 228); border-radius: 16px; background: var(--paper); box-shadow: 4px 4px 12px rgb(18 18 18 / 25%); text-align: center; }.landing-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 86px; margin: 50px auto 31px; }.landing-benefit-grid article { display: grid; justify-items: center; }.landing-benefit-grid span, .landing-testimonials footer span { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 12px; background: #caf6ea; color: var(--ink); }.landing-benefit-grid h3 { margin: 18px 0 0; font-family: 'Bebas Neue', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.2; }.landing-benefit-grid p { width: min(100%, 276px); margin: 8px auto 0; color: rgb(18 18 18 / 57%); font-size: 12px; line-height: 1.2; }.landing-steps { position: relative; width: min(100% - 320px, 910px); margin: 98px auto 0; padding-bottom: 118px; }.landing-steps h2 { text-align: center; }.landing-step-list { display: grid; gap: 75px; margin-top: 72px; }.landing-step-list article { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: center; }.landing-step-list article:not(:last-child)::after { position: absolute; top: 60px; left: 29px; width: 1px; height: 75px; background: #ade8f3; content: ''; }.landing-step-list span { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 50%; background: #caf6ea; font-size: 24px; font-weight: 300; }.landing-step-list h3 { margin: 0; font-size: 16px; font-weight: 700; }.landing-step-list p { margin: 7px 0 0; color: rgb(18 18 18 / 57%); font-size: 12px; }.landing-steps-cta { position: absolute; right: 0; bottom: 100px; }.landing-stats { display: grid; grid-template-columns: repeat(3, 1fr); height: 166px; align-items: center; background: #caf6ea; text-align: center; }.landing-stats strong { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 48px; font-weight: 400; line-height: 1; }.landing-stats span { display: block; margin-top: 13px; font-size: 16px; }.landing-testimonials { width: min(100% - 480px, 1120px); margin: 126px auto 0; }.landing-testimonials h2 { text-align: left; }.landing-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 113px; margin-top: 42px; }.landing-testimonial-grid article > p { min-height: 121px; margin: 0; font-size: 14px; line-height: 1.3; }.landing-testimonials footer { display: flex; align-items: center; gap: 11px; }.landing-testimonials footer span { width: 52px; height: 52px; border-radius: 50%; }.landing-testimonials strong, .landing-testimonials small { display: block; }.landing-testimonials strong { font-size: 14px; font-weight: 600; }.landing-testimonials small { margin-top: 3px; color: rgb(18 18 18 / 57%); font-size: 11px; }.landing-faq { width: min(100% - 640px, 704px); margin: 146px auto 0; }.landing-faq h2 { text-align: center; }.landing-faq-list { display: grid; gap: 33px; margin-top: 60px; }.landing-faq details { border: 0; }.landing-faq summary { display: flex; align-items: center; justify-content: space-between; list-style: none; font-size: 16px; font-weight: 600; cursor: pointer; }.landing-faq summary::-webkit-details-marker { display: none; }.landing-faq details[open] summary svg { transform: rotate(180deg); }.landing-faq details p { margin: 24px 0 0; font-size: 14px; line-height: 1.35; }.landing-final-cta { width: 621px; margin: 129px auto 0; padding: 32px 16px 35px; border: 1.25px solid #e0dddd; border-radius: 12px; background: var(--paper); box-shadow: 4px 4px 12px rgb(18 18 18 / 25%); text-align: center; }.landing-final-cta p { width: min(100%, 589px); margin: 51px auto 41px; font-size: 12px; line-height: 20px; }.landing-footer { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1.2fr; gap: 44px; width: min(100% - 308px, 1292px); margin: 135px auto 30px; align-items: start; font-size: 12px; }.landing-footer .brand-logo { width: 117px; height: auto; }.landing-footer strong, .landing-footer a, .landing-footer span { display: block; }.landing-footer strong { font-weight: 700; }.landing-footer a, .landing-footer span { margin-top: 15px; color: rgb(18 18 18 / 75%); }

@media (max-width: 720px) {
  .app-background { background-image: url('images/gradient-background-mobile.png'); background-size: 100% auto; } body { font-size: 12px; } .app-header { width: calc(100% - 24px); padding-top: 24px; }.brand-logo { width: 125px; height: auto; }.account-trigger > span:last-child { display: none; }.hero { padding: 214px 12px 0; overflow: hidden; }.hero h1 { width: 720px; margin-left: 50%; font-size: 48px; transform: translateX(-50%); white-space: nowrap; }.hero p { width: 332px; margin: 18px auto 0; font-size: 12px; line-height: 1.45; }.composer { width: calc(100% - 24px); margin-top: 73px; padding: 16px 12px; border-radius: 14px; }.composer textarea { min-height: 60px; font-size: 12px; }.send-button { width: 40px; height: 40px; }.projects { width: calc(100% - 24px); margin: 57px auto 24px; padding: 28px 20px; border-radius: 14px; }.projects-heading { margin-bottom: 24px; }.projects h2 { font-size: 20px; }.project-grid { grid-template-columns: 1fr; gap: 16px; }.project-card { padding: 17px; }.paper-preview { height: 116px; }.app-footer { display: grid; grid-template-columns: 1fr; width: calc(100% - 24px); gap: 16px; margin-bottom: 24px; padding: 28px 20px; border-radius: 14px; }.modal { padding: 12px; align-items: end; }.modal-card { width: 100%; max-height: calc(100vh - 24px); padding: 23px; border-radius: 14px 14px 8px 8px; }.modal-card.wide { border-radius: 0; }.document-modal { min-height: calc(100vh - 24px); grid-template-columns: 1fr; grid-template-rows: auto 1fr; }.document-sidebar { padding: 19px 20px; border-right: 0; border-bottom: 1px solid var(--border); }.document-sidebar h3 { font-size: 14px; }.task-details { margin-top: 10px; }.task-details:not([open]) dl, .task-details:not([open]) .export-menu { display: none; }.document-main { padding: 14px; }.apa-paper { min-height: 620px; padding: 35px 29px; font-size: 11px; }.export-menu { position: sticky; bottom: 0; margin-top: 13px; }.modal .modal-close { top: 12px; right: 12px; }.auth-page { padding: 22px 20px 12px; }.auth-card { width: min(100%, 350px); }.auth-brand { margin-bottom: 25px; }.auth-card h1 { font-size: 14px; }.landing-header { width: auto; }.landing-header .button { min-height: 36px; padding: 8px 12px; }.landing-page .brand-logo { width: 125px; height: auto; }.landing-promo { gap: 38px; font-size: 12px; }.landing-promo span:first-child { margin-left: 69px; }.landing-hero { height: 851px; background-image: url('images/gradient-background-mobile.png'); background-size: 100% auto; }.landing-header { padding: 24px 13px 0 32px; }.landing-nav { gap: 11px; }.landing-login { width: auto; min-height: 30px; background: transparent; font-size: 12px; }.landing-start { width: 99px; min-height: 30px; border-radius: 6px; font-size: 12px; }.landing-hero-copy { margin-top: 184px; }.landing-hero h1 { width: auto; margin: 0; font-size: 40px; line-height: 1.2; transform: none; white-space: normal; }.landing-hero-copy p { width: min(100% - 98px, 332px); margin-top: 79px; font-size: 12px; line-height: 1.35; }.landing-composer { width: calc(100% - 40px); height: 154px; margin-top: 115px; border-radius: 24px; }.landing-composer textarea { padding: 21px 58px 53px 22px; font-size: 12px; }.landing-composer-tools { right: 24px; bottom: 25px; left: 22px; }.landing-intro { padding-top: 39px; }.landing-intro h2, .landing-benefits h2, .landing-steps h2, .landing-testimonials h2, .landing-faq h2, .landing-final-cta h2 { font-size: 16px; }.landing-intro p { width: calc(100% - 80px); margin: 42px auto 25px; font-size: 11px; line-height: 16px; }.landing-cta { width: 120px; min-height: 32px; border-radius: 6px; font-size: 11px; }.landing-benefits { width: calc(100% - 36px); margin-top: 61px; padding: 30px 24px 36px; border-radius: 16px; }.landing-benefit-grid { grid-template-columns: 1fr; gap: 44px; margin: 51px auto 33px; }.landing-benefit-grid span { width: 48px; height: 48px; border-radius: 10px; }.landing-benefit-grid h3 { margin-top: 18px; font-size: 14px; }.landing-benefit-grid p { max-width: 178px; font-size: 11px; line-height: 1.2; }.landing-steps { width: calc(100% - 36px); margin-top: 46px; padding-bottom: 79px; }.landing-step-list { gap: 75px; margin-top: 53px; }.landing-step-list article { grid-template-columns: 60px 1fr; gap: 24px; }.landing-step-list h3 { font-size: 16px; }.landing-step-list p { font-size: 11px; }.landing-steps-cta { position: static; display: flex; margin: 67px auto 0; }.landing-stats { grid-template-columns: 1fr; height: 426px; align-content: center; gap: 28px; }.landing-stats strong { font-size: 40px; }.landing-stats span { margin-top: 8px; font-size: 14px; }.landing-testimonials { width: auto; margin: 52px 0 0 35px; overflow: hidden; }.landing-testimonial-grid { display: flex; gap: 82px; width: max-content; margin-top: 24px; }.landing-testimonial-grid article { width: 234px; }.landing-testimonial-grid article > p { min-height: 121px; font-size: 14px; }.landing-faq { width: calc(100% - 70px); margin-top: 48px; }.landing-faq h2 { text-align: left; }.landing-faq-list { gap: 0; margin-top: 32px; }.landing-faq details { border-bottom: 1px solid var(--border); }.landing-faq summary { min-height: 61px; font-size: 12px; }.landing-faq details p { margin: 0 0 18px; font-size: 11px; line-height: 1.35; }.landing-final-cta { width: calc(100% - 46px); margin-top: 58px; padding: 27px 21px 23px; border-radius: 10px; }.landing-final-cta p { margin: 39px auto 29px; font-size: 11px; line-height: 16px; }.landing-footer { grid-template-columns: 1fr; gap: 25px; width: calc(100% - 62px); margin-top: 120px; margin-bottom: 30px; }.landing-footer .brand-logo { width: 117px; }.landing-footer a, .landing-footer span { margin-top: 13px; }
}
@media (max-width: 720px) {
  html:has(body.app-background), .app-background { background-image: url('images/gradient-background-mobile.png'); background-size: 100% auto; background-repeat: no-repeat; }
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .landing-page, .app-background { width: 100%; max-width: 100%; overflow-x: hidden; }
  .landing-page *, .app-background * { min-width: 0; }
  .landing-promo { width: 100%; max-width: 100%; }
  .landing-promo span:first-child { margin-left: 18px; }
  .landing-header { width: 100%; max-width: 100%; padding-inline: 18px 13px; }
  .landing-page .brand-logo { width: clamp(100px, 31vw, 125px); }
  .landing-nav { flex: 0 0 auto; }
  .landing-login { max-width: 62px; }
  .landing-start { width: 88px; }
  .landing-hero-copy p, .landing-intro p, .landing-final-cta p { overflow-wrap: anywhere; }
  .landing-composer { width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
  .landing-benefits, .landing-steps, .landing-faq, .landing-final-cta, .landing-footer { max-width: calc(100vw - 24px); }
  .landing-benefits { width: calc(100% - 24px); padding-inline: 18px; }
  .landing-benefit-grid { width: 100%; max-width: 100%; }
  .landing-benefit-grid article, .landing-step-list article, .landing-testimonial-grid article { width: 100%; max-width: 100%; }
  .landing-benefit-grid p { width: min(100%, 220px); max-width: 100%; overflow-wrap: anywhere; }
  .landing-step-list article { grid-template-columns: 54px minmax(0, 1fr); gap: 18px; }
  .landing-step-list span { width: 54px; height: 54px; }
  .landing-step-list article:not(:last-child)::after { left: 26px; }
  .landing-testimonials { width: calc(100% - 70px); max-width: calc(100vw - 70px); margin-inline: auto; overflow: visible; }
  .landing-testimonial-grid { display: grid; width: 100%; grid-template-columns: 1fr; gap: 34px; }
  .landing-testimonial-grid article > p { min-height: 0; }
  .landing-faq summary { gap: 14px; text-align: left; white-space: normal; }
  .landing-faq summary svg { flex: 0 0 auto; }
  .landing-footer { width: calc(100% - 48px); }
  .app-header, .hero, .composer, .projects, .app-footer { max-width: calc(100vw - 24px); }
  .app-header { width: calc(100% - 24px); }
  .hero { padding-inline: 12px; overflow: visible; }
  .hero h1 { width: min(100%, 336px); margin-inline: auto; transform: none; white-space: normal; font-size: 40px; line-height: 1.02; }
  .hero h1 span { display: inline; }
  .hero p { width: min(100%, 332px); max-width: 100%; }
  .composer { width: calc(100vw - 24px); max-width: calc(100vw - 24px); overflow: hidden; }
  .composer-actions { align-items: flex-end; gap: 10px; }
  .composer-tools { min-width: 0; flex: 1; align-items: center; }
  .composer-tools .tiny { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-chip, .attached-doc { max-width: 100%; }
  .file-chip span, .attached-doc span { min-width: 0; max-width: 180px; }
  .account-menu { right: 0; max-width: calc(100vw - 24px); }
  .projects, .app-footer { width: calc(100% - 24px); overflow: hidden; }
  .project-grid, .project-card, .paper-preview { width: 100%; max-width: 100%; }
  .modal { max-width: 100vw; overflow-x: hidden; }
  .modal-card { max-width: calc(100vw - 24px); }
  .modal-card.wide { width: 100%; max-width: 100%; }
  .document-modal, .document-sidebar, .document-main { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
  .apa-paper { width: 100%; max-width: 100%; }
  .referral-copy { min-width: 0; }
  .referral-copy input { width: 100%; min-width: 0; }
}

.app-footer, .landing-footer { text-transform: uppercase; }
.landing-page .landing-header .brand-logo { width: 156px; height: auto; }

.hero { padding-top: 208px; }
.hero h1 { color: var(--ink); font-size: 48px; letter-spacing: 0; line-height: 1.2; }
.hero h1 span { color: var(--ink); }
.hero p { width: min(100% - 48px, 688px); margin: 22px auto 0; color: var(--ink); font-size: 14px; line-height: 1.25; }
.composer { width: min(100% - 48px, 768px); height: 154px; margin: 82px auto 0; padding: 19px 29px 26px 34px; border-radius: 24px; }
.composer textarea { min-height: 53px; color: #313131; font-size: 14px; }
.composer textarea::placeholder { color: #313131; opacity: 1; }

.modal-card.wide { overflow: hidden; border-radius: 14px; }
.document-modal { height: min(730px, calc(100vh - 48px)); max-height: calc(100vh - 48px); min-height: 0; overflow: hidden; }
.document-sidebar { min-height: 0; overflow-y: auto; }
.document-main { min-height: 0; margin-right: 16px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
.modal-card.wide .modal-close { z-index: 5; background: var(--paper); box-shadow: 0 2px 8px rgb(18 18 18 / 10%); }
.modal-card.wide .document-main { margin-right: 56px; }

@media (max-width: 720px) {
  html { min-width: 0; overflow-x: hidden; }
  body { width: 100%; min-width: 0; overflow-x: hidden; }
  .landing-page, .app-background, .landing-hero { width: 100%; max-width: 100%; overflow-x: hidden; }
  .landing-hero { height: auto; min-height: 851px; }
  .landing-hero-copy { width: calc(100% - 24px); max-width: calc(100% - 24px); margin-inline: auto; }
  .landing-hero-copy p { width: min(100%, 260px); }
  .landing-benefits, .landing-steps, .landing-testimonials, .landing-faq, .landing-final-cta, .landing-footer,
  .hero, .projects, .app-footer { width: calc(100% - 24px); max-width: calc(100% - 24px); margin-left: auto; margin-right: auto; }
  .landing-page .landing-header .brand-logo { width: 112px; }
  .landing-composer { width: calc(100% - 24px); max-width: 336px; margin-left: auto; margin-right: auto; }
  .landing-composer-tools { right: 18px; left: 22px; }
  .landing-composer textarea { padding-right: 64px; }
  .hero { padding-inline: 0; }
  .hero h1 { width: auto; font-size: 40px; line-height: 1.2; }
  .hero p { width: min(100% - 98px, 332px); margin-top: 79px; font-size: 12px; line-height: 1.35; }
  .composer { width: 100%; max-width: 100%; }
  .composer { height: 154px; margin-top: 115px; padding: 21px 24px 25px 22px; border-radius: 24px; }
  .modal-card.wide { border-radius: 14px 14px 8px 8px; overflow: hidden; }
  .modal-card.wide .modal-close { top: 14px; right: 14px; }
  .document-modal { height: calc(100vh - 24px); max-height: calc(100vh - 24px); overflow: hidden; }
  .document-sidebar, .document-main { overflow-y: auto; }
  .document-main { width: auto; max-width: none; margin-right: 44px; }
}

@media (max-width: 340px) {
  .landing-hero h1, .hero h1 { font-size: 36px; }
  .landing-composer-tools .tiny, .composer-tools .tiny { max-width: 160px; }
}

/* Canonical APA 7 sheet. All measurements are authored at 96 dpi and the
   complete sheet is scaled as one unit, preserving exact proportions. */
#doc-answer.apa-paper { display: grid; width: 100%; min-height: 0; gap: 24px; justify-items: center; margin: 0; padding: 0; background: transparent; box-shadow: none; font-family: 'Times New Roman', Times, serif; white-space: normal; }
.apa-page-frame { position: relative; flex: 0 0 auto; overflow: visible; }
.apa-page { position: absolute; top: 0; left: 0; width: 816px; height: 1056px; transform-origin: top left; overflow: hidden; background: #fff; color: #000; box-shadow: 0 3px 18px rgb(18 18 18 / 10%); font-family: 'Times New Roman', Times, serif; font-size: 16px; font-weight: 400; line-height: 32px; }
.apa-page-number { position: absolute; top: 48px; right: 96px; height: 32px; line-height: 32px; }
.apa-page-body { position: absolute; top: 96px; left: 96px; width: 624px; }
.apa-line { box-sizing: border-box; width: 100%; height: 32px; padding-left: var(--apa-indent, 0); overflow: hidden; line-height: 32px; white-space: nowrap; }

/* Seamless promotional ticker on the landing page. */
.landing-promo { display: block; position: relative; overflow: hidden; }
.landing-promo > .landing-promo-track { display: flex; width: max-content; height: 100%; align-items: center; margin-left: 0; animation: landing-promo-scroll 18s linear infinite; will-change: transform; }
.landing-promo-item { display: inline-flex; align-items: center; gap: 91px; padding-right: 91px; white-space: nowrap; }
.landing-promo-item i { display: block; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
@keyframes landing-promo-scroll { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (max-width: 720px) { .landing-promo-item { gap: 38px; padding-right: 38px; } }
@media (prefers-reduced-motion: reduce) { .landing-promo-track { animation: none; } }

/* Document viewer — presentation only. Functional hooks and export targets are
   intentionally kept in the existing markup and JavaScript. */
.document-viewer { padding: 40px; background: rgb(18 18 18 / 24%); }
.document-viewer .modal-card.wide { width: min(1440px, calc(100vw - 80px)); height: min(700px, calc(100vh - 80px)); max-height: none; border-radius: 16px; box-shadow: 0 24px 80px rgb(18 18 18 / 18%); }
.document-viewer .modal-close { top: 38px; right: 76px; width: 36px; height: 36px; background: transparent; box-shadow: none; }
.document-viewer .modal-close svg { width: 25px; height: 25px; stroke-width: 1.8; }
.document-viewer .document-modal { height: 100%; max-height: none; grid-template-columns: minmax(0, 1fr) 400px; overflow: hidden; }
.document-viewer .document-sidebar { display: flex; min-width: 0; flex-direction: column; grid-column: 2; grid-row: 1; padding: 116px 55px 48px; overflow-y: auto; border: 0; background: var(--paper); }
.document-viewer .document-sidebar h3 { position: absolute; top: 41px; left: 57px; width: calc(100% - 170px); overflow: hidden; padding: 0; font-size: 20px; font-weight: 700; letter-spacing: -.035em; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.document-viewer .task-details { margin: 0; }
.document-viewer .task-details::before { display: block; content: 'Detalles de la tarea'; font-size: 15px; font-weight: 700; }
.document-viewer .task-details summary { display: none; }
.document-viewer .task-details summary::-webkit-details-marker { display: none; }
.document-viewer .task-details dl,
.document-viewer .task-details:not([open]) > dl { display: grid; gap: 24px; margin: 32px 0 0; }
.document-viewer .task-details dt { margin-bottom: 12px; color: #5f5f5d; font-size: 12px; }
.document-viewer .task-details dd { font-size: 13px; line-height: 1.45; }
.document-viewer .attached-docs { flex-wrap: nowrap; gap: 20px; }
.document-viewer .attached-doc { width: 142px; min-height: 42px; gap: 9px; padding: 7px 10px; border-color: #aaa; border-radius: 5px; font-size: 10px; }
.document-viewer .attached-doc svg { width: 23px; height: 23px; flex: 0 0 auto; stroke-width: 1.4; }
.document-viewer .attached-doc span { max-width: 88px; font-weight: 600; }
.document-viewer .metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.document-viewer .metric { min-width: 0; }
.document-viewer .metric b { display: flex; align-items: center; gap: 12px; margin-top: 0; font-size: 14px; font-weight: 400; }
.document-viewer .metric-positive b::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #65e99c; content: ''; }
.document-viewer .export-menu { position: relative; z-index: 3; margin-top: auto; padding-top: 38px; }
.document-viewer .export-menu > .button { min-height: 48px; border-radius: 999px; font-size: 13px; }
.document-viewer .export-menu > .button svg { width: 16px; height: 16px; margin-left: 22px; transition: transform .18s ease; }
.document-viewer .export-menu:has(.export-options.is-open) > .button svg { transform: rotate(180deg); }
.document-viewer .export-options { bottom: calc(100% - 28px); display: none; gap: 2px; padding: 7px; border-color: rgb(18 18 18 / 10%); border-radius: 14px; box-shadow: 0 16px 40px rgb(18 18 18 / 14%); }
.document-viewer .export-options.is-open { display: grid; }
.document-viewer .export-options a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 12px; border-radius: 10px; }
.document-viewer .export-options a + a { border-top: 1px solid rgb(18 18 18 / 7%); border-radius: 0 0 10px 10px; }
.document-viewer .export-options a:hover { background: rgb(18 18 18 / 5%); }
.document-viewer .export-options svg { width: 20px; height: 20px; stroke-width: 1.5; }
.document-viewer .export-options span,
.document-viewer .export-options strong,
.document-viewer .export-options small { display: block; }
.document-viewer .export-options strong { font-size: 11px; font-weight: 600; }
.document-viewer .export-options small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.document-viewer .document-main { grid-column: 1; grid-row: 1; margin: 98px 0 0; padding: 0 28px 34px 52px; overflow: auto; background: var(--paper); scrollbar-color: #4c4c4c #e1e1e1; scrollbar-width: auto; }
.document-viewer #doc-answer.apa-paper { align-content: start; }

@media (max-width: 720px) {
  .document-viewer { padding: 109px 0 0; align-items: start; background: rgb(18 18 18 / 18%); }
  .document-viewer .modal-card.wide { width: 100%; max-width: none; height: calc(100vh - 109px); max-height: none; overflow-y: auto; border-radius: 12px 12px 0 0; box-shadow: 0 -8px 28px rgb(18 18 18 / 8%); }
  .document-viewer .modal-close { top: 37px; right: 20px; width: 28px; height: 28px; }
  .document-viewer .modal-close svg { width: 22px; height: 22px; }
  .document-viewer .document-modal { display: flex; width: 100%; height: auto; max-height: none; flex-direction: column; overflow: visible; }
  .document-viewer .document-sidebar { display: flex; width: 100%; max-width: none; flex: none; padding: 42px 20px 35px; overflow: visible; border: 0; }
  .document-viewer .document-sidebar h3 { position: static; width: calc(100% - 42px); padding: 0; font-size: 16px; line-height: 1.25; }
  .document-viewer .task-details { margin-top: 32px; }
  .document-viewer .task-details::before { display: none; }
  .document-viewer .task-details summary { position: relative; display: block; padding: 0 30px 0 3px; cursor: pointer; font-size: 14px; font-weight: 700; }
  .document-viewer .task-details summary::after { position: absolute; top: 2px; right: 5px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ''; transform: rotate(45deg); transition: transform .18s ease; }
  .document-viewer .task-details[open] summary::after { top: 6px; transform: rotate(225deg); }
  .document-viewer .task-details:not([open]) > dl { display: none; }
  .document-viewer .task-details dl { gap: 24px; margin: 31px 3px 0; }
  .document-viewer .task-details dt { margin-bottom: 17px; font-size: 11px; }
  .document-viewer .task-details dd { font-size: 12px; line-height: 1.25; }
  .document-viewer .attached-docs { gap: 20px; }
  .document-viewer .attached-doc { width: calc(50% - 10px); min-height: 42px; padding: 7px 9px; }
  .document-viewer .attached-doc span { max-width: calc(100% - 31px); }
  .document-viewer .metric-row { gap: 16px; }
  .document-viewer .metric b { gap: 13px; font-size: 13px; }
  .document-viewer .export-menu { width: 100%; margin-top: 31px; padding: 0; }
  .document-viewer .export-menu > .button { min-height: 47px; }
  .document-viewer .export-options { bottom: calc(100% + 8px); }
  .document-viewer .document-main { width: 100%; max-width: none; flex: none; margin: 0; padding: 0 20px 32px; overflow: visible; background: var(--paper); }
}

/* Terms and conditions */
.legal-page { min-height: 100vh; background: #f7f8f7; }
.legal-header { display: flex; width: min(calc(100% - 64px), 1180px); align-items: center; justify-content: space-between; margin: 0 auto; padding: 32px 0; }
.legal-back { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.legal-back svg { width: 17px; height: 17px; }
.legal-main { width: min(calc(100% - 64px), 1180px); margin: 44px auto 90px; }
.legal-title { max-width: 760px; }
.legal-title > p:first-child { margin: 0 0 16px; color: #087746; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.legal-title h1 { margin: 0; font-size: clamp(38px, 5vw, 64px); letter-spacing: -.055em; line-height: 1; }
.legal-title > p:last-child { margin: 20px 0 0; color: var(--muted); font-size: 13px; }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 92px; margin-top: 72px; align-items: start; }
.legal-index { position: sticky; top: 24px; display: grid; gap: 13px; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--paper); font-size: 12px; }
.legal-index strong { margin-bottom: 5px; font-size: 13px; }
.legal-index a { color: var(--muted); line-height: 1.3; }
.legal-index a:hover, .legal-index a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-content { min-width: 0; }
.legal-content section { scroll-margin-top: 24px; padding-bottom: 39px; border-bottom: 1px solid var(--border); }
.legal-content section + section { padding-top: 39px; }
.legal-content h2 { margin: 0 0 18px; font-size: 20px; letter-spacing: -.025em; line-height: 1.25; }
.legal-content p, .legal-content li { color: #454545; font-size: 14px; line-height: 1.75; }
.legal-content p { margin: 0; }
.legal-content p + p { margin-top: 14px; }
.legal-content ul { display: grid; gap: 8px; margin: 16px 0; padding-left: 22px; }
.legal-content a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-highlight { display: grid; grid-template-columns: 42px 1fr; gap: 18px; margin: 0 -24px; padding-right: 24px !important; padding-left: 24px; border: 1px solid rgb(45 232 157 / 40%) !important; border-radius: 16px; background: rgb(45 232 157 / 8%); }
.legal-highlight > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--accent); }
.legal-highlight svg { width: 20px; height: 20px; }
.legal-footer { display: flex; width: min(calc(100% - 64px), 1180px); justify-content: space-between; gap: 24px; margin: 0 auto; padding: 30px 0 42px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; text-transform: uppercase; }
.app-footer a:hover, .landing-footer a:hover, .payment-terms a:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-footer a:focus-visible, .landing-footer a:focus-visible, .payment-terms a:focus-visible, .legal-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

@media (max-width: 720px) {
  .legal-header, .legal-main, .legal-footer { width: calc(100% - 40px); }
  .legal-header { padding: 22px 0; }
  .legal-header .brand-logo { width: 125px; height: auto; }
  .legal-back { font-size: 0; }
  .legal-back svg { width: 21px; height: 21px; }
  .legal-main { margin-top: 28px; margin-bottom: 58px; }
  .legal-title h1 { font-size: 40px; }
  .legal-layout { grid-template-columns: 1fr; gap: 42px; margin-top: 48px; }
  .legal-index { position: static; }
  .legal-content h2 { font-size: 18px; }
  .legal-content p, .legal-content li { font-size: 13px; }
  .legal-highlight { grid-template-columns: 1fr; margin: 0; padding: 24px !important; }
  .legal-footer { flex-direction: column; }
}

/* Figma-authored authentication and account modal refinements. */
@media (min-width: 721px) {
  .auth-page { display: block; position: relative; min-height: 780px; padding: 0; }
  .auth-card { position: absolute; left: 50%; margin: 0; transform: translateX(-50%); }
  .login-card { top: 70px; width: 460px; }
  .login-card .auth-brand { margin: 0 0 134px; }
  .login-card h1 { font-size: 20px; line-height: 24px; }
  .login-card .subtitle { margin: 13px 0 96px; font-size: 14px; line-height: 17px; }
  .login-card .form-field { gap: 8px; margin: 0; font-size: 14px; line-height: 17px; }
  .login-card .form-field:first-of-type { margin-bottom: 33px; }
  .login-card .form-field:last-of-type { margin-bottom: 8px; }
  .login-card .button { min-height: 60px; font-size: 14px; font-weight: 700; }
  .login-card .auth-switch { margin: 23px 0 0; text-align: left; font-size: 12px; }
  .login-page .auth-footer { left: 116px; }

  .signup-card { top: 64px; width: 476px; }
  .signup-card .auth-brand { margin: 0 0 41px; }
  .signup-card h1 { font-size: 20px; line-height: 24px; }
  .signup-card .step-progress { width: 410px; height: 4px; gap: 0; margin: 43px auto 16px; overflow: hidden; border-radius: 999px; }
  .signup-card .step-label { width: 410px; margin: 0 auto; color: #706d6d; font-size: 14px; line-height: 17px; }
  .signup-card form { margin-top: 59px; }
  .signup-card .form-field { gap: 8px; margin: 0 0 27px; font-size: 14px; line-height: 17px; }
  .signup-card .signup-step:first-of-type .form-field:nth-child(3) { margin-bottom: 32px; }
  .signup-card .signup-step:first-of-type .form-field:nth-child(2) { margin-bottom: 34px; }
  .signup-card .signup-step:first-of-type .form-field:last-child { margin-bottom: 0; }
  .signup-card .signup-step:nth-of-type(2) { padding-top: 37px; }
  .signup-card .signup-step:nth-of-type(2) .form-field { margin-bottom: 32px; font-size: 15px; }
  .signup-card .signup-step:nth-of-type(2) .form-field:last-child { margin-bottom: 0; }
  .signup-card .auth-actions { gap: 30px; margin-top: 43px; }
  .signup-card[data-step="1"] .signup-step.is-active,
  .signup-card[data-step="1"] .auth-actions { width: 476px; margin-left: 14px; }
  .signup-card[data-step="3"] .signup-step.is-active,
  .signup-card[data-step="4"] .signup-step.is-active { width: 459px; margin-left: 8px; padding-top: 14px; }
  .signup-card[data-step="2"] .auth-actions { margin-top: 89px; }
  .signup-card[data-step="2"] .auth-brand,
  .signup-card[data-step="2"] .step-label,
  .signup-card[data-step="3"] .auth-brand,
  .signup-card[data-step="3"] .step-label,
  .signup-card[data-step="4"] .auth-brand,
  .signup-card[data-step="4"] .step-label { transform: translateY(11px); }
  .signup-card[data-step="2"] > h1,
  .signup-card[data-step="3"] > h1,
  .signup-card[data-step="4"] > h1 { transform: translateY(14px); }
  .signup-card[data-step="2"] .step-progress,
  .signup-card[data-step="3"] .step-progress,
  .signup-card[data-step="4"] .step-progress { transform: translateY(13px); }
  .signup-card .button { min-height: 48px; border-width: 1.25px; border-radius: 10px; font-size: 14px; }
  .signup-page .auth-footer { left: 66px; }
}

.auth-brand .brand-logo { width: 156px; height: 40px; }
.auth-card .form-field input,
.auth-card .form-field select { min-height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 12px; line-height: 24px; }
.auth-card .form-field input:focus,
.auth-card .form-field select:focus { border-color: transparent; }
.auth-card .form-field input::placeholder { color: #706d6d; opacity: 1; }
.signup-card .signup-step:nth-of-type(2) select { color: #706d6d; font-size: 17.5px; line-height: 24px; }
.password-control { position: relative; display: block; }
.password-control input { padding-right: 34px !important; }
.password-toggle { position: absolute; top: 0; right: -2px; display: grid; width: 30px; height: 24px; place-items: center; padding: 0; border: 0; background: transparent; color: #706d6d; }
.password-toggle svg { width: 17px; height: 17px; stroke-width: 2; }
.auth-footer { position: fixed; bottom: 36px; color: #706d6d; font-size: 12px; line-height: 15px; }
.signup-page .auth-switch { display: none; }
.signup-question { margin: 0 0 14px; font-size: 16px; font-weight: 600; line-height: 20px; }
.signup-card[data-step="3"] .signup-question,
.signup-card[data-step="4"] .signup-question { margin-bottom: 19px; }
.signup-card .choice-grid { gap: 33px 39px; }
.signup-card .choice { min-height: 48px; padding: 8px 20px; border: 1.25px solid #706d6d; font-size: 12px; font-weight: 500; }
.signup-card .choice.is-selected { border-color: var(--accent); }
.signup-card[data-step="3"] .auth-actions,
.signup-card[data-step="4"] .auth-actions { margin-top: 42px; }

.modal-card.offer-modal,
.modal-card.payment-card,
.modal-card.profile-card,
.modal-card.balance-card,
.modal-card.transactions-card,
.modal-card.referral-card { width: min(100%, 470px); border-radius: 16px; box-shadow: 0 24px 70px rgb(18 18 18 / 18%); }
.offer-modal .modal-close,
.payment-card .modal-close,
.profile-card .modal-close,
.balance-card .modal-close,
.transactions-card .modal-close,
.referral-card .modal-close { display: none; }

.modal-card.offer-modal { height: 463px; overflow: hidden; padding: 26px 33px 28px; }
.offer-modal h3 { font-size: 20px; font-weight: 400; letter-spacing: 0; line-height: 22px; }
.offer-modal .modal-illustration-image { width: 128px; height: 140px; margin: 40px auto 42px; }
.offer-modal > p { width: 100%; max-width: none; margin: 0; color: var(--ink); font-size: 12px; line-height: 15px; }
.offer-modal .button { width: 392px; min-height: 52px; margin: 37px 0 0 12px; border-radius: 50px; font-size: 14px; font-weight: 700; }
.offer-modal > .offer-footnote { width: 252px; margin: 32px auto 0; font-size: 12px; }

.modal-card.payment-card { height: 545px; padding: 36px 73px; }
.payment-card h3 { font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 24px; }
.payment-card .price-value { margin: 18px 0 37px; font-size: 32px; font-weight: 700; letter-spacing: 0; line-height: 38px; }
.payment-card > .bank-prompt { margin: 0 0 15px; color: rgb(18 18 18 / 75%); font-size: 11px; line-height: 14px; }
.payment-card > .bank-details { margin: 0; color: var(--ink); font-size: 12px; line-height: 15px; }
.payment-card .receipt-label { display: block; margin-top: 26px; text-align: left; font-size: 12px; font-weight: 600; line-height: 15px; }
.payment-card .upload-box { min-height: 92px; margin: 26px 13px 0 12px; padding: 17px; border-color: rgb(18 18 18 / 33%); border-radius: 8px; font-size: 12px; }
.payment-card .upload-box svg { width: 24px; height: 24px; margin-bottom: 6px; }
.payment-card > .payment-terms { margin: 41px 0 0; color: rgb(18 18 18 / 75%); text-align: left; font-size: 11px; line-height: 14px; }
.payment-card .button { width: 323px; min-height: 48px; margin-top: 35px; border-radius: 50px; font-size: 14px; font-weight: 700; }

.modal-card.profile-card { height: 600px; padding: 29px 40px 35px; }
.profile-card h3 { font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 24px; }
.profile-card h3 { position: relative; top: 4px; }
.profile-card .profile-photo { gap: 0; margin: 31px 0 25px; }
.profile-card .profile-photo .avatar { width: 69px; height: 69px; border-radius: 50%; background: #c5b9b9; font-size: 18px; font-weight: 300; }
.profile-card .profile-photo .button { width: 87px; min-height: 28px; padding: 6px 10px; border-radius: 5px; font-size: 11px; font-weight: 500; }
.profile-card .profile-photo label { margin-left: 50px; }
.profile-card .profile-photo .photo-delete { margin-left: 32px; border-color: #e0dddd; color: #d4183d; }
.profile-card .profile-primary { display: grid; grid-template-columns: 1fr 143px; column-gap: 42px; }
.profile-card .profile-primary .form-field:first-child { grid-column: 1 / -1; }
.profile-card .form-field { position: relative; gap: 8px; margin: 0 0 25px; color: #706d6d; font-size: 12px; font-weight: 400; line-height: 15px; }
.profile-card .form-field input, .profile-card .form-field select { min-height: 20px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; }
.profile-card .form-field select { height: 20px; line-height: 15px; }
.profile-card .password-link { color: #706d6d; font-size: 12px; line-height: 15px; }
.profile-card .password-link span,
.profile-card .password-link b { display: block; }
.profile-card .password-link b { margin-top: 8px; color: #00b8db; font-size: 14px; font-weight: 600; white-space: nowrap; }
.profile-card h4 { margin: 23px 0 19px; font-size: 14px; line-height: 17px; }
.profile-card .select-look { margin-bottom: 19px; }
.profile-card .select-look svg { position: absolute; right: 19px; bottom: 1px; width: 12px; height: 12px; stroke-width: 1.8; }
.profile-card .profile-actions { display: flex; gap: 15px; margin: 47px auto 0; padding: 0 34px; }
.profile-card .profile-actions .button { width: 165px; min-height: 40px; border-color: #cdbebe; font-size: 12px; }
.profile-card .profile-actions .primary { border-color: var(--ink); }

.modal-card.balance-card { height: 330px; padding: 25px 40px; }
.balance-card h3 { font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 24px; }
.balance-card h3 { position: relative; top: -2px; }
.balance-card > p { margin: 41px 0 0; color: #5f5f5d; text-align: center; font-size: 12px; }
.balance-card .price-value { margin: 19px 0 0; text-align: center; font-size: 64px; font-weight: 600; letter-spacing: 0; line-height: 77px; }
.balance-link { display: flex; align-items: center; gap: 11px; margin: 51px 0 0 102px; padding: 0; border: 0; background: transparent; color: #1c1c1c; font-size: 11px; font-weight: 600; }
.balance-link svg { width: 12px; height: 12px; }

.modal-card.transactions-card { height: 536px; padding: 28px 40px; }
.transactions-card h3 { font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 20px; }
.transactions-card h3 { position: relative; top: 2px; }
.transactions-card .transaction-list { margin-top: 37px; }
.transactions-card .transaction { min-height: 81px; grid-template-columns: 45px 1fr auto; gap: 38px; padding: 0; border: 0; }
.transactions-card .transaction-icon { width: 45px; height: 45px; background: #caf6ea; }
.transactions-card .transaction strong { font-size: 14px; }
.transactions-card .transaction small { font-size: 12px; }
.transactions-card .transaction > span:last-of-type { font-size: 16px; font-weight: 600; }

.modal-card.referral-card { height: 459px; padding: 30px 40px 34px; text-align: left; }
.referral-card h3 { font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 20px; }
.referral-card .modal-illustration-image { width: 146px; height: 160px; margin: 52px auto 40px; }
.referral-card > p { margin: 0; color: var(--ink); text-align: center; font-size: 12px; font-weight: 500; line-height: 15px; }
.referral-card .referral-copy { display: block; margin: 43px 0 0; }
.referral-card .referral-copy input { position: absolute; width: 1px; height: 1px; padding: 0; clip: rect(0,0,0,0); overflow: hidden; border: 0; }
.referral-card .referral-copy .button { width: 100%; min-height: 48px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.referral-card .referral-copy .button svg { margin-left: 28px; }

@media (max-width: 720px) {
  .auth-page { display: block; position: relative; min-height: 100svh; padding: 18px 18px 50px; }
  .auth-card { width: min(100%, 340px); margin: 0 auto; }
  .auth-brand { margin-bottom: 28px; }
  .auth-brand .brand-logo { width: 125px; height: auto; }
  .auth-card h1 { font-size: 16px; line-height: 20px; }
  .auth-card .subtitle { font-size: 12px; line-height: 15px; }
  .auth-card .form-field { gap: 5px; font-size: 12px; line-height: 15px; }
  .auth-card .form-field input,
  .auth-card .form-field select { min-height: 26px; font-size: 11px; line-height: 20px; }
  .password-toggle { height: 26px; }
  .password-toggle svg { width: 15px; height: 15px; }
  .login-card .subtitle { margin: 9px 0 38px; }
  .login-card .form-field { margin-bottom: 18px; font-size: 12px; }
  .login-card .form-field:last-of-type { margin-bottom: 7px; }
  .login-card .button { min-height: 46px; font-size: 12px; }
  .login-card .auth-switch { margin-top: 16px; font-size: 11px; }
  .auth-card .flash { padding: 8px; font-size: 10px; }
  .signup-card .step-progress { width: 100%; height: 3px; gap: 0; margin: 28px 0 8px; }
  .signup-card .step-label { width: 100%; margin: 0; color: #706d6d; font-size: 12px; line-height: 15px; }
  .signup-card form { margin-top: 30px; }
  .signup-card .form-field,
  .signup-card .signup-step:nth-of-type(2) .form-field { margin-bottom: 18px; font-size: 12px; line-height: 15px; }
  .signup-card .signup-step:first-of-type .form-field:nth-child(2),
  .signup-card .signup-step:first-of-type .form-field:nth-child(3) { margin-bottom: 18px; }
  .signup-card .signup-step:nth-of-type(2) { padding-top: 20px; }
  .signup-card .signup-step:nth-of-type(2) select { font-size: 14px; line-height: 20px; }
  .signup-question { margin-bottom: 14px; font-size: 14px; line-height: 18px; }
  .signup-card[data-step="3"] .signup-question,
  .signup-card[data-step="4"] .signup-question { margin-bottom: 14px; }
  .signup-card .choice-grid { gap: 14px 10px; }
  .signup-card .choice { min-height: 40px; padding: 7px 10px; font-size: 11px; }
  .signup-card .auth-actions,
  .signup-card[data-step="2"] .auth-actions,
  .signup-card[data-step="3"] .auth-actions,
  .signup-card[data-step="4"] .auth-actions { gap: 12px; margin-top: 26px; }
  .signup-card .auth-actions .button { min-height: 44px; font-size: 12px; }
  .auth-footer { right: 18px; bottom: 14px; left: 18px !important; font-size: 10px; line-height: 13px; text-align: center; }
  .modal-card.offer-modal,
  .modal-card.payment-card,
  .modal-card.profile-card,
  .modal-card.balance-card,
  .modal-card.referral-card { width: min(100%, 360px); height: auto; min-height: 0; max-height: calc(100vh - 24px); border-radius: 14px 14px 8px 8px; }
  .modal-card.transactions-card { width: min(100%, 360px); height: min(456px, calc(100vh - 24px)); min-height: 0; max-height: calc(100vh - 24px); border-radius: 14px 14px 8px 8px; }
  .modal-card.offer-modal,
  .modal-card.payment-card,
  .modal-card.profile-card,
  .modal-card.balance-card,
  .modal-card.transactions-card,
  .modal-card.referral-card { padding: 20px; }

  .offer-modal h3 { font-size: 16px; line-height: 20px; }
  .offer-modal .modal-illustration-image { width: 96px; height: 105px; margin: 22px auto 24px; }
  .offer-modal > p,
  .offer-modal > .offer-footnote { width: 100%; margin-right: 0; margin-left: 0; font-size: 11px; line-height: 14px; }
  .offer-modal .button,
  .payment-card .button { width: 100%; margin-right: 0; margin-left: 0; }
  .offer-modal .button { min-height: 44px; margin-top: 24px; font-size: 12px; }
  .offer-modal > .offer-footnote { margin-top: 20px; }

  .payment-card h3 { font-size: 16px; line-height: 20px; }
  .payment-card .price-value { margin: 12px 0 22px; font-size: 28px; line-height: 34px; }
  .payment-card > .bank-prompt { margin-bottom: 10px; font-size: 10px; line-height: 13px; }
  .payment-card > .bank-details { font-size: 11px; line-height: 14px; }
  .payment-card .receipt-label { margin-top: 18px; font-size: 11px; line-height: 14px; }
  .payment-card .upload-box { min-height: 78px; margin: 16px 0 0; padding: 13px; font-size: 11px; }
  .payment-card .upload-box svg { width: 20px; height: 20px; margin-bottom: 4px; }
  .payment-card > .payment-terms { margin-top: 24px; font-size: 10px; line-height: 13px; }
  .payment-card .button { min-height: 44px; margin-top: 22px; font-size: 12px; }

  .profile-card h3 { top: 0; font-size: 16px; line-height: 20px; }
  .profile-card .profile-photo { margin: 20px 0 18px; }
  .profile-card .profile-photo .avatar { width: 56px; height: 56px; font-size: 14px; }
  .profile-card .profile-photo .button { width: 78px; min-height: 26px; padding: 5px 8px; font-size: 10px; }
  .profile-card .profile-photo label { margin-left: 20px; }
  .profile-card .profile-photo .photo-delete { margin-left: 10px; }
  .profile-card .profile-primary { grid-template-columns: 1fr 124px; column-gap: 16px; }
  .profile-card .form-field { gap: 5px; margin-bottom: 15px; font-size: 11px; line-height: 14px; }
  .profile-card .form-field input, .profile-card .form-field select { min-height: 18px; font-size: 12px; }
  .profile-card .form-field select { height: 18px; line-height: 14px; }
  .profile-card .password-link { margin-bottom: 15px; font-size: 11px; line-height: 14px; }
  .profile-card .password-link b { margin-top: 5px; font-size: 12px; }
  .profile-card h4 { margin: 12px 0; font-size: 12px; line-height: 15px; }
  .profile-card .select-look { margin-bottom: 12px; }
  .profile-card .select-look svg { width: 10px; height: 10px; }
  .profile-card .profile-actions { gap: 10px; margin-top: 22px; padding: 0; }
  .profile-card .profile-actions .button { width: auto; flex: 1; }
  .profile-card .profile-actions .button { min-height: 36px; font-size: 11px; }

  .balance-card h3 { top: 0; font-size: 16px; line-height: 20px; }
  .balance-card > p { margin-top: 26px; font-size: 11px; }
  .balance-card .price-value { margin-top: 12px; font-size: 48px; line-height: 58px; }
  .balance-link { margin: 26px auto 0; font-size: 10px; }

  .transactions-card h3 { top: 0; font-size: 14px; line-height: 18px; }
  .transactions-card .transaction-list { margin-top: 25px; overflow-y: auto; }
  .transactions-card .transaction { min-height: 65px; grid-template-columns: 38px 1fr auto; gap: 10px; }
  .transactions-card .transaction-icon { width: 38px; height: 38px; }
  .transactions-card .transaction strong { font-size: 12px; }
  .transactions-card .transaction small { font-size: 11px; }
  .transactions-card .transaction > span:last-of-type { font-size: 14px; }
  .transactions-card .tiny { font-size: 9px; }

  .referral-card h3 { font-size: 14px; line-height: 18px; }
  .referral-card .modal-illustration-image { width: 110px; height: 121px; margin: 28px auto 24px; }
  .referral-card > p { font-size: 11px; line-height: 14px; }
  .referral-card .referral-copy { margin-top: 28px; }
  .referral-card .referral-copy .button { min-height: 42px; font-size: 11px; }
  .referral-card .referral-copy .button svg { width: 14px; height: 14px; margin-left: 18px; }
  .referral-card > .tiny { font-size: 9px; }

  .account-menu button,
  .account-menu a,
  .menu-credit { font-size: 11px; }
  .file-chip,
  .upload-state { font-size: 10px; }
  .project-card strong { font-size: 14px; }
  .project-card small { font-size: 9px; }
  .app-footer { font-size: 11px; }
}
.document-generation-state { display: grid; min-height: 100%; place-content: center; justify-items: center; gap: 12px; padding: 48px 24px; color: var(--ink); text-align: center; }.document-generation-state strong { font-size: 18px; font-weight: 600; }.document-generation-state p { margin: 0; color: var(--muted); font-size: 12px; }.generation-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--ink); border-radius: 50%; animation: document-generation-spin .8s linear infinite; }.document-modal.is-generating .document-sidebar { opacity: .55; pointer-events: none; }.document-viewer.is-generating .modal-close { cursor: not-allowed; opacity: .45; } @keyframes document-generation-spin { to { transform: rotate(360deg); } }