/* ══════════════════════════════════════════
   Page sections (cms-): what a promotion page is built from. The same file
   styles the public offer page and the page builder's canvas, so what you
   build is what visitors see. Site tokens come from tokens.css; the Bundle
   section's own look (.ob) is in offers.css.
   ══════════════════════════════════════════ */
.cms-sec { padding: 56px 22px; }
/* A section holds its contents' margins, so with its padding at nothing no
   margin inside it can push it away from the next, and leave a gap. */
.cms-sec { display: flow-root; }
.cms-sec--surface { background: var(--surface); }
.cms-sec--band { background: var(--band); }
/* Text on a dark background, the Dark band's or a section's own: light, with
   the band's lighter cards. A section with a background of its own is told
   which text reads on it, in each theme (cms-ink- light, cms-dk- dark). */
.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L { color: #fff; --muted: rgba(255, 255, 255, .82); --ink: #fff; }
:root:not([data-theme="dark"]) .cms-ink-D, [data-theme="dark"] .cms-dk-D { color: #112240; --ink: #112240; --muted: #3E4B66; --card: #fff; --border: #DDE4F2; --surface: #F5F8FD; }
.cms-sec:has(> .cms-spacer) { padding: 0 22px; }
.cms-sec .ob { padding: 0; }

.cms-in { max-width: 1136px; margin: 0 auto; }
.cms-in--mid { max-width: 900px; }
.cms-in--narrow { max-width: 720px; }
.cms-center { text-align: center; }
.cms-center .cms-lede, .cms-center .cms-btns { margin-left: auto; margin-right: auto; justify-content: center; }
.cms-head { max-width: 680px; margin: 0 auto 28px; }

.cms-kick { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-kick, .cms-banner__kick { color: var(--gold); }
.cms-h { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-h { color: #fff; }
.cms-lede { margin: 12px 0 0; font-size: var(--site-fs, 16px); line-height: 1.6; color: var(--muted); max-width: 62ch; }
.cms-caption { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }

/* Buttons */
.cms-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* A button to a document (M256) says what it is beside it. */
.cms-btn__doc { align-self: center; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cms-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: var(--r-btn, 99px); font-weight: 800; font-size: 14.5px; text-decoration: none; transition: transform .15s; }
.cms-btn:hover { transform: translateY(-1px); }
.cms-btn--ic { gap: 8px; }
.cms-btn__ic { flex: none; width: 17px; height: 17px; }
.cms-btn--gold { background: var(--gold-grad); color: var(--on-gold); }
.cms-btn--blue { background: var(--blue); color: var(--on-blue, #fff); }
.cms-btn--ghost { border: 1.5px solid currentColor; color: inherit; }
.cms-btn--link { height: auto; padding: 4px 0; border-radius: 0; color: var(--blue); font-size: 15px; }
.cms-btn--link::after { content: "\00a0\2192"; }
.cms-btn--link:hover { transform: none; text-decoration: underline; text-underline-offset: 3px; }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-btn--link { color: #fff; }
[data-theme="dark"] .cms-btn--link { color: color-mix(in oklab, var(--blue) 55%, white); }

/* Width: a full width section breaks out of the page's column to the viewport's
   edges; its content stays at a readable width unless it stretches too. */
body.offer-page { overflow-x: clip; }
.cms-sec--w-full, .cms-sec--w-stretch { width: 100vw; margin-left: calc(50% - 50vw); }
.cms-sec--w-stretch { padding-left: clamp(16px, 4vw, 56px); padding-right: clamp(16px, 4vw, 56px); }
.cms-sec--w-stretch .cms-in, .cms-sec--w-stretch .cms-spacer { max-width: none; }

/* Background art: drawn behind the section, bottom right, as the site's headers
   and featured cards draw theirs. */
.cms-sec--art { position: relative; overflow: hidden; }
.cms-sec--art > :not(.cms-art) { position: relative; z-index: 1; }
.cms-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cms-art--illus .illus { position: absolute; right: 0; bottom: -15px; width: 52%; max-width: 620px; height: auto; max-height: 100%; }
.cms-art [data-animation-path] { stroke-dashoffset: 0 !important; }
.cms-art--icon svg { position: absolute; right: -24px; bottom: -20px; width: 260px; height: 260px; opacity: .9; }
/* Text lined up on the left moves to the page's left edge beside an
   illustration and leaves it the right half, the way the site's headers do,
   so the words never run across the drawing. */
@media (min-width: 900px) {
  .cms-sec--art-illus .cms-in--narrow:not(.cms-center) { max-width: min(720px, 50%); margin-left: max(0px, calc((100% - 1136px) / 2)); }
  .cms-sec--w-stretch.cms-sec--art-illus .cms-in--narrow:not(.cms-center) { margin-left: 0; }
}

/* Banner */
.cms-banner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 36px; align-items: center; }
.cms-banner--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.cms-banner__kick { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cms-banner__title { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; }
.cms-banner__lede { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.cms-banner__art img { display: block; width: 100%; height: auto; border-radius: 18px; }
.cms-banner__art--icon { display: flex; justify-content: center; }
.cms-banner__art--icon svg { width: 100%; max-width: 340px; height: auto; aspect-ratio: 1; }
/* One of the illustrations beside the words, as large as the column allows. */
.cms-banner__art--illus { display: flex; justify-content: center; }
.cms-banner__art--illus svg, .cms-banner__art--illus img { width: 100%; max-width: 560px; height: auto; }

/* Countdown: the numbers render server side; public.js ticks them. */
.cms-count { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cms-center .cms-count { justify-content: center; }
.cms-count span { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 8px 6px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cms-count b { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-count span { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }

/* Text */
.cms-rich { margin-top: 14px; font-size: var(--site-fs, 16px); line-height: 1.7; color: var(--ink); }
.cms-rich > :first-child { margin-top: 0; }
.cms-rich h2, .cms-rich h3, .cms-rich h4 { font-family: var(--font-display); line-height: 1.25; margin: 1.4em 0 .4em; }
.cms-rich p { margin: 0 0 1em; }
.cms-rich ul, .cms-rich ol { margin: 0 0 1em; padding-left: 1.4em; }
.cms-rich a { color: var(--blue); }
.cms-rich img { max-width: 100%; height: auto; border-radius: 10px; }

/* Image */
.cms-fig { margin: 0 auto; }
.cms-fig--narrow { max-width: 640px; }
.cms-fig--full { max-width: none; }
/* A picture's sizes come wrapped in <picture>; the box is the <img>'s alone. */
.cms-in picture { display: contents; }
.cms-fig img { display: block; width: 100%; height: auto; border-radius: 16px; }
.cms-fig--full img { border-radius: 0; }
.cms-sec:has(> .cms-fig--full) { padding-left: 0; padding-right: 0; }
.cms-fig figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* Video */
.cms-video { position: relative; margin-top: 20px; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; background: #000; box-shadow: var(--lift-hi); }
.cms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cms-video:first-child { margin-top: 0; }   /* the space is for under a heading; with none, the video starts the section */

/* Features */
.cms-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cms-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cms-feat { padding: 20px; border-radius: var(--r-card, 14px); background: var(--card); border: 1px solid var(--border); }
.cms-feat b { display: block; font-family: var(--font-display); font-size: 16.5px; font-weight: 800; color: var(--ink); }
.cms-feat__body { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
/* Card art: an icon in the card's corner, as the featured product cards carry theirs. */
.cms-feat--art { position: relative; overflow: hidden; padding-right: 96px; min-height: 116px; }
.cms-feat--art > b, .cms-feat--art > .cms-feat__body { position: relative; z-index: 1; }
.cms-feat__art { position: absolute; right: -14px; bottom: -12px; width: 108px; height: 108px; opacity: .95; z-index: 0; }
.cms-feat__art svg { display: block; width: 100%; height: 100%; }

/* Quotes */
.cms-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cms-quote { margin: 0; padding: 22px; border-radius: var(--r-card, 14px); background: var(--card); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.cms-quote blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.cms-quote blockquote::before { content: "\201C"; display: block; font-family: var(--font-display); font-size: 40px; line-height: .8; color: var(--gold-deep); }
.cms-quote figcaption b { display: block; font-weight: 800; color: var(--ink); }
.cms-quote figcaption span { font-size: 13px; color: var(--muted); }

/* Questions */
.cms-faq { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.cms-faq details { border-radius: var(--r-card, 12px); background: var(--card); border: 1px solid var(--border); }
.cms-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; font-weight: 800; color: var(--ink); }
.cms-faq summary::-webkit-details-marker { display: none; }
.cms-faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--muted); }
.cms-faq details[open] summary::after { content: "\2212"; }
.cms-faq details > div { padding: 0 18px 16px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.cms-faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 12px; }
/* Questions' looks (M221): lines, outlined with the open one filled, plain text; an arrow; two across */
.cms-faq--arrow summary::after, .cms-faq--arrow details[open] summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 6px 4px 0 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; }
.cms-faq--arrow details[open] summary::after { transform: rotate(225deg); margin-top: 10px; }
.cms-faq--lines { gap: 0; }
.cms-faq.cms-faq--lines details { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
.cms-faq--lines details:first-child { border-top: 1px solid var(--border); }
.cms-faq--lines summary { padding: 18px 2px; }
.cms-faq--lines details > div { padding: 0 2px 18px; }
.cms-faq--lines details[open] summary { color: var(--gold-deep); }
.cms-faq.cms-faq--outlined details { overflow: hidden; }
.cms-faq--outlined details[open] { box-shadow: var(--lift, 0 14px 30px -22px rgba(0, 0, 0, .5)); }
.cms-faq--outlined details[open] summary { background: var(--ink); color: var(--bg); }
.cms-faq--outlined details[open] summary::after { color: var(--gold); border-color: var(--gold); }
.cms-faq--outlined details[open] > div { padding-top: 16px; }
.cms-faq--plain { gap: 26px; }
.cms-faq--plain h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink); }
.cms-faq--plain .cms-faq__i > div { font-size: 15px; line-height: 1.65; color: var(--muted); }
.cms-faq--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 20px; }
.cms-faq--2.cms-faq--lines { gap: 0 28px; }
.cms-faq--2.cms-faq--lines details:nth-child(2) { border-top: 1px solid var(--border); }
.cms-faq--2.cms-faq--plain { gap: 26px 36px; }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-faq--outlined details { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-faq--outlined details[open] summary { background: var(--gold-grad); color: var(--on-gold); }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-faq--outlined details[open] summary::after { border-color: var(--on-gold); }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) :is(.cms-faq--lines details, .cms-faq--lines details:first-child, .cms-faq--2.cms-faq--lines details:nth-child(2)) { border-color: rgba(255, 255, 255, .18); }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-faq--lines details[open] summary { color: var(--gold); }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-faq--plain h3 { color: #fff; }
@media (max-width: 760px) { .cms-faq--2, .cms-faq--2.cms-faq--lines { grid-template-columns: minmax(0, 1fr); } .cms-faq--2.cms-faq--lines details:nth-child(2) { border-top: 0; } }

/* Call to action */
.cms-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 30px 32px; border-radius: var(--r-card, 18px); background: var(--card); border: 1px solid var(--border); box-shadow: var(--lift); }
.cms-cta .cms-h { margin-top: 0; }
.cms-cta .cms-btns { margin-top: 0; }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-cta { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
/* Cards on the dark band: see-through, so the band's light text reads on them. */
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) :is(.cms-feat, .cms-quote, .cms-faq--cards .cms-faq__i, .ob__card, .cms-col--card) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-rich a { color: #fff; }
.cms-sec .ob__cta, .cms-btn { text-decoration: none; }

/* Logos */
.cms-logos__t { margin: 0 0 18px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cms-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 40px; }
.cms-logos svg { display: block; width: 44px; height: 44px; }
.cms-logos img { display: block; max-height: 40px; max-width: 190px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .15s, opacity .15s; }
.cms-logos li:hover img { filter: none; opacity: 1; }
/* Most logos are dark ink, which would vanish on the dark theme and on the band:
   there they show as white silhouettes. */
[data-theme="dark"] .cms-logos img, :is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-logos img { filter: grayscale(1) brightness(0) invert(1); opacity: .7; }
[data-theme="dark"] .cms-logos li:hover img, :is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-logos li:hover img { filter: grayscale(1) brightness(0) invert(1); opacity: 1; }
/* A light background of its own keeps its logos as they are, dark theme or not. */
[data-theme="dark"] .cms-dk-D .cms-logos img, [data-theme="dark"] .cms-dk-D .cms-logos li:hover img { filter: none; }
.cms-logos span { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--muted); }

/* Columns: the layout's widths come in with the section; on phones they stack */
.cms-cols { display: grid; gap: var(--cols-gap, 32px); align-items: start; }
.cms-cols--gap-small { --cols-gap: 16px; }
.cms-cols--gap-large { --cols-gap: 56px; }
.cms-cols--middle { align-items: center; }
.cms-cols--bottom { align-items: end; }
.cms-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cms-col--card { padding: 24px; border: 1px solid var(--border); border-radius: var(--r-card, 16px); background: var(--card); box-shadow: var(--lift); }
.cms-col--soft { padding: 24px; border-radius: var(--r-card, 16px); background: var(--surface); }
.cms-col > .cms-h { margin: 0; }
.cms-h--medium { font-size: clamp(20px, 2.4vw, 24px); }
.cms-h--small { font-size: 18px; }
.cms-col > .cms-rich, .cms-col > .cms-btns { margin-top: 0; }
.cms-col > .cms-video { margin: 0; }
.cms-pic img { display: block; width: 100%; height: auto; border-radius: 14px; }
.cms-pic--icon svg { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.cms-colicon svg { display: block; width: 64px; height: 64px; }
.cms-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.cms-ticks li { display: flex; gap: 10px; }
.cms-ticks li::before { content: "✓"; flex: none; font-weight: 800; color: var(--ok); }
.cms-gap--small { height: 8px; }
.cms-gap--medium { height: 24px; }
.cms-gap--large { height: 56px; }
@media (max-width: 900px) { .cms-cols--n4 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 700px) {
  .cms-cols { grid-template-columns: minmax(0, 1fr) !important; }
  .cms-cols--rev { display: flex; flex-direction: column-reverse; }
}

/* Spacer */
.cms-spacer { display: flex; align-items: center; max-width: 1136px; margin: 0 auto; }
.cms-spacer--small { height: 24px; }
.cms-spacer--medium { height: 56px; }
.cms-spacer--large { height: 104px; }
.cms-spacer hr { flex: 1; border: 0; border-top: 1px solid var(--border); margin: 0; }

@media (max-width: 860px) {
  .cms-art--illus .illus { width: 90%; opacity: .3; }
  .cms-art--icon svg { width: 170px; height: 170px; opacity: .35; }
  .cms-banner { grid-template-columns: minmax(0, 1fr); }
  .cms-banner__art { max-width: 420px; }
  .cms-grid--3, .cms-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cms-sec { padding: 40px 16px; }
  .cms-sec:has(> .cms-spacer) { padding: 0 16px; }
  .cms-grid--2, .cms-grid--3, .cms-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .cms-cta { padding: 22px 18px; }
  .cms-count span { min-width: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .cms-btn, .cms-logos img { transition: none; }
  .cms-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════
   Round nine: slides, labels, line art, card styles and tabs, ratings, and
   the Statement, Picture and words, Pricing, Steps, Gallery and Message
   sections.
   ══════════════════════════════════════════ */
.cms-grid[hidden], .cms-tiers[hidden] { display: none; }
.cms-gal__more { margin: 28px 0 0; text-align: center; }
.cms-note { max-width: 760px; margin: 30px auto 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); text-align: center; text-wrap: balance; }

/* Banner: in the middle, words underlined in gold, slides that turn */
.cms-banner--center { grid-template-columns: minmax(0, 1fr); max-width: 840px; margin-left: auto; margin-right: auto; text-align: center; }
.cms-banner--center .cms-banner__lede { margin-left: auto; margin-right: auto; max-width: 620px; }
.cms-banner--center .cms-count, .cms-banner--center .cms-tags, .cms-banner--center .cms-dots { justify-content: center; }
.cms-uw { position: relative; white-space: nowrap; }
.cms-uw::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: .04em; height: .14em; border-radius: 99px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; animation: cmsUw .8s cubic-bezier(.32, 0, 0, 1) .6s forwards; }
@keyframes cmsUw { to { transform: scaleX(1); } }
.cms-slides { overflow: hidden; }
.cms-slides__track { display: flex; transition: transform .65s cubic-bezier(.32, 0, 0, 1); }
.cms-slide { flex: 0 0 100%; min-width: 0; padding: 0 8px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.cms-slide > * { transition: opacity .55s cubic-bezier(.22, .7, .3, 1), transform .55s cubic-bezier(.22, .7, .3, 1); }
.cms-slide:not(.is-on) > * { opacity: 0; transform: translateY(16px); }
.cms-slide > :nth-child(2) { transition-delay: .08s; }
.cms-dots { display: flex; gap: 8px; margin-top: 36px; }
.cms-dot { width: 9px; height: 9px; padding: 0; border: 0; color: inherit; border-radius: 99px; background: color-mix(in oklab, currentColor 35%, transparent); cursor: pointer; transition: width .25s, background-color .25s; }
.cms-dot:hover { background: color-mix(in oklab, currentColor 60%, transparent); }
.cms-dot.is-on { width: 26px; background: var(--gold); }
.cms-banner__lede { text-wrap: pretty; }

/* Labels: short words as pills; with a dot, as a banner's are */
.cms-tags { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cms-tags.cms-in, .cms-center .cms-tags { justify-content: center; }
.cms-tags.cms-in { margin-left: auto; margin-right: auto; }
.cms-tags li { padding: 7px 16px; border-radius: 99px; font-size: 13px; font-weight: 700; background: color-mix(in oklab, currentColor 10%, transparent); border: 1px solid color-mix(in oklab, currentColor 25%, transparent); }
.cms-tags--dot { margin-top: 38px; }
.cms-tags--dot li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: color-mix(in oklab, currentColor 8%, transparent); border-color: color-mix(in oklab, currentColor 22%, transparent); }
.cms-tags--dot li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* Line art at a section's two sides, in its text colour */
/* Art at the sides (M50): any section's, behind its content, a picture at
   each side (or the right mirroring the left), half off the edge; its size,
   how strongly it shows, and where it sits. Line art takes the text colour. */
.cms-sec:has(> .cms-side) { position: relative; overflow: hidden; }
.cms-sec:has(> .cms-side) > :not(.cms-side) { position: relative; z-index: 1; }
.cms-side { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--side-a, 1); }
.cms-side > span { position: absolute; top: 50%; width: var(--side-w); transform: translate(var(--side-x), -50%); }
.cms-side__l { left: 0; --side-x: -12%; }
.cms-side__r { right: 0; --side-x: 12%; }
.cms-side--top > span { top: 6%; transform: translate(var(--side-x), 0); }
.cms-side--bot > span { top: auto; bottom: 0; transform: translate(var(--side-x), 0); }
.cms-side--s { --side-w: 160px; }
.cms-side--m { --side-w: clamp(160px, 15vw, 240px); }
.cms-side--l { --side-w: 400px; }
.cms-side > span > :is(svg, img) { display: block; width: 100%; height: auto; }
.cms-side--flip > * { transform: scaleX(-1); }
.cms-side .d, .cms-side .arrow { fill: none; stroke: color-mix(in oklab, currentColor 42%, transparent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cms-side .acc { stroke: color-mix(in oklab, var(--cyan) 65%, white); }
.cms-side .arrow { stroke: var(--gold); stroke-width: 2.4; }
.cms-side .light { fill: var(--gold); animation: cmsLight 2.4s ease-in-out infinite; }
.cms-side .light:nth-of-type(2n) { animation-delay: 1.2s; }
@keyframes cmsLight { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
@media (max-width: 1280px) { .cms-side--l { --side-w: 270px; } }
@media (max-width: 900px) { .cms-side { display: none; } }

/* Features: art on top, in the middle, or a short bar; ticked lines; a button */
.cms-feat { display: flex; flex-direction: column; }
.cms-feat--top, .cms-feat--centre { padding: 30px 28px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.cms-feat--centre { padding: 34px 30px; text-align: center; align-items: center; }
.cms-feat--top:hover, .cms-feat--centre:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); border-color: color-mix(in oklab, var(--blue) 40%, var(--border)); }
.cms-feat--top.cms-feat--art, .cms-feat--centre.cms-feat--art { padding-right: 28px; min-height: 0; overflow: visible; }
.cms-feat--top .cms-feat__art, .cms-feat--centre .cms-feat__art { position: static; display: block; width: 58px; height: 58px; margin: 0 0 16px; opacity: 1; }
.cms-feat--centre .cms-feat__art { width: 76px; height: 76px; margin: 0 auto 18px; }
.cms-feat--top > b, .cms-feat--centre > b { font-size: 18px; }
.cms-feat--centre .cms-feat__body { margin-top: 10px; }
/* Four across, the cards keep a title on one line: a little less room at the sides and a step smaller. */
.cms-grid--4 > .cms-feat--top, .cms-grid--4 > .cms-feat--centre { padding-left: 18px; padding-right: 18px; }
.cms-grid--4 > .cms-feat--top > b, .cms-grid--4 > .cms-feat--centre > b { font-size: 17px; }
@media (max-width: 1180px) { .cms-grid--4:has(> .cms-feat--top), .cms-grid--4:has(> .cms-feat--centre) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cms-grid--4:has(> .cms-feat--top), .cms-grid--4:has(> .cms-feat--centre) { grid-template-columns: minmax(0, 1fr); } }
.cms-feat--top .cms-feat__body { margin: 8px 0 0; }
.cms-feat--bar { padding: 26px 24px; }
.cms-feat__bar { display: block; width: 34px; height: 4px; margin-bottom: 14px; border-radius: 2px; background: var(--gold-grad); }
.cms-feat--bar > b { margin-bottom: 2px; }
.cms-feat--bar .cms-feat__body { font-size: 14px; }
.cms-feat__pts { list-style: none; margin: 16px 0 22px; padding: 0; flex: 1; text-align: left; align-self: stretch; }
.cms-feat__pts li { position: relative; padding: 5px 0 5px 26px; font-size: 13.5px; color: var(--muted); border-bottom: 1px dashed color-mix(in oklab, var(--border) 60%, transparent); }
.cms-feat__pts li:last-child { border-bottom: 0; }
.cms-feat__pts li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in oklab, var(--gold) 28%, var(--card)); }
.cms-feat__pts li::after { content: ""; position: absolute; left: 6px; top: 12.5px; width: 6px; height: 4px; border-left: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(-45deg); }
.cms-feat__go { margin-top: auto; padding-top: 12px; align-self: stretch; }
.cms-feat__pts + .cms-feat__go { padding-top: 0; }
.cms-feat__go .cms-btns { margin-top: 0; }
.cms-feat__go .cms-btn:not(.cms-btn--link) { width: 100%; justify-content: center; }
.cms-feat--centre .cms-feat__go .cms-btns { justify-content: center; }

/* Tabs over a card grid */
.cms-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px 0 34px; }
.cms-tab { min-height: 44px; padding: 11px 22px; border: 1.5px solid var(--border); border-radius: 99px; background: var(--card); color: var(--ink); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
  transition: background-color .22s cubic-bezier(.22, .7, .3, 1), border-color .22s, color .22s, box-shadow .22s, transform .22s cubic-bezier(.34, 1.56, .64, 1); }
.cms-tab:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.cms-tab.is-on { background: var(--blue); border-color: var(--blue); color: var(--on-blue, #fff); box-shadow: 0 8px 18px -9px color-mix(in oklab, var(--blue) 80%, transparent); transform: translateY(-1px) scale(1.04); }
.cms-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[data-cms-pane]:not([hidden]) { animation: cmsPaneIn .42s cubic-bezier(.22, .7, .3, 1) both; }
@media (max-width: 620px) { .cms-tabs { gap: 8px; margin-bottom: 26px; } .cms-tab { min-height: 40px; padding: 10px 16px; font-size: 13px; } }
@keyframes cmsPaneIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Quotes: a rating, where it was said, and wide rows with the rating beside */
.cms-stars { display: inline-flex; gap: 3px; }
.cms-stars svg { width: 18px; height: 18px; fill: var(--gold); flex: none; }
.cms-quote__rate { display: flex; flex-direction: column; gap: 8px; }
.cms-quote__body { display: flex; flex-direction: column; gap: 12px; }
.cms-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.cms-quote__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--blue); text-decoration: none; }
.cms-quote__link::after { content: "\2197"; font-size: 13px; transition: transform .18s cubic-bezier(.22, .7, .3, 1); }
.cms-quote__link:hover::after { transform: translate(2px, -2px); }
[data-theme="dark"] .cms-quote__link { color: color-mix(in oklab, var(--blue) 55%, white); }
.cms-quote:has(.cms-quote__rate) blockquote::before { display: none; }
.cms-quotes--rows { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 940px; margin: 0 auto; }
.cms-quotes--rows .cms-quote { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: center; padding: 28px 32px; border-radius: 18px; box-shadow: var(--lift); transition: transform .2s, box-shadow .2s; }
.cms-quotes--rows .cms-quote:hover { transform: translateY(-3px); box-shadow: var(--lift-hi); }
.cms-quotes--rows .cms-quote:not(:has(.cms-quote__rate)) { grid-template-columns: minmax(0, 1fr); }
.cms-quotes--rows .cms-quote__rate { padding-right: 28px; border-right: 1px solid var(--border); }
.cms-quote__rl { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cms-quote__score { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); }
.cms-quotes--rows blockquote { font-style: italic; line-height: 1.7; text-wrap: pretty; }
.cms-quotes--rows figcaption b { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
@media (max-width: 680px) {
  .cms-quotes--rows .cms-quote { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 22px; }
  .cms-quotes--rows .cms-quote__rate { flex-direction: row; align-items: center; gap: 12px; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* Call to action, open: in the middle of its band, no card */
.cms-sec .cms-cta--open, :is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-cta--open { display: block; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.cms-cta--open .cms-h { margin-top: 8px; }
.cms-cta--open .cms-lede { margin: 16px auto 28px; max-width: 600px; }
.cms-cta--open .cms-btns { justify-content: center; margin-top: 0; }
.cms-sec .cms-cta--line, :is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-cta--line { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.cms-cta--line { flex-wrap: nowrap; gap: 24px 48px; }
.cms-cta--line > div:first-child { min-width: 0; max-width: 720px; }
.cms-cta--line .cms-btns { flex: none; }
@media (max-width: 760px) { .cms-cta--line { flex-wrap: wrap; } .cms-cta--line .cms-btns { width: 100%; flex-direction: column; } .cms-cta--line .cms-btn { justify-content: center; } }
/* A call to action's highlighted words (M223): the accent's colour, or a marker behind them. The underline is the Hero's (.cms-uw). */
.cms-hl--colour { color: var(--gold-deep); }
.cms-hl--marker { padding: 0 .08em; background: linear-gradient(transparent 58%, color-mix(in oklab, var(--gold) 55%, transparent) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-hl--colour { color: var(--gold); }
[data-theme="dark"] .cms-hl--marker, :is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-hl--marker { background: linear-gradient(transparent 72%, var(--gold) 72%, var(--gold) 90%, transparent 90%); }

/* Image, medium; a heading in a column with a small heading over it */
.cms-fig--medium { max-width: 880px; }
.cms-hgroup { display: flex; flex-direction: column; }
.cms-hgroup .cms-h { margin: 8px 0 0; }

/* Checklist marks: ringed ticks, or small squares */
.cms-ticks--ring { gap: 12px; }
.cms-ticks--ring li, .cms-ticks--square li { display: block; position: relative; }
.cms-ticks--ring li { padding-left: 30px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cms-ticks--ring li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in oklab, var(--gold) 22%, var(--card)); }
.cms-ticks--ring li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 7px; height: 4px; border-left: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(-45deg); }
.cms-ticks--square { gap: 0; }
.cms-ticks--square li { padding: 7px 0 7px 26px; font-size: 14.5px; color: var(--muted); }
.cms-ticks--square li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }

/* Statement: large words between gold quotation marks */
.cms-stmt__rule { width: 56px; height: 3px; margin: 0 auto 30px; border: 0; border-radius: 2px; background: var(--gold-grad); }
.cms-sec .cms-stmt .cms-kick { color: var(--gold-deep); }
.cms-stmt__q { position: relative; max-width: 780px; margin: 10px auto 0; padding: 0 8px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.4; color: var(--ink); text-wrap: balance; }
.cms-stmt__q::before, .cms-stmt__q::after { font-family: Georgia, "Times New Roman", serif; font-style: normal; font-weight: 700; color: var(--gold); line-height: 0; }
.cms-stmt__q::before { content: "\201C"; font-size: 1.7em; margin-right: .06em; vertical-align: -.32em; }
.cms-stmt__q::after { content: "\201D"; font-size: 1.7em; margin-left: .04em; vertical-align: -.55em; }
.cms-stmt__line { margin: 16px auto 0; max-width: 720px; }

/* Picture and words */
.cms-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.cms-row--left .cms-row__art { order: -1; }
.cms-row .cms-h { font-size: clamp(24px, 2.6vw, 30px); }
.cms-row .cms-lede { margin: 14px 0 18px; max-width: 480px; }
.cms-row .cms-btns { margin-top: 0; }
.cms-row__art { position: relative; display: flex; align-items: center; justify-content: center; }
.cms-row__art img { display: block; max-width: 100%; height: auto; border-radius: 14px; }
.cms-row__art--icon svg, .cms-row__art--illus svg { position: relative; z-index: 2; display: block; width: min(240px, 60%); height: auto; }
.cms-row__art--illus svg { width: 100%; }
.cms-row__art--card { min-height: 300px; padding: 40px; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(160deg, var(--surface) 0%, color-mix(in oklab, var(--blue) 10%, white) 100%); box-shadow: var(--lift); }
.cms-row__art--card::before { content: ""; position: absolute; z-index: 1; inset: 18px; border: 1.5px dashed color-mix(in oklab, var(--blue) 18%, white); border-radius: 14px; pointer-events: none; }
[data-theme="dark"] .cms-row__art--card { background: linear-gradient(160deg, var(--card) 0%, color-mix(in oklab, var(--blue) 22%, var(--surface)) 100%); }
[data-theme="dark"] .cms-row__art--card::before { border-color: color-mix(in oklab, var(--blue) 30%, transparent); }
.cms-row__label { position: absolute; z-index: 3; top: 22px; right: 22px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 99px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 800; box-shadow: var(--lift); }
/* On a dark band the label's ink would turn light on its light pill: there it is gold, written as gold buttons are. */
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-row__label { background: var(--gold-grad); color: var(--on-gold); border-color: transparent; }
@media (max-width: 960px) { .cms-row { grid-template-columns: minmax(0, 1fr); gap: 30px; } .cms-row__art { order: -1; } }

/* Pricing */
.cms-tiers { display: grid; gap: 24px; max-width: 1040px; margin: 0 auto; align-items: stretch; }
.cms-tiers--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.cms-tiers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-tiers--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
.cms-tier { position: relative; display: flex; flex-direction: column; padding: 30px 28px 32px; border: 1px solid var(--border); border-radius: var(--r-card, 18px); background: var(--card); transition: transform .2s, box-shadow .2s, border-color .2s; }
.cms-tier:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); }
.cms-tier--top { border-color: color-mix(in oklab, var(--gold) 60%, var(--border)); box-shadow: 0 18px 40px -26px color-mix(in oklab, var(--gold) 80%, transparent); }
.cms-tier__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: var(--gold-grad); color: var(--on-gold); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 16px -10px color-mix(in oklab, var(--gold) 85%, transparent); }
.cms-tier__name { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
[data-theme="dark"] .cms-tier__name { color: color-mix(in oklab, var(--blue) 55%, white); }
.cms-tier__price { display: block; margin: 12px 0 2px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; color: var(--ink); }
.cms-tier__unit { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cms-tier__text { margin: 16px 0 22px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.cms-tier .cms-feat__pts { margin-top: 0; }
.cms-tier__go { margin-top: auto; }
.cms-tier__go .cms-btns { margin-top: 0; }
.cms-tier__go .cms-btn { width: 100%; justify-content: center; }
@media (max-width: 960px) { .cms-tiers { grid-template-columns: minmax(0, 1fr) !important; max-width: 440px; } }

/* Steps: numbered, on a line */
.cms-steps { position: relative; display: grid; gap: 18px; max-width: 920px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.cms-steps::before { content: ""; position: absolute; left: 39px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(180deg, var(--gold), color-mix(in oklab, currentColor 22%, transparent)); }
.cms-step { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 22px; align-items: start; }
.cms-step__n { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; margin: 13px; border-radius: 50%; background: var(--gold-grad); color: var(--on-gold); font-size: 13px; font-weight: 900; box-shadow: 0 7px 14px -10px rgba(255, 190, 68, .85); }
.cms-step__c { min-height: 80px; padding: 20px 24px 21px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: 0 8px 18px -16px rgba(0, 0, 0, .65); box-sizing: border-box; }
.cms-step__c h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink); }
.cms-step__c p { margin: 0; max-width: 680px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-step__c { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-step__c h3 { color: #fff; }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-step__c p { color: #C6D4F4; }
@media (max-width: 620px) {
  .cms-steps { gap: 14px; }
  .cms-steps::before { left: 25px; }
  .cms-step { grid-template-columns: 52px 1fr; gap: 14px; }
  .cms-step__n { width: 42px; height: 42px; margin: 11px 5px; font-size: 11.5px; }
  .cms-step__c { min-height: 64px; padding: 17px 18px; }
}

/* Steps' looks (M220): an icon in the marker, a link, across with the count, a timeline with dates */
.cms-step--icon .cms-step__n { background: var(--card); border: 2px solid var(--gold); box-shadow: none; }
.cms-step__n svg, .cms-step__n img { width: 26px; height: 26px; }
.cms-step__go { display: inline-flex; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--gold-deep); text-decoration: none; }
.cms-step__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.cms-step__go:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.cms-step__when { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) :is(.cms-step__go, .cms-step__when) { color: var(--gold); }
.cms-steps__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.cms-steps__top .cms-head { margin: 0; text-align: left; }
.cms-steps__count { display: flex; align-items: center; gap: 12px; flex: none; }
.cms-steps__count i { width: 34px; height: 1px; background: currentColor; opacity: .35; }
.cms-steps__count span { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.cms-steps__count b { font-family: var(--font-display); font-size: clamp(56px, 7vw, 84px); font-weight: 800; line-height: .8; letter-spacing: -.03em; color: color-mix(in oklab, var(--ink) 12%, transparent); }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-steps__count span { color: #fff; }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-steps__count b { color: rgba(255, 255, 255, .16); }
.cms-steps--across { max-width: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
.cms-steps--across::before { left: 27px; right: 27px; top: 26px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--gold), color-mix(in oklab, currentColor 22%, transparent)); }
.cms-steps--across .cms-step { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }
.cms-steps--across .cms-step__n { margin: 0; }
.cms-steps--across .cms-step__c { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:is(.cms-sec--band, :root:not([data-theme="dark"]) .cms-ink-L, [data-theme="dark"] .cms-dk-L) .cms-steps--across .cms-step__c { background: none; }
.cms-steps--timeline { max-width: 880px; gap: 22px; }
.cms-steps--timeline::before { left: 50%; top: 12px; bottom: 12px; transform: translateX(-1px); }
.cms-steps--timeline .cms-step { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 22px; align-items: center; }
.cms-steps--timeline .cms-step__n { grid-column: 2; grid-row: 1; margin: 0; }
.cms-steps--timeline .cms-step__c { grid-column: 1; grid-row: 1; min-height: 0; }
.cms-steps--timeline .cms-step__when { grid-column: 3; grid-row: 1; justify-self: start; }
.cms-steps--timeline .cms-step:nth-child(even) .cms-step__c { grid-column: 3; }
.cms-steps--timeline .cms-step:nth-child(even) .cms-step__when { grid-column: 1; justify-self: end; }
/* A year with its picture (M285): the date large over the picture, across the line from the words. */
.cms-steps--timeline .cms-step--pic { gap: 40px; padding: 10px 0; }
.cms-steps--timeline .cms-step__side { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.cms-steps--timeline .cms-step:nth-child(even) .cms-step__side { grid-column: 1; align-items: flex-end; text-align: right; }
.cms-steps--timeline .cms-step--pic .cms-step__when { font: 300 clamp(36px, 4.4vw, 54px)/1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--blue); }
.cms-steps--timeline .cms-step__side picture, .cms-steps--timeline .cms-step__pic { display: block; width: 100%; }
.cms-steps--timeline .cms-step__pic, .cms-steps--timeline .cms-step__side img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--r-card, 10px); }
.cms-steps--timeline .cms-step--pic .cms-step__c { background: none; border: 0; box-shadow: none; padding: 0; }
.cms-steps--timeline .cms-step--pic:nth-child(odd) .cms-step__c { text-align: right; }
@media (max-width: 860px) {
  .cms-steps__top { display: block; }
  .cms-steps__count { display: none; }
  .cms-steps--across { grid-auto-flow: row; gap: 22px; }
  .cms-steps--across::before { left: 26px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; background: linear-gradient(180deg, var(--gold), color-mix(in oklab, currentColor 22%, transparent)); }
  .cms-steps--across .cms-step { grid-template-columns: 54px minmax(0, 1fr); gap: 18px; }
  .cms-steps--across .cms-step__c { padding-top: 4px; }
  .cms-steps--timeline::before { left: 26px; transform: none; }
  .cms-steps--timeline .cms-step, .cms-steps--timeline .cms-step:nth-child(even) { grid-template-columns: 54px minmax(0, 1fr); gap: 6px 18px; align-items: start; }
  .cms-steps--timeline .cms-step__n { grid-column: 1; grid-row: 1 / span 2; }
  .cms-steps--timeline .cms-step__when, .cms-steps--timeline .cms-step:nth-child(even) .cms-step__when { grid-column: 2; grid-row: 1; justify-self: start; padding-top: 2px; }
  .cms-steps--timeline .cms-step__c, .cms-steps--timeline .cms-step:nth-child(even) .cms-step__c { grid-column: 2; grid-row: 2; }
  .cms-steps--timeline .cms-step:not(:has(.cms-step__when)) .cms-step__c { grid-row: 1 / span 2; }
  .cms-steps--timeline .cms-step__side, .cms-steps--timeline .cms-step:nth-child(even) .cms-step__side { grid-column: 2; grid-row: 1; align-items: flex-start; text-align: left; }
  .cms-steps--timeline .cms-step--pic:nth-child(odd) .cms-step__c { text-align: left; }
}
@media (max-width: 620px) {
  .cms-steps--across::before, .cms-steps--timeline::before { left: 20px; }
  .cms-steps--across .cms-step, .cms-steps--timeline .cms-step, .cms-steps--timeline .cms-step:nth-child(even) { grid-template-columns: 42px minmax(0, 1fr); }
  .cms-steps--across .cms-step__n, .cms-steps--timeline .cms-step__n { margin: 0; }
}

/* Gallery */
.cms-gal { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 22px; max-width: 1100px; }
.cms-gal--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-gal--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-gal--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cms-gal__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--card); text-decoration: none; box-shadow: var(--lift); transition: transform .2s, box-shadow .2s, border-color .2s; }
a.cms-gal__card:hover { transform: translateY(-5px); box-shadow: var(--lift-hi); border-color: color-mix(in oklab, var(--blue) 45%, var(--border)); }
.cms-gal__shot { display: block; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--border); }
.cms-gal__shot img { display: block; width: 100%; height: auto; transition: transform .4s cubic-bezier(.22, .7, .3, 1); }
a.cms-gal__card:hover .cms-gal__shot img { transform: scale(1.04); }
.cms-gal__foot { display: flex; align-items: center; gap: 10px; padding: 15px 16px; }
.cms-gal__name { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.cms-gal__go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: var(--blue); background: color-mix(in oklab, var(--blue) 12%, transparent); transition: background-color .2s, color .2s; }
.cms-gal__go svg { width: 16px; height: 16px; }
a.cms-gal__card:hover .cms-gal__go { background: var(--blue); color: var(--on-blue, #fff); }
[data-theme="dark"] .cms-gal__go { color: color-mix(in oklab, var(--blue) 55%, white); }
@media (max-width: 900px) { .cms-gal--3, .cms-gal--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cms-gal { gap: 14px; } .cms-gal__foot { padding: 12px; } .cms-gal__name { font-size: 13px; } }

/* Message: a person's words beside their picture */
.cms-msg { position: relative; display: grid; grid-template-columns: 380px 1fr; max-width: 980px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.cms-msg__pic { position: relative; min-height: 100%; overflow: hidden; background: var(--gold-grad); }
.cms-msg__ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 72px; color: var(--on-gold); }
.cms-msg__pic img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cms-msg__body { position: relative; padding: 52px 48px 44px; }
.cms-msg__body::before { content: "\201C"; position: absolute; top: 22px; left: 44px; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 76px; line-height: 1; color: color-mix(in oklab, var(--gold) 82%, transparent); pointer-events: none; }
.cms-msg__body .cms-kick { position: relative; margin: 36px 0 16px; }
.cms-msg__q { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; }
.cms-msg__q p { margin: 0; font-size: 16px; line-height: 1.7; font-style: italic; color: var(--ink); }
.cms-msg__sign { display: flex; flex-direction: column; gap: 3px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.cms-msg__sign b { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink); }
.cms-msg__sign span { color: var(--muted); }
.cms-msg__sign small { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--blue); }
[data-theme="dark"] .cms-msg__sign small { color: color-mix(in oklab, var(--blue) 55%, white); }
@media (max-width: 640px) {
  .cms-msg { grid-template-columns: minmax(0, 1fr); }
  .cms-msg__pic { aspect-ratio: 5 / 4; min-height: 0; }
  .cms-msg__pic img { object-position: center 22%; }
  .cms-msg__body { padding: 44px 26px 34px; }
  .cms-msg__body::before { left: 26px; }
  .cms-msg__q p { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cms-uw::after { animation: none; transform: scaleX(1); }
  .cms-slides__track, .cms-slide > *, .cms-tab, .cms-tier, .cms-gal__card, .cms-gal__shot img, .cms-feat, .cms-quote { transition: none; }
  .cms-side .light, [data-cms-pane]:not([hidden]) { animation: none; }
}

/* ── The Hero (M49): five styles, a height, and slides that slide or fade,
   each whole, with arrows if you like. ── */
.cms-hero { position: relative; }
.cms-hero--split .cms-hero__one, .cms-hero--split .cms-slide { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 36px; align-items: center; }
.cms-hero--split:not(.cms-hero--art) { max-width: 820px; }
.cms-hero--split:not(.cms-hero--art) .cms-hero__one, .cms-hero--split:not(.cms-hero--art) .cms-slide { grid-template-columns: minmax(0, 1fr); }
.cms-hero--centre .cms-banner__art { margin: 30px auto 0; max-width: 520px; }
.cms-hero--minimal { max-width: 860px; }
.cms-hero--minimal .cms-banner__title { font-size: clamp(26px, 3.4vw, 40px); }
.cms-hero--h-tall, .cms-hero--h-screen { display: flex; flex-direction: column; justify-content: center; }
.cms-hero--h-tall { min-height: min(560px, 72vh); }
.cms-hero--h-screen { min-height: calc(100vh - 220px); }
/* A picture behind the words, one for each slide, turning with them. */
.cms-sec:has(> .cms-hero__bgs) { position: relative; overflow: hidden; }
.cms-sec:has(> .cms-hero__bgs) > .cms-in { position: relative; z-index: 1; }
.cms-sec > .cms-hero__bgs.cms-hero__bgs { position: absolute; inset: 0; z-index: 0; }
.cms-hero__bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .8s ease; }
.cms-hero__bg.is-on { opacity: 1; }
.cms-hero__bgs:not(.cms-hero__bgs--card)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(13, 24, 48, .5), rgba(13, 24, 48, .68)); }
.cms-sec .cms-hero--behind.cms-hero--behind { color: #fff; --muted: rgba(255, 255, 255, .85); --ink: #fff; }
.cms-sec .cms-hero--behind.cms-hero--behind .cms-h { color: #fff; }
.cms-sec .cms-hero--behind.cms-hero--behind .cms-banner__kick { color: var(--gold); }
/* The words on a card, over the picture: the card's own colours, whatever
   the section's band says about the words around it. */
.cms-hero--card { display: flex; align-items: center; }
.cms-hero--card > .cms-hero__card { flex: none; width: min(540px, 100%); min-width: 0; }
/* Scoped under the section, so they outrank a band's light words (one of its
   selectors weighs four classes). */
.cms-sec .cms-hero .cms-hero__card.cms-hero__card { padding: 34px 36px; border-radius: 18px; background: var(--card); color: var(--text); box-shadow: 0 24px 60px rgba(8, 16, 32, .28); --ink: var(--text); --muted: color-mix(in oklab, var(--text) 72%, transparent); }
.cms-sec .cms-hero .cms-hero__card.cms-hero__card .cms-h { color: var(--text); }
.cms-sec .cms-hero .cms-hero__card.cms-hero__card .cms-banner__kick { color: var(--blue); }
.cms-sec .cms-hero .cms-hero__card.cms-hero__card .cms-banner__lede { color: color-mix(in oklab, var(--text) 72%, transparent); }
.cms-sec .cms-hero .cms-hero__card.cms-hero__card :is(.cms-btn--ghost, .cms-btn--link) { color: var(--blue); }
.cms-sec .cms-hero .cms-hero__card.cms-hero__card :is(.cms-dot, .cms-tags li) { color: var(--text); }
.cms-hero__card .cms-btns { flex-wrap: wrap; }
/* Fading, one slide over the next, rather than sliding. */
.cms-slides--fade .cms-slides__track { display: grid; transform: none !important; }
.cms-slides--fade .cms-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.cms-slides--fade .cms-slide.is-on { opacity: 1; visibility: visible; }
.cms-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0 0 3px; border: 1px solid color-mix(in oklab, currentColor 30%, transparent); border-radius: 50%; background: color-mix(in oklab, currentColor 8%, transparent); color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.cms-arrow:hover { background: color-mix(in oklab, currentColor 16%, transparent); }
.cms-arrow--prev { left: -12px; }
.cms-arrow--next { right: -12px; }
@media (max-width: 760px) {
  .cms-hero--split .cms-hero__one, .cms-hero--split .cms-slide { grid-template-columns: minmax(0, 1fr); }
  .cms-hero__card { padding: 24px 22px; }
  .cms-arrow { display: none; }
  .cms-hero--h-screen { min-height: calc(100vh - 160px); }
}
@media (prefers-reduced-motion: reduce) {
  .cms-hero__bg, .cms-slides--fade .cms-slide { transition: none; }
}

/* The Form section (the forms round, M131): a card in the site's look, fields one per row, each saying under it what is wrong. */
.cms-formwrap { max-width: 600px; margin-inline: auto; }
.cms-formwrap .cms-h { margin-bottom: 4px; }
/* A Form with a column beside it (M163): the form in a card, and the theme's drawing, ticked lines and a link at its side. */
.cms-formside { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 18px; align-items: start; max-width: 1136px; }
.cms-formside > .cms-formwrap { max-width: none; margin: 0; }
.cms-formside__aside { display: flex; flex-direction: column; gap: 12px; }
.cms-formside__art { overflow: hidden; padding: 18px 16px 6px; border-radius: 14px; background: var(--band); box-shadow: var(--lift); }
.cms-formside__art .illus, .cms-formside__art > svg { display: block; width: 100%; height: auto; max-height: 240px; margin: 0 auto; }
.cms-formside__box { padding: 16px 18px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--lift); }
.cms-formside__box b { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cms-formside__box ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cms-formside__box li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cms-formside__box li svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--ok, #15803D); }
.cms-formside__link { padding: 12px 16px; border: 1px dashed color-mix(in oklab, var(--gold) 50%, var(--border)); border-radius: 14px; font-size: 13px; font-weight: 800; color: var(--ink); text-decoration: none; }
.cms-formside__link:hover { border-style: solid; }
/* A banner in the column: a call to do something first, on the brand's band. */
.cms-formside__promo { position: relative; overflow: hidden; padding: 20px 20px 22px; border-radius: 14px; background: var(--band); color: #fff; box-shadow: var(--lift); }
.cms-formside__promo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 100% 0%, color-mix(in srgb,var(--gold) 22%,transparent), transparent 60%); }
.cms-formside__promo > * { position: relative; z-index: 1; }
.cms-formside__pk { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.cms-formside__pt { display: block; font: 800 20px/1.25 var(--font-display); color: #fff; }
.cms-formside__promo p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .84); }
.cms-formside__pb { display: flex; justify-content: center; width: 100%; margin-top: 16px; }
@media (max-width: 860px) { .cms-formside { grid-template-columns: minmax(0, 1fr); } .cms-formside__aside:has(.cms-formside__promo) { display: contents; } .cms-formside__promo { order: -1; } }
.cms-form, .cms-form__done { margin: 22px 0 0; padding: 26px 28px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card, 16px); box-shadow: 0 18px 34px -20px rgba(17, 34, 64, .35); color: var(--ink); text-align: left; }
.cms-form { display: grid; gap: 14px; }
.cms-form__f { display: grid; gap: 6px; min-width: 0; }
.cms-form__l { font-size: 13px; font-weight: 800; color: var(--ink); }
.cms-form__l em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 6px; }
.cms-form__h { font-size: 12.5px; color: var(--muted); margin-top: -2px; }
.cms-form__in { display: block; width: 100%; font: inherit; font-size: 14px; padding: 10px 13px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-field, 10px); }
.cms-form__in:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 22%, transparent); }
textarea.cms-form__in { resize: vertical; min-height: 118px; line-height: 1.5; }
.cms-form__f.is-bad .cms-form__in { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.cms-form__err { font-size: 13px; font-weight: 700; color: color-mix(in oklab, #DC2626 78%, var(--ink)); }
.cms-form__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-form__opts .cms-form__opt { position: relative; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.cms-form__opts .cms-form__opt input { position: absolute; opacity: 0; pointer-events: none; }
.cms-form__opts .cms-form__opt:has(input:checked) { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 14%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 18%, transparent); }
.cms-form__opts .cms-form__opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.cms-form__copy { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.cms-form__copy input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); }
.cms-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cms-form__problem { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, #DC2626 10%, var(--card)); border: 1px solid color-mix(in oklab, #DC2626 35%, var(--card)); color: color-mix(in oklab, #DC2626 70%, var(--ink)); font-size: 13.5px; font-weight: 700; }
.cms-form__send { width: 100%; justify-content: center; border: 0; cursor: pointer; font: inherit; font-weight: 800; margin-top: 4px; }
.cms-form__send[disabled] { opacity: .6; cursor: default; }
.cms-form__done { text-align: center; padding: 40px 28px 34px; }
.cms-form__done::before { content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: #E7F5EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 26px no-repeat; }
.cms-form__done b { display: block; font-family: var(--font-display, inherit); font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--ink); max-width: 44ch; margin: 0 auto; }
@media (max-width: 560px) { .cms-form, .cms-form__done { padding: 22px 18px; } }

/* Contact details (M134): the email, phone and hours from Settings › Company, a card each. */
.cms-reach { display: grid; gap: 18px; margin-top: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-reach--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.cms-reach--1 { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
.cms-reach__c { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card, 16px); box-shadow: var(--lift); text-decoration: none; color: inherit; transition: transform .3s, border-color .3s; }
a.cms-reach__c:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--gold) 45%, var(--border)); }
.cms-reach__ic { width: 44px; height: 44px; flex: none; }
.cms-reach__ic svg { width: 44px; height: 44px; display: block; }
.cms-reach__c > span:last-child { min-width: 0; }
.cms-reach__c b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.cms-reach__c > span:last-child > span { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 760px) { .cms-reach, .cms-reach--2 { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cms-reach__c { transition: none; } a.cms-reach__c:hover { transform: none; } }

/* The Core store sections (M135): the storefront's own cards, with a heading and the Grid and List switch in one row.
   The section gives the room around them, so the catalogue's own is taken away. */
.cms-sec .listing .psect { padding: 0; }
.cms-sec .listing .psect__title--sub { margin-top: 0; }
.core-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.core-head .psect__lede { margin-bottom: 0; }

/* ── Round B: a section's shape and motion (M136 to M141) ── */

/* Edges (M136): the neighbour's background shows through a shape, drawn over
   this section's own; the room they take is kept clear of its content. */
.cms-sec--edge { position: relative; }
.cms-sec > .cms-edge.cms-edge { position: absolute; left: 0; right: 0; z-index: 2; height: var(--edge-h); background: var(--edge-bg); pointer-events: none; }
[data-theme="dark"] .cms-sec > .cms-edge.cms-edge { background: var(--edge-bg-dk, var(--edge-bg)); }
.cms-edge--t { top: -1px; }
.cms-edge--b { bottom: -1px; transform: scaleY(-1); }
.cms-edge--t.cms-edge--flip { transform: scaleX(-1); }
.cms-edge--b.cms-edge--flip { transform: scale(-1, -1); }
.cms-edge--s { --edge-h: 40px; } .cms-edge--m { --edge-h: 72px; } .cms-edge--l { --edge-h: 112px; }
.cms-sec--edge::before, .cms-sec--edge::after { display: block; }
.cms-edge-t-s::before { content: ""; height: 40px; } .cms-edge-t-m::before { content: ""; height: 72px; } .cms-edge-t-l::before { content: ""; height: 112px; }
.cms-edge-b-s::after { content: ""; height: 40px; } .cms-edge-b-m::after { content: ""; height: 72px; } .cms-edge-b-l::after { content: ""; height: 112px; }
@media (max-width: 640px) {
  .cms-edge--s { --edge-h: 24px; } .cms-edge--m { --edge-h: 44px; } .cms-edge--l { --edge-h: 68px; }
  .cms-edge-t-s::before, .cms-edge-b-s::after { height: 24px; } .cms-edge-t-m::before, .cms-edge-b-m::after { height: 44px; } .cms-edge-t-l::before, .cms-edge-b-l::after { height: 68px; }
}

/* A frame (M137): a line, or a card with a soft shadow, rounded by the look. It
   sits inside the page's column, whatever the section's width says. */
.cms-sec.cms-frame { position: relative; overflow: hidden; width: auto; max-width: 1180px; margin: 20px auto; border: 1px solid var(--border); border-radius: var(--r-card, 18px); }
.cms-frame--card { box-shadow: var(--lift-hi, 0 18px 40px -24px rgba(17, 34, 64, .35)); }
@media (max-width: 1224px) { .cms-sec.cms-frame { margin-left: 22px; margin-right: 22px; } }
@media (max-width: 640px) { .cms-sec.cms-frame { margin: 14px 12px; } }

/* As tall as the screen (M137), its content at the top, the middle or the bottom.
   The small viewport unit keeps it clear of a phone browser's bars. */
.cms-sec.cms-tall { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.cms-sec.cms-tall > .cms-in { width: 100%; }
.cms-tall--t { justify-content: flex-start; }
.cms-tall--b { justify-content: flex-end; }

/* Shown on (M140): a size left off skips the section there. */
@media (min-width: 1025px) { .cms-off-d { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .cms-off-t { display: none !important; } }
@media (max-width: 640px) { .cms-off-p { display: none !important; } }

/* Picture and words, words first on phones (M140). */
@media (max-width: 960px) { .cms-row--pwords .cms-row__art { order: 0; } }

/* Carousels (M139): a grid's cards in one row, so many at once for each screen.
   The track is the grid itself, so its cards look as they always do. */
.cms-car { position: relative; --car-n: var(--car-d, 3); --car-gap: 16px; }
.cms-car:has(.cms-gal) { --car-gap: 22px; }
@media (max-width: 1024px) { .cms-car { --car-n: var(--car-t, 2); } }
@media (max-width: 640px) { .cms-car { --car-n: var(--car-p, 1); } }
/* Its slides in one row never make the page wider: the view takes the width it is given. */
.cms-car__view { overflow: hidden; margin: -12px; padding: 12px; contain: inline-size; }
.cms-car .cms-car__track { position: relative; display: flex; flex-wrap: nowrap; gap: var(--car-gap); max-width: none; transition: transform .6s cubic-bezier(.32, 0, 0, 1); touch-action: pan-y; }
.cms-car .cms-car__track > * { flex: 0 0 calc((100% - (var(--car-n) - 1) * var(--car-gap)) / var(--car-n)); min-width: 0; }
.cms-car .cms-logos.cms-car__track { justify-content: flex-start; }
.cms-car .cms-logos.cms-car__track > li { display: flex; justify-content: center; }
.cms-car__arrow.cms-arrow { top: 50%; }
.cms-car__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.cms-car__dots:empty { display: none; }

/* A scrolling strip of logos (M139): two copies, moving by one copy's width. */
.cms-strip { overflow: hidden; contain: inline-size; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cms-strip__run { display: flex; width: max-content; animation: cms-strip var(--strip-s, 40s) linear infinite; }
.cms-strip--steady { --strip-s: 24s; }
.cms-strip .cms-logos { flex-wrap: nowrap; padding-right: 40px; }
.cms-strip--pause:hover .cms-strip__run { animation-play-state: paused; }
@keyframes cms-strip { to { transform: translateX(-50%); } }

/* The Hero's slow zoom (M139): a gentle push in while each slide shows. */
.cms-banner__art--upload { overflow: hidden; }
@keyframes cms-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.cms-hero__bgs--zoom .cms-hero__bg.is-on, .cms-hero--zoom :is(.cms-slide.is-on, .cms-hero__one) .cms-banner__art--upload img { animation: cms-zoom 12s ease-out forwards; }

/* Coming in (M141): hidden only once public.js has said motion is on, so a page
   without script, or a visitor who asks for less motion, sees it all at once. */
.cms-motion [data-cms-in]:not(.is-in):not(.cms-in--stagger) > :not(style, .cms-edge, .cms-par, .cms-art, .cms-side, .cms-hero__bgs),
.cms-motion .cms-in--stagger[data-cms-in]:not(.is-in) :is(.cms-head, .cms-logos__t, .cms-feat, .cms-quote, .cms-gal > li, .cms-logos > li, .cms-step, .cms-tier, .cms-col, .cms-faq__i, .cms-reach__c) { opacity: 0; }
:is(.cms-motion [data-cms-in].is-in, [data-cms-in].is-play):not(.cms-in--stagger) > :not(style, .cms-edge, .cms-par, .cms-art, .cms-side, .cms-hero__bgs),
:is(.cms-motion [data-cms-in].is-in, [data-cms-in].is-play).cms-in--stagger :is(.cms-head, .cms-logos__t, .cms-feat, .cms-quote, .cms-gal > li, .cms-logos > li, .cms-step, .cms-tier, .cms-col, .cms-faq__i, .cms-reach__c) {
  animation: var(--in-a) var(--in-s, .8s) cubic-bezier(.22, .7, .3, 1) both; animation-delay: calc(var(--in-i, 0) * 90ms);
}
[data-cms-in="fade"] { --in-a: cms-in-fade; } [data-cms-in="rise"] { --in-a: cms-in-rise; } [data-cms-in="zoom"] { --in-a: cms-in-zoom; }
.cms-in--quick { --in-s: .45s; }
@keyframes cms-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cms-in-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes cms-in-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* A heading line by line (M341): each word in a mask of its own, rising with its line. */
.cms-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.cms-w > span { display: inline-block; }
.cms-motion [data-cms-lines]:not(.is-in) .cms-w > span { transform: translateY(112%); }
:is(.cms-motion [data-cms-lines].is-in, [data-cms-lines].is-play) .cms-w > span { animation: cms-line .8s cubic-bezier(.2, .75, .15, 1) both; animation-delay: calc(var(--ln, 0) * 130ms); }
@keyframes cms-line { from { transform: translateY(112%); } to { transform: none; } }

/* Cards that slide sideways (M340): the stage holds the window's height under a header
   that stays at the top, and the row of cards travels inside it. */
.cms-sec.cms-rail--hold { padding: 0; }
.cms-rail--hold > .cms-rail__stage { position: sticky; top: var(--hold-top, 0px); height: calc(100vh - var(--hold-top, 0px)); display: flex; flex-direction: column; justify-content: center; padding: 0 22px; overflow: hidden; }
.cms-rail--hold .cms-rail__track { display: flex !important; flex-wrap: nowrap !important; width: max-content; max-width: none; gap: 24px; will-change: transform; }
.cms-rail--hold .cms-rail__track > * { flex: 0 0 clamp(260px, 26vw, 340px); width: auto; max-width: none; margin: 0; }
.cms-rail--still .cms-rail__bar { display: none; }
.cms-rail__bar { width: 100%; max-width: 1136px; height: 3px; margin: 28px auto 0; border-radius: 3px; background: color-mix(in oklab, currentColor 14%, transparent); overflow: hidden; }
.cms-rail__bar i { display: block; height: 100%; width: calc(100% * var(--rail-p, 0)); min-width: 4%; border-radius: 3px; background: var(--blue, currentColor); }
.cms-rail--swipe .cms-rail__track { display: flex !important; flex-wrap: nowrap !important; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.cms-rail--swipe .cms-rail__track > * { flex: 0 0 min(78%, 320px); width: auto; max-width: none; margin: 0; scroll-snap-align: start; }

/* Parallax (M141): the picture behind is a layer taller than the section, which public.js moves. */
.cms-sec[data-cms-par] { position: relative; overflow: hidden; }
.cms-sec > .cms-par { position: absolute; left: 0; right: 0; top: -30%; bottom: -30%; z-index: 0; will-change: transform; }
.cms-sec[data-cms-par] > :not(.cms-par, .cms-hero__bgs, .cms-edge, style) { position: relative; z-index: 1; }
.cms-sec[data-cms-par] > .cms-hero__bgs.cms-hero__bgs { top: -30%; bottom: -30%; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .cms-car .cms-car__track { transition: none; }
  .cms-strip { -webkit-mask-image: none; mask-image: none; }
  .cms-strip__run { animation: none; width: auto; }
  .cms-strip .cms-logos { flex-wrap: wrap; padding-right: 0; }
  .cms-strip .cms-logos[aria-hidden] { display: none; }
  .cms-hero__bgs--zoom .cms-hero__bg.is-on, .cms-hero--zoom .cms-banner__art--upload img { animation: none; }
  .cms-sec > .cms-par, .cms-sec[data-cms-par] > .cms-hero__bgs.cms-hero__bgs { top: 0; bottom: 0; transform: none !important; }
}

/* The Divider (M138): a line, with words or an icon in the middle if you like. */
.cms-sec:has(> .cms-div) { padding-top: 28px; padding-bottom: 28px; }
.cms-sec:has(> .cms-div--w-edge) { padding-left: 0; padding-right: 0; }
.cms-div { --div-c: var(--border); display: flex; align-items: center; gap: 16px; max-width: 1136px; margin: 0 auto; }
.cms-div--w-short { max-width: 240px; }
.cms-div--w-edge { max-width: none; }
.cms-div--c-text { --div-c: color-mix(in oklab, var(--ink) 45%, transparent); }
.cms-div--c-accent { --div-c: var(--blue); }
.cms-div__l { flex: 1; height: 0; border-top: 1.5px solid var(--div-c); }
.cms-div--dashed .cms-div__l { border-top-style: dashed; }
.cms-div--dotted .cms-div__l { border-top: 3px dotted var(--div-c); }
.cms-div--double .cms-div__l { border-top: 5px double var(--div-c); }
.cms-div--fading .cms-div__l { height: 1.5px; border: 0; background: linear-gradient(90deg, transparent, var(--div-c)); }
.cms-div--fading .cms-div__l:only-child { background: linear-gradient(90deg, transparent, var(--div-c) 30%, var(--div-c) 70%, transparent); }
.cms-div--fading .cms-div__l:last-child:not(:only-child) { background: linear-gradient(90deg, var(--div-c), transparent); }
.cms-div--wavy .cms-div__l { height: 8px; border: 0; background: var(--div-c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4q6-6 12 0t12 0' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 50% / 24px 8px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4q6-6 12 0t12 0' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 50% / 24px 8px repeat-x; }
.cms-div__words { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cms-div__icon { display: flex; }
.cms-div__icon :is(svg, img) { display: block; width: 30px; height: 30px; }

/* ── A video or a slideshow behind a section (M142) ── */
.cms-sec--layer { position: relative; overflow: hidden; }
.cms-sec--layer > :not(.cms-bgv, .cms-bgs, .cms-par, .cms-edge, .cms-play--at, .cms-player, style) { position: relative; z-index: 1; }
.cms-sec > .cms-bgv, .cms-sec > .cms-bgs { position: absolute; inset: 0; z-index: 0; }
.cms-bgv video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cms-bgv::after, .cms-bgs::after { content: ""; position: absolute; inset: 0; background: var(--veil, rgba(13, 24, 48, .45)); }
.cms-bgs__i { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1.2s ease; }
.cms-bgs__i.is-on { opacity: 1; }
.cms-sec[data-cms-par] > :is(.cms-bgv, .cms-bgs) { top: -30%; bottom: -30%; will-change: transform; }

/* The play button: a round button in its colour, still, pulsing or glowing, with words beside it if you like. */
.cms-play { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.cms-play b { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--pc); color: var(--pi); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6); transition: transform .2s; }
.cms-play:hover b { transform: scale(1.06); }
.cms-play:focus-visible { outline: none; }
.cms-play:focus-visible b { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--pc); }
.cms-play svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.cms-play--pulse b::before, .cms-play--pulse b::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pc); animation: cms-pulse 2.2s ease-out infinite; }
.cms-play--pulse b::after { animation-delay: 1.1s; }
@keyframes cms-pulse { from { transform: scale(1); opacity: .85; } to { transform: scale(1.9); opacity: 0; } }
.cms-play--glow b { box-shadow: 0 0 0 7px color-mix(in oklab, var(--pc) 30%, transparent), 0 0 34px 6px color-mix(in oklab, var(--pc) 55%, transparent); }

/* With the words: above them, or beside them on the left or the right; stacked on phones. */
.cms-playrow { position: relative; z-index: 1; max-width: 1136px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 36px; }
.cms-playrow > .cms-in { width: 100%; max-width: none; margin: 0; }
.cms-playrow--r { grid-template-columns: minmax(0, 1fr) auto; }
.cms-playrow--r > .cms-play { order: 2; }
.cms-playrow--c { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cms-playrow--c > .cms-in { max-width: 1136px; }
/* A tall Hero gives its height to the row, so the button stays beside or just above its words. */
.cms-playrow--c { justify-content: center; }
.cms-playrow:has(> .cms-hero--h-tall) { min-height: min(560px, 72vh); }
.cms-playrow:has(> .cms-hero--h-screen) { min-height: calc(100vh - 220px); }
.cms-playrow > :is(.cms-hero--h-tall, .cms-hero--h-screen) { min-height: 0; }
@media (max-width: 640px) { .cms-playrow { display: flex; flex-direction: column; align-items: center; gap: 20px; } .cms-playrow--r > .cms-play { order: 0; } }
@media (max-width: 640px) { .cms-playrow:has(> .cms-hero--h-screen) { min-height: calc(100vh - 160px); } }

/* On the section: one of nine points, 24px in from its edges, then nudged across and up. */
.cms-sec > .cms-play--at { position: absolute; z-index: 3; --px: 0px; --py: 0px; transform: translate(calc(var(--tx, 0%) + var(--pnx, 0px)), calc(var(--ty, 0%) - var(--pny, 0px))); }
.cms-play--at-tl, .cms-play--at-l, .cms-play--at-bl { left: 24px; }
.cms-play--at-tr, .cms-play--at-r, .cms-play--at-br { right: 24px; }
.cms-play--at-t, .cms-play--at-c, .cms-play--at-b { left: 50%; --tx: -50%; }
.cms-play--at-tl, .cms-play--at-t, .cms-play--at-tr { top: 24px; }
.cms-play--at-bl, .cms-play--at-b, .cms-play--at-br { bottom: 24px; }
.cms-play--at-l, .cms-play--at-c, .cms-play--at-r { top: 50%; --ty: -50%; }

/* Playing in the section: the words step aside, the player fills it, and Back returns to the loop. */
.cms-sec.is-playing > :not(.cms-bgv, .cms-bgs, .cms-player, .cms-edge, style) { visibility: hidden; }
.cms-player { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: #05080F; }
.cms-player video { width: 100%; height: 100%; object-fit: contain; }
.cms-player__back, .cms-vlb__x { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 99px; background: rgba(13, 24, 48, .78); color: #fff; font: 700 13px/1.2 var(--font-body, system-ui), sans-serif; cursor: pointer; }
.cms-player__back:focus-visible, .cms-vlb__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* In a lightbox: the one window the site opens besides a picture's, and only when it is chosen. */
.cms-vlb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 56px 20px 20px; background: rgba(5, 8, 15, .88); }
.cms-vlb__box { width: min(1100px, 100%); aspect-ratio: 16 / 9; max-height: calc(100vh - 90px); border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.cms-vlb__box video { display: block; width: 100%; height: 100%; object-fit: contain; }
body.cms-vlb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cms-play--pulse b::before, .cms-play--pulse b::after { animation: none; opacity: 0; }
  .cms-play b { transition: none; }
  .cms-bgs__i { transition: none; }
  .cms-sec[data-cms-par] > :is(.cms-bgv, .cms-bgs) { top: 0; bottom: 0; transform: none !important; }
}
.cms-form__join { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.cms-form__join input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--gold); }

/* A Form section with no form yet (M249), shown in the builder's canvas only. */
.cms-form__none p { margin: 0; padding: 22px; border: 1.5px dashed var(--border, #dde4f2); border-radius: 12px; text-align: center; font-size: 14px; color: var(--muted); }

/* Notice (M320): the whole screen on the band, centred, what Coming soon and Maintenance show. */
.cms-sec:has(> .cms-notice) { padding: 0; }
.cms-notice { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 56px 20px; text-align: center; color: var(--on-band, #fff); }
.cms-notice__in { width: 100%; max-width: 760px; }
.cms-notice__logo { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px; font: 800 15px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; opacity: .92; }
.cms-notice__logo img { width: 30px; height: 30px; object-fit: contain; }
.cms-notice__kick { display: block; width: max-content; max-width: 100%; margin: 0 auto; padding-top: 16px; border-top: 1px solid color-mix(in oklab, currentColor 25%, transparent); font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.cms-notice__logo + .cms-notice__kick { margin-top: 0; }
.cms-notice__h { margin: 22px 0 18px; font: 800 clamp(32px, 4.4vw, 54px)/1.14 var(--font-display); color: #fff; text-wrap: balance; }
.cms-notice__lede { max-width: 540px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: color-mix(in oklab, #fff 88%, transparent); }
.cms-notice__pill { display: inline-flex; align-items: center; gap: 8px; margin: 30px 0 0; padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .13); font-weight: 700; font-size: 14px; }
.cms-notice__pill i { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; }
.cms-notice__hint { margin: 24px 0 0; font-size: 13px; opacity: .75; }
.cms-notice__mail { margin: 18px 0 0; font-size: 15px; color: color-mix(in oklab, #fff 85%, transparent); }
.cms-notice__mail a { color: #fff; font-weight: 700; }
.cms-notice__su { max-width: 460px; margin: 34px auto 0; text-align: left; }
.cms-notice__su .cms-su { padding: 0; max-width: none; }
.cms-notice__su .cms-su__words { display: none; }
.cms-notice__su .cms-su__agree { text-align: center; color: color-mix(in oklab, #fff 85%, transparent); }
.cms-notice__su .cms-su__done b { color: #fff; }
.cms-notice .cms-notice__su .cms-su__row { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
.cms-notice .cms-notice__su .cms-su__row input[type="email"], .cms-notice .cms-notice__su .cms-su__row input[type="text"] { flex: 1 1 auto; min-width: 0; height: 52px; box-sizing: border-box; margin: 0; padding: 0 16px; border: 0; border-radius: var(--r-field, 12px); background: #fff; color: #141c2b; font-size: 15.5px; }
.cms-notice .cms-notice__su .cms-su__row input::placeholder { color: #6b7280; -webkit-text-fill-color: #6b7280; }
.cms-notice .cms-notice__su .cms-su__row .cms-form__send { flex: none; width: auto; height: 52px; margin: 0; padding: 0 22px; }
.cms-notice .cms-notice__su .cms-su__agree { margin: 14px 0 0; font-size: 13.5px; }
@media (max-width: 520px) { .cms-notice .cms-notice__su .cms-su__row { flex-direction: column; } .cms-notice .cms-notice__su .cms-su__row input[type="email"], .cms-notice .cms-notice__su .cms-su__row input[type="text"], .cms-notice .cms-notice__su .cms-su__row .cms-form__send { flex: none; width: 100%; } }