/* ============================================================ /small-business-401k/ — page-specific only. Nav, hero scaffold, ticker, steps, FAQ, CTA, footer, buttons and pills all come from shared.css. Everything here is token-driven, so the page follows whichever theme its selects. ============================================================ */ /* ---------- Hero: the "who does what" panel ---------- */ .split { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; box-shadow: var(--lift); } .split__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--panel-2); } .split__title { font-size: 0.94rem; font-weight: 600; } .split__row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); } .split__row:last-child { border-bottom: 0; } .split__task { font-size: 0.92rem; color: var(--text-mid); } .split__who { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; padding: 5px 10px; border-radius: 500px; border: 1px solid var(--line-mid); } .split__who--us { color: var(--mint-ink); border-color: var(--line-strong); background: var(--mint-dim); } .split__who--you { color: var(--text-dim); } /* ---------- Who it's for ---------- */ .who__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .who__card { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: border-color 0.25s ease, transform 0.25s var(--ease-out); } .who__card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .who__icon { width: 26px; height: 26px; color: var(--gold-ink); margin-bottom: 16px; } .who__card h3 { font-size: 1.06rem; margin-bottom: 8px; } .who__card p { font-size: 0.92rem; color: var(--text-mid); } /* ---------- The five: what you get ---------- */ .inc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .inc { position: relative; padding: 30px 28px 32px; background: var(--void); transition: background 0.25s ease; } .inc:hover { background: var(--panel-2); } /* Five cards never fill a 2- or 3-column row. The grid paints --line and the cards paint over it, so any leftover cell renders as a solid hairline-coloured block. This filler takes the remainder and matches the cards. */ .inc__grid::after { content: ""; background: var(--void); } @media (max-width: 620px) { /* Single column: every cell is filled, so the filler would add a stray row. */ .inc__grid::after { display: none; } } .inc__top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .inc__num { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--gold-ink); } .inc h3 { font-size: 1.14rem; margin-bottom: 10px; } .inc p { font-size: 0.93rem; color: var(--text-mid); } .inc__list { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 7px; } .inc__list li { position: relative; padding-left: 18px; font-size: 0.86rem; color: var(--text-dim); } .inc__list li::before { content: "✓"; position: absolute; left: 0; color: var(--mint-ink); } /* ---------- Startup tax credits ---------- */ .credits { border: 1px solid var(--line-mid); border-radius: var(--radius); background: radial-gradient(520px 300px at 50% 0%, var(--wash-gold), transparent 70%), var(--panel); padding: 40px 36px; } .credits__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; margin-top: 28px; } .credit__name { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px; } .credit p { font-size: 0.92rem; color: var(--text-mid); } .credits__note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--text-dim); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .credits { padding: 30px 22px; } }