/* 2026 redesign page sections (components/sections.mjs). Figma: Treasury4-Website.
   Type: Playfair Display SemiBold headings with SemiBold Italic green highlights; Work Sans body. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,600&family=Work+Sans:wght@400;500;600&display=swap');

.t4s {
  --ink: #242c33; --ink-2: #4a5360; --green: #318734; --bright: #43ba47; --mint: #ecf4f0;
  --dark: #242c33; --card-dark: #28343e; --line: #dfe5e2; --muted: #e8ecee;
  --serif: 'Playfair Display', Georgia, serif; --sans: 'Work Sans', system-ui, sans-serif;
  font-family: var(--sans); color: var(--ink); font-size: 16px; line-height: 1.55;
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 56px);
}
.t4s *, .t4s *::before, .t4s *::after { box-sizing: border-box; }
.t4s-inner { max-width: 1220px; margin: 0 auto; display: flow-root; }
.t4s-bg-white { background: #fff; }
.t4s-bg-mint { background: var(--mint); }
.t4s-bg-grey { background: #e4ebee; }
.t4s-bg-dark { background: var(--dark); color: #fff; }
.t4s p { margin: 0; }
/* The site theme capitalises and letter-spaces headings; these sections don't. */
.t4s :is(h1, h2, h3, h4) { text-transform: none; letter-spacing: normal; }
/* Two bands with the same background in a row read as one section. */
.t4-block:has(> .t4s-bg-dark) + .t4-block > .t4s-bg-dark,
.t4-block:has(> .t4s-bg-mint) + .t4-block > .t4s-bg-mint { padding-top: 0; }
.t4s img { max-width: 100%; display: block; }

