/* Section bands and hero texture. Navy, white, navy, white, then a mint close.
   White sections carry a faint workbook grid. The hero has the target-universe dot field
   (dots grow under the pointer) with the four sample files fanned on top. */
:root {
  --white: #FFFFFF;
  --navy-ink: #0F2358;
  --slate: #4A5878;
  --rule: #D6DDEA;
  --rest: #C3CDE0;
  --cell: #E7EBF2;
}

/* ---------- Hero: dot field + fanned files ---------- */
.hero { position: relative; overflow: hidden; padding-bottom: 136px; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(44px, 5.4vw, 78px); }
.field { position: absolute; margin: 0; top: 0; bottom: 0; left: 34%; right: 0; }
.field canvas { width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }

.stack { position: absolute; right: 120px; top: 40px; width: 240px; height: 170px; }
.th { position: absolute; inset: 0; background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 40px -22px rgba(0,0,0,.75); transform: translate(var(--x), var(--y)) rotate(var(--r)); }
.motion .th { animation: fan 1.1s var(--ease) .3s both; }
@keyframes fan { from { transform: translate(0, 40px) rotate(0); } }
.th > b { display: block; height: 20px; background: #F3F5F8; border-bottom: 1px solid #E1E5EC; position: relative; }
.th > b::before { content: ""; position: absolute; left: 10px; top: 6px; width: 22px; height: 8px; border-radius: 2px; }
.th-p > b::before { background: #C4401F; }
.th-x > b::before { background: #1D6F42; }
.th-p i { display: block; margin: 0 18px; border-radius: 2px; }
.th-p .tt { height: 9px; width: 58%; background: #0A1840; margin-top: 18px; }
.th-p .ru { height: 2px; background: #0A1840; margin-top: 10px; margin-bottom: 8px; }
.th-p .row { height: 5px; margin-top: 11px; background: linear-gradient(90deg, #2C3550 0 26%, transparent 26% 34%, #C6CCD8 34% 92%, transparent 92%); }
.th-p .row.s { background: linear-gradient(90deg, #B3261E 0 22%, transparent 22% 34%, #C6CCD8 34% 78%, transparent 78%); }
.th-x .grid { display: block; position: absolute; inset: 20px 0 0; background-image: linear-gradient(#E6E9EF 1px, transparent 1px), linear-gradient(90deg, #E6E9EF 1px, transparent 1px); background-size: 100% 22px, 58px 100%; background-position: 0 0, 22px 0; }
.th-x .grid u { display: block; height: 3px; margin: 9px 14px 0 34px; border-radius: 2px; background: linear-gradient(90deg, #2C3550 0 34%, transparent 34% 50%, #C6CCD8 50% 100%); }
.th-x .grid u + u { margin-top: 19px; }
.th-x .grid .adj { background: linear-gradient(90deg, #1F4FB8 0 40%, transparent 40% 56%, #8FA7DC 56% 100%); }
.th-x .grid .tot { height: 4px; background: linear-gradient(90deg, #0A1840 0 46%, transparent 46% 62%, #0A1840 62% 100%); box-shadow: 0 -6px 0 -4px #0A1840; }

/* ---------- White sections with a workbook grid ---------- */
.statement, .end { position: relative; overflow: hidden; background: var(--white); color: var(--navy-ink); }
.statement > .wrap, .end > .wrap { position: relative; z-index: 1; }
.cells { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--cell) 1px, transparent 1px), linear-gradient(90deg, var(--cell) 1px, transparent 1px);
  background-size: 128px 32px; background-position: 40px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.55) 45%, transparent 85%); mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.55) 45%, transparent 85%); }
.cells .cols { position: absolute; left: 40px; right: 0; top: 0; height: 24px; display: flex; background: #F4F6FA; border-bottom: 1px solid #DFE4ED; }
.cells .cols span { flex: 0 0 128px; border-right: 1px solid #DFE4ED; color: #A3AEC4; font: 500 11px/24px var(--body); text-align: center; }
.cells .rows { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; background: #F4F6FA; border-right: 1px solid #DFE4ED; padding-top: 24px; }
.cells .rows span { display: block; height: 32px; border-bottom: 1px solid #DFE4ED; color: #A3AEC4; font: 500 11px/32px var(--body); text-align: center; }
.statement h2, .statement h3, .end h2, .end h3, .faq-list summary { color: var(--navy-ink); }
.statement p, .steps p, .faq-list details p { color: var(--slate); }
.points div { border-top: 2px solid var(--navy-ink); background: var(--white); padding: 18px 12px 0 0; }
.statement :focus-visible, .end :focus-visible { outline-color: var(--navy-ink); }
.steps li, .faq-list details, .faq-list details:first-of-type, .steps li:last-child { border-color: var(--rule); }
.steps .dot { color: var(--ink); }
.motion .steps .dot { border-color: var(--rule); background: var(--white); color: var(--rest); }
.motion .steps li.lit .dot { border-color: var(--navy-ink); background: var(--navy-ink); color: var(--white); }
.faq-list summary::after { border-color: var(--navy-ink); }
.end-grid > div { background: var(--white); }

/* ---------- Mint close ---------- */
.close { background: var(--green); color: var(--ink); }
.close h2 { color: var(--ink); }
.close-row p, .close-row small { color: #1E3566; }
.close .btn { background: var(--ink); color: var(--white); }
.close .btn:hover { background: var(--bg); }
.close :focus-visible { outline-color: var(--ink); }

@media (max-width: 960px) {
  .hero { padding-bottom: 210px; }
  .field { left: 0; top: auto; height: 190px; }
  .field canvas { -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
  .stack { margin-top: 56px; transform: scale(.68); }
  .cells { background-position: 0 24px; }
  .cells .rows { display: none; }
  .cells .cols { left: 0; }
}
@media (max-width: 1100px) {
  .hero .wrap { display: flex; flex-direction: column; }
  .stack { position: relative; right: auto; top: auto; order: 2; margin: 64px auto 0; transform: scale(.8); }
}
@media (max-width: 960px) {
  .stack { margin-top: 48px; transform: scale(.68); }
}