/* ClearIncome — base + responsive rules.
   Layout/colour lives in inline styles copied from the design handoff;
   this file holds the design's <style> blocks plus UI-state helpers. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; }
a { color: #1E3A8A; }
a:hover { color: #172C6B; }
.num { font-variant-numeric: tabular-nums; }
input, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #9FB2E6; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
section[id], #faq, #start { scroll-margin-top: 64px; }
.legal-page section[id] { scroll-margin-top: 24px; }

/* Focus */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #1E3A8A; outline-offset: 3px; border-radius: 6px;
}
input:focus-visible, textarea:focus-visible {
  outline: 2px solid #1E3A8A; outline-offset: 1px;
}
.sample-overlay a:focus-visible, .sample-overlay button:focus-visible,
#start .panel a:focus-visible { outline-color: #FFFFFF; }
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: #1E3A8A; color: #FFFFFF; padding: 10px 14px; border-radius: 10px;
  font: 500 14px 'Geist', system-ui, sans-serif; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #FFFFFF; }

/* Hover states for primary buttons */
a[style*="background: #1E3A8A"]:hover, button[style*="background: #1E3A8A"]:hover { background: #172C6B !important; color: #FFFFFF; }

/* Source "+" toggles (block 5) */
.src-toggle .ic-minus { display: none; }
.src-toggle[aria-expanded="true"] .ic-plus { display: none; }
.src-toggle[aria-expanded="true"] .ic-minus { display: inline; }

/* FAQ icons */
.faq-toggle .ic-open { display: none !important; }
.faq-toggle[aria-expanded="true"] .ic-open { display: flex !important; }
.faq-toggle[aria-expanded="true"] .ic-closed { display: none !important; }

/* <details> Q&A (mobile block 3) */
summary::-webkit-details-marker { display: none; }
details[open] summary > span[aria-hidden] { transform: rotate(45deg); }
summary > span[aria-hidden] { transition: transform .15s ease; }

/* Form validation (amber, never red) */
.req-mark { color: #1E3A8A; margin-left: 3px; font-weight: 600; }
.field-err { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #6B3E00; }
.field-err::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: #FFF4E0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.6v4' stroke='%236B3E00' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.3' r='.9' fill='%236B3E00'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: inset 0 0 0 1px #E8B86A; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #D9A04A !important; background: #FFF9EE !important; box-shadow: 0 0 0 3px rgba(217,160,74,.18); }

/* Failure alert */
.form-alert { display: flex; gap: 12px; align-items: flex-start; background: #FFF4E0; border: 1px solid #F3D29B; border-radius: 14px; padding: 14px 16px; color: #3D2600; font-size: 14px; line-height: 1.5; text-align: left; }
.form-alert-icon { flex: none; margin-top: 1px; }
.form-alert p { margin: 0; }
.form-alert-title { font-weight: 600; color: #6B3E00; }
.form-alert-text a { color: #6B3E00; font-weight: 600; }
.form-retry { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: #1E3A8A; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.form-retry:hover { color: #172C6B; }

/* Submit button + loading */
.submit-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; transition: background-color .15s ease, opacity .15s ease; }
.submit-btn[disabled] { cursor: progress !important; opacity: .88; }
.btn-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; animation: ci-spin .7s linear infinite; }
.is-sending .btn-spinner { display: inline-block; }
@keyframes ci-spin { to { transform: rotate(360deg); } }

/* Success: ring + check stroke-draw, then text fades/slides in */
.check-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); overflow: visible; }
.check-ring circle { fill: none; stroke: #1E3A8A; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.check-path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .req-sent.is-playing .check-circle { animation: ci-pop .45s cubic-bezier(.2,.9,.3,1.2) both; }
  .req-sent.is-playing .check-ring circle { animation: ci-draw .6s ease-out .1s both; }
  .req-sent.is-playing .check-path { animation: ci-draw .35s ease-out .55s both; }
  .req-sent.is-playing > :not(.check-circle) { animation: ci-rise .45s ease-out both; }
  .req-sent.is-playing > :nth-child(2) { animation-delay: .5s; }
  .req-sent.is-playing > :nth-child(3) { animation-delay: .62s; }
  .req-sent.is-playing > :nth-child(4) { animation-delay: .74s; }
}
@keyframes ci-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ci-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ci-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sample (block 2): page 1 of the PDF as an image; card shows the top part */
.thumbin { width: 100%; }
.sample-overlay .overlay-inner { max-width: 960px !important; }
.pdf-btn:hover { background: #EEF1F8 !important; color: #172C6B !important; }
.pdf-open:hover { background: #EEF1F8 !important; color: #172C6B !important; }
.lbl-tap { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .lbl-click { display: none; }
  .lbl-tap { display: inline; }
}
/* Mobile overlay: page 1 at full viewport width, scrolls vertically, pinch-zoom left to the browser */
@media (max-width: 760px) {
  #sample-overlay { padding: 0 !important; background: #1D1D1F !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overscroll-behavior: contain; }
  #sample-overlay .overlay-inner { gap: 0 !important; max-width: none !important; }
  #sample-overlay .ov-bar { position: sticky; top: 0; z-index: 2; padding: 10px 12px; background: rgba(29,29,31,0.94); }
  #sample-overlay .sample-page { border-radius: 0 !important; box-shadow: none !important; }
  #sample-overlay .overlay-inner > div:last-child { padding: 20px 16px 40px !important; }
}

/* Dialogs */
html.has-dialog { overflow: hidden; }
.req-card:focus { outline: none; }
.req-sent:focus { outline: none; }

/* Desktop-only / mobile-only variants */
@media (min-width: 761px) {
  .m-only { display: none !important; }
}

/* ---- Intermediate breakpoints (from desktop files) ---- */
@media (max-width: 960px) {
  #pricing .g3, #faq .split, .formgrid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 900px) {
  #when .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #method .split, #analyst .split { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---- Mobile (<=760px), from mobile/ files ---- */
@media (max-width: 760px) {
  .d-only { display: none !important; }

  .nav-links { display: none !important; }
  .g2, .g3, .g4, .steps, .fields, .split,
  #when .g4, #pricing .g3, #method .split, #analyst .split { grid-template-columns: minmax(0, 1fr) !important; }
  .page .h1 { font-size: 36px !important; }
  .page .h2 { font-size: 38px !important; }
  #sample .h2 { font-size: 36px !important; }
  .doc { padding: 28px 20px !important; }
  .wm { font-size: 96px !important; }
  .panel { padding: 28px 20px !important; }
  .arrow { display: none !important; }
  .track, .who { display: none !important; }
  .mstep { display: block !important; }
  .tl { grid-template-columns: minmax(0, 1fr) !important; text-align: left !important; }
  .page section { padding-left: 16px !important; padding-right: 16px !important; padding-top: 72px !important; padding-bottom: 80px !important; }
  .hcta { font-size: 13px !important; padding: 0 12px !important; }
  .page header > div { padding: 0 16px !important; gap: 12px !important; }
  .thumb { height: 380px !important; }

  /* Hero order: eyebrow -> H1 -> CTAs -> pill -> subheadline */
  .hsub { order: 3; font-size: 16px !important; }
  .ctas { order: 1; flex-direction: column; padding-top: 0 !important; }
  .ctas a, .mcta { width: 100%; box-sizing: border-box; justify-content: center; align-items: center; display: flex !important; }
  .hpills { order: 2; justify-content: center; }
  #top { gap: 28px !important; padding-top: 28px !important; }

  /* Block 3 carousel */
  .carousel { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 0 16px; }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > div { flex: 0 0 84%; scroll-snap-align: start; }

  /* Block 6 */
  .arow { flex-direction: column; text-align: center; }
  .aphoto { width: 150px !important; height: 150px !important; }
  .docflow { justify-content: flex-start !important; gap: 14px !important; padding-top: 18px !important; }
  .docflow-line { top: 36px !important; }

  /* Overlay + bottom sheet */
  [role=dialog] { padding: 16px 12px 48px !important; }
  .req-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .req-card { border-radius: 24px 24px 0 0 !important; padding: 22px 20px 28px !important; max-height: 92vh; overflow-y: auto; }
  .req-fields { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .req-backdrop:not([hidden]) .req-card { animation: sheet-up .22s ease-out; }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* Legal pages (from Terms/Privacy design) */
@media (max-width: 860px) {
  .legal { grid-template-columns: minmax(0, 1fr) !important; }
  .toc { display: none !important; }
  .legal-page .h1 { font-size: 38px !important; }
}