/* site-v4-content.css — family layer of the D-034 site-wide uplevel; see site-v4.css. Content and listing templates: blog / blog-category / authors / guides / customers / press / events / careers listings and their cards; blog, guide, customer-story, press, event, careers and legal bodies; state and city sales tax calculators. Hero/title blocks belong to site-v4-heroes.css; FAQ, small CTA, nav, footer and the footer's popular-content list belong to site-v4-chrome.css. CSS only; no copy, links, images or artwork change. Owner: claude-content-2026-10-13 (task site-v4-content). Homepage `/` is excluded where a selector could reach it. */ :root { /* Reading measure for long-form body text: ~70 characters per line at 18px Season Sans. (Season Sans has a wide zero, so CSS `ch` overstates it: 68ch measured 90+ characters a line; 36rem gives ~72–78.) */ --z4c-measure: 100%; /* review fix: one column edge; the column itself is capped below */ --z4c-measure-head: 100%; /* headings may run wider than the text so they wrap less */ --z4c-card-pad: 32px; /* listing card padding: 32 / 24 */ --z4c-frame: #e6e1da; } @media (max-width: 767px) { :root { --z4c-card-pad: 24px; } } /* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ 1 · LISTING CARDS — the homepage card standard: sharp, 1px #E6E1DA frame that turns black on hover, white card on the warm field and warm card on white, image flush to the frame, 24px title, 14px meta, plain square tag. Applies to blog / category / author / guide / state cards, customer-story grid cards and related posts. The customer-story feature collage (.customers-grid) keeps its photo-led, frameless presentation. ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ body:not(:has(.z3-hero)) .cards-component :is(._3col-grid, ._2col-grid, ._4col-grid) { column-gap: var(--z4-gap); row-gap: var(--z4-gap); } body:not(:has(.z3-hero)) .cards-component:not(.customers-grid .cards-component) .blog_item-link { position: relative; isolation: isolate; height: 100%; padding: 0 0 var(--z4c-card-pad); background: var(--z4-warm); color: var(--z4-ink); text-decoration: none; border-radius: 0; } body:not(:has(.z3-hero)) :is(.background-color-beige, .background-color-light-beige) .cards-component:not(.customers-grid .cards-component) .blog_item-link { background: #fff; } body:not(:has(.z3-hero)) .cards-component:not(.customers-grid .cards-component) .blog_item-link::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 1px solid var(--z4c-frame); transition: border-color .15s; } body:not(:has(.z3-hero)) .cards-component:not(.customers-grid .cards-component) .blog_item-link:hover::after { border-color: var(--z4-act); } /* Media sits flush to the frame; everything after it is inset by the card padding. */ .cards-component:not(.customers-grid .cards-component) .blog_item-link > * { margin-left: 0; margin-right: 0; } .cards-component:not(.customers-grid .cards-component) .blog_item-link > :not(:first-child) { padding-left: var(--z4c-card-pad); padding-right: var(--z4c-card-pad); } .cards-component:not(.customers-grid .cards-component) .blog_item-link > :first-child:has(:is(.blog_image-wrapper, .customer_image-wrapper)) { margin-bottom: 24px; } .cards-component:not(.customers-grid .cards-component) .blog_item-link > :first-child:not(:has(:is(.blog_image-wrapper, .customer_image-wrapper))) { padding: var(--z4c-card-pad) var(--z4c-card-pad) 0; } .cards-component .blog_item-link :is(.blog_image-wrapper, .customer_image-wrapper) { border-radius: 0; overflow: hidden; } .cards-component .blog_item-link :is(.blog_image, .guide_image, .customers_image) { border-radius: 0; } /* Customer logo tiles read as a framed media area inside the card. */ .cards-component:not(.customers-grid .cards-component) .blog_item-link .customer_image-wrapper:not(.is-square) { background-color: #fff; border-bottom: 1px solid var(--z4c-frame); } .background-color-beige .cards-component:not(.customers-grid .cards-component) .blog_item-link .customer_image-wrapper:not(.is-square) { background-color: var(--z4-warm); } /* Rhythm: tag → 16 → title → 8 → copy; the date row sits on the bottom edge, at least 24px below the copy. */ .cards-component .blog_item-link > .margin-bottom.margin-xsmall:has(.blog_meta-wrapper .tag) { margin-bottom: 16px; } .cards-component .blog_item-link .blog_item_btm > .margin-bottom { margin-bottom: 8px; } .cards-component .blog_item-link :is(h2, h3)[data-zamp-type="card"] { margin: 0; color: var(--z4-ink); text-wrap: balance; } .cards-component .blog_item-link > :is(h2, h3)[data-zamp-type="card"] + .margin-top { margin-top: 8px; } .cards-component .blog_item-link :is([fs-list-field="description"], .blog_item_btm .text-size-regular) { color: var(--z4-body); } .cards-component .blog_item-link > .margin-top:last-child:has(.blog_meta-wrapper) { margin-top: auto; padding-top: 24px; } /* Guide cards end on the description: keep it under the title instead of pushing it to the bottom edge. */ .cards-component .blog_item-link > .margin-top:last-child:has([fs-list-field="description"]) { margin-top: 8px; } .cards-component .blog_item-link .blog_meta-wrapper { gap: 8px; align-items: center; } .cards-component .blog_item-link .blog_meta-wrapper .text-size-small { font-size: 14px !important; line-height: 1.5 !important; color: var(--z4-body); } /* Category tag inside a card: a plain square tag (no eyebrow dot), 12px/500. */ :is(.cards-component .blog_item-link, .event_item, .event_item_h, .media-card, .press_card) .tag:not(.is-text):not(.blank) { display: inline-flex; align-items: center; gap: 0; padding: 4px 8px; border: 1px solid var(--z4-rule-2); border-radius: 0; background: transparent; color: var(--z4-ink); font: 500 12px/1.3 var(--z-font-body) !important; letter-spacing: 0; text-transform: none; } :is(.cards-component .blog_item-link, .event_item, .event_item_h, .media-card, .press_card) .tag:not(.is-text):not(.blank)::before { content: none; display: none; } :is(.cards-component .blog_item-link, .event_item, .event_item_h, .media-card, .press_card) .tag > div { font: inherit !important; } /* Customer-story feature collage: frameless photo cards, but square frames, 24px titles and the 52px button. */ .customers-grid .customer_image-wrapper, .customers-grid .customers-featured-image, .customers-grid .customers_image { border-radius: 0; } .customers-grid .customers_all_card_title { color: var(--z4-ink); text-wrap: balance; } .customers-grid .blog_item-link > .margin-bottom.margin-xxsmall { margin-bottom: 16px; } /* ── Press: release cards and media appearances ── */ .press_card { position: relative; padding: var(--z4c-card-pad); background-color: var(--z4-warm); border-radius: 0; background-size: 96px 96px; background-position: 100% 100%; transition: none; } .background-color-light-beige .press_card, .background-color-beige .press_card { background-color: #fff; } .press_card::after, .media-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--z4c-frame); transition: border-color .15s; } .press_card:hover::after, .media-card:hover::after { border-color: var(--z4-act); } .press_card .text-size-tiny, .media-card .text-size-tiny { font-size: 14px !important; line-height: 1.5 !important; color: var(--z4-body); } .press_card .text-weight-medium, .media-card-bottom .text-weight-medium { font: 500 12px/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--z4-ink); } .press_card > div > .margin-bottom.margin-large { margin-bottom: 24px; } .press_card .news_card_title { color: var(--z4-ink); text-wrap: balance; } .press_card .news_card_title + .margin-top { margin-top: 8px; } .press_card p { color: var(--z4-body); } /* The warm corner mark (96px) never sits behind copy: the action row reserves its height. */ .press_card > .margin-top { margin-top: auto; padding-top: 32px; min-height: 96px; display: flex; align-items: flex-end; } .press_card .button.is-link { justify-content: flex-start; } .media-card { position: relative; background: #fff; border-radius: 0; } .media-card .media-image-wrapper, .media-card .media-image { border-radius: 0; } .media-card .media-card-bottom { padding: var(--z4c-card-pad); background: transparent; flex: 1; } .media-card h6[data-zamp-type] { font-family: var(--z-font-heading) !important; font-size: var(--z-type-card-size) !important; line-height: 1.3 !important; font-weight: 400; letter-spacing: -.005em; color: var(--z4-ink); text-wrap: balance; margin-top: 8px; } .media-card-bottom > .margin-top.margin-large { margin-top: auto; padding-top: 32px; } /* ── Events: on-demand cards and the upcoming-event row ── */ .event_item { position: relative; padding: 0 0 var(--z4c-card-pad); background: #fff; border-radius: 0; } .event_item::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--z4c-frame); transition: border-color .15s; } .event_item:hover::after { border-color: var(--z4-act); } .event_item .event_image-wrapper { display: block; margin: 0 0 24px; border-radius: 0; overflow: hidden; } .event_item .event_image { border-radius: 0; display: block; width: 100%; } .event_item .event_item-content { padding: 0 var(--z4c-card-pad); } .event_item .event_meta-wrapper .w-embed { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--z4-body); } .event_item .event_meta-wrapper .w-embed::before, .event_item .event_meta-wrapper .w-embed::after { content: none; display: none; } .event_item .event_item-content-top > .margin-bottom.margin-xsmall { margin-bottom: 16px; } .event_item .event_item_title { color: var(--z4-ink); text-wrap: balance; } .event_item .event_item-content-top > .margin-bottom.margin-xxsmall { margin-bottom: 8px; } .event_item .event-description { font-size: 16px; line-height: 1.6; color: var(--z4-body); } .events_list { column-gap: var(--z4-gap); row-gap: var(--z4-gap); } .event_item_h { padding: 0; background: transparent; } .event_item_h + .event_item_h { margin-top: 8px; } .event_item_h .event_h_card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 32px; row-gap: 16px; padding: var(--z4c-card-pad); background: var(--z4-warm); border: 1px solid var(--z4c-frame); border-radius: 0; } .background-color-beige .event_item_h .event_h_card { background: #fff; } .event_item_h .event_card_h_label { font: 500 12px/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--z4-body); margin-bottom: 8px; } .event_item_h .event_item_h_title { color: var(--z4-ink); text-wrap: balance; margin: 0; } .event_item_h .event_card_h_center { display: flex; align-items: center; gap: 16px; } .event_item_h .event_card_h_date { font-size: 14px; line-height: 1.5; color: var(--z4-body); white-space: nowrap; } .event_item_h .event_item-content-top { display: flex; justify-content: flex-end; } @media (max-width: 767px) { .event_item_h .event_h_card { grid-template-columns: minmax(0, 1fr); } .event_item_h .event_item-content-top { justify-content: flex-start; } .event_item_h .event_card_h_center { justify-content: flex-start; } } /* ── Careers: department panels with role rows ── */ .careers-item { padding: var(--z4c-card-pad); background: #fff; border: 1px solid var(--z4c-frame); border-radius: 0; } .careers-item > .margin-bottom.margin-small { margin-bottom: 8px; } .careers-item h3[data-zamp-type="card"] { color: var(--z4-ink); } .careers-item .roles-item { gap: 24px; padding: 20px 0; border-top: 1px solid var(--z4c-frame); border-bottom: 0; } .careers-item .roles-item:last-child { padding-bottom: 0; } .careers-item .roles-item [fs-list-field="name"] { color: var(--z4-ink); font-weight: 500; } .careers-item .roles-item .display-inlineflex { gap: 8px; margin-top: 8px; } .careers-item .roles-item :is([fs-list-field="location"], [fs-list-field="type"]) { padding: 4px 8px; background: var(--z4-warm); color: var(--z4-ink); font: 500 12px/1.3 var(--z-font-body); } .careers-item .roles-item .button { flex: none; } .careers-list { gap: var(--z4-gap); } /* ── Calculator directories: state cards use the listing card above; city rows are framed rows ── */ .city-component .city-letter-section { margin: 0; padding-top: 40px; } .city-component .city-letter-section:first-child { padding-top: 0; } .city-component .city-letter-heading { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--z4c-frame); color: var(--z4-ink); } .city-component .city-letter-list, .city-component .city-list:not(:has(.city-letter-section)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px var(--z4-gap); } @media (max-width: 991px) { .city-component .city-letter-list, .city-component .city-list:not(:has(.city-letter-section)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .city-component .city-letter-list, .city-component .city-list:not(:has(.city-letter-section)) { grid-template-columns: minmax(0, 1fr); } } .city-component .city-item { margin: 0; } .city-component .city-container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; min-height: 64px; padding: 12px 16px 12px 20px; background: #fff; border: 0; border-radius: 0; color: var(--z4-ink); text-decoration: none; } .background-color-beige .city-component .city-container, .section_custom.background-color-light-beige .city-container { background: #fff; } .city-component .city-container::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--z4c-frame); transition: border-color .15s; } .city-component .city-container:hover::after { border-color: var(--z4-act); } .city-component .city-container h3 { margin: 0; font-family: var(--z-font-body) !important; font-size: 16px !important; line-height: 1.4 !important; font-weight: 500; color: var(--z4-ink); letter-spacing: 0; } .city-component .city-container .button.is-square { display: inline-flex !important; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0; background: transparent !important; border: 0; color: var(--z4-ink); transition: transform .15s; } .city-component .city-container .button.is-square .arrow-icon { display: flex; align-items: center; justify-content: center; } .city-component .city-container:hover .button.is-square { transform: translateX(3px); background: transparent; color: var(--z4-ink); } /* ── Filters, pagination, empty states ── */ :is(.blog-component, .section_roles) .integrations-filters { gap: 8px; align-items: stretch; } :is(.blog-component, .section_roles) .integrations-filters .form_input.is-search { height: 56px; min-height: 56px; border: 1px solid var(--z4-rule-2); border-radius: 0; background-color: #fff; font-size: 16px; color: var(--z4-ink); } :is(.blog-component, .section_roles) .integrations-filters .form_input.is-search:focus { border-color: var(--z4-green); outline: 2px solid var(--z4-green); outline-offset: -1px; } :is(.blog-component, .section_roles) .integrations-category-dropdown { background: transparent; border-radius: 0; } @media (max-width: 767px) { main .integrations-category-toggle { width: 100%; justify-content: space-between; } } main .integrations-category-toggle { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-radius: 0; background: #fff; color: var(--z4-act); box-shadow: inset 0 0 0 1px var(--z4-act); font-weight: 500; transition: background-color .15s, color .15s; } main .integrations-category-toggle:hover, main .integrations-category-dropdown.w--open .integrations-category-toggle { background: var(--z4-act); color: #fff; } main .integrations-category-toggle:focus-visible { outline: 2px solid var(--z4-green); outline-offset: 2px; } :is(.blog-component, .section_roles) .integrations-category-nav.w--open { border: 1px solid var(--z4c-frame); border-radius: 0; background: #fff; box-shadow: var(--z4-shadow); padding: 8px; } :is(.blog-component, .section_roles) .integrations-category-checkbox { padding: 8px; border-radius: 0; } :is(.blog-component, .section_roles) .integrations-category-checkbox:hover { background: var(--z4-warm); } :is(.blog-component, .section_roles) .integrations-category-box { border-radius: 0; border-color: var(--z4-rule-2); } :is(.blog-component, .section_roles) .integrations-category-box.w--redirected-checked { background-color: var(--z4-green); border-color: var(--z4-green); } .list-pagination.w-pagination-wrapper { margin-top: var(--z4-head-gap); gap: 8px; } .list-pagination .button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 0; font-weight: 500; } .list-pagination .button > div { display: inline-flex; align-items: center; } .main-wrapper .w-dyn-empty { padding: 20px 24px; background: var(--z4-warm); border: 1px solid var(--z4c-frame); border-radius: 0; color: var(--z4-body); font-size: 14px; line-height: 1.5; } /* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ 2 · LONG-FORM BODY — blog posts, articles, guides, customer stories, press, events, careers and legal. 18px reading text at a 65–72ch measure, heading rhythm (H2 with 48px above, H3 24px), warm-header tables with #E6E1DA rules, Season Mix blockquotes. Tables, figures and embeds keep the full column width. ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* Review fix (D-034): one reading column. Text, callouts, tables and inline CTAs share one right edge at 40rem (~78 characters of 18px Season Sans) instead of text at 36rem beside full-width blocks. */ .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *):not(.legal-component *) { max-width: 40rem; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(p, ul, ol, blockquote):not(:is(td, th, li, blockquote, figure) *) { max-width: var(--z4c-measure); } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(h2, h3, h4, h5, h6) { max-width: var(--z4c-measure-head); } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(p, ul, ol):not(:is(td, th, li, blockquote, figure) *) { font-size: 18px; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) p:not(:is(td, th, li, blockquote, figure) *) { margin-top: 0; margin-bottom: 20px; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) li { margin-bottom: 8px; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(ul, ol) { margin-top: 0; margin-bottom: 24px; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) strong { color: var(--z4-ink); font-weight: 500; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) h2 { margin-top: 48px; margin-bottom: 16px; color: var(--z4-ink); letter-spacing: -.01em; text-wrap: balance; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) h3:not(.zsc *) { margin-top: 40px; margin-bottom: 12px; color: var(--z4-ink); font-size: var(--z-type-card-size) !important; line-height: 1.3 !important; letter-spacing: -.005em; text-wrap: balance; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(h4, h5, h6) { margin-top: 32px; margin-bottom: 8px; color: var(--z4-ink); text-wrap: balance; } /* Only the body's very first heading drops its top margin; later rich-text blocks (articles split around comparison modules) keep the 48px rhythm. */ .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *):first-child > :is(h2, h3, h4, h5, h6):first-child, .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *):first-child > div:first-child > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(h2, h3, h4, h5, h6) + :is(h3, h4, h5, h6) { margin-top: 16px; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) > :last-child, .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) > div > :last-child { margin-bottom: 0; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *):not(:first-child) > h2:first-child { margin-top: 48px !important; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *):not(:first-child) > h3:first-child { margin-top: 40px !important; } /* Inline links: deep green, 1px underline at 3px; 2px on hover. */ .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(p, li, td) a:not(.button) { color: var(--z4-green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness .15s; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(p, li, td) a:not(.button):hover { text-decoration-thickness: 2px; } /* Blockquotes: Season Mix pull quotes, black, with a deep-green rule. */ .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) blockquote { max-width: var(--z4c-measure); margin: 40px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--z4-green); font-family: var(--z-font-heading) !important; font-style: normal; font-weight: 400; color: var(--z4-ink) !important; font-size: clamp(1.375rem, 1.25rem + .5vw, 1.75rem) !important; line-height: 1.35 !important; letter-spacing: -.01em; text-wrap: pretty; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) blockquote * { font: inherit; color: inherit; } /* Images and figures inside the body: sharp, captioned in 14px. */ .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(figure, img) { border-radius: 0; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--z4-body); text-align: left; } /* Tables: full column width, horizontal scroll on phones, warm header row, #E6E1DA rules. */ .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(figure.wp-block-table, .blog-table-wrapper) { max-width: none; margin: 32px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) .blog-table-wrapper > figure.wp-block-table { margin: 0; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) table { width: 100%; border-collapse: collapse; border: 1px solid var(--z4c-frame); background: #fff; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(td, th) { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--z4c-frame); vertical-align: top; text-align: left; font-size: 16px !important; line-height: 1.55 !important; color: var(--z4-body); } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) :is(td, th) + :is(td, th) { border-left: 1px solid var(--z4c-frame); } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) thead :is(th, td), .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) tbody > tr:first-child:not(:has(> td:not(:has(> strong:only-child)))) > td, .main-wrapper .section_guides :is(.text-rich-blog, .text-rich-text):not(.header_component *) tbody > tr:first-child > td { background: var(--z4-warm); color: var(--z4-ink); font-weight: 500; font-size: 14px !important; line-height: 1.4 !important; } /* Row-label tables (bold first column): the label column reads as the header. */ .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) tbody > tr > td:first-child:has(> strong:only-child) { background: var(--z4-warm); color: var(--z4-ink); width: 30%; } @media (max-width: 767px) { .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) table { min-width: 34rem; } .main-wrapper :is(.text-rich-blog, .text-rich-text):not(.header_component *) table.has-fixed-layout:not(:has(td:nth-child(3))) { min-width: 0; } } /* Section bodies with no editorial copy (e.g. press releases that link out) collapse instead of leaving an empty band. */ .section_component:has(> .padding-global .legal-component .w-richtext:empty):not(:has(.legal-component .w-richtext:not(:empty))) .section-padding { padding-top: 0; padding-bottom: 0; } /* ── Article layout (blog, article, guide, customer story): sidebar + body ── */ .blog-content { column-gap: 80px; } .blog-content-wrapper { min-width: 0; } .blog-content-menu .social-icons_list { gap: 8px; } .blog-content-menu .social-icons_link, .b_post_content_footer .social-icons_link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; position: relative; color: var(--z4-ink); border-radius: 0; transition: background-color .15s, color .15s; } .blog-content-menu .social-icons_link::after, .b_post_content_footer .social-icons_link::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--z4c-frame); pointer-events: none; transition: border-color .15s; } .blog-content-menu .social-icons_link:hover, .b_post_content_footer .social-icons_link:hover { background: var(--z4-act); color: #fff; } .blog-content-menu .social-icons_link:hover::after, .b_post_content_footer .social-icons_link:hover::after { border-color: var(--z4-act); } .blog-content-menu .social-icons_component { padding-bottom: 24px; border-bottom: 1px solid var(--z4c-frame); } /* Table of contents: 12px label, 14px links on a 1px rule; the active entry is black with a 2px deep-green bar. */ .b_post_toc_wrapper, .blog-toc-menu { padding-top: 24px; border-radius: 0; } :is(.b_post_toc_wrapper, .blog-toc-menu) > .margin-bottom > [data-zamp-type="small"] { font: 500 12px/1.3 var(--z-font-body) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--z4-ink); } :is(.b_post_toc_wrapper, .blog-toc-menu) > .margin-bottom { margin-bottom: 12px; } /* Guide TOC: the links sit directly in the menu. */ .blog-toc-menu .blog-toc-header { display: block; margin: 0; padding: 6px 0 6px 16px; border-left: 1px solid var(--z4c-frame); border-radius: 0; font: 400 14px/1.45 var(--z-font-body); letter-spacing: 0; text-transform: none; color: var(--z4-body); text-decoration: none; } .blog-toc-menu .blog-toc-header:hover { color: var(--z4-ink); border-left: 2px solid var(--z4-green); padding-left: 15px; } .b_post_toc_list { border-left: 1px solid var(--z4c-frame); } .b_post_toc_link_item { margin: 0; } .b_post_toc_link { position: relative; display: block; padding: 6px 0 6px 16px; color: var(--z4-body); text-decoration: none; font-size: 14px !important; line-height: 1.45 !important; } .b_post_toc_link:hover { color: var(--z4-ink); } .b_post_toc_link .b_post_toc_link_border { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; height: auto; background: var(--z4-green); } .b_post_toc_link_text { font: inherit; color: inherit; } /* Sidebar CTA panel: sharp, framed, white on the white page. */ .blog-subscribe, .cmp-sidebar-cta { border-radius: 0; } .blog-subscribe { border: 1px solid var(--z4c-frame); } .blog-subscribe .b_post_sidebar_form_title { color: var(--z4-ink); font-weight: 500; } .blog-subscribe .cta_form .button { min-height: 52px; } /* Author strip and author bio under the post. */ .b_post_content_footer { border-color: var(--z4c-frame) !important; } .b_post_content_footer .blog_post_hero_author_name, .b_post_content_footer [class*="author_name"] { color: var(--z4-ink); font-weight: 500; } .b_post_content_footer_bottom { border-color: var(--z4c-frame) !important; } .b_post_content_footer_bottom_title { font: 500 12px/1.3 var(--z-font-body) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--z4-ink); } /* ── Customer story: the proof block and the facts sidebar ── */ .c_post_tes_left .c_post_tes_stats_wrap { border-radius: 0; } .c_post_stat_title { color: var(--z4-ink); letter-spacing: -.02em; } .c_post_stat_desc { font-size: 14px !important; line-height: 1.5 !important; color: var(--z4-body); } .c_post_stat_divider { background-color: var(--z4c-frame); } .c_post_tes_quote { color: var(--z4-ink) !important; text-wrap: pretty; } .c_post_tes_name { color: var(--z4-ink); font-weight: 500; } .customers-list-item { padding: 0 0 16px; } .customers-list-item > .text-weight-medium { font: 500 12px/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--z4-ink); margin-bottom: 4px; } .customers-list-item > div:not(.text-weight-medium) { font-size: 16px; line-height: 1.5; color: var(--z4-body); } .c_post_web_cta { border-color: var(--z4c-frame) !important; } .c_post_web_link { font-weight: 500; color: var(--z4-act); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* Newsletter card (black field stays black): 24px title, 56px field and button. */ .newsletter_card { border-radius: 0; padding: 40px; } @media (max-width: 767px) { .newsletter_card { padding: 24px; } } .newsletter_card .newsletter_card_title { margin-top: 0; } .newsletter_card .cta_form { gap: 8px; } .newsletter_card .form_input { height: 56px; min-height: 56px; border-radius: 0; } .newsletter_card .button { height: 56px; min-height: 56px; border-radius: 0; font-weight: 500; } /* ── Event detail: hosts label and registration column ── */ .events-registration-component h5[data-zamp-type="compact"] { font: 500 12px/1.3 var(--z-font-body) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--z4-ink); } .events-registration-component .margin-bottom.margin-medium:has(> h5) { margin-bottom: 16px; } .events-registration-component .video-container, .events-registration-component .video-player { border-radius: 0; overflow: hidden; } /* ── Careers detail: application form upload frame ── */ .zamp-form-block .file-upload-container, .zamp-form-block .file-upload { border-radius: 0; } /* ── Legal, press, careers and event bodies: a centred reading column at the measure ── */ .legal-component .max-width-xlarge { max-width: 40rem; } /* City calculator pages: the explainer aligns to the calculator's 64rem column instead of centring on its own. */ body:has(.zsc) .legal-component .max-width-xlarge { max-width: 64rem; } /* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ 3 · SALES TAX CALCULATOR (city pages) — the embedded .zsc widget on the homepage form spec: 56px sharp fields, 2px deep-green focus ring, 12px uppercase labels, square mint chip, deep-green result panel with .78 text and .18 rules. The widget injects its own