/* ============================================================================ v3.css — second design pass, September 2026 ---------------------------------------------------------------------------- Loaded after styles.css and redesign.css by every page; each carries class="v2 v3". Approved and rolled out site-wide in September 2026. What it adds on top of v2: - a serif display face for headings (Source Serif 4, self-hosted) - page sections that read as distinct bands, not one long block - a home hero whose two halves always sit side by side on desktop - a coverage comparison table, trade tiles, FAQ and a column footer - an article layout with a sticky contents rail on wide screens Sections below are labelled so "move that up" is a one-place edit. ========================================================================= */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/fonts/source-serif-4-latin-wght.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------------------ Tokens */ .v3 { --ink: #0c1f35; --ink-soft: #33465b; --muted: #5b6d80; --line: #e2e8ef; --line-soft: #edf1f5; --cream: #f8f6f1; /* warm section background */ --cream-line: #ece7dc; --sky: #eef4fc; /* cool section background */ --navy: #0b2440; --navy-2: #12355c; --brand: #1558c4; /* the one action colour */ --brand-dark: #0f469f; --teal: #0b8a7f; /* ticks and small accents */ --teal-bg: #e6f4f1; --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --radius: 16px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(12, 31, 53, .04), 0 12px 32px rgba(12, 31, 53, .08); --shadow-lg: 0 2px 6px rgba(12, 31, 53, .05), 0 24px 56px rgba(12, 31, 53, .12); --maxw: 1180px; } /* -------------------------------------------------------------------- Base */ .v3 { color: var(--ink-soft); } .v3 .container { max-width: var(--maxw); padding: 0 20px; } @media (min-width: 900px) { .v3 .container { padding: 0 32px; } } .v3 h1, .v3 h2 { font-family: var(--serif); font-weight: 650; letter-spacing: -.018em; color: var(--ink); } .v3 h1 { font-size: clamp(2.05rem, 6.2vw, 3.35rem); line-height: 1.06; } .v3 h2 { font-size: clamp(1.6rem, 3.8vw, 2.3rem); line-height: 1.14; } .v3 h3 { letter-spacing: -.015em; } /* Section bands. Each section is its own block with its own background, so the page reads as a sequence of clear chapters. */ .v3 section, .v3 .v3-section { padding: 36px 0; } @media (min-width: 900px) { .v3 section, .v3 .v3-section { padding: 60px 0; } } .v3 .band-white { background: #fff; } .v3 .band-cream { background: var(--cream); border-top: 1px solid var(--cream-line); border-bottom: 1px solid var(--cream-line); } .v3 .band-sky { background: var(--sky); } .v3 .band-navy { background: var(--navy); color: #c9d7e6; } .v3 .band-navy h2, .v3 .band-navy h3 { color: #fff; } .v3 .kicker { display: inline-block; margin: 0 0 .9rem; font-size: .78rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--teal); } .v3 .sec-head { max-width: 44rem; margin: 0 0 24px; } .v3 .sec-head p { color: var(--muted); font-size: 1.0625rem; margin: 0; } @media (min-width: 900px) { .v3 .sec-head { margin-bottom: 32px; } .v3 .sec-head p { font-size: 1.1875rem; } } .v3 .sec-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; } .v3 .sec-head-row .sec-head { margin-bottom: 0; } .v3 .sec-head-row + * { margin-top: 24px; } @media (min-width: 900px) { .v3 .sec-head-row + * { margin-top: 32px; } } /* ----------------------------------------------------------------- Buttons */ .v3 .btn { border-radius: 12px; font-weight: 650; box-shadow: 0 1px 2px rgba(12, 31, 53, .12); } .v3 .btn-lg { padding: 1.05rem 1.9rem; } .v3 .btn-arrow::after { content: ''; display: inline-block; width: .5em; height: .5em; margin-left: .6em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-.08em) rotate(45deg); } .v3 .btn-ghost { display: inline-block; padding: 1.05rem 1.5rem; border-radius: 12px; border: 1.5px solid #c9d6e6; background: #fff; color: var(--ink); font-weight: 650; font-size: 1.0625rem; line-height: 1.35; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .v3 .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .v3 .btn-light { background: #fff; color: var(--navy); } .v3 .btn-light:hover, .v3 .btn-light:focus-visible { background: #e6eef8; color: var(--navy); } .v3 .text-link { font-weight: 650; text-decoration: none; } .v3 .text-link:hover { text-decoration: underline; } /* ------------------------------------------------------------------ Header */ .v3 .site-header { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); } .v3 .main-nav a { font-weight: 550; } .v3 .main-nav a[aria-current="page"] { color: var(--brand); } /* ============================================================ HOME — hero */ /* The two halves sit side by side from 860px up, in one row, and stay there. The calculator card is trimmed in the hero (the "what Hiscox will ask" note moves to its own section further down) so both halves end at about the same height, and the copy is vertically centred against the card, so there is no empty column beside it as you scroll. */ .v3 .hp-hero { position: relative; overflow: hidden; background: radial-gradient(900px 420px at 88% -10%, #dde9fa 0%, rgba(221, 233, 250, 0) 70%), linear-gradient(180deg, #f3f7fc 0%, #fbfcfe 100%); border-bottom: 1px solid var(--line); padding: 24px 0 32px; } @media (min-width: 860px) { .v3 .hp-hero { padding: 40px 0 48px; } } .v3 .hp-hero-grid { display: grid; gap: 32px; align-items: center; } .v3 .hp-hero-grid > * { min-width: 0; } @media (min-width: 860px) { .v3 .hp-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; } } @media (min-width: 1100px) { .v3 .hp-hero-grid { gap: 72px; } } .v3 .hp-pill { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--navy-2); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem .35rem .45rem; margin: 0 0 1.25rem; box-shadow: 0 1px 2px rgba(12, 31, 53, .05); } .v3 .hp-pill i { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-bg); position: relative; } .v3 .hp-pill i::after { content: ''; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(45deg); } .v3 .hp-hero h1 { max-width: 13.5em; font-size: clamp(2.05rem, 5.4vw, 3.25rem); margin-bottom: .4em; } .v3 .hp-hero h1 em { font-style: italic; color: var(--brand); font-weight: 600; } .v3 .hp-lede { font-size: 1.0625rem; color: var(--ink-soft); max-width: 46ch; margin: 0 0 1.6rem; } @media (min-width: 860px) { .v3 .hp-lede { font-size: 1.1875rem; } } .v3 .hp-actions { display: flex; flex-wrap: wrap; gap: 10px; } .v3 .hp-actions .btn { padding: 1rem 1.4rem; font-size: 1rem; } .v3 .hp-actions .btn-ghost { padding: 1rem 1.2rem; font-size: 1rem; } .v3 .hp-actions .btn, .v3 .hp-actions .btn-ghost { width: 100%; text-align: center; } @media (min-width: 520px) { .v3 .hp-actions .btn, .v3 .hp-actions .btn-ghost { width: auto; } } .v3 .hp-hero .v2-cta-note { margin-top: .85rem; max-width: 46ch; } .v3 .hp-assure { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; } .v3 .hp-assure li { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--ink-soft); font-weight: 500; } .v3 .hp-assure svg { flex: none; width: 18px; height: 18px; color: var(--teal); } /* Calculator card in the hero */ .v3 .hp-calc-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 18px; } @media (min-width: 860px) { .v3 .hp-calc-card { padding: 24px; } } .v3 .hp-calc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; } .v3 .hp-calc-head strong { font-size: 1.0625rem; color: var(--ink); font-weight: 700; letter-spacing: -.015em; } .v3 .hp-calc-head span { font-size: .8125rem; color: var(--teal); font-weight: 600; white-space: nowrap; } .v3 .hp-calc-card .calc { border: 0; box-shadow: none; padding: 0; margin: 0; } .v3 .hp-calc-card .calc-out { padding: 18px 18px 16px; } .v3 .hp-calc-card .calc-figure { font-size: clamp(2.2rem, 5vw, 2.7rem); } .v3 .hp-calc-card .calc-range { margin: .2rem 0 0; } .v3 .hp-calc-card .calc-annual { margin: .1rem 0 0; } .v3 .hp-calc-card .calc-out .btn { margin-top: .9rem; } .v3 .hp-calc-card .calc-next { display: none; } .v3 .hp-calc-card .calc-adjust { margin: 1.1rem 0 .7rem; } .v3 .hp-calc-card .calc-grid { grid-template-columns: 1fr 1fr; gap: 10px 12px; } .v3 .hp-calc-card .calc-grid .field-wide, .v3 .hp-calc-card .calc-grid .field:last-child { grid-column: 1 / -1; } .v3 .hp-calc-card .calc select { font-size: .9688rem; } .v3 .calc h2.calc-adjust { font-family: 'Inter var', sans-serif; letter-spacing: .09em; } .v3 .hp-calc-card .calc-note { margin: .9rem 0 0; } @media (max-width: 380px) { .v3 .hp-calc-card .calc-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------- Trust strip */ .v3 .hp-trust { padding: 0; background: #fff; border-bottom: 1px solid var(--line); } .v3 .hp-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; } @media (min-width: 900px) { .v3 .hp-trust ul { grid-template-columns: repeat(4, 1fr); } } .v3 .hp-trust li { display: flex; align-items: center; gap: 12px; padding: 20px 8px; border-bottom: 1px solid var(--line-soft); } .v3 .hp-trust li:nth-last-child(-n+2) { border-bottom: 0; } @media (max-width: 599px) { .v3 .hp-trust ul { grid-template-columns: 1fr; } .v3 .hp-trust li { padding: 14px 0; } .v3 .hp-trust li:nth-last-child(2) { border-bottom: 1px solid var(--line-soft); } .v3 .hp-trust b, .v3 .hp-trust small { display: inline; } .v3 .hp-trust small::before { content: ' \00b7 '; } } @media (min-width: 900px) { .v3 .hp-trust li { padding: 26px 18px; border-bottom: 0; border-left: 1px solid var(--line-soft); } .v3 .hp-trust li:first-child { border-left: 0; padding-left: 0; } } .v3 .hp-trust .ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--sky); color: var(--brand); display: flex; align-items: center; justify-content: center; } .v3 .hp-trust .ico svg { width: 20px; height: 20px; } .v3 .hp-trust b { display: block; color: var(--ink); font-size: .9688rem; font-weight: 700; line-height: 1.3; } .v3 .hp-trust small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.4; } /* ------------------------------------------------- Coverage comparison */ .v3 .cmp { background: #fff; border: 1px solid var(--cream-line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .v3 .cmp table { width: 100%; border-collapse: collapse; font-size: .9688rem; } .v3 .cmp thead th { text-align: left; font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: #fcfbf8; padding: 16px 20px; border-bottom: 1px solid var(--cream-line); } .v3 .cmp td { padding: 20px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .v3 .cmp tbody tr:last-child td { border-bottom: 0; } .v3 .cmp tbody tr:hover td { background: #fbfdff; } .v3 .cmp .c-name { display: flex; gap: 14px; align-items: flex-start; min-width: 15rem; } .v3 .cmp .c-name .ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--sky); color: var(--brand); display: flex; align-items: center; justify-content: center; } .v3 .cmp .c-name .ico svg { width: 20px; height: 20px; } .v3 .cmp .c-name b { display: block; color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.3; } .v3 .cmp .c-tag { white-space: nowrap; display: inline-block; margin-top: 6px; font-size: .72rem; font-weight: 650; color: var(--teal); background: var(--teal-bg); border-radius: 999px; padding: .15rem .55rem; } .v3 .cmp .c-what { color: var(--ink-soft); max-width: 30ch; } .v3 .cmp .c-who { color: var(--muted); max-width: 26ch; } .v3 .cmp .c-cost { white-space: nowrap; } .v3 .cmp .c-cost b { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 650; color: var(--ink); line-height: 1.1; letter-spacing: -.01em; } .v3 .cmp .c-cost b small { font-family: 'Inter var', sans-serif; font-size: .8125rem; font-weight: 500; color: var(--muted); letter-spacing: 0; } .v3 .cmp .c-cost span { display: block; font-size: .8125rem; color: var(--muted); margin-top: 3px; } .v3 .cmp .c-cost .c-payroll { font-family: 'Inter var', sans-serif; font-size: .9375rem; font-weight: 650; color: var(--ink); } .v3 .cmp .c-go { text-align: right; white-space: nowrap; } .v3 .cmp .c-go a { font-weight: 650; font-size: .9375rem; text-decoration: none; } .v3 .cmp .c-go a:hover { text-decoration: underline; } .v3 .cmp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px; margin: 22px 0 0; } .v3 .cmp-foot p { font-size: .875rem; color: var(--muted); margin: 0; max-width: 60ch; } /* Phones: each row becomes its own card. */ @media (max-width: 859px) { .v3 .cmp { background: transparent; border: 0; box-shadow: none; overflow: visible; } .v3 .cmp thead { display: none; } .v3 .cmp table, .v3 .cmp tbody, .v3 .cmp tr, .v3 .cmp td { display: block; } .v3 .cmp tr { background: #fff; border: 1px solid var(--cream-line); border-radius: var(--radius); padding: 18px; margin: 0 0 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; } .v3 .cmp td { padding: 0; border: 0; } .v3 .cmp tbody tr:hover td { background: transparent; } .v3 .cmp .c-name { grid-column: 1; min-width: 0; } .v3 .cmp .c-cost { grid-column: 2; grid-row: 1; text-align: right; white-space: normal; max-width: 9.5rem; } .v3 .cmp .c-what, .v3 .cmp .c-who, .v3 .cmp .c-go { grid-column: 1 / -1; max-width: none; } .v3 .cmp .c-who::before { content: 'Who needs it: '; font-weight: 600; color: var(--ink-soft); } .v3 .cmp .c-go { text-align: left; } } /* ----------------------------------------------------------- Trade tiles */ .v3 .hp-trades { display: grid; gap: 32px; } @media (min-width: 980px) { .v3 .hp-trades { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 64px; align-items: start; } } .v3 .hp-trades .sec-head { margin-bottom: 22px; } .v3 .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (min-width: 640px) { .v3 .tiles { grid-template-columns: repeat(3, 1fr); gap: 12px; } } .v3 .tile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-weight: 600; font-size: .9375rem; line-height: 1.3; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .v3 .tile::after { content: ''; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--brand); border-top: 2px solid var(--brand); transform: rotate(45deg); opacity: .6; } .v3 .tile:hover { border-color: #b9cde8; box-shadow: var(--shadow); transform: translateY(-1px); color: var(--brand); } .v3 .tile:hover::after { opacity: 1; } /* --------------------------------------------- What the quote form asks */ .v3 .hp-ask { display: grid; gap: 32px; } @media (min-width: 900px) { .v3 .hp-ask { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; } } .v3 .hp-ask-card { background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); padding: 8px 22px; } @media (min-width: 900px) { .v3 .hp-ask-card { padding: 10px 30px; } } .v3 .hp-ask-card ul { list-style: none; margin: 0; padding: 0; } .v3 .hp-ask-card li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line-soft); } .v3 .hp-ask-card li:last-child { border-bottom: 0; } .v3 .hp-ask-card .ico { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--teal-bg); color: var(--teal); display: flex; align-items: center; justify-content: center; } .v3 .hp-ask-card .ico svg { width: 21px; height: 21px; } .v3 .hp-ask-card b { display: block; color: var(--ink); font-size: 1rem; font-weight: 700; } .v3 .hp-ask-card p { margin: 2px 0 0; font-size: .9375rem; color: var(--muted); line-height: 1.55; } .v3 .hp-ask-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.6rem 0 0; padding: 0; list-style: none; } .v3 .hp-ask-facts li { font-size: .875rem; font-weight: 600; color: var(--navy-2); background: #fff; border: 1px solid #d7e3f2; border-radius: 999px; padding: .4rem .85rem; } /* ------------------------------------------------------------- Guides */ .v3 .hp-guides { display: grid; gap: 16px; } @media (min-width: 900px) { .v3 .hp-guides { grid-template-columns: 1.15fr 1fr; gap: 20px; } } .v3 .g-feature { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 28px; border-radius: 20px; overflow: hidden; text-decoration: none; background: radial-gradient(520px 260px at 100% 0%, rgba(84, 150, 240, .35) 0%, rgba(84, 150, 240, 0) 70%), linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 70%); color: #c9d7e6; } @media (min-width: 900px) { .v3 .g-feature { padding: 40px; min-height: 100%; } } .v3 .g-feature .g-tag { color: #8fc2ff; } .v3 .g-feature h3 { font-family: var(--serif); color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 650; line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .5em; max-width: 18ch; } .v3 .g-feature p { margin: 0 0 1.4rem; max-width: 44ch; color: #b6c8dc; } .v3 .g-feature .g-more { color: #fff; } .v3 .g-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 1.6rem; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); } .v3 .g-figs span { font-size: .8125rem; line-height: 1.35; color: #9fb5cc; } .v3 .g-figs b { display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 650; color: #fff; letter-spacing: -.01em; line-height: 1.1; margin-bottom: 4px; } .v3 .g-figs b::after { content: '/mo'; font-family: 'Inter var', sans-serif; font-size: .8125rem; font-weight: 500; color: #9fb5cc; margin-left: 2px; } .v3 .g-list { display: grid; gap: 12px; } @media (min-width: 620px) { .v3 .g-list { grid-template-columns: 1fr 1fr; } } .v3 .g-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .v3 .g-card:hover { border-color: #b9cde8; box-shadow: var(--shadow); } .v3 .g-tag { font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin: 0 0 10px; } .v3 .g-card h3 { font-size: 1.0625rem; color: var(--ink); margin: 0 0 .35em; line-height: 1.3; } .v3 .g-card p { font-size: .9375rem; color: var(--muted); margin: 0 0 16px; line-height: 1.55; } .v3 .g-more { margin-top: auto; font-size: .9375rem; font-weight: 650; color: var(--brand); } .v3 .g-more::after { content: ''; display: inline-block; width: .42em; height: .42em; margin-left: .45em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-.1em) rotate(45deg); } /* ------------------------------------------------ How we are paid */ .v3 .hp-paid { display: grid; gap: 32px; } @media (min-width: 900px) { .v3 .hp-paid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: start; } } .v3 .hp-paid-copy p { font-size: 1.0625rem; } .v3 .hp-paid-copy p:last-child { margin-bottom: 0; } .v3 .isnot { background: #fff; border: 1px solid var(--cream-line); border-radius: 20px; padding: 24px; } @media (min-width: 900px) { .v3 .isnot { padding: 30px 32px; } } .v3 .isnot h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .9rem; font-weight: 650; } .v3 .isnot ul { list-style: none; margin: 0 0 1.4rem; padding: 0; } .v3 .isnot ul:last-child { margin-bottom: 0; } .v3 .isnot li { display: flex; gap: 10px; align-items: flex-start; padding: .45rem 0; font-size: .9688rem; color: var(--ink); font-weight: 500; } .v3 .isnot li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; } .v3 .isnot .yes svg { color: var(--teal); } .v3 .isnot .no svg { color: #b4506a; } /* ---------------------------------------------------------------- FAQ */ .v3 .faq-wrap { display: grid; gap: 28px; } @media (min-width: 900px) { .v3 .faq-wrap { grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: 72px; } } .v3 .faq-wrap .sec-head { margin-bottom: 0; } .v3 .qa { border-top: 1px solid var(--line); } .v3 .qa details { border-bottom: 1px solid var(--line); } .v3 .qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 0; font-weight: 650; font-size: 1.0625rem; color: var(--ink); letter-spacing: -.01em; } .v3 .qa summary::-webkit-details-marker { display: none; } .v3 .qa summary::after { content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%231558c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .2s ease; } .v3 .qa details[open] summary::after { transform: rotate(180deg); } .v3 .qa summary:hover { color: var(--brand); } .v3 .qa details p { margin: -4px 0 22px; color: var(--ink-soft); max-width: 62ch; } /* ------------------------------------------------------ Closing panel */ .v3 .close-panel { position: relative; overflow: hidden; border-radius: 24px; padding: 32px 24px; background: radial-gradient(700px 320px at 100% 0%, rgba(84, 150, 240, .30) 0%, rgba(84, 150, 240, 0) 70%), linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 75%); color: #c3d3e5; display: grid; gap: 24px; } @media (min-width: 900px) { .v3 .close-panel { padding: 56px 60px; grid-template-columns: minmax(0, 1.4fr) auto; align-items: center; gap: 48px; } } .v3 .close-panel h2 { color: #fff; margin: 0 0 .4em; } .v3 .close-panel p { margin: 0; color: #b3c6da; font-size: 1.0625rem; max-width: 48ch; } .v3 .close-panel .close-cta .btn { width: 100%; text-align: center; } @media (min-width: 520px) { .v3 .close-panel .close-cta .btn { width: auto; } } .v3 .close-panel .v2-cta-note { color: #8fa9c4; } /* ------------------------------------------------------------ Footer */ .v3 .site-footer { background: #081b31; color: #9db1c7; padding: 40px 0 28px; } @media (min-width: 900px) { .v3 .site-footer { padding: 52px 0 36px; } } .v3 .f-top { display: grid; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .09); } @media (min-width: 900px) { .v3 .f-top { grid-template-columns: 1.7fr repeat(3, 1fr); gap: 40px; } } .v3 .f-brand p { font-size: .9375rem; color: #9db1c7; margin: .9rem 0 0; max-width: 34ch; line-height: 1.6; } .v3 .f-brand .footer-lockup { margin: 0; justify-content: flex-start; } .v3 .f-cols { display: contents; } .v3 .f-col h3 { font-family: 'Inter var', sans-serif; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: #fff; font-weight: 650; margin: 0 0 1rem; } .v3 .f-col ul { list-style: none; margin: 0; padding: 0; } .v3 .f-col li { margin: 0 0 .6rem; } .v3 .f-col a { color: #b6c8dc; text-decoration: none; font-size: .9375rem; } .v3 .f-col a:hover { color: #fff; text-decoration: underline; } @media (max-width: 899px) { .v3 .f-top { grid-template-columns: 1fr 1fr; } .v3 .f-brand { grid-column: 1 / -1; } } .v3 .footer-disclaimer { margin: 28px 0 0; color: #7f97b0; } .v3 .footer-legal { border-top: 0; padding-top: 0; margin-top: 1.2rem; } /* ========================================================== GUIDE HUB */ .v3 .hub-hero { background: radial-gradient(900px 420px at 90% -20%, #dde9fa 0%, rgba(221, 233, 250, 0) 70%), linear-gradient(180deg, #f3f7fc 0%, #fbfcfe 100%); border-bottom: 1px solid var(--line); padding: 20px 0 32px; } @media (min-width: 900px) { .v3 .hub-hero { padding: 28px 0 44px; } } .v3 .hub-hero-grid { display: grid; gap: 28px; align-items: end; } @media (min-width: 900px) { .v3 .hub-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; } } .v3 .hub-hero h1 { max-width: 16ch; } .v3 .hub-hero .hub-lede { font-size: 1.0625rem; max-width: 52ch; margin: 0 0 1.5rem; } @media (min-width: 900px) { .v3 .hub-hero .hub-lede { font-size: 1.1875rem; } } .v3 .hub-hero .crumbs { padding: 0 0 18px; } .v3 .hub-cta-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 24px; } .v3 .hub-cta-card b { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 650; color: var(--ink); line-height: 1.2; margin: 0 0 .4em; } .v3 .hub-cta-card p { font-size: .9375rem; color: var(--muted); margin: 0 0 1.1rem; } .v3 .hub-cta-card .btn { width: 100%; text-align: center; padding: 1rem 1rem; font-size: 1rem; } .v3 .hub-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .v3 .hub-jump a { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--line); background: #fff; border-radius: 999px; font-size: .9063rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; } .v3 .hub-jump a:hover { border-color: var(--brand); color: var(--brand); } .v3 .hub-start { display: grid; gap: 14px; } @media (min-width: 620px) { .v3 .hub-start { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .v3 .hub-start { grid-template-columns: repeat(4, 1fr); gap: 16px; } } .v3 .hub-start .g-card:first-child { background: var(--sky); border-color: #d3e1f3; } .v3 .links-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } @media (min-width: 620px) { .v3 .links-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .v3 .links-grid { grid-template-columns: repeat(3, 1fr); } } .v3 .links-grid a { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: .9375rem; font-weight: 550; text-decoration: none; line-height: 1.35; } .v3 .links-grid a::after { content: ''; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--brand); border-top: 2px solid var(--brand); transform: rotate(45deg); opacity: .55; } .v3 .links-grid a:hover { border-color: #b9cde8; color: var(--brand); } .v3 .links-grid.states { grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .v3 .links-grid.states { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .v3 .links-grid.states { grid-template-columns: repeat(4, 1fr); } } .v3 .trade-grid { column-gap: 16px; } @media (min-width: 720px) { .v3 .trade-grid { columns: 2; } } @media (min-width: 1080px) { .v3 .trade-grid { columns: 3; } } .v3 .trade-card { break-inside: avoid; margin: 0 0 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px 16px; } .v3 .trade-card h3 { font-size: 1.0625rem; margin: 0 0 .2em; } .v3 .trade-card h3 a { color: var(--ink); text-decoration: none; } .v3 .trade-card h3 a:hover { color: var(--brand); text-decoration: underline; } .v3 .trade-card .trade-note { font-size: .8125rem; color: var(--muted); margin: 0 0 10px; } .v3 .trade-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .v3 .trade-card li a { display: inline-block; font-size: .8438rem; font-weight: 550; padding: .3rem .65rem; border-radius: 999px; background: var(--sky); color: var(--navy-2); text-decoration: none; } .v3 .trade-card li a:hover { background: var(--brand); color: #fff; } .v3 .hub-group { scroll-margin-top: 90px; } /* ======================================================= ARTICLE pages */ .v3 .art-hero { background: radial-gradient(900px 400px at 95% -20%, #dde9fa 0%, rgba(221, 233, 250, 0) 70%), linear-gradient(180deg, #f3f7fc 0%, #fbfcfe 100%); border-bottom: 1px solid var(--line); padding: 16px 0 28px; } @media (min-width: 900px) { .v3 .art-hero { padding: 24px 0 40px; } } .v3 .art-hero .crumbs { padding: 0 0 18px; } .v3 .art-hero-grid { display: grid; gap: 28px; align-items: center; } .v3 .art-hero-grid > * { min-width: 0; } @media (min-width: 900px) { .v3 .art-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 64px; } } .v3 .art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 1rem; font-size: .8438rem; color: var(--muted); } .v3 .art-meta .cat { font-weight: 650; color: var(--teal); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; } .v3 .art-hero h1 { max-width: 24ch; font-size: clamp(1.9rem, 4.6vw, 2.75rem); margin-bottom: .4em; } .v3 .art-hero .post-hero-answer { font-size: 1.0625rem; max-width: 56ch; margin: 0; color: var(--ink-soft); } @media (min-width: 900px) { .v3 .art-hero .post-hero-answer { font-size: 1.1875rem; } } .v3 .art-hero .cta-row { margin: 1.6rem 0 0; } .v3 .art-hero .disclosure-inline { margin: 1.4rem 0 0; } /* Quick figures card beside the headline */ .v3 .figs { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 8px 22px; } .v3 .figs-head { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 16px 0 6px; margin: 0; } .v3 .figs dl { margin: 0; } .v3 .figs .fig { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-soft); } .v3 .figs dt { font-weight: 600; color: var(--ink); font-size: .9688rem; } .v3 .figs dt small { display: block; font-weight: 500; color: var(--muted); font-size: .8125rem; } .v3 .figs dd { margin: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 650; color: var(--ink); white-space: nowrap; letter-spacing: -.01em; } .v3 .figs dd small { font-family: 'Inter var', sans-serif; font-size: .8125rem; color: var(--muted); font-weight: 500; letter-spacing: 0; } .v3 .figs-list { list-style: none; margin: 0; padding: 0; } .v3 .figs-list li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: .9688rem; color: var(--ink); font-weight: 500; } .v3 .figs-list svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--teal); } .v3 .figs-foot a { font-weight: 650; text-decoration: none; } .v3 .figs-foot { font-size: .8125rem; color: var(--muted); border-top: 1px solid var(--line-soft); padding: 12px 0 16px; margin: 0; } /* Two-column body: sticky contents rail + reading column */ .v3 .art-layout { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1080px) { .v3 .art-layout { grid-template-columns: 240px minmax(0, 760px); gap: 72px; justify-content: start; align-items: start; } } .v3 .art-layout .reading { max-width: 740px; margin: 0; padding: 0; width: 100%; } @media (max-width: 1079px) { .v3 .art-layout .reading { margin: 0 auto; } } .v3 .art-rail { position: relative; } @media (min-width: 1080px) { .v3 .art-rail { position: sticky; top: 100px; padding-top: 24px; } } .v3 .art-rail details { border: 1px solid var(--line); border-radius: 14px; background: #fff; margin: 24px 0 0; } @media (min-width: 1080px) { .v3 .art-rail details { border: 0; background: transparent; margin: 0; } } .v3 .art-rail summary { list-style: none; cursor: pointer; padding: 14px 18px; font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; justify-content: space-between; align-items: center; } .v3 .art-rail summary::-webkit-details-marker { display: none; } .v3 .art-rail summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; } .v3 .art-rail details[open] summary::after { transform: rotate(-135deg); } @media (min-width: 1080px) { .v3 .art-rail summary { padding: 0 0 12px; pointer-events: none; } .v3 .art-rail summary::after { display: none; } } .v3 .art-rail ul { list-style: none; margin: 0; padding: 0 18px 14px; } @media (min-width: 1080px) { .v3 .art-rail ul { padding: 0; border-left: 2px solid var(--line); } } .v3 .art-rail li { margin: 0; } .v3 .art-rail li a { display: block; padding: .38rem 0; font-size: .875rem; line-height: 1.4; color: var(--ink-soft); text-decoration: none; } @media (min-width: 1080px) { .v3 .art-rail li a { padding: .38rem 0 .38rem 16px; margin-left: -2px; border-left: 2px solid transparent; } } .v3 .art-rail li a:hover { color: var(--brand); } .v3 .art-rail li a.is-active { color: var(--brand); font-weight: 600; border-left-color: var(--brand); } .v3 .article-body { padding: 8px 0 0; } @media (min-width: 900px) { .v3 .article-body { padding-top: 12px; } } .v3 .article-body .reading > h2 { font-size: clamp(1.5rem, 3.2vw, 1.95rem); margin: 2.2rem 0 .7rem; padding-top: 1.8rem; border-top: 1px solid var(--line); scroll-margin-top: 96px; } .v3 .article-body .reading > .why-box:first-child { margin-top: 2rem; } .v3 .article-body .why-box { background: var(--sky); border: 0; border-radius: var(--radius); padding: 22px 24px; } .v3 .article-body .why-box h2 { font-family: 'Inter var', sans-serif; color: var(--brand); font-size: .78rem; letter-spacing: .09em; } .v3 .article-body .guide-jump { background: var(--cream); border: 1px solid var(--cream-line); border-left: 0; border-radius: 14px; padding: 16px 18px; line-height: 1.8; } .v3 .article-body .calc { margin: 2rem 0; border-radius: 20px; box-shadow: var(--shadow-lg); } .v3 .table-scroll { border-radius: 14px; border-color: var(--line); box-shadow: 0 1px 2px rgba(12, 31, 53, .04); } .v3 .data-table tbody tr:nth-child(even) td { background: #fbfcfe; } .v3 .data-table tbody td:first-child { color: var(--ink); font-weight: 550; } .v3 .article-body section { padding: 0; } .v3 .article-body section.faq { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--line); } .v3 .article-body .faq > h2 { margin-top: 0; padding-top: 0; border-top: 0; } .v3 .faq-item { padding: 1.3rem 0; } .v3 .next-step { background: radial-gradient(520px 240px at 100% 0%, rgba(84, 150, 240, .3) 0%, rgba(84, 150, 240, 0) 70%), linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 75%); border: 0; border-radius: 20px; color: #b3c6da; padding: 28px 24px; margin-top: 2.2rem; } @media (min-width: 900px) { .v3 .next-step { padding: 40px 44px; } } .v3 .next-step h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.8rem); } .v3 .next-step p { color: #b3c6da; font-size: 1rem; } .v3 .next-step a:not(.btn) { color: #9cc8ff; } .v3 .next-step .btn { background: #fff; color: var(--navy); } .v3 .next-step .btn:hover { background: #e6eef8; color: var(--navy); } .v3 .next-step .v2-cta-note { color: #8fa9c4; } .v3 .related { margin-top: 2.2rem; } .v3 .related ul { display: grid; gap: 0 28px; } @media (min-width: 720px) { .v3 .related ul { grid-template-columns: 1fr 1fr; } } .v3 .article-body > .container { padding-bottom: 48px; } /* Calculator tool page: calculator beside its explainer */ .v3 .tool-grid { display: grid; gap: 28px; align-items: start; } .v3 .tool-grid > * { min-width: 0; } @media (min-width: 1000px) { .v3 .tool-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } } .v3 .tool-grid .calc { margin: 0; border-radius: 20px; box-shadow: var(--shadow-lg); } .v3 .tool-aside { display: grid; gap: 16px; } @media (min-width: 1000px) { .v3 .tool-aside { position: sticky; top: 104px; } } .v3 .tool-aside .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; } .v3 .tool-aside .panel h2 { font-family: 'Inter var', sans-serif; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .8rem; font-weight: 650; } .v3 .tool-aside .panel p { font-size: .9375rem; margin: 0 0 .7rem; } .v3 .tool-aside .panel p:last-child { margin-bottom: 0; } .v3 .tool-aside .panel ul { list-style: none; margin: 0; padding: 0; } .v3 .tool-aside .panel li { display: flex; gap: 10px; padding: .4rem 0; font-size: .9375rem; color: var(--ink-soft); } .v3 .tool-aside .panel li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--teal); } .v3 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .v3 .next-step .btn { font-weight: 650; } .v3 .calc-out .btn { font-weight: 650; } .v3 .article-body .calc-breakdown { padding-left: 0; } @media (max-width: 899px) { .v3 .figs-tool { display: none; } } .v3 .article-body .faq-item h3 { margin-top: 0; } /* Article template, site-wide: the side card is a desktop extra, a page too short for a contents rail gets a single column, and a crossed-out item in the "How we work" card reads as a "not". */ @media (max-width: 899px) { .v3 .figs-desk { display: none; } } .v3 .figs-list li.no svg { color: #b4506a; } @media (min-width: 1080px) { .v3 .art-layout.no-rail { grid-template-columns: minmax(0, 760px); } }