/* ===================================================================== MCT document pages ("SOP style"). Clean white, navy text, red as accent only. Numbered sections, label/value tables, disclosures, print output. Used by: /how-we-bill/, /service-overview/ Pair with mct-refresh.css (loaded first, provides the bottom nav). Apply class="sop" to . ===================================================================== */ /* Smooth anchor jumps have to sit on the scrolling element, not on body. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .sop { --navy: #1B365D; --navy-700: #16294A; --muted: #5C7090; --red: #BA0C2F; --red-700: #8E0823; --rule: #E4E8EF; --rule-soft: #EEF1F6; --tint: #F7F9FC; background: #fff; color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* ---- Even line lengths. `balance` evens out the lines of short blocks; `pretty` stops a single straggling word on the last line of longer paragraphs. ---- */ .sop h1, .sop h2, .sop h3, .sop .sop-lead, .sop li, .sop dt, .sop dd, .sop th, .sop td, .sop summary, .sop figcaption, .sop .sop-note { text-wrap: balance; } .sop p { text-wrap: pretty; } .sop { hyphens: none; -webkit-hyphens: none; } /* border-box so the side padding sits inside max-width. Without it the wrapper is max-width + 56px and overflows horizontally just below that viewport size. */ .sop-wrap { box-sizing: border-box; width: 100%; max-width: 856px; margin: 0 auto; padding: 0 28px; } .sop-wrap--wide { max-width: 996px; } .sop *, .sop *::before, .sop *::after { box-sizing: border-box; } /* ---------------- Document header ---------------- */ .sop-head { padding: 76px 0 0; } .sop-eyebrow { font-family: 'Work Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 0 0 18px; } .sop h1 { font-family: 'Poppins', sans-serif; font-size: clamp(32px, 4.4vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); margin: 0 0 18px; max-width: 24ch; } .sop-lead { font-size: clamp(17px, 1.5vw, 19px); font-weight: 300; line-height: 1.55; color: var(--navy); margin: 0; max-width: 58ch; } /* Meta strip */ .sop-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 36px 0 0; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .sop-meta dt { font-family: 'Work Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; } .sop-meta dd { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--navy); margin: 0; } /* Contents */ .sop-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; } .sop-toc a { display: inline-block; font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--navy); text-decoration: none; padding: 7px 13px; border: 1px solid var(--rule); border-radius: 100px; transition: background 130ms ease, border-color 130ms ease, color 130ms ease; } .sop-toc a:hover, .sop-toc a:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; } /* ---------------- Sections ---------------- */ .sop-body { counter-reset: sec; padding: 8px 0 72px; } .sop-section { counter-increment: sec; padding: 44px 0 0; scroll-margin-top: 24px; } .sop-section + .sop-section { border-top: 1px solid var(--rule-soft); margin-top: 44px; padding-top: 44px; } .sop-section > h2 { font-family: 'Poppins', sans-serif; font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; color: var(--navy); margin: 0 0 18px; display: flex; align-items: baseline; gap: 13px; } .sop-section > h2::before { content: counter(sec, decimal-leading-zero); font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--red); flex: none; transform: translateY(-2px); } .sop-section h3 { font-family: 'Work Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); margin: 26px 0 8px; } .sop p { margin: 0 0 15px; max-width: 68ch; } .sop p:last-child { margin-bottom: 0; } .sop strong { font-weight: 600; } /* Scoped to document content on purpose. A bare `.sop a` also catches the shared bottom nav, which turns its links red and hides the red CTA. */ .sop-body a:not(.sop-btn) { color: var(--red); font-weight: 500; text-underline-offset: 3px; } .sop-body a:not(.sop-btn):hover { color: var(--red-700); } .sop-note { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--muted); max-width: 66ch; margin: 14px 0 0; } /* ---------------- Numbered case cards ---------------- */ .sop-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: kase; } .sop-cases--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sop-cases li { counter-increment: kase; background: var(--tint); border: 1px solid var(--rule); border-top: 2px solid var(--red); border-radius: 3px; padding: 22px 22px 24px; } .sop-cases li::before { content: counter(kase); display: block; font-family: 'Work Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--red); margin-bottom: 11px; } .sop-cases--plain li::before { content: none; } .sop-cases b { display: block; font-family: 'Work Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 7px; } .sop-cases span { display: block; font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--navy); } /* ---------------- Two-column lists ---------------- */ .sop-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .sop-col { border: 1px solid var(--rule); border-radius: 3px; padding: 20px 22px 22px; background: #fff; } .sop-col h3 { font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); } .sop-col--yes h3 { color: var(--navy); } .sop-col--no h3 { color: var(--red); } .sop-col ul { list-style: none; margin: 0; padding: 0; } .sop-col li { position: relative; padding-left: 26px; margin: 0 0 11px; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--navy); } .sop-col li:last-child { margin-bottom: 0; } .sop-ic { position: absolute; left: 0; top: 3px; width: 15px; height: 15px; flex: none; } .sop-col--yes .sop-ic { color: var(--navy); } .sop-col--no .sop-ic { color: var(--red); } /* ---------------- Tables ---------------- */ /* Above the stacking breakpoint a wide table scrolls inside its own box rather than pushing the page sideways. */ .sop-table-wrap { margin: 0; overflow-x: auto; } @media (max-width: 720px) { .sop-table-wrap { overflow-x: visible; } } .sop-table { width: 100%; border-collapse: collapse; font-size: 15px; border-top: 1px solid var(--navy); } .sop-table th { font-family: 'Work Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; } .sop-table td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--rule-soft); font-weight: 300; color: var(--navy); vertical-align: top; line-height: 1.45; } .sop-table tbody tr:last-child td { border-bottom: 1px solid var(--rule); } .sop-table tbody tr { transition: background 120ms ease; } .sop-table tbody tr:hover { background: var(--tint); } .sop-table th:last-child, .sop-table td:last-child { padding-right: 0; } .sop-table .sop-rowlabel { font-weight: 600; color: var(--navy); } .sop-table .sop-sub { display: block; font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.4; margin-top: 3px; } .sop-table .sop-strong { font-weight: 600; } /* Label/value pairs, no header row. */ .sop-table--pairs td:first-child { width: 30%; } /* Feature matrix: centered yes/no columns. */ .sop-table--matrix th:not(:first-child), .sop-table--matrix td:not(:first-child) { text-align: center; padding-left: 8px; padding-right: 8px; width: 15%; } .sop-table--matrix td { padding-top: 11px; padding-bottom: 11px; } .sop-table--matrix td:first-child { font-weight: 300; } .sop-table--matrix .sop-mark { width: 15px; height: 15px; display: inline-block; vertical-align: middle; } .sop-table--matrix .sop-mark--yes { color: var(--navy); } .sop-table--matrix .sop-mark--no { color: #C3CBD8; } .sop-table--matrix tfoot td { border-top: 1px solid var(--rule); border-bottom: none; font-weight: 600; padding-top: 14px; } .sop-table--matrix tfoot .sop-price { font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 700; color: var(--navy); } .sop-table--matrix tfoot tr:hover { background: transparent; } /* ---------------- Disclosures ---------------- */ .sop-more { margin: 18px 0 0; } .sop-details { border-top: 1px solid var(--rule-soft); } .sop-details:last-of-type { border-bottom: 1px solid var(--rule-soft); } .sop-details > summary { font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; padding: 15px 0 15px 28px; position: relative; transition: color 130ms ease; } .sop-details > summary::-webkit-details-marker { display: none; } .sop-details > summary::before, .sop-details > summary::after { content: ''; position: absolute; background: var(--red); transition: transform 180ms ease, opacity 180ms ease; } .sop-details > summary::before { left: 0; top: 50%; width: 13px; height: 1.5px; transform: translateY(-50%); } .sop-details > summary::after { left: 5.75px; top: 50%; width: 1.5px; height: 13px; transform: translateY(-50%); } .sop-details[open] > summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; } .sop-details > summary:hover { color: var(--red); } .sop-details > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .sop-detail-body { padding: 0 0 20px; } .sop-detail-body p, .sop-detail-body li { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--navy); max-width: 66ch; } .sop-detail-body ol, .sop-detail-body ul { margin: 0 0 12px; padding-left: 20px; } .sop-detail-body li { margin: 6px 0; } .sop-detail-body li::marker { color: var(--red); } .sop-detail-body > :last-child { margin-bottom: 0; } /* ---------------- Closing ---------------- */ .sop-foot { margin: 52px 0 0; padding: 34px 36px; background: var(--navy); border-radius: 3px; text-align: center; } .sop-foot h2 { font-family: 'Poppins', sans-serif; font-size: clamp(20px, 2.3vw, 25px); font-weight: 600; color: #fff; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 10px; } .sop-foot p { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.82); margin: 0 auto 20px; max-width: 46ch; line-height: 1.5; } .sop-foot-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .sop-foot a.sop-btn, .sop-foot a.sop-btn:link, .sop-foot a.sop-btn:visited { font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; padding: 13px 28px; border-radius: 2px; text-decoration: none; display: inline-block; background: #fff; color: var(--navy); border: 2px solid #fff; transition: background 130ms ease, border-color 130ms ease, color 130ms ease; } .sop-foot a.sop-btn:hover { background: #EAF0F8; border-color: #EAF0F8; } .sop-foot a.sop-btn--ghost, .sop-foot a.sop-btn--ghost:link, .sop-foot a.sop-btn--ghost:visited { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); } .sop-foot a.sop-btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; } .sop-stamp { font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.5; margin: 22px 0 0; max-width: 62ch; } /* ---------------- Responsive ---------------- */ @media (max-width: 720px) { .sop { font-size: 16px; } .sop-wrap { padding: 0 20px; } .sop-head { padding-top: 46px; } .sop-meta { grid-template-columns: 1fr; gap: 14px; } .sop-cases, .sop-cases--3, .sop-cols { grid-template-columns: 1fr; } .sop-section, .sop-section + .sop-section { padding-top: 34px; margin-top: 34px; } .sop-foot { padding: 26px 22px; } .sop-table--pairs td:first-child { width: auto; } /* Tables become stacked records rather than scrolling sideways. */ .sop-table, .sop-table tbody, .sop-table tfoot, .sop-table tr, .sop-table td { display: block; width: 100%; } .sop-table thead { display: none; } .sop-table { border-top: none; } .sop-table tr { border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px; margin: 0 0 10px; } .sop-table tbody tr:hover { background: transparent; } .sop-table td { padding: 7px 0; border-bottom: 1px solid var(--rule-soft); } .sop-table td:last-child, .sop-table tbody tr:last-child td { border-bottom: none; } .sop-table td[data-label]::before { content: attr(data-label); display: block; font-family: 'Work Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .sop-table td.sop-rowlabel { font-size: 16px; padding-top: 0; } .sop-table td.sop-rowlabel::before { display: none; } /* Matrix: label on the left, mark on the right, one row per feature. */ .sop-table--matrix td:not(:first-child) { text-align: left; width: auto; padding-left: 0; padding-right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sop-table--matrix td:first-child { font-weight: 600; font-size: 16px; padding-top: 0; } .sop-table--matrix tfoot td { border-top: none; } } /* ---------------- Print ---------------- */ @media print { .sop { font-size: 11pt; } .mct-bottom-nav, .sop-toc, .sop-foot { display: none !important; } .sop-details > .sop-detail-body { display: block !important; } .sop-details > summary { list-style: none; } .sop-section { break-inside: avoid; } .sop-col, .sop-cases li { break-inside: avoid; } a { color: var(--navy) !important; text-decoration: none; } }