/* The MuniOpen pages (templates/marketing/muniopen.html: /muniopen/, /muniopen/ir/, /muniopen/sites/), ported from design hub g24 launch board v11: MO_HOME and MO_IR (frame_l19), MO_SITES (frame_l20). launch-family.css draws the DL2 header, hero grid, bands, close card and footer under #lp-family; this file adds only what the MuniOpen frames carry beyond the Family home, every rule scoped under #lp-mo. DL2 tokens only (declared on #lp-family), no raw colours, and no style attributes: the drawn pictures size themselves here. */ #lp-mo .mo-head h2 { margin-top: 0; } #lp-mo .mo-hero { padding-bottom: 96px; } #lp-mo .mo-acts { margin-top: 32px; } #lp-mo .mo-hero .fh__ai, #lp-mo .mo-irhero .fh__ai, #lp-mo .sa-hero .fh__ai { font-size: 20px; line-height: 30px; } /* the drawn pictures on the sample issuer (frame_l19 DRAW_CSS) */ #lp-mo .mo-pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-control); background: var(--dl-page); } #lp-mo .mo-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; } #lp-mo .mo-dr { background: var(--dl-surface); } #lp-mo .mo-dr__in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 10px; } #lp-mo .mo-dr__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; } #lp-mo .mo-dr__n { margin: 0; font-family: var(--dl-font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--dl-ink); } #lp-mo .mo-dr__s { padding: 1px 6px; font-size: 10px; line-height: 14px; } #lp-mo .mo-dr__k { margin: 2px 0 0; font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dl-muted); } #lp-mo .mo-dr__bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--dl-rule-strong); } #lp-mo .mo-dr__bars i { flex: 1; border-radius: 2px 2px 0 0; background: var(--dl-action); } /* principal by fiscal year, FY2027-FY2041, as a share of the FY2037 peak (MUNIOPEN_SAMPLE['principal']) */ #lp-mo .mo-dr__bars i:nth-child(1) { height: 19.5%; } #lp-mo .mo-dr__bars i:nth-child(2) { height: 67.1%; } #lp-mo .mo-dr__bars i:nth-child(3) { height: 70.6%; } #lp-mo .mo-dr__bars i:nth-child(4) { height: 74.1%; } #lp-mo .mo-dr__bars i:nth-child(5) { height: 77.8%; } #lp-mo .mo-dr__bars i:nth-child(6) { height: 81.7%; } #lp-mo .mo-dr__bars i:nth-child(7) { height: 85.8%; } #lp-mo .mo-dr__bars i:nth-child(8) { height: 89.3%; } #lp-mo .mo-dr__bars i:nth-child(9) { height: 92.8%; } #lp-mo .mo-dr__bars i:nth-child(10) { height: 96.5%; } #lp-mo .mo-dr__bars i:nth-child(11) { height: 100%; } #lp-mo .mo-dr__bars i:nth-child(12) { height: 71.3%; } #lp-mo .mo-dr__bars i:nth-child(13) { height: 40.9%; } #lp-mo .mo-dr__bars i:nth-child(14) { height: 16.1%; } #lp-mo .mo-dr__bars i:nth-child(15) { height: 16.6%; } #lp-mo .mo-dr__ax { display: flex; justify-content: space-between; font-family: var(--dl-font-mono); font-size: 10px; line-height: 12px; color: var(--dl-muted); } #lp-mo .mo-dr--big .mo-dr__in { gap: 10px; padding: 24px 28px 20px; } #lp-mo .mo-dr--big .mo-dr__n { font-size: 20px; line-height: 26px; } #lp-mo .mo-dr--big .mo-dr__s { padding: 2px 8px; font-size: 12px; line-height: 16px; } #lp-mo .mo-dr--big .mo-dr__k { font-size: 11px; line-height: 16px; } #lp-mo .mo-dr--big .mo-dr__bars { gap: 6px; } #lp-mo .mo-dr--big .mo-dr__ax { font-size: 12px; line-height: 16px; } #lp-mo .mo-dr__docs { display: flex; flex-direction: column; margin: 2px 0 0; padding: 0; list-style: none; } #lp-mo .mo-dr__docs li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--dl-rule); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--dl-ink); } #lp-mo .mo-dr__docs li svg { flex: none; color: var(--dl-action); } #lp-mo .mo-dr__docs small { display: block; font-size: 10px; line-height: 13px; font-weight: 500; color: var(--dl-muted); } /* MO_HOME: two product cards whose rows share tracks */ #lp-mo .mo-pcs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: 16px; } #lp-mo .mo-pc { grid-column: span 6; grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 20px; padding: 24px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-mo .mo-pc__h { margin: 0; font-family: var(--dl-font-display); font-size: 28px; line-height: 34px; font-weight: 600; color: var(--dl-ink); } #lp-mo .mo-pc__body { display: flex; flex-direction: column; gap: 8px; } #lp-mo .mo-pc__p { margin: 0; font-size: 16px; line-height: 26px; color: var(--dl-ink); } #lp-mo .mo-pc__fn { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--dl-muted); } #lp-mo .mo-pc__go { padding-top: 4px; border-top: 1px solid var(--dl-rule); } /* hub g29 bc-7095 P2-1: while IR is the only card (Sites hidden until C24) it runs across both tracks, chart left, copy and link right, so the right half is never empty. */ #lp-mo .mo-pc--wide { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "pic h" "pic body" "pic go"; align-content: start; column-gap: 32px; } #lp-mo .mo-pc--wide > .mo-pc__h { grid-area: h; } #lp-mo .mo-pc--wide > .mo-pic { grid-area: pic; } #lp-mo .mo-pc--wide > .mo-pc__body { grid-area: body; } #lp-mo .mo-pc--wide > .mo-pc__go { grid-area: go; align-self: end; } /* the Sites card: a generic site, drawn; nothing legible */ #lp-mo .mo-pic--drawn { background: var(--dl-tint); } #lp-mo .mo-site { position: absolute; left: 24px; right: 24px; top: 24px; bottom: 0; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--dl-rule-strong); border-bottom: 0; border-radius: var(--dl-r-control) var(--dl-r-control) 0 0; background: var(--dl-surface); overflow: hidden; } #lp-mo .mo-site__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--dl-rule); } #lp-mo .mo-site__bar i { width: 8px; height: 8px; border-radius: 9999px; background: var(--dl-rule-strong); } #lp-mo .mo-site__bar span { flex: 1; height: 10px; margin-left: 12px; border-radius: 5px; background: var(--dl-page); } #lp-mo .mo-site__nav { display: flex; align-items: center; gap: 14px; padding: 0 20px; } #lp-mo .mo-site__nav b { width: 84px; height: 14px; border-radius: 3px; background: var(--dl-muted); } #lp-mo .mo-site__nav span { width: 44px; height: 8px; border-radius: 4px; background: var(--dl-rule-strong); } #lp-mo .mo-site__nav span:last-child { width: 72px; height: 22px; margin-left: auto; border-radius: var(--dl-r-control); background: var(--dl-action); } #lp-mo .mo-site__hero { display: flex; flex-direction: column; gap: 10px; margin: 0 20px; padding: 22px 20px; border-radius: var(--dl-r-control); background: var(--dl-action-soft); } #lp-mo .mo-site__hero span { width: 58%; height: 14px; border-radius: 4px; background: var(--dl-ink); } #lp-mo .mo-site__hero span + span { width: 40%; height: 8px; background: var(--dl-muted); } #lp-mo .mo-site__hero em { width: 96px; height: 24px; margin-top: 4px; border-radius: var(--dl-r-control); background: var(--dl-action); } #lp-mo .mo-site__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 20px; } #lp-mo .mo-site__cards div { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-control); } #lp-mo .mo-site__cards span { height: 7px; border-radius: 4px; background: var(--dl-rule-strong); } #lp-mo .mo-site__cards span:first-child { width: 55%; height: 9px; background: var(--dl-muted); } #lp-mo .mo-site__cards span:last-child { width: 75%; } #lp-mo .mo-site__rows { display: flex; flex-direction: column; margin: 0 20px; } #lp-mo .mo-site__rows span { height: 22px; border-bottom: 1px solid var(--dl-rule); } /* proof: the copy's capability lines on shared tracks (two when "Claim yours" is held) */ #lp-mo .mo-proof-band { padding: 64px 0; } #lp-mo .mo-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } #lp-mo .mo-proof--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #lp-mo .mo-proof li { display: flex; align-items: flex-start; gap: 12px; padding: 24px 0 0; border-top: 2px solid var(--dl-action); font-family: var(--dl-font-display); font-size: 22px; line-height: 30px; font-weight: 600; color: var(--dl-ink); } #lp-mo .mo-proof li svg { flex: none; margin-top: 6px; color: var(--dl-action); } /* the AI band: one line, the MuniPro AI lockup and chip */ #lp-mo .mo-ai { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: center; padding: 32px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-mo .mo-ai__id { grid-column: 1 / span 3; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } #lp-mo .mo-ai__l { grid-column: 4 / span 6; margin: 0; font-family: var(--dl-font-display); font-size: 24px; line-height: 34px; font-weight: 400; color: var(--dl-ink); } #lp-mo .mo-ai__go { grid-column: 10 / span 3; justify-self: end; } /* the close band: no eyebrow; copy on 5 tracks, presses on 7 */ @media (min-width: 1100px) { #lp-mo .mo-cta .fc__copy { grid-column: 1 / span 5; } #lp-mo .mo-cta .fc__acts { grid-column: 6 / span 7; } } /* MO_IR hero: the sample issuer's page (frame_l17 SWITCH's record card) */ #lp-mo .sw-hero { padding: 72px 0 96px; } #lp-mo .sw-hero h1 { font-size: 48px; line-height: 56px; } #lp-mo .mo-irhero .fh__g { align-items: center; } #lp-mo .sw-find { padding: 28px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } /* MO_IR hero: the issuer search (hub g29 SPEC-MUNIOPEN 2): one filled control, the field then Find */ #lp-mo .mo-find { margin: 28px 0 0; scroll-margin-top: 96px; } #lp-mo .mo-find__l { display: block; margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--dl-ink); } #lp-mo .mo-find__row { display: flex; gap: 8px; align-items: stretch; } #lp-mo .mo-find__q { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--dl-rule-strong); border-radius: var(--dl-r-control); background: var(--dl-page); font: inherit; font-size: 16px; color: var(--dl-ink); } #lp-mo .mo-find__q:focus-visible { outline: 2px solid var(--dl-action); outline-offset: 2px; } #lp-mo .mo-find__go { flex: none; } #lp-mo .mo-find__note { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--dl-muted); } #lp-mo .mo-find__err { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--dl-ink); } /* /muniopen/claim/: the search's results rows (issuer, state, type, View page and Claim) */ #lp-mo .mo-claim { max-width: 860px; } #lp-mo .mo-res { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; } #lp-mo .mo-res th, #lp-mo .mo-res td { padding: 12px 8px; border-bottom: 1px solid var(--dl-rule); text-align: left; vertical-align: middle; } #lp-mo .mo-res thead th { font-size: 13px; font-weight: 600; color: var(--dl-muted); } #lp-mo .mo-res tbody th { font-weight: 600; color: var(--dl-ink); } #lp-mo .mo-res__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; } #lp-mo .mo-res__view { color: var(--dl-action); font-size: 14px; line-height: 21px; text-decoration: underline; text-underline-offset: 3px; } #lp-mo .mo-res__more, #lp-mo .mo-res__none { margin: 16px 0 0; font-size: 14px; line-height: 21px; color: var(--dl-muted); } #lp-mo .sw-rec { padding: 20px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-page); } #lp-mo .sw-rec__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } #lp-mo .sw-rec__name { margin: 0; font-family: var(--dl-font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--dl-ink); } #lp-mo .sw-rec__sub { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--dl-muted); } #lp-mo .sw-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; } #lp-mo .sw-figs > div { padding-left: 16px; border-left: 1px solid var(--dl-rule-strong); } #lp-mo .sw-figs dt { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-muted); } #lp-mo .sw-figs dd { margin: 6px 0 0; font-family: var(--dl-font-mono); font-size: 22px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dl-ink); } #lp-mo .sw-figs small { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--dl-muted); } #lp-mo .sw-ser { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 14px; line-height: 20px; } #lp-mo .sw-ser th { padding: 0 0 8px; border-bottom: 1px solid var(--dl-rule-strong); text-align: left; font-family: var(--dl-font-ui); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--dl-muted); } #lp-mo .sw-ser th.n { text-align: right; } #lp-mo .sw-ser td { padding: 8px 0; border-bottom: 1px solid var(--dl-rule); color: var(--dl-ink); } #lp-mo .sw-ser td.n { text-align: right; font-family: var(--dl-font-mono); font-size: 13px; font-variant-numeric: tabular-nums; } #lp-mo .sw-built { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--dl-ink); } #lp-mo .sw-built svg { flex: none; color: var(--dl-action); } /* MO_IR: claim in three steps (frame_l19 ir_steps; the switch pages' sw-steps, launch-switch.css) */ #lp-mo .sw-h2 { max-width: 800px; margin: 0 0 40px; font-family: var(--dl-font-display); font-size: 36px; line-height: 44px; font-weight: 600; color: var(--dl-ink); } #lp-mo .sw-h2 em { font-style: normal; color: var(--dl-action); } #lp-mo .sw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 16px; margin: 0; padding: 0; list-style: none; } #lp-mo .sw-step { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 12px; padding: 28px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-mo .sw-step__n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--dl-action-soft); font-family: var(--dl-font-mono); font-size: 16px; font-weight: 500; color: var(--dl-action); } #lp-mo .sw-step__t { margin: 8px 0 0; font-family: var(--dl-font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--dl-ink); } #lp-mo .sw-step__b { display: flex; flex-direction: column; gap: 8px; } #lp-mo .sw-step__p { margin: 0; font-size: 16px; line-height: 26px; color: var(--dl-text); } /* MO_IR: what your page shows, equal cards whose rows share tracks (four with every claim, two today) */ #lp-mo .mo-shows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 16px; } #lp-mo .mo-shows--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #lp-mo .mo-shows--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #lp-mo .mo-sh { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 12px; padding: 0 0 24px; overflow: hidden; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-mo .mo-sh .mo-pic { border: 0; border-bottom: 1px solid var(--dl-rule); border-radius: 0; } #lp-mo .mo-sh__t { margin: 8px 20px 0; font-family: var(--dl-font-display); font-size: 21px; line-height: 28px; font-weight: 600; color: var(--dl-ink); } #lp-mo .mo-sh__p { margin: 0 20px; font-size: 15px; line-height: 24px; color: var(--dl-text); } #lp-mo .mo-pic--share { display: flex; align-items: center; justify-content: center; background: var(--dl-tint); } #lp-mo .mo-og { box-sizing: border-box; width: 84%; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--dl-rule-strong); border-radius: var(--dl-r-control); background: var(--dl-surface); } #lp-mo .mo-og__lock { display: flex; } #lp-mo .mo-og__n { margin: 8px 0 0; font-family: var(--dl-font-display); font-size: 17px; line-height: 22px; font-weight: 600; color: var(--dl-ink); } #lp-mo .mo-og__k { margin: 6px 0 0; font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-muted); } #lp-mo .mo-og__v { margin: 0; font-family: var(--dl-font-mono); font-size: 15px; line-height: 20px; font-weight: 500; color: var(--dl-ink); } #lp-mo .mo-og__s { margin-top: 8px; font-size: 11px; line-height: 14px; } /* MO_SITES (frame_l20): before / after, two equal 16:10 pictures, each labelled */ #lp-mo .sa-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #lp-mo .sa-shot { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; } #lp-mo .sa-shot__l { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-muted); } #lp-mo .sa-pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-control); background: var(--dl-page); } #lp-mo .sa-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; } /* the bank's before (held): two stacked Letter pages of a PDF form, drawn; nothing legible */ #lp-mo .sa-pic--form { background: var(--dl-tint); } #lp-mo .sa-f__pg { position: absolute; top: 9%; width: 41%; aspect-ratio: 8.5 / 11; box-sizing: border-box; display: flex; flex-direction: column; gap: 5%; padding: 6% 5%; border: 1px solid var(--dl-rule-strong); background: var(--dl-surface); overflow: hidden; } #lp-mo .sa-f__pg--back { left: 24%; top: 5%; } #lp-mo .sa-f__pg--front { left: 33%; } #lp-mo .sa-f__hd { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; border-bottom: 2px solid var(--dl-rule-strong); } #lp-mo .sa-f__hd i { display: block; height: 7px; width: 70%; border-radius: 2px; background: var(--dl-muted); } #lp-mo .sa-f__hd i + i { height: 4px; width: 45%; background: var(--dl-rule-strong); } #lp-mo .sa-f__row { display: flex; flex-direction: column; gap: 3px; } #lp-mo .sa-f__row i { display: block; height: 4px; border-radius: 2px; background: var(--dl-rule-strong); } #lp-mo .sa-f__row span { display: block; height: 9px; border-bottom: 1px solid var(--dl-muted); background: var(--dl-action-soft); } #lp-mo .sa-f__rule { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--dl-muted); } #lp-mo .sa-f__sec { height: 5px; width: 50%; border-radius: 2px; background: var(--dl-muted); } #lp-mo .sa-f__cb { display: flex; align-items: center; gap: 6px; } #lp-mo .sa-f__cb b { flex: none; width: 8px; height: 8px; border: 1px solid var(--dl-muted); background: var(--dl-surface); } #lp-mo .sa-f__cb i { display: block; height: 4px; border-radius: 2px; background: var(--dl-rule-strong); } #lp-mo .sa-f__w28 { width: 28%; } #lp-mo .sa-f__w30 { width: 30%; } #lp-mo .sa-f__w34 { width: 34%; } #lp-mo .sa-f__w40 { width: 40%; } #lp-mo .sa-f__w46 { width: 46%; } #lp-mo .sa-f__w52 { width: 52%; } #lp-mo .sa-f__w61 { width: 61%; } #lp-mo .sa-hero { padding-bottom: 96px; } #lp-mo .sa-hero .fh__g { align-items: center; } #lp-mo .sa-hero .fh__copy { grid-column: 1 / span 8; } #lp-mo .sa-hero .fh__media { grid-column: 1 / -1; margin-top: 56px; } #lp-mo .sa-hero .fh__ai { max-width: 720px; } /* the work: each case on the same 12 tracks, copy on 4, before and after on 4 each */ #lp-mo .sa-cases { display: flex; flex-direction: column; gap: 16px; } #lp-mo .sa-case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: start; padding: 24px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-mo .sa-case__copy { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; } #lp-mo .sa-case .sa-pair { grid-column: 5 / span 8; } #lp-mo .sa-case__t { margin: 0; font-family: var(--dl-font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--dl-ink); } #lp-mo .sa-case__p { margin: 0; font-size: 15px; line-height: 24px; color: var(--dl-text); } #lp-mo .sa-case__go { margin: 0; } /* what every site gets: one tile per line on shared tracks (five with C26, four without) */ #lp-mo .sa-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } #lp-mo .sa-tiles--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } #lp-mo .sa-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); font-family: var(--dl-font-display); font-size: 19px; line-height: 27px; font-weight: 600; color: var(--dl-ink); } #lp-mo .sa-tile svg { flex: none; color: var(--dl-action); } #lp-mo .sa-tiles__fn { margin: 16px 0 0; font-size: 12px; line-height: 18px; color: var(--dl-muted); } @media (max-width: 1099.98px) { #lp-mo .mo-shows, #lp-mo .mo-shows--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 16px; } #lp-mo .mo-sh { grid-row: auto; } #lp-mo .sa-case__copy, #lp-mo .sa-case .sa-pair { grid-column: 1 / -1; } #lp-mo .sa-case__copy { padding: 0 0 20px; } #lp-mo .sa-tiles, #lp-mo .sa-tiles--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639.98px) { #lp-mo .mo-find__row { flex-direction: column; } /* phone: field and Find stack, full width */ #lp-mo .mo-find__go { width: 100%; } #lp-mo .mo-res thead { display: none; } #lp-mo .mo-res tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--dl-rule); } #lp-mo .mo-res th, #lp-mo .mo-res td { padding: 2px 0; border-bottom: 0; } #lp-mo .mo-res__acts { justify-content: flex-start; padding-top: 8px; } #lp-mo .mo-hero, #lp-mo .sa-hero { padding-bottom: 56px; } #lp-mo .sa-hero .fh__copy, #lp-mo .sa-hero .fh__media { grid-column: 1 / -1; } /* MO_SITES_M: no implicit columns */ #lp-mo .mo-hero .fh__ai, #lp-mo .mo-irhero .fh__ai, #lp-mo .sa-hero .fh__ai { font-size: 18px; line-height: 27px; } #lp-mo .mo-acts { margin-top: 24px; } #lp-mo .mo-pcs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; } #lp-mo .mo-pc { grid-column: 1; grid-row: auto; display: flex; flex-direction: column; gap: 16px; padding: 20px; } #lp-mo .mo-pc__h { font-size: 24px; line-height: 30px; } #lp-mo .mo-site { left: 14px; right: 14px; top: 14px; gap: 10px; } #lp-mo .mo-site__nav span:nth-child(n+4):not(:last-child) { display: none; } #lp-mo .mo-proof-band { padding: 48px 0; } #lp-mo .mo-proof, #lp-mo .mo-proof--n2 { grid-template-columns: minmax(0, 1fr); gap: 20px; } #lp-mo .mo-proof li { padding-top: 16px; font-size: 19px; line-height: 26px; } #lp-mo .mo-ai { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 24px 20px; } #lp-mo .mo-ai__id, #lp-mo .mo-ai__l, #lp-mo .mo-ai__go { grid-column: 1; justify-self: start; } #lp-mo .mo-ai__l { font-size: 20px; line-height: 29px; } #lp-mo .sw-hero { padding: 32px 0 56px; } #lp-mo .sw-hero h1 { font-size: 34px; line-height: 42px; } #lp-mo .sw-find, #lp-mo .sw-rec { padding: 16px; } #lp-mo .sw-rec__top { flex-direction: column; } #lp-mo .sw-figs { grid-template-columns: minmax(0, 1fr); gap: 0; } #lp-mo .sw-figs > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 10px 0; border-left: 0; border-top: 1px solid var(--dl-rule); } #lp-mo .sw-figs dd { margin: 0; font-size: 18px; line-height: 24px; } #lp-mo .sw-figs small { flex-basis: 100%; text-align: right; } #lp-mo .sw-ser { font-size: 13px; } #lp-mo .sw-ser td.n { font-size: 12px; } #lp-mo .sw-ser th:nth-child(3), #lp-mo .sw-ser td:nth-child(3) { padding-left: 8px; } #lp-mo .sw-h2 { margin-bottom: 28px; font-size: 28px; line-height: 34px; } #lp-mo .sw-steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; } #lp-mo .sw-step { grid-row: auto; display: flex; flex-direction: column; padding: 20px; } #lp-mo .mo-irhero .fh__media { margin-top: 24px; } #lp-mo .mo-shows, #lp-mo .mo-shows--n2, #lp-mo .mo-shows--n3 { grid-template-columns: minmax(0, 1fr); } #lp-mo .mo-sh { display: flex; flex-direction: column; } #lp-mo .mo-dr--big .mo-dr__in { gap: 6px; padding: 12px 14px 10px; } #lp-mo .mo-dr--big .mo-dr__n { font-size: 14px; line-height: 18px; } #lp-mo .mo-dr--big .mo-dr__s { padding: 1px 6px; font-size: 10px; line-height: 14px; } #lp-mo .mo-dr--big .mo-dr__k { font-size: 10px; line-height: 14px; } #lp-mo .mo-dr--big .mo-dr__bars { gap: 3px; } #lp-mo .mo-dr--big .mo-dr__ax { font-size: 10px; line-height: 12px; } #lp-mo .sa-hero .fh__media { margin-top: 32px; } #lp-mo .sa-pair { grid-template-columns: minmax(0, 1fr); } #lp-mo .sa-case { padding: 20px; } #lp-mo .sa-case__t { font-size: 22px; line-height: 28px; } #lp-mo .sa-tiles, #lp-mo .sa-tiles--n4 { grid-template-columns: minmax(0, 1fr); gap: 12px; } #lp-mo .sa-tile { flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px 20px; font-size: 18px; line-height: 26px; } #lp-mo .sa-tile svg { margin-top: 4px; } }