/** * Responsive layer. * * The design was authored desktop-only: 5,013 inline style attributes, 588 * classes, and exactly one layout media query. Inline styles beat stylesheet * rules, so every override here needs !important — a property of the markup, * not a shortcut. * * IMPORTANT — two spellings of every inline style * The raw template writes `grid-template-columns:1fr 1fr` (no space). * React re-serializes through the CSSOM when it renders, producing * `grid-template-columns: 1fr 1fr` (with a space). The live DOM is the * React-rendered form, so selectors written only against the template's * spelling match nothing at all once the app mounts. Rules that need a value * therefore list both spellings. * * Where a property name alone is enough to select on, prefer that — it is * immune to the spacing difference. That is why the grid rule below matches * `[style*="grid-template-columns"]` rather than enumerating track lists. * * Breakpoints * 1024px tablet — relax the widest fixed grids * 860px the real phone break: stack, shrink type, tighten spacing * 560px small phones — tighter still */ /* ------------------------------------------------------------------ */ /* Tablet */ /* ------------------------------------------------------------------ */ @media (max-width: 1024px) { [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"], [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* The stat strips (see the 860px block) reflow to 2x2 here, and the cell styling that made them a single row does not survive the wrap: the cell starting the second row keeps the 26px left padding it was given as a middle-of-row cell, so it sits indented under the first; the cell ending the first row keeps a border-right that now dangles at the container's edge; and the two rows have nothing between them. Same three corrections as the phone rule, expressed for two columns. Selecting through the container's declared track list keeps this to the fixed 3- and 4-column strips — the auto-fit ones resolve to a different number of columns at this width, where odd/even would mean something else. Their declared value is unchanged by the override above, which only sets the computed one. */ [style*="border-top"][style*="repeat(4,1fr)"] > *:nth-child(even), [style*="border-top"][style*="repeat(4, 1fr)"] > *:nth-child(even), [style*="border-top"][style*="repeat(3,1fr)"] > *:nth-child(even), [style*="border-top"][style*="repeat(3, 1fr)"] > *:nth-child(even) { border-right: 0 !important; } [style*="border-top"][style*="repeat(4,1fr)"] > *:nth-child(odd), [style*="border-top"][style*="repeat(4, 1fr)"] > *:nth-child(odd), [style*="border-top"][style*="repeat(3,1fr)"] > *:nth-child(odd), [style*="border-top"][style*="repeat(3, 1fr)"] > *:nth-child(odd) { padding-left: 0 !important; } [style*="border-top"][style*="repeat(4,1fr)"] > *:nth-child(n+3), [style*="border-top"][style*="repeat(4, 1fr)"] > *:nth-child(n+3), [style*="border-top"][style*="repeat(3,1fr)"] > *:nth-child(n+3), [style*="border-top"][style*="repeat(3, 1fr)"] > *:nth-child(n+3) { border-top: 1px solid var(--c-hairline, #d7e7f3) !important; padding-top: 26px !important; } [style*="max-width:1180px"], [style*="max-width: 1180px"] { padding-left: 20px !important; padding-right: 20px !important; } } /* ------------------------------------------------------------------ */ /* Phone / small tablet */ /* ------------------------------------------------------------------ */ @media (max-width: 860px) { /* --- grids ------------------------------------------------------- */ /* Multi-column content layouts become a single column. Selecting on the property name sidesteps the two-spellings problem, but on its own it is too blunt: it also flattened grids that are DIAGRAMS, where the columns carry meaning. The 3(38) fund-lineup matrix — a label column plus value / blend / growth — became a single stack of empty boxes with its row and column labels orphaned beside them. Two exclusions: 26px repeat(3, …) the style matrix. The prefix "26px repeat(3" matches both spellings, since they only differ after the comma. auto-fit / auto-fill already responsive by construction — a minmax(280px, 1fr) track resolves to one column at this width on its own. Excluding them also protects repeat(auto-fill, 12px), the dot field, which a single-column rule would stretch into a long line. 88px 1fr TrailGuide's numbered steps: a badge column beside its copy. 88px + 28px gap still leaves 246px for the text, so the two-column form is the *better* mobile layout. Collapsed, the badge column stretched to full width and centred its circle, leaving every step with a centred number floating above left-aligned copy — the most visible of the reported alignment problems. minmax(0, 1fr) rather than 1fr: a bare `1fr` track is minmax(auto, 1fr), and that `auto` floor refuses to shrink below the item's min-content width. Wide content (the RMD calculator's results table) then pushed the track past the viewport even though the grid was nominally one column. */ [style*="grid-template-columns"]:not([style*="26px repeat(3"]):not([style*="repeat(auto-fit"]):not([style*="repeat(auto-fill"]):not([style*="88px 1fr"]) { grid-template-columns: minmax(0, 1fr) !important; } /* The badge grid keeps two tracks, but its text track still needs the minmax(0, …) floor for the same reason as above. */ [style*="88px 1fr"] { grid-template-columns: 88px minmax(0, 1fr) !important; } /* Same reasoning one level down: grid children default to min-width:auto, which lets wide content override the parent's track width. GRID ONLY — this must not be extended to flex children. It was, and the damage was invisible to every check: `min-width: auto` is what stops a flex item shrinking below its own content, so removing it let short unwrappable labels get squeezed under their intrinsic width and spill their glyphs across the neighbour. On the established-plans page a "3(38)" figure sitting beside its description was squeezed from 50px to 27px, and the two texts rendered on top of each other. The boxes never overlapped and nothing overflowed the viewport, so the audit passed it. A flex row cannot push its container wide the way a grid track can, so nothing needs the override here. */ [style*="display: grid"] > *, [style*="display:grid"] > * { min-width: 0; } /* --- type scale -------------------------------------------------- */ :root { --fs-display-xxl: 34px; --ls-display-xxl: -0.7px; --fs-display-xl: 30px; --ls-display-xl: -0.6px; --fs-display-lg: 25px; --ls-display-lg: -0.4px; --fs-display-md: 21px; --fs-heading-lg: 19px; --fs-heading-md: 18px; --sp-section: 40px; --sp-section-lg: 52px; } [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 32px !important; letter-spacing: -0.6px !important; } [style*="font-size:48px"], [style*="font-size: 48px"] { font-size: 30px !important; letter-spacing: -0.6px !important; } [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 29px !important; letter-spacing: -0.5px !important; } [style*="font-size:42px"], [style*="font-size: 42px"] { font-size: 28px !important; letter-spacing: -0.5px !important; } [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 27px !important; letter-spacing: -0.5px !important; } [style*="font-size:38px"], [style*="font-size: 38px"] { font-size: 26px !important; letter-spacing: -0.4px !important; } [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 25px !important; letter-spacing: -0.4px !important; } [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 24px !important; letter-spacing: -0.4px !important; } [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 23px !important; letter-spacing: -0.3px !important; } [style*="font-size:30px"], [style*="font-size: 30px"] { font-size: 22px !important; } [style*="font-size:28px"], [style*="font-size: 28px"] { font-size: 21px !important; } [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 20px !important; } /* --- fluid type -------------------------------------------------- These clamps were tuned for desktop: at 390px the vw term is tiny, so every one of them resolves to its *minimum*, which is still a desktop size — clamp(40px, 5.4vw, 68px) renders at 40px on a phone. Matching on the clamp minimum alone is safe against the two-spellings problem: React inserts spaces after commas, but never after `clamp(`, so the `clamp(40px` prefix is identical in both forms. Where a minimum is also used by a padding clamp (30px, 36px) the vw term disambiguates, and both spellings are listed. */ [style*="clamp(46px"] { font-size: 30px !important; letter-spacing: -0.6px !important; } [style*="clamp(44px"] { font-size: 29px !important; letter-spacing: -0.6px !important; } [style*="clamp(42px"] { font-size: 28px !important; letter-spacing: -0.5px !important; } [style*="clamp(40px"] { font-size: 27px !important; letter-spacing: -0.5px !important; } [style*="clamp(38px"] { font-size: 26px !important; letter-spacing: -0.5px !important; } [style*="clamp(32px"] { font-size: 23px !important; letter-spacing: -0.3px !important; } [style*="clamp(26px"] { font-size: 20px !important; } [style*="clamp(24px"] { font-size: 19px !important; } [style*="clamp(19px"] { font-size: 17px !important; } [style*="clamp(17px"] { font-size: 16px !important; } [style*="clamp(16px"] { font-size: 15px !important; } [style*="clamp(36px,3.8vw"], [style*="clamp(36px, 3.8vw"] { font-size: 24px !important; } [style*="clamp(30px,3.8vw"], [style*="clamp(30px, 3.8vw"] { font-size: 22px !important; } /* --- vertical rhythm --------------------------------------------- */ [style*="padding:96px 24px"], [style*="padding: 96px 24px"] { padding: 44px 18px !important; } [style*="padding:90px 24px"], [style*="padding: 90px 24px"] { padding: 42px 18px !important; } [style*="padding:88px 24px"], [style*="padding: 88px 24px"] { padding: 42px 18px !important; } [style*="padding:80px 24px"], [style*="padding: 80px 24px"] { padding: 40px 18px !important; } [style*="padding:70px 24px"], [style*="padding: 70px 24px"] { padding: 36px 18px !important; } [style*="padding:64px 24px"], [style*="padding: 64px 24px"] { padding: 34px 18px !important; } [style*="padding:26px 24px"], [style*="padding: 26px 24px"] { padding: 20px 18px !important; } [style*="padding:40px 32px"], [style*="padding: 40px 32px"] { padding: 24px 18px !important; } [style*="padding:34px 40px"], [style*="padding: 34px 40px"] { padding: 20px 16px !important; } [style*="padding:56px"], [style*="padding: 56px"] { padding: 30px 20px !important; } [style*="padding:48px"], [style*="padding: 48px"] { padding: 26px 18px !important; } /* Padding clamps — disambiguated from the font clamps by their vw term. */ [style*="clamp(30px,3.6vw"], [style*="clamp(30px, 3.6vw"] { padding: 24px 20px !important; } [style*="clamp(36px,4.4vw"], [style*="clamp(36px, 4.4vw"] { padding: 26px 20px !important; } [style*="clamp(48px,7vw"], [style*="clamp(48px, 7vw"] { padding: 28px 20px !important; } [style*="clamp(64px,9vw"], [style*="clamp(64px, 9vw"] { padding: 32px 20px !important; } /* --- card interiors ----------------------------------------------- */ /* The rules above trim *section* padding; these trim the padding inside the cards that sit within those sections, which the export declares as a single uniform value (30/32/34/36/52px). Left untouched, they were the site's most visible mobile defect and the one that reads as "text alignment issues": section copy starts at x=14, but a paragraph inside a 32px card starts at x=47 and inside a 52px card at x=66. Scrolling one page you cross four or five different left edges. At 1440px the same offsets are a proportionate inset inside a centred 1180px column; at 390px a 52px inset is an eighth of the screen. Normalising the horizontal component to 18px makes every card inset the same, so the page has two left edges (section copy, card copy) instead of five. The vertical component is trimmed proportionally rather than flattened, so cards keep their relative weight. Matching on `padding:NNpx` also catches the two-value forms that begin with the same number (`34px 30px`, `30px 32px`), which is intended — they belong to the same family of card interiors. It does not catch the asymmetric `28px 26px 30px 0` variants, whose zeroed side is a deliberate layout choice for the alternating rows. */ [style*="padding:52px"], [style*="padding: 52px"] { padding: 28px 18px !important; } [style*="padding:36px"], [style*="padding: 36px"] { padding: 22px 18px !important; } [style*="padding:34px"], [style*="padding: 34px"] { padding: 21px 18px !important; } [style*="padding:32px"], [style*="padding: 32px"] { padding: 20px 18px !important; } [style*="padding:30px"], [style*="padding: 30px"] { padding: 19px 18px !important; } /* The same treatment for the two-value card interiors whose horizontal component is larger than their vertical one, so the `padding:NNpx` prefix above does not reach them. Written out in full rather than by prefix so they cannot catch the asymmetric `28px 26px 30px 0` rows, where the zeroed side carries the alternating layout. */ [style*="padding:44px 48px"], [style*="padding: 44px 48px"] { padding: 24px 18px !important; } [style*="padding:40px 44px"], [style*="padding: 40px 44px"] { padding: 22px 18px !important; } [style*="padding:28px 32px"], [style*="padding: 28px 32px"] { padding: 18px 18px !important; } [style*="padding:28px 30px"], [style*="padding: 28px 30px"] { padding: 18px 18px !important; } [style*="padding:26px 30px"], [style*="padding: 26px 30px"] { padding: 18px 18px !important; } [style*="padding:22px 26px"], [style*="padding: 22px 26px"] { padding: 16px 18px !important; } /* Hero overlays sit absolutely over a fixed-height image, so their content clips instead of expanding. Trim the padding to buy room for the text. */ [style*="padding:40px 32px"], [style*="padding: 40px 32px"] { padding: 18px 16px !important; } [style*="max-width:1180px"], [style*="max-width: 1180px"] { padding-left: 18px !important; padding-right: 18px !important; } /* --- heroes ------------------------------------------------------ Kept reasonably tall: the overlay text is absolutely positioned over the image, so an over-aggressive height clips the headline and CTA. */ [style*="clamp(600px"] { height: clamp(380px, 56vh, 440px) !important; } [style*="clamp(460px"] { height: clamp(360px, 52vh, 420px) !important; } [style*="clamp(440px"] { height: clamp(360px, 52vh, 420px) !important; } [style*="clamp(430px"] { height: clamp(350px, 50vh, 410px) !important; } [style*="clamp(400px"] { height: clamp(340px, 48vh, 400px) !important; } [style*="clamp(360px"] { height: clamp(320px, 46vh, 380px) !important; } [style*="clamp(340px"] { height: clamp(300px, 44vh, 360px) !important; } /* The landing split is a full-viewport two-panel grid; once stacked, the 100vh floor would make each panel a full screen tall. */ [style*="min-height:calc(100vh - 56px)"], [style*="min-height: calc(-56px + 100vh)"], [style*="min-height: calc(100vh - 56px)"] { min-height: 0 !important; } /* --- decorative hero corner labels -------------------------------- */ /* 35 of these across the site: an uppercase category label bottom-left and a "SCROLL" cue bottom-right, both absolutely positioned inside the hero. Once the hero shrinks for mobile they sit underneath the CTA buttons. They are ornamental, so hide rather than reflow. */ [style*="position:absolute"][style*="bottom:22px"], [style*="position: absolute"][style*="bottom: 22px"] { display: none !important; } /* --- header ------------------------------------------------------ */ /* The desktop tab strip and mega menu are replaced by the hamburger panel (src/mobile-menu.js). Hiding rather than reflowing: the mega menu is a hover-driven multi-column layout with no touch equivalent. */ header nav { display: none !important; } header [style*="position: absolute"][style*="top: 100%"], header [style*="position:absolute"][style*="top:100%"] { display: none !important; } header > div > div:first-child { padding: 10px 14px !important; gap: 10px !important; justify-content: space-between !important; } /* --- deliberate side-by-side flex rows --------------------------- */ /* Only large gaps: those are real two-column layouts. Small gaps are chips, icons, and button groups that should stay inline. */ [style*="gap: 36px"], [style*="gap:36px"], [style*="gap: 40px"], [style*="gap:40px"], [style*="gap: 44px"], [style*="gap:44px"], [style*="gap: 48px"], [style*="gap:48px"], [style*="gap: 56px"], [style*="gap:56px"], [style*="gap: 64px"], [style*="gap:64px"] { flex-direction: column !important; gap: 22px !important; } /* --- tap targets -------------------------------------------------- */ /* The footer link columns render as 20px-tall text links, well under the ~32px minimum for reliable touch (Google flags these under mobile usability). Padding rather than height so the columns keep their rhythm. The :not() exclusion is load-bearing. The social icons in the footer are 36px circles that centre a 16px glyph with `display: inline-flex; align-items: center; justify-content: center`. Forcing inline-block on them discarded that centring — the glyph fell to the top-left corner of its circle, and the 7px padding pushed it further off — so all three icons rendered visibly misaligned. They are already 36px, comfortably over the 32px minimum, so they need nothing from this rule. */ footer a:not([style*="inline-flex"]) { display: inline-block !important; padding-top: 7px !important; padding-bottom: 7px !important; } header button, header a[role="button"] { min-height: 38px !important; } /* Phone and email links render at ~21px. The support page lists a dozen provider phone numbers — the single most likely thing a participant taps on a phone — so these need a real touch area. */ a[href^="tel:"], a[href^="mailto:"] { display: inline-block !important; padding-top: 6px !important; padding-bottom: 6px !important; /* participants@navigate401k.com is one unbreakable token wider than a phone-width card; without this it renders clipped. */ overflow-wrap: anywhere !important; max-width: 100% !important; } /* --- stat strips --------------------------------------------------- */ /* A row of 3 or 4 statistics in a `gap: 0` grid, ruled off top and bottom, with each cell separated from the next by its own `border-right` and by asymmetric padding: the first cell has no left padding so it aligns with the body copy, the last has no right padding, the middle ones have both. Stacked into one column, every part of that goes wrong at once, and this is what was reported across ten pages — the NQDC "case for a plan", the industries' "what's different here", "the dilution problem", "if plans aren't your specialty", "why a plan channel matters", "the micro-market problem", "who this path is for": - the border-rights become a single vertical hairline running down the right edge of the whole strip, separating nothing - the stats have no divider between them, so 3 or 4 of them read as one undifferentiated block - the first stat sits 26px to the left of all the others, because its padding was written for the left end of a row So: drop the column rule, turn it into a row rule between stacked cells, and flatten the horizontal padding so every stat starts at the same left edge as the copy around it. Selecting on `border-right` is exact — every element in the export that declares one is a column cell in one of these strips, and a column separator is meaningless once there are no columns. The `~ *` half is not optional. The cell at the END of a row carries no border-right — there is no next column to separate it from — so keying on border-right alone reaches every cell but the last, which then keeps its 26px left padding and its missing divider while the others are corrected. That is worse than not fixing it at all: on the NQDC strip it left "98%" and "85%" aligned with each other and "$360k" alone in a third position. Every sibling of a column cell is another cell of the same strip. */ [style*="border-right"], [style*="border-right"] ~ * { border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } [style*="border-right"]:not(:first-child), [style*="border-right"] ~ * { border-top: 1px solid var(--c-hairline, #d7e7f3) !important; } /* --- sticky side rails -------------------------------------------- */ /* Two panels stick at top:96px: the photo/contact card on a team member's page, and the "Get started" summary on the contact page. Both are the narrow half of a two-column grid, and on desktop they correctly follow you down the long column beside them. Once that grid collapses to one column they become a full-width block *above* the content they used to sit beside — and they keep sticking. A grid item's containing block is nominally its grid area, which would pin the card harmlessly inside its own row; Chrome instead constrains sticky grid items to the whole grid container, so the 563px photo card rides down over the entire bio. Scrolling a profile on a phone, the photo covers the text and the bio cannot be read at all. Nothing is lost by unsticking them: a sticky rail exists to stay beside something, and on one column there is no beside. The header keeps its own stickiness — it declares top:0, so this selector does not reach it. */ [style*="top:96px"][style*="sticky"], [style*="top: 96px"][style*="sticky"] { position: static !important; } /* --- TrailGuide's account-minimum chart --------------------------- */ /* A threshold chart: 89 dots scattered over a 1000x440 viewBox, a dashed line drawn at 24% height, a label sitting on that line, and a caption in the bottom-left. The few faint dots above the line are the savers who clear a $100,000 minimum; the bright clusters below it are the ones who do not. Both text layers are absolutely positioned over the SVG. The SVG is `width: 100%; height: auto` against a fixed viewBox, so the band is aspect-locked at 1132x498 on desktop but 362x159 on a phone — while the text keeps its declared size. Two collisions follow: - the label wraps, and its second line ($100,000) drops off the threshold line into the dot field - the caption, pinned 12px from the bottom, lands on a dot cluster Fixed by shrinking the label enough to stay on one line (it must keep `top: 24%` to sit on the dashed line, which is drawn inside the SVG), and by taking the caption out of the overlay so it flows beneath the chart. */ #tg-viz-wrap > div[style*="top:24%"], #tg-viz-wrap > div[style*="top: 24%"] { flex-wrap: nowrap !important; gap: 8px !important; } #tg-viz-wrap > div[style*="top:24%"] > span:first-child, #tg-viz-wrap > div[style*="top: 24%"] > span:first-child { font-size: 9px !important; letter-spacing: 0.06em !important; } #tg-viz-wrap > div[style*="top:24%"] > span:last-child, #tg-viz-wrap > div[style*="top: 24%"] > span:last-child { font-size: 17px !important; } #tg-viz-wrap > div[style*="bottom:12px"], #tg-viz-wrap > div[style*="bottom: 12px"] { position: static !important; padding: 10px 4px 2px !important; } /* --- Our Story scroll chrome -------------------------------------- */ /* The page draws a vertical "spine" the copy is meant to run alongside, and a fixed BEARING gauge in the right gutter. Both are positioned against fixed pixel offsets (spine at left:34px, 72px wide, so its line lands at x=70), while the copy column's gutter is `clamp(24px, 7vw, 96px)`. At 1440px the gutter is 96px and the line sits clear of the text; at 390px the gutter collapses to 27px and the line runs straight down the middle of every paragraph. The gauge likewise overlaps the copy's right edge. Both are decorative scroll indicators, so they come out on phones rather than the copy being indented to clear them — indenting would cost 70px of a 390px viewport to make room for a line. #os-cue goes with them: it reads "Follow the line", which is a scroll prompt for a line that is no longer drawn. */ #os-spine, #os-bearing, #os-cue { display: none !important; } /* --- overflow guards --------------------------------------------- */ table { display: block !important; overflow-x: auto !important; max-width: 100% !important; } img, svg, video { max-width: 100% !important; } /* Backstop for residual sub-pixel overflow (the header scroller still leaked ~14px at 360px after every element individually fit). `clip`, not `hidden`: overflow:hidden on an ancestor silently disables position:sticky, which would break the sticky header. */ html, body { overflow-x: clip; } } /* ------------------------------------------------------------------ */ /* Small phones */ /* ------------------------------------------------------------------ */ @media (max-width: 560px) { :root { --fs-display-xxl: 29px; --fs-display-xl: 26px; --fs-display-lg: 23px; --sp-section: 32px; --sp-section-lg: 40px; } [style*="max-width:1180px"], [style*="max-width: 1180px"] { padding-left: 14px !important; padding-right: 14px !important; } [style*="padding:56px"], [style*="padding: 56px"] { padding: 24px 16px !important; } }