/* Headings */
.t4s .t4s-title { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.t4s-bg-dark .t4s-title { color: #fff; }
.t4s .t4s-title em { font-style: italic; color: var(--bright); }
.t4s .t4s-title-hero { font-size: clamp(34px, 4vw, 50px); }
.t4s-center-head > .t4s-inner > .t4s-title, .t4s-center-head > .t4s-inner > .t4s-lede { text-align: center; }
.t4s-lede { font-size: 16px; max-width: 760px; margin: 14px auto 0 !important; color: var(--ink); }
.t4s-bg-dark .t4s-lede { color: rgba(255, 255, 255, .85); }

/* Buttons and links */
.t4s-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }
.t4s-actions-center { justify-content: center; }
.t4s .t4s-btn { display: inline-block; background: var(--bright); color: #fff; font: 500 15px/1 var(--sans); padding: 13px 26px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; }
.t4s .t4s-btn:hover { background: var(--green); color: #fff; }
.t4s .t4s-btn-dark { background: var(--ink); }
.t4s .t4s-btn-dark:hover { background: #000; }
.t4s .t4s-link { color: var(--green); font-weight: 600; font-size: 15px; text-decoration: none; }
.t4s .t4s-link:hover { text-decoration: underline; }
.t4s-bg-dark .t4s-link { color: var(--bright); }   /* dark green is too dim on the dark background */
.t4s-placeholder { background: var(--muted); border-radius: 16px; width: 100%; aspect-ratio: 4 / 3; }

/* Hero */
.t4s-hero-band { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(40px, 6vw, 88px); background: radial-gradient(40% 60% at 30% 50%, rgba(67, 186, 71, .08), rgba(255, 255, 255, 0) 70%), #fff; }
.t4s-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.t4s-hero-logo { height: 34px; width: auto; margin-bottom: 22px; }
/* Entity4 and Payments4 artwork includes the descender of the "y", so the image is taller for the same
   letter size: scale them up so every product name and "4" reads at the same size. */
.t4s-hero-logo[src*="Entity4Logo"], .t4s-hero-logo[src*="Payments4Logo"] { height: 43px; margin-bottom: 13px; }
.t4s-hero-wordmark { font: 500 34px/1 var(--sans); margin-bottom: 22px; }
.t4s .t4s-hero-text { margin-top: 20px; max-width: 520px; font-size: 17px; }
.t4s-hero-media img, .t4s-hero-media video, .t4s-hero-media .t4s-placeholder { width: 100%; border-radius: 16px; display: block; }
/* Fixed hero size (Platform and Solutions pages): every hero is the same height and its picture the same
   size whatever the headline length. Screenshots are 16:9 and keep their top; photos are 4:3. */
.t4s-hero-fixed .t4s-hero { min-height: 480px; }
.t4s-hero-fixed .t4s-hero-media img, .t4s-hero-fixed .t4s-hero-media video, .t4s-hero-fixed .t4s-hero-media .t4s-placeholder { object-fit: cover; }
.t4s-hero-screen .t4s-hero-media img, .t4s-hero-screen .t4s-hero-media video, .t4s-hero-screen .t4s-hero-media .t4s-placeholder { aspect-ratio: 16 / 9; object-position: top; }
.t4s-hero-photo .t4s-hero-media img, .t4s-hero-photo .t4s-hero-media video, .t4s-hero-photo .t4s-hero-media .t4s-placeholder { aspect-ratio: 4 / 3; object-position: center 10%; }

/* In your world */
.t4s-iyw { margin-top: 36px; }
.t4s-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 24px; }
/* Pills: light grey, no outline; the selected one is light green with a green outline (Figma "Tab Pill"). */
.t4s .t4s-chip { font: 500 15px/1 var(--sans); padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent; background: rgba(48, 54, 59, .08); color: var(--ink); cursor: pointer; transition: background-color .15s ease; }
.t4s .t4s-chip:hover { background: rgba(48, 54, 59, .14); }
.t4s .t4s-chip[aria-selected="true"] { background: #c7dfd1; border-color: var(--bright); color: var(--ink); }
.t4s-iyw-panels { background: #fff; border-radius: 16px; padding: clamp(24px, 4vw, 48px); }
.t4s-iyw-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.t4s-iyw-panel[hidden] { display: none; }
.t4s-iyw-statement { font: italic 400 clamp(20px, 2vw, 26px)/1.35 var(--serif); }
/* Without a photo: statement left, bullets right. With one: photo left, statement over bullets right. */
.t4s-iyw-panel:not(.t4s-iyw-panel-media) .t4s-iyw-copy { display: contents; }
.t4s-iyw-panel-media { align-items: center; }
.t4s-iyw-panel-media .t4s-iyw-statement { margin: 0 0 20px; }
.t4s-iyw-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; border-radius: 12px; display: block; }
.t4s-checks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.t4s-checks li { position: relative; padding-left: 30px; font-size: 15px; }
.t4s-checks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Intro */
.t4s-intro .t4s-labels { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.t4s-labels > span { font: 500 22px/1 var(--serif); padding: 0 22px; border-left: 1px solid var(--line); }
.t4s-labels > span:first-child { border-left: 0; }

/* Scroll steps */
.t4s-steps-band { padding-top: 0; }
.t4s-steps {
  --t4s-hdr: 160px;                                                  /* fixed site header */
  --t4s-stage-h: min(440px, calc(100vh - var(--t4s-hdr) - 80px));     /* image height; sections.js sets it from the image */
  display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 96px); align-items: start;   /* wider image column */
}
.t4s-steps-list { padding-left: 0; }
/* Each step is as tall as the image with its text centred in it, so whichever step is active
   lines up with the image. The image sticks in the middle of the space below the header. */
.t4s-step { position: relative; min-height: var(--t4s-stage-h); display: flex; flex-direction: column; justify-content: center; padding: 0; margin-bottom: clamp(48px, 8vh, 96px); opacity: .35; transition: opacity .25s ease; }
.t4s-step:last-child { margin-bottom: 0; }
.t4s-step.is-active { opacity: 1; }
.t4s-step-title { font: 600 clamp(24px, 2.4vw, 32px)/1.2 var(--serif); margin: 0 0 10px; color: var(--ink); }
.t4s-step-text { margin-bottom: 18px !important; max-width: 520px; }
.t4s-step .t4s-btn { visibility: hidden; align-self: flex-start; }
.t4s-step.is-active .t4s-btn { visibility: visible; }
.t4s-step-media { display: none; }
.t4s-steps-stage { position: sticky; top: calc(var(--t4s-hdr) + (100vh - var(--t4s-hdr) - var(--t4s-stage-h)) / 2); height: var(--t4s-stage-h); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
/* Pictures can differ in shape from step to step: show each one whole inside the stage. */
.t4s-steps-stage > * { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 16px; opacity: 0; transition: opacity .25s ease; }
.t4s-steps-stage > .is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .t4s-step, .t4s-steps-stage > * { transition: none; } }

/* Quote */
.t4s-quote { margin: 0 auto; max-width: 880px; text-align: center; }
.t4s-quote p { font: italic 400 clamp(20px, 2.2vw, 28px)/1.45 var(--sans); }
.t4s-quote footer { margin-top: 18px; font-weight: 600; font-size: 14px; }

/* Story card */
.t4s-story { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; background: var(--card-dark); color: #fff; border-radius: 20px; padding: 40px; max-width: 1000px; margin: 0 auto; align-items: center; }
.t4s .t4s-story-title { font: 600 40px/1.15 var(--serif); color: #fff; margin: 0 0 12px; }
.t4s .t4s-story-sub { font-weight: 600; margin-bottom: 14px; }
.t4s-story-body { display: grid; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .88); }
.t4s-story-media img, .t4s-story-media .t4s-placeholder { width: 100%; border-radius: 12px; }

/* Comparison */
.t4s-compare { max-width: 980px; margin: 44px auto 0; }
.t4s-compare-head, .t4s-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.t4s-compare-head { font: 500 20px/1.3 var(--sans); padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.t4s-compare-head span:first-child { color: var(--bright); }
.t4s-compare-row { padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .35); font-size: 14px; }
.t4s-compare-row:last-child { border-bottom: 0; }
.t4s-compare-row strong { display: block; font-size: 15px; margin-bottom: 4px; }
.t4s-bg-white .t4s-compare-head, .t4s-bg-mint .t4s-compare-head { border-color: var(--line); }

/* Cards */
.t4s-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 20px; margin-top: 44px; text-align: left; }
.t4s-cards[style*="--cols:1"] { max-width: 980px; margin-left: auto; margin-right: auto; }
.t4s-cards-boxed .t4s-card { background: #fff; border-radius: 16px; padding: 28px; color: var(--ink); }
.t4s-cards-strip { gap: 0; background: #fff; border-radius: 16px; }
.t4s-cards-strip .t4s-card { padding: 28px; border-left: 1px solid var(--line); }
.t4s-cards-strip .t4s-card:first-child { border-left: 0; }
.t4s-cards-plain .t4s-card { padding: 0 8px; }
.t4s-cards-soft { max-width: 980px; margin-left: auto; margin-right: auto; }
.t4s-cards-soft .t4s-card { background: var(--muted); border-radius: 12px; padding: 24px 28px; color: var(--ink); }
.t4s-quote-band { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); }
.t4s-section-quote { max-width: 880px; margin: 72px auto 0; text-align: center; }
.t4s-section-quote-link { margin-top: 18px; }
.t4s-section-quote + .t4s-actions { margin-top: 40px; }
.t4s-section-quote blockquote { margin: 0; font: italic 400 clamp(22px, 2.2vw, 28px)/1.4 var(--serif); }
.t4s-section-quote figcaption { margin-top: 14px; font-size: 15px; opacity: .8; }
.t4s-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.t4s .t4s-card-title { font: 500 20px/1.3 var(--sans); margin: 0; color: inherit; }
.t4s-cards-serif .t4s-card-title { font: 600 24px/1.25 var(--serif); }
.t4s-card-text { font-size: 14px; margin: 0 !important; max-width: none; }
.t4s-card-quote { font: italic 400 22px/1.4 var(--serif); }
.t4s-card-attr { font-size: 13px; }
.t4s-tag { margin-top: auto; background: var(--mint); color: var(--green); font-weight: 600; font-size: 12px; padding: 5px 12px; border-radius: 999px; }
/* Cards with no heading above a call to action (Go live / Connects): narrow and centred. */
.t4s-bg-dark > .t4s-inner > .t4s-cards:first-child { max-width: 980px; margin-left: auto; margin-right: auto; margin-top: 0; }
.t4s-bg-dark > .t4s-inner > .t4s-cards:first-child .t4s-card { align-items: center; text-align: center; }
.t4s-cta-box { background: var(--green); color: #fff; border-radius: 12px; padding: 40px; text-align: center; max-width: 980px; margin: 32px auto 0; }
.t4s-cta-box h2 { font: 500 26px/1.3 var(--sans); color: #fff; margin: 0 0 10px; }
.t4s-cta-text { color: #fff; font-size: 15px; margin-bottom: 18px !important; }

/* Image and accordion */
.t4s-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.t4s-split-media img, .t4s-split-media .t4s-placeholder { width: 100%; border-radius: 16px; }
.t4s-split .t4s-title { margin-bottom: 24px; }
.t4s-acc, .t4s-faq { border-bottom: 1px solid #cdd5d1; }
.t4s-acc summary, .t4s-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 500; font-size: 16px; }
.t4s-acc summary::-webkit-details-marker, .t4s-faq summary::-webkit-details-marker { display: none; }
.t4s-acc summary::after, .t4s-faq summary::after { content: '+'; color: var(--bright); font-size: 22px; line-height: 1; }
.t4s-acc[open] summary::after, .t4s-faq[open] summary::after { content: '\2212'; }
.t4s-acc p, .t4s-faq p { padding: 0 0 18px; font-size: 14px; }

/* Example questions */
.t4s-ask { margin-top: 28px; display: grid; gap: 12px; text-align: center; }
.t4s-ask p { font: italic 400 22px/1.4 var(--serif); }

/* Logo carousel */
.t4s-logos-head { text-align: center; font-weight: 500; margin-bottom: 24px !important; }
.t4s-logos-foot { text-align: center; font-size: 14px; margin-top: 24px !important; }
.t4s-marquee { overflow: hidden; margin: 0 calc(-1 * clamp(20px, 5vw, 56px)); }
.t4s-marquee-track { display: flex; width: max-content; animation: t4s-marquee 40s linear infinite; }
.t4s-marquee:hover .t4s-marquee-track { animation-play-state: paused; }
.t4s-marquee-set { display: flex; gap: 20px; padding-right: 20px; }
.t4s-logo { width: 116px; height: 116px; background: #fff; border-radius: 12px; display: grid; place-items: center; padding: 22px; }
.t4s-logo img { max-height: 40px; width: auto; }
@keyframes t4s-marquee { to { transform: translateX(-50%); } }
/* The logos keep scrolling at the same speed when reduced motion is on (often the default on company
   Windows laptops); stopping them made the carousel look broken. Hovering pauses them. */

/* Placeholder form */
.t4s-form { max-width: 560px; margin: 32px auto 0; border: 1px solid var(--line); border-radius: 16px; padding: 36px; display: flex; flex-wrap: wrap; gap: 18px 16px; text-align: left; background: #fff; }
.t4s-field { flex: 1 1 100%; display: grid; gap: 8px; font-size: 13px; font-weight: 500; }
.t4s-field-half { flex: 1 1 calc(50% - 8px); }
.t4s-field input, .t4s-field select, .t4s-field textarea { font: 400 14px/1.4 var(--sans); padding: 11px 12px; border: 1px solid #cfd6d3; border-radius: 6px; width: 100%; color: var(--ink); background: #fff; }
.t4s-form-foot { flex: 1 1 100%; display: grid; gap: 14px; justify-items: start; }
.t4s-form-note { font-size: 12px; color: var(--ink-2); }
.t4s-form-sent { font-size: 14px; color: var(--green); }

/* FAQs */
.t4s-faqs { max-width: 900px; margin: 36px auto 0; }

/* Tablet and phone */
@media (max-width: 1023px) {
  .t4s-hero, .t4s-iyw-panel, .t4s-story, .t4s-split, .t4s-steps { grid-template-columns: 1fr; }
  .t4s-hero-fixed .t4s-hero { min-height: 0; }
  .t4s-steps-list { border-left: 0; }
  .t4s-step { opacity: 1; padding: 0 0 56px; margin-bottom: 0; min-height: 0; display: block; }
  .t4s-step .t4s-btn { visibility: visible; }
  .t4s-step-media { display: block; margin-bottom: 20px; }
  .t4s-step-media img, .t4s-step-media .t4s-placeholder { width: 100%; border-radius: 12px; }
  .t4s-steps-stage { display: none; }
  .t4s-cards { grid-template-columns: 1fr 1fr; }
  .t4s-cards-strip .t4s-card { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .t4s-cards, .t4s-compare-head, .t4s-compare-row { grid-template-columns: 1fr; }
  /* Comparison: the column labels move onto each point (a ✓ product tag in green, a ✕ muted tag
     for the other side), so the two sides stay distinct once they stack. */
  .t4s-compare-head { display: none; }
  .t4s-compare { margin-top: 32px; }
  .t4s-compare-row { gap: 10px; padding: 14px 0; border-bottom: 0; }
  .t4s-compare-row > div { padding: 16px 18px 18px; border-radius: 14px; }
  .t4s-compare-row > div::before { content: attr(data-t4s-label); display: table; margin-bottom: 10px; padding: 5px 10px; border-radius: 999px; font: 600 12px/1.2 var(--sans); letter-spacing: .02em; }
  .t4s-compare-row > div:first-child { background: rgba(67, 186, 71, .12); box-shadow: inset 0 0 0 1px rgba(67, 186, 71, .5); }
  .t4s-compare-row > div:first-child::before { content: '\2713\00a0 ' attr(data-t4s-label); background: var(--bright); color: #fff; }
  .t4s-compare-row > div:last-child { background: rgba(128, 128, 128, .1); }
  .t4s-compare-row > div:last-child > * { opacity: .72; }
  .t4s-compare-row > div:last-child::before { content: '\2715\00a0 ' attr(data-t4s-label); box-shadow: inset 0 0 0 1px currentColor; opacity: .6; }
  .t4s-story { padding: 24px; }
  .t4s .t4s-story-title { font-size: 30px; }
  .t4s-field-half { flex-basis: 100%; }
  /* Audience labels wrap as centred pills, so a wrapped line never starts with a divider. */
  .t4s-intro .t4s-labels { gap: 8px; }
  .t4s-labels > span, .t4s-labels > span:first-child { font-size: 16px; line-height: 1.2; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; }
}
/* Pictures left empty (a grey placeholder) are dropped on tablets and phones, where they'd be a
   big grey block in the stacked layout; desktop keeps them. */
@media (max-width: 1024px) {
  :is(.t4s-step-media, .t4s-split-media, .t4s-story-media, .t4s-feature-media, .t4s-tab-media):has(> .t4s-placeholder) { display: none; }
  .t4s-split:has(> .t4s-split-media > .t4s-placeholder), .t4s-story:has(> .t4s-story-media > .t4s-placeholder) { grid-template-columns: 1fr; }
}
/* Tablets: stacked photos are capped so they don't run 600-1,100px tall, and a lone last card in
   a two-column grid sits centred under the others. */
@media (min-width: 641px) and (max-width: 1024px) {
  .t4s-story-media img, .t4s-split-media img, .t4s-feature-media img, .t4s-feature-media video { height: auto; max-height: 460px; object-fit: cover; object-position: center 30%; }
  .t4s-cards-resource[style*="--cols:3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .t4s-cards:is(.t4s-cards-boxed, .t4s-cards-soft, .t4s-cards-mint, .t4s-cards-plain) > .t4s-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}

/* ---- Home page sections (2026 redesign) ---------------------------------------------------- */
/* Centred hero: headline, text and button in the middle, the video full width underneath on a
   soft green glow (as the live home page). */
.t4s-hero-centered-band { padding-bottom: 0; background: radial-gradient(ellipse 75% 60% at 50% 62%, #c7dfd1 0%, rgba(199, 223, 209, .55) 45%, rgba(255, 255, 255, 0) 80%), #fff; }
.t4s-hero-centered { text-align: center; }
.t4s .t4s-hero-centered .t4s-title-hero { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; }
.t4s .t4s-hero-centered .t4s-hero-text { margin: 22px auto 0; font-size: 20px; max-width: 760px; }
.t4s-hero-centered .t4s-hero-media { margin-top: 48px; }
.t4s-hero-centered .t4s-hero-media video, .t4s-hero-centered .t4s-hero-media img { width: 100%; border-radius: 16px 16px 0 0; display: block; }

/* Card extras: picture, product logo, small label, button. */
.t4s-card-img { width: 100%; display: block; }
.t4s-card-label { font: 600 15px/1.3 var(--sans); color: var(--green); }
.t4s-bg-dark .t4s-card-label { color: var(--bright); }
.t4s-card .t4s-btn { margin-top: auto; }

/* Photo tiles (who we serve): the photo fills the tile, the text sits on a dark fade at the bottom. */
.t4s-cards-photo { gap: 24px; grid-template-columns: repeat(2, 1fr); }   /* always a 2 × 2 grid */
.t4s-cards-photo .t4s-card { position: relative; min-height: 460px; border-radius: 20px; overflow: hidden; justify-content: flex-end; padding: 32px; color: #fff; gap: 10px; }
.t4s-cards-photo .t4s-card-img { position: absolute; inset: 0; height: 100%; object-fit: cover; z-index: 0; }
.t4s-cards-photo .t4s-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(40, 52, 62, 0) 25%, rgba(40, 52, 62, .75) 62%, rgba(40, 52, 62, .96) 100%); }
.t4s-cards-photo .t4s-card > :not(.t4s-card-img) { position: relative; z-index: 2; }
.t4s .t4s-cards-photo .t4s-card-title { font: 600 34px/1.2 var(--serif); color: #fff; }
.t4s-cards-photo .t4s-card-text { color: #fff; font-size: 16px; }
.t4s .t4s-cards-photo .t4s-link { color: var(--bright); }

/* Module tiles: dark tiles with the product logo, one line and a link. */
.t4s-cards-modules .t4s-card { background: #3d474f; border-radius: 16px; padding: 28px; color: #fff; gap: 14px; }
.t4s-card-logo { height: 23px; width: auto; }
/* Entity4 and Payments4 artwork includes the descender of the "y": a little taller for the same letter size. */
.t4s-card-logo[src*="Entity4"], .t4s-card-logo[src*="Payments4"] { height: 29px; margin-bottom: -6px; }
.t4s .t4s-cards-modules .t4s-card-title { font: 600 24px/1.2 var(--sans); color: #fff; }
.t4s-cards-modules .t4s-card-text { color: #fff; font-size: 15px; }
.t4s-cards-modules .t4s-link { margin-top: auto; }

/* Mint cards (partners): label, serif title, text and a button. */
.t4s-cards-mint .t4s-card { background: #d6e7dd; border-radius: 20px; padding: 48px; color: var(--ink); gap: 16px; }
.t4s .t4s-cards-mint .t4s-card-title { font: 600 34px/1.25 var(--serif); }
.t4s-bg-grey .t4s-cards-mint .t4s-card { background: #fff; }   /* on a grey section the cards are white (home Partners) */
.t4s-cards-mint .t4s-card-text { font-size: 16px; }
@media (max-width: 1024px) { .t4s .t4s-cards-mint .t4s-card-title { font-size: 28px; } }
@media (max-width: 640px) {
  .t4s-cards-mint .t4s-card { padding: 32px 24px; }
  .t4s .t4s-cards-mint .t4s-card-title { font-size: 24px; }
}

/* Resource cards: thumbnail and title. */
.t4s-cards-resource .t4s-card { position: relative; background: var(--muted); border-radius: 16px; overflow: hidden; gap: 0; }
.t4s-cards-resource .t4s-card-img { aspect-ratio: 16 / 9; object-fit: cover; }
.t4s .t4s-cards-resource .t4s-card-title { font: 500 16px/1.4 var(--sans); padding: 18px 20px 6px; }
.t4s-cards-resource .t4s-card-text { padding: 0 20px 12px; }
.t4s-cards-resource .t4s-link { margin-top: auto; padding: 0 20px 20px; }   /* Read more lines up along the bottom of the row */
.t4s-cards-resource .t4s-link::after { content: ''; position: absolute; inset: 0; }   /* the whole card is the link */

/* Tabs: pills, then a white card with the picture and the copy. */
.t4s-tabs { margin-top: 36px; }
.t4s-tab-panel { display: grid; grid-template-columns: 560px 1fr; gap: 64px; align-items: center; background: #fff; border-radius: 24px; padding: 24px 64px 24px 24px; text-align: left; }
.t4s-tab-panel[hidden] { display: none; }
.t4s-tab-media img, .t4s-tab-media .t4s-placeholder { width: 100%; aspect-ratio: 56 / 38; object-fit: cover; border-radius: 16px; display: block; }
.t4s .t4s-tab-title { font: 500 32px/1.25 var(--sans); margin: 0 0 16px; color: var(--ink); }
.t4s .t4s-tab-text { font-size: 18px; line-height: 1.55; margin: 0 !important; max-width: none; }

/* Feature: copy and picture side by side on the section background; example questions below. */
.t4s-feature-band { background: radial-gradient(ellipse 60% 70% at 30% 40%, rgba(67, 186, 71, .08), rgba(255, 255, 255, 0) 70%), #fff; }
.t4s-feature { display: grid; grid-template-columns: 1fr 576px; gap: 64px; align-items: center; }
.t4s-feature-left { grid-template-columns: 496px 1fr; }
.t4s-feature .t4s-title { font-size: clamp(32px, 3.6vw, 50px); }
.t4s .t4s-feature-text { margin: 20px 0 0 !important; font-size: 17px; max-width: 600px; }
.t4s .t4s-feature-note { margin: 12px 0 0 !important; font: 500 15px/1.45 var(--sans); color: var(--green); }
.t4s-feature-media img, .t4s-feature-media video, .t4s-feature-media .t4s-placeholder { width: 100%; border-radius: 16px; display: block; }
.t4s-feature-questions { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 30px; margin-top: 64px; }
.t4s-feature-question { background: #d6e7dd; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.t4s .t4s-feature-q { font: italic 600 22px/1.45 var(--serif); margin: 0; }

/* Implementation timeline: left-aligned heading and week steps, then a dark card whose lower part
   sits on light grey, bridging into the (grey) section below. */
.t4s-timeline-band { padding-bottom: 0; background: linear-gradient(180deg, #fff calc(100% - 163px), #e4ebee calc(100% - 163px)); }
.t4s-timeline-band .t4s-title.t4s-title { font-size: clamp(36px, 4.2vw, 60px); line-height: 1; }
.t4s-timeline-band .t4s-lede { margin: 30px 0 0 !important; max-width: 992px; }
.t4s-timeline { display: grid; grid-template-columns: repeat(5, max-content); gap: 32px clamp(40px, 7.6vw, 110px); margin-top: 92px; }
@media (max-width: 1240px) { .t4s-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 28px; } }   /* five fixed steps + wide gaps need ~1240px */
.t4s-timeline-week { font: 700 16px/1.25 var(--sans); color: var(--bright); }
.t4s .t4s-timeline-title { font: 500 30px/1.2 var(--sans); margin: 15px 0 15px; color: var(--card-dark); }
.t4s .t4s-timeline-text { font-size: 16px; line-height: 1.5; margin: 0 !important; max-width: 150px; }
.t4s-timeline-card { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; background: var(--card-dark); color: #fff; border-radius: 20px; padding: 60px 80px 60px 90px; max-width: 1280px; margin: 100px -20px 0; }
.t4s .t4s-timeline-card h3 { font: 500 30px/1.25 var(--sans); color: #fff; margin: 0; max-width: 656px; }
.t4s-timeline-card .t4s-actions { margin-top: 30px; }
.t4s-stats { display: flex; gap: 32px; align-items: center; }
.t4s-stat { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 140px; }
.t4s-stat:last-child { background: var(--bright); border-radius: 12px; padding: 34px 32px; min-width: 173px; }
.t4s-stat-label { font: 700 12px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.t4s-stat-number { font: 600 64px/.8 var(--serif); font-variant-numeric: lining-nums; }
.t4s-stat-unit { font-size: 16px; line-height: 1; }

/* Large logos (home): bigger marks in a short band; the square logo files are cropped to their middle. */
.t4s-logos-large { padding-top: 0; padding-bottom: 0; }
.t4s-logos-large .t4s-marquee-set { gap: 42px; padding-right: 42px; }
.t4s-logos-large .t4s-logo { width: 248px; height: 157px; padding: 0; background: none; border-radius: 0; overflow: hidden; }
.t4s-logos-large .t4s-logo img { width: 248px; height: 248px; max-height: none; object-fit: contain; flex: none; }

/* Comparison, photo layout (home): laptop photo behind; heading and the "without" list top left, the
   green "with" card bottom right, the closing line and button bottom left (Figma Home 218:5504). */
.t4s-vs-band { position: relative; overflow: hidden; padding-top: 120px; padding-bottom: 110px; }
.t4s-vs-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.t4s-vs-band > .t4s-inner { position: static; }   /* the photo is sized to the whole section */
.t4s-vs { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 496px; grid-template-rows: auto auto 1fr auto; column-gap: 40px; min-height: 1280px; }
.t4s .t4s-vs-title { grid-column: 1 / -1; grid-row: 1; max-width: 868px; font-size: 50px; line-height: 1.1; color: #fff; text-align: left; }
.t4s .t4s-vs-title em { color: #fff; font-style: normal; }
.t4s-vs-without { grid-column: 1; grid-row: 2; margin-top: 60px; max-width: 383px; }
.t4s-vs-with { grid-column: 2; grid-row: 3 / 5; align-self: end; background: var(--bright); border-radius: 20px; padding: 50px; }
.t4s-vs-cta { grid-column: 1; grid-row: 4; align-self: end; max-width: 496px; }
.t4s .t4s-vs-without h3, .t4s .t4s-vs-with h3 { font: 400 24px/1.25 var(--sans); color: #fff; margin: 0 0 24px; }
.t4s .t4s-vs-without h3::after, .t4s .t4s-vs-with h3::after { content: ':'; }
.t4s-vs-rows { display: grid; gap: 24px; }
.t4s-vs-row { display: flex; gap: 29px; align-items: center; color: #fff; }
.t4s-vs-rows + .t4s-vs-row { margin-top: 24px; }
.t4s-vs-row strong { display: block; font: 700 16px/1.6 var(--sans); text-transform: uppercase; }
.t4s-vs-row span { display: block; margin-top: 6px; font: 400 20px/1.3 var(--sans); }
.t4s-vs-icon { flex: none; width: 26px; height: 26px; }
.t4s-vs-without .t4s-vs-icon { color: rgba(255, 255, 255, .6); }
.t4s-vs-stress { display: block; width: 50px; height: auto; margin-top: 6px; }
.t4s .t4s-vs-closing { font: 400 30px/1.2 var(--sans); color: #fff; margin: 0 0 40px; }
.t4s .t4s-vs-closing em { font-style: normal; color: var(--bright); }
@media (max-width: 1024px) {
  .t4s-vs { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; row-gap: 40px; }
  .t4s .t4s-vs-title, .t4s-vs-without, .t4s-vs-with, .t4s-vs-cta { grid-column: 1; grid-row: auto; margin-top: 0; max-width: none; }
  .t4s .t4s-vs-title { font-size: 34px; }
}

.t4s-quote-serif p { font: italic 600 34px/1.35 var(--serif); }
/* Wide CTA bar (home final CTA): full-width green bar, label left, arrow right. */
.t4s .t4s-btn-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 496px; padding: 31px 40px 31px 85px; border-radius: 999px; font: 500 17.5px/1.15 var(--sans); }
.t4s .t4s-btn-bar::after { content: '→'; font-size: 22px; }
.t4s-feature-left .t4s-actions { margin-top: 40px; }

/* Quote extras: logo above, link below. */
.t4s-quote-logo { display: block; margin: -12px auto 8px; height: 120px; width: auto; }   /* logo files are square with padding */
.t4s-quote-link { margin-top: 16px; }
@media (max-width: 640px) {
  .t4s-quote-serif p { font-size: 24px; }
  /* Crop the square logo's padding so the mark itself reads at a sensible size. */
  .t4s-quote-logo { width: min(240px, 70%); height: 84px; object-fit: cover; object-position: center 37%; mix-blend-mode: multiply; margin: 0 auto 20px; }
}

/* Comparison closing line. */
.t4s .t4s-compare-closing { margin: 44px auto 0 !important; max-width: 640px; font: 500 26px/1.35 var(--sans); }

@media (max-width: 1024px) {
  .t4s-tab-panel, .t4s-feature, .t4s-feature-left, .t4s-timeline-card { grid-template-columns: 1fr; padding: 24px; }
  .t4s-timeline { grid-template-columns: repeat(2, 1fr); }
  .t4s-feature-questions { grid-template-columns: 1fr; }
  .t4s-cards-photo .t4s-card { min-height: 360px; }
}
@media (max-width: 640px) {
  .t4s-cards-photo { grid-template-columns: 1fr; }
  .t4s-timeline { grid-template-columns: 1fr; }
  .t4s-stats { flex-wrap: wrap; justify-content: center; }
}

/* Reveal on scroll (sections.js adds .t4s-motion only when motion is allowed, so without script or
   with reduced motion everything simply shows). */
.t4s-motion [data-t4s-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--t4s-delay, 0ms); }
.t4s-motion [data-t4s-reveal].is-in { opacity: 1; transform: none; }

/* Cards as the page's opening band (hero: true, home page): h1, button above the cards, and the
   photo tiles as one compact row so all of it shows above the fold, on a soft green glow. */
.t4s.t4s-cards-hero-band { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 88px); background: radial-gradient(ellipse 80% 70% at 50% 0%, #d4e9dc 0%, rgba(212, 233, 220, .5) 45%, rgba(255, 255, 255, 0) 80%), #fff; }
.t4s.t4s-cards-hero-band .t4s-title-hero { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.08; }
.t4s.t4s-cards-hero-band .t4s-hero-text { margin-top: 18px !important; font-size: 19px; max-width: 760px; }
.t4s-cards-hero-band .t4s-actions { margin-top: 28px; }
.t4s-cards-hero-band .t4s-cards { margin-top: 40px; }
.t4s-cards-hero-band .t4s-cards-photo { grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 20px; }
.t4s-cards-hero-band .t4s-cards-photo .t4s-card { min-height: 280px; padding: 24px; gap: 6px; border-radius: 16px; }
.t4s.t4s-cards-hero-band .t4s-cards-photo .t4s-card-title { font-size: 26px; }
.t4s-cards-hero-band .t4s-cards-photo .t4s-card > .t4s-card-foot { position: static; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; width: 100%; }
.t4s-cards-hero-band .t4s-card-foot > .t4s-card-title { position: relative; z-index: 2; }
.t4s-cards-hero-band .t4s-cards-photo .t4s-card-arrow { position: static; flex: none; }
.t4s-cards-hero-band .t4s-card-arrow::after { content: ''; position: absolute; inset: 0; z-index: 3; }   /* the whole card is the link */
.t4s-cards-hero-band .t4s-card-arrow span { position: relative; z-index: 2; display: block; color: #fff; font-size: 30px; line-height: 1; transition: transform .2s ease; }
.t4s-cards-hero-band .t4s-card:hover .t4s-card-arrow span { transform: translateX(4px); }
.t4s-cards-hero-band .t4s-card-arrow:focus-visible span { outline: 2px solid #fff; outline-offset: 3px; }
.t4s-cards-hero-band .t4s-cards-photo .t4s-card-img { transition: transform .4s ease; }
.t4s-cards-hero-band .t4s-cards-photo .t4s-card:hover .t4s-card-img { transform: scale(1.04); }
.t4s-cards-hero-band .t4s-cards-photo .t4s-card-text { font-size: 15px; line-height: 1.45; }
@media (max-width: 1024px) {
  .t4s-cards-hero-band .t4s-cards-photo { grid-template-columns: repeat(2, 1fr); }
  .t4s-cards-hero-band .t4s-cards-photo .t4s-card { min-height: 260px; }
}
@media (max-width: 640px) {
  .t4s-cards-hero-band .t4s-cards-photo { grid-template-columns: 1fr; gap: 14px; }
  .t4s-cards-hero-band .t4s-cards-photo .t4s-card { min-height: 220px; }
}

/* Hero layout "tiles": an uneven grid (one tall tile, one wide, two small), bright photos with the
   title and arrow in a frosted-glass label, tiles rising in on load. */
.t4s-hero-tiles .t4s-cards-photo { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 164px 164px; gap: 16px; }
.t4s-hero-tiles .t4s-cards-photo .t4s-card-img { object-position: center 22%; }
.t4s-hero-tiles .t4s-cards-photo > :nth-child(2) .t4s-card-img { object-position: center 4%; }   /* wide tile: keep the face in frame */
.t4s-hero-tiles .t4s-cards-photo > :first-child { grid-row: span 2; }
.t4s-hero-tiles .t4s-cards-photo > :nth-child(2) { grid-column: span 2; }
.t4s-cards-hero-band.t4s-hero-tiles .t4s-cards-photo .t4s-card { min-height: 0; padding: 16px; border-radius: 20px; animation: t4s-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.t4s-hero-tiles .t4s-cards-photo > :nth-child(2) { animation-delay: .08s; }
.t4s-hero-tiles .t4s-cards-photo > :nth-child(3) { animation-delay: .16s; }
.t4s-hero-tiles .t4s-cards-photo > :nth-child(4) { animation-delay: .24s; }
.t4s-hero-tiles .t4s-cards-photo .t4s-card::before { background: linear-gradient(180deg, rgba(20, 28, 34, 0) 55%, rgba(20, 28, 34, .35) 100%); }
.t4s-cards-hero-band.t4s-hero-tiles .t4s-cards-photo .t4s-card > .t4s-card-foot { width: auto; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; border-radius: 999px; background: rgba(20, 28, 34, .42); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.t4s.t4s-hero-tiles .t4s-cards-photo .t4s-card-title { font: 600 17px/1.2 var(--sans); letter-spacing: -.005em; }
.t4s-hero-tiles .t4s-card-arrow span { font-size: 18px; }
.t4s.t4s-hero-tiles .t4s-title-hero { letter-spacing: -.015em; }
@keyframes t4s-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .t4s-cards-hero-band .t4s-card { animation: none !important; } }
@media (max-width: 1024px) {
  .t4s-hero-tiles .t4s-cards-photo { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px 160px; }
  .t4s-hero-tiles .t4s-cards-photo > :first-child { grid-row: auto; grid-column: span 2; }
  .t4s-hero-tiles .t4s-cards-photo > :nth-child(2) { grid-column: span 2; }
}
@media (max-width: 640px) {
  .t4s-hero-tiles .t4s-cards-photo { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 170px; }
  .t4s-hero-tiles .t4s-cards-photo > :first-child, .t4s-hero-tiles .t4s-cards-photo > :nth-child(2) { grid-column: auto; }
}

/* Hero layout "pills": type-led, no pictures. The audiences are outlined pill links on a soft mint
   glow with a faint grid. */
.t4s.t4s-hero-pills { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px); background:
  linear-gradient(rgba(36, 44, 51, .045) 1px, transparent 1px) 0 0 / 48px 48px,
  linear-gradient(90deg, rgba(36, 44, 51, .045) 1px, transparent 1px) 0 0 / 48px 48px,
  radial-gradient(ellipse 70% 80% at 50% 0%, #d4e9dc 0%, rgba(212, 233, 220, .45) 50%, rgba(255, 255, 255, 0) 85%), #fff; }
.t4s.t4s-hero-pills .t4s-title-hero { text-wrap: balance; font-size: clamp(38px, 5.2vw, 76px); line-height: 1.04; letter-spacing: -.02em; max-width: 1180px; margin: 0 auto; }
.t4s.t4s-hero-pills .t4s-hero-text { font-size: clamp(17px, 1.5vw, 21px); margin-top: 24px !important; }
.t4s.t4s-hero-pills .t4s-cards-pills { margin-top: clamp(48px, 6vw, 80px); }
/* Fill the first screen below the header (sections.js measures it) with the content centred, so the
   logo band starts at the fold. Phones scroll naturally. */
@media (min-width: 766px) {
  .t4s.t4s-hero-pills { min-height: calc(100svh - var(--t4s-header-h, 218px)); display: flex; flex-direction: column; justify-content: center; }
  .t4s.t4s-hero-pills > .t4s-inner { width: 100%; }
}
.t4s-cards-hero-band .t4s-hero-head { text-align: center; }
/* Phones: the headline and its line fill the first screen, centred; the pills start below the fold. */
@media (max-width: 765px) {
  .t4s.t4s-hero-pills { padding-top: 0; }
  .t4s-hero-pills .t4s-hero-head { min-height: calc(100svh - var(--t4s-header-h, 200px)); display: flex; flex-direction: column; justify-content: center; }
  .t4s.t4s-hero-pills .t4s-cards-pills { margin-top: 0; }
}
.t4s-cards-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 1160px; margin: 56px auto 0; }   /* one row of equal pills; 2 x 2 on tablets, stacked on phones */
@media (max-width: 1279px) { .t4s-cards-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
@media (max-width: 640px) { .t4s-cards-pills { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; } }
.t4s-cards-pills .t4s-card { position: relative; animation: t4s-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.t4s-cards-pills > :nth-child(2) { animation-delay: .06s; }
.t4s-cards-pills > :nth-child(3) { animation-delay: .12s; }
.t4s-cards-pills > :nth-child(4) { animation-delay: .18s; }
.t4s-cards-hero-band .t4s-cards-pills .t4s-card > .t4s-card-foot { position: static; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 24px 24px 24px 30px; border-radius: 999px; background: #fff; border: 1px solid #d9e6df; box-shadow: 0 1px 2px rgba(36, 44, 51, .06), 0 8px 24px rgba(36, 44, 51, .08); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.t4s.t4s-hero-pills .t4s-cards-pills .t4s-card-title { font: 600 18px/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.t4s-cards-pills .t4s-card-arrow { position: static; margin-left: auto; }
.t4s-cards-pills .t4s-card-title { text-align: left; }
.t4s-cards-pills .t4s-card-arrow::after { content: ''; position: absolute; inset: 0; border-radius: 999px; }
/* CloudCannon editor: lift card text above the "whole card is the link" overlay so a click edits it.
   The editing hooks only exist in the editor build, so the live site is unaffected. */
.t4s .t4s-card [data-editable="text"] { position: relative; z-index: 4; }
.t4s-cards-pills .t4s-card-arrow span { display: block; color: var(--bright); transition: transform .2s ease; }
.t4s-cards-pills .t4s-card-arrow svg { display: block; width: 22px; height: 22px; }
.t4s-cards-pills .t4s-card:hover .t4s-card-foot { border-color: var(--bright); box-shadow: 0 2px 4px rgba(36, 44, 51, .06), 0 14px 32px rgba(49, 135, 52, .16); transform: translateY(-2px); }
.t4s-cards-pills .t4s-card:hover .t4s-card-arrow span { transform: translateX(3px); }
.t4s-cards-pills .t4s-card-arrow:focus-visible { outline: none; }
.t4s-cards-pills .t4s-card:has(.t4s-card-arrow:focus-visible) .t4s-card-foot { outline: 2px solid var(--green); outline-offset: 3px; }

/* Hero layout "marks": type-led like pills, the audiences as light green cards with a brand mark,
   title and line. Content sits at the top of each card, so the titles line up across the row
   however long the lines are; the arrow sits top right, next to the mark. */
.t4s.t4s-hero-marks .t4s-title-hero { text-wrap: balance; font-size: clamp(38px, 4.6vw, 68px); line-height: 1.06; letter-spacing: -.02em; max-width: 1180px; margin: 0 auto; }
.t4s.t4s-hero-marks .t4s-hero-text { font-size: clamp(17px, 1.5vw, 21px); margin-top: 24px !important; }
@media (min-width: 766px) {
  .t4s.t4s-hero-marks { min-height: calc(100svh - var(--t4s-header-h, 218px)); display: flex; flex-direction: column; justify-content: center; }
  .t4s.t4s-hero-marks > .t4s-inner { width: 100%; }
}
.t4s-cards-hero-band .t4s-cards-marks { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.t4s-cards-marks .t4s-card { position: relative; justify-content: flex-start; gap: 0; padding: 28px 24px; border-radius: 16px; background: var(--mint); border: 1px solid #daeae1; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.t4s-cards-marks .t4s-card:hover { transform: translateY(-3px); border-color: #a2cab3; box-shadow: 0 12px 32px rgba(36, 44, 51, .08); }
.t4s-card-mark { display: block; width: 52px; height: 52px; flex: none; margin-bottom: 36px; }
.t4s-cards-marks .t4s-card > .t4s-card-foot { position: static; width: 100%; }
.t4s.t4s-hero-marks .t4s-cards-marks .t4s-card-title { font-size: clamp(20px, 1.75vw, 24px); line-height: 1.2; color: var(--ink); }
.t4s-cards-hero-band .t4s-cards-marks .t4s-card-arrow span { position: absolute; top: 34px; right: 24px; color: var(--bright); font-size: 26px; }
.t4s-cards-marks .t4s-card-arrow:focus-visible { outline: none; }
.t4s-cards-marks .t4s-card:has(.t4s-card-arrow:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.t4s-cards-marks .t4s-card-text { margin-top: 10px !important; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* Motion: the cards rise in one after another, then each mark's shapes settle into its grid; on hover
   the shapes nudge up and to the right (the brand's motion direction). "backwards" leaves the card's
   own hover lift free once the entrance is over. */
.t4s-cards-marks .t4s-card { animation: t4s-rise .6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.15s + var(--t4s-i, 0) * .08s); }
.t4s-cards-marks > :nth-child(2) { --t4s-i: 1; }
.t4s-cards-marks > :nth-child(3) { --t4s-i: 2; }
.t4s-cards-marks > :nth-child(4) { --t4s-i: 3; }
.t4s-card-mark > :not(g) { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2, .7, .2, 1); animation: t4s-mark-in .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.45s + var(--t4s-i, 0) * .08s); }
.t4s-card-mark > :not(g):nth-child(3) { animation-delay: calc(.55s + var(--t4s-i, 0) * .08s); }
.t4s-card-mark > :not(g):nth-child(4) { animation-delay: calc(.65s + var(--t4s-i, 0) * .08s); }
.t4s-card-mark > :not(g):nth-child(5) { animation-delay: calc(.75s + var(--t4s-i, 0) * .08s); }
.t4s-cards-marks .t4s-card:hover .t4s-card-mark > :not(g) { transform: translate(1.5px, -1.5px); }
@keyframes t4s-mark-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .t4s-cards-marks .t4s-card, .t4s-card-mark > :not(g) { animation: none !important; transition: none; }
  .t4s-cards-marks .t4s-card:hover, .t4s-cards-marks .t4s-card:hover .t4s-card-mark > :not(g) { transform: none; }
}
@media (max-width: 1024px) { .t4s-cards-hero-band .t4s-cards-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .t4s-cards-hero-band .t4s-cards-marks { grid-template-columns: 1fr; gap: 14px; }
  .t4s-card-mark { width: 44px; height: 44px; margin-bottom: 24px; }
}

/* Phones and tablets: the timeline follows the live site's mobile layout. */
@media (max-width: 1024px) {
  /* Timeline: centred on mint, the weeks divided by thin rules; the dark card stays half on mint. */
  .t4s.t4s-timeline-band { background: linear-gradient(180deg, #d3e5da calc(100% - 163px), #fff calc(100% - 163px)); text-align: center; }
  .t4s.t4s-timeline-band .t4s-title { text-align: center; font-size: 32px; }
  .t4s.t4s-timeline-band .t4s-lede { margin: 18px auto 0 !important; text-align: center; font-size: 14px; }
  .t4s-timeline-band .t4s-timeline { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .t4s-timeline-band .t4s-timeline-step { padding: 22px 0; }
  .t4s-timeline-band .t4s-timeline-step + .t4s-timeline-step { border-top: 1px solid rgba(36, 44, 51, .3); }
  .t4s.t4s-timeline-band .t4s-timeline-title { font-size: 28px; margin: 8px 0; }
  .t4s.t4s-timeline-band .t4s-timeline-text { max-width: 200px; margin: 0 auto !important; font-size: 15px; }
  .t4s-timeline-band .t4s-timeline-card { margin: 32px 0 0; padding: 36px 24px; text-align: center; }
  .t4s.t4s-timeline-band .t4s-timeline-card h3 { font-size: 22px; margin: 0 auto; }
  .t4s-timeline-band .t4s-timeline-card .t4s-actions { justify-content: center; }
  .t4s-timeline-band .t4s-timeline-card .t4s-stats { justify-content: center; }
}

/* Phones and tablets: the comparison follows the live site's mobile layout (the stacked desktop
   layout put the lists over the laptop in the background photo). */
@media (max-width: 1024px) {
  /* Comparison: the laptop (cropped from the background photo) on top, then compact
     "Label: text" bullet lists, the green "with" card, and the closing line centred. */
  .t4s.t4s-vs-band { padding-top: 0; padding-bottom: 56px; background: #0d0d0d; }   /* the photo's own black, so the cropped laptop has no seam */
  .t4s-vs-band .t4s-vs-bg { position: relative; inset: auto; z-index: 0; display: block; width: 160%; max-width: none; height: auto; margin: -34% 0 -38% -40%; }
  .t4s-vs { row-gap: 28px; }
  .t4s.t4s-vs-band .t4s-vs-title { font: 600 25px/1.3 var(--serif); }
  .t4s.t4s-vs-band .t4s-vs-without h3, .t4s.t4s-vs-band .t4s-vs-with h3 { font-size: 15px; margin-bottom: 12px; }
  .t4s-vs-band .t4s-vs-with { padding: 22px 22px 24px; border-radius: 16px; }
  .t4s-vs-band .t4s-vs-rows { gap: 6px; }
  .t4s-vs-band .t4s-vs-rows + .t4s-vs-row { margin-top: 6px; }
  .t4s-vs-band .t4s-vs-row { gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; }
  .t4s-vs-band .t4s-vs-row::before { content: '\2022'; flex: none; }
  .t4s-vs-band .t4s-vs-icon { display: none; }
  .t4s.t4s-vs-band .t4s-vs-row strong { display: inline; font: 700 15px/1.45 var(--sans); text-transform: none; }
  .t4s.t4s-vs-band .t4s-vs-row strong::after { content: ': '; }
  .t4s.t4s-vs-band .t4s-vs-row span { display: inline; margin: 0; font: 400 15px/1.45 var(--sans); }
  .t4s-vs-band .t4s-vs-stress { display: inline-block; width: auto; height: 18px; margin: 0 0 0 2px; vertical-align: -3px; }
  .t4s-vs-band .t4s-vs-without .t4s-vs-stress { filter: brightness(0) invert(.82); }   /* the dark "up" arrow, light grey on the black band */
  .t4s-vs-band .t4s-vs-cta { text-align: center; }
  .t4s.t4s-vs-band .t4s-vs-closing { font-size: 22px; line-height: 1.35; margin-bottom: 24px; }
  .t4s-vs-band .t4s-vs-cta .t4s-actions { justify-content: center; }

}
/* Tablets: the two lists side by side under the heading. */
@media (min-width: 641px) and (max-width: 1024px) {
  .t4s.t4s-vs-band { padding-bottom: 80px; }
  .t4s-vs-band .t4s-vs-bg { margin-top: -30%; margin-bottom: -36%; }
  .t4s-vs-band .t4s-vs { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 36px; }
  .t4s.t4s-vs-band .t4s-vs-title, .t4s-vs-band .t4s-vs-cta { grid-column: 1 / -1; }
  .t4s-vs-band .t4s-vs-without { grid-column: 1; padding-top: 22px; }
  .t4s-vs-band .t4s-vs-with { grid-column: 2; }
  .t4s.t4s-vs-band .t4s-vs-title { font-size: 32px; }
  .t4s.t4s-vs-band .t4s-vs-closing { font-size: 26px; }
}
/* Tablets: a little more room in the timeline's dark card. */
@media (min-width: 641px) and (max-width: 1024px) {
  .t4s.t4s-timeline-band .t4s-title { font-size: 40px; }
  .t4s.t4s-timeline-band .t4s-lede { max-width: 620px; font-size: 16px; }
  .t4s-timeline-band .t4s-timeline { max-width: 560px; margin-left: auto; margin-right: auto; }
  .t4s-timeline-band .t4s-timeline-card { padding: 48px 40px; max-width: 640px; margin-left: auto; margin-right: auto; }
}